/* Hybrid professional dashboard theme (light, clean, DM Sans for body & headings) */
@font-face {
  font-family: 'DM Sans';
  src: url('../assets/fonts/DM-Sans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../assets/fonts/DM-Sans-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../assets/fonts/DM-Sans-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../assets/fonts/DM-Sans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root{
  --bg:          #F4F6FA;
  --surface:     #FFFFFF;
  --surface-2:   #F8FAFC;
  --dark:        #0A0F1E;
  --dark-2:      #0F172A;
  --dark-3:      #1E293B;
  --primary:     #1746A2;
  --primary-h:   #1D55C4;
  --primary-dim: rgba(23,70,162,.12);
  --primary-bg:  #EBF0FF;
  --green:       #047857;
  --green-bg:    #ECFDF5;
  --red:         #B91C1C;
  --red-bg:      #FEF2F2;
  --amber:       #92400E;
  --amber-bg:    #FFFBEB;
  --text:        #0A0F1E;
  --text-2:      #374151;
  --muted:       #6B7280;
  --muted-lt:    #9CA3AF;
  --border:      #E2E8F0;
  --border-dk:   #CBD5E1;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-2xl:26px;
  --sh-xs: 0 1px 2px rgba(0,0,0,.05);
  --sh-sm: 0 2px 10px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
  --sh-md: 0 6px 24px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);
  --sh-lg: 0 20px 56px rgba(0,0,0,.12), 0 4px 16px rgba(0,0,0,.06);
  --fd: 'DM Sans', 'DM Sans var', system-ui, -apple-system, sans-serif;
  --fb: 'DM Sans', 'DM Sans var', system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.16,1,.3,1);
  --sw: 240px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--fb);background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden}
a{text-decoration:none;color:inherit}
button{font-family:var(--fb);cursor:pointer;border:none;background:none}
svg{display:block;flex-shrink:0}

.app{display:grid;grid-template-columns:var(--sw) 1fr;grid-template-rows:58px 1fr;min-height:100vh}
.topbar{grid-column:1/-1;height:58px;display:flex;align-items:center;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:200;box-shadow:var(--sh-xs)}
.topbar-brand{width:var(--sw);flex-shrink:0;display:flex;align-items:center;gap:10px;padding:0 22px;height:100%;border-right:1px solid var(--border)}
.logo-mark{width:30px;height:30px;background:var(--primary);border-radius:7px;display:flex;align-items:center;justify-content:center}
.logo-name{font-weight:700;font-size:16px;letter-spacing:-.3px;color:var(--text)}
.topbar-mid{flex:1;display:flex;align-items:center;padding:0 28px;gap:16px}
.topbar-right{display:flex;align-items:center;gap:8px;padding:0 20px;margin-left:auto}
.btn{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;padding:9px 14px;border-radius:var(--r-sm);transition:all 160ms var(--ease);white-space:nowrap;line-height:1.2;border:1px solid var(--border);color:var(--text-2);background:var(--surface)}
.btn:hover{background:var(--surface-2);box-shadow:var(--sh-sm);transform:translateY(-1px)}
.btn--primary{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 1px 4px rgba(23,70,162,.3)}
.btn--primary:hover{background:var(--primary-h);box-shadow:0 6px 18px rgba(23,70,162,.28)}
.btn--danger{background:rgba(185,28,28,.08);color:var(--red);border-color:rgba(185,28,28,.4)}
.btn--danger:hover{background:var(--red-bg)}
.btn--ghost{background:transparent}

.sidebar{background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;position:sticky;top:58px;height:calc(100vh - 58px);overflow-y:auto}
.sb-section{padding:18px 12px 6px}
.sb-label{font-size:10px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted-lt);padding:0 8px;margin-bottom:6px}
.sb-role{font-size:12px;color:var(--muted);margin-top:2px;}
.sb-role.linkish{background:none;border:none;padding:0;margin:0;color:var(--primary);cursor:pointer;text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(23,70,162,.35);}
.nav-link{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-md);font-size:13.5px;font-weight:500;color:var(--muted);transition:all 140ms}
.nav-link:hover{color:var(--text);background:var(--bg)}
.nav-link.active{color:var(--primary);background:var(--primary-bg);font-weight:600}
.nav-ic{width:32px;height:32px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--muted-lt)}
.nav-link.active .nav-ic{color:var(--primary);background:rgba(23,70,162,.1)}
.nav-txt{flex:1;min-width:0}
.nav-count{font-size:11px;font-weight:700;padding:2px 7px;border-radius:10px;flex-shrink:0;background:var(--bg);color:var(--muted)}
.sb-footer{margin-top:auto;padding:14px 12px;border-top:1px solid var(--border)}
.sb-logout{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--red);padding:8px 10px;border-radius:var(--r-sm);transition:background 140ms}
.sb-logout:hover{background:var(--red-bg)}

.main{padding:26px 28px 64px;min-width:0}
.pg-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px;flex-wrap:wrap}
.pg-title{font-family:var(--fd);font-size:clamp(22px,2.4vw,28px);font-weight:700;letter-spacing:-.4px;line-height:1.2;color:var(--dark)}
.pg-sub{font-size:13px;color:var(--muted);margin-top:4px}
.pg-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.summary-bar{display:none}

.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.kpi-card{
  background:linear-gradient(145deg,#fff,#f5f7fb);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:16px 18px;
  box-shadow:var(--sh-md);
  position:relative;
  overflow:hidden;
  transition:transform 180ms var(--ease), box-shadow 180ms var(--ease);
}
.kpi-card:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)}
.kpi-ribbon{
  position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,#1746A2,#38bdf8);
}
.kpi-card.risk .kpi-ribbon{background:linear-gradient(90deg,#b91c1c,#f97316)}
.kpi-card.active .kpi-ribbon{background:linear-gradient(90deg,#047857,#22c55e)}
.kpi-card.health .kpi-ribbon{background:linear-gradient(90deg,#92400e,#f59e0b)}
.kpi-title{font-size:11px;font-weight:800;letter-spacing:.8px;color:var(--muted);text-transform:uppercase;margin-bottom:8px}
.kpi-value{font-family:var(--fd);font-size:24px;font-weight:700;color:var(--text);margin-bottom:4px;letter-spacing:-0.4px}
.kpi-note{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}
.kpi-chip{padding:4px 8px;border-radius:999px;font-size:11px;font-weight:700;border:1px solid var(--border);background:var(--surface-2);color:var(--primary)}

.analytics-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm)}
.card-head{padding:15px 18px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px}
.card-title{font-size:14px;font-weight:700;color:var(--text)}
.chart-area-pad{padding:18px}
canvas{display:block;width:100%!important}

.customer-pages{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:16px}
.customer-page{padding:14px 16px;border-radius:var(--r-lg);border:1px solid var(--border);background:linear-gradient(145deg,#fff,#f7f9fd);box-shadow:var(--sh-sm);display:flex;flex-direction:column;gap:6px;transition:transform 180ms,box-shadow 180ms}
.customer-page:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.status-label{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.status-value{font-size:22px;font-weight:800;margin:0;color:var(--text)}
.page-note{margin:0;color:var(--muted);font-size:13px}
.page-footer{display:flex;justify-content:flex-end;margin-top:auto}
.page-pill{padding:6px 10px;border-radius:999px;background:var(--primary-bg);color:var(--primary);font-weight:700;font-size:12px;border:1px solid rgba(23,70,162,.2)}

.dashboard-body{display:grid;grid-template-columns:1.15fr 0.85fr;gap:12px}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px 18px;box-shadow:var(--sh-sm)}
.panel h2{margin:0 0 6px;font-size:16px;font-weight:700;color:var(--text)}
.panel-note{margin:0 0 12px;color:var(--muted);font-size:13px}

.list{list-style:none;margin:0;padding:0}
.list-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);cursor:pointer;transition:background 140ms}
.list-item:last-child{border-bottom:none}
.list-item:hover{background:var(--surface-2)}
.list-item .info{flex:1;min-width:0}
.list-item .name{font-weight:700;margin:0;color:var(--text)}
.list-item .meta{margin:3px 0 0;color:var(--muted);font-size:12px}
.badge{padding:4px 8px;border-radius:999px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.badge-risk{background:var(--red-bg);color:var(--red)}
.badge-vip{background:var(--amber-bg);color:var(--amber)}

.loading-state,.error-state{color:var(--muted);text-align:center;margin:12px 0;font-size:13px}
.hidden{display:none!important}

.action-notice{position:fixed;bottom:18px;left:18px;background:var(--dark-2);color:#e2e8f0;padding:12px 16px;border-radius:12px;border:1px solid var(--border);box-shadow:var(--sh-lg);opacity:0;transform:translateY(10px);transition:opacity 200ms ease,transform 200ms ease;z-index:1000;font-size:13px}
.action-notice.visible{opacity:1;transform:translateY(0)}

.import-dialog{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(7,11,20,.55);backdrop-filter:blur(6px);z-index:900}
.import-dialog.hidden{display:none}
.import-dialog__box{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:22px 24px;width:min(520px,92%);box-shadow:var(--sh-lg)}
.import-dialog__box h3{margin:0 0 6px;font-size:18px;font-weight:700;color:var(--text)}
.import-dialog__box p,.import-dialog__box ul{color:var(--muted);font-size:13px;line-height:1.6}
.import-dialog__box ul{padding-left:18px;margin:10px 0}
.dialog-close{margin-top:12px;width:100%;justify-content:center}
#import-input{display:none}

.dlg-mapping{
  width:min(860px,96vw);
  max-height:88vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.mapping-meta{margin:10px 0 8px;color:var(--muted);font-size:12px}
.mapping-warn{margin:8px 0 12px;padding:10px 12px;border-radius:10px;background:rgba(185,28,28,.08);border:1px solid rgba(185,28,28,.35);color:#b91c1c;font-size:12px}
.mapping-table-wrap{
  min-height:170px;
  max-height:280px;
  overflow:auto;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-2);
}
.mapping-table{width:100%;border-collapse:collapse}
.mapping-table th,.mapping-table td{padding:10px 12px;text-align:left;font-size:12px;border-bottom:1px solid var(--border)}
.mapping-table th{position:sticky;top:0;background:var(--surface);z-index:1}
.mapping-table td select{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font-size:12px}
.mapping-sample{margin-top:12px}
.mapping-sample-title{font-size:12px;color:var(--muted);margin-bottom:6px}
#mapping-sample-table-wrap{
  max-height:180px;
  overflow:auto;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-2);
}
#mapping-sample-table-wrap table{
  width:100%;
  border-collapse:collapse;
}
#mapping-sample-table-wrap th,#mapping-sample-table-wrap td{
  padding:8px 10px;
  border-bottom:1px solid var(--border);
  font-size:11px;
  text-align:left;
}
#mapping-sample-table-wrap th{
  position:sticky;
  top:0;
  background:var(--surface);
}

@media(max-width:1080px){.kpi-grid{grid-template-columns:repeat(2,1fr)}.analytics-row{grid-template-columns:1fr}.dashboard-body{grid-template-columns:1fr}}
@media(max-width:820px){:root{--sw:0px}.sidebar{display:none}.topbar-brand{width:auto;padding:0 16px}.main{padding:20px 18px 56px}.topbar-mid{display:none}}
@media(max-width:620px){.kpi-grid{grid-template-columns:1fr}.customer-pages{grid-template-columns:1fr}.pg-actions{width:100%}.pg-actions .btn{flex:1;justify-content:center}}