/* pro-redesign.css - Unified PR Component System */
:root {
  --pr-purple: #7c3aed;
  --pr-purple-light: #9d63fa;
  --pr-purple-soft: rgba(124,58,237,0.12);
  --pr-green: #0ECB81;
  --pr-green-soft: rgba(14,203,129,0.12);
  --pr-red: #F6465D;
  --pr-red-soft: rgba(246,70,93,0.12);
  --pr-amber: #F0B90B;
  --pr-amber-soft: rgba(240,185,11,0.12);
  --pr-bg: #F5F7FA;
  --pr-surface: #FFFFFF;
  --pr-border: #E6E8EC;
  --pr-text: #1E2026;
  --pr-muted: #707A8A;
  --pr-subtle: #848E9C;
  --pr-input-bg: #FFFFFF;
  --pr-hover: #F0F0F0;
  --pr-shadow: 0 2px 12px rgba(0,0,0,0.06);
  --pr-shadow-lg: 0 8px 32px rgba(0,0,0,0.10);
  --pr-radius: 0.875rem;
  --pr-radius-sm: 0.5rem;
  --pr-radius-lg: 1.25rem;
}
html.dark {
  --pr-bg: #0B0E11;
  --pr-surface: #161A1E;
  --pr-border: #2B2F36;
  --pr-text: #EAECEF;
  --pr-muted: #848E9C;
  --pr-subtle: #707A8A;
  --pr-input-bg: #1E2329;
  --pr-hover: #2B2F36;
  --pr-shadow: 0 2px 12px rgba(0,0,0,0.28);
  --pr-shadow-lg: 0 8px 32px rgba(0,0,0,0.40);
}
.pr-page-wrap{padding:1rem;max-width:1280px;margin:0 auto;}
@media(min-width:768px){.pr-page-wrap{padding:1.5rem 2rem;}}
@media(min-width:1024px){.pr-page-wrap{padding:2rem 2.5rem;}}
.pr-page-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;margin-bottom:1.5rem;}
.pr-page-header-left{display:flex;align-items:center;gap:.875rem;}
.pr-page-header-right{display:flex;align-items:center;gap:.75rem;}
.pr-page-title{font-size:1.25rem;font-weight:700;color:var(--pr-text);margin:0;line-height:1.3;}
.pr-page-subtitle{font-size:.8125rem;color:var(--pr-muted);margin:.125rem 0 0;}
.pr-back-btn{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:var(--pr-radius-sm);background:var(--pr-surface);border:1px solid var(--pr-border);color:var(--pr-text);text-decoration:none;transition:background .15s,transform .15s;flex-shrink:0;}
.pr-back-btn:hover{background:var(--pr-hover);transform:translateX(-2px);}
.pr-back-btn ion-icon{font-size:1.125rem;}
.pr-content-grid{display:grid;gap:1.25rem;}
.pr-card{background:var(--pr-surface);border:1px solid var(--pr-border);border-radius:var(--pr-radius);padding:1.25rem;box-shadow:var(--pr-shadow);transition:box-shadow .2s;}
.pr-card:hover{box-shadow:var(--pr-shadow-lg);}
.pr-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.125rem;padding-bottom:.875rem;border-bottom:1px solid var(--pr-border);}
.pr-card-title{display:flex;align-items:center;gap:.5rem;font-size:.9375rem;font-weight:600;color:var(--pr-text);margin:0;}
.pr-card-title ion-icon{font-size:1.125rem;}
.pr-stats-row{display:grid;gap:1rem;margin-bottom:1.25rem;}
.pr-stats-row.cols-2{grid-template-columns:repeat(2,1fr);}
.pr-stats-row.cols-3{grid-template-columns:repeat(3,1fr);}
.pr-stats-row.cols-4{grid-template-columns:repeat(2,1fr);}
@media(min-width:768px){.pr-stats-row.cols-4{grid-template-columns:repeat(4,1fr);}}
@media(max-width:480px){.pr-stats-row.cols-3{grid-template-columns:repeat(2,1fr);}}
.pr-stat-card{background:var(--pr-surface);border:1px solid var(--pr-border);border-radius:var(--pr-radius);padding:1rem 1.125rem;display:flex;align-items:center;gap:.875rem;box-shadow:var(--pr-shadow);}
.pr-stat-icon{width:2.75rem;height:2.75rem;border-radius:.625rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.pr-stat-icon ion-icon{font-size:1.375rem;}
.pr-stat-label{font-size:.75rem;color:var(--pr-muted);font-weight:500;margin-bottom:.1875rem;}
.pr-stat-value{font-size:1.1875rem;font-weight:700;color:var(--pr-text);line-height:1.2;}
.pr-stat-change{font-size:.75rem;font-weight:500;margin-top:.1875rem;}
.pr-stat-change.up{color:var(--pr-green);}
.pr-stat-change.down{color:var(--pr-red);}
.pr-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.6875rem 1.375rem;border-radius:var(--pr-radius-sm);font-size:.875rem;font-weight:600;cursor:pointer;border:none;text-decoration:none;transition:all .2s;white-space:nowrap;}
.pr-btn:active{transform:scale(.97);}
.pr-btn ion-icon{font-size:1rem;}
.pr-btn.w-full{width:100%;}
.pr-btn-primary{background:var(--pr-purple);color:#fff;}
.pr-btn-primary:hover{background:var(--pr-purple-light);box-shadow:0 4px 16px rgba(124,58,237,.35);color:#fff;}
.pr-btn-secondary{background:var(--pr-surface);color:var(--pr-text);border:1px solid var(--pr-border);}
.pr-btn-secondary:hover{background:var(--pr-hover);}
.pr-btn-success{background:var(--pr-green);color:#052e16;}
.pr-btn-danger{background:var(--pr-red);color:#fff;}
.pr-btn-amber{background:var(--pr-amber);color:#1E2026;}
.pr-btn-amber:hover{background:#C99A08;box-shadow:0 4px 16px rgba(240,185,11,.3);}
.pr-btn-sm{padding:.4375rem .875rem;font-size:.8125rem;}
.pr-btn-lg{padding:.875rem 2rem;font-size:1rem;}
.pr-btn[disabled],.pr-btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none;}
.pr-form-group{margin-bottom:1.125rem;}
.pr-label{display:block;font-size:.8125rem;font-weight:500;color:var(--pr-text);margin-bottom:.5rem;}
.pr-label-optional{color:var(--pr-muted);font-weight:400;}
.pr-input{width:100%;background:var(--pr-input-bg);border:1px solid var(--pr-border);border-radius:var(--pr-radius-sm);padding:.6875rem .875rem;font-size:.875rem;color:var(--pr-text);outline:none;transition:border-color .15s,box-shadow .15s;box-sizing:border-box;}
.pr-input::placeholder{color:var(--pr-subtle);}
.pr-input:focus{border-color:var(--pr-purple);box-shadow:0 0 0 3px var(--pr-purple-soft);}
.pr-input-wrap{position:relative;}
.pr-input-prefix{position:absolute;left:.875rem;top:50%;transform:translateY(-50%);color:var(--pr-muted);display:flex;align-items:center;pointer-events:none;}
.pr-input-prefix ion-icon{font-size:1rem;}
.pr-input.has-prefix{padding-left:2.5rem;}
.pr-hint{font-size:.75rem;color:var(--pr-muted);margin-top:.375rem;}
.pr-hint strong{color:var(--pr-text);}
.pr-badge{display:inline-flex;align-items:center;gap:.25rem;padding:.1875rem .625rem;border-radius:100px;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;}
.pr-badge-success{background:var(--pr-green-soft);color:var(--pr-green);}
.pr-badge-danger{background:var(--pr-red-soft);color:var(--pr-red);}
.pr-badge-warning{background:var(--pr-amber-soft);color:var(--pr-amber);}
.pr-badge-purple{background:var(--pr-purple-soft);color:var(--pr-purple);}
.pr-badge-muted{background:rgba(112,122,138,.12);color:var(--pr-muted);}
.pr-alert{display:flex;align-items:flex-start;gap:.75rem;padding:.875rem 1rem;border-radius:var(--pr-radius-sm);border-left:3px solid;margin-bottom:1.25rem;font-size:.875rem;}
.pr-alert ion-icon{font-size:1.25rem;flex-shrink:0;margin-top:.0625rem;}
.pr-alert.warning{background:var(--pr-amber-soft);border-color:var(--pr-amber);color:var(--pr-text);}
.pr-alert.warning ion-icon{color:var(--pr-amber);}
.pr-alert.danger{background:var(--pr-red-soft);border-color:var(--pr-red);color:var(--pr-text);}
.pr-alert.danger ion-icon{color:var(--pr-red);}
.pr-alert.success{background:var(--pr-green-soft);border-color:var(--pr-green);color:var(--pr-text);}
.pr-alert.success ion-icon{color:var(--pr-green);}
.pr-alert.info{background:var(--pr-purple-soft);border-color:var(--pr-purple);color:var(--pr-text);}
.pr-alert.info ion-icon{color:var(--pr-purple);}
.pr-list{list-style:none;padding:0;margin:0;}
.pr-list-item{display:flex;align-items:center;gap:.875rem;padding:.875rem 0;border-bottom:1px solid var(--pr-border);transition:background .15s;}
.pr-list-item:last-child{border-bottom:none;}
.pr-list-item-icon{width:2.25rem;height:2.25rem;border-radius:.5rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.pr-list-item-icon ion-icon{font-size:1.0625rem;}
.pr-list-item-body{flex:1;min-width:0;}
.pr-list-item-title{font-size:.875rem;font-weight:500;color:var(--pr-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pr-list-item-sub{font-size:.75rem;color:var(--pr-muted);margin-top:.0625rem;}
.pr-list-item-meta{text-align:right;flex-shrink:0;}
.pr-list-item-amount{font-size:.875rem;font-weight:600;color:var(--pr-text);}
.pr-list-item-date{font-size:.6875rem;color:var(--pr-muted);margin-top:.125rem;}
.pr-tabs{display:flex;gap:.25rem;background:var(--pr-hover);padding:.25rem;border-radius:var(--pr-radius-sm);margin-bottom:1.25rem;}
.pr-tab{flex:1;padding:.5rem .875rem;border-radius:calc(var(--pr-radius-sm) - 2px);font-size:.8125rem;font-weight:500;color:var(--pr-muted);cursor:pointer;border:none;background:transparent;text-align:center;transition:all .15s;}
.pr-tab.active{background:var(--pr-surface);color:var(--pr-text);box-shadow:var(--pr-shadow);}
.pr-empty{text-align:center;padding:2.5rem 1rem;color:var(--pr-muted);}
.pr-empty ion-icon{font-size:3rem;display:block;margin:0 auto .75rem;color:var(--pr-border);}
.pr-empty h4{font-size:.9375rem;font-weight:600;color:var(--pr-text);margin:0 0 .375rem;}
.pr-empty p{font-size:.8125rem;margin:0;}
.pr-method-card{background:var(--pr-surface);border:2px solid var(--pr-border);border-radius:var(--pr-radius);padding:1rem 1.125rem;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:.875rem;text-decoration:none;}
.pr-method-card:hover{border-color:var(--pr-purple);box-shadow:0 0 0 3px var(--pr-purple-soft);}
.pr-method-card.active{border-color:var(--pr-purple);background:var(--pr-purple-soft);}
.pr-method-icon{width:2.75rem;height:2.75rem;border-radius:.625rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.pr-method-icon ion-icon{font-size:1.375rem;}
.pr-method-name{font-size:.875rem;font-weight:600;color:var(--pr-text);}
.pr-method-label{font-size:.75rem;color:var(--pr-muted);margin-top:.0625rem;}
.pr-table-wrap{overflow-x:auto;}
.pr-table{width:100%;border-collapse:collapse;font-size:.875rem;}
.pr-table th{padding:.75rem 1rem;text-align:left;font-size:.75rem;font-weight:600;color:var(--pr-muted);border-bottom:1px solid var(--pr-border);white-space:nowrap;}
.pr-table td{padding:.875rem 1rem;color:var(--pr-text);border-bottom:1px solid var(--pr-border);vertical-align:middle;}
.pr-table tr:last-child td{border-bottom:none;}
.pr-table tr:hover td{background:var(--pr-hover);}
.pr-divider{height:1px;background:var(--pr-border);margin:1rem 0;}
.pr-upload-box{border:2px dashed var(--pr-border);border-radius:var(--pr-radius);padding:2rem;text-align:center;cursor:pointer;transition:all .2s;color:var(--pr-muted);}
.pr-upload-box:hover{border-color:var(--pr-purple);background:var(--pr-purple-soft);color:var(--pr-purple);}
.pr-upload-box ion-icon{font-size:2.5rem;display:block;margin:0 auto .625rem;}
.pr-upload-box p{font-size:.875rem;margin:0;}
.pr-toggle{position:relative;display:inline-block;width:2.75rem;height:1.5rem;}
.pr-toggle input{opacity:0;width:0;height:0;}
.pr-toggle-slider{position:absolute;cursor:pointer;inset:0;background:var(--pr-border);border-radius:100px;transition:.2s;}
.pr-toggle input:checked+.pr-toggle-slider{background:var(--pr-purple);}
.pr-toggle input:checked+.pr-toggle-slider:before{transform:translateX(1.25rem);}
.pr-skeleton{background:linear-gradient(90deg,var(--pr-border) 25%,var(--pr-hover) 50%,var(--pr-border) 75%);background-size:200% 100%;animation:pr-shimmer 1.4s infinite;border-radius:var(--pr-radius-sm);}
@keyframes pr-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--pr-border);border-radius:100px;}
::-webkit-scrollbar-thumb:hover{background:var(--pr-muted);}
@media(max-width:767px){.pr-hide-mobile{display:none!important;}}
@media(min-width:768px){.pr-show-mobile-only{display:none!important;}}

/* ── Light Mode Professional Refinements ─────────────────────── */

/* Sharper card borders in light */
:root .pr-card {
  border-color: #e2e5ea;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05), 0 2px 12px rgba(0,0,0,0.04);
}
:root .pr-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.10);
}

/* Crisper stat cards in light */
:root .pr-stat-card {
  border-color: #e2e5ea;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* Slightly elevated header in light mode */
:root #mainHeader {
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 6px rgba(0,0,0,0.04);
}

/* Better table stripes in light */
:root .pr-table tr:hover td {
  background: #f7f8fa;
}

/* Professional focus ring */
:root .pr-input:focus {
  border-color: var(--pr-purple);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.10);
}

/* More visible tab active state in light */
:root .pr-tab.active {
  background: #ffffff;
  color: #1E2026;
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
}

/* Upload box polish */
:root .pr-upload-box:hover {
  background: rgba(124,58,237,0.04);
}

/* ── Dark Mode Overrides ─────────────────────────────────────── */
html.dark .pr-card {
  border-color: var(--pr-border);
  box-shadow: var(--pr-shadow);
}
html.dark .pr-card:hover {
  box-shadow: var(--pr-shadow-lg);
}
html.dark #mainHeader {
  box-shadow: none;
}