/* dashboard-enhance.css
   Shared readability + interaction layer loaded on every page after the theme.
   Net-new styles only; nothing here overrides the vendored theme wholesale. */

:root {
  --dash-hover: rgba(13, 110, 253, 0.06);
  --dash-stripe: rgba(0, 0, 0, 0.02);
  --dash-border: #e9ecef;
  --dash-muted: #5a6a7a;   /* >=4.5:1 on white; #8c98a4 was 2.94:1 and read faint */

  /* Semantic colours — the AA-corrected hues this file already uses for text,
     icons and borders, named once so pages stop re-deriving them as raw hex.
     Solid button fills and .badge.bg-* backgrounds are intentionally separate. */
  --dash-primary:       #0e7c7e;
  --dash-primary-hover: #0a5d5f;
  --dash-success:       #15803d;
  --dash-success-hover: #166534;
  --dash-warning:       #b45309;
  --dash-danger:        #dc3545;   /* matches .text-danger / .badge.bg-danger */
  --dash-info:          #087990;
  --dash-info-hover:    #055160;

  /* Radius scale (values match the itp/emr pages, which reference --r-sm/md/lg). */
  --r-xs:   3px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-pill: 999px;

  /* Elevation scale (matches the itp/emr --shadow* tokens). */
  --shadow-sm: 0 1px 2px rgba(15,23,42,.04);
  --shadow:    0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md: 0 4px 6px -1px rgba(15,23,42,.07), 0 2px 4px -2px rgba(15,23,42,.05);
  --shadow-lg: 0 8px 24px rgba(15,23,42,.12);
}

/* ---- Keyboard focus: restore the ring the theme strips ----
   The vendored theme sets *:focus{outline:none} (style.css) and repeats
   outline:none on many components, so keyboard users get no visible focus
   anywhere. :focus-visible only matches keyboard-driven focus, so mouse
   clicks stay ring-free; !important beats the theme's per-component rules. */
:focus-visible {
  outline: 2px solid var(--bs-primary, #0d6efd) !important;
  outline-offset: 2px;
}

/* ---- Semantic text + link contrast (override the vendored theme) ----
   The theme's .text-success/.text-warning/.text-info (#13bd8a/#FF9764/#2DCEE3)
   and its teal link colour (#19BCBF, ~2.3:1) all read washed-out on white.
   Same hues, darkened to hold >=4.5:1. Gradient fills, badges and buttons are
   untouched; component link colours (.nav-link etc.) still win by specificity. */
.text-success { color: #15803d !important; }
.text-warning { color: #b45309 !important; }
.text-info    { color: #087990 !important; }
.text-primary { color: #0e7c7e !important; }
/* Bootstrap's .link-* utilities are separate from .text-* — dashboard-helpers'
   sfdcLink renders org links as .link-info, which is bright cyan by default. */
.link-info { color: #087990 !important; }
.link-info:hover { color: #055160 !important; }
/* The theme's alert-warning is warm-brown on warm-peach (same-hue clash). */
.alert-warning { color: #664d03; }
a { color: #0e7c7e; }
a:hover { color: #0a5d5f; }   /* darken on hover — lightening loses contrast */

/* Theme teal/red/grey button fills leave their white labels short of 4.5:1
   (#19BCBF 2.3:1, #FF425C 3.4:1, #7E858E 3.7:1). Same hues, darkened to hold
   AA; hover/active step darker, never lighter. Covers the Bootstrap variable
   layer and the theme's direct rules; the !important disabled-state grey later
   in this file wins on disabled buttons. */
/* Front-page-style gradients: 90deg, base hue brightening to the right —
   each bright stop is engineered to keep white labels at ~4.3:1 or better,
   so the vibrancy costs (almost) no contrast. Hover slides the pair darker. */
.btn-primary {
  --bs-btn-bg: #0e7c7e; --bs-btn-border-color: #0e7c7e;
  --bs-btn-hover-bg: #0a5d5f; --bs-btn-hover-border-color: #0a5d5f;
  --bs-btn-active-bg: #0a5d5f; --bs-btn-active-border-color: #084d4f;
  background-color: #0e7c7e; border-color: #0e7c7e;
  background-image: linear-gradient(90deg, #0e7c7e, #0e8689);
}
.btn-primary:hover, .btn-primary:focus-visible,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle, .btn-primary.show {
  background-color: #0a5d5f; border-color: #0a5d5f;
  background-image: linear-gradient(90deg, #0a5d5f, #0e7c7e);
}
.btn-danger {
  --bs-btn-bg: #c81e3f; --bs-btn-border-color: #c81e3f;
  --bs-btn-hover-bg: #a91835; --bs-btn-hover-border-color: #a91835;
  --bs-btn-active-bg: #a91835; --bs-btn-active-border-color: #96152f;
  background-color: #c81e3f; border-color: #c81e3f;
  background-image: linear-gradient(90deg, #c81e3f, #dc2a4d);
}
.btn-danger:hover, .btn-danger:focus-visible,
.btn-danger:not(:disabled):not(.disabled).active,
.btn-danger:not(:disabled):not(.disabled):active,
.show > .btn-danger.dropdown-toggle, .btn-danger.show {
  background-color: #a91835; border-color: #a91835;
  background-image: linear-gradient(90deg, #a91835, #c81e3f);
}
.btn-secondary {
  --bs-btn-bg: #5c636a; --bs-btn-border-color: #5c636a;
  --bs-btn-hover-bg: #4d545a; --bs-btn-hover-border-color: #4d545a;
  --bs-btn-active-bg: #4d545a; --bs-btn-active-border-color: #43494f;
  background-color: #5c636a; border-color: #5c636a;
  background-image: linear-gradient(90deg, #5c636a, #6b737b);
}
.btn-secondary:hover, .btn-secondary:focus-visible,
.btn-secondary:not(:disabled):not(.disabled).active,
.btn-secondary:not(:disabled):not(.disabled):active,
.show > .btn-secondary.dropdown-toggle, .btn-secondary.show {
  background-color: #4d545a; border-color: #4d545a;
  background-image: linear-gradient(90deg, #4d545a, #5c636a);
}
.btn-success {
  --bs-btn-bg: #15803d; --bs-btn-border-color: #15803d;
  --bs-btn-hover-bg: #166534; --bs-btn-hover-border-color: #166534;
  --bs-btn-active-bg: #166534; --bs-btn-active-border-color: #14532d;
  background-color: #15803d; border-color: #15803d;
  background-image: linear-gradient(90deg, #15803d, #158745);
}
.btn-success:hover, .btn-success:focus-visible,
.btn-success:not(:disabled):not(.disabled).active,
.btn-success:not(:disabled):not(.disabled):active,
.show > .btn-success.dropdown-toggle, .btn-success.show {
  background-color: #166534; border-color: #166534;
  background-image: linear-gradient(90deg, #166534, #15803d);
}
/* Info: the theme's #2DCEE3 carries white labels at ~1.7:1. Same hue darkened to
   the AA teal-cyan used by .text-info / .link-info; completes the solid-button family. */
.btn-info {
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
  --bs-btn-bg: #087990; --bs-btn-border-color: #087990;
  --bs-btn-hover-bg: #055160; --bs-btn-hover-border-color: #055160;
  --bs-btn-active-bg: #055160; --bs-btn-active-border-color: #043d49;
  color: #fff; background-color: #087990; border-color: #087990;
  background-image: linear-gradient(90deg, #087990, #0a8aa3);
}
.btn-info:hover, .btn-info:focus-visible,
.btn-info:not(:disabled):not(.disabled).active,
.btn-info:not(:disabled):not(.disabled):active,
.show > .btn-info.dropdown-toggle, .btn-info.show {
  color: #fff; background-color: #055160; border-color: #055160;
  background-image: linear-gradient(90deg, #055160, #087990);
}
/* DataTables / Bootstrap pagination uses the same low-contrast teal. */
.page-link { color: #0e7c7e; }
.page-link:hover { color: #0a5d5f; }
.page-item.active .page-link { background-color: #0e7c7e; border-color: #0e7c7e; }
/* Outline buttons: the theme's text colours (#19BCBF/#7E858E/#FF425C) sit
   below AA on white. Same hues as the solid fills above; hover inverts. */
.btn-outline-primary { color: #0e7c7e; border-color: #0e7c7e; }
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary.active {
  color: #fff; background-color: #0e7c7e; border-color: #0e7c7e;
}
.btn-outline-secondary { color: #5c636a; border-color: #5c636a; background-color: transparent; }
.btn-outline-secondary:hover,
.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-outline-secondary.active {
  color: #fff; background-color: #5c636a; border-color: #5c636a;
}
.btn-outline-danger { color: #c81e3f; border-color: #c81e3f; }
.btn-outline-danger:hover,
.btn-outline-danger:not(:disabled):not(.disabled):active,
.btn-outline-danger.active {
  color: #fff; background-color: #c81e3f; border-color: #c81e3f;
}
.btn-outline-success { color: #15803d; border-color: #15803d; }
.btn-outline-success:hover,
.btn-outline-success:not(:disabled):not(.disabled):active,
.btn-outline-success.active {
  color: #fff; background-color: #15803d; border-color: #15803d;
}
.btn-outline-info { color: #087990; border-color: #087990; }
.btn-outline-info:hover,
.btn-outline-info:not(:disabled):not(.disabled):active,
.btn-outline-info.active {
  color: #fff; background-color: #087990; border-color: #087990;
}
.btn-outline-warning { color: #b45309; border-color: #b45309; }
.btn-outline-warning:hover,
.btn-outline-warning:not(:disabled):not(.disabled):active,
.btn-outline-warning.active {
  color: #fff; background-color: #b45309; border-color: #b45309;
}

/* ---- Table readability: clearer row hover + zebra, calmer header ---- */
table.dataTable tbody tr { transition: background-color .12s ease; }
table.dataTable tbody tr:hover > * { background-color: var(--dash-hover) !important; }
table.dataTable.stripe tbody tr.odd > *,
table.dataTable tbody tr:nth-of-type(odd) > * { background-color: var(--dash-stripe); }
table.dataTable thead th {
  font-size: .72rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #54667a;
}

/* ---- FixedHeader: keep the floating clone legible above content ---- */
.dtfh-floatingparent table.dataTable thead th,
table.fixedHeader-floating thead th,
.fixedHeader-floating {
  background: #fff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
  z-index: 1020;
}

/* ---- Tooltips / hover affordances ----
   Fully opaque (default 0.9 let the page bleed through and muddied the text) and
   roomier line-height/padding so the hover text reads crisply. */
.tooltip { --bs-tooltip-max-width: 320px; --bs-tooltip-opacity: 1; }
.tooltip-inner {
  max-width: 320px;
  text-align: left;
  line-height: 1.45;
  padding: .4rem .6rem;
  background-color: #1f2733;   /* solid slate, white text — high contrast, softer than pure black */
}
[data-bs-toggle="tooltip"][data-help],
.info-help { cursor: help; }

/* ---- Truncation: long cell text clips with an ellipsis (+ hover tooltip) ---- */
.cell-clip {
  display: inline-block;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* ---- Badges = read-only status/labels: consistent weight, not clickable ----
   Padding biased 0.07em UPWARD, set by rasterizing badges and measuring the
   ink pixels: glyphs snap to whole pixels, and the two reachable states at
   12px are ~0.6px low (symmetric) or ~0.4px high (this) — slightly-high is
   the optically-centered choice. Total height unchanged. */
.badge { font-weight: 600; letter-spacing: .01em; padding-top: .28em; padding-bottom: .42em; }
.badge:not(a):not(button) { cursor: default; }
/* Opt-in: a badge that genuinely filters/acts signals it with .badge-action */
.badge-action { cursor: pointer; }
.badge-action:hover { filter: brightness(.94); }

/* ---- Badge contrast: never render same-hue text on a same-hue fill ----
   Subtle fills get the darker "emphasis" text + a matching border so a pale
   badge stays legible (fixes e.g. green text on green). Solid fills get a
   text colour chosen for contrast (dark on light-yellow/cyan, white otherwise). */
/* Fallback hex after each var: a theme that predates Bootstrap 5.3's emphasis
   tokens leaves the var undefined, which would drop the text to the badge's
   default white — invisible on a pale subtle fill. The fallback keeps the dark
   emphasis colour no matter the theme. */
.badge.bg-success-subtle   { color: var(--bs-success-text-emphasis,   #0a3622) !important; border: 1px solid var(--bs-success-border-subtle,   #a3cfbb); }
.badge.bg-primary-subtle   { color: var(--bs-primary-text-emphasis,   #052c65) !important; border: 1px solid var(--bs-primary-border-subtle,   #9ec5fe); }
.badge.bg-danger-subtle    { color: var(--bs-danger-text-emphasis,    #58151c) !important; border: 1px solid var(--bs-danger-border-subtle,    #f1aeb5); }
.badge.bg-warning-subtle   { color: var(--bs-warning-text-emphasis,   #664d03) !important; border: 1px solid var(--bs-warning-border-subtle,   #ffe69c); }
.badge.bg-info-subtle      { color: var(--bs-info-text-emphasis,      #055160) !important; border: 1px solid var(--bs-info-border-subtle,      #9eeaf9); }
.badge.bg-secondary-subtle { color: var(--bs-secondary-text-emphasis, #2b2f32) !important; border: 1px solid var(--bs-secondary-border-subtle, #c4c8cb); }
/* Solid semantic badges read as white-on-dark across the board. The theme
   paints .bg-* badges with LIGHT gradients, which forced either washed-out
   white text or black-on-orange/teal flips — re-ground the fills on the same
   darkened hues the buttons use instead. */
.badge.bg-primary   { background: linear-gradient(90deg, #0e7c7e, #0e8689) !important; color: #fff !important; }
.badge.bg-success   { background: linear-gradient(90deg, #15803d, #158745) !important; color: #fff !important; }
.badge.bg-danger    { background: linear-gradient(90deg, #c81e3f, #dc2a4d) !important; color: #fff !important; }
.badge.bg-warning   { background: linear-gradient(90deg, #b45309, #c25b08) !important; color: #fff !important; }
.badge.bg-info      { background: linear-gradient(90deg, #087990, #08859a) !important; color: #fff !important; }
.badge.bg-secondary { background: linear-gradient(90deg, #5c636a, #6b737b) !important; color: #fff !important; }
.badge.bg-dark      { color: #fff !important; }
.badge.bg-light     { color: #212529 !important; }

/* ---- Custom status colors used by shared table JS (issue-report-table.js) ----
   Previously defined inline on only a couple of pages, so any other page using
   the shared issue/recorder columns rendered an unstyled badge. Now global. */
.bg-orange { background: #ffe8cc; color: #5a3004; }
/* White on a darker orange (matches the solid-badge family; the earlier
   dark-slate-on-#fd7e14 met AA but read wrong). Backs issueBadge()'s
   'end_without_start' across every shared issue column. */
.badge.bg-orange { background: #c2410c; color: #fff; }
.table-orange { --bs-table-bg: #fff3e6; }

/* ---- Native date inputs themed to match .form-control (audit filter bar) ---- */
input[type="date"].form-control,
input[type="date"] {
  appearance: none;
  -webkit-appearance: none;
}
input[type="date"]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
input[type="date"]:focus::-webkit-calendar-picker-indicator { opacity: .9; }

/* ---- Empty states: an empty table reads as intentional, not broken ---- */
table.dataTable td.dataTables_empty,
td.dataTables_empty {
  color: var(--dash-muted);
  font-style: italic;
  padding: 1.5rem 0;
  text-align: center;
}
/* A failed load is an error, not an empty result — plain weight, alert tone
   (rendered by the dt-error handler in datatable-utils.js). Both selector arms
   mirror the empty-state rule above so this wins on the shared cell. */
table.dataTable td.dataTables-load-error,
td.dataTables-load-error {
  color: #b91c1c;
  font-style: normal;
}

/* ---- Subtle card section consistency ---- */
.card .card-header { border-bottom: 1px solid var(--dash-border); }

/* ---- Header dropdown caret without the feather font ----
   The vendored theme drew this caret with a feather-font glyph; feather is no
   longer shipped (icons are Font Awesome now), so draw it with borders. */
.pcoded-header .dropdown .dropdown-toggle:after {
  content: "";
  font-family: inherit;
  border: 4px solid transparent;
  border-top-color: currentColor;
  border-bottom: 0;
  position: absolute;
  top: 50%;
  margin-top: -2px;
  left: 12px;
}

/* ---- Global search dropdown (top-bar typeahead) ----
   Owns the .tt-* skin. The theme pads the menu for generic dropdowns and the
   default suggestion markup left tall gaps between rows; render dense
   single-line rows instead, scrolling past ~9 results. Markup comes from the
   suggestion template in global-footer.php. */
.twitter-typeahead { width: 100%; }
.tt-menu {
  width: 100%;
  min-width: 340px;   /* outgrow the narrow input so org names fit */
  padding: 4px 0;
  margin-top: 4px;
  font-size: .78rem;
  max-height: 324px;
  overflow-y: auto;
  border: 1px solid var(--dash-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, .12);
}
.tt-menu .tt-suggestion { padding: 0; }
.tt-menu .tt-suggestion:hover,
.tt-menu .tt-suggestion.tt-cursor { background: var(--dash-hover); color: inherit; }
.tt-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 12px;
  line-height: 1.3;
  min-width: 0;
  cursor: pointer;
}
.tt-label {
  flex: 1;             /* pushes context + tag to the right edge */
  min-width: 0;
  color: #1f2733;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tt-label strong { color: var(--bs-primary, #0d6efd); font-weight: 700; }
.tt-ctx {
  max-width: 55%;
  color: var(--dash-muted);
  font-size: .72rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tt-kind {
  flex-shrink: 0;
  font-size: .62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 1px 6px;
  border-radius: 999px;
  background: #eef1f4;
  color: #5a6a7a;
}
.tt-kind-site     { background: #e7f1fb; color: #0b5394; }
.tt-kind-recorder { background: #e8f5ee; color: #166534; }
.tt-status { padding: 6px 12px; color: var(--dash-muted); font-style: italic; }
/* Narrow viewports: cap the menu so it CAN fit; the open handler in
   global-footer.php translates it back into view when the anchor would push
   it off screen. */
@media (max-width: 576px) {
  .tt-menu {
    min-width: 0;
    width: min(340px, calc(100vw - 24px));
  }
}
/* Touch devices: taller rows so suggestions are comfortably tappable. */
@media (pointer: coarse) {
  .tt-row { padding: 10px 12px; }
}

/* ---- Shared cell links (window.DH helpers) ----
   Navigating cells are links, not badges. .chip-link gives them a quiet
   underline-on-hover affordance and a visible keyboard-focus ring so they read
   as actionable without the heavy pill styling a badge would imply. .rec-name is
   the recorder-serial link treatment (kept here so the DH.recorderLink markup is
   styled even on pages that don't carry the inline definition). */
.chip-link { cursor: pointer; transition: filter .12s ease; }
/* Underline is the hover affordance; darken slightly (don't lighten — lightening
   a link colour on white lowers contrast and reads as "off"). */
.chip-link:hover { text-decoration: underline !important; filter: brightness(.9); }
.chip-link:focus-visible {
  outline: 2px solid var(--bs-primary, #0d6efd);
  outline-offset: 2px;
  border-radius: 3px;
}
.rec-name { font-size: 1.05rem; font-weight: 600; line-height: 1.2; }

/* ---- DataTables row affordances (pin column, multiline tooltip) ----
   Used by the recorders/sessions tables (col-pin / btn-pin markup) and any
   .tip-multiline tooltip. Previously injected inline on DataTables pages; kept
   here so the one stylesheet owns it. The elements only exist on those pages,
   so the rules are inert elsewhere. */
.tip-multiline .tooltip-inner { white-space: pre-line; text-align: left; max-width: 340px; font-size: 0.72rem; line-height: 1.35; }
.col-pin { width: 40px; }
.btn-pin, .btn-unpin { border: 0; background: transparent; padding: 2px 4px; line-height: 1; cursor: pointer; }
.btn-pin .fa-thumbtack { color: #adb5bd; transform: rotate(40deg); transition: transform .12s ease, color .12s ease; }
.btn-pin .fa-thumbtack.pinned { color: #0d6efd; transform: none; }
.btn-pin:hover .fa-thumbtack { color: #0d6efd; }
.btn-unpin { color: #dc3545; }
.btn-unpin:hover { color: #a71d2a; }

/* Linked badges (DH.sfdcLink etc.) lift slightly on hover to read as actionable. */
a.badge { transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; }
a.badge:hover { transform: translateY(-1px) scale(1.06); box-shadow: 0 2px 6px rgba(0,0,0,.18); filter: brightness(1.05); }

/* ---- Audit log: raw_json child row reads as a code block, not plain text ----
   The expandable detail row (audit-table.js buildDetailHtml) renders pretty-
   printed JSON, highlighted via highlight.js where present. Dark slate ground
   (matching the tooltip) + a JSON palette tuned to read on it. Renders on
   audit_log.php and embedded on rec.php / site_info.php via audit_table.php. */
.audit-raw {
  background: #1f2733;
  color: #c9d1d9;
  border-radius: 6px;
  padding: .65rem .8rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78rem;
  line-height: 1.45;
  margin: 0;
  max-height: 380px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.audit-raw code.hljs { background: transparent; padding: 0; color: inherit; }
/* Identifier values linkified to the log search (audit-table.js): unmistakably
   links — link-blue with an underline and a search glyph, overriding the JSON
   value palette (the colour change IS the signal). */
.audit-raw .audit-logs-link,
.audit-raw .audit-logs-link .hljs-string,
.audit-raw .audit-logs-link .hljs-number {
  color: #2dd4bf;   /* teal — distinct from the blue keys, orange numbers, grey strings */
  text-decoration: underline;
  text-decoration-color: rgba(45, 212, 191, .5);
  text-underline-offset: 3px;
}
.audit-raw .audit-logs-link::after {
  content: "⌕";
  margin-left: 3px;
  font-size: .9em;
  opacity: .65;
  text-decoration: none;
  display: inline-block;   /* keeps the glyph's underline off */
}
.audit-raw .audit-logs-link:hover,
.audit-raw .audit-logs-link:hover .hljs-string,
.audit-raw .audit-logs-link:hover .hljs-number {
  color: #5eead4;
  text-decoration-color: #5eead4;
}
/* JSON palette scoped to .audit-raw so it never touches other hljs usage. */
.audit-raw .hljs-attr        { color: #79c0ff; }   /* keys — blue */
.audit-raw .hljs-string      { color: #c9d1d9; }   /* strings — light grey */
.audit-raw .hljs-number      { color: #ffab70; }   /* numbers — orange */
.audit-raw .hljs-literal     { color: #ff7b72; }   /* true / false / null — red */
.audit-raw .hljs-punctuation { color: #8b949e; }

/* ---- Audit table: light typographic de-plaining (no structural change) ----
   Monospace the request (method + path) and entity/actor ids so codey values
   read as code; mute + shrink the time column; let the summary stay the focal
   prose. audit-table.js already tags time/path cells .audit-mono. */
#audit-log-data td .audit-mono,
.audit-raw + *,
.mono-cell {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/* Time column (2nd) — muted + slightly smaller so the row's prose leads. */
table.dataTable#audit-log-data tbody td:nth-child(2),
table.dataTable#audit-log-data tbody td:nth-child(2) .audit-mono {
  color: var(--dash-muted);
  font-size: .74rem;
}
/* Summary column (6th) — the focal text: normal weight, full-strength colour. */
table.dataTable#audit-log-data tbody td:nth-child(6) {
  color: #212529;
}
/* ---- Audit summary: typographic hierarchy within the prose (audit-table.js
   decorateSummary). Works on audit_log.php and the embedded rec.php/site_info
   trails alike. The lead (who-did-what-to-what) carries; parenthetical emails/ids
   and the detail clause recede so a row scans in one pass. ---- */
.aud-sum-lead   { color: #212529; }
.aud-sum-paren  { color: var(--dash-muted); }
.aud-sum-detail { color: #5c6b7a; font-size: .92em; }
.aud-sum-key    { color: #54667a; font-weight: 600; }
/* Long actor/entity labels and org enumerations otherwise stretch the table
   to absurd widths — clip the entity to one line and clamp the summary to
   two; the title tooltip (and the expansion) carry the full text. */
.aud-clip {
  display: inline-block;
  max-width: 230px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
.aud-sum-clip {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 480px;
  white-space: normal;   /* the scroll-table's nowrap would defeat the clamp */
}
/* The ⋯ badge expands a clipped cell inline (tap-friendly — tooltips need
   hover). Rendered on every clipped cell; the draw callback hides it where
   the text isn't actually truncated. */
.aud-more {
  border: 0;
  background: #eef1f4;
  color: #5a6a7a;
  border-radius: 999px;
  font-size: .68rem;
  line-height: 1;
  padding: 2px 6px;
  margin-left: 4px;
  vertical-align: middle;
  cursor: pointer;
}
.aud-more:hover { background: #e2e6ea; color: #1f2733; }
td.aud-open .aud-clip { max-width: none; white-space: normal; }
td.aud-open .aud-sum-clip { -webkit-line-clamp: unset; max-width: none; }
@media (pointer: coarse) {
  .aud-more { padding: 4px 9px; }
}

/* ---- Active-feature chip (shared) ----
   A row of enabled features reads crisply as neutral chips with a dark label;
   the green check is the only colour and carries the "on" meaning. Avoids the
   green-text-on-green-fill clash of a pale success badge. Promoted here from
   rec.php so any page can render feature flags the same way. */
.feature-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  background: #eef1f4;
  color: #1f2733;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.2;
  border: 1px solid #e2e6ea;
}
.feature-chip .fa-check-circle,
.feature-chip .feather-check-circle { color: #15803d; }   /* enabled accent */
.feature-chip.is-off { color: var(--dash-muted); }
.feature-chip.is-off .fa-times-circle { color: #b91c1c; }

/* ---- Hover micro-interactions ----
   Subtle lift/elevation cues so interactive elements read as actionable. */
.btn { transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; }
.btn:hover:not(:disabled):not(.disabled):not([aria-disabled="true"]) {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(16, 24, 40, .14);
}
.btn:active:not(:disabled) { transform: translateY(0); box-shadow: none; }
/* Cards explicitly marked navigable lift on hover (opt-in, never every card). */
.card.card-hover, .hover-lift { transition: transform .15s ease, box-shadow .15s ease; }
.card.card-hover:hover, .hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(16, 24, 40, .10);
}
/* Sortable headers gain a colour cue so it reads as "click to reorder". */
table.dataTable thead th.sorting:hover,
table.dataTable thead th.dt-orderable-asc:hover,
table.dataTable thead th.dt-orderable-desc:hover { color: var(--bs-primary, #0d6efd); }
/* Feature chips give a faint lift so a hovered chip feels responsive. */
.feature-chip { transition: box-shadow .12s ease, border-color .12s ease; }
.feature-chip:hover { box-shadow: 0 1px 4px rgba(16, 24, 40, .10); border-color: #cfd6dd; }

/* ---- Disabled / focused button states (override the vendored theme) ----
   The theme fades disabled buttons with opacity:.55, which drops a coloured
   button's white label below AA (e.g. white on teal Refresh) and gives no
   distinct affordance; and .btn-light:focus-visible set white text on a light
   grey, making the label vanish on keyboard focus. This layer loads after the
   theme, so these win. Link-style buttons keep their look. */
.btn.disabled:not(.btn-link),
.btn:disabled:not(.btn-link),
.btn[aria-disabled="true"]:not(.btn-link) {
  opacity: 1;
  background-color: #e3e6ea !important;
  border-color: #d3d3d3 !important;
  color: #6c757d !important;
  cursor: not-allowed;
}
.btn[aria-disabled="true"] { pointer-events: none; }
.btn-light:focus-visible { color: #39465c; }

/* ---- Affordance: things you can interact with should signal it ----
   Bare anchors in tables/cards read as links on hover; form controls get a
   hover border so they don't look like static text. Cheap, broad coverage for
   the many pages that render plain <a>/<select> without an explicit cue. */
table.dataTable a:not(.btn):not(.badge):hover,
.card a:not(.btn):not(.badge):not(.nav-link):hover { text-decoration: underline; }
.form-select:hover:not(:disabled),
.form-control:hover:not(:disabled) { border-color: #9aa7b4; }
/* Form labels read as labels (distinct weight/size from body), not body copy. */
.form-label { font-weight: 500; font-size: .92rem; color: #212529; margin-bottom: .25rem; }

/* ---- Ambient sine-wave background (bg-waves.js) ----
   A fixed, full-viewport canvas painted behind everything. It carries its own
   light base fill so it fully replaces the static page gutter; the page's own
   background layers are made transparent below so the canvas shows through,
   while opaque cards keep their solid surface and tables stay legible on top.
   pointer-events:none so it never intercepts clicks. */
#bg-waves {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;          /* behind ALL content — never composite over a page */
  pointer-events: none;
}
/* Reveal the canvas: drop the opaque fills the theme paints on the scroll
   gutter. Cards, the sidebar and the top bar keep their own backgrounds. */
body.layout-5,
body.layout-5 .pcoded-main-container,
body.layout-5 .pcoded-content,
body.layout-5 .pcoded-inner-content,
body.layout-5 .main-body,
body.layout-5 .page-wrapper { background: transparent; }

/* ---- Replacement-chain timeline (replacement-chain.js) ----
   A left rail with dots + a connector line; the current unit gets a filled
   marker and a tag, every other node is a clickable link to its own recorder
   page. Rendered on rec.php (hero) and netsuite_cases.php (case expansion). */
.repl-timeline{list-style:none;margin:0;padding:0 0 0 .25rem}
.repl-step{position:relative;padding:0 0 .9rem 1.5rem;white-space:normal}
.repl-step:last-child{padding-bottom:0}
.repl-step::before{content:"";position:absolute;left:.32rem;top:1.05rem;bottom:-.15rem;width:2px;background:#e2e8f0}
.repl-step:last-child::before{display:none}
.repl-dot{position:absolute;left:0;top:.15rem;width:.7rem;height:.7rem;border-radius:50%;background:#fff;border:2px solid #cbd5e1;box-sizing:border-box}
.repl-step.is-current .repl-dot{background:#fd7e14;border-color:#fd7e14}
.repl-serial{font-weight:600;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}
.repl-meta{color:#64748b;font-size:.78rem}
.repl-reason{color:#475569;font-size:.8rem}
.repl-tag{display:inline-block;margin-left:.4rem;padding:.05rem .4rem;border-radius:999px;font-size:.65rem;font-weight:600;background:#ffe8cc;color:#8a4b08;vertical-align:middle}
a.repl-step-link{display:block;text-decoration:none;color:inherit;border-radius:.4rem;margin-left:-.4rem;padding-left:.4rem;transition:background .12s ease-in-out}
a.repl-step-link:hover{background:#f1f5f9}
a.repl-step-link:hover .repl-serial{color:#4f46e5;text-decoration:underline}

/* ---- Colour-block indicator cards (tk-*) ----
   Shared so rec.php's Device Telemetry panel and logs.php's recorder/site
   context cards use one definition. The left-border accent toggles by health
   tone; tk-val is the prominent value, tk-sub the supporting detail. */
.tk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:.6rem}
.tk-card{background:#fff;border:1px solid #eef1f4;border-left:3px solid #cbd5e1;border-radius:.6rem;padding:.55rem .7rem;display:flex;flex-direction:column;gap:.2rem;min-width:0}
.tk-card.is-info{border-left-color:#0ea5e9}
.tk-card.is-good{border-left-color:#16a34a}
.tk-card.is-warn{border-left-color:#d97706}
.tk-card.is-bad{border-left-color:#dc2626}
.tk-card.is-muted{border-left-color:#cbd5e1}
.tk-lbl{font-size:.66rem;text-transform:uppercase;letter-spacing:.04em;color:#64748b;font-weight:600;display:flex;align-items:center;gap:.3rem}
.tk-val{font-size:1.3rem;font-weight:700;line-height:1.1;color:#1f2733;display:flex;align-items:center;gap:.3rem;min-width:0}
.tk-val .tk-unit{font-size:.78rem;font-weight:600;color:#64748b}
.tk-sub{font-size:.68rem;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-card.is-good .tk-val{color:#166534}
.tk-card.is-warn .tk-val{color:#b45309}
.tk-card.is-bad  .tk-val{color:#b91c1c}
.tk-card .progress.slim{width:100%}
/* Compact inline variant (e.g. logs.php header context beside the title). */
.tk-mini-grid{display:flex;flex-wrap:wrap;gap:.5rem;align-items:stretch}
.tk-card.tk-mini{padding:.25rem .55rem;gap:.05rem}
.tk-card.tk-mini .tk-lbl{font-size:.58rem}
.tk-card.tk-mini .tk-val{font-size:.95rem}
.tk-card.tk-mini .tk-sub{font-size:.62rem}

/* Telemetry glyphs (battery fill-bar + Wi-Fi signal bars) shared with rec.php's
   tk-cards; used by the recorders list cells (recorders-table.js). */
.batt{display:inline-flex;align-items:center}
.batt-body{position:relative;width:40px;height:19px;border:2px solid #94a3b8;border-radius:4px;padding:2px;box-sizing:border-box;background:#fff;overflow:hidden}
.batt-cap{width:3px;height:8px;background:#94a3b8;border-radius:0 2px 2px 0}
.batt-fill{display:block;height:100%;width:0;border-radius:1px;background:#16a34a;transition:width .4s ease,background .3s ease}
.batt-fill.is-warn{background:#d97706}.batt-fill.is-bad{background:#dc2626}
.sig{display:inline-flex;align-items:flex-end;gap:2px;height:16px}
.sig i{width:4px;background:#cbd5e1;border-radius:1px;display:block}
.sig i:nth-child(1){height:25%}.sig i:nth-child(2){height:50%}
.sig i:nth-child(3){height:75%}.sig i:nth-child(4){height:100%}
.sig i.on{background:#16a34a}
.sig.is-warn i.on{background:#d97706}.sig.is-bad i.on{background:#dc2626}
/* Vertical fill-bar (e.g. session max seizure-burden %): fills bottom-up, color
   supplied inline. The horizontal counterpart is Bootstrap .progress. */
.vbar{display:inline-block;width:9px;height:32px;border-radius:3px;background:#e5e7eb;overflow:hidden;position:relative;vertical-align:middle}
.vbar > span{position:absolute;left:0;bottom:0;width:100%;display:block}

/* ======================================================================
   Theme appeal layer — depth, gradient accents, table polish, loading
   states and micro-motion. Purely presentational; no layout changes.
   ====================================================================== */

:root {
  /* Brand gradient pair: the AA teal flowing into sky blue. Decorative
     surfaces only (hairlines, pills, beams) — never under body text. */
  --grad-brand:  linear-gradient(90deg, #0e7c7e, #0a8aa3 55%, #0ea5e9);
  --grad-accent: linear-gradient(135deg, #14b8a6, #0ea5e9);
}

/* ---- Depth: cards sit on a soft elevation and lift gently on hover ---- */
.card {
  position: relative;
  border: 1px solid #eef1f4;
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
/* Navigable cards keep a stronger cue than the ambient lift. */
.card.card-hover:hover, .hover-lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

/* ---- Gradient accents: a brand hairline along each card's top edge ---- */
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--r-md) var(--r-md) 0 0;
  background: var(--grad-brand);
  opacity: .85;
  pointer-events: none;
  z-index: 1;
}
.card .card::before { content: none; }   /* nested cards: one hairline per surface */

/* Page title gets a short gradient underline. */
.page-header .page-header-title h5 {
  position: relative;
  padding-bottom: 7px;
}
.page-header .page-header-title h5::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 44px; height: 3px;
  border-radius: 999px;
  background: var(--grad-accent);
}

/* ---- Sidebar: gradient active pill + a glide indicator that follows hover
   (positioned by theme-motion.js; pure decoration, clicks pass through). ---- */
.pcoded-navbar .navbar-content { position: relative; }
.pcoded-navbar .pcoded-inner-navbar > li.nav-item > a.nav-link {
  position: relative;
  z-index: 1;
  transition: color .15s ease;
}
.pcoded-navbar .pcoded-inner-navbar > li.nav-item.active > a.nav-link {
  background: linear-gradient(135deg, rgba(20, 184, 166, .22), rgba(14, 165, 233, .16));
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px rgba(45, 212, 191, .28);
}
.nav-glide {
  position: absolute;
  left: 10px;
  width: calc(100% - 20px);
  height: 40px;
  top: 0;
  opacity: 0;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, rgba(20, 184, 166, .14), rgba(14, 165, 233, .10));
  box-shadow: inset 0 0 0 1px rgba(45, 212, 191, .22), 0 0 12px rgba(20, 184, 166, .12);
  transition: top .28s cubic-bezier(.22, .61, .36, 1), height .2s ease, opacity .2s ease;
  pointer-events: none;
  z-index: 0;
}

/* ---- Table polish: white header with a strong rule instead of the grey
   band; hovered rows pick up a teal left accent. ---- */
table.dataTable thead th,
table.dataTable thead td {
  background: #fff !important;
  border-bottom: 2px solid #e2e8f0 !important;
}
table.dataTable tbody tr:hover > td:first-child,
table.dataTable tbody tr:hover > th:first-child {
  box-shadow: inset 3px 0 0 0 #14b8a6;
}

/* Status badges inside table cells soften to tinted chips (AA dark-on-light
   pairs); buttons and badges outside tables keep the solid treatment. */
table.dataTable td .badge.bg-success,
table.dataTable td .badge.text-bg-success   { background: #dcfce7 !important; color: #166534 !important; border: 1px solid #bbf7d0; }
table.dataTable td .badge.bg-secondary,
table.dataTable td .badge.text-bg-secondary { background: #f1f5f9 !important; color: #475569 !important; border: 1px solid #e2e8f0; }
table.dataTable td .badge.bg-danger,
table.dataTable td .badge.text-bg-danger    { background: #fee2e2 !important; color: #b91c1c !important; border: 1px solid #fecaca; }
table.dataTable td .badge.bg-warning,
table.dataTable td .badge.text-bg-warning   { background: #ffedd5 !important; color: #9a3412 !important; border: 1px solid #fed7aa; }
table.dataTable td .badge.bg-info,
table.dataTable td .badge.text-bg-info      { background: #e0f2fe !important; color: #075985 !important; border: 1px solid #bae6fd; }
table.dataTable td .badge.bg-primary,
table.dataTable td .badge.text-bg-primary   { background: #ccfbf1 !important; color: #115e59 !important; border: 1px solid #99f6e4; }
table.dataTable td .badge.bg-orange         { background: #ffedd5 !important; color: #9a3412 !important; border: 1px solid #fed7aa; }

/* ---- Stat tiles (tk-cards): elevation, hover lift and an icon chip whose
   tint follows the tile's health tone (markup adds .tk-ico on rec.php). ---- */
.tk-card {
  box-shadow: var(--shadow-sm);
  border-radius: var(--r-md);
  transition: transform .15s ease, box-shadow .15s ease;
}
.tk-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.tk-ico {
  width: 24px; height: 24px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  background: #eef2f6;
  color: #5a6a7a;
  flex: 0 0 auto;
}
.tk-card.is-good .tk-ico { background: #dcfce7; color: #166534; }
.tk-card.is-warn .tk-ico { background: #ffedd5; color: #9a3412; }
.tk-card.is-bad  .tk-ico { background: #fee2e2; color: #b91c1c; }
.tk-card.is-info .tk-ico { background: #e0f2fe; color: #075985; }

/* Orange tone — the end-without-start issue family (pairs with .bg-orange). */
.tk-card.is-orange { border-left-color: #fd7e14; }
.tk-card.is-orange .tk-val { color: #c2410c; }
.tk-card.is-orange .tk-ico { background: #ffedd5; color: #9a3412; }

/* Actionable tiles (click-to-filter KPI strips): pointer affordance, a firmer
   hover lift, and a tone-coloured ring + pressed lift while selected. */
.tk-card.tk-action { cursor: pointer; user-select: none; }
.tk-card.tk-action:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.tk-card.tk-action:focus-visible { outline: 2px solid var(--bs-primary, #0d6efd); outline-offset: 2px; }
.tk-card.is-selected,
.tk-card.tk-action.is-selected:hover {
  --tk-ring: #0e7c7e;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md), 0 0 0 2px var(--tk-ring);
}
.tk-card.is-good.is-selected   { --tk-ring: #16a34a; }
.tk-card.is-warn.is-selected   { --tk-ring: #d97706; }
.tk-card.is-bad.is-selected    { --tk-ring: #dc2626; }
.tk-card.is-orange.is-selected { --tk-ring: #fd7e14; }
.tk-card.is-muted.is-selected  { --tk-ring: #64748b; }

/* Page-KPI variant: the count is the hero. */
.tk-kpi .tk-val { font-size: 1.65rem; }

/* SolarWinds log-link popover buttons carry long device/eeg ids — reference
   values, not calls to action. Inside tables they render as quiet mono chips
   so the ids stop dominating the grid; the popover behaviour is unchanged. */
table.dataTable td .btn.btn-outline-secondary[data-bs-toggle="popover"] {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .68rem;
  padding: .14rem .45rem;
  color: #475569;
  background: #f8fafc;
  border-color: #e2e8f0;
}
table.dataTable td .btn.btn-outline-secondary[data-bs-toggle="popover"]:hover {
  color: #1f2733;
  background: #fff;
  border-color: #94a3b8;
}
table.dataTable td .btn.btn-outline-secondary[data-bs-toggle="popover"] .fa-clipboard-list { color: #0e7c7e; }

/* ---- Meter tracks keep definition on any row background ----
   Zebra stripes sit close to the meters' track grey, which made the unfilled
   portion of storage / burden bars vanish on striped rows. Every track reads
   as a soft inset groove with a hairline ring — visible on white and stripe
   alike — and fills get a whisper of dimension. */
.progress, .vbar {
  background-color: #e9edf2;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .16), inset 0 0 0 1px rgba(15, 23, 42, .05);
}
.progress .progress-bar, .vbar > span {
  box-shadow: 0 1px 1.5px rgba(15, 23, 42, .22), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.batt-body { box-shadow: 0 1px 2px rgba(15, 23, 42, .10); }

/* ---- Animated meters: fills grow to their value when rendered (replays on
   every table draw, so paging/sorting keeps the gauges alive). ---- */
@keyframes growX { from { transform: scaleX(0); } }
@keyframes growY { from { transform: scaleY(0); } }
.batt-fill,
.progress .progress-bar {
  transform-origin: left center;
  animation: growX .6s cubic-bezier(.22, .61, .36, 1) backwards;
}
.vbar > span { transform-origin: bottom; animation: growY .5s ease backwards; }
.sig i.on    { transform-origin: bottom; animation: growY .4s ease backwards; }
.sig i.on:nth-child(2) { animation-delay: .06s; }
.sig i.on:nth-child(3) { animation-delay: .12s; }
.sig i.on:nth-child(4) { animation-delay: .18s; }

/* ---- Loading: skeleton shimmer over grids while a draw is in flight ----
   Covers both DataTables generations (.dataTables_processing / .dt-processing).
   The element's own text is hidden; the ::before paints shimmer "rows". */
.dataTables_processing,
div.dt-processing {
  position: absolute;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(1.5px);
  border: 0 !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
  z-index: 5;
}
.dataTables_processing > *,
div.dt-processing > * { display: none !important; }
.dataTables_processing::before,
div.dt-processing::before {
  content: "";
  position: absolute;
  left: 16px; right: 16px; top: 16px;
  height: 148px;
  max-height: calc(100% - 32px);
  border-radius: var(--r-sm);
  background: linear-gradient(100deg, #eef2f6 38%, #e2e9f1 50%, #eef2f6 62%);
  background-size: 220% 100%;
  animation: shimmer 1.1s linear infinite;
  -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 16px, transparent 16px 28px);
  mask-image: repeating-linear-gradient(180deg, #000 0 16px, transparent 16px 28px);
}
@keyframes shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* ---- Loading: a light tracing the card outline while its grid loads ----
   datatable-utils.js toggles .is-loading on the host card around each draw. */
@property --beamA {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.card.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--beamA),
      transparent 0deg 282deg,
      rgba(20, 184, 166, .35) 318deg,
      #2dd4bf 342deg,
      #0ea5e9 354deg,
      transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: beamSpin 1.5s linear infinite;
  pointer-events: none;
  z-index: 6;
}
@keyframes beamSpin { to { --beamA: 360deg; } }

/* ---- Users tables: login freshness, org/owner chips, notification state ---- */
.login-fresh { display: inline-flex; align-items: center; gap: .38rem; font-weight: 600; font-size: .8rem; }
.login-fresh .fresh-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px var(--fresh-halo, transparent);
  flex: 0 0 auto;
}
.login-fresh.is-good  { color: #15803d; --fresh-halo: #dcfce7; }
.login-fresh.is-warn  { color: #b45309; --fresh-halo: #ffedd5; }
.login-fresh.is-bad   { color: #dc2626; --fresh-halo: #fee2e2; }
.login-fresh.is-never { color: #b91c1c; }
.login-fresh.is-never .fresh-dot { background: transparent; border: 2px solid currentColor; }

.list-chips { display: flex; flex-wrap: wrap; gap: .25rem .3rem; align-items: center; max-width: 280px; }
.list-chip {
  display: inline-block;
  padding: .16rem .55rem;
  border-radius: 999px;
  background: #eef2f6;
  border: 1px solid #e2e8f0;
  color: #1f2733;
  font-size: .74rem;
  line-height: 1.3;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-chip-more {
  border: 1px dashed #94a3b8;
  background: #fff;
  color: #475569;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.3;
  padding: .14rem .5rem;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.list-chip-more:hover { background: #eef2f6; color: #1f2733; border-color: #64748b; }

.notif-state { display: inline-flex; align-items: center; gap: .45rem; font-size: .78rem; }
.notif-state.is-off { color: var(--dash-muted); }
.notif-state.is-on .fa-bell { color: #0e7c7e; }
.notif-state .btn { padding: .05rem .45rem; font-size: .68rem; line-height: 1.4; }

/* Feature chips carry per-feature glyphs; all read in the enabled green. */
.feature-chip > i { color: #15803d; }

/* ---- Button press + copy confirmation ---- */
.btn:active:not(:disabled):not(.disabled) { transform: scale(.965); box-shadow: none; }
@keyframes popIn {
  0%   { transform: scale(.4); opacity: 0; }
  70%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
/* A check swapped into any button (copy confirmations) pops in, in brand teal. */
.btn .fa-check, .copy-btn .fa-check {
  animation: popIn .25s ease;
  color: #0e7c7e;
}