/* ============================================================
   GoldTrack Pro — Main Stylesheet
   Colors: Black #0A0A0A | Gold #C9A84C | White #FAFAF8
   ============================================================ */

/* ---- CSS Variables ---- */
:root {
  --gold:         #C9A84C;
  --gold-light:   #E8C96A;
  --gold-pale:    #F5E9C8;
  --gold-deep:    #8B6914;
  --black:        #0A0A0A;
  --black-2:      #111111;
  --black-3:      #1A1A1A;
  --black-4:      #242424;
  --white:        #FAFAF8;
  --white-2:      #F0EDE4;
  --gray:         #888878;
  --gray-light:   #BBB8AE;
  --text-main:    #FAFAF8;
  --text-muted:   #888878;
  --border:       rgba(201,168,76,0.15);
  --border-strong: rgba(201,168,76,0.35);
  --sidebar-w:    220px;
  --nav-h:        60px;
  --radius:       12px;
  --radius-sm:    8px;
  --success:      #4CAF50;
  --danger:       #EF5350;
}

/* ---- Reset & Base ---- */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--black);
  color: var(--text-main);
  min-height: 100vh;
  overflow-x: clip; /* clip instead of hidden — allows child overflow-x:auto to work */
}

/* ============================================================
   LOGIN SCREEN
   ============================================================ */
.login-screen {
  position: fixed;
  inset: 0;
  background: var(--black);
  z-index: 1000;
  display: flex;
}

.login-left {
  width: 55%;
  background: var(--black-2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 60px;
  position: relative;
  overflow: hidden;
}
.login-left::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(201,168,76,0.12) 0%, transparent 70%);
}

.login-right {
  width: 45%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 60px;
}

.login-brand {
  font-family: 'Cormorant Garamond', serif;
  font-size: 52px;
  font-weight: 700;
  color: var(--text-main);
  text-align: center;
  line-height: 1;
  position: relative;
  z-index: 1;
}
.login-brand span { color: var(--gold); }

.login-tagline {
  color: var(--text-muted);
  font-size: 15px;
  margin-top: 12px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.login-deco {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 1px solid var(--border);
  opacity: .3;
  bottom: -80px;
  right: -60px;
}
.login-deco2 {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 1px solid var(--border);
  opacity: .2;
  top: -50px;
  left: -30px;
}

.login-features {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 300px;
  position: relative;
  z-index: 1;
}

.feature-card {
  background: rgba(201,168,76,0.06);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  gap: 12px;
  align-items: center;
}
.feature-icon { font-size: 22px; }
.feature-title { font-size: 13px; font-weight: 600; color: var(--text-main); }
.feature-sub   { font-size: 12px; color: var(--text-muted); }

.login-form-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 6px;
}
.login-form-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 28px;
}

.login-form {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.role-select  { display: flex; gap: 8px; }
.role-btn {
  flex: 1;
  padding: 9px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-family: 'DM Sans', sans-serif;
  transition: .15s;
}
.role-btn.active {
  background: rgba(201,168,76,0.15);
  color: var(--gold);
  border-color: var(--border-strong);
}

.login-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-muted);
}
.remember-me {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.remember-me input { accent-color: var(--gold); }
.forgot-link  { color: var(--gold); cursor: pointer; }
.login-register { text-align: center; font-size: 12px; color: var(--text-muted); }
.gold-link { color: var(--gold); cursor: pointer; }

/* ============================================================
   TOP NAVIGATION
   ============================================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  background: var(--black-2);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 20px;
  z-index: 100;
  gap: 16px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  width: var(--sidebar-w);
  flex-shrink: 0;
}

.logo-mark {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  font-size: 18px;
  color: #fff;
}

.logo-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: 0.5px;
}
.logo-text span { color: var(--gold); }

.nav-search {
  flex: 1;
  max-width: 360px;
  position: relative;
}
.nav-search input {
  width: 100%;
  background: var(--black-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 14px 8px 36px;
  font-size: 13px;
  font-family: 'DM Sans', sans-serif;
  color: var(--text-main);
  outline: none;
}
.nav-search input::placeholder { color: var(--text-muted); }
.nav-search input:focus { border-color: var(--border-strong); }

.search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 14px;
}

.nav-spacer { flex: 1; }

.nav-actions { display: flex; align-items: center; gap: 10px; }

.nav-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--black-3);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  color: var(--text-muted);
  font-size: 16px;
  transition: all .2s;
}
.nav-btn:hover { border-color: var(--border-strong); color: var(--gold); }

.notif-dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 7px;
  height: 7px;
  background: var(--gold);
  border-radius: 50%;
  border: 1.5px solid var(--black-2);
}

.nav-profile {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 8px 4px 4px;
  border-radius: 8px;
  transition: .2s;
}
.nav-profile:hover { background: var(--black-3); }
.nav-profile span { font-size: 13px; font-weight: 500; }

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  border: 1.5px solid var(--border-strong);
}

/* ---- Notifications Panel ---- */
.notif-panel {
  position: fixed;
  top: 68px;
  right: 16px;
  width: 300px;
  background: var(--black-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  z-index: 200;
  display: none;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.notif-panel.open { display: block; }

.notif-header {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.notif-header h4 { font-size: 13px; font-weight: 600; }

.notif-badge {
  background: var(--gold);
  color: #000;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
}

.notif-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  transition: .15s;
}
.notif-item:hover { background: var(--black-4); }
.notif-item:last-child { border-bottom: none; }

.notif-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(201,168,76,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 2px;
}

.notif-content p { font-size: 12px; color: var(--text-main); line-height: 1.4; }
.notif-content span { font-size: 11px; color: var(--text-muted); }

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  bottom: 0;
  width: var(--sidebar-w);
  background: var(--black-2);
  border-right: 1px solid var(--border);
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  z-index: 50;
  overflow-y: auto;
}

.sidebar-section { margin-bottom: 24px; }

.sidebar-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0 8px;
  margin-bottom: 6px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all .15s;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 2px;
  position: relative;
}
.nav-item:hover { background: var(--black-3); color: var(--text-main); }
.nav-item.active {
  background: rgba(201,168,76,0.12);
  color: var(--gold);
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: var(--gold);
  border-radius: 0 3px 3px 0;
}

.nav-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.sidebar-footer {
  margin-top: auto;
  padding: 12px 8px;
  border-top: 1px solid var(--border);
}

.market-ticker {
  padding: 10px 12px;
  background: var(--black-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.ticker-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.ticker-price  { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 700; color: var(--gold); }
.ticker-unit   { font-size: 14px; }
.ticker-change { font-size: 11px; color: var(--success); }

/* ============================================================
   MAIN CONTENT & PAGES
   ============================================================ */
.main {
  margin-left: var(--sidebar-w);
  padding-top: var(--nav-h);
  min-height: 100vh;
}

.page { display: none; padding: 28px 28px 40px; }
.page.active { display: block; }

.page-header { margin-bottom: 24px; }
.page-header h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-weight: 600;
  color: var(--text-main);
}
.page-header p { font-size: 13px; color: var(--text-muted); margin-top: 4px; }

.date-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(201,168,76,0.1);
  border: 1px solid var(--border-strong);
  color: var(--gold);
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 20px;
  margin-top: 8px;
}

/* ---- Stat Cards ---- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--black-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  position: relative;
  overflow: hidden;
  transition: .2s;
}
.stat-card:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.stat-card::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: rgba(201,168,76,0.06);
  transform: translate(20px, -20px);
}

.stat-label  { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 10px; }
.stat-val    { font-family: 'Cormorant Garamond', serif; font-size: 30px; font-weight: 700; line-height: 1; margin-bottom: 8px; }
.stat-accent { font-size: 16px; color: var(--gold); }
.stat-icon   { position: absolute; top: 18px; right: 18px; font-size: 20px; opacity: .5; }
.stat-change { font-size: 11px; display: flex; align-items: center; gap: 4px; }
.stat-change.up   { color: var(--success); }
.stat-change.down { color: var(--danger); }

/* ---- Cards ---- */
.card {
  background: var(--black-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.mb-16 { margin-bottom: 16px; }

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.card-title    { font-size: 14px; font-weight: 600; }
.card-subtitle { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.chart-section {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
.chart-container { position: relative; height: 220px; }

/* ---- Purity Bars ---- */
.purity-list  { display: flex; flex-direction: column; gap: 10px; }
.purity-item  { display: flex; flex-direction: column; gap: 4px; }
.purity-info  { display: flex; justify-content: space-between; align-items: center; }
.purity-label { font-size: 12px; font-weight: 500; }
.purity-pct   { font-size: 12px; color: var(--gold); font-weight: 600; }
.purity-bar-bg { height: 5px; background: var(--black-3); border-radius: 3px; overflow: hidden; }
.purity-bar    { height: 100%; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); border-radius: 3px; }

/* ============================================================
   TABLE
   ============================================================ */
.table-wrapper { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead tr { border-bottom: 1px solid var(--border-strong); }
th {
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  white-space: nowrap;
}
td { padding: 12px 14px; border-bottom: 1px solid var(--border); }
tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(201,168,76,0.04); }

/* ---- Badges ---- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}
.badge-buy  { background: rgba(76,175,80,0.15);  color: var(--success); }
.badge-sell { background: rgba(239,83,80,0.15);  color: var(--danger); }
.badge-24k  { background: rgba(201,168,76,0.2);  color: var(--gold-light); }
.badge-22k  { background: rgba(139,105,20,0.25); color: #D4A843; }
.badge-18k  { background: rgba(100,80,20,0.3);   color: #B8932E; }

/* ============================================================
   FORMS & INPUTS
   ============================================================ */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group.full { grid-column: 1 / -1; }
.full-width { width: 100%; }

.form-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--text-muted);
}

.form-input {
  background: var(--black-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: 14px;
  color: var(--text-main);
  font-family: 'DM Sans', sans-serif;
  outline: none;
  transition: .2s;
}
.form-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,168,76,0.12); }
.form-input::placeholder { color: var(--text-muted); }
.form-input option { background: var(--black-3); }

.auto-field {
  background: rgba(201,168,76,0.06);
  color: var(--gold);
  font-weight: 600;
  border-color: var(--border-strong);
}

.form-actions { display: flex; gap: 10px; margin-top: 20px; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary {
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  color: #000;
  border: none;
  padding: 13px 28px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: all .2s;
  letter-spacing: .3px;
}
.btn-primary:hover { opacity: .9; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(201,168,76,0.3); }

.btn-outline {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--border-strong);
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: .2s;
}
.btn-outline:hover { background: rgba(201,168,76,0.1); }

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
}
.btn-ghost:hover { color: var(--text-main); border-color: var(--border-strong); }

.btn-edit {
  background: rgba(201,168,76,0.1);
  color: var(--gold);
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: .2s;
}
.btn-edit:hover { background: rgba(201,168,76,0.2); }

.btn-danger {
  background: rgba(239,83,80,0.12);
  color: var(--danger);
  border: 1px solid rgba(239,83,80,0.3);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: .2s;
}
.btn-danger:hover { background: rgba(239,83,80,0.2); }

.btn-group { display: flex; gap: 4px; }
.btn-sm {
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: .15s;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-family: 'DM Sans', sans-serif;
}
.btn-sm:hover  { color: var(--text-main); border-color: var(--border-strong); }
.btn-sm.active { background: rgba(201,168,76,0.15); color: var(--gold); border-color: var(--border-strong); }

/* ============================================================
   CALCULATOR
   ============================================================ */
.calc-container { max-width: 540px; margin: 0 auto; }
.calc-card {
  background: var(--black-2);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  padding: 32px;
}
.calc-title { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 700; }
.calc-desc  { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.calc-divider { height: 1px; background: var(--border); margin: 24px 0; }
.calc-inputs { display: flex; flex-direction: column; gap: 16px; }
.calc-results-label { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 12px; }

.calc-result-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.calc-result-card {
  background: rgba(201,168,76,0.08);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 16px;
}
.calc-result-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 6px; }
.calc-result-val   { font-family: 'DM Sans', sans-serif; font-size: 28px; font-weight: 700; color: #ffffff; letter-spacing: -0.5px; line-height: 1.1; }
.calc-result-unit  { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

/* ============================================================
   RECEIPT
   ============================================================ */
.receipt-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.receipt-form { display: flex; flex-direction: column; gap: 14px; }
.receipt-preview-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.receipt-preview {
  background: var(--white);
  color: #1a1a1a;
  border-radius: var(--radius);
  padding: 32px;
  font-family: 'DM Sans', sans-serif;
}
.receipt-header { text-align: center; border-bottom: 2px solid var(--gold); padding-bottom: 20px; margin-bottom: 20px; }
.receipt-logo   { font-family: 'Cormorant Garamond', serif; font-size: 28px; font-weight: 700; color: #1a1a1a; }
.receipt-logo span { color: var(--gold-deep); }
.receipt-sub      { font-size: 12px; color: #666; margin-top: 4px; }
.receipt-official { margin-top: 8px; font-size: 12px; color: #888; }

.receipt-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
  font-size: 13px;
}
.receipt-row:last-of-type { border-bottom: none; }
.receipt-row .label { color: #666; }
.receipt-row .val   { font-weight: 600; color: #1a1a1a; }

.receipt-divider { height: 1px; background: #ddd; margin: 12px 0; }

.receipt-total {
  display: flex;
  justify-content: space-between;
  padding: 14px 0 0;
  margin-top: 8px;
  border-top: 2px solid var(--gold-deep);
}
.receipt-total .label { font-size: 15px; font-weight: 700; color: #1a1a1a; }
.receipt-total .val   { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 700; color: var(--gold-deep); }

.receipt-footer {
  text-align: center;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed #ccc;
  font-size: 11px;
  color: #999;
  line-height: 1.6;
}
.receipt-actions { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }

/* ============================================================
   CUSTOMERS
   ============================================================ */
.cust-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--black-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 14px;
  width: 260px;
}
.search-bar input {
  background: none;
  border: none;
  outline: none;
  font-size: 13px;
  color: var(--text-main);
  font-family: 'DM Sans', sans-serif;
  flex: 1;
}
.search-bar input::placeholder { color: var(--text-muted); }
.search-icon-sm { font-size: 14px; color: var(--text-muted); }

/* ============================================================
   REPORTS
   ============================================================ */
.report-tabs {
  display: flex;
  gap: 0;
  background: var(--black-3);
  border-radius: var(--radius-sm);
  padding: 3px;
  margin-bottom: 20px;
  width: fit-content;
}
.report-tab {
  padding: 8px 20px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  transition: .15s;
}
.report-tab.active {
  background: var(--black-2);
  color: var(--gold);
  border: 1px solid var(--border-strong);
}
.report-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
.report-stat {
  background: var(--black-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.report-stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 6px; }
.report-stat-val   { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 700; }

/* ============================================================
   SETTINGS
   ============================================================ */
.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 800px;
}
.settings-form  { display: flex; flex-direction: column; gap: 12px; }
.settings-prefs { display: flex; flex-direction: column; gap: 0; }

.pref-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.pref-row:last-of-type { border-bottom: none; }
.pref-title { font-size: 13px; font-weight: 500; }
.pref-sub   { font-size: 12px; color: var(--text-muted); }
.gold-check { accent-color: var(--gold); width: 16px; height: 16px; cursor: pointer; }

.pref-price-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

/* ============================================================
   MODAL
   ============================================================ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.7);
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.modal-backdrop.open { display: flex; }

.modal {
  background: var(--black-2);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  padding: 28px;
  width: 460px;
  max-width: 95vw;
}
.modal-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
}
.modal-form   { display: flex; flex-direction: column; gap: 14px; }
.modal-footer { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
  .login-screen, .nav, .sidebar, .card:not(:has(.receipt-preview)),
  .receipt-form, .receipt-preview-label, .receipt-actions,
  .btn-primary, .btn-outline, .btn-ghost, .page-header { display: none !important; }

  body { background: #fff; color: #000; }
  .main { margin: 0; padding: 0; }
  .page { padding: 0; display: block !important; }
  .receipt-layout { display: block; }

  .receipt-preview {
    box-shadow: none;
    border: none;
    max-width: 100%;
    margin: 0;
    padding: 20px;
  }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .chart-section { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); transition: .3s; }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0; }
  .nav-logo { width: auto; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .receipt-layout { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .login-left { display: none; }
  .login-right { width: 100%; }
  .report-stats { grid-template-columns: 1fr; }
}

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }

/* ============================================================
   TRANSACTIONS — GOLD CALCULATOR UI
   ============================================================ */

/* ── Step visibility ── */
.txstep          { display: none; }
.txstep.active   { display: block; animation: txFadeIn .25s ease both; }
@keyframes txFadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

/* ── Back button ── */
.txback-btn {
  background: var(--black-3);
  border: 1px solid var(--border-strong);
  color: var(--gold);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: .15s;
}
.txback-btn:hover { background: rgba(201,168,76,0.12); }

/* ── Type chooser grid ── */
.txtype-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 780px;
}

.txtype-card {
  background: var(--black-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  cursor: pointer;
  transition: all .2s cubic-bezier(.34,1.56,.64,1);
}
.txtype-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(201,168,76,.15);
}
.txtype-card:active { transform: scale(.98); }

.txtype-featured {
  background: linear-gradient(135deg, rgba(201,168,76,.12), rgba(139,105,20,.1));
  border-color: var(--border-strong);
}
.txtype-featured:hover { box-shadow: 0 8px 32px rgba(201,168,76,.25); }

.txtype-icon-wrap {
  width: 60px; height: 60px;
  border-radius: 16px;
  background: rgba(201,168,76,0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
  flex-shrink: 0;
}
.txtype-icon-green { background: rgba(76,175,80,0.15); }
.txtype-icon-blue  { background: rgba(66,153,225,0.15); }

.txtype-body { flex: 1; }
.txtype-body h3 { font-size: 16px; font-weight: 700; color: var(--text-main); margin-bottom: 5px; }
.txtype-body p  { font-size: 13px; color: var(--text-muted); line-height: 1.4; }
.txtype-arrow   { font-size: 24px; color: var(--text-muted); font-weight: 300; }

/* ── TXN ID strip ── */
.txid-strip {
  background: rgba(201,168,76,0.08);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 18px;
}
.txid-strip-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.txid-strip-val   { font-family: monospace, monospace; font-size: 15px; font-weight: 700; color: var(--gold); }

/* ── Form layout ── */
.txform-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 20px;
  align-items: start;
}

.txform-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.txform-grid .full-col { grid-column: 1 / -1; }

.form-textarea {
  resize: vertical;
  min-height: 70px;
  line-height: 1.5;
}
.form-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  display: block;
}
.form-optional { color: var(--text-muted); font-size: 11px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.req { color: var(--gold); }

.auto-total {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--gold) !important;
}

/* ── Output panel (right side) ── */
.output-panel {
  background: var(--black-3);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  padding: 24px;
  position: sticky;
  top: calc(var(--nav-h) + 16px);
}
.output-panel-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 16px;
}
.output-panel-hint {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  padding: 24px 0;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
}

.output-rows { display: flex; flex-direction: column; gap: 0; }

.output-row-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.output-row-item:last-child { border-bottom: none; }

.output-label { font-size: 13px; color: var(--text-muted); }
.output-val   { font-size: 15px; font-weight: 700; color: var(--text-main); font-family: 'Cormorant Garamond', serif; }

.output-divider { height: 1px; background: var(--border-strong); margin: 6px 0; }

.output-total-row { padding-top: 16px; }
.output-total-row .output-label { font-size: 14px; font-weight: 700; color: var(--text-main); }
.output-total-val  { font-size: 28px !important; color: var(--gold) !important; }

/* ── Success screen ── */
.txsuccess-wrap {
  max-width: 540px;
  margin: 0 auto;
  padding: 24px 0 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Small icon — request: make it small */
.txsuccess-icon-sm {
  font-size: 22px;
  margin-bottom: 12px;
  animation: pop .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pop { from { transform:scale(0); opacity:0; } to { transform:scale(1); opacity:1; } }

/* keep old class for any lingering references but make it small too */
.txsuccess-icon  { font-size: 22px; margin-bottom: 12px; }
.txsuccess-title { display:none; }
.txsuccess-sub   { display:none; }
.txsuccess-id    { display:none; }
.txsuccess-card  { display:none; }
.txsuccess-card .sc-row { display: none; }
.txsuccess-card .sc-key { display: none; }
.txsuccess-card .sc-val { display: none; }

/* ── Gold tx table badges ── */
.badge-balls   { background: rgba(201,168,76,.18);  color: var(--gold-light); }
.badge-ref-c   { background: rgba(76,175,80,.15);   color: #81c784; }
.badge-ref-s   { background: rgba(66,153,225,.15);  color: #64b5f6; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .txform-layout { grid-template-columns: 1fr; }
  .output-panel  { position: static; }
}
@media (max-width: 640px) {
  .txtype-card   { flex-direction: column; text-align: center; }
  .txtype-arrow  { display: none; }
  .txform-grid   { grid-template-columns: 1fr; }
  .txform-grid .full-col { grid-column: 1; }
}

@keyframes shakeInput {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-5px); }
  40%     { transform: translateX(5px); }
  60%     { transform: translateX(-4px); }
  80%     { transform: translateX(4px); }
}

/* ============================================================
   GOLD CALCULATOR — SCREENSHOT-EXACT STYLE
   White card, floating labels, orange accents, OUTPUT below
   ============================================================ */

.gc-page-wrap {
  padding-bottom: 32px;
}

/* ── Calculator input card (white, like screenshot) ── */
.gc-card {
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(0,0,0,0.10);
  margin-bottom: 18px;
}

/* Each field row inside the white card */
.gc-field-wrap {
  border-bottom: 1px solid #efefef;
  padding: 0;
  position: relative;
  transition: border-color .15s;
}
.gc-field-wrap.gc-focused {
  border-bottom-color: #E8A020;
}
/* The entire border of the wrap goes orange on focus */
.gc-field-wrap.gc-focused .gc-field-inner {
  border: 2px solid #E8A020;
  border-radius: 14px;
  margin: 4px;
}
.gc-field-inner {
  display: flex;
  align-items: center;
  padding: 18px 18px 14px 18px;
  gap: 12px;
  border: 2px solid transparent;
  border-radius: 14px;
  margin: 4px;
  transition: border-color .15s;
}

/* Floating label sits above the row */
.gc-fl-label {
  position: absolute;
  top: -1px;
  left: 20px;
  font-size: 12px;
  font-weight: 500;
  color: #aaa;
  background: #ffffff;
  padding: 0 4px;
  pointer-events: none;
  /* sits on the top border line of the card row */
  transform: translateY(-50%);
  line-height: 1;
}
.gc-field-wrap:first-child .gc-fl-label {
  /* first row — label sits on top edge of card */
  top: 0;
}

/* Icon */
.gc-icon {
  font-size: 22px;
  color: #E8A020;
  font-weight: 400;
  width: 28px;
  text-align: center;
  flex-shrink: 0;
  font-style: normal;
  line-height: 1;
}

/* Input */
.gc-input {
  flex: 1;
  border: none;
  outline: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #E8A020;
  background: transparent;
  min-width: 0;
  padding: 0;
}
.gc-input::placeholder { color: #e0c080; font-weight: 300; }
/* Remove number input arrows */
.gc-input::-webkit-outer-spin-button,
.gc-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gc-input[type=number] { -moz-appearance: textfield; }

/* ── OUTPUT card (white, matches screenshot) ── */
.gc-output-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 20px 22px 8px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.10);
  margin-bottom: 6px;
}

.gc-output-title {
  font-size: 16px;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 14px;
  letter-spacing: .01em;
}

.gc-output-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid #f0f0f0;
}
.gc-output-row:last-child {
  border-bottom: none;
  padding-bottom: 14px;
}

.gc-out-label {
  font-size: 15px;
  font-weight: 400;
  color: #333;
}

.gc-out-val {
  font-size: 16px;
  font-weight: 600;
  color: #e05a2b;   /* orange-red, matching the screenshot values */
  font-family: 'DM Sans', sans-serif;
  min-width: 80px;
  text-align: right;
}

/* shake for validation errors on gc-inputs */
.gc-field-wrap.gc-error .gc-field-inner {
  border-color: #ef4444 !important;
  animation: shakeInput .3s ease;
}

/* ============================================================
   SETTINGS MODAL
   ============================================================ */

/* Backdrop */
.smodal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  z-index: 500;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  padding: 20px;
}
.smodal-backdrop.open { display: flex; }

/* Modal shell */
.smodal {
  background: var(--black-2);
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  width: 100%;
  max-width: 900px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 32px 80px rgba(0,0,0,.6);
  overflow: hidden;
  animation: smodalIn .22s cubic-bezier(.34,1.56,.64,1);
}
@keyframes smodalIn {
  from { opacity:0; transform:scale(.96) translateY(10px); }
  to   { opacity:1; transform:scale(1)  translateY(0); }
}

/* Header */
.smodal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.smodal-header-left { display: flex; align-items: center; gap: 12px; }
.smodal-logo        { font-size: 22px; }
.smodal-title       { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 700; color: var(--text-main); }
.smodal-sub         { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.smodal-close {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--black-3); border: 1px solid var(--border);
  color: var(--text-muted); font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: .15s;
}
.smodal-close:hover { background: rgba(239,83,80,.15); color: var(--danger); border-color: var(--danger); }

/* Body = sidebar + panel */
.smodal-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* LEFT NAV */
.smodal-nav {
  width: 200px;
  flex-shrink: 0;
  background: var(--black-3);
  border-right: 1px solid var(--border);
  padding: 12px 8px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.smodal-nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  transition: all .14s;
  white-space: nowrap;
}
.smodal-nav-item span { font-size: 15px; flex-shrink: 0; }
.smodal-nav-item:hover  { background: var(--black-4); color: var(--text-main); }
.smodal-nav-item.active { background: rgba(201,168,76,.12); color: var(--gold); }
.smodal-nav-item.active::before {
  content: '';
  position: absolute;
  /* left bar handled via padding trick */
}
.smodal-nav-divider { height: 1px; background: var(--border); margin: 8px 4px; }
.smodal-signout { color: var(--danger) !important; margin-top: 2px; }
.smodal-signout:hover { background: rgba(239,83,80,.1) !important; }

/* RIGHT PANEL */
.smodal-panel {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px;
}
.smodal-panel::-webkit-scrollbar { width: 4px; }
.smodal-panel::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; }

/* Tabs */
.stab         { display: none; }
.stab.active  { display: block; animation: fadeIn .2s ease; }

.stab-title    { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 700; color: var(--text-main); margin-bottom: 4px; }
.stab-subtitle { font-size: 13px; color: var(--text-muted); margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }

/* Sections inside tabs */
.ssection {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.ssection:last-of-type { border-bottom: none; }
.ssection-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: .3px;
  margin-bottom: 14px;
}

/* Form elements */
.sform-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.sform-group { display: flex; flex-direction: column; gap: 5px; }
.sform-group.sfull { grid-column: 1 / -1; }
.sform-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--text-muted);
}
.sform-opt { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 11px; color: var(--text-muted); }
.sform-hint { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.sform-note {
  font-size: 12px;
  color: var(--gold);
  background: rgba(201,168,76,.08);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  margin-top: 10px;
}

.sform-input {
  background: var(--black-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 13px;
  font-size: 14px;
  font-family: 'DM Sans', sans-serif;
  color: var(--text-main);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}
.sform-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,168,76,.12);
}
.sform-input::placeholder { color: var(--text-muted); }
.sform-input option        { background: var(--black-3); }

/* Buttons */
.sbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  border: none;
  transition: all .15s;
  white-space: nowrap;
}
.sbtn-primary { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #000; }
.sbtn-primary:hover { opacity: .9; }
.sbtn-ghost   { background: transparent; border: 1px solid var(--border); color: var(--text-muted); }
.sbtn-ghost:hover { border-color: var(--border-strong); color: var(--text-main); }
.sbtn-danger  { background: rgba(239,83,80,.12); border: 1px solid rgba(239,83,80,.3); color: var(--danger); }
.sbtn-danger:hover { background: rgba(239,83,80,.22); }
.sbtn-sm { padding: 6px 14px; font-size: 12px; }

/* Toggle switch */
.stoggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  gap: 16px;
}
.stoggle-row:last-of-type { border-bottom: none; }
.stoggle-label { font-size: 13px; font-weight: 500; color: var(--text-main); }
.stoggle-sub   { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.stoggle { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.stoggle input { opacity: 0; width: 0; height: 0; }
.stoggle-slider {
  position: absolute; inset: 0;
  background: var(--black-4);
  border: 1px solid var(--border);
  border-radius: 22px;
  cursor: pointer;
  transition: .2s;
}
.stoggle-slider::before {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  left: 3px; top: 3px;
  background: var(--text-muted);
  border-radius: 50%;
  transition: .2s;
}
.stoggle input:checked + .stoggle-slider { background: rgba(201,168,76,.25); border-color: var(--gold); }
.stoggle input:checked + .stoggle-slider::before { transform: translateX(18px); background: var(--gold); }

/* Info rows */
.sinfo-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.sinfo-row:last-child { border-bottom: none; }
.sinfo-label { color: var(--text-muted); }
.sinfo-val   { font-weight: 600; color: var(--text-main); }

/* Danger box */
.sdanger-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(239,83,80,.06);
  border: 1px solid rgba(239,83,80,.2);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  gap: 16px;
}

/* Users table */
.stable-wrap { overflow-x: auto; margin-top: 8px; }
.stable-wrap table { width: 100%; border-collapse: collapse; font-size: 12px; }
.stable-wrap th {
  padding: 8px 10px; text-align: left;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px;
  color: var(--text-muted); border-bottom: 1px solid var(--border); white-space: nowrap;
}
.stable-wrap td { padding: 10px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.stable-wrap tr:last-child td { border-bottom: none; }
.stable-wrap tr:hover td { background: rgba(201,168,76,.04); }

/* Permissions checkboxes */
.sperm-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--black-3);
}
.sperm-check input { accent-color: var(--gold); }

/* System log */
.slog-box {
  background: var(--black-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  max-height: 140px;
  overflow-y: auto;
  font-family: monospace;
  font-size: 11px;
}
.slog-entry  { padding: 3px 0; border-bottom: 1px solid var(--border); display: flex; gap: 10px; }
.slog-entry:last-child { border-bottom: none; }
.slog-time   { color: var(--gold); flex-shrink: 0; }
.slog-text   { color: var(--text-muted); }

/* Inline message helper */
.smsg { padding: 8px 12px; border-radius: 7px; font-size: 13px; font-weight: 500; margin-bottom: 12px; }
.smsg-ok  { background: rgba(76,175,80,.12);  border: 1px solid #4CAF50; color: #81c784; }
.smsg-err { background: rgba(239,83,80,.12);  border: 1px solid #ef5350; color: #ef9a9a; }

/* Responsive — handled by mobile redesign section below */
@media (max-width: 700px) {
  .smodal-panel { padding: 16px; }
  .sform-grid { grid-template-columns: 1fr; }
  .sform-group.sfull { grid-column: 1; }
}

/* ── Settings Modal v2 additions ───────────────────────────── */

/* Search bar in header */
.smodal-search-wrap { flex:1; max-width:240px; margin:0 12px; }
.smodal-search {
  width:100%; background:var(--black-3); border:1px solid var(--border);
  border-radius:20px; padding:7px 14px; font-size:13px;
  font-family:'DM Sans',sans-serif; color:var(--text-main); outline:none;
}
.smodal-search:focus { border-color:var(--gold); }

/* Nav icon + label */
.snav-icon  { font-size:15px; flex-shrink:0; }
.snav-label { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Tab heading with role badge */
.stab-heading { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--border); }
.stab-title   { font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:700;
                color:var(--text-main); margin-bottom:4px; }
.stab-subtitle{ font-size:13px; color:var(--text-muted); }
.srole-badge  {
  display:inline-block; margin-top:6px;
  background:rgba(201,168,76,.15); border:1px solid rgba(201,168,76,.3);
  color:var(--gold); font-size:11px; font-weight:700;
  padding:2px 8px; border-radius:12px; letter-spacing:.4px;
}

/* Required asterisk */
.sreq { color:var(--danger); margin-left:2px; }

/* Avatar row */
.savatar-row {
  display:flex; align-items:center; gap:16px;
  padding:14px; background:var(--black-3);
  border-radius:10px; margin-bottom:18px;
  border:1px solid var(--border);
}
.savatar-wrap {
  width:64px; height:64px; border-radius:50%; flex-shrink:0;
  background:var(--black-4); border:2px solid var(--border-strong);
  overflow:hidden; display:flex; align-items:center; justify-content:center;
  position:relative;
}
.savatar-wrap img { width:100%; height:100%; object-fit:cover; }
.savatar-initials { font-size:20px; font-weight:700; color:var(--gold); }

/* Password field with toggle */
.spassword-wrap { position:relative; }
.spassword-wrap .sform-input { padding-right:38px; }
.spwd-toggle {
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; font-size:14px;
  color:var(--text-muted); padding:0;
}

/* Password strength bar */
.spwd-strength-bar {
  height:3px; background:var(--black-4); border-radius:2px; margin-top:6px;
}
.spwd-strength-bar > div {
  height:3px; border-radius:2px; transition:width .3s, background .3s; width:0%;
}

/* Info box (shows current value) */
.sinfo-box {
  background:rgba(201,168,76,.07); border:1px solid var(--border);
  border-radius:8px; padding:10px 14px; font-size:13px;
}

/* Radio options for 2FA */
.sradio-opt {
  display:flex; align-items:center; gap:6px; cursor:pointer;
  padding:7px 14px; border-radius:8px; border:1px solid var(--border);
  font-size:13px; color:var(--text-muted);
  background:var(--black-3); transition:.15s;
}
.sradio-opt input { accent-color:var(--gold); }
.sradio-opt:has(input:checked) {
  border-color:var(--gold); color:var(--gold);
  background:rgba(201,168,76,.1);
}

/* Footer row at bottom of each tab */
.stab-footer {
  display:flex; justify-content:flex-end; gap:10px;
  padding-top:16px; margin-top:12px;
  border-top:1px solid var(--border);
}

/* Sticky unsaved changes bar */
#smodal-unsaved-bar {
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 20px; background:rgba(245,158,11,.15);
  border-top:1px solid rgba(245,158,11,.3);
  font-size:13px; color:#fbbf24; flex-shrink:0;
}

/* Loading placeholder */
.sloading { text-align:center; padding:24px; color:var(--text-muted); font-size:13px; }

/* Danger section title */
.sdanger-title { color:var(--danger) !important; }

/* Message area (replaces inline display:none pattern) */
.smsg-area { margin-bottom:8px; }
.smsg-area:empty { margin:0; }

/* Users table in Manage Users */
.stable-wrap table { width:100%; border-collapse:collapse; font-size:12px; }
.stable-wrap th {
  padding:8px 10px; text-align:left;
  font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.8px; color:var(--text-muted);
  border-bottom:1px solid var(--border);
}
.stable-wrap td { padding:10px; border-bottom:1px solid var(--border); vertical-align:middle; }
.stable-wrap tr:last-child td { border-bottom:none; }
.stable-wrap tr:hover td { background:rgba(201,168,76,.04); }

/* Permissions checkboxes */
.sperm-check {
  display:flex; align-items:center; gap:6px;
  font-size:12px; color:var(--text-muted); cursor:pointer;
  padding:5px 10px; border-radius:6px;
  border:1px solid var(--border); background:var(--black-3);
}
.sperm-check input { accent-color:var(--gold); }
.sperm-check:has(input:checked) { border-color:var(--gold); color:var(--gold); }

/* System log box */
.slog-box {
  background:var(--black-3); border:1px solid var(--border);
  border-radius:8px; padding:12px; max-height:150px;
  overflow-y:auto; font-family:monospace; font-size:11px;
}
.slog-entry  { padding:3px 0; border-bottom:1px solid var(--border);
               display:flex; gap:10px; }
.slog-entry:last-child { border-bottom:none; }
.slog-time   { color:var(--gold); flex-shrink:0; }
.slog-text   { color:var(--text-muted); }

/* ── Settings sub-tabs (Users / Branches) ───────────────── */
.ssubtab-bar {
  display: flex;
  gap: 4px;
  background: var(--black-3);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 16px;
}
.ssubtab {
  flex: 1;
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  background: transparent;
  color: var(--text-muted);
  transition: all .15s;
}
.ssubtab:hover  { background: var(--black-4); color: var(--text-main); }
.ssubtab.active { background: var(--black-1); color: var(--gold);
                  box-shadow: 0 1px 4px rgba(0,0,0,.3); }

/* Branch ID badge */
.branch-id-badge {
  display: inline-block;
  background: rgba(201,168,76,.15);
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  font-family: monospace;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid rgba(201,168,76,.3);
}

/* Active/Inactive dot in tables */
.sdot-active   { color: #81c784; font-weight: 700; }
.sdot-inactive { color: var(--text-muted); }

/* ============================================================
   GOLDTRACK PRO — UI REDESIGN v2
   Professional overrides: typography, spacing, depth, polish
   All existing class names preserved — no JS changes needed.
   ============================================================ */

/* ── Better Google Font import (add Inter as primary) ────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Cormorant+Garamond:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Root variable upgrades ──────────────────────────────── */
:root {
  --font-main:    'Inter', 'DM Sans', system-ui, sans-serif;
  --font-serif:   'Cormorant Garamond', Georgia, serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  --black:        #080B0F;
  --black-2:      #0F1117;
  --black-3:      #161B24;
  --black-4:      #1E2533;
  --black-5:      #252D3D;

  --gold:         #D4A843;
  --gold-light:   #E8C46A;
  --gold-pale:    #F5E9C8;
  --gold-deep:    #96720E;
  --gold-glow:    rgba(212,168,67,.18);
  --gold-subtle:  rgba(212,168,67,.08);

  --text-main:    #EDF0F5;
  --text-soft:    #C5CAD6;
  --text-muted:   #7A8299;
  --text-faint:   #4A5268;

  --border:       rgba(212,168,67,.12);
  --border-soft:  rgba(255,255,255,.06);
  --border-strong:rgba(212,168,67,.28);

  --success:      #34C97B;
  --danger:       #F05252;
  --warning:      #F59E0B;
  --info:         #60A5FA;

  --shadow-sm:    0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
  --shadow-md:    0 4px 16px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.3);
  --shadow-lg:    0 12px 40px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.4);
  --shadow-gold:  0 8px 24px rgba(212,168,67,.22);

  --radius:       14px;
  --radius-sm:    9px;
  --radius-xs:    6px;
  --radius-xl:    20px;

  --transition:   all .18s cubic-bezier(.4,0,.2,1);
}

/* ── Global base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-main);
  background: var(--black);
  color: var(--text-main);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── LOGIN SCREEN ─────────────────────────────────────────── */
.login-screen {
  background: linear-gradient(135deg, var(--black) 0%, #0A0E16 100%);
}

.login-left {
  background: linear-gradient(160deg, var(--black-2) 0%, #0A0E18 100%);
  border-right: 1px solid var(--border-soft);
}

.login-left::before {
  background: radial-gradient(ellipse at 30% 80%, rgba(212,168,67,.14) 0%, transparent 65%),
              radial-gradient(ellipse at 80% 20%, rgba(212,168,67,.06) 0%, transparent 50%);
}

.login-brand {
  font-family: var(--font-serif);
  font-size: 56px;
  font-weight: 700;
  letter-spacing: -1px;
  background: linear-gradient(135deg, var(--text-main) 40%, var(--gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.login-brand span {
  -webkit-text-fill-color: var(--gold);
  background: none;
}

.login-tagline {
  font-size: 15px;
  color: var(--text-muted);
  letter-spacing: .3px;
}

.feature-card {
  background: rgba(212,168,67,.05);
  border: 1px solid rgba(212,168,67,.1);
  border-radius: 12px;
  padding: 16px 18px;
  backdrop-filter: blur(4px);
  transition: var(--transition);
}
.feature-card:hover {
  background: rgba(212,168,67,.09);
  border-color: rgba(212,168,67,.2);
}
.feature-title { font-size: 13px; font-weight: 600; color: var(--text-soft); }
.feature-sub   { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.login-right {
  background: linear-gradient(160deg, #0C1018 0%, var(--black) 100%);
}

.login-form-title {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -.3px;
  margin-bottom: 6px;
}
.login-form-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 30px;
}

.login-form {
  max-width: 360px;
}

/* ── TOP NAVIGATION ──────────────────────────────────────── */
.nav {
  background: rgba(15,17,23,.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border-soft);
  box-shadow: 0 1px 0 rgba(212,168,67,.08);
}

.logo-mark {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);
  border-radius: 9px;
  box-shadow: 0 2px 8px rgba(212,168,67,.3);
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: 16px;
}

.logo-text {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--text-main);
}
.logo-text span { color: var(--gold); }

.nav-search input {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border-soft);
  border-radius: 9px;
  font-family: var(--font-main);
  font-size: 13px;
  color: var(--text-soft);
  padding: 8px 14px 8px 36px;
  transition: var(--transition);
}
.nav-search input:focus {
  background: rgba(255,255,255,.06);
  border-color: var(--border-strong);
  box-shadow: 0 0 0 3px var(--gold-subtle);
}

.nav-btn {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border-soft);
  border-radius: 9px;
  transition: var(--transition);
}
.nav-btn:hover {
  background: rgba(255,255,255,.07);
  border-color: var(--border-strong);
  color: var(--gold);
  transform: translateY(-1px);
}

.avatar {
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 12px;
  border: 2px solid rgba(212,168,67,.4);
  box-shadow: 0 2px 8px rgba(212,168,67,.2);
}

.nav-profile:hover { background: rgba(255,255,255,.05); border-radius: 9px; }
.nav-profile span  { font-size: 13px; font-weight: 500; color: var(--text-soft); }

/* ── SIDEBAR ─────────────────────────────────────────────── */
.sidebar {
  background: linear-gradient(180deg, var(--black-2) 0%, #0C1118 100%);
  border-right: 1px solid var(--border-soft);
}

.sidebar-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 0 10px;
  margin-bottom: 4px;
}

.nav-item {
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  padding: 9px 12px;
  border-radius: 9px;
  margin-bottom: 1px;
  transition: var(--transition);
  gap: 10px;
}
.nav-item:hover {
  background: rgba(255,255,255,.05);
  color: var(--text-soft);
  transform: translateX(2px);
}
.nav-item.active {
  background: linear-gradient(90deg, rgba(212,168,67,.15) 0%, rgba(212,168,67,.06) 100%);
  color: var(--gold);
  font-weight: 600;
}
.nav-item.active::before {
  background: var(--gold);
  border-radius: 0 4px 4px 0;
  width: 3px;
  top: 5px; bottom: 5px;
  box-shadow: 2px 0 8px rgba(212,168,67,.4);
}

.nav-icon { font-size: 16px; }

.market-ticker {
  background: linear-gradient(135deg, rgba(212,168,67,.08) 0%, rgba(212,168,67,.04) 100%);
  border: 1px solid rgba(212,168,67,.15);
  border-radius: 10px;
}
.ticker-label  { font-family: var(--font-main); font-size: 9px; letter-spacing: 1.4px; }
.ticker-price  { font-family: var(--font-serif); font-size: 24px; font-weight: 700; }
.ticker-change { font-size: 11px; color: var(--success); font-weight: 600; }

/* ── PAGE LAYOUT ─────────────────────────────────────────── */
.page { padding: 28px 32px 48px; }

.page-header h1 {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.3px;
  color: var(--text-main);
}
.page-header p {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 3px;
  font-weight: 400;
}

.date-badge {
  font-family: var(--font-main);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  background: rgba(212,168,67,.08);
  border: 1px solid rgba(212,168,67,.2);
  color: var(--gold);
  padding: 4px 12px;
  border-radius: 20px;
}

/* ── STAT CARDS ──────────────────────────────────────────── */
.stat-card {
  background: var(--black-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 22px;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,168,67,.3), transparent);
}
.stat-card::after {
  content: '';
  position: absolute;
  top: -20px; right: -20px;
  width: 90px; height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,168,67,.1) 0%, transparent 70%);
}
.stat-card:hover {
  border-color: rgba(212,168,67,.2);
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
}

.stat-label {
  font-family: var(--font-main);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-faint);
  margin-bottom: 10px;
}
.stat-val {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -.5px;
  line-height: 1.1;
  color: var(--text-main);
}
.stat-change {
  font-size: 11px;
  font-weight: 500;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.stat-change.up   { color: var(--success); }
.stat-change.down { color: var(--danger); }
.stat-icon { opacity: .4; font-size: 18px; }

/* ── CARDS ───────────────────────────────────────────────── */
.card {
  background: var(--black-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  transition: border-color .2s;
}
.card:hover { border-color: rgba(212,168,67,.15); }

.card-title {
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-soft);
  letter-spacing: -.1px;
}
.card-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  font-weight: 400;
}

/* ── TABLES ──────────────────────────────────────────────── */
table { font-family: var(--font-main); font-size: 13px; }

th {
  font-family: var(--font-main);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--text-faint);
  padding: 10px 16px;
  white-space: nowrap;
  background: rgba(255,255,255,.015);
}

td {
  padding: 13px 16px;
  border-bottom: 1px solid rgba(255,255,255,.035);
  color: var(--text-soft);
  vertical-align: middle;
  font-size: 13px;
}
tr:last-child td { border-bottom: none; }
tr:hover td {
  background: rgba(212,168,67,.03);
  color: var(--text-main);
}
thead tr { border-bottom: 1px solid rgba(212,168,67,.12); }

/* ── BADGES ──────────────────────────────────────────────── */
.badge {
  font-family: var(--font-main);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4px;
  padding: 3px 10px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.badge-buy    { background: rgba(52,201,123,.12);  color: #34C97B; border: 1px solid rgba(52,201,123,.2); }
.badge-sell   { background: rgba(240,82,82,.12);   color: #F05252; border: 1px solid rgba(240,82,82,.2); }
.badge-24k    { background: rgba(212,168,67,.15);  color: var(--gold-light); border: 1px solid rgba(212,168,67,.25); }
.badge-balls  { background: rgba(212,168,67,.12);  color: var(--gold-light); border: 1px solid rgba(212,168,67,.2); }
.badge-ref-c  { background: rgba(52,201,123,.1);   color: #52C997; border: 1px solid rgba(52,201,123,.18); }
.badge-ref-s  { background: rgba(96,165,250,.1);   color: #60A5FA; border: 1px solid rgba(96,165,250,.18); }

/* ── FORMS & INPUTS ──────────────────────────────────────── */
.form-label {
  font-family: var(--font-main);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-faint);
  margin-bottom: 5px;
  display: block;
}

.form-input {
  font-family: var(--font-main);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px;
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-main);
  transition: var(--transition);
  width: 100%;
}
.form-input:focus {
  outline: none;
  border-color: rgba(212,168,67,.5);
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 0 3px rgba(212,168,67,.1), 0 1px 4px rgba(0,0,0,.3);
}
.form-input::placeholder { color: var(--text-faint); }
.form-input:hover { border-color: rgba(255,255,255,.12); }

select.form-input { cursor: pointer; }
select.form-input option { background: var(--black-3); color: var(--text-main); }

textarea.form-input {
  resize: vertical;
  line-height: 1.55;
  min-height: 80px;
}

.auto-field {
  background: rgba(212,168,67,.07);
  border-color: rgba(212,168,67,.2);
  color: var(--gold);
  font-weight: 600;
}

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn-primary {
  font-family: var(--font-main);
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);
  color: #0D0A00;
  border: none;
  padding: 12px 28px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .2px;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 2px 8px rgba(212,168,67,.2);
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.12) 0%, transparent 50%);
  opacity: 0;
  transition: opacity .15s;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
  opacity: .95;
}
.btn-primary:hover::after { opacity: 1; }
.btn-primary:active { transform: translateY(0); }

.btn-outline {
  font-family: var(--font-main);
  background: transparent;
  color: var(--gold);
  border: 1px solid rgba(212,168,67,.35);
  padding: 10px 20px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}
.btn-outline:hover {
  background: rgba(212,168,67,.08);
  border-color: rgba(212,168,67,.5);
  transform: translateY(-1px);
}

.btn-ghost {
  font-family: var(--font-main);
  background: transparent;
  color: var(--text-muted);
  border: 1px solid rgba(255,255,255,.08);
  padding: 10px 20px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}
.btn-ghost:hover {
  background: rgba(255,255,255,.04);
  color: var(--text-soft);
  border-color: rgba(255,255,255,.14);
}

.btn-danger {
  font-family: var(--font-main);
  background: rgba(240,82,82,.1);
  color: var(--danger);
  border: 1px solid rgba(240,82,82,.2);
  padding: 6px 14px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}
.btn-danger:hover {
  background: rgba(240,82,82,.18);
  border-color: rgba(240,82,82,.35);
}

.btn-edit {
  font-family: var(--font-main);
  background: rgba(212,168,67,.08);
  color: var(--gold);
  border: 1px solid rgba(212,168,67,.18);
  padding: 6px 14px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}
.btn-edit:hover { background: rgba(212,168,67,.15); border-color: rgba(212,168,67,.3); }

.btn-sm {
  font-family: var(--font-main);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 13px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.08);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
  letter-spacing: .2px;
}
.btn-sm:hover  { color: var(--text-soft); border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.04); }
.btn-sm.active { background: rgba(212,168,67,.12); color: var(--gold); border-color: rgba(212,168,67,.25); }

/* ── TRANSACTION CHOOSER CARDS ───────────────────────────── */
.txtype-card {
  background: var(--black-2);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  padding: 22px 26px;
  display: flex;
  align-items: center;
  gap: 20px;
  cursor: pointer;
  transition: all .22s cubic-bezier(.34,1.56,.64,1);
  box-shadow: var(--shadow-sm);
}
.txtype-card:hover {
  border-color: rgba(212,168,67,.25);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,.5), var(--shadow-gold);
}
.txtype-card:active { transform: scale(.98) translateY(-1px); }

.txtype-featured {
  background: linear-gradient(135deg, rgba(212,168,67,.12) 0%, rgba(150,114,14,.08) 100%);
  border-color: rgba(212,168,67,.25);
}

.txtype-icon-wrap {
  width: 62px; height: 62px;
  border-radius: 16px;
  background: rgba(212,168,67,.12);
  border: 1px solid rgba(212,168,67,.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
  transition: var(--transition);
}
.txtype-card:hover .txtype-icon-wrap { transform: scale(1.06); }
.txtype-icon-green { background: rgba(52,201,123,.1); border-color: rgba(52,201,123,.15); }
.txtype-icon-blue  { background: rgba(96,165,250,.1); border-color: rgba(96,165,250,.15); }

.txtype-body h3 {
  font-family: var(--font-main);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 4px;
  letter-spacing: -.1px;
}
.txtype-body p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.45;
}
.txtype-arrow { font-size: 22px; color: var(--text-faint); transition: var(--transition); }
.txtype-card:hover .txtype-arrow { color: var(--gold); transform: translateX(3px); }

/* ── TXN ID strip ─────────────────────────────────────────── */
.txid-strip {
  background: rgba(212,168,67,.06);
  border: 1.5px dashed rgba(212,168,67,.3);
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.txid-strip-label {
  font-family: var(--font-main);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-faint);
}
.txid-strip-val {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: .5px;
}

/* ── Output panel ─────────────────────────────────────────── */
.output-panel {
  background: linear-gradient(160deg, var(--black-3) 0%, var(--black-2) 100%);
  border: 1px solid rgba(212,168,67,.15);
  border-radius: 16px;
  padding: 26px;
  position: sticky;
  top: calc(var(--nav-h) + 16px);
}
.output-panel-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 18px;
  letter-spacing: -.2px;
}
.output-label {
  font-family: var(--font-main);
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 400;
}
.output-val {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-main);
}
.output-total-val {
  font-family: var(--font-serif);
  font-size: 30px !important;
  font-weight: 700;
  color: var(--gold) !important;
  text-shadow: 0 0 20px rgba(212,168,67,.3);
}

/* ── Calc result cards ────────────────────────────────────── */
.calc-result-card {
  background: rgba(212,168,67,.06);
  border: 1px solid rgba(212,168,67,.14);
  border-radius: 10px;
  padding: 16px 18px;
  transition: var(--transition);
}
.calc-result-card:hover { background: rgba(212,168,67,.1); }

.calc-result-label {
  font-family: var(--font-main);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--text-faint);
  font-weight: 700;
  margin-bottom: 7px;
}
.calc-result-val {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.1;
  letter-spacing: -.3px;
}
.calc-result-unit {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 3px;
  font-family: var(--font-main);
}

/* ── Back button ──────────────────────────────────────────── */
.txback-btn {
  font-family: var(--font-main);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--text-muted);
  padding: 8px 16px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 6px;
}
.txback-btn:hover {
  background: rgba(212,168,67,.08);
  border-color: rgba(212,168,67,.2);
  color: var(--gold);
}

/* ── Gold status panel colours ────────────────────────────── */
#gs-unrefined-g { color: #F87171; }
#gs-partial-g   { color: var(--gold); }
#gs-refined-g   { color: #34C97B; }
#gs-available   { color: var(--gold-light); }

/* ── Settings modal header ────────────────────────────────── */
.smodal {
  background: var(--black-2);
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 40px 100px rgba(0,0,0,.8), 0 0 0 1px rgba(212,168,67,.06);
}
.smodal-title { font-family: var(--font-serif); color: var(--text-main); }
.smodal-close {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%;
  color: var(--text-muted);
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 13px;
  transition: var(--transition);
}
.smodal-close:hover { background: rgba(240,82,82,.15); color: var(--danger); border-color: rgba(240,82,82,.3); }

.smodal-nav { background: rgba(255,255,255,.02); border-right: 1px solid rgba(255,255,255,.05); }
.smodal-nav-item {
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  border-radius: 8px;
  padding: 9px 12px;
  transition: var(--transition);
}
.smodal-nav-item:hover  { background: rgba(255,255,255,.05); color: var(--text-soft); }
.smodal-nav-item.active {
  background: rgba(212,168,67,.12);
  color: var(--gold);
  font-weight: 600;
}

/* ── Form inputs inside settings modal ───────────────────── */
.sform-input {
  font-family: var(--font-main);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px;
  padding: 11px 14px;
  font-size: 14px;
  color: var(--text-main);
  transition: var(--transition);
  width: 100%;
}
.sform-input:focus {
  outline: none;
  border-color: rgba(212,168,67,.45);
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 0 3px rgba(212,168,67,.1);
}
.sform-input::placeholder { color: var(--text-faint); }

.sform-label {
  font-family: var(--font-main);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-faint);
}

/* ── Toggle switches ──────────────────────────────────────── */
.stoggle-slider {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
}
.stoggle-slider::before { background: var(--text-muted); }
.stoggle input:checked + .stoggle-slider {
  background: rgba(212,168,67,.2);
  border-color: var(--gold);
}
.stoggle input:checked + .stoggle-slider::before { background: var(--gold); }

.stoggle-label { font-family: var(--font-main); font-size: 13px; font-weight: 500; color: var(--text-soft); }
.stoggle-sub   { font-family: var(--font-main); font-size: 12px; color: var(--text-muted); }

/* ── Settings buttons ─────────────────────────────────────── */
.sbtn {
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2px;
  transition: var(--transition);
  border-radius: 9px;
}
.sbtn-primary {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);
  color: #0D0A00;
  border: none;
  box-shadow: 0 2px 8px rgba(212,168,67,.2);
}
.sbtn-primary:hover { opacity: .92; transform: translateY(-1px); box-shadow: var(--shadow-gold); }

.sbtn-ghost {
  background: transparent;
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text-muted);
}
.sbtn-ghost:hover { background: rgba(255,255,255,.05); color: var(--text-soft); border-color: rgba(255,255,255,.14); }

.sbtn-danger {
  background: rgba(240,82,82,.1);
  border: 1px solid rgba(240,82,82,.18);
  color: var(--danger);
}
.sbtn-danger:hover { background: rgba(240,82,82,.18); border-color: rgba(240,82,82,.3); }

/* ── Receipt ──────────────────────────────────────────────── */
.receipt-preview {
  background: #FAFBFC;
  border-radius: 14px;
  box-shadow: 0 4px 24px rgba(0,0,0,.12), 0 1px 6px rgba(0,0,0,.08);
}
.receipt-logo { font-family: var(--font-serif); font-size: 26px; }
.receipt-logo span { color: #8B6914; }

/* ── Users table badges ───────────────────────────────────── */
.branch-id-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  background: rgba(212,168,67,.1);
  color: var(--gold);
  border: 1px solid rgba(212,168,67,.2);
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: .4px;
}

/* ── Notification panel ───────────────────────────────────── */
.notif-panel {
  background: var(--black-3);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
}
.notif-icon {
  background: rgba(212,168,67,.1);
  border-radius: 9px;
}

/* ── Admin dashboard alerts ───────────────────────────────── */
#adm-alerts-list > div { border-radius: 12px !important; }

/* ── Admin dashboard table ────────────────────────────────── */
#adm-branch-table tr:hover td { background: rgba(212,168,67,.03) !important; }

/* ── Scrollbar polish ─────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(212,168,67,.2);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(212,168,67,.35); }

/* ── Sub-tab bar upgrade ──────────────────────────────────── */
.ssubtab-bar {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  padding: 4px;
}
.ssubtab {
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: 600;
  border-radius: 7px;
  transition: var(--transition);
}
.ssubtab.active {
  background: rgba(212,168,67,.12);
  color: var(--gold);
  box-shadow: 0 1px 6px rgba(0,0,0,.3);
}

/* ── Inline refining panel upgrade ───────────────────────── */
#dash-refine-panel .card {
  background: linear-gradient(160deg, var(--black-2) 0%, #0C1118 100%);
}

/* ── Loading placeholders ─────────────────────────────────── */
.sloading {
  font-family: var(--font-main);
  font-size: 13px;
  color: var(--text-muted);
}

/* ── Info rows in settings ────────────────────────────────── */
.sinfo-label { font-family: var(--font-main); color: var(--text-muted); font-size: 13px; }
.sinfo-val   { font-family: var(--font-main); font-weight: 600; color: var(--text-soft); font-size: 13px; }

/* ── Section titles in settings ───────────────────────────── */
.ssection-title {
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--text-muted);
  margin-bottom: 14px;
}

/* ── Danger zone ──────────────────────────────────────────── */
.sdanger-box {
  background: rgba(240,82,82,.05);
  border: 1px solid rgba(240,82,82,.15);
  border-radius: 10px;
  padding: 14px 16px;
}
.sdanger-title { color: var(--danger) !important; }

/* ── Report stat cards ────────────────────────────────────── */
.report-stat {
  background: var(--black-2);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius);
}
.report-stat-label { font-family: var(--font-main); letter-spacing: 1.1px; color: var(--text-faint); }
.report-stat-val   { font-family: var(--font-serif); color: var(--text-main); }

/* ── Tab animation ────────────────────────────────────────── */
.stab.active { animation: stab-in .18s ease both; }
@keyframes stab-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

/* ── Unsaved changes bar ──────────────────────────────────── */
#smodal-unsaved-bar {
  background: rgba(245,158,11,.1);
  border-top: 1px solid rgba(245,158,11,.2);
  color: #FCD34D;
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 500;
}

/* ── Responsive improvements ──────────────────────────────── */
@media (max-width: 768px) {
  .page { padding: 16px 16px 32px; }
  .stat-val { font-size: 26px; }
  .txtype-card { padding: 16px 18px; }
  .txtype-icon-wrap { width: 48px; height: 48px; font-size: 22px; border-radius: 12px; }
  .txtype-body h3 { font-size: 14px; }
}

/* ── Print improvements ───────────────────────────────────── */
@media print {
  body { background: #fff; -webkit-print-color-adjust: exact; }
  .receipt-preview {
    box-shadow: none;
    border: 1px solid #ddd;
  }
}

/* ============================================================
   TRANSACTION FORMS — Professional Compact Redesign v2
   ============================================================ */

/* ── Page header ─────────────────────────────────────────── */
.tx-page-header { margin-bottom: 20px; }
.tx-title {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -.3px;
}
.tx-subtitle { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

/* ── Chooser grid ────────────────────────────────────────── */
.txc-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 640px;
  margin-bottom: 28px;
}

.txc-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--black-2);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  cursor: pointer;
  transition: all .18s cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow: hidden;
}
.txc-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: 0 2px 2px 0;
  opacity: 0;
  transition: opacity .18s;
}
.txc-buy::before   { background: var(--gold); }
.txc-refine-c::before { background: var(--success); }
.txc-refine-s::before { background: var(--info); }

.txc-card:hover {
  border-color: rgba(255,255,255,.12);
  transform: translateX(3px);
  box-shadow: var(--shadow-md);
}
.txc-card:hover::before { opacity: 1; }
.txc-card:active { transform: translateX(2px) scale(.99); }

.txc-icon-wrap {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform .18s;
}
.txc-card:hover .txc-icon-wrap { transform: scale(1.08); }

.txc-icon-gold { background: rgba(212,168,67,.12); color: var(--gold); border: 1px solid rgba(212,168,67,.2); }
.txc-icon-green{ background: rgba(52,201,123,.1);  color: var(--success); border: 1px solid rgba(52,201,123,.18); }
.txc-icon-blue { background: rgba(96,165,250,.1);  color: var(--info); border: 1px solid rgba(96,165,250,.18); }

.txc-body { flex: 1; min-width: 0; }
.txc-label {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  color: var(--text-faint);
  margin-bottom: 1px;
}
.txc-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -.1px;
}
.txc-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 1px;
}

.txc-arrow {
  color: var(--text-faint);
  flex-shrink: 0;
  transition: all .18s;
}
.txc-card:hover .txc-arrow { color: var(--text-soft); transform: translateX(3px); }

/* ── Transaction table card ──────────────────────────────── */
.txc-table-card {
  background: var(--black-2);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 18px 20px;
}
.txc-table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.txc-table-title { font-size: 14px; font-weight: 700; color: var(--text-soft); }
.txc-table-sub   { font-size: 12px; color: var(--text-muted); margin-top: 1px; }

/* ── Form header bar ─────────────────────────────────────── */
.txf-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.txf-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text-muted);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-main);
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0;
}
.txf-back:hover { background: rgba(255,255,255,.07); color: var(--text-soft); border-color: rgba(255,255,255,.14); }

.txf-header-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.txf-header-icon {
  width: 40px; height: 40px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.txf-icon-gold  { background: rgba(212,168,67,.12); color: var(--gold); border: 1px solid rgba(212,168,67,.2); }
.txf-icon-green { background: rgba(52,201,123,.1);  color: var(--success); border: 1px solid rgba(52,201,123,.18); }
.txf-icon-blue  { background: rgba(96,165,250,.1);  color: var(--info); border: 1px solid rgba(96,165,250,.18); }

.txf-title    { font-size: 17px; font-weight: 700; color: var(--text-main); letter-spacing: -.1px; }
.txf-subtitle { font-size: 12px; color: var(--text-muted); margin-top: 1px; }

.txf-id-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  background: rgba(212,168,67,.06);
  border: 1px solid rgba(212,168,67,.18);
  border-radius: 20px;
  margin-left: auto;
  flex-shrink: 0;
}
.txf-id-label {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-faint);
}
.txf-id-val {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: .3px;
}

/* ── Two-column form + output layout ─────────────────────── */
.txf-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 20px;
  align-items: start;
  max-width: 900px;
}

.txf-form-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Field components ────────────────────────────────────── */
.txf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.txf-three-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

.txf-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.txf-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-faint);
  user-select: none;
}

.txf-opt {
  font-size: 9px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-faint);
  opacity: .7;
}
.txf-req { color: var(--gold); font-size: 11px; }
.txf-hint {
  font-size: 10px;
  color: var(--text-faint);
  margin-top: 1px;
}

.txf-input {
  font-family: var(--font-main);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-main);
  transition: var(--transition);
  width: 100%;
}
.txf-input:focus {
  outline: none;
  border-color: rgba(212,168,67,.45);
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 0 3px rgba(212,168,67,.1);
}
.txf-input::placeholder { color: var(--text-faint); font-size: 13px; }
.txf-textarea { resize: vertical; min-height: 64px; line-height: 1.5; }

/* Input with prefix / suffix */
.txf-input-group {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  overflow: hidden;
  transition: var(--transition);
}
.txf-input-group:focus-within {
  border-color: rgba(212,168,67,.45);
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 0 3px rgba(212,168,67,.1);
}
.txf-prefix {
  padding: 0 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-faint);
  background: rgba(255,255,255,.03);
  border-right: 1px solid rgba(255,255,255,.07);
  white-space: nowrap;
  align-self: stretch;
  display: flex;
  align-items: center;
}
.txf-suffix {
  padding: 0 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-faint);
  background: rgba(255,255,255,.03);
  border-left: 1px solid rgba(255,255,255,.07);
  white-space: nowrap;
  align-self: stretch;
  display: flex;
  align-items: center;
}
.txf-input-pfx {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  flex: 1;
  padding-left: 10px;
}
.txf-input-pfx:focus { box-shadow: none; }
.txf-input-sfx {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  flex: 1;
  padding-right: 10px;
}
.txf-input-sfx:focus { box-shadow: none; }

/* ── Buy form: auto-calculated row ───────────────────────── */
.txf-price-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.txf-price-field { display: flex; flex-direction: column; gap: 5px; }

.txf-auto-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.txf-auto-field {
  background: rgba(212,168,67,.05);
  border: 1px solid rgba(212,168,67,.12);
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.txf-auto-total {
  background: rgba(212,168,67,.09);
  border-color: rgba(212,168,67,.2);
}
.txf-auto-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-faint);
}
.txf-auto-val {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-soft);
}
.txf-total-val {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: -.3px;
}

/* ── Refining form: inline calc grid ─────────────────────── */
.txf-calc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  padding: 12px;
}
.txf-calc-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 0;
}
.txf-calc-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .9px;
  color: var(--text-faint);
}
.txf-calc-val {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-soft);
  letter-spacing: -.2px;
}
.txf-calc-karat { color: var(--gold); }
.txf-calc-unit {
  font-size: 9px;
  color: var(--text-faint);
}

/* ── Action buttons ──────────────────────────────────────── */
.txf-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.txf-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 22px;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);
  color: #0D0A00;
  border: none;
  border-radius: 9px;
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2px;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 2px 8px rgba(212,168,67,.2);
}
.txf-save-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212,168,67,.3);
  opacity: .95;
}
.txf-save-btn:active { transform: translateY(0); }

.txf-reset-btn {
  padding: 11px 18px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text-faint);
  border-radius: 9px;
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}
.txf-reset-btn:hover {
  background: rgba(255,255,255,.04);
  color: var(--text-muted);
  border-color: rgba(255,255,255,.13);
}

/* ── Output panel (right column) ─────────────────────────── */
.txf-output-col {
  position: sticky;
  top: calc(var(--nav-h) + 16px);
}

.txf-output-panel {
  background: linear-gradient(160deg, var(--black-3) 0%, var(--black-2) 100%);
  border: 1px solid rgba(212,168,67,.14);
  border-radius: 14px;
  padding: 18px 20px;
}

.txf-output-header {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-faint);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}

.txf-output-hint {
  font-size: 12px;
  color: var(--text-faint);
  text-align: center;
  padding: 16px 0;
  line-height: 1.5;
}

.txf-out-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  font-size: 12px;
  color: var(--text-muted);
}
.txf-out-row:last-child { border-bottom: none; }
.txf-out-val {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-soft);
}

.txf-out-divider {
  height: 1px;
  background: rgba(212,168,67,.15);
  margin: 8px 0;
}

.txf-out-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 4px;
}
.txf-out-total-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
}
.txf-out-total-val {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: -.3px;
  text-shadow: 0 0 20px rgba(212,168,67,.3);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1000px) {
  .txf-layout { grid-template-columns: 1fr; }
  .txf-output-col { position: static; }
}
@media (max-width: 700px) {
  .txf-row       { grid-template-columns: 1fr; }
  .txf-three-row { grid-template-columns: 1fr 1fr; }
  .txf-price-row { grid-template-columns: 1fr; }
  .txf-auto-row  { grid-template-columns: 1fr; }
  .txf-calc-grid { grid-template-columns: 1fr 1fr; }
  .txf-id-pill   { display: none; }
}
@media (max-width: 480px) {
  .txf-three-row { grid-template-columns: 1fr; }
  .txc-card { padding: 14px 16px; }
  .txc-icon-wrap { width: 40px; height: 40px; border-radius: 10px; }
  .txc-name { font-size: 14px; }
}

/* ============================================================
   ADMIN DASHBOARD — KPI CARDS
   Arial Rounded MT Bold font, compact, colour-coded per metric
   ============================================================ */

/* Load Arial Rounded MT Bold via system font stack */
.adm-kpi-val, .adm-kpi-label, .adm-kpi-sub {
  font-family: 'Arial Rounded MT Bold', 'Arial Rounded MT', 'Nunito', 'Varela Round',
               'DM Sans', system-ui, sans-serif;
}

/* ── Grid ────────────────────────────────────────────────── */
.adm-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

/* ── Base card ───────────────────────────────────────────── */
.adm-kpi-card {
  border-radius: 12px;
  padding: 14px 16px 12px;
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
  cursor: default;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
}
.adm-kpi-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  opacity: .6;
  pointer-events: none;
}
.adm-kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}

/* ── Top row: label + icon ───────────────────────────────── */
.adm-kpi-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.adm-kpi-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  line-height: 1.3;
  opacity: .75;
}

.adm-kpi-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: .85;
}

/* ── Main value ──────────────────────────────────────────── */
.adm-kpi-val {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.5px;
  line-height: 1.1;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Smaller for long currency values */
.adm-kpi-val-sm {
  font-size: 18px;
  letter-spacing: -.3px;
}

/* ── Sub-line ────────────────────────────────────────────── */
.adm-kpi-sub {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2px;
  opacity: .65;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Colour themes ───────────────────────────────────────── */

/* Blue — Total Transactions */
.adm-kpi-blue {
  background: linear-gradient(135deg, #1a3a5c 0%, #0f2744 100%);
  border: 1px solid rgba(96,165,250,.2);
}
.adm-kpi-blue .adm-kpi-label { color: #93c5fd; }
.adm-kpi-blue .adm-kpi-sub   { color: #bfdbfe; }
.adm-kpi-icon-blue { background: rgba(96,165,250,.18); color: #60a5fa; border: 1px solid rgba(96,165,250,.25); }

/* Gold — Total Revenue */
.adm-kpi-gold {
  background: linear-gradient(135deg, #3a2a08 0%, #251c05 100%);
  border: 1px solid rgba(212,168,67,.25);
}
.adm-kpi-gold .adm-kpi-label { color: #fcd34d; }
.adm-kpi-gold .adm-kpi-sub   { color: #fde68a; }
.adm-kpi-icon-gold { background: rgba(212,168,67,.18); color: var(--gold); border: 1px solid rgba(212,168,67,.25); }

/* Purple — This Week */
.adm-kpi-purple {
  background: linear-gradient(135deg, #2d1f4e 0%, #1e1436 100%);
  border: 1px solid rgba(167,139,250,.2);
}
.adm-kpi-purple .adm-kpi-label { color: #c4b5fd; }
.adm-kpi-purple .adm-kpi-sub   { color: #ddd6fe; }
.adm-kpi-icon-purple { background: rgba(167,139,250,.18); color: #a78bfa; border: 1px solid rgba(167,139,250,.25); }

/* Amber — Gold Bought */
.adm-kpi-amber {
  background: linear-gradient(135deg, #3a2800 0%, #2a1d00 100%);
  border: 1px solid rgba(251,191,36,.2);
}
.adm-kpi-amber .adm-kpi-label { color: #fcd34d; }
.adm-kpi-amber .adm-kpi-sub   { color: #fde68a; }
.adm-kpi-icon-amber { background: rgba(251,191,36,.15); color: #fbbf24; border: 1px solid rgba(251,191,36,.22); }

/* Green — Gold Refined */
.adm-kpi-green {
  background: linear-gradient(135deg, #0d3326 0%, #07231a 100%);
  border: 1px solid rgba(52,201,123,.2);
}
.adm-kpi-green .adm-kpi-label { color: #6ee7b7; }
.adm-kpi-green .adm-kpi-sub   { color: #a7f3d0; }
.adm-kpi-icon-green { background: rgba(52,201,123,.15); color: #34c97b; border: 1px solid rgba(52,201,123,.22); }

/* Red — Unrefined Inventory */
.adm-kpi-red {
  background: linear-gradient(135deg, #3a0f0f 0%, #280a0a 100%);
  border: 1px solid rgba(240,82,82,.2);
}
.adm-kpi-red .adm-kpi-label { color: #fca5a5; }
.adm-kpi-red .adm-kpi-sub   { color: #fecaca; }
.adm-kpi-icon-red { background: rgba(240,82,82,.15); color: #f87171; border: 1px solid rgba(240,82,82,.22); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1200px) {
  .adm-kpi-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .adm-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .adm-kpi-val  { font-size: 20px; }
}
@media (max-width: 480px) {
  .adm-kpi-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .adm-kpi-card { padding: 12px 12px 10px; }
  .adm-kpi-val  { font-size: 18px; }
  .adm-kpi-val-sm { font-size: 15px; }
}

/* ============================================================
   ADMIN DASHBOARD — TOP BAR, DATE, BRANCH FILTER, KPI COMPACT
   ============================================================ */

/* ── Top bar ─────────────────────────────────────────────── */
.adm-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.adm-topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.adm-date-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  background: rgba(212,168,67,.1);
  border: 1px solid rgba(212,168,67,.22);
  border-radius: 20px;
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: .2px;
  white-space: nowrap;
}

.adm-topbar-title {
  font-family: 'Arial Rounded MT Bold','Nunito',var(--font-main);
  font-size: 20px;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -.2px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.adm-alert-dot {
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-main);
  padding: 1px 7px;
  border-radius: 10px;
  letter-spacing: .2px;
}

.adm-topbar-sub {
  font-family: var(--font-main);
  font-size: 12px;
  color: var(--text-faint);
  font-weight: 400;
}

.adm-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 8px;
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  flex-shrink: 0;
}
.adm-refresh-btn:hover {
  background: rgba(255,255,255,.05);
  color: var(--text-soft);
  border-color: rgba(255,255,255,.16);
}

/* ── Branch filter bar ───────────────────────────────────── */
.adm-branch-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.adm-filter-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-main);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-faint);
  white-space: nowrap;
  flex-shrink: 0;
}

.adm-filter-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.adm-filter-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  letter-spacing: .1px;
}
.adm-filter-pill:hover {
  background: rgba(212,168,67,.07);
  border-color: rgba(212,168,67,.2);
  color: var(--text-soft);
}
.adm-filter-pill.active {
  background: rgba(212,168,67,.14);
  border-color: rgba(212,168,67,.35);
  color: var(--gold);
  font-weight: 700;
}

/* ── KPI grid — smaller, one row ────────────────────────── */
.adm-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}

.adm-kpi-card {
  border-radius: 10px;
  padding: 12px 13px 10px;
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.adm-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
}

.adm-kpi-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
}

.adm-kpi-label {
  font-family: 'Arial Rounded MT Bold','Nunito',var(--font-main);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .9px;
  text-transform: uppercase;
  line-height: 1.3;
  opacity: .72;
  font-style: normal;
}

.adm-kpi-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: .9;
}

.adm-kpi-val {
  font-family: 'Arial Rounded MT Bold','Nunito',var(--font-main);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.4px;
  line-height: 1.1;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-style: normal;
}
.adm-kpi-val-sm {
  font-size: 15px;
  letter-spacing: -.2px;
}

.adm-kpi-sub {
  font-family: 'Arial Rounded MT Bold','Nunito',var(--font-main);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1px;
  opacity: .6;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  font-style: normal;
}

/* colour themes stay the same */
.adm-kpi-blue   { background: linear-gradient(135deg,#1a3a5c 0%,#0f2744 100%); border:1px solid rgba(96,165,250,.2); }
.adm-kpi-gold   { background: linear-gradient(135deg,#3a2a08 0%,#251c05 100%); border:1px solid rgba(212,168,67,.25); }
.adm-kpi-purple { background: linear-gradient(135deg,#2d1f4e 0%,#1e1436 100%); border:1px solid rgba(167,139,250,.2); }
.adm-kpi-amber  { background: linear-gradient(135deg,#3a2800 0%,#2a1d00 100%); border:1px solid rgba(251,191,36,.2); }
.adm-kpi-green  { background: linear-gradient(135deg,#0d3326 0%,#07231a 100%); border:1px solid rgba(52,201,123,.2); }
.adm-kpi-red    { background: linear-gradient(135deg,#3a0f0f 0%,#280a0a 100%); border:1px solid rgba(240,82,82,.2); }

.adm-kpi-blue .adm-kpi-label   { color:#93c5fd; }
.adm-kpi-gold .adm-kpi-label   { color:#fcd34d; }
.adm-kpi-purple .adm-kpi-label { color:#c4b5fd; }
.adm-kpi-amber .adm-kpi-label  { color:#fcd34d; }
.adm-kpi-green .adm-kpi-label  { color:#6ee7b7; }
.adm-kpi-red .adm-kpi-label    { color:#fca5a5; }

.adm-kpi-icon-blue   { background:rgba(96,165,250,.18);  color:#60a5fa;  border:1px solid rgba(96,165,250,.25); }
.adm-kpi-icon-gold   { background:rgba(212,168,67,.18);  color:var(--gold); border:1px solid rgba(212,168,67,.25); }
.adm-kpi-icon-purple { background:rgba(167,139,250,.18); color:#a78bfa;  border:1px solid rgba(167,139,250,.25); }
.adm-kpi-icon-amber  { background:rgba(251,191,36,.15);  color:#fbbf24;  border:1px solid rgba(251,191,36,.22); }
.adm-kpi-icon-green  { background:rgba(52,201,123,.15);  color:#34c97b;  border:1px solid rgba(52,201,123,.22); }
.adm-kpi-icon-red    { background:rgba(240,82,82,.15);   color:#f87171;  border:1px solid rgba(240,82,82,.22); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1200px) {
  .adm-kpi-grid { grid-template-columns: repeat(3,1fr); gap:8px; }
}
@media (max-width: 800px) {
  .adm-kpi-grid { grid-template-columns: repeat(2,1fr); }
  .adm-topbar-sub { display:none; }
}
@media (max-width: 480px) {
  .adm-kpi-grid { grid-template-columns: 1fr 1fr; gap:6px; }
  .adm-kpi-val  { font-size:17px; }
  .adm-kpi-val-sm { font-size:13px; }
}

/* ============================================================
   BRANCH DASHBOARD — STAT CARDS  (bstat)
   Compact, professional, Inter font, SVG icons, 6-column row
   Keeps the same card shape but smaller and font-clean
   ============================================================ */

/* ── Grid: 6 cards one row ───────────────────────────────── */
.bstat-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

/* ── Base card ───────────────────────────────────────────── */
.bstat-card {
  background: var(--black-2);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 14px 15px 12px;
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* subtle top-edge shimmer */
.bstat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,168,67,.25), transparent);
}

/* corner glow orb — kept small */
.bstat-card::after {
  content: '';
  position: absolute;
  top: -16px; right: -16px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,168,67,.08) 0%, transparent 70%);
  pointer-events: none;
}

.bstat-card:hover {
  border-color: rgba(212,168,67,.22);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.35), 0 0 0 0 transparent;
}

/* ── Header row: icon + label ────────────────────────────── */
.bstat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

.bstat-icon-wrap {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* icon colour variants */
.bstat-icon-blue   { background: rgba(96,165,250,.12);  color: #60a5fa;  border: 1px solid rgba(96,165,250,.2); }
.bstat-icon-amber  { background: rgba(251,191,36,.12);  color: #fbbf24;  border: 1px solid rgba(251,191,36,.2); }
.bstat-icon-green  { background: rgba(52,201,123,.1);   color: #34c97b;  border: 1px solid rgba(52,201,123,.18); }
.bstat-icon-red    { background: rgba(240,82,82,.1);    color: #f87171;  border: 1px solid rgba(240,82,82,.18); }
.bstat-icon-purple { background: rgba(167,139,250,.1);  color: #a78bfa;  border: 1px solid rgba(167,139,250,.18); }
.bstat-icon-gold   { background: rgba(212,168,67,.12);  color: var(--gold); border: 1px solid rgba(212,168,67,.2); }

/* ── Label ───────────────────────────────────────────────── */
.bstat-label {
  font-family: 'Inter', 'Arial Rounded MT Bold', var(--font-main);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-faint);
  line-height: 1.3;
  font-style: normal;
}

/* ── Main value ──────────────────────────────────────────── */
.bstat-val {
  font-family: 'Arial Rounded MT Bold', 'Nunito', 'Inter', var(--font-main);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.4px;
  line-height: 1.1;
  color: var(--text-main);
  font-style: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* smaller variant for currency values */
.bstat-val-sm {
  font-size: 16px;
  letter-spacing: -.2px;
}

/* ── Sub-line ────────────────────────────────────────────── */
.bstat-sub {
  font-family: 'Inter', var(--font-main);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-faint);
  font-style: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: .1px;
}
.bstat-sub.up { color: var(--success); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1100px) {
  .bstat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .bstat-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .bstat-val  { font-size: 18px; }
  .bstat-val-sm { font-size: 14px; }
}
@media (max-width: 400px) {
  .bstat-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .bstat-card { padding: 11px 12px 10px; }
}

/* ============================================================
   SCROLLBAR — visible, professional, glowing
   ============================================================ */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track {
  background: rgba(255,255,255,.03);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(212,168,67,.5), rgba(150,114,14,.4));
  border-radius: 10px;
  border: 1px solid rgba(212,168,67,.15);
  box-shadow: 0 0 6px rgba(212,168,67,.25);
  transition: background .2s;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(212,168,67,.8), rgba(212,168,67,.55));
  box-shadow: 0 0 10px rgba(212,168,67,.45);
}
::-webkit-scrollbar-corner { background: transparent; }

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(212,168,67,.45) rgba(255,255,255,.03);
}

/* ============================================================
   THEME TOGGLE BUTTON
   ============================================================ */
.nav-theme-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 9px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  transition: all .2s ease;
  position: relative;
  overflow: hidden;
}
.nav-theme-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 9px;
  opacity: 0;
  transition: opacity .2s;
}
[data-theme='dark'] .nav-theme-btn::before {
  background: radial-gradient(circle, rgba(255,220,100,.12) 0%, transparent 70%);
}
[data-theme='light'] .nav-theme-btn::before {
  background: radial-gradient(circle, rgba(100,150,255,.12) 0%, transparent 70%);
}
.nav-theme-btn:hover {
  border-color: rgba(212,168,67,.4);
  color: var(--gold);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(212,168,67,.15);
}
.nav-theme-btn:hover::before { opacity: 1; }
.nav-theme-btn:active { transform: scale(.93); }
/* Spin animation on click */
.nav-theme-btn svg {
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.nav-theme-btn:active svg { transform: rotate(45deg); }

/* ============================================================
   LIGHT THEME — Fintech-grade redesign
   Palette: Stripe / Notion / Linear inspired
   ============================================================

   COLOR SYSTEM
   ─────────────────────────────────────────────────────────
   Page bg         #F1F5F9   (slate-100, slightly blue-grey)
   Card bg         #FFFFFF   white, lifted off page
   Card hover      #FAFCFF
   Nav / sidebar   #FFFFFF   clean white
   Border default  #E2E8F0   slate-200
   Border strong   #CBD5E1   slate-300

   TYPOGRAPHY
   ─────────────────────────────────────────────────────────
   Primary text    #0F172A   slate-900  (near-black)
   Secondary text  #334155   slate-700
   Muted text      #64748B   slate-500
   Faint text      #94A3B8   slate-400

   ACCENT — gold adapted for white backgrounds
   ─────────────────────────────────────────────────────────
   Gold primary    #92680C   deep amber (AA contrast on white)
   Gold light      #B07D0E
   Gold pale       #FEF3C7

   STATUS COLORS — high contrast, unmistakable
   ─────────────────────────────────────────────────────────
   Success green   #059669   emerald-600
   Danger red      #DC2626   red-600
   Warning orange  #D97706   amber-600
   Info blue       #2563EB   blue-600

   SHADOWS — layered for real depth
   ─────────────────────────────────────────────────────────
   Card shadow     0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.05)
   Hover shadow    0 10px 25px rgba(15,23,42,.1), 0 4px 8px rgba(15,23,42,.06)
   Modal shadow    0 32px 80px rgba(15,23,42,.22), 0 8px 24px rgba(15,23,42,.12)
============================================================ */

[data-theme='light'] {
  /* Surfaces */
  --black:         #F1F5F9;
  --black-2:       #FFFFFF;
  --black-3:       #F8FAFC;
  --black-4:       #F1F5F9;
  --black-5:       #E2E8F0;

  /* Gold — darkened for white contrast */
  --gold:          #92680C;
  --gold-light:    #B07D0E;
  --gold-deep:     #6B4C08;
  --gold-pale:     #FEF3C7;
  --gold-glow:     rgba(146,104,12,.1);
  --gold-subtle:   rgba(146,104,12,.06);

  /* Typography */
  --text-main:     #0F172A;
  --text-soft:     #334155;
  --text-muted:    #64748B;
  --text-faint:    #94A3B8;

  /* Borders */
  --border:        #E2E8F0;
  --border-soft:   #E2E8F0;
  --border-strong: #CBD5E1;

  /* Status */
  --success:       #059669;
  --danger:        #DC2626;
  --warning:       #D97706;
  --info:          #2563EB;

  /* Shadows */
  --shadow-sm:     0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.05);
  --shadow-md:     0 4px 16px rgba(15,23,42,.1),  0 2px 6px rgba(15,23,42,.06);
  --shadow-lg:     0 20px 48px rgba(15,23,42,.14), 0 6px 16px rgba(15,23,42,.08);
  --shadow-gold:   0 8px 24px rgba(146,104,12,.2);
}

/* ── Global ──────────────────────────────────────────────── */
[data-theme='light'] body {
  background: #F1F5F9;
  color: #0F172A;
}

/* ── Top navigation ──────────────────────────────────────── */
[data-theme='light'] .nav {
  background: #FFFFFF;
  border-bottom: 1px solid #E2E8F0;
  box-shadow: 0 1px 0 #E2E8F0, 0 2px 8px rgba(15,23,42,.04);
  backdrop-filter: none;
}
[data-theme='light'] .logo-text       { color: #0F172A; }
[data-theme='light'] .logo-text span  { color: #92680C; }
[data-theme='light'] .logo-mark       { box-shadow: 0 2px 8px rgba(146,104,12,.25); }

[data-theme='light'] .nav-search input {
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  color: #0F172A;
}
[data-theme='light'] .nav-search input::placeholder { color: #94A3B8; }
[data-theme='light'] .nav-search input:focus {
  background: #fff;
  border-color: #92680C;
  box-shadow: 0 0 0 3px rgba(146,104,12,.1);
}

[data-theme='light'] .nav-btn {
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  color: #64748B;
}
[data-theme='light'] .nav-btn:hover {
  background: #fff;
  border-color: #92680C;
  color: #92680C;
  box-shadow: 0 2px 8px rgba(146,104,12,.12);
}
[data-theme='light'] .nav-theme-btn {
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  color: #64748B;
}
[data-theme='light'] .nav-theme-btn:hover {
  background: #fff;
  border-color: #92680C;
  color: #92680C;
}
[data-theme='light'] .nav-profile span   { color: #334155; font-weight: 600; }
[data-theme='light'] .avatar {
  background: linear-gradient(135deg, #92680C, #6B4C08);
  border: 2px solid rgba(146,104,12,.3);
  color: #fff;
}

/* ── Sidebar ─────────────────────────────────────────────── */
[data-theme='light'] .sidebar {
  background: #FFFFFF;
  border-right: 1px solid #E2E8F0;
}
[data-theme='light'] .sidebar-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: #94A3B8;
}
[data-theme='light'] .nav-item {
  color: #64748B;
  font-weight: 500;
}
[data-theme='light'] .nav-item:hover {
  background: #F8FAFC;
  color: #334155;
  transform: translateX(2px);
}
[data-theme='light'] .nav-item.active {
  background: linear-gradient(90deg, #FEF3C7 0%, rgba(254,243,199,.4) 100%);
  color: #92680C;
  font-weight: 700;
  border: none;
}
[data-theme='light'] .nav-item.active::before {
  background: #92680C;
  box-shadow: 2px 0 6px rgba(146,104,12,.35);
}
[data-theme='light'] .nav-icon { font-size: 15px; }

[data-theme='light'] .market-ticker {
  background: linear-gradient(135deg, #FFFBEB, #FEF3C7);
  border: 1px solid #FDE68A;
}
[data-theme='light'] .ticker-label  { color: #92400E; letter-spacing: 1.2px; }
[data-theme='light'] .ticker-price  { color: #78350F; }
[data-theme='light'] .ticker-change { color: #059669; }

/* ── Page ────────────────────────────────────────────────── */
[data-theme='light'] .page-header h1 {
  color: #0F172A;
  background: none;
  -webkit-text-fill-color: #0F172A;
  font-weight: 800;
}
[data-theme='light'] .page-header p  { color: #64748B; }
[data-theme='light'] .date-badge {
  background: #FEF3C7;
  border-color: #FDE68A;
  color: #92400E;
  font-weight: 700;
}
[data-theme='light'] .tx-title  { color: #0F172A; font-weight: 800; }
[data-theme='light'] .tx-subtitle { color: #64748B; }
[data-theme='light'] .txf-title   { color: #0F172A; font-weight: 700; }
[data-theme='light'] .txf-subtitle { color: #64748B; }

/* ── Cards — real elevation system ───────────────────────── */
[data-theme='light'] .card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  box-shadow: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.05);
}
[data-theme='light'] .card:hover {
  border-color: #CBD5E1;
  box-shadow: 0 4px 16px rgba(15,23,42,.1), 0 2px 6px rgba(15,23,42,.06);
}
[data-theme='light'] .card-title   { color: #1E293B; font-weight: 700; }
[data-theme='light'] .card-subtitle { color: #64748B; }

/* ── Branch stat cards (bstat) ───────────────────────────── */
[data-theme='light'] .bstat-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  box-shadow: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
}
[data-theme='light'] .bstat-card::before {
  background: linear-gradient(90deg, transparent, rgba(146,104,12,.2), transparent);
}
[data-theme='light'] .bstat-card::after { display: none; }
[data-theme='light'] .bstat-card:hover {
  border-color: #CBD5E1;
  box-shadow: 0 10px 25px rgba(15,23,42,.1), 0 4px 8px rgba(15,23,42,.06);
  transform: translateY(-2px);
}
/* strong, readable label */
[data-theme='light'] .bstat-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .9px;
  color: #64748B;
}
/* dominant number */
[data-theme='light'] .bstat-val {
  font-size: 26px;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -.6px;
}
[data-theme='light'] .bstat-val-sm { font-size: 19px; letter-spacing: -.3px; }
[data-theme='light'] .bstat-sub { color: #64748B; font-weight: 500; }
[data-theme='light'] .bstat-sub.up { color: #059669; font-weight: 600; }

/* icon wrappers — brighter on white */
[data-theme='light'] .bstat-icon-blue   { background: #EFF6FF; color: #1D4ED8; border-color: #BFDBFE; }
[data-theme='light'] .bstat-icon-amber  { background: #FFFBEB; color: #B45309; border-color: #FDE68A; }
[data-theme='light'] .bstat-icon-green  { background: #F0FDF4; color: #059669; border-color: #A7F3D0; }
[data-theme='light'] .bstat-icon-red    { background: #FFF1F2; color: #DC2626; border-color: #FECDD3; }
[data-theme='light'] .bstat-icon-purple { background: #F5F3FF; color: #7C3AED; border-color: #DDD6FE; }
[data-theme='light'] .bstat-icon-gold   { background: #FFFBEB; color: #92680C; border-color: #FDE68A; }

/* ── Gold Status mini-cards ──────────────────────────────── */
[data-theme='light'] #gs-unrefined-g { color: #DC2626; font-weight: 800; }
[data-theme='light'] #gs-partial-g   { color: #D97706; font-weight: 800; }
[data-theme='light'] #gs-refined-g   { color: #059669; font-weight: 800; }
[data-theme='light'] #gs-available   { color: #92680C; font-weight: 800; }

/* ── Tables ──────────────────────────────────────────────── */
[data-theme='light'] table { font-size: 13px; }
[data-theme='light'] thead tr {
  border-bottom: 2px solid #E2E8F0;
}
[data-theme='light'] th {
  background: #F8FAFC;
  color: #64748B;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 11px 16px;
}
[data-theme='light'] td {
  color: #334155;
  border-bottom: 1px solid #F1F5F9;
  padding: 13px 16px;
}
[data-theme='light'] tr:last-child td { border-bottom: none; }
[data-theme='light'] tr:hover td {
  background: #F8FAFC;
  color: #0F172A;
}

/* ── Badges ──────────────────────────────────────────────── */
[data-theme='light'] .badge-buy   { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
[data-theme='light'] .badge-sell  { background: #FFF1F2; color: #9F1239; border: 1px solid #FECDD3; }
[data-theme='light'] .badge-24k,
[data-theme='light'] .badge-balls { background: #FFFBEB; color: #92400E; border: 1px solid #FDE68A; }
[data-theme='light'] .badge-ref-c { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
[data-theme='light'] .badge-ref-s { background: #EFF6FF; color: #1E40AF; border: 1px solid #BFDBFE; }

/* ── Buttons ─────────────────────────────────────────────── */
[data-theme='light'] .btn-primary {
  background: linear-gradient(135deg, #B07D0E 0%, #7A5409 100%);
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(146,104,12,.3);
}
[data-theme='light'] .btn-primary:hover {
  box-shadow: 0 6px 18px rgba(146,104,12,.35);
}
[data-theme='light'] .btn-outline {
  background: #fff;
  color: #92680C;
  border: 1.5px solid #FDE68A;
}
[data-theme='light'] .btn-outline:hover {
  background: #FFFBEB;
  border-color: #92680C;
}
[data-theme='light'] .btn-ghost {
  background: #F8FAFC;
  color: #64748B;
  border: 1.5px solid #E2E8F0;
}
[data-theme='light'] .btn-ghost:hover {
  background: #F1F5F9;
  color: #334155;
  border-color: #CBD5E1;
}
[data-theme='light'] .btn-danger {
  background: #FFF1F2;
  color: #DC2626;
  border: 1px solid #FECDD3;
}
[data-theme='light'] .btn-danger:hover { background: #FFE4E6; border-color: #FCA5A5; }
[data-theme='light'] .btn-sm {
  background: #F8FAFC;
  color: #64748B;
  border: 1.5px solid #E2E8F0;
}
[data-theme='light'] .btn-sm:hover { background: #F1F5F9; color: #334155; border-color: #CBD5E1; }
[data-theme='light'] .btn-sm.active { background: #FFFBEB; color: #92680C; border-color: #FDE68A; }

/* ── Transaction forms ───────────────────────────────────── */
[data-theme='light'] .txc-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  box-shadow: 0 1px 3px rgba(15,23,42,.07);
}
[data-theme='light'] .txc-card::before { display: none; }
[data-theme='light'] .txc-card:hover {
  border-color: #92680C;
  box-shadow: 0 8px 24px rgba(15,23,42,.1);
  transform: translateX(3px);
}
[data-theme='light'] .txc-label  { color: #94A3B8; }
[data-theme='light'] .txc-name   { color: #0F172A; font-weight: 700; }
[data-theme='light'] .txc-desc   { color: #64748B; }
[data-theme='light'] .txc-arrow  { color: #CBD5E1; }
[data-theme='light'] .txc-card:hover .txc-arrow { color: #92680C; }

[data-theme='light'] .txc-icon-gold   { background: #FFFBEB; color: #92680C; border-color: #FDE68A; }
[data-theme='light'] .txc-icon-green  { background: #F0FDF4; color: #059669; border-color: #A7F3D0; }
[data-theme='light'] .txc-icon-blue   { background: #EFF6FF; color: #1D4ED8; border-color: #BFDBFE; }

[data-theme='light'] .txf-back {
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  color: #64748B;
}
[data-theme='light'] .txf-back:hover { background: #F1F5F9; color: #334155; border-color: #CBD5E1; }
[data-theme='light'] .txf-header-icon.txf-icon-gold   { background: #FFFBEB; color: #92680C; border-color: #FDE68A; }
[data-theme='light'] .txf-header-icon.txf-icon-green  { background: #F0FDF4; color: #059669; border-color: #A7F3D0; }
[data-theme='light'] .txf-header-icon.txf-icon-blue   { background: #EFF6FF; color: #1D4ED8; border-color: #BFDBFE; }

[data-theme='light'] .txf-id-pill {
  background: #FFFBEB;
  border-color: #FDE68A;
}
[data-theme='light'] .txf-id-label { color: #92400E; }
[data-theme='light'] .txf-id-val   { color: #92680C; }

[data-theme='light'] .txf-input {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  color: #0F172A;
}
[data-theme='light'] .txf-input:focus {
  border-color: #92680C;
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(146,104,12,.1);
}
[data-theme='light'] .txf-input::placeholder { color: #CBD5E1; }
[data-theme='light'] .txf-input-group {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
}
[data-theme='light'] .txf-input-group:focus-within {
  border-color: #92680C;
  box-shadow: 0 0 0 3px rgba(146,104,12,.1);
}
[data-theme='light'] .txf-prefix,
[data-theme='light'] .txf-suffix {
  background: #F8FAFC;
  color: #94A3B8;
  border-color: #E2E8F0;
}
[data-theme='light'] .txf-label { color: #64748B; }
[data-theme='light'] .txf-opt   { color: #94A3B8; }
[data-theme='light'] .txf-hint  { color: #94A3B8; }

[data-theme='light'] .txf-auto-row { gap: 10px; }
[data-theme='light'] .txf-auto-field {
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
}
[data-theme='light'] .txf-auto-total {
  background: #FFFBEB;
  border-color: #FDE68A;
}
[data-theme='light'] .txf-auto-label { color: #64748B; }
[data-theme='light'] .txf-auto-val   { color: #334155; }
[data-theme='light'] .txf-total-val  { color: #92680C; }

[data-theme='light'] .txf-calc-grid {
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
}
[data-theme='light'] .txf-calc-label { color: #64748B; }
[data-theme='light'] .txf-calc-val   { color: #1E293B; font-weight: 700; }
[data-theme='light'] .txf-calc-karat { color: #92680C; }
[data-theme='light'] .txf-calc-unit  { color: #94A3B8; }

[data-theme='light'] .txf-output-panel {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  box-shadow: 0 2px 8px rgba(15,23,42,.06);
}
[data-theme='light'] .txf-output-header { color: #64748B; border-bottom-color: #F1F5F9; }
[data-theme='light'] .txf-output-hint   { color: #94A3B8; }
[data-theme='light'] .txf-out-row       { color: #64748B; border-bottom-color: #F1F5F9; }
[data-theme='light'] .txf-out-val       { color: #1E293B; }
[data-theme='light'] .txf-out-divider   { background: #E2E8F0; }
[data-theme='light'] .txf-out-total-label { color: #334155; }
[data-theme='light'] .txf-out-total-val   { color: #92680C; text-shadow: none; }

[data-theme='light'] .txf-save-btn {
  background: linear-gradient(135deg, #B07D0E 0%, #7A5409 100%);
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(146,104,12,.3);
}
[data-theme='light'] .txf-save-btn:hover {
  box-shadow: 0 6px 18px rgba(146,104,12,.4);
}
[data-theme='light'] .txf-reset-btn {
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  color: #64748B;
}
[data-theme='light'] .txf-reset-btn:hover { background: #F1F5F9; color: #334155; border-color: #CBD5E1; }

[data-theme='light'] .txc-table-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  box-shadow: 0 1px 3px rgba(15,23,42,.07);
}
[data-theme='light'] .txc-table-title { color: #1E293B; }
[data-theme='light'] .txc-table-sub   { color: #64748B; }

/* ── Admin KPI cards ──────────────────────────────────────── */
[data-theme='light'] .adm-kpi-blue {
  background: #FFFFFF;
  border: 1px solid #BFDBFE;
  border-top: 3px solid #2563EB;
  box-shadow: 0 2px 8px rgba(37,99,235,.08);
}
[data-theme='light'] .adm-kpi-gold {
  background: #FFFFFF;
  border: 1px solid #FDE68A;
  border-top: 3px solid #92680C;
  box-shadow: 0 2px 8px rgba(146,104,12,.08);
}
[data-theme='light'] .adm-kpi-purple {
  background: #FFFFFF;
  border: 1px solid #DDD6FE;
  border-top: 3px solid #7C3AED;
  box-shadow: 0 2px 8px rgba(124,58,237,.08);
}
[data-theme='light'] .adm-kpi-amber {
  background: #FFFFFF;
  border: 1px solid #FDE68A;
  border-top: 3px solid #D97706;
  box-shadow: 0 2px 8px rgba(217,119,6,.08);
}
[data-theme='light'] .adm-kpi-green {
  background: #FFFFFF;
  border: 1px solid #A7F3D0;
  border-top: 3px solid #059669;
  box-shadow: 0 2px 8px rgba(5,150,105,.08);
}
[data-theme='light'] .adm-kpi-red {
  background: #FFFFFF;
  border: 1px solid #FECDD3;
  border-top: 3px solid #DC2626;
  box-shadow: 0 2px 8px rgba(220,38,38,.08);
}
[data-theme='light'] .adm-kpi-blue .adm-kpi-label   { color: #3B82F6; }
[data-theme='light'] .adm-kpi-gold .adm-kpi-label   { color: #92680C; }
[data-theme='light'] .adm-kpi-purple .adm-kpi-label { color: #7C3AED; }
[data-theme='light'] .adm-kpi-amber .adm-kpi-label  { color: #D97706; }
[data-theme='light'] .adm-kpi-green .adm-kpi-label  { color: #059669; }
[data-theme='light'] .adm-kpi-red .adm-kpi-label    { color: #DC2626; }
[data-theme='light'] .adm-kpi-val   { color: #0F172A; font-weight: 800; }
[data-theme='light'] .adm-kpi-sub   { color: #64748B; font-weight: 500; }
[data-theme='light'] .adm-kpi-icon-blue   { background: #EFF6FF; color: #1D4ED8; border-color: #BFDBFE; }
[data-theme='light'] .adm-kpi-icon-gold   { background: #FFFBEB; color: #92680C; border-color: #FDE68A; }
[data-theme='light'] .adm-kpi-icon-purple { background: #F5F3FF; color: #6D28D9; border-color: #DDD6FE; }
[data-theme='light'] .adm-kpi-icon-amber  { background: #FFFBEB; color: #B45309; border-color: #FDE68A; }
[data-theme='light'] .adm-kpi-icon-green  { background: #ECFDF5; color: #047857; border-color: #A7F3D0; }
[data-theme='light'] .adm-kpi-icon-red    { background: #FFF1F2; color: #B91C1C; border-color: #FECDD3; }

/* ── Admin filter bar ─────────────────────────────────────── */
[data-theme='light'] .adm-topbar-title { color: #0F172A; }
[data-theme='light'] .adm-topbar-sub   { color: #64748B; }
[data-theme='light'] .adm-date-pill {
  background: #FFFBEB;
  border-color: #FDE68A;
  color: #92400E;
}
[data-theme='light'] .adm-refresh-btn {
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  color: #64748B;
}
[data-theme='light'] .adm-refresh-btn:hover { background: #F1F5F9; color: #334155; }
[data-theme='light'] .adm-filter-label { color: #94A3B8; }
[data-theme='light'] .adm-filter-pill {
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  color: #64748B;
  font-weight: 600;
}
[data-theme='light'] .adm-filter-pill:hover {
  background: #FFFBEB;
  border-color: #FDE68A;
  color: #92680C;
}
[data-theme='light'] .adm-filter-pill.active {
  background: #FFFBEB;
  border-color: #92680C;
  color: #92680C;
  font-weight: 700;
}

/* ── Branch comparison table in admin ────────────────────── */
[data-theme='light'] #adm-branch-table tr:hover td { background: #F8FAFC !important; }

/* ── Settings modal ──────────────────────────────────────── */
[data-theme='light'] .smodal-backdrop { background: rgba(15,23,42,.45); }
[data-theme='light'] .smodal {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  box-shadow: 0 32px 80px rgba(15,23,42,.22), 0 8px 24px rgba(15,23,42,.1);
}
[data-theme='light'] .smodal-header {
  background: #FFFFFF;
  border-bottom: 1px solid #F1F5F9;
}
[data-theme='light'] .smodal-title  { color: #0F172A; font-weight: 800; }
[data-theme='light'] .smodal-sub    { color: #64748B; }
[data-theme='light'] .smodal-search {
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  color: #0F172A;
}
[data-theme='light'] .smodal-search:focus { border-color: #92680C; background: #fff; }
[data-theme='light'] .smodal-search::placeholder { color: #94A3B8; }
[data-theme='light'] .smodal-close {
  background: #F8FAFC;
  border-color: #E2E8F0;
  color: #64748B;
}
[data-theme='light'] .smodal-close:hover { background: #FFF1F2; color: #DC2626; border-color: #FECDD3; }

[data-theme='light'] .smodal-nav {
  background: #F8FAFC;
  border-right: 1px solid #F1F5F9;
}
[data-theme='light'] .smodal-nav-divider { background: #E2E8F0; }
[data-theme='light'] .snav-label { color: #334155; }
[data-theme='light'] .smodal-nav-item { color: #64748B; font-weight: 500; }
[data-theme='light'] .smodal-nav-item:hover { background: #FFFFFF; color: #334155; }
[data-theme='light'] .smodal-nav-item.active {
  background: #FFFBEB;
  color: #92680C;
  font-weight: 700;
}
[data-theme='light'] .smodal-nav-item.smodal-signout { color: #DC2626; }
[data-theme='light'] .smodal-nav-item.smodal-signout:hover { background: #FFF1F2; }

[data-theme='light'] .smodal-panel { background: #FFFFFF; }
[data-theme='light'] .stab-heading { border-bottom-color: #F1F5F9; }
[data-theme='light'] .stab-title   { color: #0F172A; font-weight: 800; }
[data-theme='light'] .stab-subtitle { color: #64748B; }
[data-theme='light'] .srole-badge {
  background: #FFFBEB;
  border-color: #FDE68A;
  color: #92400E;
}
[data-theme='light'] .ssection {
  border-bottom: 1px solid #F1F5F9;
  padding-bottom: 20px;
  margin-bottom: 20px;
}
[data-theme='light'] .ssection-title { color: #94A3B8; }
[data-theme='light'] .sform-label { color: #64748B; font-weight: 700; }
[data-theme='light'] .sform-opt   { color: #94A3B8; }
[data-theme='light'] .sform-hint  { color: #94A3B8; }
[data-theme='light'] .sform-note  { color: #94A3B8; background: #F8FAFC; border-color: #E2E8F0; }
[data-theme='light'] .sform-input {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  color: #0F172A;
}
[data-theme='light'] .sform-input:focus {
  border-color: #92680C;
  box-shadow: 0 0 0 3px rgba(146,104,12,.1);
  background: #FFFFFF;
}
[data-theme='light'] .sform-input::placeholder { color: #CBD5E1; }
[data-theme='light'] select.sform-input option { background: #FFFFFF; color: #0F172A; }

[data-theme='light'] .savatar-wrap { background: #F8FAFC; border-color: #E2E8F0; }
[data-theme='light'] .savatar-initials { color: #92680C; }
[data-theme='light'] .spassword-wrap .sform-input { border-color: #E2E8F0; }
[data-theme='light'] .spwd-toggle { color: #94A3B8; }
[data-theme='light'] .spwd-strength-bar { background: #F1F5F9; }
[data-theme='light'] .sinfo-box { background: #FFFBEB; border-color: #FDE68A; color: #334155; }
[data-theme='light'] .sradio-opt { background: #F8FAFC; border-color: #E2E8F0; color: #64748B; }
[data-theme='light'] .sradio-opt:has(input:checked) { background: #FFFBEB; border-color: #92680C; color: #92680C; }

[data-theme='light'] .stoggle-slider {
  background: #E2E8F0;
  border-color: #CBD5E1;
}
[data-theme='light'] .stoggle-slider::before { background: #94A3B8; }
[data-theme='light'] .stoggle input:checked + .stoggle-slider {
  background: #ECFDF5;
  border-color: #059669;
}
[data-theme='light'] .stoggle input:checked + .stoggle-slider::before { background: #059669; }
[data-theme='light'] .stoggle-label { color: #1E293B; font-weight: 600; }
[data-theme='light'] .stoggle-sub   { color: #64748B; }
[data-theme='light'] .stoggle-row { border-bottom: 1px solid #F1F5F9; }

[data-theme='light'] .sdanger-box { background: #FFF1F2; border-color: #FECDD3; }
[data-theme='light'] .sdanger-title { color: #DC2626 !important; }
[data-theme='light'] .sinfo-row { border-bottom: 1px solid #F1F5F9; }
[data-theme='light'] .sinfo-label { color: #64748B; }
[data-theme='light'] .sinfo-val   { color: #334155; }

[data-theme='light'] .stable-wrap { background: #FFFFFF; }
[data-theme='light'] .stable-wrap th { background: #F8FAFC; color: #64748B; }
[data-theme='light'] .stable-wrap td { color: #334155; border-bottom-color: #F1F5F9; }
[data-theme='light'] .stable-wrap tr:hover td { background: #F8FAFC; }
[data-theme='light'] .branch-id-badge { background: #FFFBEB; color: #92680C; border-color: #FDE68A; }
[data-theme='light'] .sdot-active   { color: #059669; }
[data-theme='light'] .sdot-inactive { color: #94A3B8; }

[data-theme='light'] .sperm-check { background: #F8FAFC; border-color: #E2E8F0; color: #64748B; }
[data-theme='light'] .sperm-check:has(input:checked) { background: #FFFBEB; border-color: #92680C; color: #92680C; }

[data-theme='light'] .ssubtab-bar  { background: #F8FAFC; border-color: #E2E8F0; }
[data-theme='light'] .ssubtab      { color: #64748B; }
[data-theme='light'] .ssubtab.active { background: #FFFFFF; color: #92680C; box-shadow: 0 1px 4px rgba(15,23,42,.08); }

[data-theme='light'] .stab-footer { border-top: 1px solid #F1F5F9; }
[data-theme='light'] .sbtn-primary {
  background: linear-gradient(135deg, #B07D0E 0%, #7A5409 100%);
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(146,104,12,.3);
}
[data-theme='light'] .sbtn-ghost {
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  color: #64748B;
}
[data-theme='light'] .sbtn-ghost:hover { background: #F1F5F9; color: #334155; border-color: #CBD5E1; }
[data-theme='light'] .sbtn-sm { font-size: 11px; }
[data-theme='light'] .sbtn-danger {
  background: #FFF1F2;
  border-color: #FECDD3;
  color: #DC2626;
}
[data-theme='light'] .sbtn-danger:hover { background: #FFE4E6; }

[data-theme='light'] #smodal-unsaved-bar {
  background: #FFFBEB;
  border-top: 1px solid #FDE68A;
  color: #92400E;
}

[data-theme='light'] .slog-box   { background: #F8FAFC; border-color: #E2E8F0; }
[data-theme='light'] .slog-time  { color: #92680C; }
[data-theme='light'] .slog-text  { color: #64748B; }
[data-theme='light'] .sloading   { color: #64748B; }
[data-theme='light'] .smsg-area > div { font-size: 13px; }

/* ── Inline refining panel ────────────────────────────────── */
[data-theme='light'] #dash-refine-panel .card {
  background: #FFFFFF;
  border-color: #E2E8F0;
}
[data-theme='light'] .txf-textarea {
  background: #FFFFFF;
  border-color: #E2E8F0;
  color: #0F172A;
}

/* ── Light scrollbar ──────────────────────────────────────── */
[data-theme='light'] ::-webkit-scrollbar-track { background: #F1F5F9; border-radius: 10px; }
[data-theme='light'] ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #CBD5E1, #94A3B8);
  border-radius: 10px;
  border: 1px solid #E2E8F0;
  box-shadow: none;
}
[data-theme='light'] ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #94A3B8, #64748B);
  box-shadow: none;
}
[data-theme='light'] * {
  scrollbar-color: #CBD5E1 #F1F5F9;
}


/* ============================================================
   REPORTS PAGE — Warm Ochre Card Grid (matches screenshot)
   Palette: cream bg #F5F0E8, white cards, single icon tone
   ============================================================ */

/* ── Page header ─────────────────────────────────────────── */
.rpt-page-header { margin-bottom: 28px; }
.rpt-title {
  font-family: 'Inter', var(--font-main);
  font-size: 28px;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -.5px;
  margin-bottom: 4px;
}
.rpt-subtitle { font-size: 14px; color: var(--text-muted); font-weight: 400; }

/* ── 3-column grid ───────────────────────────────────────── */
.rpt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

/* ── Base card — screenshot look ────────────────────────── */
.rpt-card {
  background: var(--black-2);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  padding: 26px 24px 22px;
  cursor: pointer;
  transition: all .2s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  overflow: hidden;
}
.rpt-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,.12), 0 4px 10px rgba(0,0,0,.07);
  border-color: rgba(155,126,62,.3);
}
.rpt-card:active { transform: translateY(-1px) scale(.99); }
.rpt-card-export { border-style: dashed; }

/* ── Icon box — single warm tone, all same colour ────────── */
.rpt-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 18px;
  transition: transform .2s;
  /* All icons use the same warm ochre from the screenshot */
  background: rgba(155,126,62,.12);
  color: #9B7E3E;
  border: 1px solid rgba(155,126,62,.2);
}
.rpt-card:hover .rpt-card-icon { transform: scale(1.06); }

/* Keep colour variants for dark mode diversity, light mode overrides all to ochre */
.rpt-icon-gold,.rpt-icon-blue,.rpt-icon-amber,.rpt-icon-green,
.rpt-icon-purple,.rpt-icon-red,.rpt-icon-indigo,.rpt-icon-slate {
  background: rgba(212,168,67,.12);
  color: var(--gold);
  border: 1px solid rgba(212,168,67,.2);
}

/* ── Horizontal divider between icon and text (screenshot detail) */
.rpt-card-icon-divider {
  height: 1px;
  background: var(--border-soft);
  margin: 0 -24px 18px;
}

/* ── Title ───────────────────────────────────────────────── */
.rpt-card-title {
  font-family: 'Inter', var(--font-main);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -.15px;
  margin-bottom: 8px;
}

/* ── Description ─────────────────────────────────────────── */
.rpt-card-desc {
  font-family: 'Inter', var(--font-main);
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
  flex: 1;
  margin-bottom: 16px;
}

/* ── Footer badge pill ───────────────────────────────────── */
.rpt-card-footer { margin-top: auto; }

.rpt-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 20px;
  font-family: 'Inter', var(--font-main);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1px;
  /* All same warm tint in light mode, overridden below */
  background: rgba(155,126,62,.1);
  color: #7A6030;
  border: 1px solid rgba(155,126,62,.22);
}

/* Dark mode pill variants */
.rpt-pill-gold   { background: rgba(212,168,67,.12); color: var(--gold);  border-color: rgba(212,168,67,.22); }
.rpt-pill-blue   { background: rgba(96,165,250,.1);  color: #60a5fa;      border-color: rgba(96,165,250,.2); }
.rpt-pill-green  { background: rgba(52,201,123,.1);  color: #34c97b;      border-color: rgba(52,201,123,.2); }
.rpt-pill-amber  { background: rgba(251,191,36,.1);  color: #fbbf24;      border-color: rgba(251,191,36,.2); }
.rpt-pill-indigo { background: rgba(99,102,241,.1);  color: #818cf8;      border-color: rgba(99,102,241,.2); }
.rpt-pill-slate  { background: rgba(148,163,184,.1); color: #94a3b8;      border-color: rgba(148,163,184,.2); }

/* ── Detail panel summary numbers ────────────────────────── */
.rpt-summary-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-soft);
}
.rpt-sum-cell {
  background: var(--black-3);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 14px 16px;
}
.rpt-sum-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .9px;
  color: var(--text-faint);
  margin-bottom: 6px;
}
.rpt-sum-val {
  font-family: 'Arial Rounded MT Bold','Nunito','Inter',var(--font-main);
  font-size: 22px;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -.4px;
}

/* ── Tab bar ─────────────────────────────────────────────── */
.rpt-tab-bar {
  display: flex;
  background: var(--black-3);
  border: 1px solid var(--border-soft);
  border-radius: 9px;
  padding: 3px;
  gap: 2px;
}
.rpt-tab {
  padding: 5px 14px;
  border: none;
  background: transparent;
  border-radius: 7px;
  font-family: 'Inter',var(--font-main);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all .15s;
}
.rpt-tab:hover  { background: var(--black-4); color: var(--text-soft); }
.rpt-tab.active { background: var(--black-2); color: var(--gold); box-shadow: 0 1px 4px rgba(0,0,0,.22); }

/* ============================================================
   LIGHT THEME — Reports  (matches screenshot exactly)
   Background: warm cream #F5F0E8
   Cards: pure white #FFFFFF
   All icons + pills: single warm ochre tone
   ============================================================ */

/* Warm cream page background when on reports page */
[data-theme='light'] #page-reports {
  background: #F5F0E8;
  min-height: 100vh;
  margin: -28px -32px;
  padding: 28px 32px 48px;
}

[data-theme='light'] .rpt-title   { color: #1A1A1A; font-weight: 800; }
[data-theme='light'] .rpt-subtitle { color: #888; }

/* White cards on cream background */
[data-theme='light'] .rpt-card {
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,.07);
  box-shadow: 0 1px 4px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
}
[data-theme='light'] .rpt-card:hover {
  border-color: rgba(155,126,62,.25);
  box-shadow: 0 12px 32px rgba(0,0,0,.1), 0 4px 10px rgba(0,0,0,.06);
}
[data-theme='light'] .rpt-card-export {
  background: #FDFBF7;
  border-style: dashed;
  border-color: rgba(155,126,62,.25);
}

/* ALL icons: same warm ochre square — exactly like screenshot */
[data-theme='light'] .rpt-card-icon,
[data-theme='light'] .rpt-icon-gold,
[data-theme='light'] .rpt-icon-blue,
[data-theme='light'] .rpt-icon-amber,
[data-theme='light'] .rpt-icon-green,
[data-theme='light'] .rpt-icon-purple,
[data-theme='light'] .rpt-icon-red,
[data-theme='light'] .rpt-icon-indigo,
[data-theme='light'] .rpt-icon-slate {
  background: #F5EDD8;
  color: #9B7E3E;
  border: 1px solid rgba(155,126,62,.18);
}

/* Divider between icon section and text */
[data-theme='light'] .rpt-card-icon-divider {
  background: #F0EBE0;
}

/* Typography */
[data-theme='light'] .rpt-card-title { color: #1A1A1A; font-weight: 700; }
[data-theme='light'] .rpt-card-desc  { color: #666666; }

/* ALL pills: same warm ochre tint — matching screenshot */
[data-theme='light'] .rpt-pill,
[data-theme='light'] .rpt-pill-gold,
[data-theme='light'] .rpt-pill-blue,
[data-theme='light'] .rpt-pill-green,
[data-theme='light'] .rpt-pill-amber,
[data-theme='light'] .rpt-pill-indigo,
[data-theme='light'] .rpt-pill-slate {
  background: #F5EDD8;
  color: #7A6030;
  border: 1px solid rgba(155,126,62,.25);
}

/* Detail panel */
[data-theme='light'] .rpt-sum-cell  { background: #FDFBF7; border-color: #E8E0D0; }
[data-theme='light'] .rpt-sum-label { color: #999; }
[data-theme='light'] .rpt-sum-val   { color: #1A1A1A; }
[data-theme='light'] .rpt-tab-bar   { background: #F5EDD8; border-color: #E0D5C0; }
[data-theme='light'] .rpt-tab       { color: #888; }
[data-theme='light'] .rpt-tab:hover { background: #EEE4CC; color: #555; }
[data-theme='light'] .rpt-tab.active { background: #FFFFFF; color: #7A6030; box-shadow: 0 1px 4px rgba(0,0,0,.08); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) { .rpt-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .rpt-grid { grid-template-columns: 1fr; gap: 10px; }
  .rpt-summary-row { grid-template-columns: 1fr; } }

/* ============================================================
   NAV AVATAR — profile photo wrapper
   ============================================================ */
.nav-avatar-wrap {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* When a photo is loaded, hide the initials div */
.nav-avatar-wrap img[src]:not([src=""]) ~ .avatar { display: none !important; }

/* Hover ring on the whole profile area */
.nav-profile:hover .nav-avatar-wrap {
  box-shadow: 0 0 0 2px var(--gold);
  transition: box-shadow .18s;
}
/* Tooltip cue */
.nav-profile {
  position: relative;
}
.nav-profile::after {
  content: 'Edit Profile';
  position: absolute;
  bottom: -32px;
  right: 0;
  background: var(--black-3);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 6px;
  white-space: nowrap;
  border: 1px solid var(--border-soft);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
  z-index: 100;
}
.nav-profile:hover::after { opacity: 1; }

/* Light theme overrides */
[data-theme='light'] .nav-profile::after {
  background: #fff;
  border-color: #E2E8F0;
  color: #64748B;
  box-shadow: 0 2px 8px rgba(15,23,42,.08);
}
[data-theme='light'] .nav-profile:hover .nav-avatar-wrap {
  box-shadow: 0 0 0 2px #92680C;
}

/* ============================================================
   WALLET SYSTEM — Phase 2 Styles
   ============================================================ */

/* ── Nav wallet pill ─────────────────────────────────────────── */
.nav-wallet-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 20px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--border);
  transition: background .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.nav-wallet-pill svg { flex-shrink: 0; opacity: .8; }
.nav-wallet-pill:hover { background: var(--black-3); }

.wlt-pill-ok       { color: var(--gold);      border-color: rgba(212,168,67,.35); background: rgba(212,168,67,.08); }
.wlt-pill-low      { color: #fbbf24;           border-color: rgba(245,158,11,.4);  background: rgba(245,158,11,.1); }
.wlt-pill-debt     { color: #f87171;           border-color: rgba(239,68,68,.4);   background: rgba(239,68,68,.08); }
.wlt-pill-critical { color: #fff;              border-color: #dc2626;              background: #dc2626; }

.nav-wallet-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #f87171;
  flex-shrink: 0;
  animation: wlt-dot-pulse 1.4s ease-in-out infinite;
}
@keyframes wlt-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(.8); }
}

/* ── Balance card (staff view) ───────────────────────────────── */
.wlt-balance-card {
  background: var(--black-2);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 20px;
  transition: border-color .2s;
}
.wlt-balance-card.wlt-card-low      { border-color: rgba(245,158,11,.5); background: rgba(245,158,11,.04); }
.wlt-balance-card.wlt-card-debt     { border-color: rgba(239,68,68,.4);  background: rgba(239,68,68,.04); }
.wlt-balance-card.wlt-card-critical { border-color: #dc2626;             background: rgba(220,38,38,.06); }

.wlt-balance-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}
.wlt-balance-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: rgba(212,168,67,.12);
  border: 1px solid rgba(212,168,67,.2);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
  flex-shrink: 0;
}

.wlt-balance-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.wlt-balance-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -.5px;
}
.wlt-val-ok       { color: var(--gold); }
.wlt-val-low      { color: #fbbf24; }
.wlt-val-debt     { color: #f87171; }
.wlt-val-critical { color: #dc2626; }

.wlt-balance-meta {
  display: flex;
  gap: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
}
.wlt-meta-label {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.wlt-meta-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
}

/* ── Pending topup item (staff) ──────────────────────────────── */
.wlt-pending-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-soft);
  flex-wrap: wrap;
}
.wlt-pending-item:last-child { border-bottom: none; }
.wlt-pending-amount {
  font-size: 17px;
  font-weight: 700;
  color: var(--gold);
  font-family: 'JetBrains Mono', monospace;
}
.wlt-pending-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.wlt-pending-note {
  font-size: 12px;
  color: var(--text-sub);
  margin-top: 4px;
  font-style: italic;
}

/* ── History table types ─────────────────────────────────────── */
.wlt-type-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 8px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.wlt-type-in  { background: rgba(5,150,105,.15);  color: #059669; border: 1px solid rgba(5,150,105,.25); }
.wlt-type-out { background: rgba(239,68,68,.12);  color: #f87171; border: 1px solid rgba(239,68,68,.2); }
.wlt-amt-in   { color: #059669; }
.wlt-amt-out  { color: #f87171; }

/* ── Admin branches grid ─────────────────────────────────────── */
.wlt-branches-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.wlt-branch-card {
  background: var(--black-2);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 18px;
  transition: border-color .2s, box-shadow .2s;
}
.wlt-branch-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.25); }
.wlt-bc-debt     { border-color: rgba(239,68,68,.35);  background: rgba(239,68,68,.03); }
.wlt-bc-low      { border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.03); }
.wlt-bc-critical { border-color: #dc2626;              background: rgba(220,38,38,.05); }

.wlt-bc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  gap: 8px;
}
.wlt-bc-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
}
.wlt-bc-badge {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 8px;
  letter-spacing: .4px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.wlt-badge-debt     { background: rgba(239,68,68,.18);  color: #f87171; }
.wlt-badge-low      { background: rgba(245,158,11,.2);  color: #fbbf24; }
.wlt-badge-critical { background: #dc2626;              color: #fff; }

.wlt-bc-balance {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 4px;
}
.wlt-bc-debt-line {
  font-size: 11px;
  color: #f87171;
  margin-bottom: 6px;
}
.wlt-bc-pending {
  font-size: 11px;
  color: #fbbf24;
  margin-bottom: 8px;
}
.wlt-bc-footer {
  border-top: 1px solid var(--border-soft);
  padding-top: 10px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wlt-bc-stat {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
}
.wlt-bc-stat span:last-child {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  color: var(--text-sub);
}

/* ── Light theme overrides ───────────────────────────────────── */
[data-theme='light'] .wlt-balance-card { background: #FFFFFF; border-color: #E2E8F0; }
[data-theme='light'] .wlt-branch-card  { background: #FFFFFF; border-color: #E2E8F0; }
[data-theme='light'] .nav-wallet-pill:hover { background: #F1F5F9; }

/* ── Mobile wallet ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .wlt-branches-grid { grid-template-columns: 1fr; }
  .wlt-balance-val   { font-size: 26px; }
  .wlt-balance-meta  { gap: 16px; flex-wrap: wrap; }
  .nav-wallet-pill   { padding: 4px 9px; font-size: 11px; }
}
/* ============================================================
   EXPENSES SYSTEM — Phase 3 Styles
   ============================================================ */

/* Summary row */
.exp-summary-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.exp-sum-card {
  background: var(--black-2);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 16px 18px;
}
.exp-sum-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.exp-sum-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 19px;
  font-weight: 700;
  color: var(--text-main);
}

/* Status badges */
.exp-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 8px;
  letter-spacing: .3px;
  text-transform: uppercase;
  white-space: nowrap;
}
.exp-badge-pending  { background: rgba(245,158,11,.15); color: #fbbf24; border: 1px solid rgba(245,158,11,.3); }
.exp-badge-approved { background: rgba(5,150,105,.15);  color: #059669; border: 1px solid rgba(5,150,105,.25); }
.exp-badge-rejected { background: rgba(220,38,38,.12);  color: #f87171; border: 1px solid rgba(220,38,38,.2); }

/* Category pill */
.exp-cat-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 8px;
  background: var(--black-3);
  border: 1px solid var(--border-soft);
  color: var(--text-sub);
  white-space: nowrap;
}

/* Mobile */
@media (max-width: 768px) {
  .exp-summary-row { grid-template-columns: 1fr 1fr; }
  .exp-sum-val { font-size: 16px; }
}

[data-theme='light'] .exp-sum-card { background: #FFFFFF; border-color: #E2E8F0; }
[data-theme='light'] .exp-cat-pill { background: #F1F5F9; border-color: #E2E8F0; color: #475569; }

/* ============================================================
   PROFIT SYSTEM — Phase 4 Styles
   ============================================================ */

.prf-cards-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
.prf-cards-5 { grid-template-columns: repeat(5, 1fr); }

.prf-card {
  background: var(--black-2);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 18px;
}
.prf-card-highlight {
  border-color: rgba(212,168,67,.4);
  background: rgba(212,168,67,.06);
}
.prf-card-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.prf-card-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 5px;
}
.prf-card-sub {
  font-size: 11px;
  color: var(--text-muted);
}
.prf-val-neg { color: #f87171; }

.prf-pos { color: #059669; }
.prf-neg { color: #f87171; }

.prf-inv-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.prf-inv-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 17px;
  font-weight: 700;
  color: var(--gold);
}

/* Mobile */
@media (max-width: 768px) {
  .prf-cards-row  { grid-template-columns: 1fr 1fr; }
  .prf-cards-5    { grid-template-columns: 1fr 1fr; }
  .prf-card-val   { font-size: 16px; }
}

[data-theme='light'] .prf-card { background: #FFFFFF; border-color: #E2E8F0; }
[data-theme='light'] .prf-card-highlight { background: #FFFBEB; border-color: #D97706; }

/* ── Pending Refining Banner ──────────────────────────────────── */
.pending-refine-banner {
  background: rgba(245,158,11,.1);
  border-bottom: 1px solid rgba(245,158,11,.3);
  padding: 12px 24px;
  position: sticky;
  top: 0;
  z-index: 90;
}
.prb-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
}
.prb-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.prb-fire { font-size: 20px; }
.prb-title {
  font-size: 13px;
  font-weight: 700;
  color: #fbbf24;
}
.prb-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.prb-actions { display: flex; gap: 8px; }
/* ── Admin Furnace card urgent pulse ─────────────────────────── */
#adm-furnace-card {
  transition: border-color .3s;
}
#adm-furnace-card:has(.urgent) {
  border-color: rgba(220,38,38,.5);
  background: rgba(220,38,38,.03);
}
/* ============================================================
   ALERTS HUB — Phase 6 Styles
   ============================================================ */

.alert-detail-list {
  background: var(--black-3);
  border-radius: 10px;
  overflow: hidden;
}

.alert-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-sub);
  border-bottom: 1px solid var(--border-soft);
  gap: 12px;
}

.alert-detail-row:last-child {
  border-bottom: none;
}

.alert-detail-row span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-theme='light'] .alert-detail-list {
  background: #F8FAFC;
}

/* ============================================================
   PHASE M1 — MOBILE BOTTOM TAB BAR (clean rewrite)
   ============================================================ */

/* Hidden by default — shown only on mobile after login */
.mobile-tab-bar {
  display: none;
}


/* More sheet — hidden on desktop by default */
.more-sheet { display: none; position: fixed; }
.more-sheet-backdrop { display: none; position: fixed; }

@media (max-width: 768px) {

  /* ── Hide desktop sidebar ── */
  .sidebar { display: none !important; }

  /* ── Full width main ── */
  .main { margin-left: 0 !important; }

  /* ── Page padding for floating bar ── */
  .page { padding: 16px 16px 120px !important; }

  /* ── Floating pill tab bar ── */
  .mobile-tab-bar {
    display: flex;
    position: fixed;
    bottom: max(16px, env(safe-area-inset-bottom));
    left: 12px;
    right: 12px;
    z-index: 999;
    background: rgba(12,14,20,0.92);
    border: 1px solid rgba(212,168,67,0.2);
    border-radius: 30px;
    padding: 5px;
    backdrop-filter: blur(28px) saturate(200%);
    -webkit-backdrop-filter: blur(28px) saturate(200%);
    box-shadow:
      0 16px 48px rgba(0,0,0,0.6),
      0 4px 12px rgba(0,0,0,0.3),
      inset 0 1px 0 rgba(255,255,255,0.08);
    gap: 3px;
  }

  /* ── Individual tab ── */
  .mob-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 4px 8px;
    cursor: pointer;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    border-radius: 24px;
    transition: background .2s, box-shadow .2s;
    overflow: hidden;
  }

  .mob-tab svg {
    stroke: #526070;
    transition: stroke .2s, transform .25s cubic-bezier(.34,1.56,.64,1), filter .2s;
    position: relative;
    z-index: 1;
    width: 22px;
    height: 22px;
  }

  .mob-tab span {
    font-size: 10px;
    font-weight: 600;
    color: #526070;
    transition: color .2s;
    line-height: 1;
    letter-spacing: 0.3px;
    position: relative;
    z-index: 1;
  }

  /* ── Active tab ── */
  .mob-tab.active {
    background: linear-gradient(145deg,
      rgba(212,168,67,0.22) 0%,
      rgba(212,168,67,0.08) 100%
    );
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.10),
      0 4px 14px rgba(212,168,67,0.18);
  }

  .mob-tab.active svg {
    stroke: #D4A843;
    transform: translateY(-2px) scale(1.12);
    filter: drop-shadow(0 3px 6px rgba(212,168,67,0.4));
  }

  .mob-tab.active span {
    color: #D4A843;
    font-weight: 700;
  }

  /* ── Gold dot indicator ── */
  .mob-tab.active::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #D4A843;
    box-shadow: 0 0 8px rgba(212,168,67,0.7);
    z-index: 2;
  }

  /* ── Press feedback ── */
  .mob-tab:active {
    transform: scale(0.91);
    transition: transform .1s ease;
  }

  /* ── More sheet backdrop ── */
  .more-sheet-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 300;
    backdrop-filter: blur(3px);
  }
  .more-sheet-backdrop.open { display: block; }

  /* ── More sheet ── */
  .more-sheet {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 400;
    background: #0D0D15;
    border-radius: 24px 24px 0 0;
    border-top: 1px solid rgba(255,255,255,.1);
    padding: 12px 20px 100px;
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.32,.72,0,1);
    max-height: 80vh;
    overflow-y: auto;
  }
  .more-sheet.open { transform: translateY(0); }

  .more-sheet-handle {
    width: 40px;
    height: 4px;
    background: rgba(255,255,255,.15);
    border-radius: 2px;
    margin: 0 auto 16px;
  }

  .more-sheet-title {
    font-size: 18px;
    font-weight: 700;
    color: #EDF0F5;
    margin-bottom: 20px;
    padding-left: 4px;
  }

  .more-sheet-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 20px;
  }

  .more-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 8px 12px;
    border-radius: 20px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
    cursor: pointer;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    transition: all .2s cubic-bezier(.34,1.56,.64,1);
  }
  .more-item:active {
    transform: scale(0.92);
    transition: transform .1s ease;
  }

  .more-item-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transition: transform .2s cubic-bezier(.34,1.56,.64,1);
  }
  .more-item:active .more-item-icon { transform: scale(0.9); }
  .more-item-icon svg { stroke: #fff; }

  .more-item span {
    font-size: 11px;
    font-weight: 600;
    color: #94A3B8;
    text-align: center;
    line-height: 1.2;
    letter-spacing: 0.1px;
  }

  .more-item-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #dc2626;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 8px;
  }

  .more-signout {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    background: rgba(220,38,38,.08);
    border: 1px solid rgba(220,38,38,.2);
    border-radius: 14px;
    color: #f87171;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .more-signout svg { stroke: #f87171; }

  /* ── Modals on mobile ── */
  .modal-backdrop {
    align-items: flex-end !important;
    padding-bottom: max(80px, env(safe-area-inset-bottom)) !important;
  }
  .modal {
    width: calc(100vw - 24px) !important;
    max-width: 100% !important;
    margin: 12px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    border-radius: 20px !important;
  }

  /* ── Cards ── */
  .prf-cards-row     { grid-template-columns: 1fr 1fr !important; }
  .prf-cards-5       { grid-template-columns: 1fr 1fr !important; }
  .wlt-branches-grid { grid-template-columns: 1fr !important; }
  .exp-summary-row   { grid-template-columns: 1fr 1fr !important; }
  .bstat-grid        { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .adm-kpi-grid      { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .rpt-grid          { grid-template-columns: 1fr !important; }
  .txf-layout        { grid-template-columns: 1fr !important; }
  .txf-output-col    { position: static !important; }
  .txf-row           { grid-template-columns: 1fr !important; }

  /* ── Tables ── */
  .table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  table { min-width: 500px; }

  /* ── Touch targets ── */
  .btn-sm { padding: 8px 14px !important; font-size: 13px !important; }
  .btn-outline, .btn-primary, .btn-ghost { min-height: 44px; }
  .form-input, input[type="text"], input[type="number"],
  input[type="date"], input[type="email"], select, textarea {
    font-size: 16px !important;
    min-height: 44px !important;
  }

  /* ── Pending refining banner ── */
  .pending-refine-banner {
    bottom: 90px !important;
    top: auto !important;
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    border-radius: 14px !important;
    z-index: 150 !important;
  }

  /* ── Light mode ── */
  [data-theme='light'] .mobile-tab-bar {
    background: rgba(255,255,255,0.88);
    border-color: rgba(146,104,12,0.2);
    box-shadow:
      0 16px 48px rgba(15,23,42,0.15),
      0 4px 12px rgba(15,23,42,0.08),
      inset 0 1px 0 rgba(255,255,255,0.9);
  }
  [data-theme='light'] .mob-tab svg  { stroke: #94A3B8; }
  [data-theme='light'] .mob-tab span { color: #94A3B8; }
  [data-theme='light'] .mob-tab.active svg  {
    stroke: #92680C;
    filter: drop-shadow(0 3px 6px rgba(146,104,12,0.4));
  }
  [data-theme='light'] .mob-tab.active span { color: #92680C; }
  [data-theme='light'] .mob-tab.active { background: rgba(146,104,12,0.12); }
  [data-theme='light'] .mob-tab.active::before { background: #92680C; }
  [data-theme='light'] .more-sheet   { background: #FFFFFF; }
  [data-theme='light'] .more-item    { background: #F1F5F9; border-color: #E2E8F0; }
  [data-theme='light'] .more-item svg { stroke: #475569; }
  [data-theme='light'] .more-item span { color: #475569; }
  [data-theme='light'] .more-sheet-title { color: #0F172A; }
  [data-theme='light'] .more-sheet-handle { background: rgba(0,0,0,.15); }

} /* end @media (max-width: 768px) */
/* ============================================================
   M2 — UNIFIED BUTTON SYSTEM (overrides all earlier definitions)
   One spec, consistent across every page and modal
   ============================================================ */

/* ── Shared base ────────────────────────────────────────────── */
.btn-primary, .btn-outline, .btn-ghost,
.btn-danger,  .btn-edit,   .btn-sm,
.sbtn-primary, .sbtn-ghost, .sbtn-danger,
.txf-save-btn, .txf-reset-btn {
  font-family: var(--font-main);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: .15px;
  transition: all .18s cubic-bezier(.4,0,.2,1);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  text-decoration: none;
}

/* ── Primary ────────────────────────────────────────────────── */
.btn-primary, .sbtn-primary, .txf-save-btn {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);
  color: #0C0800;
  border: none;
  padding: 11px 24px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(212,168,67,.25), inset 0 1px 0 rgba(255,255,255,.15);
  position: relative;
  overflow: hidden;
}
.btn-primary::before, .sbtn-primary::before, .txf-save-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.14) 0%, transparent 60%);
  opacity: 1;
  pointer-events: none;
}
.btn-primary:hover, .sbtn-primary:hover, .txf-save-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212,168,67,.38), inset 0 1px 0 rgba(255,255,255,.15);
}
.btn-primary:active, .sbtn-primary:active, .txf-save-btn:active {
  transform: translateY(0) scale(.98);
  box-shadow: 0 1px 4px rgba(212,168,67,.2);
}
.btn-primary:disabled, .sbtn-primary:disabled, .txf-save-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

/* ── Outline ────────────────────────────────────────────────── */
.btn-outline {
  background: transparent;
  color: var(--gold);
  border: 1.5px solid rgba(212,168,67,.4);
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
}
.btn-outline:hover {
  background: rgba(212,168,67,.09);
  border-color: rgba(212,168,67,.6);
  transform: translateY(-1px);
}
.btn-outline:active { transform: scale(.97); }

/* ── Ghost ──────────────────────────────────────────────────── */
.btn-ghost, .sbtn-ghost, .txf-reset-btn {
  background: rgba(255,255,255,.04);
  color: var(--text-muted);
  border: 1px solid rgba(255,255,255,.09);
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
}
.btn-ghost:hover, .sbtn-ghost:hover, .txf-reset-btn:hover {
  background: rgba(255,255,255,.08);
  color: var(--text-soft);
  border-color: rgba(255,255,255,.16);
}
.btn-ghost:active, .txf-reset-btn:active { transform: scale(.97); }

/* ── Danger ─────────────────────────────────────────────────── */
.btn-danger, .sbtn-danger {
  background: rgba(240,82,82,.1);
  color: #F87171;
  border: 1px solid rgba(240,82,82,.22);
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
}
.btn-danger:hover, .sbtn-danger:hover {
  background: rgba(240,82,82,.18);
  border-color: rgba(240,82,82,.38);
  transform: translateY(-1px);
}

/* ── Edit (gold ghost) ──────────────────────────────────────── */
.btn-edit {
  background: rgba(212,168,67,.08);
  color: var(--gold);
  border: 1px solid rgba(212,168,67,.2);
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
}
.btn-edit:hover {
  background: rgba(212,168,67,.16);
  border-color: rgba(212,168,67,.35);
}

/* ── Small variant ──────────────────────────────────────────── */
.btn-sm, .sbtn-sm {
  padding: 6px 14px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.04);
  color: var(--text-muted);
}
.btn-sm:hover, .sbtn-sm:hover {
  color: var(--text-soft);
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
}
.btn-sm.active {
  background: rgba(212,168,67,.14);
  color: var(--gold);
  border-color: rgba(212,168,67,.3);
}

/* ── Full width helper ──────────────────────────────────────── */
.btn-primary.full-width,
.btn-outline.full-width,
.btn-ghost.full-width { width: 100%; }

/* ── Min touch target on mobile ─────────────────────────────── */
@media (max-width: 768px) {
  .btn-primary, .btn-outline, .btn-ghost { min-height: 46px; }
  .btn-danger, .btn-edit { min-height: 40px; }
  .btn-sm { min-height: 36px !important; padding: 8px 16px !important; font-size: 13px !important; }
}

/* ── Light theme ─────────────────────────────────────────────── */
[data-theme='light'] .btn-primary, [data-theme='light'] .sbtn-primary {
  background: linear-gradient(135deg, #C49A1A 0%, #8B6C08 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(146,104,12,.28);
}
[data-theme='light'] .btn-primary:hover { box-shadow: 0 6px 20px rgba(146,104,12,.35); }
[data-theme='light'] .btn-outline {
  background: #fff;
  color: #92680C;
  border-color: rgba(146,104,12,.35);
}
[data-theme='light'] .btn-outline:hover { background: #FFFBEB; border-color: #92680C; }
[data-theme='light'] .btn-ghost, [data-theme='light'] .sbtn-ghost {
  background: #F8FAFC;
  color: #64748B;
  border-color: #E2E8F0;
}
[data-theme='light'] .btn-ghost:hover { background: #F1F5F9; color: #334155; border-color: #CBD5E1; }
[data-theme='light'] .btn-danger, [data-theme='light'] .sbtn-danger {
  background: #FFF1F2;
  color: #DC2626;
  border-color: #FECDD3;
}
[data-theme='light'] .btn-danger:hover { background: #FFE4E6; }
[data-theme='light'] .btn-sm, [data-theme='light'] .sbtn-sm {
  background: #F8FAFC;
  color: #64748B;
  border-color: #E2E8F0;
}
[data-theme='light'] .btn-sm:hover { background: #F1F5F9; color: #334155; border-color: #CBD5E1; }
[data-theme='light'] .btn-sm.active { background: #FFFBEB; color: #92680C; border-color: #FDE68A; }
[data-theme='light'] .btn-edit { background: #FFFBEB; color: #92680C; border-color: #FDE68A; }
[data-theme='light'] .btn-edit:hover { background: #FEF3C7; }

/* ============================================================
   M2 — UNIFIED INPUT SYSTEM (overrides all earlier definitions)
   One spec for .form-input, .txf-input, .sform-input
   ============================================================ */

/* ── Shared input base ──────────────────────────────────────── */
.form-input, .txf-input, .sform-input {
  font-family: var(--font-main) !important;
  background: rgba(255,255,255,.045) !important;
  border: 1.5px solid rgba(255,255,255,.09) !important;
  border-radius: 10px !important;
  padding: 11px 14px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--text-main) !important;
  width: 100%;
  outline: none;
  transition: border-color .18s, background .18s, box-shadow .18s;
  -webkit-appearance: none;
  appearance: none;
}

.form-input::placeholder,
.txf-input::placeholder,
.sform-input::placeholder {
  color: var(--text-faint) !important;
  font-size: 13px;
}

.form-input:hover,
.txf-input:hover,
.sform-input:hover {
  border-color: rgba(255,255,255,.15) !important;
}

.form-input:focus,
.txf-input:focus,
.sform-input:focus {
  border-color: rgba(212,168,67,.55) !important;
  background: rgba(255,255,255,.065) !important;
  box-shadow: 0 0 0 3px rgba(212,168,67,.12), 0 1px 4px rgba(0,0,0,.2) !important;
}

/* Select specific */
select.form-input,
select.txf-input,
select.sform-input {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237A8299' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 36px !important;
}
select.form-input option,
select.txf-input option,
select.sform-input option { background: var(--black-3); color: var(--text-main); }

/* Textarea */
textarea.form-input,
textarea.txf-input,
textarea.sform-input {
  resize: vertical;
  min-height: 80px;
  line-height: 1.55;
}

/* Auto-fill / calculated field */
.auto-field {
  background: rgba(212,168,67,.07) !important;
  border-color: rgba(212,168,67,.22) !important;
  color: var(--gold) !important;
  font-weight: 600 !important;
}

/* Input group (prefix/suffix wrapper) */
.txf-input-group {
  display: flex;
  align-items: stretch;
  background: rgba(255,255,255,.045);
  border: 1.5px solid rgba(255,255,255,.09);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.txf-input-group:focus-within {
  border-color: rgba(212,168,67,.55) !important;
  background: rgba(255,255,255,.065);
  box-shadow: 0 0 0 3px rgba(212,168,67,.12);
}
.txf-prefix, .txf-suffix {
  padding: 0 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-faint);
  background: rgba(255,255,255,.03);
  display: flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
}
.txf-prefix { border-right: 1px solid rgba(255,255,255,.07); }
.txf-suffix { border-left:  1px solid rgba(255,255,255,.07); }
.txf-input-pfx, .txf-input-sfx {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  flex: 1;
  min-width: 0;
}
.txf-input-pfx { padding-left: 10px !important; }
.txf-input-sfx { padding-right: 10px !important; }

/* Mobile — prevent iOS zoom */
@media (max-width: 768px) {
  .form-input, .txf-input, .sform-input {
    font-size: 16px !important;
    min-height: 46px !important;
  }
}

/* ── Light theme inputs ──────────────────────────────────────── */
[data-theme='light'] .form-input,
[data-theme='light'] .txf-input,
[data-theme='light'] .sform-input {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  color: #0F172A !important;
}
[data-theme='light'] .form-input::placeholder,
[data-theme='light'] .txf-input::placeholder,
[data-theme='light'] .sform-input::placeholder { color: #CBD5E1 !important; }
[data-theme='light'] .form-input:hover,
[data-theme='light'] .txf-input:hover,
[data-theme='light'] .sform-input:hover { border-color: #CBD5E1 !important; }
[data-theme='light'] .form-input:focus,
[data-theme='light'] .txf-input:focus,
[data-theme='light'] .sform-input:focus {
  border-color: #92680C !important;
  box-shadow: 0 0 0 3px rgba(146,104,12,.1), 0 1px 4px rgba(15,23,42,.06) !important;
  background: #FFFFFF !important;
}
[data-theme='light'] .txf-input-group {
  background: #FFFFFF;
  border-color: #E2E8F0;
}
[data-theme='light'] .txf-input-group:focus-within {
  border-color: #92680C !important;
  box-shadow: 0 0 0 3px rgba(146,104,12,.1) !important;
}
[data-theme='light'] .txf-prefix,
[data-theme='light'] .txf-suffix {
  background: #F8FAFC;
  color: #94A3B8;
  border-color: #E2E8F0;
}
[data-theme='light'] select.form-input,
[data-theme='light'] select.txf-input,
[data-theme='light'] select.sform-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
}
[data-theme='light'] select.form-input option,
[data-theme='light'] select.txf-input option { background: #fff; color: #0F172A; }
[data-theme='light'] .auto-field {
  background: #FFFBEB !important;
  border-color: #FDE68A !important;
  color: #92680C !important;
}

/* ============================================================
   M2 — SHARP MODERN OVERRIDE
   Tighter radius on buttons and inputs — Stripe/Linear feel
   ============================================================ */

/* ── Buttons — sharp rectangular ────────────────────────────── */
.btn-primary, .sbtn-primary, .txf-save-btn {
  border-radius: 6px !important;
  padding: 11px 22px !important;
  letter-spacing: .4px !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
}

.btn-outline {
  border-radius: 6px !important;
  padding: 10px 18px !important;
  letter-spacing: .3px !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
}

.btn-ghost, .sbtn-ghost, .txf-reset-btn {
  border-radius: 6px !important;
  padding: 10px 18px !important;
  letter-spacing: .2px !important;
  font-size: 13px !important;
}

.btn-danger, .sbtn-danger {
  border-radius: 5px !important;
  padding: 7px 13px !important;
  letter-spacing: .2px !important;
}

.btn-edit {
  border-radius: 5px !important;
  padding: 7px 13px !important;
}

.btn-sm, .sbtn-sm {
  border-radius: 5px !important;
  padding: 6px 13px !important;
  letter-spacing: .3px !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
}

/* Remove the lift animation — sharp buttons feel flat/confident */
.btn-primary:hover, .sbtn-primary:hover, .txf-save-btn:hover {
  transform: none !important;
  opacity: .88 !important;
  box-shadow: 0 4px 16px rgba(212,168,67,.35) !important;
}
.btn-outline:hover { transform: none !important; }
.btn-primary:active, .sbtn-primary:active, .txf-save-btn:active {
  transform: scale(.98) !important;
  opacity: .95 !important;
}

/* Add a subtle left-border accent on primary for depth */
.btn-primary::after, .sbtn-primary::after {
  content: '' !important;
  position: absolute !important;
  left: 0; top: 0; bottom: 0 !important;
  width: 3px !important;
  background: rgba(255,255,255,.25) !important;
  border-radius: 6px 0 0 6px !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  inset: unset !important;
}

/* ── Inputs — sharp rectangular ──────────────────────────────── */
.form-input, .txf-input, .sform-input {
  border-radius: 5px !important;
  padding: 11px 13px !important;
  font-size: 14px !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  background: rgba(255,255,255,.04) !important;
  letter-spacing: .1px !important;
}

/* Sharp focus — left border accent instead of glow ring */
.form-input:focus,
.txf-input:focus,
.sform-input:focus {
  border-color: var(--gold) !important;
  background: rgba(255,255,255,.06) !important;
  box-shadow:
    -3px 0 0 0 var(--gold),
    0 0 0 1px rgba(212,168,67,.15) !important;
  border-radius: 5px !important;
}

/* Input group wrapper */
.txf-input-group {
  border-radius: 5px !important;
  border: 1px solid rgba(255,255,255,.1) !important;
}
.txf-input-group:focus-within {
  border-color: var(--gold) !important;
  box-shadow: -3px 0 0 0 var(--gold), 0 0 0 1px rgba(212,168,67,.15) !important;
}

/* ── Light theme sharp overrides ─────────────────────────────── */
[data-theme='light'] .form-input:focus,
[data-theme='light'] .txf-input:focus,
[data-theme='light'] .sform-input:focus {
  border-color: #92680C !important;
  box-shadow:
    -3px 0 0 0 #92680C,
    0 0 0 1px rgba(146,104,12,.12) !important;
}
[data-theme='light'] .txf-input-group:focus-within {
  border-color: #92680C !important;
  box-shadow: -3px 0 0 0 #92680C, 0 0 0 1px rgba(146,104,12,.12) !important;
}
[data-theme='light'] .btn-primary, [data-theme='light'] .sbtn-primary {
  border-radius: 6px !important;
}
[data-theme='light'] .btn-sm.active {
  border-left: 2px solid #92680C !important;
}

/* ── Mobile touch targets stay comfortable ───────────────────── */
@media (max-width: 768px) {
  .btn-primary, .btn-outline, .btn-ghost { min-height: 44px !important; }
  .btn-sm { min-height: 36px !important; }
  .form-input, .txf-input, .sform-input {
    font-size: 16px !important;
    min-height: 46px !important;
    border-radius: 5px !important;
  }
}

/* ============================================================
   M2 — UNIFIED CARD SYSTEM
   Sharp rectangular cards, consistent across all pages
   Design language: flat, structured, data-dense, premium
   ============================================================ */

/* ── CSS card token ──────────────────────────────────────────── */
:root {
  --card-radius:   8px;
  --card-radius-sm: 6px;
  --card-bg:       var(--black-2);
  --card-border:   rgba(255,255,255,.07);
  --card-border-hover: rgba(212,168,67,.25);
  --card-shadow:   0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.2);
  --card-shadow-hover: 0 6px 24px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.25);
  --card-padding:  20px;
  --card-padding-sm: 14px;
}

/* ── Base card ───────────────────────────────────────────────── */
.card {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--card-radius) !important;
  padding: var(--card-padding) !important;
  box-shadow: var(--card-shadow) !important;
  transition: border-color .18s, box-shadow .18s !important;
  position: relative;
}
.card:hover {
  border-color: var(--card-border-hover) !important;
  box-shadow: var(--card-shadow-hover) !important;
}

/* Left accent bar on hover */
.card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: var(--card-radius) 0 0 var(--card-radius);
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  opacity: 0;
  transition: opacity .18s;
}
.card:hover::before { opacity: 1; }

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.card-title {
  font-family: var(--font-main) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--text-soft) !important;
  letter-spacing: .2px !important;
  text-transform: uppercase !important;
}
.card-subtitle {
  font-size: 12px !important;
  color: var(--text-muted) !important;
  margin-top: 3px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* ── Stat cards (dashboard KPI) ──────────────────────────────── */
.stat-card, .bstat-card {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-shadow) !important;
  transition: border-color .18s, box-shadow .18s, transform .18s !important;
  overflow: hidden;
  position: relative;
}

/* Top accent line */
.stat-card::before, .bstat-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 0; right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(212,168,67,.5) 40%,
    rgba(212,168,67,.5) 60%,
    transparent 100%) !important;
  opacity: 0 !important;
  transition: opacity .18s !important;
}
.stat-card:hover::before, .bstat-card:hover::before { opacity: 1 !important; }

/* Remove old corner orb */
.stat-card::after, .bstat-card::after {
  display: none !important;
}

.stat-card:hover, .bstat-card:hover {
  border-color: rgba(212,168,67,.2) !important;
  box-shadow: var(--card-shadow-hover) !important;
  transform: translateY(-1px) !important;
}

/* Stat values */
.stat-val {
  font-family: var(--font-main) !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  letter-spacing: -.5px !important;
  line-height: 1.1 !important;
}
.stat-label, .bstat-label {
  font-size: 9px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  color: var(--text-faint) !important;
}
.bstat-val {
  font-family: var(--font-main) !important;
  font-weight: 800 !important;
}

/* ── Admin KPI cards ─────────────────────────────────────────── */
.adm-kpi-card {
  border-radius: var(--card-radius) !important;
  position: relative;
  overflow: hidden;
}
/* Bottom accent line instead of colored backgrounds */
.adm-kpi-card::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0; left: 0; right: 0 !important;
  height: 2px !important;
  opacity: .7 !important;
  border-radius: 0 !important;
  transform: none !important;
  top: auto !important;
  width: auto !important;
}
.adm-kpi-blue   .adm-kpi-val { color: #60A5FA !important; }
.adm-kpi-gold   .adm-kpi-val { color: var(--gold) !important; }
.adm-kpi-purple .adm-kpi-val { color: #A78BFA !important; }
.adm-kpi-amber  .adm-kpi-val { color: #FBBF24 !important; }
.adm-kpi-green  .adm-kpi-val { color: #34C97B !important; }
.adm-kpi-red    .adm-kpi-val { color: #F87171 !important; }

/* ── Profit cards ────────────────────────────────────────────── */
.prf-card {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--card-radius) !important;
  padding: 16px !important;
  box-shadow: var(--card-shadow) !important;
  transition: border-color .18s, box-shadow .18s !important;
  position: relative;
  overflow: hidden;
}
.prf-card:hover {
  border-color: var(--card-border-hover) !important;
  box-shadow: var(--card-shadow-hover) !important;
}
.prf-card-highlight {
  border-color: rgba(212,168,67,.3) !important;
  border-left: 3px solid var(--gold) !important;
  background: rgba(212,168,67,.04) !important;
}

/* ── Wallet cards ────────────────────────────────────────────── */
.wlt-balance-card {
  border-radius: var(--card-radius) !important;
  border: 1px solid var(--card-border) !important;
  box-shadow: var(--card-shadow) !important;
}
.wlt-branch-card {
  border-radius: var(--card-radius) !important;
  border: 1px solid var(--card-border) !important;
  box-shadow: var(--card-shadow) !important;
  transition: border-color .18s, box-shadow .18s !important;
}
.wlt-branch-card:hover {
  border-color: var(--card-border-hover) !important;
  box-shadow: var(--card-shadow-hover) !important;
}

/* ── Expense summary cards ───────────────────────────────────── */
.exp-sum-card {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--card-radius) !important;
  padding: var(--card-padding-sm) 16px !important;
  box-shadow: var(--card-shadow) !important;
  position: relative;
  overflow: hidden;
}
/* Color-coded left stripe per state */
.exp-sum-card:first-child { border-left: 3px solid var(--gold) !important; }
.exp-sum-card:nth-child(2){ border-left: 3px solid var(--success) !important; }
.exp-sum-card:last-child  { border-left: 3px solid #FBBF24 !important; }

/* ── Report cards ────────────────────────────────────────────── */
.rpt-card {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--card-radius) !important;
  padding: 20px !important;
  box-shadow: var(--card-shadow) !important;
  transition: border-color .18s, box-shadow .18s, transform .15s !important;
  cursor: pointer;
}
.rpt-card:hover {
  border-color: var(--card-border-hover) !important;
  box-shadow: var(--card-shadow-hover) !important;
  transform: translateY(-2px) !important;
}
.rpt-card:active { transform: translateY(0) !important; }
.rpt-card-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .1px !important;
}
.rpt-card-desc {
  font-size: 12px !important;
  color: var(--text-muted) !important;
  line-height: 1.5 !important;
}

/* Report card icon — sharp square */
.rpt-card-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: var(--card-radius-sm) !important;
  margin-bottom: 14px !important;
}
.rpt-card:hover .rpt-card-icon { transform: none !important; }

/* ── Transaction chooser cards ───────────────────────────────── */
.txc-card {
  border-radius: var(--card-radius) !important;
  border: 1px solid var(--card-border) !important;
  box-shadow: var(--card-shadow) !important;
  transition: border-color .18s, box-shadow .18s, transform .15s !important;
}
.txc-card:hover {
  border-color: var(--card-border-hover) !important;
  box-shadow: var(--card-shadow-hover) !important;
  transform: translateX(4px) !important;
}
.txc-card::before {
  border-radius: var(--card-radius) 0 0 var(--card-radius) !important;
}

/* ── Settings modal nav ──────────────────────────────────────── */
.smodal {
  border-radius: var(--card-radius) !important;
}
.smodal-nav-item {
  border-radius: var(--card-radius-sm) !important;
}

/* ── Output / live calc panel ────────────────────────────────── */
.txf-output-panel {
  border-radius: var(--card-radius) !important;
  border: 1px solid var(--card-border) !important;
}
.output-panel {
  border-radius: var(--card-radius) !important;
}

/* ── LIGHT THEME ─────────────────────────────────────────────── */
[data-theme='light'] {
  --card-bg:          #FFFFFF;
  --card-border:      #E8ECF0;
  --card-border-hover:#92680C;
  --card-shadow:      0 1px 3px rgba(15,23,42,.07), 0 1px 2px rgba(15,23,42,.04);
  --card-shadow-hover:0 8px 24px rgba(15,23,42,.1), 0 2px 8px rgba(15,23,42,.06);
}

[data-theme='light'] .card::before {
  background: linear-gradient(180deg, #92680C, #C49A1A) !important;
}
[data-theme='light'] .stat-card::before,
[data-theme='light'] .bstat-card::before {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(146,104,12,.4) 40%,
    rgba(146,104,12,.4) 60%,
    transparent 100%) !important;
}
[data-theme='light'] .card-header {
  border-bottom-color: #F1F5F9 !important;
}
[data-theme='light'] .card-title   { color: #1E293B !important; }
[data-theme='light'] .card-subtitle { color: #64748B !important; }
[data-theme='light'] .prf-card-highlight {
  border-color: #FDE68A !important;
  border-left-color: #92680C !important;
  background: #FFFBEB !important;
}
[data-theme='light'] .exp-sum-card:first-child { border-left-color: #92680C !important; }
[data-theme='light'] .exp-sum-card:nth-child(2){ border-left-color: #059669 !important; }
[data-theme='light'] .exp-sum-card:last-child  { border-left-color: #D97706 !important; }
[data-theme='light'] .wlt-branch-card { background: #FFFFFF !important; }

/* ── Mobile card padding ─────────────────────────────────────── */
@media (max-width: 768px) {
  .card { padding: 14px !important; }
  .card-header { margin-bottom: 12px !important; padding-bottom: 10px !important; }
  .prf-card { padding: 13px !important; }
  .exp-sum-card { padding: 12px 14px !important; }
  .stat-card, .bstat-card { padding: 12px !important; }
}

/* ============================================================
   M2 — UNIFIED BADGE & STATUS PILL SYSTEM
   One spec for every badge, pill, dot and status label
   Sharp rectangular — matches button/input language
   ============================================================ */

/* ── Base badge token ────────────────────────────────────────── */
.badge,
.exp-badge,
.wlt-type-badge,
.wlt-bc-badge,
.rpt-pill,
.exp-cat-pill,
.srole-badge,
.branch-id-badge,
.adm-filter-pill {
  font-family: var(--font-main) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  transition: opacity .15s !important;
}

/* ── TRANSACTION TYPE badges (buy/sell/karat) ────────────────── */
.badge {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .5px !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
}

.badge-buy {
  background: rgba(52,201,123,.12) !important;
  color: #34C97B !important;
  border: 1px solid rgba(52,201,123,.22) !important;
}
.badge-sell {
  background: rgba(240,82,82,.11) !important;
  color: #F87171 !important;
  border: 1px solid rgba(240,82,82,.22) !important;
}
.badge-24k {
  background: rgba(212,168,67,.14) !important;
  color: #D4A843 !important;
  border: 1px solid rgba(212,168,67,.28) !important;
}
.badge-22k {
  background: rgba(184,147,46,.12) !important;
  color: #C9A227 !important;
  border: 1px solid rgba(184,147,46,.24) !important;
}
.badge-18k {
  background: rgba(160,120,30,.12) !important;
  color: #B07D1A !important;
  border: 1px solid rgba(160,120,30,.24) !important;
}
.badge-balls {
  background: rgba(212,168,67,.12) !important;
  color: #D4A843 !important;
  border: 1px solid rgba(212,168,67,.22) !important;
}
.badge-ref-c {
  background: rgba(52,201,123,.1) !important;
  color: #34C97B !important;
  border: 1px solid rgba(52,201,123,.2) !important;
}
.badge-ref-s {
  background: rgba(96,165,250,.1) !important;
  color: #60A5FA !important;
  border: 1px solid rgba(96,165,250,.2) !important;
}

/* ── EXPENSE STATUS badges ───────────────────────────────────── */
.exp-badge {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .5px !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
}
.exp-badge-pending {
  background: rgba(245,158,11,.12) !important;
  color: #FBBF24 !important;
  border: 1px solid rgba(245,158,11,.25) !important;
}
.exp-badge-approved {
  background: rgba(52,201,123,.11) !important;
  color: #34C97B !important;
  border: 1px solid rgba(52,201,123,.22) !important;
}
.exp-badge-rejected {
  background: rgba(240,82,82,.1) !important;
  color: #F87171 !important;
  border: 1px solid rgba(240,82,82,.2) !important;
}

/* ── WALLET direction badges ─────────────────────────────────── */
.wlt-type-badge {
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .6px !important;
  padding: 3px 7px !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
}
.wlt-type-in {
  background: rgba(52,201,123,.11) !important;
  color: #34C97B !important;
  border: 1px solid rgba(52,201,123,.22) !important;
}
.wlt-type-out {
  background: rgba(240,82,82,.1) !important;
  color: #F87171 !important;
  border: 1px solid rgba(240,82,82,.2) !important;
}

/* ── WALLET BRANCH status badges ─────────────────────────────── */
.wlt-bc-badge {
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .5px !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
}
.wlt-badge-debt {
  background: rgba(240,82,82,.12) !important;
  color: #F87171 !important;
  border: 1px solid rgba(240,82,82,.22) !important;
}
.wlt-badge-low {
  background: rgba(245,158,11,.12) !important;
  color: #FBBF24 !important;
  border: 1px solid rgba(245,158,11,.25) !important;
}
.wlt-badge-critical {
  background: rgba(220,38,38,.9) !important;
  color: #fff !important;
  border: 1px solid #dc2626 !important;
}

/* ── REPORT pills ────────────────────────────────────────────── */
.rpt-pill {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .4px !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
  border: 1px solid transparent !important;
}
.rpt-pill-gold   { background: rgba(212,168,67,.12) !important; color: #D4A843 !important; border-color: rgba(212,168,67,.22) !important; }
.rpt-pill-blue   { background: rgba(96,165,250,.1)  !important; color: #60A5FA !important; border-color: rgba(96,165,250,.2)  !important; }
.rpt-pill-green  { background: rgba(52,201,123,.1)  !important; color: #34C97B !important; border-color: rgba(52,201,123,.2)  !important; }
.rpt-pill-amber  { background: rgba(251,191,36,.1)  !important; color: #FBBF24 !important; border-color: rgba(251,191,36,.2)  !important; }
.rpt-pill-indigo { background: rgba(99,102,241,.1)  !important; color: #818CF8 !important; border-color: rgba(99,102,241,.2)  !important; }
.rpt-pill-slate  { background: rgba(148,163,184,.1) !important; color: #94A3B8 !important; border-color: rgba(148,163,184,.2) !important; }

/* ── CATEGORY pill (expense) ─────────────────────────────────── */
.exp-cat-pill {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .3px !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  color: var(--text-muted) !important;
}

/* ── ROLE badge (user management) ────────────────────────────── */
.srole-badge {
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .6px !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
}
.srole-admin  { background: rgba(212,168,67,.14) !important; color: #D4A843 !important; border: 1px solid rgba(212,168,67,.28) !important; }
.srole-staff  { background: rgba(96,165,250,.1)  !important; color: #60A5FA !important; border: 1px solid rgba(96,165,250,.2)  !important; }
.srole-viewer { background: rgba(148,163,184,.1) !important; color: #94A3B8 !important; border: 1px solid rgba(148,163,184,.2) !important; }

/* ── BRANCH ID badge ─────────────────────────────────────────── */
.branch-id-badge {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .4px !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  color: var(--text-muted) !important;
  text-transform: uppercase !important;
}

/* ── ADMIN FILTER pills (branch selector) ────────────────────── */
.adm-filter-pill {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .3px !important;
  padding: 5px 13px !important;
  border-radius: 5px !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  color: var(--text-muted) !important;
  cursor: pointer !important;
  text-transform: uppercase !important;
}
.adm-filter-pill:hover {
  background: rgba(255,255,255,.08) !important;
  color: var(--text-soft) !important;
  border-color: rgba(255,255,255,.15) !important;
}
.adm-filter-pill.active {
  background: rgba(212,168,67,.14) !important;
  color: var(--gold) !important;
  border-color: rgba(212,168,67,.3) !important;
  border-left: 2px solid var(--gold) !important;
  font-weight: 700 !important;
}

/* ── ALERT dot ───────────────────────────────────────────────── */
.adm-alert-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 2px !important;
  flex-shrink: 0 !important;
}

/* ── NOTIFICATION dot (nav) ──────────────────────────────────── */
.notif-badge {
  font-size: 9px !important;
  font-weight: 800 !important;
  padding: 2px 5px !important;
  border-radius: 3px !important;
  letter-spacing: .2px !important;
}

/* ── USER STATUS dot ─────────────────────────────────────────── */
.sdot-active   { color: #34C97B !important; font-weight: 700 !important; }
.sdot-inactive { color: var(--text-faint) !important; font-weight: 500 !important; }

/* ── LIGHT THEME ─────────────────────────────────────────────── */
[data-theme='light'] .badge-buy    { background: #ECFDF5 !important; color: #059669 !important; border-color: #A7F3D0 !important; }
[data-theme='light'] .badge-sell   { background: #FFF1F2 !important; color: #DC2626 !important; border-color: #FECDD3 !important; }
[data-theme='light'] .badge-24k,
[data-theme='light'] .badge-balls  { background: #FFFBEB !important; color: #92680C !important; border-color: #FDE68A !important; }
[data-theme='light'] .exp-badge-pending  { background: #FFFBEB !important; color: #D97706 !important; border-color: #FDE68A !important; }
[data-theme='light'] .exp-badge-approved { background: #ECFDF5 !important; color: #059669 !important; border-color: #A7F3D0 !important; }
[data-theme='light'] .exp-badge-rejected { background: #FFF1F2 !important; color: #DC2626 !important; border-color: #FECDD3 !important; }
[data-theme='light'] .wlt-type-in  { background: #ECFDF5 !important; color: #059669 !important; border-color: #A7F3D0 !important; }
[data-theme='light'] .wlt-type-out { background: #FFF1F2 !important; color: #DC2626 !important; border-color: #FECDD3 !important; }
[data-theme='light'] .wlt-badge-debt    { background: #FFF1F2 !important; color: #DC2626 !important; border-color: #FECDD3 !important; }
[data-theme='light'] .wlt-badge-low     { background: #FFFBEB !important; color: #D97706 !important; border-color: #FDE68A !important; }
[data-theme='light'] .srole-admin  { background: #FFFBEB !important; color: #92680C !important; border-color: #FDE68A !important; }
[data-theme='light'] .srole-staff  { background: #EFF6FF !important; color: #2563EB !important; border-color: #BFDBFE !important; }
[data-theme='light'] .srole-viewer { background: #F8FAFC !important; color: #64748B !important; border-color: #E2E8F0 !important; }
[data-theme='light'] .adm-filter-pill {
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
  color: #64748B !important;
}
[data-theme='light'] .adm-filter-pill:hover {
  background: #F1F5F9 !important;
  color: #334155 !important;
  border-color: #CBD5E1 !important;
}
[data-theme='light'] .adm-filter-pill.active {
  background: #FFFBEB !important;
  color: #92680C !important;
  border-color: #FDE68A !important;
  border-left-color: #92680C !important;
}
[data-theme='light'] .exp-cat-pill {
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
  color: #64748B !important;
}
[data-theme='light'] .branch-id-badge {
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
  color: #94A3B8 !important;
}

/* ============================================================
   M2 — UNIFIED TABLE SYSTEM
   One spec for every table across all pages
   Sharp, data-dense, premium fintech feel
   ============================================================ */

/* ── Scroll wrapper ──────────────────────────────────────────── */
.table-wrapper {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  background: var(--black-2) !important;
}

/* ── Base table reset ────────────────────────────────────────── */
table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-family: var(--font-main) !important;
  font-size: 13px !important;
  table-layout: auto !important;
}

/* ── Header ──────────────────────────────────────────────────── */
thead tr {
  border-bottom: 1px solid rgba(212,168,67,.15) !important;
  background: rgba(255,255,255,.015) !important;
}

th {
  font-family: var(--font-main) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: var(--text-faint) !important;
  padding: 11px 16px !important;
  white-space: nowrap !important;
  background: transparent !important;
  border-bottom: none !important;
  position: relative !important;
  text-align: left !important;
}

/* Subtle right divider between columns */
th:not(:last-child)::after {
  content: '' !important;
  position: absolute !important;
  right: 0; top: 25%; bottom: 25% !important;
  width: 1px !important;
  background: rgba(255,255,255,.05) !important;
}

/* ── Rows ────────────────────────────────────────────────────── */
tbody tr {
  border-bottom: 1px solid rgba(255,255,255,.035) !important;
  transition: background .12s !important;
}
tbody tr:last-child {
  border-bottom: none !important;
}
tbody tr:hover td {
  background: rgba(212,168,67,.04) !important;
  color: var(--text-main) !important;
}

td {
  padding: 12px 16px !important;
  color: var(--text-soft) !important;
  vertical-align: middle !important;
  font-size: 13px !important;
  background: transparent !important;
  border-bottom: none !important;
  transition: background .12s, color .12s !important;
}

/* ── Special column styles ───────────────────────────────────── */

/* Monospace for IDs, amounts */
td.td-mono, .td-mono {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  letter-spacing: -.2px !important;
}

/* Amount columns — right aligned, mono */
td.td-amount, .td-amount {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-align: right !important;
  white-space: nowrap !important;
  letter-spacing: -.2px !important;
}
td.td-amount.positive, .td-amount.positive { color: #34C97B !important; }
td.td-amount.negative, .td-amount.negative { color: #F87171 !important; }

/* Date column — faint */
td.td-date, .td-date {
  font-size: 12px !important;
  color: var(--text-muted) !important;
  white-space: nowrap !important;
}

/* Primary cell — bold name/title */
td.td-primary, .td-primary {
  font-weight: 600 !important;
  color: var(--text-main) !important;
}

/* Actions column — right aligned */
td.td-actions, .td-actions {
  text-align: right !important;
  white-space: nowrap !important;
}
th.th-right, td.th-right { text-align: right !important; }
th.th-center, td.th-center { text-align: center !important; }

/* ── Empty state ─────────────────────────────────────────────── */
.td-empty {
  text-align: center !important;
  padding: 40px 20px !important;
  color: var(--text-faint) !important;
  font-size: 13px !important;
}
.td-empty-icon {
  font-size: 28px !important;
  margin-bottom: 8px !important;
  display: block !important;
  opacity: .5 !important;
}
.td-empty-title {
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  font-size: 13px !important;
  display: block !important;
  margin-bottom: 4px !important;
}
.td-empty-sub {
  font-size: 11px !important;
  color: var(--text-faint) !important;
  display: block !important;
}

/* ── Loading skeleton rows ───────────────────────────────────── */
@keyframes tbl-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}
.td-skeleton {
  height: 12px !important;
  border-radius: 3px !important;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.04) 25%,
    rgba(255,255,255,.09) 50%,
    rgba(255,255,255,.04) 75%
  ) !important;
  background-size: 600px 100% !important;
  animation: tbl-shimmer 1.4s ease-in-out infinite !important;
  display: inline-block !important;
  width: 80% !important;
}
.td-skeleton.w-40 { width: 40% !important; }
.td-skeleton.w-60 { width: 60% !important; }
.td-skeleton.w-90 { width: 90% !important; }

/* ── Zebra stripe (optional) ─────────────────────────────────── */
.table-striped tbody tr:nth-child(even) td {
  background: rgba(255,255,255,.012) !important;
}

/* ── Compact variant ─────────────────────────────────────────── */
.table-compact th { padding: 8px 12px !important; }
.table-compact td { padding: 9px 12px !important; font-size: 12px !important; }

/* ── Inline inline table (no wrapper card) ───────────────────── */
.table-borderless {
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}
.table-borderless thead tr {
  background: transparent !important;
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .table-wrapper {
    border-radius: 6px !important;
  }
  th { padding: 10px 12px !important; font-size: 9px !important; }
  td { padding: 11px 12px !important; font-size: 12px !important; }
  table { min-width: 520px !important; }
}

/* ── LIGHT THEME ─────────────────────────────────────────────── */
[data-theme='light'] .table-wrapper {
  background: #FFFFFF !important;
  border-color: #E8ECF0 !important;
}
[data-theme='light'] thead tr {
  background: #F8FAFC !important;
  border-bottom-color: rgba(146,104,12,.12) !important;
}
[data-theme='light'] th {
  color: #94A3B8 !important;
}
[data-theme='light'] th:not(:last-child)::after {
  background: #E8ECF0 !important;
}
[data-theme='light'] tbody tr {
  border-bottom-color: #F1F5F9 !important;
}
[data-theme='light'] tbody tr:hover td {
  background: #FFFBEB !important;
  color: #1E293B !important;
}
[data-theme='light'] td {
  color: #475569 !important;
}
[data-theme='light'] .td-primary { color: #1E293B !important; }
[data-theme='light'] .td-date    { color: #94A3B8 !important; }
[data-theme='light'] .td-skeleton {
  background: linear-gradient(
    90deg,
    #F1F5F9 25%,
    #E2E8F0 50%,
    #F1F5F9 75%
  ) !important;
  background-size: 600px 100% !important;
}
[data-theme='light'] .table-striped tbody tr:nth-child(even) td {
  background: #F8FAFC !important;
}

/* ============================================================
   M2 — TABLE STICKY HEADER + STICKY FIRST COLUMN
   + OVAL TYPE BADGES (transaction type pills)
   ============================================================ */

/* ── Sticky table wrapper ────────────────────────────────────── */
.table-wrapper {
  position: relative !important;
  max-height: 520px !important;
  overflow: auto !important;
  width: 100% !important;
  -webkit-overflow-scrolling: touch !important;
}

/* No max-height on desktop full-page tables */
.table-wrapper.table-full { max-height: none !important; }

/* ── Sticky header ───────────────────────────────────────────── */
.table-wrapper thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  background: #12141E !important;
  box-shadow: 0 1px 0 rgba(212,168,67,.15) !important;
}

/* ── Sticky first column (TXN ID) ────────────────────────────── */
.table-wrapper table th:first-child,
.table-wrapper table td:first-child {
  position: sticky !important;
  left: 0 !important;
  z-index: 5 !important;
  background: #12141E !important;
}
.table-wrapper thead th:first-child {
  z-index: 15 !important; /* above both sticky header and sticky col */
}

/* Right shadow on sticky column to show separation */
.table-wrapper table th:first-child::after,
.table-wrapper table td:first-child::after {
  content: '' !important;
  position: absolute !important;
  top: 0; right: -1px; bottom: 0 !important;
  width: 20px !important;
  background: linear-gradient(to right,
    rgba(18,20,30,0.4), transparent) !important;
  pointer-events: none !important;
  left: auto !important; height: auto !important;
  border-radius: 0 !important; opacity: 1 !important;
  transition: none !important;
}

/* Remove the column divider pseudo from M2 table for sticky col */
.table-wrapper table th:first-child::before {
  display: none !important;
}

/* Hovering rows — sticky cell matches */
tbody tr:hover td:first-child {
  background: rgba(212,168,67,.07) !important;
}

/* Light theme sticky cells */
[data-theme='light'] .table-wrapper thead th,
[data-theme='light'] .table-wrapper table th:first-child,
[data-theme='light'] .table-wrapper table td:first-child {
  background: #F8FAFC !important;
}
[data-theme='light'] tbody tr:hover td:first-child {
  background: #FFFBEB !important;
}
[data-theme='light'] .table-wrapper table td:first-child::after {
  background: linear-gradient(to right,
    rgba(248,250,252,0.5), transparent) !important;
}

/* ── OVAL TYPE BADGES (transaction type) ─────────────────────── */
/* Override sharp rectangle from M2 — keep pill shape for type badges */
.badge {
  border-radius: 20px !important;
  padding: 3px 10px !important;
}

/* Buy — green pill */
.badge-buy {
  background: rgba(52,201,123,.13) !important;
  color: #34C97B !important;
  border: 1px solid rgba(52,201,123,.25) !important;
  border-radius: 20px !important;
}
/* Sell — red pill */
.badge-sell {
  background: rgba(240,82,82,.12) !important;
  color: #F87171 !important;
  border: 1px solid rgba(240,82,82,.25) !important;
  border-radius: 20px !important;
}
/* Gold karats — gold pill */
.badge-24k, .badge-22k, .badge-18k {
  border-radius: 20px !important;
}
.badge-24k {
  background: rgba(212,168,67,.15) !important;
  color: #D4A843 !important;
  border: 1px solid rgba(212,168,67,.3) !important;
}
.badge-22k {
  background: rgba(184,147,46,.13) !important;
  color: #C9A227 !important;
  border: 1px solid rgba(184,147,46,.28) !important;
}
.badge-18k {
  background: rgba(160,120,30,.13) !important;
  color: #B07D1A !important;
  border: 1px solid rgba(160,120,30,.28) !important;
}
/* Gold balls — warm gold pill */
.badge-balls {
  background: rgba(212,168,67,.13) !important;
  color: #D4A843 !important;
  border: 1px solid rgba(212,168,67,.28) !important;
  border-radius: 20px !important;
}
/* Customer refining — green pill */
.badge-ref-c {
  background: rgba(52,201,123,.11) !important;
  color: #34C97B !important;
  border: 1px solid rgba(52,201,123,.22) !important;
  border-radius: 20px !important;
}
/* Shop refining — blue pill */
.badge-ref-s {
  background: rgba(96,165,250,.11) !important;
  color: #60A5FA !important;
  border: 1px solid rgba(96,165,250,.22) !important;
  border-radius: 20px !important;
}

/* Light theme pill badges */
[data-theme='light'] .badge-buy    { background: #ECFDF5 !important; color: #059669 !important; border-color: #6EE7B7 !important; border-radius: 20px !important; }
[data-theme='light'] .badge-sell   { background: #FFF1F2 !important; color: #DC2626 !important; border-color: #FCA5A5 !important; border-radius: 20px !important; }
[data-theme='light'] .badge-24k,
[data-theme='light'] .badge-balls  { background: #FFFBEB !important; color: #92680C !important; border-color: #FDE68A !important; border-radius: 20px !important; }
[data-theme='light'] .badge-ref-c  { background: #ECFDF5 !important; color: #059669 !important; border-color: #A7F3D0 !important; border-radius: 20px !important; }
[data-theme='light'] .badge-ref-s  { background: #EFF6FF !important; color: #2563EB !important; border-color: #BFDBFE !important; border-radius: 20px !important; }

/* ── TXN ID column style ─────────────────────────────────────── */
.td-txn-id {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  letter-spacing: -.2px !important;
  white-space: nowrap !important;
}
[data-theme='light'] .td-txn-id { color: #94A3B8 !important; }

/* Mobile — reduce sticky max-height */
@media (max-width: 768px) {
  .table-wrapper { max-height: 400px !important; }
  .table-wrapper.table-full { max-height: none !important; }
}

/* ============================================================
   M2 — PHASE 6 & 7: LOADING STATES + PAGE HEADERS
   Unified, consistent across every page
   ============================================================ */

/* ============================================================
   PHASE 6 — LOADING & EMPTY STATES
   ============================================================ */

/* ── Page-level loading spinner ──────────────────────────────── */
@keyframes gt-spin {
  to { transform: rotate(360deg); }
}
@keyframes gt-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}
@keyframes gt-shimmer {
  0%   { background-position: -800px 0; }
  100% { background-position: 800px 0; }
}

.gt-spinner {
  width: 28px; height: 28px;
  border: 2.5px solid rgba(212,168,67,.15);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: gt-spin .7s linear infinite;
  display: inline-block;
  flex-shrink: 0;
}
.gt-spinner-sm {
  width: 16px; height: 16px;
  border-width: 2px;
}
.gt-spinner-lg {
  width: 40px; height: 40px;
  border-width: 3px;
}

/* ── Section loading state ───────────────────────────────────── */
.gt-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 20px;
  color: var(--text-faint);
  font-size: 13px;
  font-family: var(--font-main);
}
.gt-loading-label {
  font-size: 12px;
  color: var(--text-faint);
  animation: gt-pulse 1.6s ease-in-out infinite;
}

/* sloading unified */
.sloading {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 32px 20px !important;
  color: var(--text-faint) !important;
  font-size: 12px !important;
  font-family: var(--font-main) !important;
}
.sloading::before {
  content: '' !important;
  width: 16px !important; height: 16px !important;
  border: 2px solid rgba(212,168,67,.15) !important;
  border-top-color: var(--gold) !important;
  border-radius: 50% !important;
  animation: gt-spin .7s linear infinite !important;
  flex-shrink: 0 !important;
}

/* ── Skeleton shimmer ────────────────────────────────────────── */
.gt-skeleton {
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.04) 25%,
    rgba(255,255,255,.09) 50%,
    rgba(255,255,255,.04) 75%
  );
  background-size: 800px 100%;
  animation: gt-shimmer 1.6s ease-in-out infinite;
  display: block;
}
.gt-skeleton-text {
  height: 13px;
  border-radius: 3px;
  margin-bottom: 8px;
}
.gt-skeleton-title {
  height: 20px;
  border-radius: 4px;
  margin-bottom: 10px;
  width: 55%;
}
.gt-skeleton-val {
  height: 32px;
  border-radius: 4px;
  width: 70%;
}
.gt-skeleton-full { width: 100%; }
.gt-skeleton-80   { width: 80%; }
.gt-skeleton-60   { width: 60%; }
.gt-skeleton-40   { width: 40%; }

/* ── Empty state (page level) ────────────────────────────────── */
.gt-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 56px 20px;
  text-align: center;
}
.gt-empty-icon {
  font-size: 36px;
  opacity: .5;
  margin-bottom: 4px;
  display: block;
}
.gt-empty-title {
  font-family: var(--font-main);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-soft);
  display: block;
}
.gt-empty-sub {
  font-size: 12px;
  color: var(--text-faint);
  display: block;
  max-width: 280px;
  line-height: 1.5;
}

/* ── Error state ─────────────────────────────────────────────── */
.gt-error {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: rgba(240,82,82,.08);
  border: 1px solid rgba(240,82,82,.2);
  border-left: 3px solid #F87171;
  border-radius: 6px;
  font-size: 13px;
  color: #F87171;
  font-family: var(--font-main);
  margin: 8px 0;
}
.gt-error-icon { flex-shrink: 0; opacity: .8; }

/* ── Success state ───────────────────────────────────────────── */
.gt-success {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: rgba(52,201,123,.08);
  border: 1px solid rgba(52,201,123,.2);
  border-left: 3px solid #34C97B;
  border-radius: 6px;
  font-size: 13px;
  color: #34C97B;
  font-family: var(--font-main);
  margin: 8px 0;
}

/* Light theme */
[data-theme='light'] .gt-empty-title  { color: #334155; }
[data-theme='light'] .gt-empty-sub    { color: #94A3B8; }
[data-theme='light'] .gt-loading-label { color: #94A3B8; }
[data-theme='light'] .sloading { color: #94A3B8 !important; }
[data-theme='light'] .gt-skeleton {
  background: linear-gradient(
    90deg,
    #F1F5F9 25%, #E2E8F0 50%, #F1F5F9 75%
  );
  background-size: 800px 100%;
}
[data-theme='light'] .gt-error {
  background: #FFF1F2;
  border-color: #FECDD3;
  color: #DC2626;
}
[data-theme='light'] .gt-success {
  background: #ECFDF5;
  border-color: #A7F3D0;
  color: #059669;
}

/* ============================================================
   PHASE 7 — PAGE HEADERS
   One unified header component for every page
   ============================================================ */

/* ── Unified page header ─────────────────────────────────────── */
.page-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-bottom: 24px !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
  position: relative !important;
}

/* Left accent bar */
.page-header::before {
  content: '' !important;
  position: absolute !important;
  left: -20px; top: 2px; bottom: 2px !important;
  width: 3px !important;
  background: linear-gradient(180deg, var(--gold), var(--gold-deep)) !important;
  border-radius: 0 3px 3px 0 !important;
  opacity: .7 !important;
}

/* Title group */
.page-header h1,
.page-header .tx-title,
.page-header .rpt-title {
  font-family: var(--font-main) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--text-main) !important;
  letter-spacing: -.4px !important;
  line-height: 1.2 !important;
  -webkit-text-fill-color: unset !important;
  background: none !important;
  background-clip: unset !important;
  margin: 0 !important;
}

.page-header p,
.page-header .tx-subtitle,
.page-header .rpt-subtitle {
  font-size: 13px !important;
  color: var(--text-muted) !important;
  margin-top: 4px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
}

/* Actions slot (right side buttons) */
.page-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* ── Date badge (dashboard) ──────────────────────────────────── */
.date-badge {
  font-family: var(--font-main) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .3px !important;
  background: rgba(212,168,67,.08) !important;
  border: 1px solid rgba(212,168,67,.2) !important;
  color: var(--gold) !important;
  padding: 4px 12px !important;
  border-radius: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin-top: 8px !important;
}

/* ── Section divider within a page ──────────────────────────── */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 24px 0 14px;
  gap: 10px;
}
.section-title {
  font-family: var(--font-main);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-faint);
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-title::after {
  content: '';
  display: block;
  height: 1px;
  width: 40px;
  background: rgba(255,255,255,.07);
  border-radius: 1px;
}
.section-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Mobile page header ──────────────────────────────────────── */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column !important;
    gap: 10px !important;
    padding-bottom: 16px !important;
    margin-bottom: 18px !important;
  }
  .page-header::before { display: none !important; }
  .page-header h1,
  .page-header .tx-title,
  .page-header .rpt-title {
    font-size: 20px !important;
  }
  .page-header-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .date-badge { margin-top: 4px !important; }
}

/* ── Light theme ─────────────────────────────────────────────── */
[data-theme='light'] .page-header {
  border-bottom-color: #F1F5F9 !important;
}
[data-theme='light'] .page-header h1,
[data-theme='light'] .page-header .tx-title,
[data-theme='light'] .page-header .rpt-title {
  color: #0F172A !important;
}
[data-theme='light'] .page-header p,
[data-theme='light'] .page-header .tx-subtitle,
[data-theme='light'] .page-header .rpt-subtitle {
  color: #64748B !important;
}
[data-theme='light'] .page-header::before {
  background: linear-gradient(180deg, #92680C, #C49A1A) !important;
}
[data-theme='light'] .date-badge {
  background: #FFFBEB !important;
  border-color: #FDE68A !important;
  color: #92680C !important;
}
[data-theme='light'] .section-title { color: #94A3B8; }
[data-theme='light'] .section-title::after { background: #E2E8F0; }

/* ============================================================
   M3 — GROUP A PAGE POLISH
   Dashboard · Transactions · Wallet · Profit
   ============================================================ */

/* ══════════════════════════════════════════════════════════════
   DASHBOARD
   ══════════════════════════════════════════════════════════════ */

/* ── Branch filter bar ───────────────────────────────────────── */
#adminBranchFilter {
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 20px !important;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
#adminBranchFilter span {
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: var(--text-faint) !important;
  white-space: nowrap;
}

/* ── KPI stat cards ──────────────────────────────────────────── */
.bstat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
@media (max-width: 768px) {
  .bstat-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
}

.bstat-card {
  background: var(--black-2) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 8px !important;
  padding: 16px !important;
  position: relative;
  overflow: hidden;
  transition: border-color .18s, box-shadow .18s, transform .18s !important;
}
.bstat-card:hover {
  border-color: rgba(212,168,67,.2) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,.4) !important;
  transform: translateY(-1px) !important;
}

/* Left accent bar on hover */
.bstat-card::after {
  content: '' !important;
  position: absolute !important;
  left: 0; top: 0; bottom: 0 !important;
  width: 3px !important;
  background: linear-gradient(180deg, var(--gold), var(--gold-deep)) !important;
  opacity: 0 !important;
  transition: opacity .18s !important;
  border-radius: 8px 0 0 8px !important;
  height: auto !important; width: 3px !important;
  right: auto !important;
}
.bstat-card:hover::after { opacity: 1 !important; }

/* Remove old ::before shimmer */
.bstat-card::before { display: none !important; }

.bstat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.bstat-icon-wrap {
  width: 32px !important;
  height: 32px !important;
  border-radius: 6px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bstat-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .9px !important;
  color: var(--text-faint) !important;
  line-height: 1.3 !important;
}

.bstat-val {
  font-family: var(--font-main) !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  color: var(--text-main) !important;
  letter-spacing: -.5px !important;
  line-height: 1.1 !important;
  margin-bottom: 4px !important;
}
.bstat-val-sm { font-size: 18px !important; letter-spacing: -.3px !important; }

.bstat-sub {
  font-size: 11px !important;
  color: var(--text-faint) !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}
.bstat-sub.up { color: #34C97B !important; }

/* ── Gold Status Panel ───────────────────────────────────────── */
.gs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 4px 0;
}
@media (max-width: 768px) {
  .gs-grid { grid-template-columns: 1fr 1fr !important; }
}

.gs-item {
  border-radius: 6px;
  padding: 14px;
  position: relative;
  overflow: hidden;
}
.gs-item-unrefined {
  background: rgba(240,82,82,.07);
  border: 1px solid rgba(240,82,82,.18);
}
.gs-item-partial {
  background: rgba(212,168,67,.07);
  border: 1px solid rgba(212,168,67,.18);
}
.gs-item-refined {
  background: rgba(52,201,123,.07);
  border: 1px solid rgba(52,201,123,.18);
}
.gs-item-available {
  background: rgba(212,168,67,.07);
  border: 1px solid rgba(212,168,67,.22);
}
.gs-item-label {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .9px;
  color: var(--text-faint);
  margin-bottom: 8px;
}
.gs-item-val {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 4px;
  font-family: var(--font-main);
}
.gs-item-unrefined .gs-item-val { color: #F87171; }
.gs-item-partial   .gs-item-val { color: var(--gold); }
.gs-item-refined   .gs-item-val { color: #34C97B; }
.gs-item-available .gs-item-val { color: var(--gold); }
.gs-item-sub {
  font-size: 10px;
  color: var(--text-faint);
}

/* ── Chart section ───────────────────────────────────────────── */
.chart-section {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
@media (max-width: 900px) {
  .chart-section { grid-template-columns: 1fr !important; }
}
.chart-container {
  position: relative;
  height: 200px;
}

/* Purity bars */
.purity-item { margin-bottom: 12px; }
.purity-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
.purity-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft);
}
.purity-pct {
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  font-family: 'JetBrains Mono', monospace;
}
.purity-bar-bg {
  height: 4px;
  background: rgba(255,255,255,.06);
  border-radius: 2px;
  overflow: hidden;
}
.purity-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
  border-radius: 2px;
  transition: width .6s cubic-bezier(.4,0,.2,1);
}

/* ══════════════════════════════════════════════════════════════
   WALLET PAGE
   ══════════════════════════════════════════════════════════════ */

/* ── Staff balance card ──────────────────────────────────────── */
.wlt-balance-card {
  background: linear-gradient(135deg,
    rgba(212,168,67,.1) 0%,
    rgba(212,168,67,.04) 60%,
    var(--black-2) 100%) !important;
  border: 1px solid rgba(212,168,67,.2) !important;
  border-radius: 8px !important;
  padding: 24px !important;
  margin-bottom: 20px !important;
  position: relative;
  overflow: hidden;
}
.wlt-balance-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-deep));
}
.wlt-balance-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}
.wlt-balance-label {
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: var(--text-faint) !important;
  margin-bottom: 6px !important;
}
.wlt-balance-val {
  font-family: var(--font-main) !important;
  font-size: 36px !important;
  font-weight: 800 !important;
  color: var(--text-main) !important;
  letter-spacing: -.8px !important;
  line-height: 1.1 !important;
}
.wlt-balance-icon {
  width: 48px; height: 48px;
  border-radius: 8px;
  background: rgba(212,168,67,.12);
  border: 1px solid rgba(212,168,67,.22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  flex-shrink: 0;
}
.wlt-balance-meta {
  display: flex;
  gap: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.06);
  flex-wrap: wrap;
}
.wlt-meta-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .7px !important;
  color: var(--text-faint) !important;
  margin-bottom: 4px !important;
}
.wlt-meta-val {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--text-soft) !important;
  letter-spacing: -.2px !important;
}

/* Status variants */
.wlt-balance-card.wlt-card-low {
  background: linear-gradient(135deg,
    rgba(245,158,11,.1) 0%, var(--black-2) 70%) !important;
  border-color: rgba(245,158,11,.35) !important;
}
.wlt-balance-card.wlt-card-low::before {
  background: linear-gradient(90deg, #D97706, #FBBF24, #D97706) !important;
}
.wlt-balance-card.wlt-card-debt {
  background: linear-gradient(135deg,
    rgba(240,82,82,.1) 0%, var(--black-2) 70%) !important;
  border-color: rgba(240,82,82,.35) !important;
}
.wlt-balance-card.wlt-card-debt::before {
  background: linear-gradient(90deg, #DC2626, #F87171, #DC2626) !important;
}
.wlt-balance-card.wlt-card-critical {
  border-color: #dc2626 !important;
  background: linear-gradient(135deg,
    rgba(220,38,38,.14) 0%, var(--black-2) 70%) !important;
}

/* ── Branch wallet cards (admin) ─────────────────────────────── */
.wlt-branch-card {
  background: var(--black-2) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 8px !important;
  padding: 18px !important;
  transition: border-color .18s, box-shadow .18s !important;
  position: relative;
  overflow: hidden;
}
.wlt-branch-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
  opacity: .4;
}
.wlt-branch-card:hover {
  border-color: rgba(212,168,67,.2) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,.35) !important;
}
.wlt-bc-debt   .wlt-branch-card::before { background: linear-gradient(90deg, #DC2626, #F87171) !important; opacity: .7 !important; }
.wlt-bc-low    .wlt-branch-card::before { background: linear-gradient(90deg, #D97706, #FBBF24) !important; opacity: .7 !important; }

/* ══════════════════════════════════════════════════════════════
   PROFIT PAGE
   ══════════════════════════════════════════════════════════════ */

.prf-cards-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.prf-cards-5 { grid-template-columns: repeat(5, 1fr) !important; }

@media (max-width: 900px) {
  .prf-cards-row { grid-template-columns: 1fr 1fr !important; }
  .prf-cards-5   { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 480px) {
  .prf-cards-row { grid-template-columns: 1fr !important; }
}

.prf-card {
  background: var(--black-2) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 8px !important;
  padding: 18px 16px !important;
  position: relative;
  overflow: hidden;
  transition: border-color .18s, box-shadow .18s !important;
}
.prf-card:hover {
  border-color: rgba(212,168,67,.18) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.3) !important;
}
.prf-card-highlight {
  border-color: rgba(212,168,67,.28) !important;
  border-left: 3px solid var(--gold) !important;
  background: rgba(212,168,67,.05) !important;
}
.prf-card-label {
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .9px !important;
  color: var(--text-faint) !important;
  margin-bottom: 10px !important;
}
.prf-card-val {
  font-family: var(--font-main) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--text-main) !important;
  letter-spacing: -.4px !important;
  margin-bottom: 6px !important;
  line-height: 1.1 !important;
}
.prf-val-neg { color: #F87171 !important; }
.prf-card-sub {
  font-size: 11px !important;
  color: var(--text-faint) !important;
  line-height: 1.4 !important;
}

/* Inventory inline stats */
.prf-inv-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .7px !important;
  color: var(--text-faint) !important;
  margin-bottom: 4px !important;
}
.prf-inv-val {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--text-soft) !important;
  letter-spacing: -.2px !important;
}

/* Inventory row footer */
.prf-inv-footer {
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,.05);
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  background: rgba(255,255,255,.015);
  border-radius: 0 0 8px 8px;
  margin: 0 -20px -20px;
}
.prf-inv-footer-item span:first-child {
  font-size: 10px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: .5px;
  display: block;
  margin-bottom: 2px;
}
.prf-inv-footer-item strong {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-soft);
}

/* ══════════════════════════════════════════════════════════════
   LIGHT THEME — Group A
   ══════════════════════════════════════════════════════════════ */

[data-theme='light'] #adminBranchFilter {
  background: #F8FAFC;
  border-color: #E2E8F0;
}
[data-theme='light'] .bstat-card {
  background: #FFFFFF !important;
  border-color: #E8ECF0 !important;
}
[data-theme='light'] .bstat-card:hover {
  border-color: #92680C !important;
}
[data-theme='light'] .bstat-val { color: #0F172A !important; }
[data-theme='light'] .bstat-sub { color: #94A3B8 !important; }
[data-theme='light'] .bstat-sub.up { color: #059669 !important; }
[data-theme='light'] .gs-item-unrefined { background: #FFF1F2; border-color: #FECDD3; }
[data-theme='light'] .gs-item-partial   { background: #FFFBEB; border-color: #FDE68A; }
[data-theme='light'] .gs-item-refined   { background: #ECFDF5; border-color: #A7F3D0; }
[data-theme='light'] .gs-item-available { background: #FFFBEB; border-color: #FDE68A; }
[data-theme='light'] .wlt-balance-card {
  background: linear-gradient(135deg, #FFFBEB 0%, #FFFFFF 70%) !important;
  border-color: #FDE68A !important;
}
[data-theme='light'] .wlt-balance-val { color: #0F172A !important; }
[data-theme='light'] .wlt-balance-icon {
  background: #FFFBEB;
  border-color: #FDE68A;
  color: #92680C;
}
[data-theme='light'] .wlt-balance-meta { border-top-color: #F1F5F9; }
[data-theme='light'] .wlt-meta-val { color: #334155 !important; }
[data-theme='light'] .wlt-branch-card {
  background: #FFFFFF !important;
  border-color: #E8ECF0 !important;
}
[data-theme='light'] .prf-card {
  background: #FFFFFF !important;
  border-color: #E8ECF0 !important;
}
[data-theme='light'] .prf-card-highlight {
  background: #FFFBEB !important;
  border-color: #FDE68A !important;
  border-left-color: #92680C !important;
}
[data-theme='light'] .prf-card-val { color: #0F172A !important; }
[data-theme='light'] .prf-inv-val  { color: #334155 !important; }
[data-theme='light'] .purity-bar-bg { background: #F1F5F9; }
[data-theme='light'] .purity-label  { color: #334155; }

/* ============================================================
   M3 — GROUP B PAGE POLISH
   Admin Dashboard · Expenses · Reports
   ============================================================ */

/* ══════════════════════════════════════════════════════════════
   ADMIN DASHBOARD
   ══════════════════════════════════════════════════════════════ */

/* ── Top bar ─────────────────────────────────────────────────── */
.adm-topbar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 20px !important;
  padding: 14px 18px !important;
  background: rgba(255,255,255,.025) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 8px !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}
.adm-topbar-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}
.adm-topbar-title {
  font-family: var(--font-main) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--text-main) !important;
  letter-spacing: -.2px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.adm-topbar-sub {
  font-size: 11px !important;
  color: var(--text-faint) !important;
  font-weight: 500 !important;
}
.adm-date-pill {
  font-family: var(--font-main) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--gold) !important;
  background: rgba(212,168,67,.08) !important;
  border: 1px solid rgba(212,168,67,.2) !important;
  border-radius: 4px !important;
  padding: 4px 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.adm-refresh-btn {
  font-family: var(--font-main) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 6px !important;
  padding: 8px 14px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all .15s !important;
  letter-spacing: .2px !important;
  text-transform: uppercase !important;
}
.adm-refresh-btn:hover {
  background: rgba(255,255,255,.08) !important;
  color: var(--text-soft) !important;
  border-color: rgba(255,255,255,.16) !important;
}

/* ── Branch filter ───────────────────────────────────────────── */
.adm-branch-filter {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  padding: 10px 14px !important;
  background: rgba(255,255,255,.02) !important;
  border: 1px solid rgba(255,255,255,.05) !important;
  border-radius: 8px !important;
  margin-bottom: 20px !important;
}
.adm-filter-label {
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: var(--text-faint) !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
}
.adm-filter-pills {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

/* ── KPI cards ───────────────────────────────────────────────── */
.adm-kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 10px !important;
  margin-bottom: 20px !important;
}
@media (max-width: 1100px) {
  .adm-kpi-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 768px) {
  .adm-kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
}

.adm-kpi-card {
  background: var(--black-2) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 8px !important;
  padding: 14px 14px 12px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: border-color .18s, box-shadow .18s, transform .18s !important;
}
.adm-kpi-card:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,.4) !important;
}

/* Colored bottom border per card type */
.adm-kpi-card::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0; left: 0; right: 0 !important;
  height: 2px !important;
  border-radius: 0 !important;
  top: auto !important; width: auto !important;
  transform: none !important; opacity: .7 !important;
}
.adm-kpi-blue::after   { background: #60A5FA !important; }
.adm-kpi-gold::after   { background: var(--gold) !important; }
.adm-kpi-purple::after { background: #A78BFA !important; }
.adm-kpi-amber::after  { background: #FBBF24 !important; }
.adm-kpi-green::after  { background: #34C97B !important; }
.adm-kpi-red::after    { background: #F87171 !important; }
.adm-kpi-card::before  { display: none !important; }

.adm-kpi-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  margin-bottom: 10px !important;
}
.adm-kpi-label {
  font-size: 9px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: var(--text-faint) !important;
  line-height: 1.3 !important;
}
.adm-kpi-icon {
  width: 28px !important; height: 28px !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.adm-kpi-val {
  font-family: var(--font-main) !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -.4px !important;
  line-height: 1.1 !important;
  margin-bottom: 4px !important;
}
.adm-kpi-val-sm { font-size: 16px !important; letter-spacing: -.3px !important; }
.adm-kpi-blue   .adm-kpi-val { color: #60A5FA !important; }
.adm-kpi-gold   .adm-kpi-val { color: var(--gold) !important; }
.adm-kpi-purple .adm-kpi-val { color: #A78BFA !important; }
.adm-kpi-amber  .adm-kpi-val { color: #FBBF24 !important; }
.adm-kpi-green  .adm-kpi-val { color: #34C97B !important; }
.adm-kpi-red    .adm-kpi-val { color: #F87171 !important; }
.adm-kpi-sub {
  font-size: 10px !important;
  color: var(--text-faint) !important;
  font-weight: 500 !important;
}

/* ── Alerts list items ───────────────────────────────────────── */
.adm-alert-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background .12s;
}
.adm-alert-item:last-child { border-bottom: none; }
.adm-alert-item:hover { background: rgba(255,255,255,.02); }
.adm-alert-dot {
  width: 8px !important; height: 8px !important;
  border-radius: 2px !important;
  flex-shrink: 0 !important;
  margin-top: 4px !important;
}
.adm-alert-critical { background: #F87171 !important; }
.adm-alert-warning  { background: #FBBF24 !important; }
.adm-alert-info     { background: #60A5FA !important; }
.adm-alert-text { font-size: 13px; color: var(--text-soft); line-height: 1.4; }
.adm-alert-meta { font-size: 11px; color: var(--text-faint); margin-top: 2px; }

/* ── Refining insights grid ──────────────────────────────────── */
.adm-insights-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
/* Grid children must have min-width:0 so overflow:auto works inside them */
.adm-insights-grid > .card {
  min-width: 0;
  overflow: hidden;
}
.adm-insights-grid .table-wrapper {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
@media (max-width: 900px) {
  .adm-insights-grid { grid-template-columns: 1fr !important; }
}

/* ── Profit footer row ───────────────────────────────────────── */
.adm-profit-footer {
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,.05);
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  background: rgba(255,255,255,.015);
  border-radius: 0 0 8px 8px;
  font-size: 12px;
  color: var(--text-muted);
}
.adm-profit-footer strong { font-weight: 700; }

/* ══════════════════════════════════════════════════════════════
   EXPENSES PAGE
   ══════════════════════════════════════════════════════════════ */

/* ── Pending approval banner ─────────────────────────────────── */
#exp-pending-banner {
  background: rgba(245,158,11,.08) !important;
  border: 1px solid rgba(245,158,11,.25) !important;
  border-left: 3px solid #FBBF24 !important;
  border-radius: 8px !important;
  padding: 14px 18px !important;
  margin-bottom: 16px !important;
}

/* ── Summary cards ───────────────────────────────────────────── */
.exp-summary-row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
}
@media (max-width: 768px) {
  .exp-summary-row { grid-template-columns: 1fr 1fr !important; }
}

.exp-sum-card {
  background: var(--black-2) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 8px !important;
  padding: 16px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: border-color .18s, box-shadow .18s !important;
}
.exp-sum-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.3) !important;
}
/* Color-coded left stripe */
.exp-sum-card:first-child  { border-left: 3px solid var(--gold) !important; }
.exp-sum-card:nth-child(2) { border-left: 3px solid #34C97B !important; }
.exp-sum-card:last-child   { border-left: 3px solid #FBBF24 !important; }

.exp-sum-label {
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .9px !important;
  color: var(--text-faint) !important;
  margin-bottom: 8px !important;
}
.exp-sum-val {
  font-family: var(--font-main) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--text-main) !important;
  letter-spacing: -.4px !important;
  line-height: 1.1 !important;
}

/* ══════════════════════════════════════════════════════════════
   REPORTS PAGE
   ══════════════════════════════════════════════════════════════ */

/* ── Report header ───────────────────────────────────────────── */
.rpt-page-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  margin-bottom: 24px !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
}
.rpt-title {
  font-family: var(--font-main) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--text-main) !important;
  letter-spacing: -.4px !important;
  margin-bottom: 3px !important;
}
.rpt-subtitle {
  font-size: 13px !important;
  color: var(--text-muted) !important;
  font-weight: 400 !important;
}

/* ── Report cards grid ───────────────────────────────────────── */
.rpt-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 14px !important;
  margin-bottom: 28px !important;
}
@media (max-width: 1100px) {
  .rpt-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 768px) {
  .rpt-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
}

.rpt-card {
  background: var(--black-2) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 8px !important;
  padding: 20px 18px !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  transition: border-color .18s, box-shadow .18s, transform .15s !important;
  position: relative !important;
  overflow: hidden !important;
}
.rpt-card:hover {
  border-color: rgba(212,168,67,.25) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.45) !important;
  transform: translateY(-2px) !important;
}
.rpt-card:active { transform: translateY(0) !important; }

/* Left gold accent on hover */
.rpt-card::before {
  content: '' !important;
  position: absolute !important;
  left: 0; top: 0; bottom: 0 !important;
  width: 3px !important;
  background: linear-gradient(180deg, var(--gold), var(--gold-deep)) !important;
  opacity: 0 !important;
  transition: opacity .18s !important;
  border-radius: 8px 0 0 8px !important;
}
.rpt-card:hover::before { opacity: 1 !important; }

/* Export card — dashed border */
.rpt-card-export {
  border-style: dashed !important;
  border-color: rgba(255,255,255,.1) !important;
}
.rpt-card-export:hover { border-style: solid !important; }

/* ── Report card icon ────────────────────────────────────────── */
.rpt-card-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 14px !important;
  flex-shrink: 0 !important;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1) !important;
}
.rpt-card:hover .rpt-card-icon { transform: scale(1.08) !important; }

/* Icon color variants — soft transparent */
.rpt-icon-gold   { background: rgba(212,168,67,.15); border: 1px solid rgba(212,168,67,.25); color: #D4A843; }
.rpt-icon-blue   { background: rgba(96,165,250,.12); border: 1px solid rgba(96,165,250,.22); color: #60A5FA; }
.rpt-icon-amber  { background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.22); color: #FBBF24; }
.rpt-icon-green  { background: rgba(52,201,123,.12); border: 1px solid rgba(52,201,123,.22); color: #34C97B; }
.rpt-icon-purple { background: rgba(167,139,250,.12);border: 1px solid rgba(167,139,250,.22);color: #A78BFA; }
.rpt-icon-red    { background: rgba(240,82,82,.12);  border: 1px solid rgba(240,82,82,.22);  color: #F87171; }
.rpt-icon-indigo { background: rgba(99,102,241,.12); border: 1px solid rgba(99,102,241,.22); color: #818CF8; }
.rpt-icon-slate  { background: rgba(148,163,184,.1); border: 1px solid rgba(148,163,184,.18);color: #94A3B8; }

.rpt-card-icon-divider { display: none !important; }

.rpt-card-title {
  font-family: var(--font-main) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text-main) !important;
  margin-bottom: 6px !important;
  letter-spacing: -.1px !important;
}
.rpt-card-desc {
  font-size: 12px !important;
  color: var(--text-muted) !important;
  line-height: 1.5 !important;
  flex: 1 !important;
}
.rpt-card-footer {
  margin-top: 14px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(255,255,255,.05) !important;
}

/* ── Report detail panel ─────────────────────────────────────── */
.rpt-summary-row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1px !important;
  background: rgba(255,255,255,.05) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  margin-bottom: 20px !important;
}
.rpt-sum-cell {
  background: var(--black-2) !important;
  padding: 16px !important;
}
.rpt-sum-label {
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .9px !important;
  color: var(--text-faint) !important;
  margin-bottom: 6px !important;
}
.rpt-sum-val {
  font-family: var(--font-main) !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--text-main) !important;
  letter-spacing: -.4px !important;
}

/* ── Report tabs ─────────────────────────────────────────────── */
.rpt-tab-bar {
  display: flex !important;
  gap: 2px !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 6px !important;
  padding: 3px !important;
}
.rpt-tab {
  font-family: var(--font-main) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 5px 12px !important;
  border-radius: 4px !important;
  border: none !important;
  background: transparent !important;
  color: var(--text-muted) !important;
  cursor: pointer !important;
  transition: all .15s !important;
  letter-spacing: .2px !important;
  text-transform: uppercase !important;
}
.rpt-tab:hover  { color: var(--text-soft) !important; background: rgba(255,255,255,.04) !important; }
.rpt-tab.active {
  background: rgba(212,168,67,.15) !important;
  color: var(--gold) !important;
  box-shadow: none !important;
}

/* ══════════════════════════════════════════════════════════════
   LIGHT THEME — Group B
   ══════════════════════════════════════════════════════════════ */

[data-theme='light'] .adm-topbar {
  background: #F8FAFC;
  border-color: #E2E8F0;
}
[data-theme='light'] .adm-topbar-title { color: #0F172A; }
[data-theme='light'] .adm-date-pill { background: #FFFBEB; border-color: #FDE68A; color: #92680C; }
[data-theme='light'] .adm-refresh-btn { background: #F8FAFC; border-color: #E2E8F0; color: #64748B; }
[data-theme='light'] .adm-refresh-btn:hover { background: #F1F5F9; color: #334155; }
[data-theme='light'] .adm-branch-filter { background: #F8FAFC; border-color: #E2E8F0; }
[data-theme='light'] .adm-kpi-card { background: #FFFFFF; border-color: #E8ECF0; }
[data-theme='light'] #exp-pending-banner { background: #FFFBEB; border-color: #FDE68A; border-left-color: #D97706; }
[data-theme='light'] .exp-sum-card { background: #FFFFFF; border-color: #E8ECF0; }
[data-theme='light'] .exp-sum-val { color: #0F172A; }
[data-theme='light'] .rpt-page-header { border-bottom-color: #F1F5F9; }
[data-theme='light'] .rpt-title { color: #0F172A; }
[data-theme='light'] .rpt-subtitle { color: #64748B; }
[data-theme='light'] .rpt-card { background: #FFFFFF; border-color: #E8ECF0; }
[data-theme='light'] .rpt-card:hover { border-color: #92680C; }
[data-theme='light'] .rpt-card-title { color: #0F172A; }
[data-theme='light'] .rpt-card-desc  { color: #64748B; }
[data-theme='light'] .rpt-card-footer { border-top-color: #F1F5F9; }
[data-theme='light'] .rpt-summary-row { background: #E2E8F0; }
[data-theme='light'] .rpt-sum-cell { background: #FFFFFF; }
[data-theme='light'] .rpt-sum-val { color: #0F172A; }
[data-theme='light'] .rpt-tab-bar { background: #F8FAFC; border-color: #E2E8F0; }
[data-theme='light'] .rpt-tab { color: #64748B; }
[data-theme='light'] .rpt-tab.active { background: #FFFBEB; color: #92680C; }
[data-theme='light'] .adm-alert-item:hover { background: #F8FAFC; }

/* ============================================================
   M3 — GROUP C PAGE POLISH
   Alerts · Customers · Settings
   ============================================================ */

/* ══════════════════════════════════════════════════════════════
   ALERTS PAGE
   ══════════════════════════════════════════════════════════════ */

/* ── Alert card ──────────────────────────────────────────────── */
.alert-card {
  border-radius: 8px !important;
  padding: 18px 20px !important;
  margin-bottom: 12px !important;
  position: relative;
  overflow: hidden;
  transition: box-shadow .18s !important;
}
.alert-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,.35) !important;
}
/* Left accent bar per severity */
.alert-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: 8px 0 0 8px;
}
.alert-card-critical {
  background: rgba(220,38,38,.06) !important;
  border: 1px solid rgba(220,38,38,.25) !important;
}
.alert-card-critical::before { background: #DC2626; }

.alert-card-warning {
  background: rgba(245,158,11,.05) !important;
  border: 1px solid rgba(245,158,11,.22) !important;
}
.alert-card-warning::before { background: #FBBF24; }

.alert-card-info {
  background: rgba(96,165,250,.04) !important;
  border: 1px solid rgba(96,165,250,.2) !important;
}
.alert-card-info::before { background: #60A5FA; }

.alert-card-success {
  background: rgba(52,201,123,.04) !important;
  border: 1px solid rgba(52,201,123,.2) !important;
}
.alert-card-success::before { background: #34C97B; }

/* Alert header row */
.alert-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.alert-card-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.alert-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
}
.alert-level-badge {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .6px;
}
.alert-level-critical { background: rgba(220,38,38,.15); color: #F87171; border: 1px solid rgba(220,38,38,.25); }
.alert-level-warning  { background: rgba(245,158,11,.12); color: #FBBF24; border: 1px solid rgba(245,158,11,.22); }
.alert-level-info     { background: rgba(96,165,250,.1);  color: #60A5FA; border: 1px solid rgba(96,165,250,.2); }
.alert-level-success  { background: rgba(52,201,123,.1);  color: #34C97B; border: 1px solid rgba(52,201,123,.2); }

.alert-card-count {
  font-family: var(--font-main);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
}
.alert-card-msg {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 10px;
}

/* Detail list inside alert card */
.alert-detail-list {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 6px;
  overflow: hidden;
  margin-top: 10px;
}
.alert-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-soft);
  border-bottom: 1px solid rgba(255,255,255,.04);
  gap: 12px;
}
.alert-detail-row:last-child { border-bottom: none; }

/* Empty / all-clear state */
.alert-all-clear {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 72px 20px;
  text-align: center;
  gap: 10px;
}
.alert-all-clear-icon { font-size: 52px; margin-bottom: 4px; }
.alert-all-clear-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
}
.alert-all-clear-sub {
  font-size: 13px;
  color: var(--text-muted);
  max-width: 280px;
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════
   CUSTOMERS PAGE
   ══════════════════════════════════════════════════════════════ */

.cust-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 20px !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

/* ── Search bar ──────────────────────────────────────────────── */
.search-bar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 6px !important;
  padding: 9px 13px !important;
  width: 280px !important;
  transition: border-color .18s, box-shadow .18s !important;
}
.search-bar:focus-within {
  border-color: rgba(212,168,67,.5) !important;
  box-shadow: -3px 0 0 0 var(--gold) !important;
}
.search-bar input {
  background: none !important;
  border: none !important;
  outline: none !important;
  font-size: 13px !important;
  color: var(--text-main) !important;
  font-family: var(--font-main) !important;
  flex: 1 !important;
  min-width: 0 !important;
}
.search-bar input::placeholder { color: var(--text-faint) !important; }
.search-icon-sm {
  font-size: 14px !important;
  color: var(--text-faint) !important;
  flex-shrink: 0 !important;
}
@media (max-width: 768px) {
  .search-bar { width: 100% !important; }
  .cust-header { flex-direction: column !important; align-items: stretch !important; }
  .cust-header .btn-primary { width: 100% !important; justify-content: center !important; }
}

/* ══════════════════════════════════════════════════════════════
   SETTINGS PAGE
   ══════════════════════════════════════════════════════════════ */

.settings-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  max-width: 860px !important;
}
@media (max-width: 768px) {
  .settings-grid { grid-template-columns: 1fr !important; }
}

/* ── Form groups ─────────────────────────────────────────────── */
.form-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.form-group.full { grid-column: 1 / -1 !important; }

.form-label {
  font-family: var(--font-main) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .7px !important;
  color: var(--text-muted) !important;
}
.form-hint {
  font-size: 11px !important;
  color: var(--text-faint) !important;
  line-height: 1.4 !important;
  margin-top: 2px !important;
}

.settings-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

/* ── Current account info box ────────────────────────────────── */
.settings-account-info {
  background: rgba(212,168,67,.06) !important;
  border: 1px solid rgba(212,168,67,.18) !important;
  border-left: 3px solid var(--gold) !important;
  border-radius: 6px !important;
  padding: 12px 14px !important;
  margin-bottom: 16px !important;
}
.settings-account-info-label {
  font-size: 9px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: var(--text-faint) !important;
  margin-bottom: 8px !important;
}
.settings-account-info-row {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text-soft) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 3px !important;
}

/* ── Preference rows ─────────────────────────────────────────── */
.settings-prefs {
  display: flex !important;
  flex-direction: column !important;
}
.pref-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
  gap: 12px !important;
}
.pref-row:last-of-type { border-bottom: none !important; }
.pref-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text-soft) !important;
}
.pref-sub {
  font-size: 11px !important;
  color: var(--text-faint) !important;
  margin-top: 2px !important;
  line-height: 1.3 !important;
}

/* ── Sign out button in settings ─────────────────────────────── */
.settings-signout-row {
  margin-top: 16px !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(255,255,255,.05) !important;
}

/* ══════════════════════════════════════════════════════════════
   LIGHT THEME — Group C
   ══════════════════════════════════════════════════════════════ */

[data-theme='light'] .alert-card-critical { background: #FFF1F2 !important; border-color: #FECDD3 !important; }
[data-theme='light'] .alert-card-warning  { background: #FFFBEB !important; border-color: #FDE68A !important; }
[data-theme='light'] .alert-card-info     { background: #EFF6FF !important; border-color: #BFDBFE !important; }
[data-theme='light'] .alert-card-success  { background: #ECFDF5 !important; border-color: #A7F3D0 !important; }
[data-theme='light'] .alert-detail-list   { background: rgba(0,0,0,.02); border-color: #F1F5F9; }
[data-theme='light'] .alert-detail-row    { color: #475569; border-bottom-color: #F1F5F9; }
[data-theme='light'] .alert-card-title    { color: #0F172A; }
[data-theme='light'] .alert-card-msg      { color: #64748B; }

[data-theme='light'] .search-bar {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
}
[data-theme='light'] .search-bar:focus-within {
  border-color: #92680C !important;
  box-shadow: -3px 0 0 0 #92680C !important;
}
[data-theme='light'] .search-bar input { color: #0F172A !important; }
[data-theme='light'] .search-bar input::placeholder { color: #CBD5E1 !important; }

[data-theme='light'] .settings-account-info {
  background: #FFFBEB !important;
  border-color: #FDE68A !important;
  border-left-color: #92680C !important;
}
[data-theme='light'] .pref-row { border-bottom-color: #F1F5F9 !important; }
[data-theme='light'] .pref-title { color: #1E293B !important; }
[data-theme='light'] .pref-sub   { color: #94A3B8 !important; }
[data-theme='light'] .settings-signout-row { border-top-color: #F1F5F9 !important; }
[data-theme='light'] .form-label { color: #64748B !important; }

/* ============================================================
   NAV TOOLTIPS + LOGOUT DIALOG ANIMATIONS
   ============================================================ */

/* ── Nav button tooltips ─────────────────────────────────────── */
.nav-tooltip {
  position: relative;
}
.nav-tooltip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) scale(.9);
  background: rgba(15,20,30,.95);
  color: #E2E8F0;
  font-family: var(--font-main);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2px;
  padding: 5px 10px;
  border-radius: 5px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s, transform .15s;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
  z-index: 500;
}
.nav-tooltip::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: rgba(15,20,30,.95);
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  z-index: 500;
}
.nav-tooltip:hover::after,
.nav-tooltip:hover::before {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* ── Dialog animations ───────────────────────────────────────── */
@keyframes gt-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes gt-slide-up {
  from { transform: translateY(20px) scale(.96); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* Light theme tooltips */
[data-theme='light'] .nav-tooltip::after {
  background: rgba(15,23,42,.92);
  border-color: rgba(0,0,0,.15);
  color: #F1F5F9;
}
[data-theme='light'] .nav-tooltip::before {
  border-top-color: rgba(15,23,42,.92);
}

/* ============================================================
   SETTINGS MODAL — MOBILE REDESIGN (clean, no conflicts)
   ============================================================ */

@media (max-width: 768px) {

  /* Full-screen bottom sheet */
  .smodal-backdrop {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  .smodal {
    width: 100% !important;
    max-width: 100% !important;
    height: 92vh !important;
    max-height: 92vh !important;
    border-radius: 20px 20px 0 0 !important;
    border-bottom: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  /* Header */
  .smodal-header { padding: 14px 16px 12px !important; flex-shrink: 0 !important; }
  .smodal-search-wrap { display: none !important; }

  /* Body stacks: tabs top, panel below */
  .smodal-body {
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /* ── Horizontal scrollable tab strip ─────────────── */
  .smodal-nav {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: auto !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    background: rgba(0,0,0,.15) !important;
    padding: 6px 10px !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
    align-items: center !important;
  }
  .smodal-nav::-webkit-scrollbar { display: none !important; }

  /* Tab pill: icon stacked above text */
  .smodal-nav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 7px 12px !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    min-width: 54px !important;
    width: auto !important;
    cursor: pointer !important;
    border-left: none !important;
    transition: background .15s !important;
  }

  /* Show BOTH icon and label */
  .smodal-nav-item span { display: block !important; }
  .snav-icon  { font-size: 18px !important; line-height: 1 !important; }
  .snav-label {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: var(--text-faint) !important;
    text-align: center !important;
  }

  .smodal-nav-item:hover { background: rgba(255,255,255,.06) !important; }
  .smodal-nav-item.active {
    background: rgba(212,168,67,.15) !important;
    border-left: none !important;
    border-bottom: 2px solid var(--gold) !important;
    border-radius: 8px 8px 0 0 !important;
  }
  .smodal-nav-item.active .snav-label { color: var(--gold) !important; }

  /* Hide signout from tab strip */
  .smodal-signout    { display: none !important; }
  .smodal-nav-divider { display: none !important; }

  /* Panel */
  .smodal-panel {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 18px 16px 12px !important;
    min-height: 0 !important;
  }

  /* Show sign out button */
  .smodal-mobile-signout { display: flex !important; }
}

/* ── Mobile sign out button (hidden on desktop) ──────── */
.smodal-mobile-signout {
  display: none;
  width: calc(100% - 32px);
  margin: 0 16px 20px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px;
  background: rgba(220,38,38,.08);
  border: 1px solid rgba(220,38,38,.2);
  border-radius: 8px;
  color: #f87171;
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s;
}
.smodal-mobile-signout:hover,
.smodal-mobile-signout:active { background: rgba(220,38,38,.16); }

/* ── Dialog animations ───────────────────────────────── */
@keyframes gt-fade-in  { from{opacity:0}to{opacity:1} }
@keyframes gt-slide-up { from{transform:translateY(20px) scale(.96);opacity:0}to{transform:translateY(0) scale(1);opacity:1} }

/* ── Nav tooltips ────────────────────────────────────── */
.nav-tooltip { position: relative; }
.nav-tooltip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) scale(.9);
  background: rgba(15,20,30,.95);
  color: #E2E8F0;
  font-family: var(--font-main);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 5px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s, transform .15s;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
  z-index: 500;
}
.nav-tooltip::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: rgba(15,20,30,.95);
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  z-index: 500;
}
.nav-tooltip:hover::after,
.nav-tooltip:hover::before { opacity: 1; transform: translateX(-50%) scale(1); }

/* Light theme */
@media (max-width: 768px) {
  [data-theme='light'] .smodal-nav {
    background: #F1F5F9 !important;
    border-bottom-color: #E2E8F0 !important;
  }
  [data-theme='light'] .smodal-nav-item.active {
    background: #FFFBEB !important;
    border-bottom-color: #92680C !important;
  }
  [data-theme='light'] .smodal-nav-item.active .snav-label { color: #92680C !important; }
  [data-theme='light'] .smodal-mobile-signout {
    background: #FFF1F2;
    border-color: #FECDD3;
    color: #DC2626;
  }
}

/* ── Admin-only settings tabs — hidden via class (not inline style) ── */
.gt-admin-hidden { display: none !important; }

/* ── Logout tab in bottom nav ────────────────────────────────── */
.mob-tab-logout svg { stroke: #f87171 !important; }
.mob-tab-logout span { color: #f87171 !important; }
.mob-tab-logout:active { transform: scale(0.91); }

/* ============================================================
   M4 — NIGHT SKY THEME + ANIMATIONS (safe rewrite)
   ============================================================ */

/* ── Deep space body ─────────────────────────────────────────── */
body:not([data-theme='light']) {
  background: #080B14 !important;
  background-image:
    radial-gradient(ellipse 120% 40% at 50% 120%, rgba(212,168,67,.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at -5% 50%, rgba(99,102,241,.05) 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 105% 30%, rgba(212,168,67,.04) 0%, transparent 70%) !important;
}

/* ── Star field — subtle, won't cover content ────────────────── */
.login-screen::after,
body > nav::before {
  content: none;
}

/* Stars on login left panel only (safe — login-left is behind content) */
.login-left::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 15% 20%, rgba(255,255,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 10%, rgba(255,255,255,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 25%, rgba(255,255,255,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 75% 8%,  rgba(255,255,255,.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 20%, rgba(255,255,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 20% 50%, rgba(255,255,255,.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 45% 40%, rgba(255,255,255,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 65% 55%, rgba(255,255,255,.2) 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 45%, rgba(255,255,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 10% 70%, rgba(255,255,255,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 30% 80%, rgba(255,255,255,.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 75%, rgba(255,255,255,.5) 0%, transparent 100%),
    radial-gradient(2px 2px at 40% 15%, rgba(212,168,67,.7) 0%, transparent 100%),
    radial-gradient(2px 2px at 70% 30%, rgba(212,168,67,.5) 0%, transparent 100%);
  animation: gt-twinkle 6s ease-in-out infinite alternate;
}
@keyframes gt-twinkle {
  from { opacity: .6; }
  to   { opacity: 1; }
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.sidebar {
  background: linear-gradient(180deg, #0C1020 0%, #080B14 100%);
  border-right: 1px solid rgba(212,168,67,.1);
  box-shadow: 4px 0 24px rgba(0,0,0,.5);
}

/* ── Top nav ─────────────────────────────────────────────────── */
.nav {
  background: rgba(8,11,20,.9);
  border-bottom: 1px solid rgba(212,168,67,.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 24px rgba(0,0,0,.4);
}

/* ── Cards — night sky ────────────────────────────────────────── */
.card { background: #0C1020; border-color: rgba(255,255,255,.07); }
.bstat-card { background: #0C1020; border-color: rgba(255,255,255,.07); }
.adm-kpi-card { background: #0C1020; }
.prf-card { background: #0C1020; }
.rpt-card { background: #0C1020; }
.wlt-branch-card { background: #0C1020; }

/* ── Card hover gold aurora ──────────────────────────────────── */
.card:hover { border-color: rgba(212,168,67,.2); box-shadow: 0 8px 32px rgba(0,0,0,.5); }
.bstat-card:hover { border-color: rgba(212,168,67,.2); box-shadow: 0 6px 24px rgba(0,0,0,.5); }
.rpt-card:hover { border-color: rgba(212,168,67,.22); box-shadow: 0 8px 28px rgba(0,0,0,.5); }

.page.active { display: block; }

/* ── Login night sky ─────────────────────────────────────────── */
.login-screen { background: #060810; }
.login-left {
  background: linear-gradient(160deg, #0C1020 0%, #080B14 60%, #0E1428 100%);
  border-right: 1px solid rgba(212,168,67,.1);
}

/* ── Button glow ─────────────────────────────────────────────── */
.btn-primary {
  box-shadow: 0 2px 8px rgba(212,168,67,.25), 0 0 20px rgba(212,168,67,.08);
}
.btn-primary:hover {
  box-shadow: 0 4px 20px rgba(212,168,67,.4), 0 0 32px rgba(212,168,67,.12);
}

/* Card stagger animation removed — was causing rendering issues */

/* ── Nav item hover ──────────────────────────────────────────── */
.nav-item { transition: background .15s, color .15s, padding-left .15s; }
.nav-item:hover { padding-left: 20px; }
.nav-item.active {
  background: rgba(212,168,67,.1);
  border-left: 3px solid var(--gold);
  padding-left: 20px;
}

/* ── Input aurora focus ──────────────────────────────────────── */
.form-input:focus,
.txf-input:focus,
.sform-input:focus {
  box-shadow: -3px 0 0 0 var(--gold), 0 0 16px rgba(212,168,67,.07);
}

/* ── Modals ──────────────────────────────────────────────────── */
.modal-backdrop, .smodal-backdrop { backdrop-filter: blur(6px); }
.modal, .smodal {
  background: linear-gradient(135deg, #0E1428 0%, #0A0E1C 100%);
  border: 1px solid rgba(212,168,67,.12);
  box-shadow: 0 40px 100px rgba(0,0,0,.8);
}

/* ── Wallet balance aurora ───────────────────────────────────── */
.wlt-balance-card {
  background: linear-gradient(135deg, rgba(212,168,67,.08) 0%, rgba(8,11,20,.9) 100%);
  border: 1px solid rgba(212,168,67,.2);
}

/* ── More sheet night sky ────────────────────────────────────── */
@media (max-width: 768px) {
  .more-sheet {
    background: linear-gradient(180deg, #0E1428 0%, #0A0E1C 100%);
    border-top: 1px solid rgba(212,168,67,.15);
  }
}

/* ── Floating tab bar glass ──────────────────────────────────── */
@media (max-width: 768px) {
  .mobile-tab-bar {
    background: rgba(8,11,20,.92);
    border: 1px solid rgba(212,168,67,.18);
    box-shadow: 0 16px 48px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06);
  }
}

/* ── Scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar-track { background: rgba(8,11,20,.5); }
::-webkit-scrollbar-thumb { background: rgba(212,168,67,.2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(212,168,67,.35); }

/* ── Table ───────────────────────────────────────────────────── */
.table-wrapper { background: rgba(10,14,28,.6); }
thead tr { background: rgba(212,168,67,.03); }

/* ── Logo glow ───────────────────────────────────────────────── */
.logo-mark { box-shadow: 0 0 20px rgba(212,168,67,.3); }

/* ── Notification panel ──────────────────────────────────────── */
.notif-panel {
  background: linear-gradient(180deg, #0E1428, #0A0E1C);
  border: 1px solid rgba(212,168,67,.12);
  box-shadow: 0 20px 60px rgba(0,0,0,.7);
}

/* ── Date badge glow ─────────────────────────────────────────── */
.date-badge, .adm-date-pill {
  box-shadow: 0 0 12px rgba(212,168,67,.08);
}



/* ── Logout dialog ───────────────────────────────────────────── */
#gt-logout-dialog > div {
  background: linear-gradient(135deg, #0E1428, #0A0E1C);
  border: 1px solid rgba(212,168,67,.15);
  box-shadow: 0 40px 80px rgba(0,0,0,.8);
}

/* ── Mobile top nav scroll ───────────────────────────────────── */
@media (max-width: 768px) {
  .nav {
    height: auto;
    min-height: 54px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
  }
  .nav::-webkit-scrollbar { display: none; }

  .nav-logo {
    flex-shrink: 0;
    padding: 0 12px;
    position: sticky;
    left: 0;
    z-index: 10;
    background: rgba(8,11,20,.95);
    border-right: 1px solid rgba(255,255,255,.06);
    height: 54px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .logo-text { font-size: 15px; }
  .logo-mark  { width: 28px; height: 28px; font-size: 13px; }

  .nav-search  { display: none; }
  .nav-spacer  { display: none; }

  .nav-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    padding: 0 10px;
    flex-shrink: 0;
    flex-wrap: nowrap;
  }

  .nav-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 8px;
  }

  .nav-wallet-pill {
    padding: 5px 10px;
    font-size: 11px;
    gap: 4px;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .nav-profile {
    padding: 4px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  #navUserName { display: none; }

  .nav-avatar-wrap { width: 32px; height: 32px; }
  .avatar { width: 32px; height: 32px; font-size: 12px; line-height: 32px; }

  .nav-tooltip::after,
  .nav-tooltip::before { display: none; }
}

@media (max-width: 380px) {
  .logo-text { display: none; }
}

/* ── Nav tooltip ─────────────────────────────────────────────── */
.nav-tooltip { position: relative; }
.nav-tooltip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) scale(.9);
  background: rgba(15,20,30,.95);
  color: #E2E8F0;
  font-family: var(--font-main);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 5px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s, transform .15s;
  border: 1px solid rgba(255,255,255,.1);
  z-index: 500;
}
.nav-tooltip::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: rgba(15,20,30,.95);
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  z-index: 500;
}
.nav-tooltip:hover::after,
.nav-tooltip:hover::before { opacity: 1; transform: translateX(-50%) scale(1); }

/* ── Dialog animations ───────────────────────────────────────── */
@keyframes gt-fade-in  { from{opacity:0}to{opacity:1} }
@keyframes gt-slide-up { from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1} }

/* ── Admin hidden class ──────────────────────────────────────── */
.gt-admin-hidden { display: none !important; }

/* ── Mobile sign out button ──────────────────────────────────── */
.smodal-mobile-signout {
  display: none;
  width: calc(100% - 32px);
  margin: 0 16px 20px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px;
  background: rgba(220,38,38,.08);
  border: 1px solid rgba(220,38,38,.2);
  border-radius: 8px;
  color: #f87171;
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s;
}
.smodal-mobile-signout:hover { background: rgba(220,38,38,.16); }

@media (max-width: 768px) {
  .smodal-mobile-signout { display: flex; }

  .smodal-backdrop { padding: 0; align-items: flex-end; }
  .smodal {
    width: 100%;
    max-width: 100%;
    height: 92vh;
    max-height: 92vh;
    border-radius: 20px 20px 0 0;
    border-bottom: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .smodal-header { padding: 14px 16px 12px; flex-shrink: 0; }
  .smodal-search-wrap { display: none; }
  .smodal-body {
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }
  .smodal-nav {
    display: flex;
    flex-direction: row;
    width: 100%;
    min-height: auto;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: rgba(0,0,0,.15);
    padding: 6px 10px;
    gap: 4px;
    flex-shrink: 0;
    align-items: center;
  }
  .smodal-nav::-webkit-scrollbar { display: none; }
  .smodal-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 7px 12px;
    border-radius: 8px;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 54px;
    width: auto;
    cursor: pointer;
    border-left: none;
    transition: background .15s;
  }
  .smodal-nav-item span { display: block; }
  .snav-icon  { font-size: 18px; line-height: 1; }
  .snav-label { font-size: 10px; font-weight: 600; color: var(--text-faint); text-align: center; }
  .smodal-nav-item:hover { background: rgba(255,255,255,.06); }
  .smodal-nav-item.active {
    background: rgba(212,168,67,.15);
    border-left: none;
    border-bottom: 2px solid var(--gold);
    border-radius: 8px 8px 0 0;
  }
  .smodal-nav-item.active .snav-label { color: var(--gold); }
  .smodal-signout    { display: none; }
  .smodal-nav-divider { display: none; }
  .smodal-panel {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 18px 16px 12px;
    min-height: 0;
  }
}

/* ── Page transition (safe) ──────────────────────────────────── */
@keyframes gt-page-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page.active {
  display: block;
  animation: gt-page-in .22s ease both;
}
@media (prefers-reduced-motion: reduce) {
  .page.active { animation: none; }
}

/* ── Card entrance stagger ───────────────────────────────────── */
/* Card entrance — triggered by .gt-animate class added via JS */
@keyframes gt-card-in {
  0%   { opacity: 0; transform: translateY(18px) scale(.96); }
  60%  { opacity: 1; transform: translateY(-3px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Gold border pulse on entrance */
@keyframes gt-card-glow {
  0%   { box-shadow: 0 0 0 0 rgba(212,168,67,0); border-color: rgba(255,255,255,.07); }
  40%  { box-shadow: 0 0 20px 4px rgba(212,168,67,.25); border-color: rgba(212,168,67,.4); }
  100% { box-shadow: 0 4px 16px rgba(0,0,0,.3); border-color: rgba(255,255,255,.07); }
}

.bstat-card.gt-animate:nth-child(1) { animation: gt-card-in .5s cubic-bezier(.34,1.56,.64,1) .05s both, gt-card-glow .8s ease .05s both; }
.bstat-card.gt-animate:nth-child(2) { animation: gt-card-in .5s cubic-bezier(.34,1.56,.64,1) .12s both, gt-card-glow .8s ease .12s both; }
.bstat-card.gt-animate:nth-child(3) { animation: gt-card-in .5s cubic-bezier(.34,1.56,.64,1) .19s both, gt-card-glow .8s ease .19s both; }
.bstat-card.gt-animate:nth-child(4) { animation: gt-card-in .5s cubic-bezier(.34,1.56,.64,1) .26s both, gt-card-glow .8s ease .26s both; }
.bstat-card.gt-animate:nth-child(5) { animation: gt-card-in .5s cubic-bezier(.34,1.56,.64,1) .33s both, gt-card-glow .8s ease .33s both; }
.bstat-card.gt-animate:nth-child(6) { animation: gt-card-in .5s cubic-bezier(.34,1.56,.64,1) .40s both, gt-card-glow .8s ease .40s both; }

@media (prefers-reduced-motion: reduce) {
  .bstat-card { animation: none !important; }
}

/* ── Login star twinkling ─────────────────────────────────────── */
@keyframes gt-twinkle {
  from { opacity: .6; }
  to   { opacity: 1;  }
}

/* ============================================================
   GOLD SHIMMER — SLOW GENTLE BREEZE
   Soft gold glow drifting across numbers like wind on leaves
   ============================================================ */

/* The drift animation — slow, gentle, continuous */
@keyframes gt-gold-drift {
  0%   { left: -120%; opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { left: 220%; opacity: 0; }
}

/* ── Stat card values ────────────────────────────────────────── */
.bstat-val {
  position: relative;
  overflow: hidden;
  display: inline-block;
  width: 100%;
}

.bstat-val::after {
  content: '';
  position: absolute;
  top: -20%;
  left: -120%;
  width: 80%;
  height: 140%;
  background: linear-gradient(
    105deg,
    transparent 15%,
    rgba(212,168,67,.08) 30%,
    rgba(212,168,67,.30) 45%,
    rgba(255,230,120,.55) 50%,
    rgba(212,168,67,.30) 55%,
    rgba(212,168,67,.08) 70%,
    transparent 85%
  );
  pointer-events: none;
  z-index: 2;
}

/* On animate trigger — slow drift */
.bstat-card.gt-animate .bstat-val::after {
  animation: gt-gold-drift 6s ease-in-out both;
}

/* Each card's shimmer starts a little after the card arrives */
.bstat-card.gt-animate:nth-child(1) .bstat-val::after { animation-delay: 0.5s; }
.bstat-card.gt-animate:nth-child(2) .bstat-val::after { animation-delay: 1.2s; }
.bstat-card.gt-animate:nth-child(3) .bstat-val::after { animation-delay: 1.9s; }
.bstat-card.gt-animate:nth-child(4) .bstat-val::after { animation-delay: 2.6s; }
.bstat-card.gt-animate:nth-child(5) .bstat-val::after { animation-delay: 3.3s; }
.bstat-card.gt-animate:nth-child(6) .bstat-val::after { animation-delay: 4.0s; }

/* Hover — re-triggers a slow drift */
.bstat-card:hover .bstat-val::after {
  animation: gt-gold-drift 5s ease-in-out both;
  animation-delay: .1s;
}

/* ── Profit card values ───────────────────────────────────────── */
.prf-card-val {
  position: relative;
  overflow: hidden;
  display: inline-block;
  width: 100%;
}
.prf-card-val::after {
  content: '';
  position: absolute;
  top: -20%; left: -120%;
  width: 80%; height: 140%;
  background: linear-gradient(
    105deg,
    transparent 15%,
    rgba(212,168,67,.25) 45%,
    rgba(255,230,120,.5) 50%,
    rgba(212,168,67,.25) 55%,
    transparent 85%
  );
  pointer-events: none;
  z-index: 2;
}
.prf-card:hover .prf-card-val::after {
  animation: gt-gold-drift 5s ease-in-out both;
  animation-delay: .1s;
}

/* ── Wallet balance ───────────────────────────────────────────── */
.wlt-balance-val {
  position: relative;
  overflow: hidden;
  display: inline-block;
}
.wlt-balance-val::after {
  content: '';
  position: absolute;
  top: -20%; left: -120%;
  width: 70%; height: 140%;
  background: linear-gradient(
    105deg,
    transparent 15%,
    rgba(212,168,67,.2) 40%,
    rgba(255,230,120,.5) 50%,
    rgba(212,168,67,.2) 60%,
    transparent 85%
  );
  pointer-events: none;
  z-index: 2;
  /* Always drifts slowly on load */
  animation: gt-gold-drift 7s ease-in-out 0.8s both;
}
.wlt-balance-card:hover .wlt-balance-val::after {
  animation: gt-gold-drift 5s ease-in-out both;
}

/* ── KPI card values (admin dashboard) ───────────────────────── */
.adm-kpi-val {
  position: relative;
  overflow: hidden;
  display: inline-block;
  width: 100%;
}
.adm-kpi-val::after {
  content: '';
  position: absolute;
  top: -20%; left: -120%;
  width: 80%; height: 140%;
  background: linear-gradient(
    105deg,
    transparent 15%,
    rgba(255,255,255,.08) 40%,
    rgba(255,255,255,.22) 50%,
    rgba(255,255,255,.08) 60%,
    transparent 85%
  );
  pointer-events: none;
  z-index: 2;
}
.adm-kpi-card:hover .adm-kpi-val::after {
  animation: gt-gold-drift 5s ease-in-out both;
  animation-delay: .05s;
}

/* ============================================================
   ORIENTATION — LANDSCAPE MOBILE FIX
   ============================================================ */

/* Landscape on phone — hide tab bar, use full width */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .mobile-tab-bar { display: none !important; }
  .more-sheet { display: none !important; }
  .page { padding-bottom: 20px !important; }
  .nav { min-height: 46px !important; }
}

/* Back to portrait — ensure tab bar shows */
@media (max-width: 768px) and (orientation: portrait) {
  .mobile-tab-bar {
    display: flex !important;
  }
  .page { padding: 16px 16px 120px !important; }
}

/* ============================================================
   LIGHT THEME — BEAUTIFUL PROFESSIONAL REDESIGN
   Warm white with gold accents, smooth transitions
   ============================================================ */

/* ── Smooth theme transition on everything ───────────────────── */
*, *::before, *::after {
  transition:
    background-color .35s ease,
    background .35s ease,
    border-color .35s ease,
    color .25s ease,
    box-shadow .35s ease !important;
}
/* But keep animations and transforms fast */
.btn-primary, .btn-outline, .btn-ghost,
.mob-tab, .nav-item, .card, .bstat-card,
.rpt-card, .more-item {
  transition:
    background-color .35s ease,
    background .35s ease,
    border-color .35s ease,
    color .25s ease,
    box-shadow .35s ease,
    transform .2s cubic-bezier(.34,1.56,.64,1) !important;
}

/* ── Light body — warm professional white ────────────────────── */
[data-theme='light'] body {
  background: #F8F9FB !important;
  background-image:
    /* Subtle warm gold aurora top right */
    radial-gradient(ellipse 60% 50% at 100% 0%, rgba(212,168,67,.06) 0%, transparent 70%),
    /* Very soft blue tint bottom left */
    radial-gradient(ellipse 50% 40% at 0% 100%, rgba(99,102,241,.04) 0%, transparent 70%),
    /* Clean white base */
    linear-gradient(180deg, #FFFFFF 0%, #F4F6F9 50%, #F0F3F7 100%) !important;
  color: #0F172A !important;
}

/* ── Sidebar — clean white with gold accent ──────────────────── */
[data-theme='light'] .sidebar {
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFC 100%) !important;
  border-right: 1px solid #E8ECF2 !important;
  box-shadow: 4px 0 20px rgba(15,23,42,.06) !important;
}
[data-theme='light'] .sidebar-label { color: #94A3B8 !important; }

/* ── Nav — pure white with gold bottom line ──────────────────── */
[data-theme='light'] .nav {
  background: rgba(255,255,255,.95) !important;
  border-bottom: 1px solid #E8ECF2 !important;
  box-shadow: 0 1px 0 rgba(212,168,67,.15), 0 4px 16px rgba(15,23,42,.05) !important;
  backdrop-filter: blur(12px) !important;
}

/* ── Nav items ───────────────────────────────────────────────── */
[data-theme='light'] .nav-item { color: #475569 !important; border-radius: 8px !important; }
[data-theme='light'] .nav-item:hover { background: #F1F5F9 !important; color: #0F172A !important; padding-left: 20px !important; }
[data-theme='light'] .nav-item.active {
  background: linear-gradient(90deg, #FFFBEB, #FFF8E1) !important;
  color: #92680C !important;
  border-left: 3px solid #D4A843 !important;
  box-shadow: inset 0 1px 0 rgba(212,168,67,.15), 2px 0 8px rgba(212,168,67,.1) !important;
}
[data-theme='light'] .nav-icon { color: inherit !important; }

/* ── Cards — white with subtle shadow ───────────────────────── */
[data-theme='light'] .card,
[data-theme='light'] .bstat-card,
[data-theme='light'] .adm-kpi-card,
[data-theme='light'] .prf-card,
[data-theme='light'] .rpt-card,
[data-theme='light'] .wlt-branch-card,
[data-theme='light'] .exp-sum-card {
  background: #FFFFFF !important;
  border: 1px solid #E8ECF2 !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04) !important;
}
[data-theme='light'] .card:hover,
[data-theme='light'] .bstat-card:hover,
[data-theme='light'] .rpt-card:hover {
  border-color: rgba(212,168,67,.4) !important;
  box-shadow: 0 8px 24px rgba(15,23,42,.1), 0 0 0 1px rgba(212,168,67,.15) !important;
}

/* Card title and values */
[data-theme='light'] .bstat-val  { color: #0F172A !important; }
[data-theme='light'] .bstat-sub  { color: #64748B !important; }
[data-theme='light'] .bstat-label { color: #94A3B8 !important; }
[data-theme='light'] .card-title  { color: #334155 !important; }
[data-theme='light'] .card-subtitle { color: #64748B !important; }

/* ── Table ───────────────────────────────────────────────────── */
[data-theme='light'] .table-wrapper {
  background: #FFFFFF !important;
  border: 1px solid #E8ECF2 !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.05) !important;
}
[data-theme='light'] thead tr {
  background: #F8FAFC !important;
  border-bottom: 1px solid rgba(212,168,67,.2) !important;
}
[data-theme='light'] th { color: #94A3B8 !important; }
[data-theme='light'] td { color: #475569 !important; }
[data-theme='light'] tbody tr:hover td { background: #FFFBEB !important; color: #0F172A !important; }

/* ── Wallet balance card ─────────────────────────────────────── */
[data-theme='light'] .wlt-balance-card {
  background: linear-gradient(135deg, #FFFBEB 0%, #FFFFFF 70%) !important;
  border: 1px solid #FDE68A !important;
  box-shadow: 0 4px 16px rgba(212,168,67,.12) !important;
}
[data-theme='light'] .wlt-balance-val { color: #0F172A !important; }
[data-theme='light'] .wlt-balance-icon { background: #FFFBEB !important; border-color: #FDE68A !important; color: #92680C !important; }
[data-theme='light'] .wlt-balance-meta { border-top-color: #F1F5F9 !important; }
[data-theme='light'] .wlt-meta-val { color: #334155 !important; }

/* ── Modals ──────────────────────────────────────────────────── */
[data-theme='light'] .modal,
[data-theme='light'] .smodal {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 20px 60px rgba(15,23,42,.15) !important;
}
[data-theme='light'] .modal-backdrop,
[data-theme='light'] .smodal-backdrop {
  background: rgba(15,23,42,.4) !important;
}
[data-theme='light'] .smodal-nav {
  background: #F8FAFC !important;
  border-right: 1px solid #E2E8F0 !important;
}
[data-theme='light'] .smodal-nav-item { color: #64748B !important; }
[data-theme='light'] .smodal-nav-item.active {
  background: #FFFBEB !important;
  color: #92680C !important;
  border-left: 3px solid #D4A843 !important;
}
[data-theme='light'] .smodal-panel { background: #FFFFFF !important; }

/* ── Buttons light ───────────────────────────────────────────── */
[data-theme='light'] .btn-primary {
  background: linear-gradient(135deg, #C49A1A, #8B6C08) !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(146,104,12,.28), 0 0 16px rgba(146,104,12,.08) !important;
}
[data-theme='light'] .btn-primary:hover {
  box-shadow: 0 4px 20px rgba(146,104,12,.4) !important;
}
[data-theme='light'] .btn-outline {
  background: #FFFFFF !important;
  color: #92680C !important;
  border-color: rgba(146,104,12,.3) !important;
}
[data-theme='light'] .btn-ghost {
  background: #F8FAFC !important;
  color: #64748B !important;
  border-color: #E2E8F0 !important;
}

/* ── Inputs light ────────────────────────────────────────────── */
[data-theme='light'] .form-input,
[data-theme='light'] .txf-input,
[data-theme='light'] .sform-input {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
}
[data-theme='light'] .form-input:focus,
[data-theme='light'] .txf-input:focus,
[data-theme='light'] .sform-input:focus {
  border-color: #92680C !important;
  box-shadow: -3px 0 0 0 #92680C, 0 0 16px rgba(146,104,12,.07) !important;
}

/* ── Scrollbar light ─────────────────────────────────────────── */
[data-theme='light'] ::-webkit-scrollbar-track { background: #F1F5F9 !important; }
[data-theme='light'] ::-webkit-scrollbar-thumb { background: rgba(146,104,12,.25) !important; }
[data-theme='light'] ::-webkit-scrollbar-thumb:hover { background: rgba(146,104,12,.4) !important; }

/* ── Page header light ───────────────────────────────────────── */
[data-theme='light'] .page-header { border-bottom-color: #F1F5F9 !important; }
[data-theme='light'] .page-header h1,
[data-theme='light'] .page-header .tx-title,
[data-theme='light'] .page-header .rpt-title { color: #0F172A !important; }
[data-theme='light'] .page-header p { color: #64748B !important; }

/* ── Report cards light ──────────────────────────────────────── */
[data-theme='light'] .rpt-card { background: #FFFFFF !important; border-color: #E8ECF2 !important; }
[data-theme='light'] .rpt-card:hover { border-color: rgba(146,104,12,.3) !important; }
[data-theme='light'] .rpt-card-title { color: #0F172A !important; }
[data-theme='light'] .rpt-card-desc  { color: #64748B !important; }

/* ── Transaction chooser light ───────────────────────────────── */
[data-theme='light'] .txc-card {
  background: #FFFFFF !important;
  border-color: #E8ECF2 !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.06) !important;
}
[data-theme='light'] .txc-card:hover {
  border-color: rgba(146,104,12,.3) !important;
  box-shadow: 0 4px 16px rgba(15,23,42,.08) !important;
}
[data-theme='light'] .txc-name { color: #0F172A !important; }
[data-theme='light'] .txc-desc { color: #64748B !important; }

/* ── Logout dialog light ─────────────────────────────────────── */
[data-theme='light'] #gt-logout-dialog > div {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 20px 60px rgba(15,23,42,.2) !important;
}

/* ── Admin dashboard light ───────────────────────────────────── */
[data-theme='light'] .adm-topbar { background: #F8FAFC !important; border-color: #E2E8F0 !important; }
[data-theme='light'] .adm-kpi-val { filter: brightness(.85); }

/* ── More sheet light ────────────────────────────────────────── */
[data-theme='light'] .more-sheet { background: #FFFFFF !important; }
[data-theme='light'] .more-sheet-title { color: #0F172A !important; }
[data-theme='light'] .more-sheet-handle { background: #CBD5E1 !important; }
[data-theme='light'] .more-item { background: #F8FAFC !important; border-color: #E2E8F0 !important; }
[data-theme='light'] .more-item span { color: #475569 !important; }
[data-theme='light'] .more-signout { background: #FFF1F2 !important; border-color: #FECDD3 !important; color: #DC2626 !important; }

/* ── Mobile tab bar light ────────────────────────────────────── */
[data-theme='light'] .mobile-tab-bar {
  background: rgba(255,255,255,.92) !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 8px 32px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
[data-theme='light'] .mob-tab svg  { stroke: #94A3B8 !important; }
[data-theme='light'] .mob-tab span { color: #94A3B8 !important; }
[data-theme='light'] .mob-tab.active svg  { stroke: #92680C !important; filter: drop-shadow(0 2px 4px rgba(146,104,12,.3)) !important; }
[data-theme='light'] .mob-tab.active span { color: #92680C !important; }
[data-theme='light'] .mob-tab.active { background: rgba(146,104,12,.1) !important; }
[data-theme='light'] .mob-tab.active::before { background: #92680C !important; box-shadow: 0 0 8px rgba(146,104,12,.5) !important; }

/* ── Notification panel light ────────────────────────────────── */
[data-theme='light'] .notif-panel {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 16px 40px rgba(15,23,42,.12) !important;
}

/* ── Gold shimmer on light theme (slightly darker gold) ──────── */
[data-theme='light'] .bstat-val::after {
  background: linear-gradient(
    105deg,
    transparent 15%,
    rgba(146,104,12,.06) 30%,
    rgba(146,104,12,.22) 45%,
    rgba(212,168,67,.4) 50%,
    rgba(146,104,12,.22) 55%,
    rgba(146,104,12,.06) 70%,
    transparent 85%
  ) !important;
}

/* ── Section headers light ───────────────────────────────────── */
[data-theme='light'] .section-title { color: #94A3B8 !important; }
[data-theme='light'] .section-title::after { background: #E2E8F0 !important; }

/* ── Date badges light ───────────────────────────────────────── */
[data-theme='light'] .date-badge,
[data-theme='light'] .adm-date-pill {
  background: #FFFBEB !important;
  border-color: #FDE68A !important;
  color: #92680C !important;
  box-shadow: 0 0 8px rgba(146,104,12,.06) !important;
}

/* ── Gold status panel light ─────────────────────────────────── */
[data-theme='light'] .gs-item-unrefined { background: #FFF1F2 !important; border-color: #FECDD3 !important; }
[data-theme='light'] .gs-item-partial   { background: #FFFBEB !important; border-color: #FDE68A !important; }
[data-theme='light'] .gs-item-refined   { background: #ECFDF5 !important; border-color: #A7F3D0 !important; }
[data-theme='light'] .gs-item-available { background: #FFFBEB !important; border-color: #FDE68A !important; }

/* ── Branch filter light ─────────────────────────────────────── */
[data-theme='light'] #adminBranchFilter { background: #F8FAFC !important; border-color: #E2E8F0 !important; }
[data-theme='light'] .adm-branch-filter { background: #F8FAFC !important; border-color: #E2E8F0 !important; }

/* ── Transaction & Audit tables — horizontal scroll fix ─────── */
/* All cells no-wrap so table is wider than screen → scrolls */
.table-wrapper table th,
.table-wrapper table td {
  white-space: nowrap !important;
}

/* First sticky column — never wraps, solid background */
.table-wrapper table th:first-child,
.table-wrapper table td:first-child {
  white-space: nowrap !important;
  min-width: 120px !important;
}

/* Light theme sticky cell bg */
[data-theme='light'] .table-wrapper table th:first-child,
[data-theme='light'] .table-wrapper table td:first-child {
  background: #F8FAFC !important;
}