/* ===========================================================================
   console-fixes.css — UI corrections layered over the compiled Tailwind bundle
   Created 2026-08-28. Implements docs/plans/console-ui-build-list-2026-08-28.md
   in agentic-hub.

   WHY THIS FILE EXISTS, AND WHY IT IS NOT A HACK
   ---------------------------------------------------------------------------
   The Console has no upstream source repo — it is maintained on this server —
   and two facts make class-level edits the wrong tool here:

     1. assets/index-*.css is PRE-COMPILED Tailwind and is NOT regenerated by
        build-console.sh. Adding `min-h-11` to markup produces nothing, because
        no such rule exists in the stylesheet. Verified: min-w-11, h-11,
        min-h-11 and max-w-7xl are all absent.
     2. console-dist/source/console.js is 269 lines of minified output, not the
        "prettier-formatted, ~29K line" source that docs/console-architecture.md
        claims. Editing it means patching a minified bundle by hand.

   So the corrections land here, as plain CSS keyed to the class signatures the
   bundle actually emits. Loaded AFTER the Tailwind sheet in index.html.

   `!important` is used deliberately: these rules exist to beat utility classes
   of equal or higher specificity that are baked into a bundle we cannot edit.

   WHEN THE SPA IS EVENTUALLY REBUILT: fold these into the components and delete
   this file. Each block names its build-list ID so they can be traced.
   =========================================================================== */

/* --- D1, S4: text below the readable floor ---------------------------------
   The dashboard system-stat strip renders labels at 10px and the detail line at
   9px; Settings uses 10px throughout for pool state. 12px is the practical
   minimum on a phone. These two utilities exist in the bundle purely to make
   text small, so raising them at the source fixes every site at once. */
.text-\[9px\],
.text-\[10px\] {
  font-size: 12px !important;
  line-height: 1.4 !important;
}

/* --- G3: header icon buttons were 36px wide (48 tall) ---------------------- */
header button,
header a {
  min-width: 44px !important;
  min-height: 44px !important;
}

/* --- M1: tenant filter chips on /metrics were 32px tall -------------------- */
button.px-3.py-1\.5.text-xs.rounded-lg {
  min-height: 44px !important;
}

/* --- M2: time-range chips on /metrics were 28px tall, "7d" only 40px wide -- */
button.px-3.py-1.text-xs.rounded-full {
  min-height: 44px !important;
  min-width: 44px !important;
}

/* --- S2: OAuth pool Refresh buttons were 60x21 ----------------------------- */
button.text-\[10px\].px-2.py-0\.5.rounded {
  min-height: 44px !important;
  min-width: 44px !important;
}

/* --- S3: Auto / Lock badges were 34x18, the smallest controls in the app --- */
button.text-\[9px\].px-1\.5.py-0\.5.rounded {
  min-height: 44px !important;
  min-width: 44px !important;
}

/* --- L1, R1: auth-screen text buttons were 21px tall ----------------------- */
button.w-full.text-console-muted.text-sm,
button.text-console-blue.text-sm {
  min-height: 44px !important;
}

/* --- S1: Settings OAuth rows overflowed a 390px viewport -------------------
   The status cluster carries `shrink-0`, so on a narrow screen the row grew to
   443px and pushed its Refresh button up to 53px past the right edge. It stayed
   reachable only by scrolling horizontally inside a vertically-scrolling panel.
   Letting the cluster shrink and wrap keeps everything on screen. Scoped to
   phone widths so the desktop layout — which was already correct — is
   untouched. */
@media (max-width: 640px) {
  .flex.items-center.gap-1\.5.shrink-0 {
    flex-shrink: 1 !important;
    flex-wrap: wrap !important;
    justify-content: flex-end;
    row-gap: 6px;
  }
}

/* --- G2: no max-width, so the mobile-first layout spanned the whole screen --
   <main class="flex-1"> computed to 1440px with max-width:none at a 1440
   viewport — one column smeared across a laptop. main is display:block inside a
   flex-column parent, so capping its width and auto-centring is safe and does
   not disturb the flex chain. The header stays full-bleed (correct for a bar);
   its inner content is capped to the same measure so the nav lines up with the
   content below it. Applied only above 1024px — phones and tablets keep the
   existing full-bleed layout. */
@media (min-width: 1024px) {
  main {
    max-width: 1280px !important;
    margin-inline: auto !important;
    width: 100%;
  }
  header > div {
    max-width: 1280px;
    margin-inline: auto;
    width: 100%;
  }
}

/* ---------------------------------------------------------------------------
   "Waiting on you" panel — the question must be READABLE ON A PHONE.
   Added 2026-09-18 after Daniel could not read a question on his phone and sent
   a screenshot: the text was rendering SIX CHARACTERS WIDE, one word per line,
   with three-quarters of the screen empty beside it.

   Cause: the row is `flex`, the text column is `flex-1 min-w-0` (correct), but
   the action block beside it is `shrink-0` and holds four chips — Close,
   Answered, 4h, Moot — that are together ~300px wide. On a 390px viewport that
   leaves the text roughly 40px. The text column was never at fault; it was
   being starved by a sibling that refuses to shrink.

   So on narrow screens the row stacks: question full-width, actions underneath.

   NOT done with `sm:`/`md:` variants. The compiled bundle contains exactly ONE
   `min-width: 640px` media query, so Tailwind's responsive variants are
   effectively absent — `sm:flex-row` would compile to nothing and fail SILENTLY,
   in the direction that looks correct on the desktop where it would be reviewed.
   Same trap as the line-clamp utilities noted above.
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .ob-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
  }
  /* Age + chips move under the question and get the full width they need. */
  .ob-actions {
    align-items: flex-start !important;
    width: 100% !important;
  }
  /* Four chips at ~300px fit a 390px screen only with nothing competing; wrap
     anyway so a fifth action, or a larger system font, cannot re-create this. */
  .ob-actions > div {
    flex-wrap: wrap !important;
  }
}