/* =============================================================================
   Responsive layer — loaded last so it wins the cascade.

   The base sheets are desktop-first with no media queries at all, so this file
   does two jobs:
     1. Fixes layout bugs that bite at every width (grid min-width, rigid
        3-column dashboard, tables forcing the shell wider than the viewport).
     2. Adds the tablet + mobile layouts: off-canvas nav drawer, wrapping top
        bar, horizontally scrollable tables, 44px touch targets.

   Breakpoints: 1180 (narrow laptop) / 860 (tablet + phone) / 520 (small phone).
   ============================================================================= */

/* ── 1. CROSS-WIDTH FIXES ───────────────────────────────────────────────── */

/* `1fr` resolves to minmax(auto,1fr): a wide table inside .app__main forces the
   whole shell wider than the viewport and the top bar scrolls off. minmax(0,1fr)
   lets the column actually shrink so the scroll stays inside the table. */
.app{grid-template-columns:var(--sidebar-width) minmax(0,1fr)}
.app--side-collapsed{grid-template-columns:0 minmax(0,1fr)}
.app--ai{grid-template-columns:var(--sidebar-width) minmax(0,1fr) clamp(320px,26vw,380px)}
.app--ai.app--side-collapsed{grid-template-columns:0 minmax(0,1fr) clamp(320px,26vw,380px)}

/* Rigid repeat(3,1fr) squeezes cards on a 1280px laptop and leaves huge gaps on
   an ultrawide. auto-fit reflows to 1/2/3/4 columns on its own. */
/* 240 not 280: with the 240px sidebar + 24px board padding, a 280px minimum
   left only room for 3 tracks at 1440, stranding the 4th KPI on its own row. */
.dash__grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

/* NB: the horizontal-scroll rule for .dt-card lives in the ≤860 block, not here.
   Making it a scroll container at every width would cancel the sticky table
   headers from theme.css (a scroll container becomes the sticky containing
   block). Desktop keeps sticky headers; mobile trades them for h-scroll. */

/* .side is only as tall as its items, so the grey sidebar stopped mid-screen
   and left a white block beneath the last board. */
.side{min-height:100%}

/* Scrolling is instant, not animated: the smooth glide on keyboard/PageDown and
   on jump-to-anchor was read as laggy on the dashboard, so the page tracks the
   scroll directly. (The reduced-motion block below already forced this for users
   who ask for it; now it is the default for everyone.) */
html{-webkit-text-size-adjust:100%}

/* Keyboard focus was never styled; browsers' default ring is invisible on the
   custom buttons because they set their own background. */
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
}

/* ── 2. NARROW LAPTOP (≤1180px) ─────────────────────────────────────────── */
@media (max-width:1180px){
  :root{--sidebar-width:208px}
  .app{grid-template-columns:var(--sidebar-width) minmax(0,1fr)}
  .app--side-collapsed{grid-template-columns:0 minmax(0,1fr)}
  .side-toggle{left:calc(var(--sidebar-width) - 12px)}
  .board,.dash{padding-left:16px;padding-right:16px}
  .top{padding:0 12px}
  .top__search{min-width:150px}
  .card__big{font-size:48px;padding:28px 6px}
}

/* ── 3. TABLET + PHONE (≤860px) ─────────────────────────────────────────── */
@media (max-width:860px){

  /* Shell: one column, header free to wrap to two rows.
     100dvh tracks mobile browser chrome; 100vh stays as the fallback. */
  .app,
  .app--ai,
  .app--side-collapsed,
  .app--ai.app--side-collapsed{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr);
    grid-template-areas:"top" "main";
  }
  .app{height:100vh;height:100dvh}

  /* Sidebar becomes an off-canvas drawer. It is held closed by
     .app--side-collapsed, which app.js now applies by default below this
     breakpoint — so the drawer starts shut and the existing toggle button
     opens it with no extra state to track. */
  .app__side{
    position:fixed;inset:0 auto 0 0;
    width:min(82vw,300px);
    z-index:120;
    overflow-y:auto;overscroll-behavior:contain;
    background:var(--sidebar);border-right:1px solid var(--line);
    box-shadow:8px 0 28px rgba(20,30,60,.18);
    transform:translateX(0);
    transition:transform .25s ease;
  }
  .app--side-collapsed .app__side{transform:translateX(-100%);box-shadow:none}
  /* The desktop collapse slides the inner .side; in drawer mode the wrapper
     moves instead, so neutralise the inner transform or it double-slides. */
  .app__side > .side,
  .app--side-collapsed .app__side > .side{transform:none;opacity:1}
  .side{padding-top:56px;min-height:100%}

  /* Backdrop. Clicks on it land on #app, which app.js listens for. */
  .app::after{
    content:"";position:fixed;inset:0;z-index:110;
    background:rgba(20,22,30,.45);
    opacity:1;transition:opacity .25s ease;
  }
  .app--side-collapsed::after{opacity:0;pointer-events:none}
  .app.hidden::after{display:none}

  /* Toggle becomes the hamburger, above the drawer so it also closes it. */
  .side-toggle{
    top:8px;left:8px;z-index:130;
    width:44px;height:44px;border-radius:10px;
  }
  .side-toggle.is-collapsed{left:8px}

  /* Top bar stays one compact row. Its control cluster (search, city/rep
     filters, AI key, user, sign out) is relocated into the drawer by app.js —
     stacked in the header it ate ~244px of an 812px screen. */
  .top{
    height:56px;min-height:56px;
    padding:0 12px 0 60px;
    flex-wrap:nowrap;gap:8px;
  }
  .top__left{gap:10px;min-width:0}
  .top__brand{font-size:16px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* The cluster once it lives in the drawer. */
  .side .top__right{
    display:flex;flex-direction:column;align-items:stretch;
    width:auto;gap:8px;
    margin:14px 2px 8px;padding-top:14px;
    border-top:1px solid var(--line);
  }
  .side .top__search,
  .side .top__city,
  .side .top__pill-btn{width:100%;min-height:44px}
  .side .top__city{justify-content:flex-start}
  .side .top__city select{flex:1;width:100%;min-width:0}
  .side .top__user{padding:6px 2px}

  /* Touch targets — WCAG/mobile minimum is 44×44. */
  .side__item,.side__group{min-height:44px}
  .side__sub .side__item{min-height:42px}
  .bh__act,.tbtn,.mdl__f button{min-height:44px}
  .bh__act--more{width:44px;height:44px}

  /* Content padding: 24px side padding wastes a tenth of a 375px screen. */
  .board,.dash{padding:12px 12px 72px}
  .bh{flex-wrap:wrap;gap:8px}
  .bh__title{font-size:19px}
  .toolbar{flex-wrap:wrap;row-gap:6px}

  /* ---- Tables become cards ----
     One card per record: the name as its title, then label/value pairs, actions
     pinned along the bottom. The skill's Responsive/Table Handling rule allows
     "horizontal scroll OR card layout"; on a 375px screen the card reads without
     any sideways swiping, and 7-column boards like Leads stop being slivers.
     Labels come from data-label, stamped generically by labelTableCells(). */
  /* ---- Flutter UI / Linear Compact Mobile Cards Pro Max ----
     Each table row transforms into a modern, native Flutter-style card.
     Multi-column compact grid, Heroicons micro-indicators, rich avatar header,
     accented notes callout, and bottom quick-action bar. */
  .dt-card{
    overflow:visible;
    background:transparent;
    border:0;
    border-radius:0;
    box-shadow:none;
  }
  .dt{
    display:block;
    width:100%;
    min-width:0;
    table-layout:auto;
  }
  .dt thead{
    display:none;
  }
  .dt tbody{
    display:flex;
    flex-direction:column;
    gap:12px;
  }

  .dt tbody tr{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px 12px;
    align-items:center;
    background:#ffffff;
    border:1px solid #e2e8f0;
    border-radius:16px;
    padding:14px 16px;
    box-shadow:0 2px 8px -2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.03);
    margin:0 0 2px 0;
    box-sizing:border-box;
    position:relative;
    transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease, border-color .18s ease;
  }
  .dt tbody tr:hover{
    background:#ffffff;
    transform:translateY(-1px);
    box-shadow:0 6px 16px -2px rgba(15, 23, 42, 0.08);
    border-color:#cbd5e1;
  }

  /* ── 1. Hero Card Header: Lead / Customer Title & Avatar (Full Width Top) ── */
  .dt tbody tr td:first-child,
  .dt tbody tr td.nm{
    grid-column:1 / -1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 0 10px 0;
    margin:0 0 2px 0;
    border:0;
    border-bottom:1px solid #f1f5f9;
    min-width:0 !important;
    max-width:100% !important;
    width:100% !important;
    height:auto;
  }
  .dt tbody tr td:first-child::before,
  .dt tbody tr td.nm::before{
    content:none !important;
    display:none !important;
  }

  .dt tbody tr td.nm .who{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:15px;
    font-weight:700;
    color:#0f172a;
    min-width:0;
    width:100%;
  }
  .dt tbody tr td.nm .who .av{
    width:34px; height:34px;
    font-size:12.5px; font-weight:700;
    border-radius:10px; flex-shrink:0;
    box-shadow:0 2px 6px rgba(0,0,0,0.08);
  }

  /* ── 2. Compact Multi-Column Metadata Cells ── */
  .dt tbody td{
    display:inline-flex;
    align-items:center;
    gap:5px;
    height:auto;
    min-height:0;
    padding:2px 0;
    border:0;
    font-size:12.5px;
    font-weight:500;
    color:#334155;
    text-align:start;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    min-width:0;
  }
  .dt tbody td::before{
    content:attr(data-label) ":";
    font-size:10.5px;
    font-weight:600;
    letter-spacing:0.3px;
    color:#94a3b8;
    flex-shrink:0;
  }
  .dt tbody td[data-nolabel]::before{ content:none !important }
  .dt tbody td:empty{ display:none }

  /* Status Tag Chip */
  .dt tbody td[data-label="Status"],
  .dt tbody td[data-label="Stage"],
  .dt tbody td[data-label="Type"]{
    grid-column:span 1;
    justify-content:flex-start;
  }
  .dt tbody td[data-label="Status"]::before,
  .dt tbody td[data-label="Stage"]::before,
  .dt tbody td[data-label="Type"]::before{
    display:none;
  }

  /* Owner Rep Chip */
  .dt tbody td[data-label="Owner"],
  .dt tbody td[data-label="Rep"]{
    grid-column:span 1;
    justify-content:flex-end;
  }
  .dt tbody td[data-label="Owner"]::before,
  .dt tbody td[data-label="Rep"]::before{
    display:none;
  }

  /* Phone & City (Compact Heroic Chips) */
  .dt tbody td[data-label="Phone"]{
    grid-column:span 1;
    font-family:inherit;
    font-variant-numeric:tabular-nums;
  }
  .dt tbody td[data-label="City"]{
    grid-column:span 1;
    justify-content:flex-end;
  }

  /* Added / Date & Value */
  .dt tbody td[data-label="Added"],
  .dt tbody td[data-label="Date"],
  .dt tbody td[data-label="Due"]{
    grid-column:span 1;
    font-variant-numeric:tabular-nums;
  }
  .dt tbody td[data-label="Value"],
  .dt tbody td[data-label="Signed value"],
  .dt tbody td[data-label="Commission"]{
    grid-column:span 1;
    justify-content:flex-end;
    font-weight:700;
    color:#0073ea;
  }

  /* ── 3. Notes Callout Box (Full Width) ── */
  .dt tbody td.wrap,
  .dt tbody td[data-label="Notes"],
  .dt tbody td[data-label="Details"],
  .dt tbody td[data-label="Related"]{
    grid-column:1 / -1;
    display:flex;
    flex-direction:column;
    gap:3px;
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-inline-start:3px solid #0073ea;
    border-radius:9px;
    padding:7px 10px;
    font-size:12px;
    color:#475569;
    line-height:1.45;
    white-space:normal;
    word-break:break-word;
    min-width:0 !important;
    max-width:100% !important;
    margin-top:2px;
  }
  .dt tbody td.wrap::before,
  .dt tbody td[data-label="Notes"]::before{
    content:"Notes";
    font-size:10px;
    font-weight:700;
    letter-spacing:0.4px;
    text-transform:uppercase;
    color:#64748b;
  }

  /* ── 4. Compact Footer Action Bar (Full Width Bottom) ── */
  .dt tbody td.acts{
    grid-column:1 / -1;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    padding:8px 0 0 0;
    margin-top:4px;
    border-top:1px solid #f1f5f9;
    width:100% !important;
    min-width:0 !important;
    height:auto;
  }
  .dt tbody td.acts::before{ content:none !important }
  .dt tbody td.acts .ibtn{
    width:32px; height:32px;
    border-radius:8px;
    background:#f8fafc;
    border:1px solid #e2e8f0;
    color:#475569;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:all .15s ease;
  }
  .dt tbody td.acts .ibtn:hover{
    background:#f1f5f9;
    color:#0f172a;
    border-color:#cbd5e1;
  }
  .dt tbody td.acts .ibtn--del:hover{
    background:#fff1f2;
    color:#e11d48;
    border-color:#fecdd3;
  }

  /* Full width empty state */
  .dt tbody td[colspan]{
    grid-column:1 / -1;
    display:block;
    text-align:center;
    padding:20px 0;
    color:#94a3b8;
  }
  .dt tbody td[colspan]::before{ content:none !important }
  .dt tbody tr:has(td[colspan]){
    display:block;
    padding:0;
    border-style:dashed;
    background:#f8fafc;
    box-shadow:none;
  }

  .dt-group{margin-bottom:18px}
  .bh{position:static;margin:0;padding:0 0 8px}

  /* The monday-style board grid is already width:max-content; give it its own
     scroll container instead of scrolling the whole page sideways. */
  .board > .group,.tbl{max-width:100%}
  .app__main{overflow-x:hidden}

  .card{padding:14px}
  .card__big{font-size:clamp(34px,12vw,52px);padding:20px 4px}
  .chartwrap{height:200px}
  .kpi-card{padding:14px}
  .kpi-card .big{font-size:28px}

  /* AI panel: JS sets width/height inline, so this needs !important to win.
     Full-screen sheet is the only sane phone treatment for a 380px window. */
  .ai--floating{
    width:auto !important;height:auto !important;
    inset:8px !important;
    right:8px !important;bottom:8px !important;
    border-radius:14px;
  }
  .ai__resize{display:none}
  .fab{right:16px;bottom:16px;width:52px;height:52px}

  /* ---- Map board ----
     .ccmap is a hardcoded 74vh. Two problems on a phone: (a) `vh` measures the
     URL-bar-hidden viewport, so the canvas runs past the fold, and (b) once the
     page scrolls, dragging to pan the map fights the page scroll. Make the map
     fill exactly the space left under the header so the page never scrolls. */
  .ccmap{height:calc(100dvh - 240px);min-height:280px}      /* no-:has() fallback */
  .board:has(> .ccmap){
    display:flex;flex-direction:column;
    min-height:100%;padding-bottom:12px;
  }
  .board:has(> .ccmap) .ccmap{flex:1 1 auto;height:auto}
  .maplegend{gap:8px 14px;font-size:12px;margin:2px 0 10px}

  /* ---- Kanban ----
     Columns already scroll horizontally; snap makes the swipe land cleanly and
     the narrower column leaves a peek of the next one as a scroll affordance. */
  .kanban{gap:10px;padding-bottom:8px;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
  .kanban__col{min-width:min(78vw,270px);scroll-snap-align:start}
  .kcard{cursor:default}   /* "grab" means nothing without a pointer */

  .ovl{padding:12px;align-items:end}
  .mdl{max-height:88dvh}

  /* Login is the first thing a rep sees on a phone. */
  #login{padding:16px}
  .lcard{padding:24px 20px}
  .lcard input,.lbtn{min-height:46px}
}

/* ── 4. SMALL PHONE (≤520px) ────────────────────────────────────────────── */
@media (max-width:520px){
  .top__brand small{display:none}
  .top__user .rl{display:none}
  .top__city{flex:1 1 100%}
  .board,.dash{padding:10px 10px 72px}
  .bh__title{font-size:18px}
  .dash__grid{gap:10px}
  /* Cards, not a scrolling table — a narrower label column keeps values readable. */
  .dt tbody tr{padding:10px 12px}
  .dt tbody td::before{flex-basis:42%}
}

/* ── 5. LANDSCAPE PHONE ─────────────────────────────────────────────────── */
@media (max-width:900px) and (orientation:landscape) and (max-height:500px){
  .side{padding-top:52px}
  .ai--floating{inset:6px !important}
  .top{min-height:48px}
}