/*
 * Smart Logger — Mobile Overrides
 * Sits on top of GMKB v2 (brand.grey-matters.com/v2/) + dashboard.css.
 * Project-specific responsive rules; not generic enough to live in GMKB.
 */

/* ─── <1024px: top tab-bar hidden, bottom gm-mobile-nav fixed ─────────────── */
@media (max-width: 1023px) { /* below --bp-tablet */
  .tab-bar { display: none; }

  .gm-mobile-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-mobile-nav);
  }

  /* Reserve space so content doesn't sit under the fixed nav */
  body {
    padding-bottom: calc(var(--gm-tap-comfortable) + var(--space-md));
  }

  /* Settings has NO bottom-nav entry (admin-only, reached via the gear menu →
     Admin). It used to be `display: none !important` here to avoid an "orphan"
     tab — but the gear menu still switched to it, so Admin landed on a blank
     page below 1024px. Settings is now responsive (dashboard.css @1023 collapses
     .settings-grid to one column, @639 stacks each row) so the tab renders.
     syncMobileNavActive() in dashboard-mobile.js matches no nav item for
     "settings" and simply clears the active state — no false highlight.
     The tab-bar is hidden below 1024px, but the fixed bottom nav stays on
     screen, so there is always a way back out of Settings.
     Fixed 2026-08-03, S61. */
}

/* ─── <640px: header + date bar tighten ──────────────────────────────────── */
@media (max-width: 639px) { /* below --bp-phone */
  .app-header,
  .header,
  .date-bar {
    padding-inline: var(--gm-gutter-mobile);
  }

  /* Date bar wraps to 2 rows on phone */
  .date-bar {
    flex-wrap: wrap;
    gap: var(--space-2xs);
  }

  /* Tab content padding tightens */
  .tab-content { padding-inline: var(--gm-gutter-mobile); }

  /* Container/table containers go full-bleed minus mobile gutter */
  .table-container {
    margin-inline: calc(-1 * var(--gm-gutter-mobile));
    padding-inline: var(--gm-gutter-mobile);
  }

  /* ─── expand-row inside tool-table--cards ─────────────────────────────────────
     tool-table--cards phone card-mode sets every `tbody tr { display: block }`
     (specificity 0,3,2) which beats local `.expand-row { display: none }`
     (0,1,0). Without this override, every employee row renders as if open
     — including hollow form skeletons when no scan data exists.
     Specificity here is (0,4,2) — wins. */
  .tool-table--cards tbody tr.expand-row { display: none; }

  .tool-table--cards tbody tr.expand-row.open {
    display: block;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    margin-top: calc(-1 * var(--space-sm) - 1px); /* attach to parent card */
    margin-bottom: var(--space-sm);
    padding: var(--space-lg);
    box-shadow: var(--shadow-subtle);
  }

  /* Expanded parent row: bump padding so inner label/value rows breathe.
     tool-table--cards default (--space-md) reads tight against the blue stripe. */
  .tool-table--cards tbody tr.expandable.active {
    padding: var(--space-lg);
  }

  /* Exports History rows render all label/value pairs in one card (no expand).
     Same breathing-room treatment as expanded employee rows. */
  .exports-history-table tbody tr {
    padding: var(--space-lg);
  }

  /* Filter pills below the stat-grid own the active-filter state on phone.
     Drop the redundant outline on the stat-card to reduce noise. */
  .filter-card.active {
    border-color: var(--ui-border);
    box-shadow: none;
  }

  /* The expand-row's single colspan td must render as block (not flex/space-between)
     and must not receive the card-title treatment tool-table--cards applies to first-child td. */
  .tool-table--cards tbody tr.expand-row td {
    display: block;
    padding: 0;
    border: none;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
  }
  .tool-table--cards tbody tr.expand-row td::before { display: none; }

  /* ─── Expand panel: strip the desktop table scaffolding ──────────────────
     setupAttendanceRows() (dashboard.js) removes the expand cell's colspan and
     injects SIX <td>s — five empty spacers plus the See-growth cell — purely so
     the button lands under the Status column on desktop. In card mode every
     <td> becomes a stacked block, so each spacer renders an empty
     .expand-content carrying `padding: 20px 24px 20px 16px` — 40px of nothing.
     Measured at 412px: 5 × 40 = 200px of dead space inside a 443px expanded
     row, i.e. 45% of the panel. They have no job on phone. */
  .tool-table--cards tbody tr.expand-row td.expand-cell-empty { display: none; }

  /* The See-growth cell is a table column on desktop; on phone it's just a
     block, so the column background reads as a stray tint. Alignment is left
     alone deliberately — `#tab-attendance .tool-table--cards td:nth-child(n+3)`
     (dashboard.css) carries an ID and outranks anything reasonable here, and a
     centred single action is right on phone anyway. */
  .tool-table--cards tbody tr.expand-row td.ach-link-cell {
    background: none;
  }

  /* Touch-target audit — the button renders 29px, under the 44px floor the
     rest of this file enforces. */
  .ach-link { min-height: var(--gm-tap-min); }

  /* ─── Drop the blue active-row stripes ──────────────────────────────────
     dashboard.css puts `box-shadow: inset 3px 0 0` on the first cell of the
     active row (--tool-blue) and its open expand-row (--tool-blue-bg). On
     desktop that's a "you are here" rule running down a dense table — it earns
     its keep. In card mode the open row is already a discrete bordered,
     shadowed card, so the stripe marks nothing and just floats inside the
     card's own padding. Desktop keeps it; phone drops it.
     Hadrien 2026-08-03. */
  .tool-table--cards tbody tr.expandable.active td:first-child,
  .tool-table--cards tbody tr.expand-row.open td:first-child {
    box-shadow: none;
  }

  /* dashboard.css indents the first cell by 40px to clear the desktop column
     gutter (`td:first-child > .expand-inner > .expand-content` and its .open
     counterpart). The card already supplies its own padding, so that indent
     just pushes content into the middle of the card. */
  .tool-table--cards tbody tr.expand-row.open .expand-content,
  .tool-table--cards tbody tr.expand-row td:first-child > .expand-inner > .expand-content,
  .tool-table--cards tbody tr.expand-row.open td:first-child .expand-content {
    padding-inline: 0;
  }

  /* ─── Legal name: stacked, no box ────────────────────────────────────────
     Desktop renders it as a one-line strip — label and value side by side in a
     tinted box with a left rule — which reads as a sub-header about the person.
     At phone width that box leaves the value ~150px, so a long Thai legal name
     wrapped three lines deep. Stacked label-above-value gives it the full card
     width. Grey background dropped on Hadrien's call (2026-08-03): the tint
     carries no meaning once the panel is already inside a card. */
  .growth-legal-name {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3xs);
    padding: 0;
    margin-bottom: var(--space-md);
    background: none;
    border-left: none;
    border-radius: 0;
  }

  /* When a row is followed by an open expand-row, square its bottom corners so
     the two read as one continuous card. */
  .tool-table--cards tbody tr:has(+ tr.expand-row.open) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0;
  }

  /* ─── Growth Manager Review: stack label above 5-step scale ──────────────
     Desktop: [Label 130px] [Crit][Below][Exp][Above][Except.] in one row.
     Phone: label on its own line, scale spans full width below.
     5 buttons × ~110px each fits comfortably in 610px. */
  .growth-dim-row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2xs);
    margin-block: var(--space-sm);
  }
  .growth-dim-label {
    width: auto;
    font-size: var(--type-xs);
    color: var(--ui-text);
    font-weight: var(--weight-semibold);
  }
  .growth-stepper {
    width: 100%;
  }
  .growth-step {
    padding-block: var(--space-xs); /* taller tap target on touch */
    min-height: var(--gm-tap-min);
  }

  /* ─── Growth badges: tappable on phone ──────────────────────────────────
     Desktop uses `title` attribute → hover tooltip. Phone has no hover, so
     tap the badge to show a popover (wired in dashboard-mobile.js). */
  .ach-badge {
    cursor: pointer;
    min-height: var(--gm-tap-min);
  }

  /* ─── Date bar: let the inner group wrap ────────────────────────────────
     .date-bar wraps its own three children, but .date-bar-left is `flex: 1`
     with no wrap of its own — so date picker + workday label + range select
     stayed on one line and ran past the gutter, pinning the "Day" select to
     the screen edge (measured: 12px past the bar at 375px). wrap only kicks
     in when the content genuinely doesn't fit, so wider phones are unchanged. */
  .date-bar-left {
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  /* ─── Card lists: drop the container frame ──────────────────────────────
     In card mode every row is already a bordered, rounded surface. Keeping
     .table-container's own background + border + radius draws a second frame
     around the stack. Scoped with :has() so tables that stay tabular on phone
     (and anything else in a .table-container) keep their frame. */
  .table-container:has(.tool-table--cards) {
    background: none;
    border: none;
    border-radius: 0;
    overflow: visible;
  }

  /* ─── Bonus header: summary gets its own row ────────────────────────────
     .bonus-summary is `flex: 1`, so it shared the row with the month stepper
     and collapsed to 71px — six words stacked one per line. Full-basis puts
     it on its own line under the stepper. */
  .bonus-summary {
    flex: 1 1 100%;
    text-align: left;
  }
}

/* ─── ≤420px: bottom nav has to fit 7 items ────────────────────────────────
   The nav's 7 items measure 403px at their natural label width, so on a 375px
   phone "Exports" is cut off — and the list is `overflow-x: visible`, so it
   can't even be scrolled to. gm-mobile-nav__item is `flex: 1` but can't shrink
   below its label (default `min-width: auto`), hence the explicit `min-width: 0`.
   Deliberately NOT at --bp-phone: above ~403px the items fit at full size and
   shrinking them there would be a pointless downgrade. Tap target stays 48px. */
@media (max-width: 420px) {
  .gm-mobile-nav__item { min-width: 0; }

  .gm-mobile-nav__link { padding-inline: var(--space-3xs); }

  .gm-mobile-nav__label {
    font-size: var(--type-3xs);
    text-align: center;
  }
}

/* ─── Badge popover (positioned by JS, visible on all sizes if invoked) ─── */
.ach-badge-popover {
  position: absolute;
  z-index: var(--z-popover, 9000);
  max-width: 240px;
  padding: var(--space-sm) var(--space-md);
  background: var(--ui-elevated);
  color: var(--ui-text);
  font-size: var(--type-xs);
  font-family: var(--font-body);
  line-height: 1.4;
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-medium);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity var(--duration-base) var(--ease-default),
    transform var(--duration-base) var(--ease-default);
}
.ach-badge-popover.open {
  opacity: 1;
  transform: translateY(0);
}