/* ================================================================
   Tathya – Design System
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ── CSS Custom Properties ── */
:root {
  --primary-50: #EFF6FF; --primary-100: #DBEAFE; --primary-200: #BFDBFE;
  --primary-400: #60A5FA; --primary-500: #3B82F6; --primary-600: #2563EB;
  --primary-700: #1D4ED8; --primary-800: #1E40AF;

  --teal-50: #F0FDFA; --teal-100: #CCFBF1; --teal-400: #2DD4BF;
  --teal-500: #14B8A6; --teal-600: #0D9488; --teal-700: #0F766E;

  --green-50: #ECFDF5; --green-500: #10B981; --green-600: #059669;
  --orange-50: #FFFBEB; --orange-500: #F59E0B; --orange-600: #D97706;
  --red-50: #FEF2F2; --red-500: #EF4444; --red-600: #DC2626;
  --purple-50: #F5F3FF; --purple-500: #8B5CF6; --purple-600: #7C3AED;

  /* Semantic (Light) */
  --bg:              #F1F5F9;
  --bg-secondary:    #E2E8F0;
  --card:            #FFFFFF;
  --card-hover:      #F8FAFC;
  --border:          #E2E8F0;
  --border-strong:   #CBD5E1;
  --text:            #0F172A;
  --text-secondary:  #475569;
  --text-muted:      #94A3B8;
  --text-disabled:   #CBD5E1;

  /* Sidebar */
  --sb-bg:      #0F172A;
  --sb-hover:   #1E293B;
  --sb-text:    #94A3B8;
  --sb-active:  rgba(37,99,235,.15);
  --sb-w:       260px;
  --sb-col:     72px;

  /* Layout */
  --header-h:   64px;
  --header-bg:  #FFFFFF;
  --header-br:  #E2E8F0;

  /* Shadows */
  --sh-xs:  0 1px 2px rgba(0,0,0,.05);
  --sh-sm:  0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
  --sh:     0 4px 6px -1px rgba(0,0,0,.08),0 2px 4px -1px rgba(0,0,0,.04);
  --sh-md:  0 10px 15px -3px rgba(0,0,0,.08),0 4px 6px -2px rgba(0,0,0,.04);
  --sh-lg:  0 20px 25px -5px rgba(0,0,0,.10),0 10px 10px -5px rgba(0,0,0,.04);
  --sh-xl:  0 25px 50px -12px rgba(0,0,0,.15);
  --sh-pri: 0 8px 25px -5px rgba(37,99,235,.40);

  /* Radius */
  --r-xs: 4px; --r-sm: 6px; --r: 10px; --r-md: 12px;
  --r-lg: 16px; --r-xl: 20px; --r-2xl: 24px; --r-full: 9999px;

  /* Motion */
  --ease: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(0,0,.2,1);
  --dur-fast: .15s; --dur: .2s; --dur-slow: .35s;

  /* Z-layers */
  --z-sb: 100; --z-hdr: 200; --z-backdrop: 300; --z-modal: 400; --z-toast: 600;

  /* Type */
  --font: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --text-xs: .75rem; --text-sm: .875rem; --text-base: 1rem;
  --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem;
  --text-3xl: 1.875rem; --text-4xl: 2.25rem;
}

/* ── Dark Mode ── */
[data-theme="dark"] {
  --bg:            #0F172A;
  --bg-secondary:  #1E293B;
  --card:          #1E293B;
  --card-hover:    #263548;
  --border:        #334155;
  --border-strong: #475569;
  --text:          #F1F5F9;
  --text-secondary:#CBD5E1;
  --text-muted:    #64748B;
  --text-disabled: #475569;
  --sb-bg:         #020617;
  --sb-hover:      #0F172A;
  --header-bg:     #1E293B;
  --header-br:     #334155;
  --sh-xs: 0 1px 2px rgba(0,0,0,.3);
  --sh-sm: 0 1px 3px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.3);
  --sh:    0 4px 6px -1px rgba(0,0,0,.4),0 2px 4px -1px rgba(0,0,0,.3);
  --sh-md: 0 10px 15px -3px rgba(0,0,0,.4),0 4px 6px -2px rgba(0,0,0,.3);
  --sh-lg: 0 20px 25px -5px rgba(0,0,0,.5),0 10px 10px -5px rgba(0,0,0,.3);
  --sh-xl: 0 25px 50px -12px rgba(0,0,0,.65);
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);font-size:var(--text-sm);color:var(--text);
  background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
a{text-decoration:none;color:var(--primary-600)}
img{max-width:100%;height:auto;display:block}
button,input,select,textarea{font-family:var(--font);border:none;background:none;cursor:pointer}
ul{list-style:none}

/* Scrollbar */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--r-full)}
::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}

/* ── App Layout ── */
.app-layout{display:flex;min-height:100vh;overflow:hidden}
.main-content{flex:1;display:flex;flex-direction:column;min-width:0;
  margin-left:var(--sb-w);transition:margin-left var(--dur-slow) var(--ease)}
.main-content.collapsed{margin-left:var(--sb-col)}
.page-content{flex:1;padding:1.5rem;overflow-y:auto;margin-top:var(--header-h)}

/* ── Sidebar ── */
.sidebar{
  position:fixed;top:0;left:0;width:var(--sb-w);height:100vh;
  background:var(--sb-bg);display:flex;flex-direction:column;
  z-index:var(--z-sb);overflow:hidden;
  transition:width var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}
.sidebar.collapsed{width:var(--sb-col)}
.sidebar-brand{
  display:flex;align-items:center;gap:.75rem;padding:0 1.25rem;
  height:var(--header-h);border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0}
.brand-icon{
  width:40px;height:40px;border-radius:var(--r-sm);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.15)}
.brand-icon img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-sm)}
.brand-text{overflow:hidden;transition:opacity var(--dur) var(--ease)}
.sidebar.collapsed .brand-text{opacity:0;width:0}
.brand-name{color:#F1F5F9;font-size:var(--text-base);font-weight:800;
  white-space:nowrap;letter-spacing:-.02em}
.brand-tag{color:var(--sb-text);font-size:10px;white-space:nowrap;letter-spacing:.01em}

.sidebar-nav{flex:1;padding:.75rem .5rem;overflow-y:auto;overflow-x:hidden}
.nav-group{margin-bottom:1.5rem}
.nav-label{
  color:#475569;font-size:10px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;padding:0 .75rem;margin-bottom:.5rem;
  white-space:nowrap;transition:opacity var(--dur) var(--ease)}
.sidebar.collapsed .nav-label{opacity:0}
.nav-item{
  display:flex;align-items:center;gap:.75rem;padding:.625rem .75rem;
  border-radius:var(--r);color:var(--sb-text);font-size:var(--text-sm);
  font-weight:500;cursor:pointer;transition:all var(--dur-fast) var(--ease);
  white-space:nowrap;margin-bottom:2px;position:relative;overflow:visible}
.nav-item:hover{background:var(--sb-hover);color:#E2E8F0}
.nav-item.active{background:var(--sb-active);color:#93C5FD}
.nav-item.active::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--primary-600);border-radius:0 3px 3px 0}
.nav-icon{
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);font-size:var(--text-base);flex-shrink:0}
.nav-item.active .nav-icon{background:rgba(37,99,235,.2);color:var(--primary-400)}
.nav-text{flex:1;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.sidebar.collapsed .nav-text{opacity:0;transform:translateX(-8px);pointer-events:none}
.nav-badge{
  background:var(--red-500);color:#fff;font-size:10px;font-weight:700;
  padding:1px 6px;border-radius:var(--r-full);
  transition:opacity var(--dur) var(--ease)}
.sidebar.collapsed .nav-badge{opacity:0}

/* Collapsed tooltip */
.sidebar.collapsed .nav-item{position:relative}
.sidebar.collapsed .nav-item::after{
  content:attr(data-tip);position:absolute;left:calc(var(--sb-col) + 4px);top:50%;
  transform:translateY(-50%);background:#1E293B;color:#F1F5F9;
  font-size:var(--text-xs);font-weight:500;padding:.375rem .625rem;
  border-radius:var(--r-sm);white-space:nowrap;opacity:0;pointer-events:none;
  box-shadow:var(--sh-md);z-index:10;border:1px solid #334155;
  transition:opacity var(--dur-fast) var(--ease)}
.sidebar.collapsed .nav-item:hover::after{opacity:1}

.sidebar-footer{
  padding:.75rem .5rem;border-top:1px solid rgba(255,255,255,.07);flex-shrink:0}
.sidebar-user{
  display:flex;align-items:center;gap:.75rem;padding:.5rem .5rem;
  border-radius:var(--r);cursor:pointer;
  transition:background var(--dur-fast) var(--ease)}
.sidebar-user:hover{background:var(--sb-hover)}
.sb-avatar{
  width:36px;height:36px;border-radius:var(--r-full);flex-shrink:0;
  background:linear-gradient(135deg,var(--primary-600),var(--teal-600));
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:var(--text-xs);font-weight:700}
.sb-user-info{flex:1;overflow:hidden;transition:opacity var(--dur) var(--ease)}
.sidebar.collapsed .sb-user-info{opacity:0}
.sb-user-name{color:#E2E8F0;font-size:var(--text-sm);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-user-role{color:var(--sb-text);font-size:var(--text-xs)}

/* ── Topbar ── */
.topbar{
  position:fixed;top:0;right:0;left:var(--sb-w);height:var(--header-h);
  background:var(--header-bg);border-bottom:1px solid var(--header-br);
  display:flex;align-items:center;padding:0 1.5rem;gap:1rem;
  z-index:var(--z-hdr);box-shadow:var(--sh-xs);
  transition:left var(--dur-slow) var(--ease),
             background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.topbar.collapsed{left:var(--sb-col)}
.topbar-toggle{
  width:36px;height:36px;border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-secondary);font-size:var(--text-base);
  transition:all var(--dur-fast) var(--ease);flex-shrink:0}
.topbar-toggle:hover{background:var(--bg);color:var(--text)}
.topbar-title{flex:1}
.topbar-title h1{font-size:var(--text-lg);font-weight:700;color:var(--text);letter-spacing:-.02em}
.topbar-title p{font-size:var(--text-xs);color:var(--text-muted)}
.topbar-search{
  display:flex;align-items:center;gap:.5rem;background:var(--bg);
  border:1.5px solid var(--border);border-radius:var(--r);
  padding:.5rem .75rem;width:260px;
  transition:all var(--dur-fast) var(--ease)}
.topbar-search:focus-within{border-color:var(--primary-500);
  box-shadow:0 0 0 3px rgba(37,99,235,.12);background:var(--card)}
.topbar-search i{color:var(--text-muted);font-size:var(--text-sm)}
.topbar-search input{border:none;background:none;outline:none;
  font-size:var(--text-sm);color:var(--text);width:100%}
.topbar-search input::placeholder{color:var(--text-muted)}
.topbar-actions{display:flex;align-items:center;gap:.5rem}
.topbar-btn{
  width:36px;height:36px;border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-secondary);font-size:var(--text-sm);
  transition:all var(--dur-fast) var(--ease);position:relative}
.topbar-btn:hover{background:var(--bg);color:var(--text)}
.topbar-btn .dot{
  position:absolute;top:7px;right:7px;width:8px;height:8px;
  background:var(--red-500);border-radius:var(--r-full);
  border:2px solid var(--header-bg)}
.topbar-divider{width:1px;height:24px;background:var(--border)}
.topbar-avatar{
  width:36px;height:36px;border-radius:var(--r-full);cursor:pointer;
  background:linear-gradient(135deg,var(--primary-600),var(--teal-600));
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:var(--text-xs);font-weight:700;flex-shrink:0}

/* ── Page Sections ── */
.section{display:none;animation:fadeUp .3s var(--ease) forwards}
.section.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.section-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  margin-bottom:1.5rem;gap:1rem;flex-wrap:wrap}
.section-head-left h2{
  font-size:var(--text-2xl);font-weight:800;color:var(--text);letter-spacing:-.03em}
.section-head-left p{font-size:var(--text-sm);color:var(--text-muted);margin-top:.25rem}
.section-actions{display:flex;align-items:center;gap:.75rem;flex-shrink:0}

/* ── Stat Cards ── */
.stats-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1.25rem;margin-bottom:1.5rem}
.stat-card{
  background:var(--card);border-radius:var(--r-md);border:1px solid var(--border);
  padding:1.25rem;box-shadow:var(--sh-sm);transition:all var(--dur) var(--ease);
  position:relative;overflow:hidden}
.stat-card:hover{box-shadow:var(--sh-md);transform:translateY(-2px)}
.stat-card::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:3px;
  opacity:0;transition:opacity var(--dur) var(--ease)}
.stat-card:hover::after{opacity:1}
.stat-card.blue::after{background:linear-gradient(90deg,var(--primary-600),var(--primary-400))}
.stat-card.teal::after{background:linear-gradient(90deg,var(--teal-600),var(--teal-400))}
.stat-card.green::after{background:linear-gradient(90deg,var(--green-600),var(--green-500))}
.stat-card.orange::after{background:linear-gradient(90deg,var(--orange-600),var(--orange-500))}
.stat-card.red::after{background:linear-gradient(90deg,var(--red-600),var(--red-500))}
.stat-card.purple::after{background:linear-gradient(90deg,var(--purple-600),var(--purple-500))}
.stat-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.stat-icon{
  width:44px;height:44px;border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;font-size:1.25rem}
.stat-icon.blue{background:var(--primary-50);color:var(--primary-600)}
.stat-icon.teal{background:var(--teal-50);color:var(--teal-600)}
.stat-icon.green{background:var(--green-50);color:var(--green-600)}
.stat-icon.orange{background:var(--orange-50);color:var(--orange-600)}
.stat-icon.red{background:var(--red-50);color:var(--red-600)}
.stat-icon.purple{background:var(--purple-50);color:var(--purple-600)}
[data-theme="dark"] .stat-icon.blue{background:rgba(37,99,235,.15)}
[data-theme="dark"] .stat-icon.teal{background:rgba(13,148,136,.15)}
[data-theme="dark"] .stat-icon.green{background:rgba(16,185,129,.15)}
[data-theme="dark"] .stat-icon.orange{background:rgba(245,158,11,.15)}
[data-theme="dark"] .stat-icon.red{background:rgba(239,68,68,.15)}
[data-theme="dark"] .stat-icon.purple{background:rgba(139,92,246,.15)}
.stat-trend{
  display:flex;align-items:center;gap:3px;font-size:var(--text-xs);
  font-weight:600;padding:3px .5rem;border-radius:var(--r-full)}
.stat-trend.up{background:var(--green-50);color:var(--green-600)}
.stat-trend.down{background:var(--red-50);color:var(--red-600)}
[data-theme="dark"] .stat-trend.up{background:rgba(16,185,129,.15)}
[data-theme="dark"] .stat-trend.down{background:rgba(239,68,68,.15)}
.stat-value{font-size:var(--text-3xl);font-weight:800;color:var(--text);
  letter-spacing:-.03em;line-height:1;margin-bottom:.25rem}
.stat-label{font-size:var(--text-sm);color:var(--text-secondary);font-weight:500}
.stat-footer{font-size:var(--text-xs);color:var(--text-muted);margin-top:.75rem}

/* ── Cards ── */
.card{
  background:var(--card);border-radius:var(--r-md);border:1px solid var(--border);
  box-shadow:var(--sh-sm);transition:all var(--dur) var(--ease)}
.card-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.25rem 1.5rem;border-bottom:1px solid var(--border)}
.card-title{font-size:var(--text-base);font-weight:700;color:var(--text);letter-spacing:-.01em}
.card-sub{font-size:var(--text-xs);color:var(--text-muted);margin-top:2px}
.card-body{padding:1.5rem}
.card-footer{
  padding:1rem 1.5rem;border-top:1px solid var(--border);
  background:var(--bg);border-radius:0 0 var(--r-md) var(--r-md)}

/* ── Charts Grid ── */
.charts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;margin-bottom:1.25rem}
.charts-grid-3{grid-template-columns:repeat(3,1fr)}
.col-span-2{grid-column:span 2}
.chart-wrap{position:relative;width:100%}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:.5rem;padding:.5rem 1rem;border-radius:var(--r);font-size:var(--text-sm);
  font-weight:600;cursor:pointer;transition:all var(--dur-fast) var(--ease);
  border:1.5px solid transparent;white-space:nowrap;line-height:1.5;text-decoration:none}
.btn:active{transform:scale(.98)}
.btn-sm{padding:.375rem .75rem;font-size:var(--text-xs);border-radius:var(--r-sm)}
.btn-lg{padding:.75rem 1.5rem;font-size:var(--text-base);border-radius:var(--r-md)}
.btn-xl{padding:1rem 2rem;font-size:var(--text-lg);border-radius:var(--r-md)}
.btn-icon{width:36px;height:36px;padding:0}
.btn-icon.btn-sm{width:30px;height:30px}
.btn-primary{background:var(--primary-600);color:#fff;
  box-shadow:0 1px 3px rgba(37,99,235,.3)}
.btn-primary:hover{background:var(--primary-700);box-shadow:var(--sh-pri);transform:translateY(-1px)}
.btn-teal{background:var(--teal-600);color:#fff}
.btn-teal:hover{background:var(--teal-700);transform:translateY(-1px)}
.btn-success{background:var(--green-500);color:#fff}
.btn-success:hover{background:var(--green-600)}
.btn-danger{background:var(--red-500);color:#fff}
.btn-danger:hover{background:var(--red-600)}
.btn-warning{background:var(--orange-500);color:#fff}
.btn-outline{background:transparent;border-color:var(--border-strong);color:var(--text-secondary)}
.btn-outline:hover{background:var(--bg);border-color:var(--primary-600);color:var(--primary-600)}
.btn-ghost{background:transparent;color:var(--text-secondary)}
.btn-ghost:hover{background:var(--bg);color:var(--text)}

/* ── Badges ── */
.badge{
  display:inline-flex;align-items:center;gap:4px;padding:3px .5rem;
  border-radius:var(--r-full);font-size:var(--text-xs);font-weight:600;white-space:nowrap}
.bdot{width:6px;height:6px;border-radius:var(--r-full);flex-shrink:0}
.badge-blue{background:var(--primary-50);color:var(--primary-700)}
.badge-teal{background:var(--teal-50);color:var(--teal-700)}
.badge-green{background:var(--green-50);color:var(--green-600)}
.badge-orange{background:var(--orange-50);color:var(--orange-600)}
.badge-red{background:var(--red-50);color:var(--red-600)}
.badge-purple{background:var(--purple-50);color:var(--purple-600)}
.badge-gray{background:var(--bg);color:var(--text-secondary);border:1px solid var(--border)}
[data-theme="dark"] .badge-blue{background:rgba(37,99,235,.15);color:var(--primary-400)}
[data-theme="dark"] .badge-teal{background:rgba(13,148,136,.15);color:var(--teal-400)}
[data-theme="dark"] .badge-green{background:rgba(16,185,129,.15);color:var(--green-500)}
[data-theme="dark"] .badge-orange{background:rgba(245,158,11,.15);color:var(--orange-500)}
[data-theme="dark"] .badge-red{background:rgba(239,68,68,.15);color:var(--red-500)}
[data-theme="dark"] .badge-purple{background:rgba(139,92,246,.15);color:var(--purple-500)}
.badge-online .bdot{background:var(--green-500);animation:pulse-dot 2s ease infinite}
.badge-offline .bdot{background:var(--red-500)}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}

/* ── Forms ── */
.form-group{margin-bottom:1.25rem}
.form-label{display:block;font-size:var(--text-sm);font-weight:600;
  color:var(--text-secondary);margin-bottom:.5rem}
.form-label .req{color:var(--red-500);margin-left:2px}
.form-control{
  width:100%;padding:.625rem 1rem;background:var(--card);
  border:1.5px solid var(--border);border-radius:var(--r);
  font-size:var(--text-sm);color:var(--text);outline:none;
  transition:all var(--dur-fast) var(--ease)}
.form-control:focus{border-color:var(--primary-500);
  box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.form-control::placeholder{color:var(--text-muted)}
select.form-control{cursor:pointer}
textarea.form-control{resize:vertical;min-height:100px}
.input-wrap{position:relative}
.input-wrap .input-icon{
  position:absolute;left:1rem;top:50%;transform:translateY(-50%);
  color:var(--text-muted);font-size:var(--text-sm);pointer-events:none}
.input-wrap .form-control{padding-left:calc(1rem + 18px + .5rem)}
.input-wrap .input-icon-r{
  position:absolute;right:1rem;top:50%;transform:translateY(-50%);
  color:var(--text-muted);cursor:pointer}
.form-hint{font-size:var(--text-xs);color:var(--text-muted);margin-top:.25rem}
.form-row{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}

/* Toggle */
.toggle{position:relative;width:44px;height:24px;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0}
.toggle-track{
  position:absolute;inset:0;background:var(--border-strong);
  border-radius:var(--r-full);cursor:pointer;
  transition:background var(--dur-fast) var(--ease)}
.toggle-track::before{
  content:'';position:absolute;width:18px;height:18px;background:#fff;
  border-radius:var(--r-full);top:3px;left:3px;
  transition:transform var(--dur-fast) var(--ease);box-shadow:var(--sh-sm)}
.toggle input:checked+.toggle-track{background:var(--primary-600)}
.toggle input:checked+.toggle-track::before{transform:translateX(20px)}

/* ── Tables ── */
.table-wrap{overflow-x:auto;border-radius:var(--r-md)}
.table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--text-sm)}
.table th{
  padding:.75rem 1rem;text-align:left;font-size:var(--text-xs);
  font-weight:600;color:var(--text-muted);text-transform:uppercase;
  letter-spacing:.06em;background:var(--bg);border-bottom:1px solid var(--border);
  white-space:nowrap;position:sticky;top:0;z-index:1}
.table td{
  padding:.75rem 1rem;border-bottom:1px solid var(--border);
  color:var(--text);vertical-align:middle}
.table tbody tr{transition:background var(--dur-fast) var(--ease)}
.table tbody tr:hover td{background:var(--card-hover)}
.table tbody tr:last-child td{border-bottom:none}

/* ── Modals ── */
.overlay{
  position:fixed;inset:0;background:rgba(15,23,42,.6);
  backdrop-filter:blur(4px);z-index:var(--z-backdrop);
  display:flex;align-items:center;justify-content:center;
  padding:1rem;opacity:0;pointer-events:none;
  transition:opacity var(--dur) var(--ease)}
.overlay.open{opacity:1;pointer-events:all}
.modal{
  background:var(--card);border-radius:var(--r-xl);width:100%;
  max-width:520px;box-shadow:var(--sh-xl);overflow:hidden;
  transform:scale(.95) translateY(10px);
  transition:transform var(--dur) var(--ease)}
.overlay.open .modal{transform:scale(1) translateY(0)}
.modal-lg{max-width:680px}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.25rem 1.5rem;border-bottom:1px solid var(--border)}
.modal-title{font-size:var(--text-lg);font-weight:700;color:var(--text)}
.modal-close{
  width:32px;height:32px;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);cursor:pointer;
  transition:all var(--dur-fast) var(--ease)}
.modal-close:hover{background:var(--bg);color:var(--text)}
.modal-body{padding:1.5rem}
.modal-foot{
  display:flex;align-items:center;justify-content:flex-end;gap:.75rem;
  padding:1rem 1.5rem;border-top:1px solid var(--border);background:var(--bg)}

/* ── Drawer ── */
.drawer-overlay{
  position:fixed;inset:0;background:rgba(15,23,42,.5);
  backdrop-filter:blur(2px);z-index:var(--z-backdrop);
  opacity:0;pointer-events:none;transition:opacity var(--dur) var(--ease)}
.drawer-overlay.open{opacity:1;pointer-events:all}
.drawer{
  position:fixed;top:0;right:0;width:460px;max-width:100%;height:100vh;
  background:var(--card);z-index:var(--z-modal);box-shadow:var(--sh-xl);
  transform:translateX(100%);transition:transform var(--dur-slow) var(--ease);
  display:flex;flex-direction:column}
.drawer-overlay.open .drawer{transform:translateX(0)}
.drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.25rem 1.5rem;border-bottom:1px solid var(--border);flex-shrink:0}
.drawer-body{flex:1;overflow-y:auto;padding:1.5rem}

/* ── Progress ── */
.progress{
  width:100%;height:8px;background:var(--bg);
  border-radius:var(--r-full);overflow:hidden}
.progress-fill{
  height:100%;border-radius:var(--r-full);
  transition:width 1s var(--ease)}
.pf-blue{background:linear-gradient(90deg,var(--primary-600),var(--primary-400))}
.pf-teal{background:linear-gradient(90deg,var(--teal-600),var(--teal-400))}
.pf-green{background:linear-gradient(90deg,var(--green-600),var(--green-500))}
.pf-orange{background:linear-gradient(90deg,var(--orange-600),var(--orange-500))}
.pf-red{background:linear-gradient(90deg,var(--red-600),var(--red-500))}

/* ── Timeline ── */
.timeline{position:relative;padding-left:2rem}
.timeline::before{
  content:'';position:absolute;left:12px;top:8px;bottom:8px;
  width:2px;background:var(--border)}
.tl-item{position:relative;padding-bottom:1.25rem}
.tl-item:last-child{padding-bottom:0}
.tl-dot{
  position:absolute;left:-24px;top:4px;width:14px;height:14px;
  border-radius:var(--r-full);border:2px solid var(--card)}
.tl-dot.blue{background:var(--primary-600);box-shadow:0 0 0 3px var(--primary-100)}
.tl-dot.green{background:var(--green-500);box-shadow:0 0 0 3px var(--green-50)}
.tl-dot.orange{background:var(--orange-500);box-shadow:0 0 0 3px var(--orange-50)}
.tl-dot.red{background:var(--red-500);box-shadow:0 0 0 3px var(--red-50)}
.tl-dot.purple{background:var(--purple-500);box-shadow:0 0 0 3px var(--purple-50)}
[data-theme="dark"] .tl-dot.blue{box-shadow:0 0 0 3px rgba(37,99,235,.2)}
[data-theme="dark"] .tl-dot.green{box-shadow:0 0 0 3px rgba(16,185,129,.2)}
[data-theme="dark"] .tl-dot.orange{box-shadow:0 0 0 3px rgba(245,158,11,.2)}
[data-theme="dark"] .tl-dot.red{box-shadow:0 0 0 3px rgba(239,68,68,.2)}
.tl-box{
  background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r);padding:.625rem 1rem}
.tl-time{font-size:var(--text-xs);color:var(--text-muted);margin-bottom:2px}
.tl-text{font-size:var(--text-sm);color:var(--text);font-weight:500}
.tl-sub{font-size:var(--text-xs);color:var(--text-muted);margin-top:2px}

/* ── Notification Items ── */
.notif-item{
  display:flex;gap:.75rem;padding:1rem;border-radius:var(--r);
  border:1px solid var(--border);margin-bottom:.75rem;background:var(--card);
  transition:all var(--dur-fast) var(--ease)}
.notif-item:hover{border-color:var(--primary-500);box-shadow:var(--sh)}
.notif-item.unread{border-left:3px solid var(--primary-600);background:var(--primary-50)}
[data-theme="dark"] .notif-item.unread{background:rgba(37,99,235,.07)}
.notif-icon{
  width:40px;height:40px;border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:var(--text-base)}
.ni-blue{background:var(--primary-50);color:var(--primary-600)}
.ni-orange{background:var(--orange-50);color:var(--orange-600)}
.ni-red{background:var(--red-50);color:var(--red-600)}
.ni-green{background:var(--green-50);color:var(--green-600)}
[data-theme="dark"] .ni-blue{background:rgba(37,99,235,.15)}
[data-theme="dark"] .ni-orange{background:rgba(245,158,11,.15)}
[data-theme="dark"] .ni-red{background:rgba(239,68,68,.15)}
[data-theme="dark"] .ni-green{background:rgba(16,185,129,.15)}
.notif-body{flex:1}
.notif-title{font-size:var(--text-sm);font-weight:600;color:var(--text);margin-bottom:2px}
.notif-desc{font-size:var(--text-xs);color:var(--text-secondary);line-height:1.5}
.notif-time{font-size:var(--text-xs);color:var(--text-muted);margin-top:.25rem}

/* ── Wallet Card ── */
.wallet-card{
  background:linear-gradient(135deg,var(--primary-700) 0%,var(--teal-600) 100%);
  border-radius:var(--r-2xl);padding:2rem;color:#fff;
  position:relative;overflow:hidden;
  box-shadow:0 20px 40px -10px rgba(37,99,235,.45)}
.wallet-card::before,.wallet-card::after{
  content:'';position:absolute;border-radius:var(--r-full);
  background:rgba(255,255,255,.06)}
.wallet-card::before{width:220px;height:220px;top:-70px;right:-50px}
.wallet-card::after{width:160px;height:160px;bottom:-60px;left:-40px}
.wallet-label{font-size:var(--text-sm);opacity:.8;margin-bottom:.5rem}
.wallet-amount{
  font-size:var(--text-4xl);font-weight:800;letter-spacing:-.04em;
  margin-bottom:1.5rem;position:relative;z-index:1}
.wallet-divider{border:none;border-top:1px solid rgba(255,255,255,.2);margin-bottom:1.25rem}
.wallet-meta{display:flex;gap:2rem;position:relative;z-index:1}
.wallet-meta-item label{font-size:var(--text-xs);opacity:.7;display:block;margin-bottom:2px}
.wallet-meta-item span{font-size:var(--text-sm);font-weight:600}

/* ── Device Cards ── */
.devices-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.25rem}
.device-card{
  background:var(--card);border-radius:var(--r-md);border:1px solid var(--border);
  padding:1.25rem;box-shadow:var(--sh-sm);transition:all var(--dur) var(--ease);position:relative}
.device-card:hover{box-shadow:var(--sh-md);transform:translateY(-2px);border-color:var(--primary-500)}
.device-card-head{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}
.device-img{
  width:48px;height:48px;border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;
  font-size:1.25rem;flex-shrink:0}
/* device-img uses stat-icon colour classes — no extra bg needed */
.device-name{font-size:var(--text-sm);font-weight:700;color:var(--text)}
.device-id{font-size:var(--text-xs);color:var(--text-muted);font-family:monospace;margin-top:2px}
.device-stats{
  display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;
  margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border)}
.device-stat-val{font-size:var(--text-lg);font-weight:700;color:var(--text)}
.device-stat-lbl{font-size:var(--text-xs);color:var(--text-muted)}
.device-actions{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border);
  display:flex;gap:.5rem}

/* ── Filters / Pagination ── */
.filter-bar{display:flex;align-items:center;gap:.75rem;margin-bottom:1.25rem;flex-wrap:wrap}
.filter-select{
  padding:.5rem .75rem;border:1.5px solid var(--border);border-radius:var(--r);
  background:var(--card);font-size:var(--text-sm);color:var(--text);
  outline:none;cursor:pointer;transition:all var(--dur-fast) var(--ease)}
.filter-select:focus{border-color:var(--primary-500);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.pagination{
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.5rem;border-top:1px solid var(--border)}
.pg-info{font-size:var(--text-xs);color:var(--text-muted)}
.pg-controls{display:flex;align-items:center;gap:4px}
.pg-btn{
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);font-size:var(--text-sm);font-weight:500;
  cursor:pointer;color:var(--text-secondary);
  transition:all var(--dur-fast) var(--ease)}
.pg-btn:hover{background:var(--bg);color:var(--text)}
.pg-btn.active{background:var(--primary-600);color:#fff}
.pg-btn:disabled{opacity:.4;cursor:not-allowed}

/* ── Credit History ── */
.credit-item{
  display:flex;align-items:center;gap:1rem;padding:1rem;
  border-radius:var(--r);border:1px solid var(--border);background:var(--card);
  margin-bottom:.75rem;transition:all var(--dur-fast) var(--ease)}
.credit-item:hover{border-color:var(--primary-500);box-shadow:var(--sh-sm)}
.credit-icon{
  width:44px;height:44px;border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;
  font-size:1.25rem;flex-shrink:0}
.ci-in{background:var(--green-50);color:var(--green-600)}
.ci-out{background:var(--red-50);color:var(--red-600)}
[data-theme="dark"] .ci-in{background:rgba(16,185,129,.15)}
[data-theme="dark"] .ci-out{background:rgba(239,68,68,.15)}
.credit-info{flex:1}
.credit-title{font-size:var(--text-sm);font-weight:600;color:var(--text)}
.credit-date{font-size:var(--text-xs);color:var(--text-muted);margin-top:2px}
.credit-amt{font-size:var(--text-base);font-weight:700}
.amt-in{color:var(--green-600)}
.amt-out{color:var(--red-500)}

/* ── Profile ── */
.profile-hero{
  display:flex;align-items:center;gap:1.5rem;padding:1.5rem;
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-md);margin-bottom:1.5rem}
.profile-av{
  width:80px;height:80px;border-radius:var(--r-full);
  background:linear-gradient(135deg,var(--primary-600),var(--teal-600));
  display:flex;align-items:center;justify-content:center;
  font-size:var(--text-3xl);color:#fff;font-weight:700;flex-shrink:0;
  box-shadow:0 8px 20px rgba(37,99,235,.3)}
.profile-info-block{flex:1}
.profile-name{font-size:var(--text-xl);font-weight:700;color:var(--text);margin-bottom:.25rem}
.profile-role{font-size:var(--text-sm);color:var(--text-muted);margin-bottom:.75rem}
.profile-tags{display:flex;gap:.5rem;flex-wrap:wrap}

/* ── User Cell ── */
.user-cell{display:flex;align-items:center;gap:.75rem}
.u-av{
  width:34px;height:34px;border-radius:var(--r-full);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--text-xs);font-weight:700;color:#fff;flex-shrink:0}
.ua-blue{background:linear-gradient(135deg,var(--primary-500),var(--primary-700))}
.ua-teal{background:linear-gradient(135deg,var(--teal-500),var(--teal-700))}
.ua-green{background:linear-gradient(135deg,#34D399,var(--green-600))}
.ua-purple{background:linear-gradient(135deg,#A78BFA,var(--purple-600))}
.ua-orange{background:linear-gradient(135deg,#FB923C,var(--orange-600))}
.u-name{font-weight:600;font-size:var(--text-sm);color:var(--text)}
.u-email{font-size:var(--text-xs);color:var(--text-muted)}

/* ── Tabs ── */
.tabs{display:flex;border-bottom:2px solid var(--border);margin-bottom:1.5rem;gap:0}
.tab{
  padding:.75rem 1.25rem;font-size:var(--text-sm);font-weight:600;
  color:var(--text-muted);cursor:pointer;border-bottom:2px solid transparent;
  margin-bottom:-2px;transition:all var(--dur-fast) var(--ease);
  white-space:nowrap;display:flex;align-items:center;gap:.5rem}
.tab:hover{color:var(--text-secondary)}
.tab.active{color:var(--primary-600);border-bottom-color:var(--primary-600)}

/* ── Toast ── */
.toast-wrap{
  position:fixed;bottom:1.5rem;right:1.5rem;z-index:var(--z-toast);
  display:flex;flex-direction:column;gap:.75rem;pointer-events:none}
.toast{
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);
  padding:1rem;box-shadow:var(--sh-lg);display:flex;align-items:center;
  gap:.75rem;min-width:300px;pointer-events:all;
  animation:slideInRight .3s var(--ease) forwards}
.toast-success{border-left:4px solid var(--green-500)}
.toast-error{border-left:4px solid var(--red-500)}
.toast-info{border-left:4px solid var(--primary-600)}
@keyframes slideInRight{from{transform:translateX(20px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes fadeOut{from{opacity:1}to{opacity:0;transform:translateX(20px)}}
.toast.hide{animation:fadeOut .3s var(--ease) forwards}

/* Mobile overlay */
.mob-overlay{
  position:fixed;inset:0;background:rgba(15,23,42,.5);
  z-index:calc(var(--z-sb) - 1);display:none}
.mob-overlay.active{display:block}

/* ── Responsive ── */
@media(max-width:1024px){
  .charts-grid{grid-template-columns:1fr}
  .col-span-2{grid-column:span 1}
  .charts-grid-3{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.mobile-open{transform:translateX(0)}
  .main-content{margin-left:0!important}
  .topbar{left:0!important}
  .topbar-search{display:none}
  .page-content{padding:1rem}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:.75rem}
  .section-head{flex-direction:column;align-items:flex-start}
  .filter-bar{flex-direction:column;align-items:stretch}
  .form-row{grid-template-columns:1fr}
  .drawer{width:100%}
  .devices-grid{grid-template-columns:1fr}
  .profile-hero{flex-direction:column;text-align:center}
  .charts-grid-3{grid-template-columns:1fr}
}
@media(max-width:480px){
  .stats-grid{grid-template-columns:1fr}
  .modal{max-width:calc(100% - 2rem)}
}

/* ── Utilities ── */
.flex{display:flex}.flex-col{flex-direction:column}
.items-center{align-items:center}.items-start{align-items:flex-start}
.justify-between{justify-content:space-between}.justify-center{justify-content:center}
.justify-end{justify-content:flex-end}
.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}
.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}
.flex-1{flex:1}.shrink-0{flex-shrink:0}
.w-full{width:100%}.text-center{text-align:center}
.text-right{text-align:right}
.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}
.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}
.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}
.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}
.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}
.font-medium{font-weight:500}.font-semibold{font-weight:600}
.font-bold{font-weight:700}.font-extrabold{font-weight:800}
.text-xs{font-size:var(--text-xs)}.text-sm{font-size:var(--text-sm)}
.text-base{font-size:var(--text-base)}.text-lg{font-size:var(--text-lg)}
.text-primary{color:var(--primary-600)}.text-teal{color:var(--teal-600)}
.text-success{color:var(--green-600)}.text-warning{color:var(--orange-600)}
.text-danger{color:var(--red-500)}.text-muted{color:var(--text-muted)}
.text-secondary{color:var(--text-secondary)}
.rounded{border-radius:var(--r)}.rounded-full{border-radius:var(--r-full)}
.border-b{border-bottom:1px solid var(--border)}
.bg-card{background:var(--card)}.bg-bg{background:var(--bg)}
.hidden{display:none!important}.relative{position:relative}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.overflow-hidden{overflow:hidden}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.opacity-0{opacity:0}.opacity-50{opacity:.5}
.cursor-pointer{cursor:pointer}
.mono{font-family:monospace}