/* premium.css — the "expensive" layer.
 *
 * WHY A SEPARATE FILE
 * staff.css is the working design system (layout, theme variables, every
 * component). This file only REFINES visuals: shadows, gradients, transitions,
 * focus states, typography polish. It never changes layout (no display,
 * position, flex, grid, width, or margin rules) so it cannot break the board,
 * and it loads after staff.css so it wins ties without !important wars.
 *
 * RULES FOR ADDITIONS HERE
 * 1. Visual only: color, background, border-color, shadow, radius, transition,
 *    transform on hover/focus, letter-spacing, line-height.
 * 2. Everything must degrade in light mode (use the existing --vars, and
 *    rgba(var(--tint-rgb), x) for tints).
 * 3. Respect body.animations-off and prefers-reduced-motion — no looping or
 *    entrance animation may run under either.
 */

/* --- Elevation: one shadow scale for the whole app ---------------------- */
:root {
  --elev-1: 0 1px 2px var(--shadow-color);
  --elev-2: 0 2px 6px var(--shadow-color), 0 1px 2px var(--shadow-color);
  --elev-3: 0 8px 24px var(--shadow-color), 0 2px 6px var(--shadow-color);
  --elev-4: 0 16px 48px var(--shadow-color), 0 4px 12px var(--shadow-color);
  --hairline-hi: inset 0 1px 0 rgba(var(--tint-rgb), 0.06); /* top inner light */
}

/* --- Header: deep gradient, quiet glow under the bar --------------------- */
header {
  background: var(--charcoal-900, #14161a); /* SLICE1: flat charcoal top bar, no gradient */
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(var(--tint-rgb), 0.04), 0 4px 14px var(--shadow-color);
}
header .btn {
  box-shadow: var(--elev-1), var(--hairline-hi);
}

/* --- Buttons: weight, press, focus --------------------------------------- */
.btn {
  transition: transform 0.08s ease, box-shadow 0.12s ease, border-color 0.12s ease, background-color 0.12s ease;
  box-shadow: var(--elev-1);
}
.btn:hover {
  box-shadow: var(--elev-2), var(--hairline-hi);
}
.btn:active {
  transform: translateY(1px);
  box-shadow: none;
}
.btn:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}
.btn-primary {
  /* SLICE1: flat charcoal primary (DESIGN §2.5) — gold gradient + glow deleted. */
  background: var(--charcoal-900, #14161a);
  border-color: var(--charcoal-900, #14161a);
  color: #fff;
  text-shadow: none;
  box-shadow: none;
}
.btn-primary:hover {
  background: var(--charcoal-700, #262a31);
  border-color: var(--charcoal-700, #262a31);
  box-shadow: none;
}
.btn-primary:active {
  transform: translateY(1px);
  box-shadow: none;
}

/* --- Job cards: paper lift ------------------------------------------------ */
.card {
  box-shadow: var(--elev-2);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.card:hover {
  transform: translateY(-1px);
  box-shadow: var(--elev-3);
}

/* --- Columns: subtle depth ------------------------------------------------ */
.column {
  box-shadow: inset 0 1px 0 rgba(var(--tint-rgb), 0.03), var(--elev-1);
}
.column-header {
  /* CFO-FIX 2026-10-13: text-shadow removed — a soft dark shadow under
     small header text reads as smeared/ghosted letters. */
  text-shadow: none;
}

/* --- Modals/overlays: dim backdrop, soft entrance ------------------------- */
/* CFO-FIX 2026-10-13 (smear fix): the blur(3px) backdrop-filter is GONE.
   A live backdrop blur forces the whole overlay subtree onto a filtered
   compositing layer on phone GPUs, which rasterizes text at reduced
   fidelity — the "smeared letters" Donny reported on the CFO hub and
   every other overlay. The rgba dim in staff.css still separates the
   sheet from the page; nothing behind a full-screen sheet needs blurring.
   The entrance animation also drops its scale(0.99): a non-integer scale
   on the box leaves glyphs resampled instead of drawn at their true size. */
.overlay.open .modal-box {
  animation: premiumModalIn 0.16s ease-out;
}
@keyframes premiumModalIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.modal-box {
  box-shadow: var(--elev-4), var(--hairline-hi);
  border-color: var(--line);
}

/* --- Typography: tighter display type, tabular money ---------------------- */
h1, h2, h3 {
  letter-spacing: 0.015em;
  text-wrap: balance;
}
body {
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Money, times, and counts stop jittering when they update. */
.money, [data-money], .ro-total, .invoice-total, .aging-bucket {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* --- Badges and pills: crisper -------------------------------------------- */
.header-alert-badge {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  background: linear-gradient(180deg, #ff6a5e, var(--red));
}
.staff-role-pill {
  box-shadow: inset 0 1px 0 rgba(var(--tint-rgb), 0.05);
  border: 1px solid var(--line-subtle);
}

/* --- Inputs: calm until focused, then a clear glow ------------------------- */
input[type="text"], input[type="number"], input[type="tel"], input:not([type]),
textarea, select {
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
  border-radius: 8px;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--yellow);
  box-shadow: 0 0 0 3px rgba(201, 165, 63, 0.25); /* SLICE1: gold focus ring */
}

/* --- Menu items: hover affordance ------------------------------------------ */
.menu-dropdown-item {
  transition: background-color 0.1s ease, padding-left 0.12s ease;
  border-radius: 8px;
}
.menu-dropdown-item:hover {
  background: rgba(var(--tint-rgb), 0.06);
}

/* --- Skeleton loading shimmer: use class="skel" on a placeholder block ----- */
.skel {
  position: relative;
  overflow: hidden;
  background: rgba(var(--tint-rgb), 0.06);
  border-radius: 6px;
  color: transparent !important;
  pointer-events: none;
  min-height: 1em;
}
.skel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(var(--tint-rgb), 0.09) 50%, transparent 80%);
  animation: premiumSkel 1.4s ease-in-out infinite;
}
@keyframes premiumSkel {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

/* --- Scrollbars: thin and quiet (webkit) ------------------------------------ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--muted2); border: 2px solid transparent; background-clip: content-box; }

/* --- Bug fix: login card must not be flush/overflowing on small phones ---------
   (.login-box is a fixed 360px in staff.css with no max-width; on a 360px
   phone it sits edge-to-edge, on 320px it overflows horizontally.) */
.login-box {
  max-width: calc(100vw - 32px);
}

/* --- Motion off: keep every promise staff.css makes ------------------------- */
body.animations-off *, body.animations-off *::after,
body.animations-off *::before {
  animation: none !important;
  transition: none !important;
}
body.animations-off .btn:active, body.animations-off .card:hover {
  transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::after, *::before {
    animation: none !important;
    transition: none !important;
  }
  .btn:active, .card:hover { transform: none !important; }
}

/* --- Service redesign 2026-09-29: premium finish on the new surfaces ------- */
/* (visual only — layout lives in staff.css) */
.svc-panel {
  background: var(--surface, #fff); /* SLICE1 flat */
  box-shadow: var(--elev-3), var(--hairline-hi);
  border-color: var(--line);
}
.svc-line {
  background: var(--surface, #fff); /* SLICE1 flat */
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow: var(--elev-1);
}
.svc-line-kind {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.svc-totals {
  background: var(--surface, #fff); /* SLICE1 flat */
  box-shadow: var(--elev-2);
}
.svc-est {
  background: var(--surface, #fff); /* SLICE1 flat */
  box-shadow: var(--elev-4);
}
.svc-est-card {
  box-shadow: var(--elev-1);
}
.svc-est-auth .svc-est-approve {
  background: var(--green, #1f8a4c); /* SLICE1 flat authorize green */
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}
.svc-est-auth .svc-est-approve:hover {
  box-shadow: 0 8px 22px rgba(22, 163, 74, 0.45);
}
.svc-doc-title h2 {
  text-shadow: 0 2px 6px var(--shadow-color);
}
/* Money stops jittering on these rows too. */
.svc-line-amt, .svc-est-line-amt, .svc-totals-row, .svc-est-sec-sub {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
/* Board cards: gloss on the stage accent bar, richer paper lift. */
.card-accent {
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.card-list .card {
  background: var(--surface, #fff); /* SLICE1 flat */
}

/* =============================================================================
   SLICE1 (Phase C, 2026-10-24): the premium.css BRASS section was deleted.
   It re-stated .btn-primary as a brushed-brass gradient, brass focus rings
   and a brass modal border — all re-gilding the flat system after staff.css
   loaded. Re-pointed at the §2 tokens below; nothing here may re-gild.
   ============================================================================= */
.btn-primary {
  background: var(--charcoal-900, #14161a);
  border-color: var(--charcoal-900, #14161a);
  color: #fff;
  text-shadow: none;
  box-shadow: none;
}
.btn-primary:hover {
  background: var(--charcoal-700, #262a31);
  border-color: var(--charcoal-700, #262a31);
  box-shadow: none;
}
.btn:focus-visible {
  outline: 2px solid var(--gold, #c9a53f);
}
input:focus, textarea:focus, select:focus {
  border-color: var(--gold, #c9a53f);
  box-shadow: 0 0 0 3px rgba(201, 165, 63, 0.25);
}
.modal-box {
  border-color: var(--border, #dfe3e8);
}
/* ===== END SLICE1 premium re-point ===== */