/* Project-specific overrides. Tailwind utility classes do most of the work;
   this file exists so /static/app.css doesn't 404. */

/* Release/beta tag (_base.html) — the canonical Hank treatment shared by every
   service (codesets/scholar/claimcleaner + this console): a small italic
   lowercase "beta" in the brand cyan, floating just above the top-right of the
   wordmark. NOT a rectangle. `font-size:.5em` scales it with the wordmark;
   `position:relative; top` lifts it above the cap line as a visual offset only
   (it stays in flow, so it never overlaps the nav). Lives INSIDE the wordmark
   anchor so it hugs the name instead of being pushed away by the nav flex gap.
   Deeper cyan (#0891b2) on the LIGHT console — the #00d9ff brand cyan the dark
   services use is too faint on near-white; the cyan glow rgba is shared. */
.release-badge {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-style: italic;
  font-weight: 600;
  font-size: .5em;
  letter-spacing: .02em;
  text-transform: lowercase;
  text-decoration: none;
  color: #0891b2;
  text-shadow: 0 0 8px rgba(0, 217, 255, .45);
  position: relative;
  top: -.9em;
  margin-left: .16em;
}
@media (prefers-color-scheme: dark) {
  .release-badge { color: #00d9ff; text-shadow: 0 0 9px rgba(0, 217, 255, .55); }
}

/* ---- Status page (/status, /status/ops) ----
   Color IS the signal here, and the vendored tailwind subset lacks the
   emerald/amber/orange utilities (and a few layout ones), so everything
   load-bearing is explicit. Banner backgrounds are the -700 shades: white
   text on emerald/amber/orange-600 fails WCAG AA (3.2-3.8:1); the -700s
   clear 4.5:1. Strip cells differ by LIGHTNESS as well as hue (light green /
   mid amber / dark red) so red-green colorblind users can still read the
   history. */
.st-wrap { max-width: 48rem; margin: 0 auto; }
.st-banner { color: #fff; border-radius: .5rem; padding: .7rem 1rem; margin: 1rem 0 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
  box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.st-banner-operational    { background-color: #047857; }
.st-banner-degraded       { background-color: #b45309; }
.st-banner-partial_outage { background-color: #c2410c; }
.st-banner-major_outage   { background-color: #dc2626; }
.st-banner-unknown        { background-color: #4b5563; }
.st-banner-monitoring_gap { background-color: #4b5563; }
.st-chip { display: inline-block; font-size: .65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; padding: .125rem .5rem;
  border-radius: .25rem; white-space: nowrap; }
.st-chip-up       { background-color: #d1fae5; color: #065f46; }
.st-chip-degraded { background-color: #fef3c7; color: #92400e; }
.st-chip-down     { background-color: #fee2e2; color: #991b1b; }
.st-chip-unknown  { background-color: #e5e7eb; color: #374151; }
.st-chip-skipped  { background-color: #e5e7eb; color: #374151; }
.st-strip { display: flex; gap: 1px; height: 2rem; }
.st-strip-sm { height: 1.25rem; }
.st-cell { flex: 1 1 0%; min-width: 1px; border-radius: 2px; }
.st-cell-up       { background-color: #34d399; }
/* Degraded days carry a TEXTURE cue (diagonal hatch), not just a hue —
   up (#34d399) and a flat amber are luminance-identical, invisible to
   red-green colorblind users. Down days differ by lightness already. */
.st-cell-degraded { background: repeating-linear-gradient(
    45deg, #b45309 0 3px, #f59e0b 3px 6px); }
.st-cell-down     { background-color: #b91c1c; }
.st-cell-none     { background-color: #e5e7eb; }
.st-row + .st-row { border-top: 1px solid #f3f4f6; }
.st-sep { border-top: 1px solid #f3f4f6; }
.st-trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22rem; }
.st-list { list-style: disc; margin-left: 1.25rem; }
/* Warning affordances the vendored subset can't provide (no amber utilities). */
.st-gaps { background-color: #fffbeb; border: 1px solid #fde68a; color: #92400e;
  border-radius: .25rem; padding: .75rem; margin-bottom: 1.25rem; }
.st-note-warn { color: #b45309; }
.st-leader-ok  { color: #047857; font-weight: 700; }
.st-leader-bad { color: #b91c1c; font-weight: 700; }
.st-alert { background-color: #fee2e2; border: 1px solid #fca5a5; color: #991b1b;
  border-radius: .25rem; padding: .75rem; }
.st-ok-banner { background-color: #d1fae5; border: 1px solid #6ee7b7; color: #065f46;
  border-radius: .25rem; padding: .5rem .75rem; margin: .75rem 0; }
.st-btn { background-color: #111827; color: #fff; border-radius: .25rem;
  padding: .25rem .75rem; font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; }
.st-btn:hover { background-color: #374151; }
/* Utilities used by the status templates but absent from the vendored subset. */
.st-mt-4 { margin-top: 1rem; }
.st-my-3 { margin-top: .75rem; margin-bottom: .75rem; }
.st-font-normal { font-weight: 400; }
/* Incident/channel config form input widths (w-24/w-28/w-40 not in the subset). */
.inc-num { width: 5.5rem; }
.inc-chan { width: 11rem; }
.inc-wide { width: 16rem; }

/* Latency sparkline — bars heighted inline (style-src allows inline style). */
.st-spark { display: flex; align-items: flex-end; gap: 1px; height: 1.75rem; }
.st-spark-bar { flex: 1 1 0%; min-width: 1px; background-color: #0891b2;
  border-radius: 1px 1px 0 0; align-self: flex-end; }
.st-spark-bar.st-spark-none { background-color: #e5e7eb; height: 2px; }
/* Latency badge — compact monospace pill. */
.st-lat { font-family: ui-monospace, monospace; font-size: .7rem; color: #0e7490; }
.st-uptime-windows { display: flex; gap: .75rem; }
@media (prefers-color-scheme: dark) {
  .st-spark-bar { background-color: #22d3ee; }
  .st-spark-bar.st-spark-none { background-color: #374151; }
  .st-lat { color: #67e8f9; }
}
@media (prefers-color-scheme: dark) {
  .st-chip-up       { background-color: #064e3b; color: #a7f3d0; }
  .st-chip-degraded { background-color: #78350f; color: #fde68a; }
  .st-chip-down     { background-color: #7f1d1d; color: #fecaca; }
  .st-chip-unknown, .st-chip-skipped { background-color: #374151; color: #d1d5db; }
  .st-cell-none     { background-color: #374151; }
  .st-row + .st-row { border-top-color: #374151; }
  .st-sep           { border-top-color: #374151; }
  .st-gaps  { background-color: #451a03; border-color: #92400e; color: #fde68a; }
  .st-note-warn { color: #fbbf24; }
  .st-leader-ok  { color: #34d399; }
  .st-leader-bad { color: #f87171; }
  .st-cell-degraded { background: repeating-linear-gradient(
      45deg, #92400e 0 3px, #f59e0b 3px 6px); }
  .st-alert { background-color: #450a0a; border-color: #b91c1c; color: #fecaca; }
  .st-ok-banner { background-color: #064e3b; border-color: #047857; color: #a7f3d0; }
}

/* "Signed in as" nav menu (_base.html) — native <details>, no JS, CSP-safe. */
/* Persistent "Acting as <org>" chip for multi-org users — always-visible cue of
   which org the console is operating as (the active-org switch is console-only). */
.acting-as { display: inline-flex; align-items: baseline; gap: .35rem; max-width: 16rem;
  padding: .2rem .55rem; border-radius: 9999px; border: 1px solid #cffafe; background: #ecfeff;
  font-size: .72rem; white-space: nowrap; overflow: hidden; }
.acting-as-label { color: #0e7490; text-transform: uppercase; letter-spacing: .03em; font-size: .6rem; font-weight: 700; flex: none; }
.acting-as-org { color: #0e7490; font-weight: 600; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (prefers-color-scheme: dark) {
  .acting-as { border-color: #155e75; background: #083344; }
  .acting-as-label, .acting-as-org { color: #67e8f9; }
}
@media (max-width: 640px) { .acting-as { display: none; } }

.usermenu { position: relative; }
.usermenu > summary { list-style: none; cursor: pointer; }
.usermenu > summary::-webkit-details-marker { display: none; }
.usermenu-trigger { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: #4b5563; }
.usermenu-avatar { display: inline-flex; align-items: center; justify-content: center;
  width: 1.55rem; height: 1.55rem; border-radius: 9999px; background: #0891b2; color: #fff;
  font-weight: 700; font-size: .72rem; text-transform: uppercase; flex: none; }
.usermenu-name { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usermenu-chev { color: #9ca3af; font-size: .7rem; }
.usermenu-panel { position: absolute; right: 0; top: calc(100% + .45rem); min-width: 15rem; max-width: 22rem; z-index: 50;
  background: #fff; border: 1px solid #e5e7eb; border-radius: .5rem;
  box-shadow: 0 10px 25px rgba(0,0,0,.12); padding: .25rem;
  max-height: min(70vh, 32rem); overflow-y: auto; }
.usermenu-head { padding: .5rem .65rem; border-bottom: 1px solid #f3f4f6; margin-bottom: .25rem; }
.usermenu-email { font-size: .8rem; font-weight: 600; color: #111827; overflow: hidden; text-overflow: ellipsis; }
.usermenu-meta { font-size: .7rem; color: #6b7280; margin-top: .1rem; }
.usermenu-item { display: block; width: 100%; text-align: left; padding: .42rem .65rem; font-size: .8rem;
  color: #374151; border-radius: .35rem; background: none; border: none; cursor: pointer; text-decoration: none; }
.usermenu-item:hover { background: #f3f4f6; }
.usermenu-danger { color: #dc2626; }
.usermenu-danger:hover { background: #fef2f2; }
/* Org switcher (multi-org users): a small grouped list inside the user menu. */
.usermenu-orgswitch { border-bottom: 1px solid #f3f4f6; margin-bottom: .25rem; padding-bottom: .25rem; }
.usermenu-orglabel { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: #6b7280; padding: .35rem .65rem .15rem; }
.usermenu-item:focus-visible { outline: 2px solid #0891b2; outline-offset: -2px; border-radius: .35rem; }
.usermenu-org { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
/* min-width:0 lets the flex child actually shrink so the ellipsis triggers and a
   long org name clips instead of widening the whole panel (classic flex gotcha). */
.usermenu-org-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.usermenu-org-role { font-size: .68rem; color: #6b7280; text-transform: lowercase; flex: none; }
.usermenu-org-active { font-weight: 600; color: #0e7490; }            /* cyan-700: AA on white */
.usermenu-org-active .usermenu-org-role { color: #0e7490; }
@media (prefers-color-scheme: dark) {
  .usermenu-trigger { color: #d1d5db; }
  .usermenu-panel { background: #1f2937; border-color: #374151; box-shadow: 0 10px 25px rgba(0,0,0,.5); }
  .usermenu-head { border-bottom-color: #374151; }
  .usermenu-email { color: #f9fafb; }
  .usermenu-item { color: #e5e7eb; }
  .usermenu-item:hover { background: #374151; }
  .usermenu-danger { color: #f87171; }
  .usermenu-danger:hover { background: #3f1d1d; }
  .usermenu-orgswitch { border-bottom-color: #374151; }
  .usermenu-org-active { color: #22d3ee; }
  .usermenu-org-active .usermenu-org-role { color: #22d3ee; }
}

/* Per-service icon badge (console + admin service tiles). A colored monogram —
   the Hank services don't serve real favicons yet, and CSP img-src is 'self',
   so this gives each service a stable visual identifier with no external load.
   Swap to <img> if/when services host an icon and the registry carries its URL. */
.svc-icon { display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: .6rem; color: #fff;
  font-weight: 700; font-size: 1.25rem; line-height: 1;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; text-transform: uppercase; flex: none; }

/* Real per-service favicon, served live by each service and referenced by URL
   (admin.products.icon_path + the service's resolved host) — NEVER copied into
   this repo. CSP img-src allows https://*.hank.ai + *.up.railway.app. The white
   rounded chip keeps transparent/dark icons legible on either theme; if the
   remote load fails, /static/js/svc-icon.js swaps it back to the .svc-icon
   monogram so a tile never shows a broken-image glyph. */
.svc-icon-img { width: 2.75rem; height: 2.75rem; border-radius: .6rem; flex: none;
  object-fit: contain; background: #fff; padding: 3px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }

/* Responsive top nav (_base.html). On a narrow viewport (Chrome side panel or
   DevTools docked) the link group WRAPS to extra rows instead of overflowing and
   shoving the user menu off-screen — the account / Sign-out menu stays reachable
   at any width. Pure CSS: the vendored tailwind subset lacks flex-wrap / min-w-0
   / shrink-0, and this is load-bearing (the bug was the user menu getting clipped). */
.appnav-row   { min-height: 3.5rem; }   /* keeps the old h-14 height single-row; grows when links wrap */
.appnav-links { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; row-gap: .15rem; }
.appnav-user  { flex: 0 0 auto; }        /* never shrinks or gets pushed out of view */