/*
 * ═══════════════════════════════════════════════════════════════
 *  VIBE BILLING — VIBECRAFT ART LOGO THEME
 *  Palette sourced directly from logo pixel analysis:
 *    Circle fill (inner):  #553780   rich violet
 *    Circle fill (mid):    #4e307a   deep purple
 *    Circle border:        #4c2b7b   darkest ring
 *    Background behind:    #100a1e   near-black purple
 *    Logo text:            #ffffff   pure white
 * ═══════════════════════════════════════════════════════════════
 */

/* ── DESIGN TOKENS ───────────────────────────────────────────── */
:root {
  /* Background layers — darkening purple depths */
  --bg:       #0d0818;   /* deepest — page background       */
  --surface:  #150e28;   /* cards, sidebar                  */
  --surface2: #1c1536;   /* table headers, inner panels     */
  --surface3: #241c44;   /* hover states                    */
  --surface4: #2d2358;   /* active / selected               */

  /* Borders */
  --border:   #2a1f4a;
  --border2:  #362855;

  /* ── Accent — the bright lavender that glows from the logo center */
  --accent:      #a87ee0;   /* interactive purple             */
  --accent2:     #c8a0f8;   /* hover / lighter               */
  --accent-dim:  rgba(168,126,224,0.14);
  --accent-glow: rgba(168,126,224,0.08);

  /* ── Logo exact colors for structural use ── */
  --logo-fill:   #553780;   /* inner circle fill              */
  --logo-mid:    #4e307a;   /* mid ring                       */
  --logo-deep:   #4c2b7b;   /* outer border ring              */
  --logo-dark:   #1a0d35;   /* dark behind logo               */
  --logo-text:   #f5f0ff;   /* the white text on logo (warm)  */

  /* Semantic — shifted warm to harmonise with purple world */
  --gold:      #f0ac3a;
  --gold-dim:  rgba(240,172,58,0.13);
  --green:     #3dd68c;
  --green-dim: rgba(61,214,140,0.12);
  --red:       #fc7070;
  --red-dim:   rgba(252,112,112,0.13);
  --teal:      #38d9d9;
  --teal-dim:  rgba(56,217,217,0.11);
  --purple:    #c8a0f8;
  --purple-dim:rgba(200,160,248,0.13);

  /* Typography — warm off-white, never cold blue-grey */
  --text:  #ece6f8;
  --text2: #9e8fbd;
  --text3: #5e5278;
  --muted: #6b5d8a;

  /* Geometry */
  --radius:     10px;
  --radius2:    6px;
  --radius3:    4px;

  /* Elevation */
  --shadow:     0 4px 32px rgba(10,4,24,0.7);
  --shadow2:    0 2px 14px rgba(76,43,123,0.35);
  --shadow-sm:  0 1px 6px  rgba(10,4,24,0.5);

  --transition: 0.17s ease;
  --header-bg: rgba(21,14,40,0.85);
}

/* ── LIGHT MODE — purple-tinted whites ──────────────────── */
body.light-mode {
  --bg:        #f3eeff;
  --surface:   #ffffff;
  --surface2:  #f8f5ff;
  --surface3:  #ede4ff;
  --surface4:  #e0d3ff;
  --border:    #d8ccf0;
  --border2:   #c4b4e8;
  --accent:    #6d28d9;
  --accent2:   #8b5cf6;
  --accent-dim:  rgba(109,40,217,0.10);
  --accent-glow: rgba(109,40,217,0.05);
  --logo-fill:   #553780;
  --logo-mid:    #4e307a;
  --logo-deep:   #4c2b7b;
  --logo-dark:   #1a0d35;
  --logo-text:   #ffffff;
  --gold:      #c47d0a;
  --gold-dim:  rgba(196,125,10,0.10);
  --green:     #047a52;
  --green-dim: rgba(4,122,82,0.10);
  --red:       #d02020;
  --red-dim:   rgba(208,32,32,0.10);
  --teal:      #067a7a;
  --teal-dim:  rgba(6,122,122,0.10);
  --purple:    #6d28d9;
  --purple-dim:rgba(109,40,217,0.10);
  --text:      #1a0a38;
  --text2:     #42306a;
  --text3:     #7c6aa0;
  --muted:     #9888b8;
  --shadow:    0 4px 24px rgba(76,43,123,0.14);
  --shadow2:   0 2px 10px rgba(76,43,123,0.18);
  --shadow-sm: 0 1px 4px  rgba(76,43,123,0.10);
  --header-bg: rgba(243,238,255,0.92);
}

/* ── RESET ───────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html,body{
  height:100%;
  font-family:'Mulish',sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  line-height:1.55;
}

/* ── SCROLLBAR — logo purple ─────────────────────────────── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--logo-dark)}
::-webkit-scrollbar-thumb{background:var(--logo-fill);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}

/* ═══════════════════════════════════════════════════════════
   AUTH SCREEN
   ═══════════════════════════════════════════════════════════ */
#auth-screen{
  display:flex;align-items:center;justify-content:center;min-height:100vh;
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(85,55,128,0.45) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 90%, rgba(76,43,123,0.3) 0%, transparent 55%),
    #0d0818;
  position:relative;overflow:hidden;
}
#auth-screen::before{
  content:'';position:absolute;
  width:700px;height:700px;border-radius:50%;
  background:radial-gradient(circle,rgba(85,55,128,0.4) 0%,transparent 65%);
  top:-200px;left:-200px;
  animation:orbFloat 9s ease-in-out infinite;
}
#auth-screen::after{
  content:'';position:absolute;
  width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle,rgba(200,160,248,0.12) 0%,transparent 65%);
  bottom:-120px;right:-100px;
  animation:orbFloat 12s ease-in-out infinite reverse;
}
@keyframes orbFloat{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(28px,-18px) scale(1.04)}
  66%{transform:translate(-18px,28px) scale(0.97)}
}
.auth-grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(85,55,128,0.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(85,55,128,0.07) 1px,transparent 1px);
  background-size:52px 52px;
}
.auth-card{
  position:relative;z-index:10;
  background:rgba(21,14,40,0.92);
  border:1px solid rgba(200,160,248,0.22);
  border-radius:24px;
  padding:48px 44px;
  width:440px;
  box-shadow:
    0 0 0 1px rgba(200,160,248,0.06) inset,
    0 0 80px rgba(76,43,123,0.45),
    0 24px 60px rgba(10,4,24,0.75);
  backdrop-filter:blur(24px);
}
.auth-logo-img{
  display:block;width:88px;height:88px;margin:0 auto 20px;
  border-radius:50%;
  box-shadow:
    0 0 0 3px rgba(85,55,128,0.7),
    0 0 0 6px rgba(85,55,128,0.2),
    0 0 36px rgba(76,43,123,0.8);
  animation:logoPulse 3s ease-in-out infinite;
}
@keyframes logoPulse{
  0%,100%{box-shadow:0 0 0 3px rgba(85,55,128,0.6),0 0 0 6px rgba(85,55,128,0.15),0 0 30px rgba(76,43,123,0.7)}
  50%    {box-shadow:0 0 0 4px rgba(200,160,248,0.35),0 0 0 8px rgba(200,160,248,0.08),0 0 50px rgba(85,55,128,0.9)}
}
.auth-logo{
  font-family:'Syne',sans-serif;font-weight:800;font-size:26px;
  text-align:center;margin-bottom:4px;letter-spacing:-0.5px;
  white-space:nowrap;display:block;width:100%;
  padding-bottom:6px;line-height:1.3;
  background:linear-gradient(135deg,#f0e8ff 0%,#c8a0f8 45%,#a87ee0 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.auth-logo span{-webkit-text-fill-color:transparent}
.auth-tagline{
  color:rgba(200,160,248,0.5);
  font-size:11px;text-align:center;
  margin-bottom:36px;letter-spacing:2px;text-transform:uppercase;
}
.auth-divider{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.auth-divider span{font-family:'Syne',sans-serif;font-weight:700;font-size:18px;color:var(--logo-text);line-height:1.4;padding-bottom:3px;display:inline-block}
.auth-divider::before,.auth-divider::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(90deg,transparent,rgba(168,126,224,0.4),transparent);
}
.auth-card h2{
  font-family:'Syne',sans-serif;font-weight:700;font-size:18px;
  margin-bottom:24px;color:var(--logo-text);text-align:center;
  line-height:1.4;overflow-wrap:break-word;
}
.auth-card .field label{
  color:rgba(200,160,248,0.7);font-size:11px;letter-spacing:1px;text-transform:uppercase;
}
.auth-card .field input{
  background:rgba(85,55,128,0.12);
  border:1px solid rgba(200,160,248,0.2);
  color:var(--logo-text);
  border-radius:10px;padding:12px 16px;font-size:14px;
  transition:border-color 0.2s,box-shadow 0.2s;
  font-family:'Mulish',sans-serif;width:100%;
}
.auth-card .field input:focus{
  outline:none;
  border-color:rgba(200,160,248,0.55);
  box-shadow:0 0 0 3px rgba(168,126,224,0.16);
}
.auth-card .btn-primary{
  background:linear-gradient(135deg,#553780 0%,#4c2b7b 100%);
  border:none;border-radius:12px;padding:13px 20px;
  font-size:15px;font-weight:700;letter-spacing:0.4px;
  width:100%;justify-content:center;color:#fff;
  box-shadow:0 4px 22px rgba(76,43,123,0.55),inset 0 1px 0 rgba(255,255,255,0.08);
  transition:all 0.2s ease;
}
.auth-card .btn-primary:hover{
  background:linear-gradient(135deg,#7050a8 0%,#553780 100%);
  transform:translateY(-2px);
  box-shadow:0 8px 32px rgba(168,126,224,0.45);
}
#login-version{color:rgba(168,126,224,0.35)!important;text-align:center;margin-top:20px;font-size:11px}
.auth-error{
  background:var(--red-dim);border:1px solid var(--red);
  border-radius:var(--radius2);padding:10px 14px;
  color:var(--red);font-size:13px;margin-bottom:16px;
}

/* ═══════════════════════════════════════════════════════════
   FORMS & FIELDS
   ═══════════════════════════════════════════════════════════ */
.field{margin-bottom:18px}
.field label{
  display:block;font-size:11px;font-weight:700;
  color:var(--text3);margin-bottom:6px;
  letter-spacing:0.6px;text-transform:uppercase;
}
.field input,.field select,.field textarea{
  width:100%;background:var(--surface2);
  border:1px solid var(--border2);
  border-radius:var(--radius2);
  padding:10px 14px;color:var(--text);
  font-family:'Mulish',sans-serif;font-size:14px;
  transition:border-color var(--transition),box-shadow var(--transition);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(168,126,224,0.16);
}
.field textarea{resize:vertical;min-height:80px}

/* ═══════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 20px;border-radius:var(--radius2);border:none;
  cursor:pointer;font-family:'Mulish',sans-serif;
  font-size:14px;font-weight:600;
  transition:all var(--transition);
}
.btn-primary{
  background:linear-gradient(135deg,var(--logo-fill) 0%,var(--logo-mid) 100%);
  color:#fff;
  box-shadow:0 2px 12px rgba(76,43,123,0.4),inset 0 1px 0 rgba(255,255,255,0.08);
}
.btn-primary:hover{
  background:linear-gradient(135deg,#7050a8 0%,var(--logo-fill) 100%);
  transform:translateY(-1px);
  box-shadow:0 5px 20px rgba(168,126,224,0.4);
}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border2)}
.btn-ghost:hover{background:var(--surface3);color:var(--text);border-color:var(--border2)}
.btn-ghost:focus{outline:none}
.btn-danger{background:var(--red);color:#fff}
.btn-danger:hover{filter:brightness(1.12)}

.btn-green{background:var(--green);color:#062e1a}
body.light-mode .btn-green{color:#fff}
.btn-green:hover{filter:brightness(1.1)}
.btn-sm{padding:6px 14px;font-size:13px}
.btn-xs{padding:4px 10px;font-size:12px}
.btn:disabled{opacity:0.4;cursor:not-allowed;transform:none!important;box-shadow:none!important}

/* ═══════════════════════════════════════════════════════════
   LAYOUT — APP SHELL
   ═══════════════════════════════════════════════════════════ */
#app{display:flex;height:100vh;overflow:hidden}

/* ── SIDEBAR ── logo gradient top-to-bottom */
#sidebar{
  width:240px;flex-shrink:0;
  display:flex;flex-direction:column;
  background:linear-gradient(175deg,var(--logo-fill) 0%,var(--logo-mid) 35%,var(--logo-dark) 100%);
  border-right:1px solid rgba(200,160,248,0.1);
  box-shadow:4px 0 28px rgba(10,4,24,0.55);
}
body.light-mode #sidebar{
  background:linear-gradient(175deg,#553780 0%,#432668 35%,#2a1050 100%);
}
.sidebar-logo{
  padding:24px 20px 18px;
  border-bottom:1px solid rgba(200,160,248,0.13);
}
.sidebar-logo .logo-text{
  font-family:'Syne',sans-serif;font-weight:800;
  font-size:20px;letter-spacing:-0.5px;
  color:#f5f0ff;
}
.sidebar-logo .logo-text span{color:#dbb8ff}
.sidebar-user{
  padding:12px 20px;
  border-bottom:1px solid rgba(200,160,248,0.13);
  display:flex;align-items:center;gap:10px;
}
.avatar{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  background:rgba(200,160,248,0.18);
  border:1.5px solid rgba(200,160,248,0.45);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:13px;color:#f0e8ff;
}
.user-info{min-width:0}
.user-name{
  font-weight:600;font-size:13px;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.user-role{
  font-size:11px;color:rgba(220,185,255,0.85);
  text-transform:uppercase;letter-spacing:0.5px;
}
.sidebar-nav{flex:1;padding:14px 10px;overflow-y:auto}
.nav-group-label{
  font-size:9.5px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;padding:10px 10px 4px;
  color:rgba(200,160,248,0.72);
}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:var(--radius2);
  cursor:pointer;margin-bottom:1px;
  color:rgba(240,232,255,0.85);
  font-size:13px;font-weight:500;
  transition:all var(--transition);
}
.nav-item:hover{
  background:rgba(200,160,248,0.13);
  color:#f0e8ff;
}
.nav-item.active{
  background:rgba(200,160,248,0.2);
  color:#ece0ff;
  border:1px solid rgba(200,160,248,0.22);
  border-left:3px solid var(--accent);
  box-shadow:0 0 14px rgba(168,126,224,0.22);
  padding-left:10px;
}
/* Sidebar is always dark — force light text in light mode too */
body.light-mode .nav-item{ color:rgba(240,232,255,0.65); }
body.light-mode .nav-item:hover{ color:#f0e8ff; }
body.light-mode .nav-item.active{ color:#ece0ff; }
.nav-item.active .nav-icon { color: var(--accent); }
body.light-mode .nav-item.active .nav-icon { color: var(--accent2); }
body.light-mode .nav-group-label{ color:rgba(200,160,248,0.45); }
body.light-mode .user-name{ color:#f5f0ff; }
body.light-mode .user-role{ color:rgba(200,160,248,0.55); }
.nav-icon{width:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sidebar-bottom{
  padding:14px 16px;
  border-top:1px solid rgba(200,160,248,0.13);
}
/* Theme buttons in sidebar always on dark bg — force light text */
body.light-mode .sidebar-bottom .btn-ghost{
  color:rgba(240,232,255,0.7);
  border-color:rgba(200,160,248,0.3);
  background:transparent;
}
body.light-mode .sidebar-bottom .btn-ghost:hover{
  background:rgba(200,160,248,0.13);
  color:#f0e8ff;
}

/* ── MAIN AREA ── */
#main{
  flex:1;overflow-y:auto;background:var(--bg);
  background-image:
    linear-gradient(rgba(85,55,128,0.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(85,55,128,0.025) 1px,transparent 1px);
  background-size:52px 52px;
}
.main-header{
  padding:20px 32px;
  border-bottom:1px solid var(--border);
  background:var(--header-bg);
  backdrop-filter:blur(16px);
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;
  position:sticky;top:0;z-index:10;
  min-height:68px;
}
.page-title{
  font-family:'Syne',sans-serif;font-weight:700;
  font-size:24px;line-height:1.3;
  min-width:0;flex-shrink:1;overflow-wrap:break-word;
  background:linear-gradient(135deg,var(--text) 0%,var(--accent2) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.page-content{padding:28px 32px;max-width:1400px;margin:0 auto}
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(10px)}
  to  {opacity:1;transform:translateY(0)}
}
.page-animate{animation:fadeInUp 0.22s ease both}

/* ═══════════════════════════════════════════════════════════
   CARDS & STAT CARDS
   ═══════════════════════════════════════════════════════════ */
.card,.section-card{
  background:var(--surface);border:1px solid rgba(200,160,248,0.25);
  border-radius:var(--radius);padding:20px;margin-bottom:20px;
  transition:border-color 0.2s,box-shadow 0.2s;
  box-shadow:0 0 12px rgba(76,43,123,0.25);
}
.card:hover{border-color:rgba(200,160,248,0.45);box-shadow:0 0 20px rgba(76,43,123,0.4)}
body.light-mode .card,body.light-mode .section-card{border:1px solid var(--border);box-shadow:none}
body.light-mode .card:hover{border-color:rgba(168,126,224,0.22);box-shadow:none}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:10px;flex-wrap:wrap}
.card-title{font-family:'Syne',sans-serif;font-weight:700;font-size:15px;color:var(--text);min-width:0;flex:1 1 auto;overflow-wrap:break-word}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:24px}
.stat-card{
  background:var(--surface);border:1px solid rgba(200,160,248,0.25);
  border-radius:var(--radius);padding:18px;
  position:relative;overflow:hidden;
  transition:border-color 0.2s,box-shadow 0.2s;
  box-shadow:0 0 12px rgba(76,43,123,0.25);
}
.stat-card:hover{
  border-color:rgba(200,160,248,0.45);
  box-shadow:0 0 20px rgba(76,43,123,0.4);
}
body.light-mode .stat-card{border:1px solid var(--border);box-shadow:none}
body.light-mode .stat-card:hover{border-color:rgba(168,126,224,0.3);box-shadow:0 2px 18px rgba(76,43,123,0.18)}
/* coloured top bar */
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px}
.stat-card.blue::before  {background:linear-gradient(90deg,var(--logo-fill),var(--accent))}
.stat-card.gold::before  {background:linear-gradient(90deg,var(--gold),#fbbf24)}
.stat-card.green::before {background:linear-gradient(90deg,var(--green),#6ee7b7)}
.stat-card.purple::before{background:linear-gradient(90deg,var(--logo-mid),var(--purple))}
.stat-card.red::before   {background:linear-gradient(90deg,var(--red),#fca5a5)}
.stat-label{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:0.6px;font-weight:700;margin-bottom:6px}
.stat-value{font-family:'B612 Mono',monospace;font-size:24px;font-weight:500;color:var(--text);overflow-wrap:break-word;min-width:0}
.stat-sub{font-size:11px;color:var(--text3);margin-top:2px}
#csv-dropzone:hover{border-color:var(--accent);background:var(--accent-dim)}

/* ═══════════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════════ */
.table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--border)}
table{width:100%;border-collapse:collapse}
thead th{
  background:var(--surface2);padding:10px 14px;
  text-align:left;font-size:11px;font-weight:700;
  color:var(--text3);text-transform:uppercase;
  letter-spacing:0.6px;border-bottom:1px solid var(--border);
}
tbody tr{border-bottom:1px solid var(--border);transition:background var(--transition)}
tbody tr:last-child{border-bottom:none}
tbody tr:hover{background:rgba(168,126,224,0.10)}
tbody td{padding:10px 14px;font-size:13px;color:var(--text2)}
td.mono{font-family:'B612 Mono',monospace;font-size:12px}
/* data-table: borderless inline table (used in Login Log, Hesabe mapping) */
table.data-table{width:100%;border-collapse:collapse}
table.data-table thead th{background:var(--surface2);padding:8px 12px;font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:0.6px;border-bottom:1px solid var(--border)}
table.data-table tbody tr{border-bottom:1px solid var(--border)}
table.data-table tbody tr:last-child{border-bottom:none}
table.data-table tbody tr:hover{background:rgba(168,126,224,0.10)}
table.data-table tbody td{padding:8px 12px;font-size:13px;color:var(--text2)}
/* form helpers used by Hesabe settings and date-filter bar */
.form-group{margin-bottom:12px}
.form-row{display:flex;gap:10px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.form-label{display:block;font-size:11px;font-weight:700;color:var(--text3);margin-bottom:5px;letter-spacing:0.6px;text-transform:uppercase}
.form-input{width:100%;background:var(--surface2);border:1px solid var(--border2);border-radius:var(--radius2);padding:9px 13px;color:var(--text);font-family:'Mulish',sans-serif;font-size:14px;transition:border-color var(--transition),box-shadow var(--transition)}
.form-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(168,126,224,0.16)}

/* ── BADGES ── */
.badge{display:inline-flex;align-items:center;padding:2px 10px;border-radius:100px;font-size:11px;font-weight:700;letter-spacing:0.3px}
.badge-blue  {background:var(--accent-dim);color:var(--accent)}
.badge-gold  {background:var(--gold-dim);color:var(--gold)}
.badge-green {background:var(--green-dim);color:var(--green)}
.badge-red   {background:var(--red-dim);color:var(--red)}
.badge-purple{background:var(--purple-dim);color:var(--purple)}

/* ═══════════════════════════════════════════════════════════
   INVOICE BUILDER
   ═══════════════════════════════════════════════════════════ */
.inv-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.items-table-wrap{overflow-x:auto;margin-bottom:12px}
.items-table{width:100%;border-collapse:collapse;min-width:900px}
.items-table th{background:var(--surface2);padding:8px 10px;text-align:left;font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:0.4px;border-bottom:1px solid var(--border);white-space:nowrap}
.items-table td{padding:5px 4px;vertical-align:middle}
.items-table td input,.items-table td select{width:100%;background:var(--surface2);border:1px solid var(--border2);border-radius:var(--radius3);padding:6px 8px;color:var(--text);font-family:'Mulish',sans-serif;font-size:13px}
.items-table td input:focus,.items-table td select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(168,126,224,0.15)}
.items-table td.calc{font-family:'B612 Mono',monospace;font-size:12px;color:var(--text2);padding:5px 8px}
.items-table td.calc.profit{color:var(--green)}
.items-table .del-row{background:none;border:none;color:var(--text3);cursor:pointer;font-size:16px;padding:4px 6px;border-radius:var(--radius3);transition:color var(--transition)}
.items-table .del-row:hover{color:var(--red)}
.members-table{width:100%;border-collapse:collapse}
.members-table th{background:var(--surface2);padding:8px 12px;text-align:left;font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:0.4px;border-bottom:1px solid var(--border)}
.members-table td{padding:7px 12px;border-bottom:1px solid var(--border);font-size:13px}
.members-table td input{width:80px;background:var(--surface2);border:1px solid var(--border2);border-radius:var(--radius3);padding:4px 8px;color:var(--text);font-family:'B612 Mono',monospace;font-size:13px;text-align:center}
.members-table td input:focus{outline:none;border-color:var(--accent)}
.members-table td.mono{font-family:'B612 Mono',monospace;font-size:12px;color:var(--text2)}
.summary-box{background:var(--surface2);border:1px solid var(--border2);border-radius:var(--radius);padding:20px}
.summary-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--border)}
.summary-row:last-child{border-bottom:none}
.summary-label{font-size:13px;color:var(--text2);min-width:0;overflow-wrap:break-word}
.summary-value{font-family:'B612 Mono',monospace;font-size:14px;color:var(--text);font-weight:500}
.summary-value.green{color:var(--green)}
.summary-value.gold{color:var(--gold)}
.summary-value.accent{color:var(--accent)}

/* ═══════════════════════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════════════════════ */
.modal-bg{
  display:none;position:fixed;inset:0;z-index:1000;
  background:rgba(10,4,24,0.82);
  backdrop-filter:blur(8px);
  align-items:center;justify-content:center;
}
.modal-bg.open{display:flex}
.modal{
  background:var(--surface);
  border:1px solid rgba(200,160,248,0.15);
  border-radius:var(--radius);padding:28px;
  width:90%;max-width:700px;max-height:90vh;overflow-y:auto;
  box-shadow:0 8px 60px rgba(10,4,24,0.75),0 0 0 1px rgba(168,126,224,0.08);
}
.modal-title{font-family:'Syne',sans-serif;font-weight:700;font-size:18px;margin-bottom:20px;color:var(--text);overflow-wrap:break-word;min-width:0}

/* ═══════════════════════════════════════════════════════════
   INVOICE PRINT VIEW
   ═══════════════════════════════════════════════════════════ */
.invoice-print{background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius);padding:32px;max-width:900px;margin:0 auto}
.inv-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:28px;padding-bottom:20px;border-bottom:2px solid var(--border2)}
.inv-brand{font-family:'Syne',sans-serif;font-weight:800;font-size:24px;overflow-wrap:break-word;min-width:0}
.inv-brand span{color:var(--accent)}
.inv-meta{text-align:right}
.inv-num{font-family:'B612 Mono',monospace;font-size:22px;color:var(--accent);font-weight:500}
.inv-date{font-size:12px;color:var(--text3);margin-top:4px}

/* ═══════════════════════════════════════════════════════════
   SETTINGS VARS
   ═══════════════════════════════════════════════════════════ */
.var-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:20px}
.var-card{background:var(--surface2);border:1px solid var(--border2);border-radius:var(--radius);padding:16px}
.var-label{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px}
.var-input{width:100%;background:var(--surface);border:1px solid var(--accent);border-radius:var(--radius2);padding:10px 14px;color:var(--accent);font-family:'B612 Mono',monospace;font-size:18px;font-weight:500;text-align:center}
.var-input:focus{outline:none;box-shadow:0 0 0 3px rgba(168,126,224,0.16)}
.var-desc{font-size:11px;color:var(--text3);margin-top:6px;text-align:center}

/* ═══════════════════════════════════════════════════════════
   MISC COMPONENTS
   ═══════════════════════════════════════════════════════════ */
.ded-item{display:flex;align-items:center;gap:10px;padding:10px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius2);margin-bottom:8px}
.ded-name{flex:1;font-size:13px;color:var(--text)}
.ded-del{background:none;border:none;color:var(--text3);cursor:pointer;font-size:16px;padding:2px;transition:color var(--transition)}
.ded-del:hover{color:var(--red)}

#toast{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:8px}
.toast-item{
  background:var(--surface2);border:1px solid var(--border2);
  border-radius:var(--radius2);padding:12px 18px;font-size:13px;color:var(--text);
  box-shadow:var(--shadow);animation:slideIn 0.2s ease;
  display:flex;align-items:center;gap:8px;
}
.toast-item.success{border-color:var(--green);color:var(--green)}
.toast-item.error  {border-color:var(--red);color:var(--red)}
@keyframes slideIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}

.tabs{display:flex;gap:2px;background:var(--surface2);padding:4px;border-radius:var(--radius2);width:fit-content;margin-bottom:20px}
.tab{padding:7px 16px;border-radius:var(--radius3);cursor:pointer;font-size:13px;font-weight:600;color:var(--text3);transition:all var(--transition)}
.tab.active{background:var(--surface);color:var(--text);box-shadow:0 1px 5px rgba(10,4,24,0.4)}

.search-bar{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.search-bar input{flex:1;background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius2);padding:9px 14px;color:var(--text);font-family:'Mulish',sans-serif;font-size:13px}
.search-bar input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(168,126,224,0.14)}
.filter-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}



.hidden{display:none!important}

/* ═══════════════════════════════════════════════════════════
   PRINT
   ═══════════════════════════════════════════════════════════ */
@media print{
  body{--bg:#fff!important;--surface:#fff!important;--surface2:#f8f9fa!important;--surface3:#f1f5f9!important;--border:#e2e8f0!important;--border2:#cbd5e1!important;--text:#0f172a!important;--text2:#475569!important;--text3:#94a3b8!important}
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  #sidebar,#main .main-header,.no-print,#page-invoice-view>.card-header,.btn{display:none!important}
  body{background:#fff!important;color:#000!important;margin:0;padding:0}
  #main{margin-left:0!important;padding:0!important}
  .page{padding:0!important}
  .invoice-print{border:none!important;padding:20mm 15mm!important;box-shadow:none!important;background:#fff!important;width:210mm;min-height:297mm;box-sizing:border-box;margin:0 auto;color:#000!important}
  .invoice-print *{color:#000!important}
  .invoice-print .mono{font-family:'Courier New',monospace!important}
  table{border-collapse:collapse;width:100%}
  th,td{border:1px solid #ddd!important;padding:5px 8px!important;font-size:11px!important}
  th{background:#f5f5f5!important;font-weight:700}
  .summary-box{border:1px solid #ddd!important;padding:12px!important}
  .inv-brand img{max-height:50px}
  #mob-menu-btn,#sidebar,#sidebar-overlay{display:none!important}#main{margin:0!important}}
}
@page{size:A4 portrait;margin:0}

/* ═══════════════════════════════════════════════════════════
   MOBILE — hamburger & responsive layout
   ═══════════════════════════════════════════════════════════ */
#mob-menu-btn{
  display:none;background:none;border:none;cursor:pointer;
  padding:8px;border-radius:6px;color:var(--text);
  flex-direction:column;justify-content:center;align-items:center;gap:5px;
}
#mob-menu-btn span{display:block;width:22px;height:2px;border-radius:2px;background:currentColor;transition:all 0.25s ease}
#mob-menu-btn.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
#mob-menu-btn.open span:nth-child(2){opacity:0;transform:scaleX(0)}
#mob-menu-btn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

#sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(10,4,24,0.6);z-index:199;backdrop-filter:blur(2px)}
#sidebar-overlay.visible{display:block}

@media(max-width:768px){
  .auth-card{width:calc(100% - 32px);padding:32px 24px;border-radius:16px}
  #app{flex-direction:column;overflow:hidden}
  #sidebar{position:fixed;left:0;top:0;bottom:0;z-index:200;width:260px;transform:translateX(-100%);transition:transform 0.28s cubic-bezier(0.4,0,0.2,1);box-shadow:8px 0 32px rgba(10,4,24,0.6)}
  #sidebar.mob-open{transform:translateX(0)}
  #mob-menu-btn{display:flex}
  #main{width:100%;margin-left:0!important}
  .main-header{padding:14px 16px}
  .page-content{padding:16px 12px}
  .page-title{font-size:18px}
  .inv-grid{grid-template-columns:1fr}
  #dash-col-grid{grid-template-columns:1fr!important}
  .stat-grid{grid-template-columns:1fr 1fr}
  .var-grid{grid-template-columns:1fr}
  .modal{padding:20px 16px;max-height:92vh;max-height:92dvh;border-radius:16px 16px 0 0;align-self:flex-end;width:100%;max-width:100%}
  .modal-bg.open{align-items:flex-end}
  .filter-bar{gap:6px}
  .table-wrap{border-radius:8px}
  .stat-label{font-size:10px}
  .stat-sub{font-size:10px}
  .search-bar{flex-wrap:wrap}
  .search-bar input{min-width:0;flex:1}
  .tabs{overflow-x:auto;width:100%;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  #toast{right:8px;left:8px;bottom:16px;top:auto}
  .toast-item{width:100%}
}

@media(max-width:480px){
  .stat-grid{grid-template-columns:1fr 1fr}
  .stat-value{font-size:16px}
  .auth-card{padding:24px 16px}
  .auth-logo-img{width:72px;height:72px}
  .auth-logo{font-size:22px}
  .btn{font-size:13px}
}

/* ═══════════════════════════════════════════════════════════
   INVENTORY MODULE
   ═══════════════════════════════════════════════════════════ */
.inv-card{display:flex;flex-direction:column;gap:8px;position:relative;transition:border-color 0.2s,box-shadow 0.2s;color:var(--text)}
.inv-stock-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:100px}
.inv-stock-badge.ok{background:#d1fae5;color:#059669}
.inv-stock-badge.low{background:#fef3c7;color:#d97706}
.inv-stock-badge.zero{background:#fee2e2;color:#dc2626}
.inv-grid-cards{display:flex;flex-wrap:wrap;gap:10px}
.inv-card{flex:0 0 calc(16.666% - 9px);width:calc(16.666% - 9px);min-width:155px;box-sizing:border-box}
.inv-qr-wrap{display:flex;align-items:center;justify-content:center;background:var(--surface2);border-radius:6px;padding:4px;margin-top:4px;width:44px;height:44px}
.inv-qr-wrap canvas,.inv-qr-wrap img{width:36px!important;height:36px!important}
.inv-search-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}

.inv-autocomplete{position:absolute;z-index:500;background:var(--surface);border:1px solid var(--border2);border-radius:8px;box-shadow:var(--shadow);max-height:220px;overflow-y:auto;min-width:240px}
.inv-autocomplete-item{padding:8px 12px;cursor:pointer;font-size:13px;display:flex;flex-direction:column;gap:2px;border-bottom:1px solid var(--border)}
.inv-autocomplete-item:last-child{border-bottom:none}
.inv-autocomplete-item:hover,.inv-autocomplete-item.selected{background:var(--accent-dim);color:var(--accent)}
.inv-autocomplete-sub{font-size:10px;color:var(--text3);font-family:'B612 Mono',monospace}
.mtab-bar{display:flex;gap:4px;border-bottom:2px solid var(--border);margin-bottom:18px;padding:0 4px}
.mtab{padding:9px 18px;font-size:13px;font-weight:600;cursor:pointer;color:var(--text3);background:var(--surface2);border:1px solid var(--border);border-bottom:none;border-radius:8px 8px 0 0;margin-bottom:-2px;transition:all 0.15s}
.mtab:hover{background:var(--surface3);color:var(--text)}
.mtab.active{color:var(--accent);background:var(--surface);border-color:var(--border);border-bottom:2px solid var(--surface);margin-bottom:-2px}
@media(max-width:1200px){.inv-card{flex:0 0 calc(33.333% - 10px);width:calc(33.333% - 10px)}}
@media(max-width:900px){.inv-card{flex:0 0 calc(50% - 7px);width:calc(50% - 7px)}}
@media(max-width:768px){.inv-card{flex:0 0 calc(50% - 7px);width:calc(50% - 7px)}.inv-search-bar{gap:6px}}
@media(max-width:480px){.inv-card{flex:0 0 100%;width:100%}}
.share-menu-item{display:block;width:100%;text-align:left;background:none;border:none;padding:10px 16px;font-size:13px;font-family:'Mulish',sans-serif;color:var(--text);cursor:pointer;transition:background 0.15s}
.share-menu-item:hover{background:var(--surface3)}

/* ═══════════════════════════════════════════════════════════
   FULFILLMENT TRACKING
   ═══════════════════════════════════════════════════════════ */
.ff-inv-row:hover td{color:var(--text)!important}
#fulfillment-content .ff-pqty:focus,#fulfillment-content .ff-status:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(168,126,224,0.15)}
/* Delivery Collection Matrix */
.dc-matrix{border-collapse:collapse;width:100%}
.dc-matrix th,.dc-matrix td{padding:8px 12px;border:1px solid var(--border);font-size:13px}
.dc-matrix thead th{background:var(--surface2);font-weight:700;white-space:nowrap;position:sticky;top:0;z-index:1}
.dc-matrix .dc-item-col{position:sticky;left:0;background:var(--surface);z-index:2;font-weight:600;min-width:120px}
.dc-matrix thead .dc-item-col{z-index:3}
.dc-matrix .dc-member-col{min-width:70px;text-align:center}
.dc-matrix tbody tr:hover{background:var(--surface2)}