/* ============================================================
   JINDER FINANCE - Staff Panel CSS (Admin / Agent / Super / Customer)
   ============================================================ */

/* Fonts are loaded async via <link preload> in staff_header.php (non-render-blocking) */

:root {
  --ink: #0a1628; --ink-soft: #3a4759; --muted: #6b7785; --line: #e4e9ef; --bg-soft: #f5f7fa;
  --brand: #0b5d3b; --brand-dk: #084a2f; --accent: #d4af37;
  --warn: #b94a00; --error: #c0392b; --success: #0b5d3b;
  --sidebar-w: 248px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Plus Jakarta Sans',sans-serif;color:var(--ink);background:var(--bg-soft);line-height:1.55;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit;}
input,select,textarea{font:inherit;color:inherit;}
img,svg{display:block;max-width:100%;}

/* Layout */
.layout{display:grid;grid-template-columns:var(--sidebar-w) minmax(0, 1fr);min-height:100vh;}
.sidebar{background:#0a1628;color:#a8b3c2;padding:22px 0;position:sticky;top:0;height:100vh;overflow-y:auto;z-index:20;align-self:start;}
.sidebar .brand{padding:0 22px 22px;border-bottom:1px solid rgba(255,255,255,0.06);margin-bottom:18px;}
.sidebar .brand a{display:flex;align-items:center;gap:10px;}
.sidebar .brand-mark{width:34px;height:34px;background:var(--brand);border-radius:8px;display:grid;place-items:center;}
.sidebar .brand-text{font-family:'Fraunces',serif;font-weight:700;font-size:19px;color:#fff;letter-spacing:-0.01em;}
.sidebar .brand-text span{color:var(--accent);}
.sidebar .role-pill{display:inline-block;font-size:10.5px;text-transform:uppercase;letter-spacing:0.06em;padding:3px 8px;background:rgba(212,175,55,0.18);color:var(--accent);border-radius:5px;font-weight:600;margin-top:6px;}
.sidebar nav{padding:0 12px;}
.sidebar nav a{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:8px;font-size:14px;font-weight:500;color:#a8b3c2;margin-bottom:2px;transition:all 0.15s ease;}
.sidebar nav a:hover{background:rgba(255,255,255,0.04);color:#fff;}
.sidebar nav a.active{background:var(--brand);color:#fff;}
.sidebar nav a svg{flex-shrink:0;}
.sidebar nav .section-title{padding:14px 14px 8px;font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:#6b7785;font-weight:600;}

.main{padding:0;min-width:0;}
.topbar{background:#fff;border-bottom:1px solid var(--line);padding:14px 28px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:10;}
.topbar h1{font-family:'Fraunces',serif;font-size:22px;font-weight:600;letter-spacing:-0.01em;}
.topbar .actions{display:flex;align-items:center;gap:14px;}
.bell{position:relative;width:38px;height:38px;border-radius:8px;display:grid;place-items:center;}
.bell:hover{background:var(--bg-soft);}
.bell-badge{position:absolute;top:6px;right:6px;background:var(--error);color:#fff;font-size:10px;font-weight:700;padding:1px 5px;border-radius:8px;min-width:16px;text-align:center;}
.user-chip{display:flex;align-items:center;gap:10px;padding:6px 12px 6px 6px;border-radius:999px;background:var(--bg-soft);font-size:13.5px;font-weight:500;}
.user-chip .avatar{width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px;}
.user-chip .role-tag{font-size:11px;color:var(--muted);font-weight:500;}

.content{padding:28px;min-width:0;}

/* Cards */
.card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 1px 2px rgba(10,22,40,0.04);border:1px solid var(--line);min-width:0;}

/* Bank management page two-column layout (sidebar + main) */
.bank-page-grid{
  display:grid;
  grid-template-columns:280px minmax(0, 1fr);  /* minmax(0, 1fr) lets right column shrink so table scrolls */
  gap:20px;
  align-items:start;
}
.bank-page-grid--wide{
  grid-template-columns:340px minmax(0, 1fr);
}
/* Tablet: shrink sidebar */
@media (max-width:1100px){
  .bank-page-grid,
  .bank-page-grid--wide{
    grid-template-columns:240px minmax(0, 1fr);
  }
}
/* ============================================================
 * FORM GRID UTILITIES (jinderv4 polish)
 * Mobile-responsive grid classes for forms — stack on small screens
 * ============================================================ */
.form-grid-2,
.form-grid-3,
.form-grid-2-1 {
  display: grid;
  gap: 14px;
}
.form-grid-2 { grid-template-columns: 1fr 1fr; }
.form-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.form-grid-2-1 { grid-template-columns: 2fr 1fr; }

/* Tablet: 3-col → 2-col */
@media (max-width: 900px) {
  .form-grid-3 { grid-template-columns: 1fr 1fr; }
}
/* Mobile: all → 1-col */
@media (max-width: 640px) {
  .form-grid-2,
  .form-grid-3,
  .form-grid-2-1 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Info card grid (key:value pairs) */
.info-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
  padding: 14px 16px;
  background: var(--bg-soft);
  border-radius: 8px;
  margin-bottom: 18px;
  font-size: 13px;
  line-height: 1.5;
}
.info-card-grid .info-cell {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.info-card-grid .info-cell .info-lbl {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 2px;
}
.info-card-grid .info-cell .info-val {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  word-break: break-word;
}
.info-card-grid .info-cell.info-cell-full {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}
@media (max-width: 640px) {
  .info-card-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* Page container with max-width + breathing room */
.page-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
}
.page-container--narrow {
  max-width: 720px;
}
.page-container--medium {
  max-width: 960px;
}


.filter-chip{
  display:inline-block;
  padding:8px 16px;
  border:1.5px solid var(--line);
  border-radius:999px;
  background:#fff;
  color:var(--ink);
  font-size:13px;
  font-weight:500;
  text-decoration:none;
  cursor:pointer;
  transition:all 0.15s;
}
.filter-chip:hover{ border-color:var(--brand); color:var(--brand); }
.filter-chip.active{
  background:var(--brand); color:#fff; border-color:var(--brand);
  box-shadow:0 2px 8px rgba(11,93,59,0.25);
}

.summary-tiles .tile{
  padding:16px 18px;
  border-radius:10px;
  background:#fff;
  border:1px solid var(--line);
  border-left-width:4px;
}
.summary-tiles .tile-label{
  font-size:11.5px; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--muted); font-weight:600; margin-bottom:6px;
}
.summary-tiles .tile-value{
  font-size:22px; font-weight:800; color:var(--ink); line-height:1.2; margin-bottom:4px;
}
.summary-tiles .tile-meta{ font-size:11.5px; color:var(--muted); }
.summary-tiles .tile-collected{ border-left-color:#15803d; }
.summary-tiles .tile-collected .tile-value{ color:#15803d; }
.summary-tiles .tile-declined{ border-left-color:#dc2626; }
.summary-tiles .tile-declined .tile-value{ color:#dc2626; }
.summary-tiles .tile-all{ border-left-color:#1d4ed8; }
.summary-tiles .tile-all .tile-value{ color:#1d4ed8; }
.summary-tiles .tile-period{ border-left-color:#7e22ce; }
.summary-tiles .tile-period .tile-value{ color:#7e22ce; }

.payment-row-declined{ opacity:0.65; background:#fef2f2; }
.payment-row-declined td{ text-decoration:line-through; color:var(--muted); }
.payment-row-declined .badge{ text-decoration:none; opacity:1; }

.modal{ animation:fadeIn 0.15s ease-out; }
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
.btn-danger{ background:#dc2626 !important; color:#fff !important; border-color:#dc2626 !important; }
.btn-danger:hover{ background:#b91c1c !important; }

/* ============================================================
 * TOAST NOTIFICATIONS (Phase 3)
 * ============================================================ */
.toast-container{
  position:fixed; top:20px; right:20px; z-index:9999;
  display:flex; flex-direction:column; gap:10px;
  max-width:380px; pointer-events:none;
}
.toast{
  background:#fff; border-radius:10px; padding:14px 16px;
  box-shadow:0 6px 24px rgba(0,0,0,0.12);
  border-left:4px solid #15803d;
  font-size:13.5px; line-height:1.5;
  pointer-events:auto;
  animation:toastSlideIn 0.25s ease-out;
  display:flex; gap:10px; align-items:flex-start;
}
.toast .toast-icon{ flex-shrink:0; font-size:18px; }
.toast .toast-body{ flex:1; }
.toast .toast-close{
  flex-shrink:0; cursor:pointer; color:var(--muted);
  font-size:18px; line-height:1; background:none; border:0; padding:0 4px;
}
.toast-success{ border-left-color:#15803d; }
.toast-info{ border-left-color:#1d4ed8; }
.toast-warn{ border-left-color:#c2410c; }
.toast-error{ border-left-color:#dc2626; }
@keyframes toastSlideIn{
  from{ opacity:0; transform:translateX(40px); }
  to{ opacity:1; transform:translateX(0); }
}
@keyframes toastFadeOut{
  to{ opacity:0; transform:translateX(40px); }
}
.toast.dismissing{ animation:toastFadeOut 0.2s ease-in forwards; }

/* Mobile */
@media (max-width:900px){
  .bank-page-grid,
  .bank-page-grid--wide{
    grid-template-columns:minmax(0, 1fr);
  }
}

/* Generic 2-column page layout: main content (left) + side panel (right) */
.page-2col{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 380px;  /* table can shrink so scroll triggers */
  gap:24px;
  align-items:start;
}
@media (max-width:1100px){
  .page-2col{
    grid-template-columns:minmax(0, 1fr) 320px;
  }
}
@media (max-width:900px){
  .page-2col{
    grid-template-columns:minmax(0, 1fr);   /* stack on mobile, prevent content overflow */
  }
}

/* Lead view 2-col layout (1.5fr 1fr) */
.page-lead-view{
  display:grid;
  grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr);
  gap:24px;
  align-items:start;
}
@media (max-width:900px){
  .page-lead-view{
    grid-template-columns:minmax(0, 1fr);
  }
}

/* Customer/agent 2-col with smaller side panel */
.page-2col--narrow{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 320px;
  gap:20px;
  align-items:start;
}
@media (max-width:900px){
  .page-2col--narrow{
    grid-template-columns:minmax(0, 1fr);
  }
}

/* ============================================================
 * Mobile auto-collapse for inline grids — catches any inline
 * grid-template-columns we haven't migrated to a class yet
 * (lead-view inner sections, form 2-col, stat tiles, etc)
 * ============================================================ */
@media (max-width:900px){
  /* Tablet: 3-column grids → 2 columns */
  div[style*="grid-template-columns:1fr 1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr 1fr"],
  form[style*="grid-template-columns:1fr 1fr 1fr"]{
    grid-template-columns:1fr 1fr !important;
  }
}
@media (max-width:700px){
  div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr"],
  form[style*="grid-template-columns:1fr 1fr"],
  form[style*="grid-template-columns: 1fr 1fr"],
  div[style*="grid-template-columns:1fr 1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr 1fr"],
  div[style*="grid-template-columns:1.4fr 1fr"],
  div[style*="grid-template-columns:1.5fr 1fr"],
  div[style*="grid-template-columns:2fr 1fr"],
  div[style*="grid-template-columns: 2fr 1fr"],
  div[style*="grid-template-columns:1fr 2fr"],
  div[style*="grid-template-columns:1fr 380px"],
  div[style*="grid-template-columns:1fr 340px"],
  div[style*="grid-template-columns:1fr 320px"],
  div[style*="grid-template-columns:280px 1fr"],
  div[style*="grid-template-columns:260px 1fr"],
  div[style*="grid-template-columns:340px 1fr"],
  div[style*="grid-template-columns:repeat(3,1fr)"],
  div[style*="grid-template-columns:repeat(2,1fr)"]{
    grid-template-columns:1fr !important;
  }
}
.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}
.card-head h3{font-family:'Fraunces',serif;font-size:19px;font-weight:600;}
.stat{background:#fff;border-radius:12px;padding:20px;border:1px solid var(--line);}
.stat .lbl{font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:0.04em;font-weight:600;}
.stat .val{font-family:'Fraunces',serif;font-size:30px;font-weight:700;color:var(--ink);margin-top:6px;letter-spacing:-0.02em;}
.stat .meta{font-size:12.5px;color:var(--ink-soft);margin-top:4px;}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:24px;}

/* Forms */
.form-group{margin-bottom:16px;}
.form-label{display:block;font-size:13px;font-weight:500;color:var(--ink-soft);margin-bottom:6px;}
.form-label.required::after{content:' *';color:var(--error);}
.form-control,.form-input,.form-select,.form-textarea{width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:8px;background:#fff;font-size:14px;color:var(--ink);transition:border-color 0.15s ease,box-shadow 0.15s ease;font-family:inherit;}
.form-control:focus,.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(11,93,59,0.12);}
.form-input[type="file"]{padding:8px 12px;}
.form-input[type="number"]{font-variant-numeric:tabular-nums;}
.form-textarea{min-height:80px;resize:vertical;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.form-error{color:var(--error);font-size:12px;margin-top:4px;}
.form-help{color:var(--muted);font-size:11.5px;margin-top:4px;}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:8px;font-weight:600;font-size:14px;transition:all 0.15s ease;border:none;cursor:pointer;}
.btn-primary{background:var(--brand);color:#fff;}
.btn-primary:hover{background:var(--brand-dk);}
.btn-ghost{color:var(--ink-soft);}
.btn-ghost:hover{background:var(--bg-soft);}
.btn-outline{border:1.5px solid var(--ink);color:var(--ink);}
.btn-outline:hover{background:var(--ink);color:#fff;}
.btn-danger{background:#fff;color:var(--error);border:1.5px solid var(--error);}
.btn-danger:hover{background:var(--error);color:#fff;}
.btn-sm{padding:6px 12px;font-size:12.5px;}
.btn-lg{padding:13px 22px;font-size:15px;}
.btn-block{width:100%;justify-content:center;}

/* Tables — Horizontal scroll wrapper, works on Chrome mobile + Safari + desktop */
.table-wrap{
  background:#fff;
  border-radius:12px;
  border:1px solid var(--line);
  /* Horizontal scroll for wide tables (this worked, keep it) */
  overflow-x:auto !important;
  /* overflow-y:visible (NOT hidden) — on some iOS/Android browsers, overflow-y:hidden
     + -webkit-overflow-scrolling:touch turns this into a scroll container that traps
     vertical touch, blocking page scroll. 'visible' lets vertical touch reach the page. */
  overflow-y:visible;
  width:100%;
  max-width:100%;
  /* Firefox scrollbar */
  scrollbar-width:thin;
  scrollbar-color:#0b5d3b #f0f4f1;
}
/* Visible green scrollbar (always show on touch devices) */
.table-wrap::-webkit-scrollbar{
  height:10px;
  -webkit-appearance:none;
}
.table-wrap::-webkit-scrollbar-track{
  background:#f0f4f1;
}
.table-wrap::-webkit-scrollbar-thumb{
  background:#0b5d3b;
  border-radius:5px;
}
.table-wrap::-webkit-scrollbar-thumb:hover{
  background:#074229;
}
/* Sibling element to hint scroll on mobile */
.table-scroll-hint{
  display:none;
  text-align:center;
  font-size:11px;
  color:#888;
  padding:6px;
  background:#fafaf6;
  border:1px solid var(--line);
  border-top:none;
  border-radius:0 0 12px 12px;
  letter-spacing:0.1em;
  font-weight:600;
  margin-top:-1px;
}
@media (max-width:900px){
  .table-scroll-hint{display:block;}
}

/* Base table rule */
table.data{
  border-collapse:collapse;
  font-size:14px;
  width:auto;
}
/* Desktop: fill the wrap */
.table-wrap table.data{
  min-width:100%;
}
/* CRITICAL: nowrap on all cells forces table to take natural width */
.table-wrap table.data th,
.table-wrap table.data td{
  white-space:nowrap !important;
}
/* Opt-in wrap for specific cells */
.table-wrap table.data .wrap-cell{
  white-space:normal !important;
}

/* MOBILE: force table to overflow viewport so scroll definitely triggers */
@media (max-width:900px){
  .table-wrap table.data{
    min-width:700px;             /* fallback for older browsers */
    min-width:max(700px, 100%);  /* modern browsers: at least 700px OR full width */
  }
}
table.data thead th{background:#f7f9f8;text-align:left;padding:12px 14px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--muted);border-bottom:1px solid var(--line);white-space:nowrap;}
table.data tbody td{padding:14px;border-bottom:1px solid var(--line);}
table.data tbody tr:last-child td{border-bottom:none;}
table.data tbody tr:hover{background:#fafbfc;}
.empty-state{padding:48px 24px;text-align:center;color:var(--muted);}
.empty-state svg{margin:0 auto 16px;display:block;opacity:0.5;}

/* Badges */
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:600;letter-spacing:0.02em;}
.badge-success{background:#e8f5ee;color:#0b5d3b;}
.badge-warn{background:#fff8e6;color:#7c5a09;}
.badge-error{background:#fdecea;color:#88231a;}
.badge-info{background:#eaf2fc;color:#1c4587;}
.badge-muted{background:var(--bg-soft);color:var(--muted);}

/* Alerts */
.alert{padding:12px 14px;border-radius:8px;font-size:13.5px;margin-bottom:16px;border-left:4px solid;}
.alert-success{background:#e8f5ee;color:#084a2f;border-left-color:var(--success);}
.alert-error{background:#fdecea;color:#88231a;border-left-color:var(--error);}
.alert-warn{background:#fff8e6;color:#7c5a09;border-left-color:var(--accent);}
.alert-info{background:#eaf2fc;color:#1c4587;border-left-color:#3a82f6;}

/* Login */
.auth-wrap{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#f7f9f8 0%,#eef4f0 100%);padding:20px;}
.auth-card{width:100%;max-width:460px;background:#fff;border-radius:16px;padding:44px 40px;box-shadow:0 24px 60px rgba(10,22,40,0.12);}
.auth-card .logo{display:flex;justify-content:center;align-items:center;gap:10px;margin-bottom:8px;}
.auth-card .logo-mark{width:42px;height:42px;background:var(--brand);border-radius:9px;display:grid;place-items:center;}
.auth-card .logo-text{font-family:'Fraunces',serif;font-weight:700;font-size:22px;color:var(--ink);}
.auth-card .logo-text span{color:var(--brand);}
.auth-card h2{font-family:'Fraunces',serif;font-size:26px;font-weight:600;text-align:center;margin:18px 0 6px;letter-spacing:-0.01em;}
.auth-card p.sub{text-align:center;font-size:14px;color:var(--ink-soft);margin-bottom:24px;}
.auth-card .form-actions{margin-top:18px;}
.auth-card .footer-note{text-align:center;font-size:12.5px;color:var(--muted);margin-top:20px;padding-top:20px;border-top:1px solid var(--line);}
@media (max-width: 500px) {
  .auth-card { padding: 30px 24px; }
}

/* Util */
.flex-between{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.flex{display:flex;}
.gap-1{gap:8px;} .gap-2{gap:14px;}
.mt-1{margin-top:8px;} .mt-2{margin-top:16px;} .mt-3{margin-top:24px;}
.mb-1{margin-bottom:8px;} .mb-2{margin-bottom:16px;} .mb-3{margin-bottom:24px;}
.text-muted{color:var(--muted);} .text-brand{color:var(--brand);} .text-error{color:var(--error);}
.text-center{text-align:center;}
.spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,0.3);border-top-color:#fff;border-radius:50%;animation:spin 0.7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ============================================================
 * STATUS BADGES — color-graded per stage category (jinderv4)
 * ============================================================ */
.status-badges-css{display:none;} /* sentinel for grep */

.badge.badge-initial   { background:#f1f5f9; color:#475569; border-color:#cbd5e1; }
.badge.badge-info      { background:#eff6ff; color:#1d4ed8; border-color:#93c5fd; }
.badge.badge-docs      { background:#faf5ff; color:#7e22ce; border-color:#d8b4fe; }
.badge.badge-review    { background:#f0fdfa; color:#0f766e; border-color:#5eead4; }
.badge.badge-due       { background:#fff7ed; color:#c2410c; border-color:#fdba74; }
.badge.badge-paid      { background:#f0fdf4; color:#15803d; border-color:#86efac; }
.badge.badge-approved  { background:#dcfce7; color:#14532d; border-color:#4ade80; font-weight:800; }
.badge.badge-disbursed { background:#fefce8; color:#854d0e; border-color:#facc15; font-weight:800;
                         box-shadow:0 0 0 3px rgba(250,204,21,0.15); }
.badge.badge-closed    { background:#e2e8f0; color:#1e293b; border-color:#94a3b8; font-weight:800; }
.badge.badge-rejected  { background:#fef2f2; color:#991b1b; border-color:#fca5a5; font-weight:800; }

/* ============================================================
 * MOBILE-FRIENDLY DROPDOWN (form-select-big)
 * Bigger tap targets for agents using phones (52px height)
 * ============================================================ */
.form-select-big{
  width:100%;
  padding:14px 44px 14px 16px;
  border:1.5px solid var(--line);
  border-radius:10px;
  background:#fff;
  font-size:16px;                    /* 16px prevents iOS auto-zoom */
  line-height:1.4;
  color:var(--ink);
  cursor:pointer;
  min-height:52px;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230b5d3b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
}
.form-select-big:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 4px rgba(11,93,59,0.15);
}
.form-select-big optgroup{
  font-weight:800;
  font-size:14px;
  color:#1a1a1a;
  font-style:normal;
  background:#f1f5f9;
  padding:12px 0;
  letter-spacing:0.02em;
}
.form-select-big option{
  color:#1a1a1a;
  background:#fff;
  padding:12px 16px;
  font-size:15px;
  line-height:1.5;
  font-weight:500;
}
/* Disabled (locked) options: visually muted, not selectable */
.form-select-big option:disabled,
.form-select-big option[disabled]{
  color:#cbd5e1 !important;
  background:#f8fafc !important;
  font-style:italic;
}
/* Per-category optgroup label colors (multi-color, not all-green) */
.form-select-big optgroup[label*="Initial"]    { color:#475569; }
.form-select-big optgroup[label*="Documents"]  { color:#7e22ce; }
.form-select-big optgroup[label*="Review"]     { color:#0f766e; }
.form-select-big optgroup[label*="Processing"] { color:#c2410c; }
.form-select-big optgroup[label*="Agreement"]  { color:#1d4ed8; }
.form-select-big optgroup[label*="Holding"]    { color:#be185d; }
.form-select-big optgroup[label*="Insurance"]  { color:#6d28d9; }
.form-select-big optgroup[label*="NOC"]        { color:#0891b2; }
.form-select-big optgroup[label*="Intercity"]  { color:#a16207; }
.form-select-big optgroup[label*="Final"]      { color:#15803d; }
.form-select-big optgroup[label*="Rejected"]   { color:#991b1b; }

/* ============================================================
 * Status update card (used in lead-view)
 * ============================================================ */
.status-update-card .current-status-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  background:var(--bg-soft);
  border-radius:8px;
  border-left:3px solid var(--accent);
  margin-bottom:14px;
  font-size:13px;
}
.status-update-card .current-status-row .lbl{
  color:var(--muted);
  font-weight:600;
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:0.05em;
}
.status-update-card .lock-help{
  font-size:11.5px;
  color:var(--muted);
  margin-top:6px;
  line-height:1.5;
}
.status-update-card .lock-help .lock-icon{ color:#94a3b8; }
.status-update-card .pay-help{
  font-size:12px;
  color:#c2410c;
  background:#fff7ed;
  border-left:3px solid #fdba74;
  padding:8px 12px;
  border-radius:6px;
  margin-top:8px;
  display:none;
}
.status-update-card.show-pay-help .pay-help{ display:block; }


.sidebar-toggle{display:none;}
.sidebar-close{display:none;}
.sidebar-backdrop{display:none;}
@media (max-width:900px){
  .layout{grid-template-columns:minmax(0, 1fr);}
  .sidebar{position:fixed;top:0;left:0;width:var(--sidebar-w);transform:translateX(-100%);transition:transform 0.25s ease;z-index:200;}
  .sidebar.open{transform:translateX(0);}
  .sidebar-toggle{display:grid;place-items:center;width:38px;height:38px;border-radius:8px;}

  /* MOBILE TABLE FIX: reduce content/card padding so tables get more room to scroll */
  .content{padding:16px 12px;}
  .card{padding:16px 14px;border-radius:10px;}
  .topbar{padding:12px 14px;}
  .topbar h1{font-size:18px;}

  /* CRITICAL: .content and .main must enforce min-width:0 so grid children can shrink */
  .main, .content{min-width:0;max-width:100vw;overflow-x:hidden;}
  /* But table-wrap is the EXCEPTION — it allows horizontal scroll itself */
  .content .table-wrap{overflow-x:auto;}

  /* Close button (X) inside sidebar — only visible on mobile when sidebar is open */
  .sidebar-close{
    position:absolute;
    top:14px;
    right:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    border-radius:8px;
    background:rgba(255,255,255,0.08);
    color:#fff;
    cursor:pointer;
    z-index:10;
  }
  .sidebar-close:hover,
  .sidebar-close:active{
    background:rgba(255,255,255,0.16);
  }

  /* Dark backdrop overlay — appears when sidebar opens, click to close */
  .sidebar-backdrop{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.5);
    z-index:190;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.25s ease;
  }
  .sidebar-backdrop.active{
    opacity:1;
    pointer-events:auto;
  }

  .form-row{grid-template-columns:1fr;}
}