/* FlexiRider Vendor Portal — shared styles. Brand: orange. White-label-ready via CSS variables. */
:root {
  --brand-name: 'FLEXIRIDER';
  --brand-primary: #E64E12;
  --brand-primary-dark: #D43D0B;
  --brand-primary-darker: #B0310A;
  --brand-accent: #ff8c5a;
  --brand-50: #fff7ed;
  --brand-100: #ffedd5;
  --brand-tint: #fff3ee;
  --brand-success: #16a34a;
  --brand-danger: #dc2626;
  --brand-warning: #d97706;
  --brand-text-on-primary: #ffffff;
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-2: #f9fafb;
  --border: #e5e7eb;
  --text: #0C1117;
  --text-muted: #64748b;
  --shadow: 0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(230,78,18,.10);
  --radius: 8px;
  --radius-lg: 12px;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif; font-size: 14px; }
a { color: var(--brand-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; }

.app { display: flex; min-height: 100vh; }
.sidebar { width: 230px; background: var(--surface); border-right: 1px solid var(--border); padding: 16px 0; flex-shrink: 0; }
.sidebar h1 { font-size: 18px; padding: 0 18px 12px; margin: 0; border-bottom: 1px solid var(--border); color: var(--brand-primary); }
.sidebar nav { padding: 12px 8px; }
.sidebar a.nav-item { display:flex; align-items:center; gap:10px; padding: 10px 14px; border-radius: 6px; color: var(--text); margin-bottom: 2px; transition: background .15s; }
.sidebar a.nav-item:hover { background: var(--brand-50); text-decoration:none; color: var(--brand-primary); }
.sidebar a.nav-item.active { background: var(--brand-primary); color: #fff; }
.sidebar a.nav-item.active:hover { background: var(--brand-primary-dark); color:#fff; }
.sidebar a.nav-item .ic { width: 18px; display:inline-block; text-align:center; }
.sidebar .footer-actions { position: sticky; bottom: 0; padding: 12px 14px; border-top: 1px solid var(--border); background: var(--surface); }

.main { flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar { background: var(--surface); border-bottom: 1px solid var(--border); padding: 12px 24px; display:flex; align-items:center; justify-content:space-between; }
.topbar .title { font-size: 18px; font-weight: 600; color: var(--text); }
.topbar .actions { display:flex; align-items:center; gap:10px; }
.content { padding: 24px; flex: 1; overflow-x:auto; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow); margin-bottom: 16px; }
.card h2 { margin: 0 0 12px; font-size: 16px; color: var(--text); }
.card h3 { margin: 0 0 8px; font-size: 14px; color: var(--text-muted); font-weight: 500; }

.kpi-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--surface); padding: 16px; border-radius: var(--radius-lg); border: 1px solid var(--border); border-left: 3px solid var(--brand-primary); }
.kpi .label { color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
.kpi .value { font-size: 24px; font-weight: 700; margin-top: 4px; color: var(--text); }
.kpi .delta { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
table th { text-align:left; padding: 10px 12px; background: var(--surface-2); border-bottom: 1px solid var(--border); font-weight: 600; color: var(--text-muted); }
table td { padding: 10px 12px; border-bottom: 1px solid var(--border); }
table tr:hover td { background: var(--brand-50); }

.btn { display:inline-block; padding: 8px 14px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; font-size: 13px; font-weight: 500; transition: background .15s, border-color .15s; }
.btn:hover { background: var(--surface-2); }
.btn.btn-primary { background: var(--brand-primary); color: var(--brand-text-on-primary); border-color: var(--brand-primary); }
.btn.btn-primary:hover { background: var(--brand-primary-dark); border-color: var(--brand-primary-dark); }
.btn.btn-success { background: var(--brand-success); color:#fff; border-color: var(--brand-success); }
.btn.btn-danger { background: var(--brand-danger); color:#fff; border-color: var(--brand-danger); }
.btn.btn-outline { background: transparent; color: var(--brand-primary); border-color: var(--brand-primary); }
.btn.btn-outline:hover { background: var(--brand-50); }
.btn.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

input, select, textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; font-family: inherit; background: var(--surface); color: var(--text); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(230,78,18,.12); }
label { display:block; font-size: 12px; color: var(--text-muted); margin-bottom: 4px; font-weight: 500; }
.form-row { display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 12px; margin-bottom: 12px; }

.badge { display:inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.badge.badge-success { background: #dcfce7; color: var(--brand-success); }
.badge.badge-warn    { background: #fef3c7; color: var(--brand-warning); }
.badge.badge-danger  { background: #fee2e2; color: var(--brand-danger); }
.badge.badge-info    { background: var(--brand-tint); color: var(--brand-primary); }
.badge.badge-muted   { background: #e5e7eb; color: var(--text-muted); }
.badge.badge-brand   { background: var(--brand-primary); color:#fff; }

.modal-bg { position:fixed; inset:0; background:rgba(12,17,23,.55); display:flex; align-items:center; justify-content:center; z-index:100; }
.modal { background: var(--surface); border-radius: var(--radius-lg); padding: 24px; max-width: 600px; width: 90%; max-height: 85vh; overflow-y:auto; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.modal .modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom: 16px; border-bottom: 1px solid var(--border); padding-bottom: 12px; }
.modal h3 { margin:0; color: var(--text); }
.modal .close { background:none; border:none; font-size: 22px; cursor: pointer; color: var(--text-muted); }
.modal .close:hover { color: var(--brand-primary); }

.toggle { position: relative; display: inline-block; width: 44px; height: 24px; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle .slider { position:absolute; cursor:pointer; inset:0; background-color: #cbd5e1; border-radius: 24px; transition: .2s; }
.toggle .slider::before { position:absolute; content:""; height:18px; width:18px; left:3px; bottom:3px; background-color:#fff; border-radius:50%; transition:.2s; }
.toggle input:checked + .slider { background-color: var(--brand-primary); }
.toggle input:checked + .slider::before { transform: translateX(20px); }

.report-bar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding: 10px 12px; background: var(--surface-2); border-radius: var(--radius); margin-bottom: 12px; }
.report-bar select, .report-bar input { width: auto; min-width: 130px; }

.empty { text-align:center; color: var(--text-muted); padding: 40px 20px; }
.muted { color: var(--text-muted); }
.text-right { text-align: right; }
.flex { display:flex; gap:12px; align-items:center; }
.flex-between { display:flex; justify-content:space-between; align-items:center; }
.spacer { flex: 1; }
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; }

.login-page {
  display:flex; align-items:center; justify-content:center; min-height:100vh;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
}
.login-card { background: var(--surface); padding: 32px; border-radius: var(--radius-lg); box-shadow: 0 20px 60px rgba(176,49,10,.25); width: 100%; max-width: 380px; }
.login-card h1 { margin: 0 0 4px; color: var(--brand-primary); font-size: 22px; }
.login-card .sub { color: var(--text-muted); margin-bottom: 24px; font-size: 13px; }

/* Plan card highlight (subscription page) */
.plan-card { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; background: var(--surface); transition: all .2s; }
.plan-card:hover { border-color: var(--brand-primary); box-shadow: var(--shadow-md); }
.plan-card.is-current { border-color: var(--brand-primary); background: var(--brand-50); }
.plan-card .plan-price { font-size: 26px; font-weight: 700; color: var(--brand-primary); line-height:1; }

/* ============================================================
   UI-MAX v2 ADDITIONS — Wave 1 (append-only, 2026-05-13)
   Adds: extended tokens, top-bar v2, grouped sidebar, welcome strip,
   exception strip, kanban order rail, refreshed KPI cards, mini-cards,
   fleet hint card, universal status pills.
   All existing selectors above this comment are UNCHANGED.
   ============================================================ */

:root {
  --vendor-accent:        #1F3A5F;
  --vendor-accent-soft:   #EAF1FA;
  --fleet-accent:         #0E7C66;
  --fleet-accent-soft:    #E5F5F1;
  --master-accent:        #5B2BD9;
  --master-accent-soft:   #F0EAFB;

  --status-new:        #E64E12;
  --status-prep:       #B86E00;
  --status-handover:   #1E5FB8;
  --status-done:       #0A8754;
  --status-issue:      #C8261A;
  --status-paused:     #8A7F75;

  --r-pill: 999px;
  --shadow-e1: 0 1px 2px rgba(26,18,7,.04), 0 1px 1px rgba(26,18,7,.03);
  --shadow-e2: 0 4px 12px rgba(26,18,7,.06), 0 2px 4px rgba(26,18,7,.04);
  --shadow-e3: 0 12px 32px rgba(26,18,7,.10);

  --brand-primary-soft: var(--brand-tint);
}

/* Top-bar v2 */
.topbar-v2 { display:flex; align-items:center; gap:14px; padding: 12px 24px; background: var(--surface); border-bottom: 1px solid var(--border); flex-wrap:wrap; }
.topbar-v2 .brand-chip { display:flex; align-items:center; gap:10px; font-weight:700; color: var(--brand-primary); font-size: 13px; letter-spacing: .5px; }
.topbar-v2 .brand-chip img { height:22px; }
.topbar-v2 .scope-switcher { display:flex; align-items:center; gap:6px; padding: 6px 12px; border-radius: 6px; background: var(--surface-2); border:1px solid var(--border); font-size: 13px; cursor: pointer; transition: background .15s, border-color .15s; }
.topbar-v2 .scope-switcher:hover { background: var(--brand-50); border-color: var(--brand-primary); }
.topbar-v2 .scope-switcher .scope-label { color: var(--text-muted); margin-right:4px; }
.topbar-v2 .scope-switcher .scope-value { font-weight:600; color: var(--text); }
.topbar-v2 .mode-group { display:flex; align-items:center; gap:4px; padding: 3px; background: var(--surface-2); border-radius: var(--r-pill); border:1px solid var(--border); }
.topbar-v2 .mode-pill { display:flex; align-items:center; gap:6px; padding: 5px 12px; border-radius: var(--r-pill); font-size: 12px; font-weight:600; cursor: pointer; color: var(--text-muted); transition: all .15s; user-select: none; }
.topbar-v2 .mode-pill:focus { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.topbar-v2 .mode-pill .dot { width:8px; height:8px; border-radius:50%; background: #cbd5e1; transition: background .15s; }
.topbar-v2 .mode-pill.active.send { background: var(--brand-primary); color:#fff; }
.topbar-v2 .mode-pill.active.send .dot { background: #fff; }
.topbar-v2 .mode-pill.active.fleet { background: var(--fleet-accent); color:#fff; }
.topbar-v2 .mode-pill.active.fleet .dot { background: #fff; }
.topbar-v2 .global-search { flex:1; max-width: 360px; min-width: 180px; padding: 7px 12px; border-radius: 6px; background: var(--surface-2); border:1px solid var(--border); font-size: 13px; color: var(--text-muted); cursor: text; display:flex; align-items:center; justify-content:space-between; }
.topbar-v2 .global-search:hover { border-color: var(--brand-primary); }
.topbar-v2 .global-search .kbd { font-size: 11px; padding: 1px 5px; background: var(--surface); border:1px solid var(--border); border-radius:4px; color: var(--text-muted); }
.topbar-v2 .wallet-chip { display:flex; align-items:center; gap:6px; padding: 6px 10px; border-radius: 6px; background: var(--brand-50); color: var(--brand-primary); font-weight: 600; font-size: 13px; cursor: pointer; transition: background .15s; }
.topbar-v2 .wallet-chip:hover { background: var(--brand-100); }
.topbar-v2 .bell { position:relative; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 16px; line-height: 1; transition: background .15s; }
.topbar-v2 .bell:hover { background: var(--surface-2); }
.topbar-v2 .bell .badge-count { position:absolute; top:-2px; right:-2px; background: var(--status-issue); color:#fff; font-size: 10px; font-weight:700; padding: 0 5px; border-radius: 999px; min-width: 16px; text-align:center; line-height: 14px; }
.topbar-v2 .avatar { width:32px; height:32px; border-radius:50%; background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; cursor: pointer; }

/* Grouped sidebar */
.sidebar .nav-group { padding: 6px 14px 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--text-muted); margin-top: 8px; }
.sidebar .nav-group:first-child { margin-top: 0; }
.sidebar .nav-group .badge-mini { display:inline-block; margin-left: 6px; font-size: 9px; padding: 1px 5px; border-radius: 999px; background: var(--fleet-accent-soft); color: var(--fleet-accent); font-weight: 700; letter-spacing: .3px; }

/* Welcome strip */
.welcome-strip { background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent)); color:#fff; padding: 18px 24px; border-radius: var(--radius-lg); margin-bottom: 16px; box-shadow: var(--shadow-md); position: relative; overflow: hidden; }
.welcome-strip .ws-greeting { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.welcome-strip .ws-meta { font-size: 13px; opacity: .92; }
.welcome-strip .ws-meta .sep { margin: 0 8px; opacity: .55; }
.welcome-strip .ws-meta .verified { display:inline-flex; align-items:center; gap:3px; padding: 2px 6px; background: rgba(255,255,255,.18); border-radius: 4px; font-size: 11px; font-weight:600; margin-left: 6px; }
.welcome-strip .ws-actions { position:absolute; top: 18px; right: 24px; display:flex; gap:8px; }
.welcome-strip .ws-actions .btn { background: rgba(255,255,255,.18); color:#fff; border-color: rgba(255,255,255,.3); }
.welcome-strip .ws-actions .btn:hover { background: rgba(255,255,255,.3); }
.welcome-strip .ws-line { font-size: 13px; opacity: .9; margin-top: 8px; }

/* Exception strip */
.exception-strip { background: #fef3c7; border-left: 4px solid var(--brand-warning); padding: 12px 16px; border-radius: 6px; margin-bottom: 16px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.exception-strip.danger { background: #fee2e2; border-left-color: var(--status-issue); }
.exception-strip .ex-item { font-size: 13px; color: var(--text); display:flex; align-items:center; gap:6px; }
.exception-strip .ex-item .icon { font-size: 14px; }
.exception-strip .spacer { flex:1; }

/* Refreshed KPI tiles */
.kpi-grid-v2 { display:grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi-v2 { background: var(--surface); padding: 16px; border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-e1); position: relative; transition: box-shadow .15s, transform .15s; border-top: 3px solid var(--brand-primary); }
.kpi-v2:hover { box-shadow: var(--shadow-e2); transform: translateY(-1px); }
.kpi-v2.live { border-top-color: var(--brand-primary); }
.kpi-v2.gmv { border-top-color: var(--vendor-accent); }
.kpi-v2.handoff { border-top-color: var(--status-prep); }
.kpi-v2.eta { border-top-color: var(--status-handover); }
.kpi-v2.csat { border-top-color: var(--status-done); }
.kpi-v2 .kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); font-weight:600; }
.kpi-v2 .kpi-value { font-size: 28px; font-weight: 700; margin-top: 4px; color: var(--text); line-height:1.1; }
.kpi-v2 .kpi-delta { font-size: 12px; margin-top: 6px; color: var(--text-muted); display:flex; align-items:center; gap:4px; }
.kpi-v2 .kpi-delta .up { color: var(--status-done); }
.kpi-v2 .kpi-delta .down { color: var(--status-issue); }
.kpi-v2 .kpi-spark { display:flex; align-items: flex-end; gap: 2px; height: 18px; margin-top: 8px; }
.kpi-v2 .kpi-spark .bar { width: 6px; background: var(--brand-primary); opacity: .35; border-radius: 1px; transition: opacity .2s; }
.kpi-v2:hover .kpi-spark .bar { opacity: .65; }
.kpi-v2 .kpi-status-list { display:flex; gap:10px; margin-top:8px; flex-wrap:wrap; font-size:11px; }
.kpi-v2 .kpi-status-list .si { display:flex; align-items:center; gap:4px; color: var(--text-muted); }
.kpi-v2 .kpi-status-list .si .dot { width:6px; height:6px; border-radius:50%; }
.kpi-v2 .kpi-status-list .si.new .dot { background: var(--status-new); }
.kpi-v2 .kpi-status-list .si.prep .dot { background: var(--status-prep); }
.kpi-v2 .kpi-status-list .si.handover .dot { background: var(--status-handover); }
.kpi-v2 .kpi-status-list .si.done .dot { background: var(--status-done); }

/* Kanban order rail */
.kanban { display:grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kanban-col { background: var(--surface-2); border-radius: var(--radius-lg); padding: 12px; min-height: 200px; }
.kanban-col .col-head { display:flex; align-items:center; justify-content:space-between; padding: 0 4px 10px; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
.kanban-col .col-head .col-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); display:flex; align-items:center; gap:6px; }
.kanban-col .col-head .col-title .dot { width:8px; height:8px; border-radius:50%; }
.kanban-col.new .col-head .col-title .dot { background: var(--status-new); }
.kanban-col.prep .col-head .col-title .dot { background: var(--status-prep); }
.kanban-col.handover .col-head .col-title .dot { background: var(--status-handover); }
.kanban-col.done .col-head .col-title .dot { background: var(--status-done); }
.kanban-col .col-head .col-count { font-size: 13px; font-weight: 700; color: var(--text); background: var(--surface); padding: 1px 8px; border-radius: var(--r-pill); border: 1px solid var(--border); }
.kanban-col .cards { display:flex; flex-direction:column; gap: 8px; }
.kanban-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 12px; cursor: pointer; transition: box-shadow .15s, transform .15s; border-left: 3px solid var(--border); }
.kanban-card:hover { box-shadow: var(--shadow-e2); transform: translateY(-1px); }
.kanban-card.new { border-left-color: var(--status-new); animation: kanban-pulse 1.5s ease-out 1; }
.kanban-card.prep { border-left-color: var(--status-prep); }
.kanban-card.handover { border-left-color: var(--status-handover); }
.kanban-card.done { border-left-color: var(--status-done); opacity: .85; }
.kanban-card .kc-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom: 6px; }
.kanban-card .kc-id { font-family: ui-monospace, "DM Mono", "Menlo", "Consolas", monospace; font-size: 12px; font-weight:600; color: var(--text); }
.kanban-card .kc-time { font-size: 11px; color: var(--text-muted); }
.kanban-card .kc-amt { font-size: 16px; font-weight: 700; color: var(--text); }
.kanban-card .kc-cust { font-size: 12px; color: var(--text-muted); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kanban-col .col-empty { text-align:center; color: var(--text-muted); font-size: 12px; padding: 28px 8px; font-style: italic; }
@keyframes kanban-pulse {
  0% { box-shadow: 0 0 0 0 rgba(230,78,18,.5); }
  100% { box-shadow: 0 0 0 14px rgba(230,78,18,0); }
}

/* Bottom row mini-cards */
.row-2 { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.mini-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-e1); }
.mini-card .mc-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); font-weight:600; margin-bottom: 4px; }
.mini-card .mc-value { font-size: 22px; font-weight: 700; color: var(--text); }
.mini-card .mc-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.mini-card .mc-progress { height: 6px; background: var(--surface-2); border-radius: 3px; margin-top: 10px; overflow: hidden; }
.mini-card .mc-progress .bar { height: 100%; background: var(--brand-primary); border-radius: 3px; transition: width .3s; }
.mini-card .mc-actions { display:flex; gap:8px; margin-top: 10px; }

/* Fleet hint card */
.fleet-hint-card { background: var(--fleet-accent-soft); border: 1px dashed var(--fleet-accent); border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 16px; display:flex; align-items:center; gap:14px; }
.fleet-hint-card .fhc-icon { font-size: 26px; }
.fleet-hint-card .fhc-body { flex:1; }
.fleet-hint-card .fhc-title { font-size: 14px; font-weight: 700; color: var(--fleet-accent); margin-bottom: 4px; }
.fleet-hint-card .fhc-sub { font-size: 12px; color: var(--text-muted); }
.fleet-hint-card .btn-fleet { background: var(--fleet-accent); color:#fff; border-color: var(--fleet-accent); }
.fleet-hint-card .btn-fleet:hover { background: #0a6b58; border-color: #0a6b58; }

/* Universal status pills */
.pill { display:inline-flex; align-items:center; gap:4px; padding: 3px 8px; border-radius: var(--r-pill); font-size: 11px; font-weight: 600; }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; }
.pill.new { background: var(--brand-primary-soft); color: var(--brand-primary); }
.pill.new .dot { background: var(--brand-primary); }
.pill.prep { background: #fef3c7; color: var(--status-prep); }
.pill.prep .dot { background: var(--status-prep); }
.pill.handover { background: #dbeafe; color: var(--status-handover); }
.pill.handover .dot { background: var(--status-handover); }
.pill.done { background: #dcfce7; color: var(--status-done); }
.pill.done .dot { background: var(--status-done); }
.pill.issue { background: #fee2e2; color: var(--status-issue); }
.pill.issue .dot { background: var(--status-issue); }

/* Section heading */
.section-h { margin: 4px 4px 10px; font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; font-weight: 700; }

/* Responsive */
@media (max-width: 980px) {
  .kanban { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
  .row-2 { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .kanban { grid-template-columns: 1fr; }
  .topbar-v2 { gap: 8px; }
  .topbar-v2 .global-search { order: 99; width: 100%; max-width: none; }
  .welcome-strip .ws-actions { position: static; margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .kanban-card.new { animation: none; }
  .kpi-v2:hover, .kanban-card:hover { transform: none; }
}

/* Wave 1.1 — Brand name visibility (sniper append) */
.topbar-v2 .brand-chip { gap: 8px; }
.topbar-v2 .brand-chip .brand-name { font-weight: 800; color: var(--brand-primary); font-size: 14px; letter-spacing: .4px; }
.topbar-v2 .brand-chip .brand-sep { color: var(--text-muted); font-weight: 400; padding: 0 2px; }
.topbar-v2 .brand-chip .brand-suffix { font-size: 11px; color: var(--text-muted); font-weight: 700; letter-spacing: .5px; padding: 2px 6px; background: var(--brand-50); border-radius: 4px; }

/* ============================================================
   UI-MAX v2 — Wave 2 additions (append-only, 2026-05-13)
   Adds: order detail drawer, dispatch override panel, status timeline,
   source chips, vertical-aware tweaks.
   ============================================================ */

/* Order detail drawer (slide-in from right) */
.drawer-scrim { position: fixed; inset: 0; background: rgba(12,17,23,.45); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 90; }
.drawer-scrim.open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; height: 100vh; width: 480px; max-width: 92vw; background: var(--surface); box-shadow: -8px 0 32px rgba(12,17,23,.18); transform: translateX(100%); transition: transform .25s ease-out; z-index: 100; display: flex; flex-direction: column; }
.drawer.open { transform: translateX(0); }
.drawer .dr-head { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-shrink: 0; }
.drawer .dr-head .dr-title { font-size: 16px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; }
.drawer .dr-head .dr-close { background: none; border: none; font-size: 22px; cursor: pointer; color: var(--text-muted); padding: 4px 8px; border-radius: 6px; line-height: 1; }
.drawer .dr-head .dr-close:hover { background: var(--surface-2); color: var(--brand-primary); }
.drawer .dr-body { padding: 16px 20px; overflow-y: auto; flex: 1; }
.drawer .dr-section { margin-bottom: 20px; }
.drawer .dr-section:last-child { margin-bottom: 0; }
.drawer .dr-section .dr-section-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--text-muted); margin-bottom: 8px; }
.drawer .dr-section .dr-section-body { background: var(--surface-2); border-radius: 8px; padding: 12px; font-size: 13px; }
.drawer .dr-foot { padding: 12px 20px; border-top: 1px solid var(--border); display: flex; gap: 8px; flex-wrap: wrap; background: var(--surface); flex-shrink: 0; }
.drawer .dr-foot .btn { flex: 1; min-width: 90px; text-align: center; }

/* Drawer customer row */
.drawer .dr-customer { display: flex; align-items: center; gap: 10px; }
.drawer .dr-customer .dr-cust-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.drawer .dr-customer .dr-cust-name { font-weight: 600; }
.drawer .dr-customer .dr-cust-phone { font-size: 12px; color: var(--text-muted); }
.drawer .dr-customer .dr-cust-actions { margin-left: auto; display: flex; gap: 6px; }

/* Drawer items list */
.drawer .dr-item-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: 13px; }
.drawer .dr-item-row:last-child { border-bottom: none; }
.drawer .dr-item-row .dr-item-name { flex: 1; }
.drawer .dr-item-row .dr-item-qty { color: var(--text-muted); margin-right: 8px; }
.drawer .dr-item-row .dr-item-amt { font-weight: 600; font-family: ui-monospace, "DM Mono", monospace; }
.drawer .dr-veg-dot { display: inline-block; width: 12px; height: 12px; border: 1.5px solid var(--brand-success); border-radius: 2px; position: relative; margin-right: 6px; vertical-align: -2px; }
.drawer .dr-veg-dot::after { content: ''; position: absolute; inset: 2px; background: var(--brand-success); border-radius: 50%; }
.drawer .dr-veg-dot.nonveg { border-color: var(--brand-danger); }
.drawer .dr-veg-dot.nonveg::after { background: var(--brand-danger); }
.drawer .dr-veg-dot.egg { border-color: var(--brand-warning); }
.drawer .dr-veg-dot.egg::after { background: var(--brand-warning); }

/* Drawer charges block */
.drawer .dr-charges-row { display: flex; justify-content: space-between; padding: 3px 0; font-size: 12px; color: var(--text-muted); }
.drawer .dr-charges-row.total { font-size: 14px; font-weight: 700; color: var(--text); border-top: 1px solid var(--border); padding-top: 6px; margin-top: 4px; }

/* Dispatch override panel */
.dispatch-panel { padding: 12px; }
.dispatch-panel .dp-current { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 10px; }
.dispatch-panel .dp-current .pref-name { font-weight: 600; }
.dispatch-panel .dp-toggle { color: var(--brand-primary); cursor: pointer; font-weight: 600; font-size: 12px; }
.dispatch-panel .dp-toggle:hover { text-decoration: underline; }
.dispatch-panel .dp-options { display: none; flex-direction: column; gap: 6px; margin-top: 8px; }
.dispatch-panel.open .dp-options { display: flex; }
.dispatch-panel .dp-opt { display: flex; align-items: flex-start; gap: 8px; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font-size: 13px; }
.dispatch-panel .dp-opt input[type=radio] { margin-top: 3px; width: auto; flex-shrink: 0; }
.dispatch-panel .dp-opt:hover { border-color: var(--brand-primary); }
.dispatch-panel .dp-opt.selected { background: var(--brand-50); border-color: var(--brand-primary); }
.dispatch-panel .dp-opt .dp-opt-title { font-weight: 600; }
.dispatch-panel .dp-opt .dp-opt-sub { color: var(--text-muted); font-size: 11px; }
.dispatch-panel .dp-save { display: flex; gap: 6px; justify-content: flex-end; margin-top: 8px; }
.dispatch-panel .dp-note { font-size: 11px; color: var(--text-muted); font-style: italic; margin-top: 6px; }

/* Status timeline (in drawer) */
.timeline { display: flex; align-items: center; padding: 4px 0; flex-wrap: wrap; gap: 0; }
.timeline .tl-node { display: flex; flex-direction: column; align-items: center; flex: 1 1 0; min-width: 0; position: relative; }
.timeline .tl-node .tl-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border); z-index: 2; }
.timeline .tl-node.done .tl-dot { background: var(--brand-primary); border-color: var(--brand-primary); }
.timeline .tl-node.current .tl-dot { background: #fff; border-color: var(--brand-primary); box-shadow: 0 0 0 4px var(--brand-50); animation: pulse-dot 1.6s ease-out infinite; }
.timeline .tl-node .tl-label { font-size: 9px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); margin-top: 4px; text-align: center; white-space: nowrap; }
.timeline .tl-node .tl-time { font-size: 10px; color: var(--text-muted); margin-top: 1px; }
.timeline .tl-node.done .tl-label { color: var(--text); font-weight: 600; }
.timeline .tl-node.current .tl-label { color: var(--brand-primary); font-weight: 700; }
.timeline .tl-line { height: 2px; background: var(--border); flex: 1 1 0; align-self: flex-start; margin-top: 7px; }
.timeline .tl-line.done { background: var(--brand-primary); }
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 4px var(--brand-50); }
  50% { box-shadow: 0 0 0 8px var(--brand-50); }
}

/* OTP block */
.otp-block { display: flex; gap: 12px; align-items: stretch; }
.otp-card { flex: 1; padding: 12px; background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: 8px; text-align: center; }
.otp-card .otp-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--brand-primary); font-weight: 700; margin-bottom: 4px; }
.otp-card .otp-value { font-family: ui-monospace, "DM Mono", monospace; font-size: 22px; font-weight: 800; color: var(--brand-primary); letter-spacing: 4px; }
.otp-card .otp-hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

/* Source chip on kanban cards */
.kanban-card .kc-source { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: var(--r-pill); font-size: 10px; font-weight: 600; margin-left: 6px; vertical-align: middle; }
.kanban-card .kc-source.app { background: var(--brand-primary-soft); color: var(--brand-primary); }
.kanban-card .kc-source.manual { background: var(--vendor-accent-soft); color: var(--vendor-accent); }
.kanban-card .kc-source.channel { background: #f0eafb; color: #5B2BD9; }
.kanban-card .kc-source.recurring { background: #dbeafe; color: #1E5FB8; }

/* "+ New manual order" CTA on kanban */
.kanban-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 8px; flex-wrap: wrap; }
.kanban-toolbar .kt-spacer { flex: 1; }

/* Vertical badge in welcome strip */
.welcome-strip .ws-vertical-chip { display: inline-flex; align-items: center; padding: 2px 8px; background: rgba(255,255,255,.18); border-radius: 999px; font-size: 11px; font-weight: 600; margin-left: 8px; text-transform: capitalize; letter-spacing: .3px; }

/* Items section variants (per vertical) */
.items-list .item-meta { display: flex; gap: 6px; flex-wrap: wrap; font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.items-list .item-meta .flag { padding: 1px 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; }
.items-list .item-meta .flag.rx { background: #fee2e2; color: var(--status-issue); border-color: var(--status-issue); }
.items-list .item-meta .flag.cold { background: #dbeafe; color: var(--status-handover); border-color: var(--status-handover); }
.items-list .item-meta .flag.fragile { background: #fef3c7; color: var(--status-prep); border-color: var(--status-prep); }

/* Mobile drawer */
@media (max-width: 720px) {
  .drawer { width: 100vw; max-width: 100vw; }
  .timeline .tl-node .tl-label { font-size: 8px; }
}

/* ============================================================
   UI-MAX v2.1 additions (append-only, 2026-05-13)
   Adds: vertical preview switcher, clickable KPI affordance,
   category capabilities card, order lifecycle visual.
   ============================================================ */

/* Clickable KPI cards */
.kpi-v2.clickable { cursor: pointer; }
.kpi-v2.clickable:active { transform: translateY(0); }
.kpi-v2.clickable:focus-visible { outline: 3px solid var(--brand-primary); outline-offset: 2px; }
.kpi-v2 .kpi-cta { font-size: 10px; color: var(--brand-primary); margin-top: 6px; font-weight: 600; opacity: 0; transition: opacity .15s; }
.kpi-v2.clickable:hover .kpi-cta { opacity: 1; }

/* Kanban scroll-target highlight */
@keyframes kanban-flash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(230, 78, 18, 0); }
  30% { box-shadow: 0 0 0 6px rgba(230, 78, 18, .35); }
}
.kanban.flash { animation: kanban-flash 1.2s ease-out 1; border-radius: var(--radius-lg); }

/* Vertical preview switcher (inside welcome strip) */
.welcome-strip .ws-vertical-picker { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; }
.welcome-strip .ws-vertical-picker label { color: rgba(255,255,255,.85); font-size: 11px; margin: 0; font-weight: 600; }
.welcome-strip .ws-vertical-picker select { background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 6px; padding: 4px 22px 4px 8px; font-size: 12px; font-weight: 600; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"><path d="M2 4l3 3 3-3" fill="none" stroke="white" stroke-width="1.5"/></svg>'); background-repeat: no-repeat; background-position: right 6px center; min-width: 140px; }
.welcome-strip .ws-vertical-picker select option { background: var(--brand-primary); color: #fff; }
.welcome-strip .ws-override-badge { display: inline-block; padding: 2px 8px; background: rgba(255, 255, 255, .25); color: #fff; border-radius: var(--r-pill); font-size: 10px; font-weight: 700; letter-spacing: .4px; margin-left: 6px; }

/* Category Capabilities card */
.capabilities-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-e1); margin-bottom: 16px; }
.capabilities-card .cap-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 12px; flex-wrap: wrap; }
.capabilities-card .cap-title { font-size: 14px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; }
.capabilities-card .cap-title .ic { font-size: 18px; }
.capabilities-card .cap-sub { font-size: 12px; color: var(--text-muted); }
.capabilities-card .cap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.capabilities-card .cap-item { padding: 10px 12px; background: var(--surface-2); border-radius: 8px; border-left: 3px solid var(--brand-primary); }
.capabilities-card .cap-item .cap-name { font-weight: 600; font-size: 13px; margin-bottom: 2px; }
.capabilities-card .cap-item .cap-desc { font-size: 11px; color: var(--text-muted); }
.capabilities-card .cap-item.live { border-left-color: var(--status-done); }
.capabilities-card .cap-item.coming { border-left-color: var(--status-prep); opacity: .85; }
.capabilities-card .cap-item .cap-status { font-size: 9px; text-transform: uppercase; letter-spacing: .5px; padding: 1px 6px; border-radius: var(--r-pill); margin-left: 6px; font-weight: 700; vertical-align: 1px; }
.capabilities-card .cap-item.live .cap-status { background: #dcfce7; color: var(--status-done); }
.capabilities-card .cap-item.coming .cap-status { background: #fef3c7; color: var(--status-prep); }

/* Order Lifecycle Guide */
.lifecycle-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-e1); margin-bottom: 16px; }
.lifecycle-card .lc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; gap: 8px; }
.lifecycle-card .lc-title { font-size: 14px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; }
.lifecycle-card .lc-title .ic { font-size: 18px; }
.lifecycle-card .lc-sub { font-size: 12px; color: var(--text-muted); }
.lifecycle-flow { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; }
.lifecycle-step { flex: 1 1 0; min-width: 90px; display: flex; flex-direction: column; align-items: center; padding: 8px 4px; position: relative; cursor: pointer; border-radius: 8px; transition: background .15s; }
.lifecycle-step:hover { background: var(--brand-50); }
.lifecycle-step::after { content: '→'; position: absolute; right: -8px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-weight: 700; font-size: 14px; opacity: .5; }
.lifecycle-step:last-child::after { display: none; }
.lifecycle-step .lc-num { width: 26px; height: 26px; border-radius: 50%; background: var(--brand-50); color: var(--brand-primary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; margin-bottom: 6px; border: 2px solid var(--brand-primary); }
.lifecycle-step .lc-label { font-size: 11px; font-weight: 600; color: var(--text); text-align: center; line-height: 1.2; }
.lifecycle-step .lc-actor { font-size: 9px; color: var(--text-muted); margin-top: 2px; text-transform: uppercase; letter-spacing: .3px; text-align: center; }
.lifecycle-step.expanded { background: var(--brand-50); }
.lifecycle-detail { display: none; grid-column: 1 / -1; margin-top: 12px; padding: 12px; background: var(--surface-2); border-radius: 8px; font-size: 12px; color: var(--text); line-height: 1.5; }
.lifecycle-detail.show { display: block; }
.lifecycle-detail .ld-title { font-weight: 700; margin-bottom: 4px; color: var(--brand-primary); }
.lifecycle-detail .ld-actor { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }
@media (max-width: 720px) {
  .lifecycle-flow { gap: 4px; }
  .lifecycle-step { min-width: 70px; }
  .lifecycle-step::after { font-size: 10px; right: -4px; }
}

/* ============================================================
   UI-MAX v2.2 — slight font bump for visibility (2026-05-13)
   Append-only. ~1-2 px bumps across primary text + numerics.
   ============================================================ */

/* Base body */
html, body { font-size: 15px; }

/* Sidebar nav items */
.sidebar a.nav-item { font-size: 14px; padding: 11px 14px; }
.sidebar .nav-group { font-size: 11px; }

/* Top-bar v2 */
.topbar-v2 .brand-chip { font-size: 14px; }
.topbar-v2 .brand-chip .brand-name { font-size: 15px; }
.topbar-v2 .scope-switcher { font-size: 14px; }
.topbar-v2 .mode-pill { font-size: 13px; }
.topbar-v2 .global-search { font-size: 14px; }
.topbar-v2 .wallet-chip { font-size: 14px; }

/* Welcome strip */
.welcome-strip .ws-greeting { font-size: 22px; }
.welcome-strip .ws-meta { font-size: 14px; }
.welcome-strip .ws-line { font-size: 14px; }
.welcome-strip .ws-vertical-picker label { font-size: 12px; }
.welcome-strip .ws-vertical-picker select { font-size: 13px; padding: 5px 22px 5px 9px; }

/* Section heading */
.section-h { font-size: 13px; }

/* KPI v2 cards */
.kpi-v2 .kpi-label { font-size: 12px; }
.kpi-v2 .kpi-value { font-size: 32px; }
.kpi-v2 .kpi-delta { font-size: 13px; }
.kpi-v2 .kpi-cta { font-size: 11px; }
.kpi-v2 .kpi-status-list { font-size: 12px; }

/* Kanban */
.kanban-col .col-head .col-title { font-size: 13px; }
.kanban-col .col-head .col-count { font-size: 14px; padding: 1px 9px; }
.kanban-card .kc-id { font-size: 13px; }
.kanban-card .kc-time { font-size: 12px; }
.kanban-card .kc-amt { font-size: 18px; }
.kanban-card .kc-cust { font-size: 13px; }
.kanban-card .kc-source { font-size: 11px; padding: 2px 7px; }

/* Mini cards (subscription/payout) */
.mini-card .mc-label { font-size: 12px; }
.mini-card .mc-value { font-size: 26px; }
.mini-card .mc-sub { font-size: 13px; }

/* Capabilities card */
.capabilities-card .cap-title { font-size: 15px; }
.capabilities-card .cap-sub { font-size: 13px; }
.capabilities-card .cap-item .cap-name { font-size: 14px; }
.capabilities-card .cap-item .cap-desc { font-size: 12px; }
.capabilities-card .cap-item .cap-status { font-size: 10px; }

/* Lifecycle card */
.lifecycle-card .lc-title { font-size: 15px; }
.lifecycle-card .lc-sub { font-size: 13px; }
.lifecycle-step .lc-num { width: 28px; height: 28px; font-size: 12px; }
.lifecycle-step .lc-label { font-size: 12px; }
.lifecycle-step .lc-actor { font-size: 10px; }
.lifecycle-detail { font-size: 13px; }
.lifecycle-detail .ld-title { font-size: 14px; }
.lifecycle-detail .ld-actor { font-size: 12px; }

/* Drawer */
.drawer .dr-head .dr-title { font-size: 17px; }
.drawer .dr-section .dr-section-label { font-size: 11px; }
.drawer .dr-section .dr-section-body { font-size: 14px; }
.drawer .dr-customer .dr-cust-name { font-size: 15px; }
.drawer .dr-customer .dr-cust-phone { font-size: 13px; }
.drawer .dr-item-row { font-size: 14px; }
.drawer .dr-charges-row { font-size: 13px; }
.drawer .dr-charges-row.total { font-size: 15px; }
.dispatch-panel .dp-current { font-size: 14px; }
.dispatch-panel .dp-opt { font-size: 14px; }
.dispatch-panel .dp-opt .dp-opt-sub { font-size: 12px; }
.otp-card .otp-label { font-size: 12px; }
.otp-card .otp-value { font-size: 24px; }
.otp-card .otp-hint { font-size: 12px; }
.timeline .tl-node .tl-label { font-size: 10px; }
.timeline .tl-node .tl-time { font-size: 11px; }

/* Exception strip */
.exception-strip .ex-item { font-size: 14px; }

/* Tables (orders, payouts, locations, menu lists) */
table { font-size: 14px; }
table th { font-size: 12px; }

/* Forms (settings, profile) */
input, select, textarea { font-size: 14px; padding: 10px 12px; }
label { font-size: 13px; }

/* Buttons */
.btn { font-size: 14px; padding: 9px 15px; }
.btn.btn-sm { font-size: 13px; padding: 6px 11px; }

/* Card headings */
.card h2 { font-size: 17px; }
.card h3 { font-size: 15px; }
.muted { font-size: inherit; }

/* Login page (index.html) */
.login-card h1 { font-size: 24px; }
.login-card .sub { font-size: 14px; }

/* Badges */
.badge { font-size: 12px; padding: 3px 9px; }
.pill { font-size: 12px; padding: 3px 9px; }

/* Fleet hint */
.fleet-hint-card .fhc-title { font-size: 15px; }
.fleet-hint-card .fhc-sub { font-size: 13px; }

/* Plan card (subscription page) */
.plan-card .plan-price { font-size: 30px; }

/* ============================================================
   UI-MAX S1A additions (append-only, 2026-05-13)
   Adds: toast, reason-picker modal, kanban card action buttons.
   ============================================================ */

/* Toast (top-right) */
.vp-toast { position: fixed; top: 20px; right: 20px; padding: 12px 18px; border-radius: 8px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-e3); font-size: 14px; font-weight: 600; max-width: 360px; z-index: 200; opacity: 0; transform: translateX(20px); transition: opacity .2s, transform .2s; pointer-events: none; border-left: 4px solid var(--brand-primary); }
.vp-toast.show { opacity: 1; transform: translateX(0); pointer-events: auto; }
.vp-toast.success { border-left-color: var(--status-done); }
.vp-toast.warn    { border-left-color: var(--brand-warning); }
.vp-toast.danger  { border-left-color: var(--status-issue); }

/* Kanban card action footer */
.kanban-card .kc-foot { display: flex; gap: 6px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border); }
.kanban-card .kc-foot .btn { flex: 1; padding: 6px 8px; font-size: 12px; }
.kanban-card .kc-foot .badge { padding: 6px 8px; font-size: 11px; }

/* Reason-picker modal */
.vrm-scrim { position: fixed; inset: 0; background: rgba(12,17,23,.55); display: flex; align-items: center; justify-content: center; z-index: 150; padding: 20px; }
.vrm-box { background: var(--surface); border-radius: var(--radius-lg); width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-e3); }
.vrm-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.vrm-title { font-size: 17px; font-weight: 700; color: var(--text); }
.vrm-close { background: none; border: none; font-size: 22px; cursor: pointer; color: var(--text-muted); padding: 4px 8px; border-radius: 6px; }
.vrm-close:hover { background: var(--surface-2); color: var(--brand-primary); }
.vrm-sub { padding: 12px 20px 0; font-size: 13px; color: var(--text-muted); }
.vrm-options { padding: 12px 20px; display: flex; flex-direction: column; gap: 6px; }
.vrm-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 14px; transition: background .15s, border-color .15s; }
.vrm-opt:hover { background: var(--brand-50); border-color: var(--brand-primary); }
.vrm-opt input[type=radio] { width: auto; margin: 0; flex-shrink: 0; }
.vrm-opt input[type=radio]:checked + span { font-weight: 600; }
.vrm-note-wrap { padding: 0 20px 12px; }
.vrm-note-label { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; display: block; }
.vrm-note { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; resize: vertical; font-family: inherit; }
.vrm-note:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(230,78,18,.12); }
.vrm-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 20px; border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

/* ============================================================
   Subscription page Figma-grade refresh (append-only, 2026-05-13)
   ============================================================ */

/* Page header */
.sub-page-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.sub-page-head .sub-page-title { font-size: 26px; font-weight: 800; color: var(--text); letter-spacing: -.3px; margin: 0 0 4px; }
.sub-page-head .sub-page-sub { color: var(--text-muted); font-size: 14px; max-width: 560px; }

/* Hero — active plan banner */
.sub-hero { background: linear-gradient(135deg, #1F3A5F 0%, #2D4F7C 60%, var(--brand-primary) 130%); color: #fff; border-radius: 16px; padding: 28px 32px; margin-bottom: 24px; position: relative; overflow: hidden; box-shadow: 0 10px 30px rgba(31, 58, 95, .25); }
.sub-hero::before { content: ''; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; background: radial-gradient(circle, rgba(230,78,18,.35), transparent 70%); }
.sub-hero .sh-tag { display: inline-block; padding: 4px 10px; background: rgba(255,255,255,.18); border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 10px; }
.sub-hero .sh-title { font-size: 28px; font-weight: 800; line-height: 1.1; margin-bottom: 4px; }
.sub-hero .sh-sub { font-size: 14px; opacity: .85; margin-bottom: 16px; }
.sub-hero .sh-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 20px; margin-top: 20px; position: relative; z-index: 1; }
.sub-hero .sh-stat { }
.sub-hero .sh-stat .label { font-size: 11px; opacity: .7; text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }
.sub-hero .sh-stat .value { font-size: 22px; font-weight: 700; margin-top: 2px; }
.sub-hero .sh-stat .delta { font-size: 11px; opacity: .8; margin-top: 1px; }
.sub-hero .sh-progress { height: 6px; background: rgba(255,255,255,.18); border-radius: 3px; overflow: hidden; margin-top: 6px; }
.sub-hero .sh-progress .bar { height: 100%; background: linear-gradient(90deg, #fff, var(--brand-primary)); border-radius: 3px; transition: width .4s; }
.sub-hero .sh-actions { position: absolute; top: 24px; right: 28px; display: flex; gap: 8px; z-index: 2; }
.sub-hero .sh-actions .btn { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.3); backdrop-filter: blur(8px); }
.sub-hero .sh-actions .btn:hover { background: rgba(255,255,255,.28); }
.sub-hero .sh-actions .btn.primary { background: var(--brand-primary); border-color: var(--brand-primary); }
.sub-hero .sh-actions .btn.primary:hover { background: var(--brand-primary-dark); border-color: var(--brand-primary-dark); }

/* Empty-state hero */
.sub-hero.empty { background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%); color: var(--text); }
.sub-hero.empty::before { display: none; }
.sub-hero.empty .sh-title { color: var(--brand-primary); }
.sub-hero.empty .sh-sub { color: var(--text-muted); opacity: 1; }

/* Cycle toggle pills */
.cycle-toggle-wrap { display: flex; justify-content: center; margin: 30px 0 24px; }
.cycle-toggle { display: inline-flex; padding: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; gap: 4px; box-shadow: var(--shadow-e1); }
.cycle-toggle .ct-opt { padding: 8px 18px; font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer; border-radius: 999px; transition: all .2s; user-select: none; display: flex; align-items: center; gap: 6px; }
.cycle-toggle .ct-opt:hover { color: var(--text); }
.cycle-toggle .ct-opt.active { background: var(--brand-primary); color: #fff; box-shadow: 0 2px 8px rgba(230,78,18,.3); }
.cycle-toggle .ct-opt .save-tag { font-size: 9px; padding: 1px 5px; background: var(--status-done); color: #fff; border-radius: 999px; font-weight: 700; letter-spacing: .3px; }
.cycle-toggle .ct-opt.active .save-tag { background: rgba(255,255,255,.25); }

/* Plan cards v2 */
.plan-grid-v2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-bottom: 32px; }
.plan-card-v2 { background: var(--surface); border: 2px solid var(--border); border-radius: 14px; padding: 24px 22px; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s, border-color .2s; position: relative; overflow: hidden; }
.plan-card-v2:hover { transform: translateY(-4px); box-shadow: var(--shadow-e3); border-color: var(--brand-primary); }
.plan-card-v2.is-current { border-color: var(--brand-primary); background: linear-gradient(135deg, #fff 0%, #fff7ed 100%); }
.plan-card-v2.is-popular { border-color: var(--brand-primary); box-shadow: 0 8px 20px rgba(230,78,18,.18); }
.plan-card-v2.is-popular:hover { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(230,78,18,.25); }

.plan-card-v2 .pc-flag { position: absolute; top: 14px; right: 14px; padding: 4px 10px; font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; border-radius: 999px; }
.plan-card-v2 .pc-flag.popular { background: var(--brand-primary); color: #fff; }
.plan-card-v2 .pc-flag.current { background: var(--status-done); color: #fff; }
.plan-card-v2 .pc-flag.best-value { background: var(--vendor-accent); color: #fff; }

.plan-card-v2 .pc-tier { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.plan-card-v2 .pc-name { font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: -.2px; line-height: 1.1; margin-bottom: 6px; }
.plan-card-v2 .pc-desc { font-size: 12px; color: var(--text-muted); margin-bottom: 16px; min-height: 32px; line-height: 1.4; }

.plan-card-v2 .pc-price-row { display: flex; align-items: baseline; gap: 4px; margin-bottom: 4px; }
.plan-card-v2 .pc-price { font-size: 36px; font-weight: 800; color: var(--text); letter-spacing: -.8px; line-height: 1; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.plan-card-v2 .pc-currency { font-size: 18px; font-weight: 700; color: var(--text); margin-right: 2px; }
.plan-card-v2 .pc-period { font-size: 13px; color: var(--text-muted); font-weight: 500; margin-left: 4px; }
.plan-card-v2 .pc-equiv { font-size: 11px; color: var(--text-muted); margin-bottom: 16px; }
.plan-card-v2 .pc-equiv.saving { color: var(--status-done); font-weight: 600; }

.plan-card-v2 .pc-features { list-style: none; padding: 0; margin: 14px 0 18px; flex: 1; min-height: 100px; }
.plan-card-v2 .pc-features li { padding: 5px 0; font-size: 13px; color: var(--text); display: flex; align-items: flex-start; gap: 8px; line-height: 1.4; }
.plan-card-v2 .pc-features li::before { content: '✓'; color: var(--brand-primary); font-weight: 700; flex-shrink: 0; width: 16px; display: inline-block; }
.plan-card-v2 .pc-features li.dim { color: var(--text-muted); }
.plan-card-v2 .pc-features li.dim::before { content: '−'; color: var(--text-muted); }

.plan-card-v2 .pc-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.plan-card-v2 .pc-meta .badge { font-size: 10px; padding: 2px 7px; }

.plan-card-v2 .pc-cta { width: 100%; padding: 12px 18px; font-size: 14px; font-weight: 700; border-radius: 10px; cursor: pointer; transition: all .15s; border: 2px solid var(--brand-primary); background: var(--brand-primary); color: #fff; }
.plan-card-v2 .pc-cta:hover { background: var(--brand-primary-dark); border-color: var(--brand-primary-dark); transform: scale(1.02); }
.plan-card-v2 .pc-cta:disabled { background: var(--surface-2); color: var(--text-muted); border-color: var(--border); cursor: default; }
.plan-card-v2 .pc-cta:disabled:hover { transform: none; }
.plan-card-v2.is-current .pc-cta { background: transparent; color: var(--brand-primary); border-color: var(--brand-primary); }

/* History timeline */
.sub-history-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 22px 24px; box-shadow: var(--shadow-e1); }
.sub-history-card .sh-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.sub-history-card .sh-card-title { font-size: 17px; font-weight: 700; color: var(--text); margin: 0; }
.sub-history-card .sh-card-count { font-size: 12px; color: var(--text-muted); }
.sub-history-list { display: flex; flex-direction: column; gap: 10px; }
.sub-history-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--surface-2); border-radius: 10px; transition: background .15s; border-left: 4px solid var(--brand-primary); }
.sub-history-row:hover { background: var(--brand-50); }
.sub-history-row.expired { border-left-color: var(--text-muted); opacity: .8; }
.sub-history-row.cancelled { border-left-color: var(--status-issue); }
.sub-history-row .hr-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--brand-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.sub-history-row.expired .hr-icon { background: var(--text-muted); }
.sub-history-row.cancelled .hr-icon { background: var(--status-issue); }
.sub-history-row .hr-body { flex: 1; min-width: 0; }
.sub-history-row .hr-name { font-weight: 700; font-size: 14px; color: var(--text); }
.sub-history-row .hr-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.sub-history-row .hr-amount { font-weight: 700; font-size: 16px; color: var(--text); font-variant-numeric: tabular-nums; }
.sub-history-row .hr-status { margin-top: 4px; text-align: right; }

@media (max-width: 720px) {
  .sub-hero { padding: 22px 20px; }
  .sub-hero .sh-actions { position: static; margin-top: 16px; }
  .plan-card-v2 .pc-price { font-size: 30px; }
}