/* ============================================================
   Throughline — Mobile layout (app shell)
   Loaded after app.css + motion.css. Phone-first fixes only;
   desktop is untouched above 760px.
   ============================================================ */

/* ---------- 1. The page must never scroll sideways ----------
   `clip` (unlike `hidden`) doesn't turn the element into a
   scroll container, so position:sticky keeps working. */
html, body{
  overflow-x:clip;
  max-width:100%;
}
@supports not (overflow:clip){
  html, body{ overflow-x:hidden; }
}

/* Anything that overflows its cell scrolls *inside* its card,
   never the document. */
.tablewrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}

/* Mobile-only chrome: hidden everywhere by default, enabled at the breakpoint.
   (Both are injected into the DOM on every screen size by mobile.js.) */
.mnav-btn{ display:none; }
.mtabs{ display:none; }

@media (max-width:760px){

  /* ---------- 2. Shell: sidebar becomes an off-canvas sheet ----------
     NOTE: app.css @media(max-width:860px) flattens .side into a horizontal
     icon rail (flex-direction:row, labels hidden, sidefoot hidden). Inside a
     full-height off-canvas sheet that looks broken, so we undo it here. */
  .shell{ display:block; }

  .side{
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }
  .brand{
    flex:none;
    padding:16px 16px 14px;
    border-bottom:1px solid rgba(255,255,255,.10);
  }
  .brand .bt .desc{ display:block; }
  .navlabel{ display:block; }
  .views{
    flex-direction:column;
    padding:10px 8px;
    gap:2px;
    flex:1 1 auto;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .nav{
    width:100%;
    padding:11px 12px;
    justify-content:flex-start;
    white-space:nowrap;
  }
  .nav span{ display:inline; }        /* labels back — icons alone aren't navigable */
  .nav svg{ width:19px; height:19px; flex:0 0 auto; }
  .nav.active::before{
    left:0; right:auto; top:6px; bottom:6px;
    width:3px; height:auto; border-radius:0 3px 3px 0;
  }
  .navbadge{ position:static; margin-left:auto; transform:none; }
  .sidefoot{ display:block; }
  .topbar{ position:sticky; top:0; }  /* app.css sets static <=860 */

  .side{
    position:fixed; inset:0 auto 0 0;
    width:min(84vw, 300px);
    height:100dvh;
    z-index:70;
    transform:translateX(-100%);
    transition:transform var(--dur-moderate,300ms) var(--ease-accelerate,ease-in);
    box-shadow:none;
    overflow-y:auto;
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
  .side.mopen{
    transform:none;
    transition-timing-function:var(--ease-decelerate, ease-out);
    box-shadow:0 0 60px rgba(0,0,0,.4);
  }

  .mscrim{
    position:fixed; inset:0;
    background:rgba(16,24,40,.45);
    backdrop-filter:saturate(120%) blur(1.5px);
    opacity:0; visibility:hidden;
    transition:opacity var(--dur-normal,200ms) ease, visibility var(--dur-normal,200ms);
    z-index:65;
  }
  .mscrim.on{ opacity:1; visibility:visible; }

  /* Hamburger — only exists on mobile */
  .mnav-btn{
    display:inline-flex !important; align-items:center; justify-content:center;
    width:42px; height:42px; margin-left:-8px;
    flex:0 0 auto;
    background:none; border:0; border-radius:10px;
    cursor:pointer; color:var(--ink,#0b1f16);
    transition:background-color var(--dur-fast,120ms) ease, transform var(--dur-fast,120ms) var(--ease-spring, ease);
  }
  .mnav-btn:active{ transform:scale(.92); background:var(--accent-soft,#E8F5EE); }
  .mnav-btn svg{ width:22px; height:22px; }

  /* ---------- 3. Topbar: stop the 25px overflow ---------- */
  .topbar{
    gap:8px;
    padding:0 12px;
    padding-right:max(12px, env(safe-area-inset-right));
  }
  .tbright{
    flex:1 1 auto;
    min-width:0;                 /* the actual overflow culprit */
    display:flex; align-items:center; justify-content:flex-end; gap:8px;
  }
  .posture{ display:none; }      /* "Isolated" chip — desktop affordance */
  .crumb{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .crumb #crumb-root, .crumb .sep{ display:none; }   /* keep only the current view */
  .gs-wrap{ flex:1 1 auto; min-width:0; }
  .gs-input{ width:100%; min-width:0; }
  .acct .acct-meta, .acct .acct-name, .acct .acct-role{ display:none; }
  .acct{ padding:4px; gap:0; }

  @media (max-width:520px){
    .gs-wrap{ display:none; }    /* below this, search + bell + avatar don't coexist */
  }

  /* ---------- 4. Drawer: full-bleed sheet ---------- */
  #drawer{
    width:100% !important;
    max-width:100% !important;
    left:0 !important; right:0 !important;
  }
  #drawer .dbody{ padding-bottom:calc(84px + env(safe-area-inset-bottom, 0px)); }

  /* ---------- 5. Bottom tab bar ---------- */
  .mtabs{
    position:fixed; left:0; right:0; bottom:0;
    z-index:60;
    display:grid !important; grid-auto-flow:column; grid-auto-columns:1fr;
    background:color-mix(in srgb, var(--panel,#fff) 88%, transparent);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
    backdrop-filter:saturate(180%) blur(14px);
    border-top:1px solid var(--border,#e3e8e5);
    padding:4px 4px env(safe-area-inset-bottom, 0px);
    box-shadow:0 -8px 28px rgba(11,31,22,.07);
  }
  @supports not (backdrop-filter: blur(1px)){
    .mtabs{ background:var(--panel,#fff); }
  }

  .mtab{
    position:relative;
    appearance:none; border:0; background:none; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    min-height:54px; padding:8px 2px 6px;
    font:500 10.5px/1 var(--sans, system-ui);
    letter-spacing:.005em;
    color:var(--mute,#5a6b7b);
    transition:color var(--dur-fast,120ms) ease;
  }
  /* Explicit — these icons must never inherit a fill from elsewhere. */
  .mtab svg{
    width:23px; height:23px;
    fill:none; stroke:currentColor;
    opacity:.9;
    transition:transform var(--dur-normal,200ms) var(--ease-spring, ease), opacity var(--dur-fast,120ms) ease;
  }
  .mtab:active svg{ transform:scale(.9); }

  /* Active: accent colour, icon lifts, hairline indicator above it. */
  .mtab.active{ color:var(--accent,#1A9457); font-weight:600; }
  .mtab.active svg{ opacity:1; transform:translateY(-1px); }
  .mtab.active::before{
    content:"";
    position:absolute; top:0; left:50%;
    width:26px; height:3px; border-radius:0 0 3px 3px;
    background:var(--accent,#1A9457);
    transform:translateX(-50%);
    animation:m-tabin var(--dur-normal,200ms) var(--ease-decelerate, ease-out) both;
  }
  @keyframes m-tabin{ from{ transform:translateX(-50%) scaleX(.2); opacity:0 } to{ transform:translateX(-50%) scaleX(1); opacity:1 } }

  .mtab .mtab-dot{
    position:absolute; top:6px; left:50%; margin-left:5px;
    min-width:16px; height:16px; border-radius:9px;
    background:#d64545; color:#fff; font-size:9.5px; font-weight:700; line-height:16px;
    text-align:center; padding:0 4px;
  }

  /* A nav bar under a full-screen record sheet is noise. */
  body.drawer-open .mtabs{ transform:translateY(110%); pointer-events:none; }
  .mtabs{ transition:transform var(--dur-moderate,300ms) var(--ease-standard, ease); }

  /* Give content room so the bar never covers the last row */
  #main{ padding-bottom:calc(70px + env(safe-area-inset-bottom, 0px)); }
  #toast{ bottom:calc(78px + env(safe-area-inset-bottom, 0px)); }

  /* ---------- 6. Density + tap targets (>=44px primary) ---------- */
  .side .nav{ min-height:46px; }
  .btn{ min-height:40px; }
  .btn.sm{ min-height:38px; }
  .btn.xs{ min-height:36px; padding:8px 12px; }
  .notif-btn{ min-width:42px; min-height:42px; display:inline-flex; align-items:center; justify-content:center; }
  .acct{ min-height:42px; min-width:42px; display:inline-flex; align-items:center; justify-content:center; }
  .tlchip, .chip{ min-height:32px; display:inline-flex; align-items:center; padding:6px 12px; }
  .scorepill{ min-height:26px; display:inline-flex; align-items:center; }
  select, input, textarea{ font-size:16px; }   /* stops iOS zoom-on-focus */

  /* Breathing room — the app was designed at desktop density */
  .card{ padding:16px 14px; }
  .viewhead{ flex-wrap:wrap; gap:10px; }
  .viewhead h1{ font-size:22px; }
  .kpis{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
  .rec-grid, .grid3, .jobs, .addrow{ grid-template-columns:1fr !important; }

  /* Kanban: one column at a time, swipeable inside its own track */
  .board{
    display:flex; gap:12px;
    overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
    padding-bottom:6px;
  }
  .kcol{ flex:0 0 86%; scroll-snap-align:center; }

  /* Hover lifts are meaningless on touch and cause sticky states */
  .card:hover, .kcard:hover, .btn:hover{ transform:none; box-shadow:inherit; }
}

/* Pointer-based (touch) devices at any size: no hover transforms */
@media (hover:none){
  .card:hover, .kcard:hover{ transform:none; }
  .btn:hover{ transform:none; }
  .btn.primary:hover::after{ transform:translateX(-140%); }  /* no phantom sheen */
}

/* ============================================================
   Mobile: wide data tables -> stacked, labelled cards
   Labels are injected by mobile.js from each table's own <thead>.
   ============================================================ */
@media (max-width:760px){

  /* The wrapper no longer needs to scroll — nothing overflows now. */
  .tablewrap{ overflow-x:visible; }

  #main table.m-stack,
  #main table.m-stack tbody{ display:block; width:100%; }
  /* .litab sets `table-layout:fixed; min-width:440px` — meaningless once stacked. */
  #main table.m-stack{ min-width:0 !important; table-layout:auto !important; }
  #main table.m-stack tbody td{ width:auto !important; }
  #main table.m-stack thead{ display:none; }

  #main table.m-stack tbody tr{
    display:block;
    border:1px solid var(--border,#e3e8e5);
    border-radius:12px;
    background:var(--panel,#fff);
    padding:6px 12px;
    margin:0 0 10px;
  }
  #main table.m-stack tbody tr:last-child{ margin-bottom:0; }
  #main table.m-stack tbody tr:hover{ background:var(--panel,#fff); }  /* no row-hover on touch */

  #main table.m-stack tbody td{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    width:auto;
    padding:8px 0;
    border:0;
    border-bottom:1px dashed var(--border,#eef1f4);
    text-align:right;
    white-space:normal;
    word-break:break-word;
  }
  #main table.m-stack tbody td:last-child{ border-bottom:0; }

  #main table.m-stack tbody td::before{
    content:attr(data-label);
    flex:0 0 40%;
    text-align:left;
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--mute,#5a6b7b);
  }
  /* Cells with no header (checkbox, row actions) get no label and go full width. */
  #main table.m-stack tbody td[data-label=""]::before{ content:none; }
  #main table.m-stack tbody td[data-label=""]{ justify-content:flex-end; }

  /* Empty-state rows stay as plain text. */
  #main table.m-stack tbody td[colspan]{ display:block; text-align:left; border:0; }
  #main table.m-stack tbody td[colspan]::before{ content:none; }

  /* Controls inside cells shouldn't be pinched — give them the value column. */
  #main table.m-stack tbody td select,
  #main table.m-stack tbody td input[type="text"],
  #main table.m-stack tbody td input[type="number"]{
    max-width:none !important;
    width:auto !important;
    flex:1 1 auto;
    min-width:0;
  }
  #main table.m-stack tbody td .btn{ flex:0 0 auto; }
  /* Narrower label column so values (e.g. "In progress") aren't truncated. */
  #main table.m-stack tbody td::before{ flex-basis:34%; }

  /* First cell (usually the name) reads as the card title. */
  #main table.m-stack tbody td:first-child{ font-weight:600; }

  /* ---------- Settings: stacked editor rows ----------
     .erow is flex; .erow2 is `grid-template-columns:1fr 1.5fr auto` — each
     needs its own stacking rule. */
  .erow{ flex-direction:column; align-items:stretch; gap:8px; }
  .erow2{ grid-template-columns:1fr !important; gap:8px; align-items:stretch; }
  .erow .gate-input, .erow select, .erow textarea,
  .erow2 .gate-input, .erow2 select, .erow2 textarea{
    width:100% !important; flex:1 1 auto !important; min-width:0;
  }
  .erow .btn, .erow2 .btn{ align-self:flex-start; }
  .gate-input{ width:100%; min-width:0; }
  .addrow, .grid2{ grid-template-columns:1fr !important; }
}