/* salvage-tool — Carbon g100 skin.
 *
 * Load order (base.html): carbon-theme-g100.css (tokens) → tw.css
 * (compiled utilities, already themed to g100 values) → this file.
 * This file owns: Plex @font-faces, the Carbon component idioms the
 * utility layer can't express (button colors, focus, menus, tables,
 * fields, modal, toast), and the app-specific rules that used to live
 * in base.html's inline <style> block.
 */

/* ── IBM Plex ──────────────────────────────────────────────────── */
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400;
  src: url('/static/vendor/plex/IBMPlexSans-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500;
  src: url('/static/vendor/plex/IBMPlexSans-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600;
  src: url('/static/vendor/plex/IBMPlexSans-SemiBold.woff2') format('woff2');
}
/* Plex has no 700; SemiBold doubles as bold so font-bold utilities and
   <b>/<strong> render the real drawn weight instead of a synthetic one. */
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700;
  src: url('/static/vendor/plex/IBMPlexSans-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400;
  src: url('/static/vendor/plex/IBMPlexMono-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600;
  src: url('/static/vendor/plex/IBMPlexMono-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 700;
  src: url('/static/vendor/plex/IBMPlexMono-SemiBold.woff2') format('woff2');
}

/* ── base ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
/* Native widgets (datetime-local calendar popups, select option
   lists, scrollbars) render in dark mode to match the g100 theme. */
:root { color-scheme: dark; }
body {
  background: var(--cds-background, #161616);
  color: var(--cds-text-primary, #f4f4f4);
  font-size: 0.875rem;               /* Carbon body-01 */
  font-variant-numeric: tabular-nums;
}
.tabular { font-variant-numeric: tabular-nums; }
/* Two-line clamp used by the timeline partial. */
.truncate-2 {
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
button { cursor: pointer; }
::placeholder { color: var(--cds-text-placeholder, #6f6f6f); opacity: 1; }
::selection { background: var(--cds-highlight, #001d6c); }

/* Page-header rule (was the mint underline). Carbon separates a page
   title from its content with a subtle border, not an accent. */
.mint-rule { border-bottom: 1px solid var(--cds-border-subtle-01, #393939); }

/* ── Carbon contextual tokens ──────────────────────────────────────
   The vendored theme (@carbon/themes) emits only the SUFFIXED tokens
   (--cds-layer-01 …). The Carbon web components (ui-shell header)
   style their shadow DOM with the CONTEXTUAL ones (--cds-layer,
   --cds-layer-hover, --cds-border-subtle, …) and several have no
   baked-in fallback — without these aliases the header-menu dropdowns
   (Recovery / Admin) render transparent. Layer 1 is the page default;
   same fix as the Performance tool (152da51). */
:root {
  --cds-layer: var(--cds-layer-01);
  --cds-layer-hover: var(--cds-layer-hover-01);
  --cds-layer-active: var(--cds-layer-active-01);
  --cds-layer-selected: var(--cds-layer-selected-01);
  --cds-layer-selected-hover: var(--cds-layer-selected-hover-01);
  --cds-layer-accent: var(--cds-layer-accent-01);
  --cds-layer-accent-hover: var(--cds-layer-accent-hover-01);
  --cds-layer-accent-active: var(--cds-layer-accent-active-01);
  --cds-layer-background: var(--cds-layer-background-01);
  --cds-field: var(--cds-field-01);
  --cds-field-hover: var(--cds-field-hover-01);
  --cds-border-subtle: var(--cds-border-subtle-01);
  --cds-border-subtle-selected: var(--cds-border-subtle-selected-01);
  --cds-border-strong: var(--cds-border-strong-01);
  --cds-border-tile: var(--cds-border-tile-01);
  /* Carbon v11 layout scale — referenced without fallbacks in a few
     component style paths (sizing goes inconsistent while undefined) */
  --cds-layout-size-height-xs: 1.5rem;
  --cds-layout-size-height-sm: 2rem;
  --cds-layout-size-height-md: 2.5rem;
  --cds-layout-size-height-lg: 3rem;
  --cds-layout-size-height-xl: 4rem;
  --cds-layout-size-height-2xl: 5rem;
  --cds-layout-size-height-min: 1.5rem;
  --cds-layout-size-height-max: 5rem;
  --cds-layout-density-padding-inline-min: 0.5rem;
  --cds-layout-density-padding-inline-normal: 1rem;
  --cds-layout-density-padding-inline-max: 1rem;
}

/* ── Carbon focus (g100 = 2px white) ───────────────────────────── */
button:focus-visible, a:focus-visible, summary:focus-visible,
[role=button]:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--cds-focus, #ffffff);
  outline-offset: 1px;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--cds-focus, #ffffff);
  outline-offset: -2px;
}

/* ── Carbon button colors on the utility button idioms ─────────── */
/* Solid mint = the app's primary action → Carbon button-primary.
   Solid red-danger = destructive action → Carbon button-danger.
   The tinted variants (bg-mint/10 …) are untouched. */
.bg-mint { background-color: var(--cds-button-primary, #0f62fe) !important; }
.bg-mint, .bg-mint.text-bg-deep { color: var(--cds-text-on-color, #ffffff); }
.hover\:bg-mint:hover,
.bg-mint:is(button, a, [role=button], input[type=submit]):hover {
  background-color: var(--cds-button-primary-hover, #0353e9) !important;
}
.bg-mint:is(button, a, [role=button], input[type=submit]):active {
  background-color: var(--cds-button-primary-active, #002d9c) !important;
}
.bg-red-danger { background-color: var(--cds-button-danger, #da1e28) !important; }
.bg-red-danger, .bg-red-danger.text-bg-deep { color: var(--cds-text-on-color, #ffffff); }
.bg-red-danger:is(button, a, [role=button], input[type=submit]):hover {
  background-color: var(--cds-button-danger-hover, #b81922) !important;
}
/* Solid amber = warning action → Carbon support-warning keeps BLACK text
   (utility text-bg-deep already resolves to #161616; just pin the bg). */
.bg-amber-warn { background-color: var(--cds-support-warning, #f1c21b) !important; }

/* Disabled states — Carbon flattens to the disabled grays. */
button:disabled, input[type=submit]:disabled {
  background-color: var(--cds-button-disabled, #525252) !important;
  border-color: transparent !important;
  color: var(--cds-text-on-color-disabled, #8d8d8d) !important;
  cursor: not-allowed;
}

/* ── form controls — Carbon idioms ─────────────────────────────── */
/* Selects: hide the native arrow, draw the Carbon chevron. Multi-
   selects keep their native list rendering. */
select:not([multiple]) {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M4 6l4 4 4-4' stroke='%23c6c6c6' stroke-width='1.4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  background-size: 1rem;
  padding-right: 2.25rem !important;
}
/* Checkboxes + radios take the Carbon interactive color. */
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--cds-button-primary, #0f62fe);
}

/* Segmented controls (radio_segments widget + the header density
   toggle) — Carbon content-switcher idiom: the selected segment is
   high-contrast inverse, not a tinted chip. */
[role="radiogroup"] > label:has(:checked),
[data-density-toggle] > .bg-mint\/20 {
  background: var(--cds-layer-selected-inverse, #f4f4f4) !important;
  color: var(--cds-text-inverse, #161616) !important;
}

/* Toggle switches (the account-detail brake cards render
   role="switch" buttons with a track span + thumb span) — Carbon
   toggle anatomy: white thumb, $toggle-off gray track when off. The
   semantic ON track colors (blue enabled / red LIVE / amber paused)
   are set by the utility classes and stay. */
[role="switch"] span > span {
  background-color: var(--cds-icon-on-color, #ffffff) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
[role="switch"] > span.bg-bg-raised-alt,
[role="switch"] span.bg-bg-raised-alt {
  background-color: var(--cds-toggle-off, #6f6f6f) !important;
  border-color: transparent !important;
}

/* Tab strips (Configure / Event history / Operate) — Carbon line-tab
   idiom: the selected tab keeps the 2px interactive underline but its
   label reads in text-primary, not accent blue. */
.border-b-2.border-mint { color: var(--cds-text-primary, #f4f4f4); }

/* ── tables — Carbon data-table idiom ──────────────────────────── */
table { border-collapse: collapse; }
table th { font-weight: 600; }
/* Sticky headers get the Carbon header layer. */
table thead.sticky th {
  position: sticky; top: 0; z-index: 1;
  background: var(--cds-layer-accent-01, #393939);
}
/* Carbon row hover. `.no-row-hover` opts a table out. */
@media (hover: hover) {
  table:not(.no-row-hover) > tbody > tr:hover > td {
    background-color: var(--cds-layer-hover-01, #333333);
  }
}

/* Density toggle: `body[data-density=compact]` tightens row padding. */
body[data-density="compact"] table td,
body[data-density="compact"] table th { padding-top: 0.25rem; padding-bottom: 0.25rem; }

/* Mobile: compressed cells. */
@media (max-width: 640px) {
  table td, table th { padding-left: 0.5rem; padding-right: 0.5rem; }
}

/* ── bulk-action toolbar visibility (CSS-only, widgets.js flips) ── */
[data-bulk-state="empty"] [data-bulk-show-when="active"] { display: none !important; }
[data-bulk-state="active"] [data-bulk-show-when="empty"] { display: none !important; }

/* ── dropdown menus (details.nav-dropdown) — Carbon menu panel ──── */
details.nav-dropdown > summary { list-style: none; }
details.nav-dropdown > summary::-webkit-details-marker { display: none; }
details.nav-dropdown > summary::marker { content: ""; }

/* ── header (cds-header ui-shell + light-DOM extras) ───────────── */
cds-header { position: fixed; top: 0; left: 0; right: 0; z-index: 8000; }
.hdr-right { margin-left: auto; display: flex; align-items: stretch; gap: 0; height: 47px; }
/* flat header trigger — Carbon ui-shell idiom (full height, layer hover) */
.hdr-item > summary {
  display: flex; align-items: center; height: 47px; padding: 0 12px;
  font-size: 0.75rem; letter-spacing: 0.32px;
  color: var(--cds-text-secondary, #c6c6c6);
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: background-color .11s, color .11s;
}
.hdr-item > summary:hover, .hdr-item[open] > summary {
  background: var(--cds-layer-hover-01, #333333);
  color: var(--cds-text-primary, #f4f4f4);
}
.hdr-item { position: relative; display: flex; align-items: stretch; }
.hdr-panel {
  position: absolute; top: 100%; right: 0; z-index: 8001;
  min-width: 16rem;
  background: var(--cds-layer-01, #262626);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
.hdr-clock {
  display: none; align-items: center; gap: 6px; padding: 0 12px;
  font-family: 'IBM Plex Mono', monospace; font-size: 0.75rem;
  color: var(--cds-text-secondary, #c6c6c6); user-select: none;
}
@media (min-width: 1056px) { .hdr-clock { display: flex; } }

/* mobile side drawer (light DOM — the bundled cds-side-nav ships
   without usable styles; same pattern as the Performance tool) */
.side-drawer {
  position: fixed; top: 48px; left: 0; bottom: 0; z-index: 7999;
  width: 16rem; padding: 8px 0; display: none; overflow-y: auto;
  background: var(--cds-layer-01, #262626);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
.side-drawer.open { display: block; }
.sd-link {
  display: block; padding: 8px 16px; font-size: 0.875rem;
  color: var(--cds-text-secondary, #c6c6c6); text-decoration: none;
}
.sd-link:hover { background: var(--cds-layer-hover-01, #333333); color: var(--cds-text-primary, #f4f4f4); }
.sd-link.on { color: var(--cds-text-primary, #f4f4f4);
  box-shadow: inset 3px 0 0 var(--cds-border-interactive, #4589ff); }
.sd-head {
  padding: 12px 16px 4px; font-size: 0.688rem; letter-spacing: 0.32px;
  text-transform: uppercase; color: var(--cds-text-helper, #8d8d8d);
}
.sd-sep { border-top: 1px solid var(--cds-border-subtle-01, #393939); margin: 8px 0; }

/* ── tooltip affordance ([data-tip]) ───────────────────────────── */
[data-tip] {
  cursor: help;
  text-decoration: underline dotted var(--cds-border-strong-01, #6f6f6f);
  text-underline-offset: 2px;
}
[data-tip]:hover,
[data-tip]:focus-visible { text-decoration-color: var(--cds-link-primary, #78a9ff); }
button[data-tip], a[data-tip], [data-tip][role="button"],
[data-tip].px-2 { text-decoration: none !important; }

/* ── keyboard navigation (keyboard.js) ─────────────────────────── */
tr.kb-row-active { background: rgba(69, 137, 255, 0.10) !important; }
tr.kb-focusable:focus { outline: none; }

/* shortcut help dialog — Carbon modal idiom */
.kb-help { position: fixed; inset: 0; background: rgba(22, 22, 22, 0.65);
           display: none; align-items: center; justify-content: center;
           z-index: 9000; }
.kb-help.kb-help-open { display: flex; }
.kb-help-card { background: var(--cds-layer-01, #262626);
                box-shadow: 0 4px 8px rgba(0, 0, 0, .5);
                padding: 1rem 1rem 1.5rem;
                max-width: 28rem; width: calc(100% - 2rem); }
.kb-help-h { font-size: 0.875rem; font-weight: 600;
             color: var(--cds-text-primary, #f4f4f4);
             margin: 0 0 0.75rem; }
.kb-help-table { width: 100%; font-size: 0.812rem; }
.kb-help-table th { text-align: left; padding: 0.25rem 1rem 0.25rem 0;
                    font-family: 'IBM Plex Mono', monospace;
                    color: var(--cds-link-primary, #78a9ff); font-weight: 600;
                    white-space: nowrap; }
.kb-help-table td { color: var(--cds-text-primary, #f4f4f4); padding: 0.25rem 0; }
.kb-help-foot { margin: 0.75rem 0 0; font-size: 0.75rem;
                color: var(--cds-text-helper, #8d8d8d); }