/* ============================================================
   CREWTHAT — COHESION LAYER  (single final-word polish sheet)
   ------------------------------------------------------------
   Loaded LAST on every page, AFTER premium-app.css. Its only job
   is to make every page read as ONE product:
     1. Accessible, visible keyboard focus everywhere (WCAG 2.1 AA).
     2. Light-theme parity for the "self-contained" pages that
        premium-app.css (dark-scoped) doesn't reach.
     3. Polish for page-specific patterns premium-app.css misses
        (list rows, bare buttons, badges, pills, empty states).
   STRICT RULE — presentation only. No layout/position/size/flex/
   grid changes, so it can never break a working page. Consumes
   design-tokens.css / theme.css variables; invents no new brand.
   ============================================================ */

/* ── 1. ACCESSIBLE FOCUS ─────────────────────────────────────
   The app previously signalled focus only with a border-color
   change (often invisible). Give every interactive control a
   clear 2px ring on KEYBOARD focus, without showing a ring on
   mouse click (:focus-visible). Works in both themes. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[contenteditable]:focus-visible {
  outline: 2px solid var(--ct-red, #cc1f1f);
  outline-offset: 2px;
  border-radius: 4px;
  box-shadow: 0 0 0 4px rgba(204, 31, 31, 0.22);
}
/* Inputs read better with the ring hugging the field's own radius. */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline-offset: 1px;
  border-radius: 10px;
}
/* Never strip focus for keyboard users (belt-and-suspenders). */
:focus-visible { outline-color: var(--ct-red, #cc1f1f); }

/* ── 2. CONSISTENT CONTROL SHAPE ─────────────────────────────
   Loaded last, so these set the shared rounding for the
   "self-contained" pages whose bare controls were square.
   App-shell .btn / pills carry their own !important radius and
   are unaffected. */
button:not(.btn):not(.btn-s):not(.u-btn):not(.icon-btn):not(.bottom-tab):not(.tab),
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea,
select {
  border-radius: 10px;
}
button:not(.btn):not(.btn-s):not(.u-btn):not(.icon-btn):not(.bottom-tab):not(.tab) {
  transition: transform var(--dur-fast, 120ms) ease,
              box-shadow var(--dur-base, 200ms) ease,
              border-color var(--dur-fast, 120ms) ease,
              background var(--dur-fast, 120ms) ease;
}
button:not(.btn):not(.btn-s):not(.u-btn):not(.icon-btn):not(.bottom-tab):not(.tab):active {
  transform: translateY(1px);
}

/* ── 3. SELF-CONTAINED LIST ROWS / TILES ─────────────────────
   premium-app.css styles .card but not the bespoke row patterns
   these pages render (customers .cust, generic list rows). Give
   them the same rounded, lift-on-hover language as cards. */
.cust, .list-row, .li-row, .row-item, .entry-row {
  border-radius: 12px;
  transition: transform var(--dur-fast, 120ms) ease,
              border-color var(--dur-fast, 120ms) ease,
              box-shadow var(--dur-base, 200ms) ease;
}
.cust:hover, .list-row:hover, .row-item:hover, .entry-row:hover {
  border-color: var(--ct-red, #cc1f1f);
}

/* Badges / status pills — one rounded, legible shape everywhere. */
.badge, .pill, .tag, .status, .status-pill, .chip {
  border-radius: 999px;
}

/* Empty states read as quiet, centered, muted — consistently. */
.empty, .empty-state {
  color: var(--ct-gray, #888);
}

/* ── 4. SELF-CONTAINED TOPBAR ────────────────────────────────
   These pages render a simple .topbar; premium-app makes it
   glassy in dark. Make it sticky + hairline consistently and
   give it a correct light-mode surface. (Presentation only —
   no height/padding/flex changes.) */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
}
html[data-theme="light"] .topbar {
  background: rgba(255, 255, 255, 0.9) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ct-border, #d8d8d8) !important;
}

/* ── 5. LIGHT-THEME PARITY ───────────────────────────────────
   premium-app.css is scoped to html:not([data-theme="light"]),
   so in LIGHT mode the self-contained pages lose card depth and
   the gradient backdrop. Restore an equivalent (lighter) version
   so the product feels identical across themes. */
html[data-theme="light"] body {
  background:
    radial-gradient(125% 85% at 50% -15%, rgba(204, 31, 31, 0.06), transparent 55%),
    radial-gradient(100% 75% at 92% 6%, rgba(255, 176, 32, 0.05), transparent 52%),
    var(--ct-bg, #f5f5f5);
  background-attachment: fixed;
}
html[data-theme="light"] .card,
html[data-theme="light"] .panel,
html[data-theme="light"] .tile {
  border-radius: 16px;
  border: 1px solid var(--ct-border, #d8d8d8);
  box-shadow: 0 1px 2px rgba(16, 18, 24, 0.04), 0 8px 24px -16px rgba(16, 18, 24, 0.18);
}
html[data-theme="light"] .card:hover,
html[data-theme="light"] .panel:hover,
html[data-theme="light"] .tile:hover {
  border-color: var(--ct-border-hi, #bdbdbd);
  box-shadow: 0 2px 4px rgba(16, 18, 24, 0.05), 0 16px 36px -18px rgba(16, 18, 24, 0.22);
}

/* ── 6. LINKS ────────────────────────────────────────────────
   One link treatment: brand red, underline on hover, never a
   raw browser blue anywhere in the product. */
a:not(.btn):not(.sidebar-link):not(.bottom-tab):not(.cat-tile):not(.svc-tile):not(.pub-btn):hover {
  color: var(--ct-red, #cc1f1f);
}

/* Honour reduced-motion for the transitions added here. */
@media (prefers-reduced-motion: reduce) {
  button, .cust, .list-row, .row-item, .card, .panel, .tile { transition: none !important; }
}

/* Print: stay out of the way of the report/print views entirely. */
@media print {
  .topbar { position: static; }
  html[data-theme="light"] body { background: #fff; }
}