/* LittleBee skin overlay — injected on top of each page's existing CSS.
   Only adds glow + soft elevation effects that need accent-aware values. */

/* Accent KPI card: subtle inset glow + green-leaning gradient */
.kpi.accent,
.kpi[class*="accent"] {
  background: linear-gradient(160deg, #16241a 0%, var(--panel) 75%) !important;
  border-color: var(--border-2) !important;
  box-shadow: inset 0 0 30px rgba(185,255,90,0.06);
}
.kpi.accent .value { color: var(--accent); text-shadow: 0 0 14px rgba(185,255,90,0.22); }

/* Primary buttons get a soft lime glow on hover */
.btn:not(.ghost):not(.secondary):not(:disabled):hover { box-shadow: 0 0 14px rgba(185,255,90,0.35); }

/* Stage / segmented chips */
.btn.ghost { transition: color 0.15s, border-color 0.15s, background 0.15s; }
.btn.ghost:hover { color: var(--text); border-color: var(--border-2); }

/* Plan rows: highlight current-month milestone with the accent ring */
.plan-row[style*="month-priority"], .plan-row.month-priority {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px rgba(185,255,90,0.18), inset 0 0 18px rgba(185,255,90,0.05);
}
.plan-row.is-due { box-shadow: inset 0 0 14px rgba(185,255,90,0.04); }

/* Project / deal cards: progress bar gets the lime gradient */
.deal-progress > span,
.project-progress > span { background: linear-gradient(90deg, var(--accent), #5fd14d) !important; box-shadow: 0 0 12px rgba(185,255,90,0.35); }

/* Stage pill colors keyed to status */
.status-paid, .status-pill.status-paid { background: rgba(124,230,158,0.14) !important; color: var(--green) !important; border: none !important; }
.status-due, .status-pill.status-due { background: rgba(185,255,90,0.16) !important; color: var(--accent) !important; border: none !important; }
.status-upcoming, .status-pill.status-upcoming { background: var(--panel-2) !important; color: var(--muted) !important; border: 1px solid var(--border) !important; }

/* Make the stage-select / inputs feel native to the dark glow */
select, input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="number"], textarea {
  background-color: var(--panel-2);
  border-color: var(--border);
  color: var(--text);
}
select:focus, input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px rgba(185,255,90,0.18); }

/* User-menu avatar: lime glow */
.um-avatar { background: linear-gradient(135deg, var(--accent), #5fd14d) !important; color: var(--bg) !important; }

/* Cashflow forecast panels */
.forecast {
  background: var(--panel); border: 1px solid var(--border); border-radius: 18px;
  padding: 22px 24px; margin-bottom: 18px;
}
.forecast .head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px; }
.forecast .head h3 { margin:0; font-size:16px; font-weight:600; display:flex; align-items:center; gap:10px; color:var(--text); }
.forecast .head h3 .dot { width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent); }
.forecast .head .meta { color:var(--muted); font-size:12px; }
.forecast .stats { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-bottom:18px; }
.forecast .stats .stat { background:var(--panel-2); border:1px solid var(--border); border-radius:10px; padding:11px 14px; }
.forecast .stats .stat .lab { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:0.06em; font-weight:600; }
.forecast .stats .stat .val { font-size:18px; font-weight:700; margin-top:2px; }
.forecast .stats .stat.accent .val { color:var(--accent); text-shadow:0 0 12px rgba(185,255,90,0.25); }
svg.fc-chart { width:100%; height:240px; display:block; }
svg.fc-chart-mini { width:100%; height:120px; display:block; }
.fc-axis { fill:var(--muted); font-size:10px; }
.fc-grid line { stroke:var(--border); stroke-dasharray:2 4; }

.project-forecast {
  background:var(--bg); border:1px solid var(--border); border-radius:12px;
  padding:14px 16px; margin: 12px 0 10px;
}
.project-forecast .ph { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.project-forecast .ph .ttl { font-size:12px; font-weight:600; color:var(--muted); display:flex; align-items:center; gap:8px; }
.project-forecast .ph .ttl span { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.project-forecast .ph .end { color:var(--accent); font-size:11px; font-weight:600; }
.project-forecast .ps { display:flex; gap:18px; margin-bottom:10px; font-size:11px; color:var(--muted); }
.project-forecast .ps span strong { color:var(--text); font-weight:600; display:block; font-size:13px; margin-top:2px; }

/* Dashboard two-column row */
.two-col { display:grid; grid-template-columns:1.4fr 1fr; gap:14px; margin-top:18px; }
.two-col .panel-card { background:var(--panel); border:1px solid var(--border); border-radius:18px; padding:22px 24px; }
.two-col .panel-card h3 { margin:0 0 14px; font-size:14px; font-weight:600; color:var(--text); }
.two-col .panel-card h3 small { float:right; color:var(--muted); font-weight:500; font-size:11px; }
/* Self-contained row list — works inside .two-col panels and standalone alike */
.row-list .row { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:11px 0; border-top:1px solid var(--border); font-size:13px; }
.row-list .row:first-child { border-top:none; }
.row-list .row .v { color:var(--accent); font-weight:600; font-variant-numeric:tabular-nums; }
.row-list .row .meta { color:var(--muted); font-size:11px; margin-top:2px; }
.row-list a.row { text-decoration:none; color:inherit; }
.row-list a.row:hover { color:var(--accent); }

/* Documents view — dedicated layout */
.documents-panel { background:var(--panel); border:1px solid var(--border); border-radius:18px; overflow:hidden; }
.documents-head { display:flex; justify-content:space-between; align-items:center; padding:18px 24px; border-bottom:1px solid var(--border); }
.documents-head h3 { margin:0; font-size:14px; font-weight:600; color:var(--text); }
.documents-meta { color:var(--muted); font-size:12px; }
.documents-list .doc-row { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:14px 24px; border-top:1px solid var(--border); transition:background 0.15s; }
.documents-list .doc-row:first-child { border-top:none; }
.documents-list .doc-row:hover { background:var(--panel-2); }
.documents-list .doc-meta { display:flex; align-items:center; gap:14px; flex:1; min-width:0; }
.documents-list .doc-text { min-width:0; }
.documents-list .doc-title { font-size:13px; font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.documents-list .doc-sub { color:var(--muted); font-size:11px; margin-top:2px; }
.documents-list .doc-actions { display:flex; gap:6px; flex-shrink:0; }
.documents-list .doc-group-header {
  background: var(--panel-2);
  padding: 10px 24px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); border-top: 1px solid var(--border-2); border-bottom: 1px solid var(--border-2);
  font-weight: 700;
}
.documents-list .doc-group-header:first-child { border-top: none; }
.documents-list .doc-group-header .group-name { color: var(--accent); margin-right: 8px; }
.documents-list .doc-group-header .group-meta { color: var(--muted); font-weight: 500; }

/* Documents board view */
.doc-board { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px; }
.doc-col { background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:10px; }
.doc-col-head { display:flex; justify-content:space-between; align-items:center; padding:0 4px 8px; border-bottom:1px solid var(--border); }
.doc-col-head .title { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--accent); }
.doc-col-head .meta { color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; }
.doc-card { background:var(--panel-2); border:1px solid var(--border); border-radius:10px; padding:11px 12px; display:flex; flex-direction:column; gap:4px; transition: border-color 0.15s; }
.doc-card:hover { border-color:var(--border-2); }
.doc-card-title { font-size:13px; font-weight:600; color:var(--text); line-height:1.3; }
.doc-card-sub { color:var(--muted); font-size:11px; }
.doc-card-actions { display:flex; gap:6px; margin-top:6px; padding-top:6px; border-top:1px solid var(--border); }

/* === Pipeline kanban board === */
.pipeline-board {
  display:grid; grid-template-columns: repeat(6, minmax(220px, 1fr)); gap:12px;
  overflow-x:auto; padding-bottom:8px;
}
.pipeline-col {
  background: var(--panel); border:1px solid var(--border); border-radius:14px;
  padding:14px; min-height:200px; display:flex; flex-direction:column; gap:10px;
}
.pipeline-col.dragover { background: linear-gradient(160deg,#16241a,var(--panel)); border-color:var(--border-2); box-shadow: inset 0 0 24px rgba(185,255,90,0.07); }
.pipeline-col-head { display:flex; justify-content:space-between; align-items:center; padding:0 4px 8px; border-bottom:1px solid var(--border); }
.pipeline-col-head .title { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; }
.pipeline-col-head .meta { color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; }
.pipeline-card {
  background: var(--panel-2); border:1px solid var(--border); border-radius:10px;
  padding:11px 12px; cursor:grab; transition: border-color 0.15s, transform 0.05s;
  user-select:none;
}
.pipeline-card:hover { border-color: var(--border-2); }
.pipeline-card:active { cursor:grabbing; }
.pipeline-card.dragging { opacity:0.45; border-color: var(--accent); }
.pipeline-card .pc-title { font-size:13px; font-weight:600; color:var(--text); margin-bottom:2px; line-height:1.3; }
.pipeline-card .pc-meta { color:var(--muted); font-size:11px; }
.pipeline-card .pc-foot { display:flex; justify-content:space-between; align-items:center; margin-top:8px; padding-top:8px; border-top:1px solid var(--border); }
.pipeline-card .pc-val { color:var(--accent); font-weight:700; font-size:13px; font-variant-numeric:tabular-nums; }
.pipeline-card .pc-prob { color:var(--muted); font-size:10px; }

.pipeline-toggle { display:inline-flex; gap:2px; background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:2px; }
.pipeline-toggle button { background:transparent; color:var(--muted); border:none; padding:6px 12px; font-family:inherit; font-size:12px; font-weight:500; border-radius:6px; cursor:pointer; }
.pipeline-toggle button.active { background:var(--panel-2); color:var(--accent); }

/* Group header row inside pipeline / offers table */
tr.group-header td {
  background: var(--panel-2);
  padding: 10px 16px !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--muted) !important;
  border-bottom: 1px solid var(--border-2) !important;
  border-top: 1px solid var(--border-2);
}
tr.group-header .group-name { color: var(--accent); margin-right: 8px; }
tr.group-header .group-meta { color: var(--muted); font-weight: 500; }

/* Inline select used in toolbars (Group by, project filter, etc.) */
select.toolbar-select {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 7px 12px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}
select.toolbar-select:focus { outline: none; border-color: var(--accent); }
.stage-pill { padding:2px 9px; border-radius:99px; font-size:10px; font-weight:700; text-transform:uppercase; display:inline-block; }
.stage-pill.s-Sent          { background:rgba(107,140,255,0.15); color:var(--accent-2); }
.stage-pill.s-Negotiating   { background:rgba(255,185,90,0.15); color:var(--amber); }
.stage-pill.s-Signed        { background:rgba(124,230,158,0.15); color:var(--green); }
.stage-pill.s-Lost          { background:rgba(255,122,135,0.15); color:var(--red); }
.stage-pill.s-Draft         { background:var(--panel-2); color:var(--muted); }
.stage-pill.s-Paid          { background:rgba(124,230,158,0.15); color:var(--green); }

/* === Top app bar (LittleBee sticky header) === */
.appbar {
  display:flex; align-items:center; gap:12px; padding:12px 24px;
  border-bottom:1px solid var(--border); background:rgba(10,18,12,0.85);
  backdrop-filter:blur(8px); position:sticky; top:0; z-index:50;
}
.appbar .brand { display:flex; align-items:center; gap:10px; font-size:14px; font-weight:800; letter-spacing:0.04em; flex-shrink:0; }
.appbar .brand .hex { width:30px; height:30px; clip-path:polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); background:var(--accent); display:grid; place-items:center; color:var(--bg); font-size:14px; font-weight:900; }
.appbar .nav-tabs { display:flex; gap:3px; background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:3px; flex-shrink:0; }
.appbar .nav-tabs .tab { background:transparent; color:var(--muted); border:none; padding:7px 13px; border-radius:7px; font-family:inherit; font-size:12px; font-weight:500; cursor:pointer; transition: color 0.15s, background 0.15s; display:flex; align-items:center; gap:6px; line-height:1; }
.appbar .nav-tabs .tab:hover { color:var(--text); }
.appbar .nav-tabs .tab.active { background:var(--panel-2); color:var(--text); border:1px solid var(--border); box-shadow:0 0 14px rgba(185,255,90,0.06); }
.appbar .nav-tabs .tab .count { background:var(--panel-2); color:var(--muted); padding:1px 6px; border-radius:99px; font-size:10px; font-weight:600; }
.appbar .nav-tabs .tab.active .count { background:var(--bg); color:var(--accent); }
.appbar .spacer { flex:1; }
.appbar .ccy-stack { display:flex; flex-direction:column; gap:4px; flex-shrink:0; align-items:flex-end; }
.appbar .ccy-toggle { display:flex; gap:2px; background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:2px; flex-shrink:0; }
.appbar .ccy-toggle button { background:transparent; color:var(--muted); border:none; padding:5px 10px; font-family:inherit; font-size:11px; font-weight:600; border-radius:6px; cursor:pointer; }
.appbar .ccy-toggle button.active { background:var(--panel-2); color:var(--accent); }
.appbar .fx-widget { display:flex; gap:6px; align-items:center; padding:0 4px; font-size:10px; color:var(--muted); flex-shrink:0; font-variant-numeric:tabular-nums; line-height:1.2; }
.appbar .fx-widget strong { color:var(--text); font-weight:600; }
.appbar .fx-widget .live { width:5px; height:5px; border-radius:50%; background:var(--green); box-shadow:0 0 6px var(--green); animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity:0.4; } }
.appbar .icon-btn { width:36px; height:36px; border-radius:9px; background:var(--panel); border:1px solid var(--border); display:grid; place-items:center; color:var(--muted); cursor:pointer; flex-shrink:0; }
.appbar .icon-btn:hover { color:var(--accent); border-color:var(--border-2); }
.appbar .actions { display:flex; gap:8px; align-items:center; }
.appbar .actions .btn { padding:7px 12px; font-size:12px; }

/* Hide the legacy header on admin */
body.use-appbar > header.legacy { display:none; }

/* ============================================================
   Mobile contract (≤760px)
   Authoritative spec: .planning/UI-SPEC-mobile.md
   Visual reference: .planning/sketches/005-final-preview/index.html
   Hard rule: every selector below lives inside the media query.
   Desktop rendering above 760px must remain untouched.
   ============================================================ */

/* ---- Bottom tab bar + drawer + mobile-card containers are rendered
        for everyone, but hidden on desktop. Mobile media query flips
        them on. ---- */
.bottom-bar { display: none; }
.drawer-backdrop, .drawer { display: none; }
.deal-cards-mobile { display: none; }
#mobileSections { display: none; }

@media (max-width: 760px) {
  /* === Safety net — kill horizontal overflow === */
  html, body { overflow-x: hidden; max-width: 100vw; }

  /* === Slim top header === */
  .appbar {
    position: fixed; top: 0; left: 0; right: 0;
    padding: 10px 14px;
    gap: 10px;
    flex-wrap: nowrap;
  }
  /* Push content below the fixed appbar */
  body.use-appbar { padding-top: 50px; }
  .appbar .brand {
    font-size: 13px;
    letter-spacing: 0.04em;
    min-width: 0;
    flex: 1;
    overflow: hidden;
  }
  .appbar .brand .brand-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .appbar .brand .hex { width: 26px; height: 26px; font-size: 12px; }
  .appbar .nav-tabs,
  .appbar .spacer,
  .appbar .ccy-stack,
  .appbar .actions,
  .appbar .header-actions { display: none; }

  .ccy-chip {
    display: inline-flex; align-items: center;
    background: var(--panel); border: 1px solid var(--border);
    padding: 5px 10px; border-radius: 8px;
    font-size: 11px; color: var(--accent); font-weight: 700;
    cursor: pointer; flex-shrink: 0; min-height: 32px;
    font-family: inherit;
  }
  .ccy-chip:after { content: ' \25BE'; font-size: 9px; color: var(--muted); margin-left: 3px; }

  /* === Bottom tab bar === */
  .bottom-bar {
    display: grid;
    position: fixed; bottom: 0; left: 0; right: 0;
    grid-template-columns: repeat(5, 1fr);
    background: rgba(10,18,12,0.96);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0));
    z-index: 50;
  }
  .bottom-bar .btab {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 6px 4px;
    color: var(--muted); font-size: 10px; font-weight: 600;
    text-decoration: none; background: transparent; border: none;
    font-family: inherit; cursor: pointer; min-height: 56px;
  }
  .bottom-bar .btab .ico { font-size: 16px; line-height: 1; }
  .bottom-bar .btab.active { color: var(--accent); }
  .bottom-bar .btab:focus-visible { outline: 1.5px solid var(--accent-2); outline-offset: -1.5px; border-radius: 6px; }

  /* === Hamburger drawer === */
  .drawer-backdrop {
    display: block;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    opacity: 0; pointer-events: none;
    transition: opacity 0.15s ease-out;
    z-index: 60;
  }
  .drawer-backdrop[data-state="open"] { opacity: 1; pointer-events: auto; }

  .drawer {
    display: flex; flex-direction: column;
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 320px; max-width: 86vw;
    background: var(--panel); border-left: 1px solid var(--border);
    transform: translateX(100%);
    transition: transform 0.18s ease-out;
    overflow-y: auto;
    padding: 36px 0 calc(20px + env(safe-area-inset-bottom, 0));
    z-index: 61;
  }
  .drawer[data-state="open"] { transform: translateX(0); }

  .drawer .identity { padding: 12px 22px 18px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
  .drawer .identity .name { font-weight: 700; font-size: 14px; }
  .drawer .identity .meta { color: var(--muted); font-size: 11px; margin-top: 2px; word-break: break-word; }
  .drawer .identity .role {
    display: inline-block; background: var(--panel-2); color: var(--accent);
    border: 1px solid var(--border); font-size: 9px; padding: 2px 7px; border-radius: 999px;
    margin-top: 6px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700;
  }

  .drawer .group { padding: 10px 0; border-bottom: 1px solid var(--border); }
  .drawer .group:last-of-type { border-bottom: none; }
  .drawer .group-title { padding: 6px 22px; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
  .drawer .item {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 22px; color: var(--text);
    text-decoration: none; cursor: pointer;
    background: transparent; border: none;
    font-family: inherit; font-size: 14px; width: 100%; text-align: left;
  }
  .drawer .item:hover, .drawer .item:focus-visible { background: var(--panel-2); outline: none; }
  .drawer .item .ico { width: 22px; text-align: center; color: var(--muted); flex-shrink: 0; }
  .drawer .item .right { margin-left: auto; color: var(--muted); font-size: 12px; }
  .drawer .item.danger { color: var(--red); }
  .drawer .item.danger .ico { color: var(--red); }

  .drawer .fx-block { padding: 8px 22px 12px; }
  .drawer .fx-line { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); padding: 4px 0; }
  .drawer .fx-line strong { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 600; }
  .drawer .fx-line .live {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--green); box-shadow: 0 0 5px var(--green);
    margin-right: 6px; vertical-align: middle;
    animation: pulse 2s infinite;
  }
  .drawer .fx-line.is-stale .live { background: var(--amber); box-shadow: 0 0 5px var(--amber); animation: none; }

  .drawer .ccy-picker {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
    padding: 6px 22px 4px;
  }
  .drawer .ccy-picker button {
    background: var(--panel-2); border: 1px solid var(--border);
    color: var(--muted); padding: 10px 12px; border-radius: 8px;
    font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
    min-height: 44px;
  }
  .drawer .ccy-picker button.active {
    background: var(--accent); color: #000; border-color: var(--accent);
  }

  /* Lock background scroll while drawer is open */
  body.drawer-open { overflow: hidden; }

  /* === Container padding === */
  /* Bottom padding clears the fixed bottom-bar (62px tall) plus the
     iOS home-indicator safe-area inset on devices that have one. */
  .container { padding: 14px 12px calc(90px + env(safe-area-inset-bottom, 0)) !important; }

  /* === Deal / project list cards === */
  /* Admin pipeline */
  body.admin-pipeline .deal-cards-mobile { display: block; }
  body.admin-pipeline > .container > table { display: none !important; }
  body.admin-pipeline > .container > .table-footer { display: none !important; }
  /* Client portal offers */
  .client-offers-view .deal-cards-mobile { display: block; }
  .client-offers-view > table { display: none !important; }
  .deal-cards-mobile .deal-card {
    background: var(--panel); border: 1px solid var(--border);
    border-radius: 14px; padding: 14px; margin-bottom: 10px;
    text-decoration: none; color: inherit; display: block;
  }
  .deal-cards-mobile .deal-card:hover,
  .deal-cards-mobile .deal-card:focus-visible {
    border-color: var(--accent-2); outline: none;
  }
  .deal-cards-mobile .deal-card .top {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 10px; margin-bottom: 8px;
  }
  .deal-cards-mobile .deal-card .top .title { font-weight: 600; font-size: 14px; line-height: 1.3; }
  .deal-cards-mobile .deal-card .top .client { color: var(--muted); font-size: 11px; margin-top: 2px; }
  .deal-cards-mobile .deal-card .meta-row {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 6px; font-size: 12px;
  }
  .deal-cards-mobile .deal-card .meta-row .lbl { color: var(--muted); font-size: 11px; }
  .deal-cards-mobile .deal-card .footer {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
  }
  .deal-cards-mobile .deal-card .footer .amt {
    color: var(--accent); font-weight: 700; font-size: 17px;
    font-variant-numeric: tabular-nums;
  }
  .deal-cards-mobile .deal-card .footer .sub { color: var(--muted); font-size: 10px; margin-top: 2px; }
  .deal-cards-mobile .deal-card .chevron { color: var(--muted); font-size: 18px; line-height: 1; }
  .deal-cards-mobile .deal-card.is-lost { opacity: 0.55; }

  /* When mobile cards are present, hide the desktop table */
  .has-mobile-cards table { display: none !important; }
  .has-mobile-cards .table-footer { display: none !important; }

  /* === Sticky section headers (detail pages) === */
  .section-header {
    position: sticky; top: 50px; z-index: 30;
    background: rgba(10,18,12,0.94);
    backdrop-filter: blur(8px);
    color: var(--muted); font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
    padding: 14px 0 10px;
    margin: 6px 0 10px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }

  /* === Project detail: stacked sections replace tab UI on phone === */
  #desktopTabs, #tabContent { display: none; }
  #mobileSections { display: block; }

  /* === Plan card states (existing element, mobile tightening) === */
  .plan-row.is-paid, .plan-card.is-paid { opacity: 0.55; }
  .plan-card { border-radius: 12px; padding: 14px; margin-bottom: 8px; }
  .plan-card.is-due {
    border-color: var(--amber);
    background: linear-gradient(180deg, rgba(255,185,90,0.06), var(--panel));
  }
  .plan-card .actions { display: flex; gap: 6px; margin-top: 10px; }
  .plan-card .actions button {
    flex: 1; padding: 8px 12px; border-radius: 8px;
    font-size: 11px; font-weight: 600;
    border: 1px solid var(--border); background: transparent; color: var(--muted);
    font-family: inherit; cursor: pointer;
  }
  .plan-card .actions button.primary {
    background: var(--accent); color: #000; border-color: var(--accent);
  }

  /* === Compact two-line list (sub-lists in detail pages) === */
  .compact-list {
    background: var(--panel); border: 1px solid var(--border);
    border-radius: 12px;
  }
  .compact-row {
    display: grid; grid-template-columns: 1fr auto;
    gap: 10px; align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    text-decoration: none; color: inherit;
  }
  .compact-row:last-child { border-bottom: none; }
  .compact-row .l1 {
    font-weight: 600; font-size: 13px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .compact-row .l2 {
    color: var(--muted); font-size: 11px;
    margin-top: 2px;
    display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  }
  .compact-row .amt {
    font-variant-numeric: tabular-nums; font-weight: 700;
    color: var(--accent); font-size: 13px;
    text-align: right; white-space: nowrap;
  }

  /* === KPI / stage / hero / project-grid mobile rules === */
  .kpis { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .kpis .kpi { padding: 12px !important; border-radius: 14px !important; }
  .kpis .kpi .val { font-size: 18px !important; }
  .stage-bar { grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; }
  .project-grid { grid-template-columns: 1fr !important; }
  .hero { flex-direction: column !important; align-items: flex-start !important; padding: 18px !important; }
  .hero h2, .hero h1 { font-size: 22px !important; }
  .hero-stats { gap: 18px !important; flex-wrap: wrap; }
  .hero-stat .val { font-size: 18px !important; }

  /* === Toolbar — stack inputs, full-width === */
  .toolbar { flex-direction: column; align-items: stretch !important; gap: 8px !important; }
  .toolbar .search,
  .toolbar input[type="text"],
  .toolbar select,
  .toolbar .toolbar-select { width: 100% !important; max-width: none !important; }
  .toolbar > div { flex-wrap: wrap; gap: 8px !important; }
  .pipeline-toggle, .projects-toggle { width: 100%; }
  .pipeline-toggle button, .projects-toggle button { flex: 1; }

  /* === Tables that aren't replaced by cards still scroll horizontally === */
  .container > table:not(.has-mobile-cards) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    width: 100%;
    white-space: nowrap;
  }
  .container > table:not(.has-mobile-cards) thead,
  .container > table:not(.has-mobile-cards) tbody {
    display: table; width: max-content; min-width: 100%;
  }
  .container > table:not(.has-mobile-cards) th,
  .container > table:not(.has-mobile-cards) td {
    padding: 8px 10px; font-size: 12px;
  }
  .table-footer { padding: 8px 4px; flex-direction: column; gap: 4px; align-items: flex-start; }

  /* === Modals === */
  .modal { width: 94vw !important; max-width: 94vw !important; padding: 20px !important; }

  /* === Pipeline board === */
  #pipelineBoard { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* === Empty mobile state === */
  .empty-mobile {
    text-align: center; padding: 40px 20px;
    color: var(--muted); background: var(--panel);
    border: 1px solid var(--border); border-radius: 14px;
  }

  /* === Dashboard panels — Top deals / Recent payments stack === */
  .two-col { grid-template-columns: 1fr !important; gap: 10px !important; margin-top: 14px !important; }
  .two-col .panel-card { padding: 16px !important; border-radius: 14px !important; }

  /* === Forecast card — shrink padding, stack stats grid === */
  .forecast { padding: 16px !important; border-radius: 14px !important; }
  .forecast .stats { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .forecast .stats .stat { padding: 10px 12px !important; }
  .forecast .stats .stat .val { font-size: 15px !important; }
  .forecast .head { flex-direction: column !important; gap: 6px; align-items: flex-start !important; }

  /* Inline 5-col forecast-stats (renderForecastSvg) → 2 cols on phone */
  .forecast-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }

  /* SVG forecast charts size to container */
  svg.fc-chart, svg.fc-chart-mini { width: 100%; height: auto; max-width: 100%; }

  /* Row lists inside panel-cards — make sure inner grids don't push wider */
  .panel-card .row-list > * { min-width: 0; }

  /* Pipeline group rows (admin grouped pipeline) — currently use grid with fixed columns; stack on phone */
  .pipeline-group .group-row { grid-template-columns: 1fr !important; gap: 6px !important; }

  /* Generic safety: any inline grid declaration with fixed columns inside .container collapses */
  .container [style*="grid-template-columns:repeat(5"],
  .container [style*="grid-template-columns:repeat(6"],
  .container [style*="grid-template-columns:repeat(7"],
  .container [style*="grid-template-columns:repeat(8"] {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
}

/* ---- Narrow phones (≤380px) — further compression ---- */
@media (max-width: 380px) {
  .kpis { grid-template-columns: 1fr !important; }
  .stage-bar { grid-template-columns: 1fr !important; }
  .appbar .brand .brand-text { display: none; }
  .bottom-bar .btab { font-size: 9px; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .drawer { transition: none; }
  .drawer-backdrop { transition: none; }
  .drawer .fx-line .live { animation: none; }
}