/*
 * KitBay — Dashboard Premium Dark Theme  (Phase 4E — Cinematic Art Pass)
 * All rules scoped to .dashboard-premium / .dashboard-premium-page.
 * Zero impact on Equipment, Jobs, Invoices, Roles, Settings pages.
 */

/* ── 0. KitBay Premium Orange — unified token system ─────────────────────── */
/*
 * One orange family. Bold, cinematic, neon-practical.
 * NOT yellow, NOT gold, NOT burnt/muddy orange.
 *
 * Usage guide:
 *   --kb-orange-base   — primary fill, button base, icon badge inner
 *   --kb-orange-hot    — text, active icon stroke, badge foreground
 *   --kb-orange-deep   — shadow tint, button depth, dark rim
 *   --kb-orange-soft   — inset haze, translucent fill, mild glow
 *   --kb-orange-glow   — outward glow / drop-shadow
 *   --kb-orange-border — ring, border, edge accent
 *   --kb-orange-bg     — very subtle background tint
 *   --kb-orange-haze   — barely-there atmospheric warmth
 */
:root {
  --kb-orange-base:   #ff7a00;
  --kb-orange-hot:    #ff8f1f;
  --kb-orange-deep:   #c95700;
  --kb-orange-soft:   rgba(255, 122, 0, 0.34);
  --kb-orange-glow:   rgba(255, 95,  0, 0.42);
  --kb-orange-border: rgba(255, 122, 0, 0.62);
  --kb-orange-bg:     rgba(255, 122, 0, 0.11);
  --kb-orange-haze:   rgba(255, 95,  0, 0.07);
}

/* ── 1. Page background ───────────────────────────────────────────────────── */
.dashboard-premium-page {
  background:
    radial-gradient(ellipse 65% 48% at 2%   1%,  rgba(45,  68, 175, 0.18) 0%, transparent 68%),
    radial-gradient(ellipse 55% 42% at 98%  1%,  rgba(255, 95,   0, 0.11) 0%, transparent 60%),
    radial-gradient(ellipse 88% 88% at 50% 50%,  rgba(5, 8, 18, 0.0) 48%, rgba(2, 3, 10, 0.55) 100%),
    linear-gradient(160deg, #080c18 0%, #0b0f1e 45%, #0e1422 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

/* ── 2. Wrapper ───────────────────────────────────────────────────────────── */
.dashboard-premium { position: relative; }

.dashboard-premium .dashboard-ambient-accent {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 48% 32% at 100% 0%, rgba(255, 95,  0, 0.09), transparent 55%),
    radial-gradient(ellipse 38% 24% at 0%   0%, rgba(62,  92, 210, 0.08), transparent 52%);
}

/* ── 3. Glass cards — strong rim lighting ─────────────────────────────────── */
.dashboard-premium .glass-card,
.dashboard-premium .dashboard-section-card {
  background: rgba(18, 26, 48, 0.72);
  backdrop-filter: blur(32px) saturate(1.55);
  -webkit-backdrop-filter: blur(32px) saturate(1.55);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-top-color: rgba(255, 255, 255, 0.17);
  border-radius: var(--radius-card);
  box-shadow:
    0   1px 0   rgba(255, 255, 255, 0.19) inset,
    1px 0   0   rgba(255, 255, 255, 0.055) inset,
    0   0   56px rgba(72, 100, 210, 0.04) inset,
    0  28px 60px rgba(0, 0, 0, 0.52),
    0   4px 16px rgba(0, 0, 0, 0.38),
    0   0   0 1px rgba(0, 0, 0, 0.26);
  transition: box-shadow 260ms ease-out, transform 260ms ease-out;
}

.dashboard-premium .glass-card:hover,
.dashboard-premium .dashboard-section-card:hover {
  box-shadow:
    0   1px 0   rgba(255, 255, 255, 0.22) inset,
    1px 0   0   rgba(255, 255, 255, 0.07) inset,
    0   0   56px rgba(72, 100, 210, 0.05) inset,
    0  36px 76px rgba(0, 0, 0, 0.55),
    0   6px 20px rgba(0, 0, 0, 0.42),
    0   0   0 1px rgba(0, 0, 0, 0.30);
}

.dashboard-premium a.glass-card:hover { transform: translateY(-2px); }

/* ── 4. Hero card — cinematic amber light source ─────────────────────────── */
.dashboard-premium .dashboard-hero {
  position: relative;
  overflow: hidden;
  padding: 36px 44px 28px;
  margin-bottom: 1.5rem;
  z-index: 1;
  /* Right border fractionally warmer — physically believable light reaction */
  border-right-color: rgba(255, 100, 0, 0.20);
  border-top-color:   rgba(255, 255, 255, 0.20);
}

/*
 * Cinematic light leak — layered gradients simulating warm amber light
 * entering from outside the frame at the upper-right corner.
 * Four layers: hotspot → diagonal streak → broad ambient fill → atmospheric haze.
 */
.dashboard-premium .dashboard-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* 1. Primary hotspot — tight bright orange source at corner */
    radial-gradient(ellipse 26% 56% at 104% -4%,  rgba(255, 110, 10, 0.28), transparent 54%),
    /* 2. Diagonal streak — warm orange light traveling inward at an angle */
    linear-gradient(148deg, transparent 40%, rgba(255, 90, 10, 0.085) 58%, rgba(255, 80, 5, 0.042) 70%, transparent 82%),
    /* 3. Broad outer orange fill — ambient light from right side */
    radial-gradient(ellipse 72% 96% at 108% 0%,   rgba(220, 70, 5, 0.095), transparent 56%),
    /* 4. Atmospheric orange haze — subtle rightward warming across entire hero */
    linear-gradient(90deg, transparent 28%, rgba(255, 90, 0, 0.024) 100%);
  pointer-events: none;
}

/* Cool blue counter-light — top-left, balances the composition */
.dashboard-premium .dashboard-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 38% 60% at -4% -4%, rgba(68, 100, 218, 0.08), transparent 58%);
  pointer-events: none;
}

.dashboard-premium .dashboard-hero-metrics {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding-top: 1.25rem;
  margin-top: 1.3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ── 5. Text ──────────────────────────────────────────────────────────────── */
.dashboard-premium .dashboard-hero-greeting {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: rgba(255, 255, 255, 0.98);
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.50);
  margin-bottom: 0.35rem;
}

/* Neon orange sun badge — sits left of greeting text */
.dashboard-premium .hero-greeting-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex-shrink: 0;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 140, 20, 0.52), rgba(255, 95, 0, 0.14) 60%);
  box-shadow:
    0 0 0 1px rgba(255, 122, 0, 0.32),   /* --kb-orange-border */
    0 0 0 3px rgba(255, 122, 0, 0.07),
    0 0 28px rgba(255, 95,  0, 0.40),    /* --kb-orange-glow   */
    0 1px 0  rgba(255, 255, 255, 0.20) inset;
  color: #ff8f1f;  /* --kb-orange-hot */
}

.dashboard-premium .dashboard-hero-subtitle {
  color: rgba(255, 255, 255, 0.44);
  font-size: 0.9rem;
}

/* Section / card text */
.dashboard-premium .section-title {
  display: flex;
  align-items: center;
  gap: 0.52rem;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 700;
  font-size: 1.0rem;
  letter-spacing: -0.01em;
}

.dashboard-premium .card-title   { color: rgba(255, 255, 255, 0.95); }
.dashboard-premium .card-text    { color: rgba(255, 255, 255, 0.54); }
.dashboard-premium .card-meta    { color: #ff8f1f; }  /* --kb-orange-hot */

.dashboard-premium .dashboard-empty-title    { color: rgba(255, 255, 255, 0.90); }
.dashboard-premium .dashboard-empty-body     { color: rgba(255, 255, 255, 0.48); }
.dashboard-premium .dashboard-section-subtitle { color: rgba(255, 255, 255, 0.38); }

/* ── 6. Section header icon badges ───────────────────────────────────────── */
.dashboard-premium .section-header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  flex-shrink: 0;
}

.dashboard-premium .section-header-icon--jobs,
.dashboard-premium .section-header-icon--calendar {
  background: radial-gradient(circle at 35% 30%, rgba(139,92,246,0.28), rgba(139,92,246,0.06) 68%);
  box-shadow:
    0 0 0 1px rgba(139,92,246,0.16),
    0 0 12px rgba(139,92,246,0.22),
    0 1px 0 rgba(255,255,255,0.10) inset;
  color: #a78bfa;
}

/* ── 7. Metric chips — premium instrument panels ─────────────────────────── */
.dashboard-premium .dashboard-metric-chip {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.05rem;
  padding: 1.1rem 1.55rem;
  min-width: 166px;
  background: rgba(255, 255, 255, 0.044);
  border: 1px solid rgba(255, 255, 255, 0.088);
  border-top-color: rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 4px 20px rgba(0, 0, 0, 0.32);
  text-decoration: none;
  transition:
    background   230ms ease-out,
    border-color 230ms ease-out,
    box-shadow   230ms ease-out,
    filter       230ms ease-out,
    transform    230ms ease-out;
}

.dashboard-premium .dashboard-metric-chip:hover {
  background: rgba(255, 255, 255, 0.072);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 8px 28px rgba(0, 0, 0, 0.36);
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* Icon badge — dimensional: inner gradient + glow ring + rim light */
.dashboard-premium .metric-chip-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

/* Equipment — neon orange / cinema practical */
.dashboard-premium .dashboard-metric-chip--equipment .metric-chip-icon {
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 140, 20, 0.62),  rgba(255, 95, 0, 0.20) 55%,
                                         rgba(180, 55, 0, 0.12) 100%);
  box-shadow:
    0 0 0 1.5px rgba(255, 122, 0, 0.36),   /* fine ring  [--kb-orange-border] */
    0 0 0 4px   rgba(255, 122, 0, 0.08),   /* soft outer halo                 */
    0 0   32px  rgba(255, 95,  0, 0.44),   /* outward glow [--kb-orange-glow] */
    0 1px 0     rgba(255, 180, 60, 0.24) inset,  /* inner highlight (top)     */
    inset 1px 0 0 rgba(255, 140, 30, 0.14);  /* left rim                       */
  color: #ff8f1f;  /* --kb-orange-hot */
}

/* Jobs — luminous violet */
.dashboard-premium .dashboard-metric-chip--jobs .metric-chip-icon {
  background:
    radial-gradient(circle at 32% 26%, rgba(196, 181, 253, 0.52), rgba(139, 92, 246, 0.18) 55%,
                                         rgba(79, 38, 180, 0.12) 100%);
  box-shadow:
    0 0 0 1.5px rgba(139, 92, 246, 0.30),
    0 0 0 4px   rgba(139, 92, 246, 0.07),
    0 0   28px  rgba(139, 92, 246, 0.36),
    0 1px 0     rgba(210, 190, 255, 0.24) inset,
    inset 1px 0 0 rgba(190, 160, 255, 0.14);
  color: #c4b5fd;
}

/* Invoices — illuminated glass / green */
.dashboard-premium .dashboard-metric-chip--invoices .metric-chip-icon {
  background:
    radial-gradient(circle at 32% 26%, rgba(110, 231, 183, 0.48), rgba(16, 185, 129, 0.16) 55%,
                                         rgba(6, 95, 70, 0.12) 100%);
  box-shadow:
    0 0 0 1.5px rgba(16, 185, 129, 0.28),
    0 0 0 4px   rgba(16, 185, 129, 0.06),
    0 0   26px  rgba(16, 185, 129, 0.30),
    0 1px 0     rgba(180, 255, 220, 0.22) inset,
    inset 1px 0 0 rgba(100, 230, 180, 0.12);
  color: #6ee7b7;
}

/* Chip body — value / label / link stack */
.dashboard-premium .metric-chip-body {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.dashboard-premium .metric-chip-value {
  color: rgba(255, 255, 255, 0.98);
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  margin-bottom: 3px;
}

.dashboard-premium .metric-chip-label {
  color: rgba(255, 255, 255, 0.44);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: 5px;
}

/* "View all →" in KitBay orange — visible, branded */
.dashboard-premium .metric-chip-link {
  font-size: 0.73rem;
  font-weight: 600;
  color: rgba(255, 122, 0, 0.72);  /* --kb-orange-border */
  transition: color 200ms ease-out;
}

.dashboard-premium .dashboard-metric-chip:hover .metric-chip-link {
  color: rgba(255, 143, 31, 0.96);  /* --kb-orange-hot */
}

/* Per-chip hover: coloured border + ambient glow (no extra transform, brightness handles it) */
.dashboard-premium .dashboard-metric-chip--equipment:hover {
  border-color: rgba(255, 122, 0, 0.28);   /* --kb-orange-border */
  box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 8px 32px rgba(255,95,0,0.20);
}
.dashboard-premium .dashboard-metric-chip--jobs:hover {
  border-color: rgba(139, 92, 246, 0.24);
  box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 8px 32px rgba(139,92,246,0.13);
}
.dashboard-premium .dashboard-metric-chip--invoices:hover {
  border-color: rgba(16, 185, 129, 0.24);
  box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 8px 32px rgba(16,185,129,0.13);
}

/* ── 8. Buttons ───────────────────────────────────────────────────────────── */

/* Primary — deep orange gradient, glossy, dimensional */
.dashboard-premium .btn-primary {
  background: linear-gradient(160deg, #b03600 0%, #d55000 35%, #ff7200 75%, #ff9a30 100%);
  box-shadow:
    0 0   0 1px rgba(180, 54, 0, 0.50),
    0 6px 22px rgba(180, 54, 0, 0.52),
    0 1px 0  rgba(255, 255, 255, 0.30) inset,
    0 -1px 0 rgba(0, 0, 0, 0.20) inset;
  color: #1a0800;
  font-weight: 700;
}

.dashboard-premium .btn-primary:hover {
  background: linear-gradient(160deg, #d55000 0%, #ff6500 60%, #ffaa40 100%);
  box-shadow:
    0 0   0 1px rgba(180, 54, 0, 0.60),
    0 10px 32px rgba(180, 54, 0, 0.56),
    0 1px 0  rgba(255, 255, 255, 0.34) inset,
    0 -1px 0 rgba(0, 0, 0, 0.18) inset;
  transform: translateY(-1px);
  color: #1a0800;
}

/* Secondary — dark glass */
.dashboard-premium .btn-secondary {
  background: rgba(255, 255, 255, 0.065);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.75);
  font-weight: 500;
  box-shadow:
    0 1px 0  rgba(255, 255, 255, 0.10) inset,
    0 -1px 0 rgba(0, 0, 0, 0.12) inset,
    0 2px 8px rgba(0, 0, 0, 0.18);
}

.dashboard-premium .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.24);
  color: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.14) inset,
    0 4px 14px rgba(255, 255, 255, 0.05);
  transform: translateY(-1px);
}

/* Purple CTA — deep violet, matching amber button quality */
.dashboard-premium .btn-purple {
  background: linear-gradient(160deg, #4c1d95 0%, #6d28d9 38%, #7c3aed 72%, #8b5cf6 100%);
  box-shadow:
    0 0   0 1px rgba(109, 40, 217, 0.52),
    0 6px 22px rgba(109, 40, 217, 0.38),
    0 1px 0  rgba(255, 255, 255, 0.24) inset,
    0 -1px 0 rgba(0, 0, 0, 0.22) inset;
  color: #f0e8ff;
  font-weight: 700;
  border: none;
}

.dashboard-premium .btn-purple:hover {
  background: linear-gradient(160deg, #6d28d9 0%, #7c3aed 58%, #a78bfa 100%);
  box-shadow:
    0 0   0 1px rgba(109, 40, 217, 0.62),
    0 10px 32px rgba(109, 40, 217, 0.44),
    0 1px 0  rgba(255, 255, 255, 0.28) inset,
    0 -1px 0 rgba(0, 0, 0, 0.18) inset;
  transform: translateY(-1px);
  color: #f0e8ff;
}

/*
 * "Add Equipment" catches the amber light source on its right edge.
 * Slightly warmer right border + tiny amber reflection + very soft outer glow
 * on the illuminated side — physically believable, not colour-changing.
 */
.dashboard-premium .dashboard-hero-actions .btn-secondary {
  box-shadow:
    0 1px 0  rgba(255, 255, 255, 0.12) inset,
    0 -1px 0 rgba(0, 0, 0, 0.14) inset,
    inset -1px 0 0 rgba(255, 122, 0, 0.16),   /* orange right-edge catch [--kb-orange-border] */
    0 0 16px rgba(255, 95,  0, 0.07),           /* faint outer orange haze [--kb-orange-haze]  */
    0 2px 8px rgba(0, 0, 0, 0.18);
  border-right-color: rgba(255, 122, 0, 0.18);  /* warmer right border */
}

.dashboard-premium .dashboard-hero-actions .btn-secondary:hover {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.16) inset,
    inset -1px 0 0 rgba(255, 122, 0, 0.24),
    0 0 22px rgba(255, 95,  0, 0.10),
    0 4px 14px rgba(255, 255, 255, 0.04);
  border-right-color: rgba(255, 122, 0, 0.28);
}

/* ── 9. Upcoming job cards ────────────────────────────────────────────────── */
.dashboard-premium .upcoming-job-card {
  background: rgba(255, 255, 255, 0.038);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 2px 12px rgba(0, 0, 0, 0.28);
  color: rgba(255, 255, 255, 0.90);
}

.dashboard-premium .upcoming-job-card:hover {
  background: rgba(255, 255, 255, 0.062);
  border-color: rgba(255, 122, 0, 0.18);   /* --kb-orange-border */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.09) inset,
    0 6px 22px rgba(0, 0, 0, 0.34),
    0 0   0 1px rgba(255, 95,  0, 0.08);  /* --kb-orange-haze */
  transform: translateY(-1px);
}

/* ── 10. Empty state — sophisticated CSS illustration ─────────────────────── */
.dashboard-premium .dashboard-empty-state {
  padding: 3rem 2rem 3.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.dashboard-premium .dashboard-empty-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  /* Dimensional inner gradient — brighter at top-left source */
  background:
    radial-gradient(circle at 34% 28%, rgba(167, 139, 250, 0.44),
                                        rgba(139, 92, 246, 0.16) 52%,
                                        rgba(76, 29, 149, 0.08) 100%);
  box-shadow:
    0 0 0 1px   rgba(139, 92, 246, 0.24),   /* fine border ring */
    0 0 0 6px   rgba(139, 92, 246, 0.06),   /* soft halo */
    0 0   44px  rgba(139, 92, 246, 0.34),   /* outward glow */
    0 1px 0     rgba(210, 190, 255, 0.18) inset;  /* inner top highlight */
  color: rgba(196, 181, 253, 0.92);
  margin-bottom: 1.4rem;
  z-index: 1;
}

/* Orbital ring 1 — close, clean */
.dashboard-premium .dashboard-empty-icon::before {
  content: '';
  position: absolute;
  inset: -13px;
  border-radius: 50%;
  border: 1px solid rgba(139, 92, 246, 0.18);
  pointer-events: none;
}

/* Orbital ring 2 — wider, more faint */
.dashboard-premium .dashboard-empty-icon::after {
  content: '';
  position: absolute;
  inset: -24px;
  border-radius: 50%;
  border: 1px solid rgba(139, 92, 246, 0.09);
  pointer-events: none;
}

/*
 * Sparkle dots — scattered tiny violet particles using multiple box-shadows.
 * Positioned outside the icon's 44px radius on the outer orbital ring.
 */
.dashboard-premium .empty-icon-sparks {
  position: absolute;
  top: 50%; left: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(196, 181, 253, 0.70);
  transform: translate(-50%, -50%);
  pointer-events: none;
  /* Scatter tiny dots: (x, y) offsets relative to center of icon */
  box-shadow:
     62px  -4px  0 0 rgba(167, 139, 250, 0.60),   /*  3 o'clock */
    -60px   8px  0 0 rgba(167, 139, 250, 0.42),   /*  9 o'clock */
      6px -64px  0 0 rgba(167, 139, 250, 0.52),   /* 12 o'clock */
     -8px  62px  0 0 rgba(167, 139, 250, 0.36),   /*  6 o'clock */
     44px -46px  0 0 rgba(167, 139, 250, 0.48),   /* ~2 o'clock */
    -42px  48px  0 0 rgba(167, 139, 250, 0.32),   /* ~8 o'clock */
     46px  42px  0 0 rgba(167, 139, 250, 0.38);   /* ~4 o'clock */
}

/* ── 11. Status pills ─────────────────────────────────────────────────────── */
.dashboard-premium .upcoming-job-status-pill {
  background: rgba(255, 122, 0, 0.11);        /* --kb-orange-bg  */
  color: #ff8f1f;                               /* --kb-orange-hot */
  border: 1px solid rgba(255, 122, 0, 0.20);
}

/* ── 12. Calendar — unified glass component, not spreadsheet ─────────────── */
.dashboard-premium .calendar-container {
  background: transparent;
  box-shadow: none;
  padding: 0;
  margin-bottom: 0;
  border-radius: 0;
}

.dashboard-premium .calendar-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  padding-bottom: 14px;
  margin-bottom: 18px;
}

.dashboard-premium .calendar-header h3 { color: rgba(255, 255, 255, 0.90); font-size: 1.1rem; }
.dashboard-premium .calendar-month     { color: rgba(255, 255, 255, 0.40); font-size: 0.8rem; }

/* Weekday headers — softer, less spread */
.dashboard-premium .calendar-weekday-header {
  background: rgba(255, 255, 255, 0.032);
  color: rgba(255, 255, 255, 0.50);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 12px 6px;
}

/* Grid — reduce gap for unified glass feeling, let borders do the separation */
.dashboard-premium .calendar-grid {
  background-color: rgba(255, 255, 255, 0.016);
  gap: 0px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.048);
}

/* Day cells — closer in tone to the card background, less spreadsheet contrast */
.dashboard-premium .calendar-day {
  background: rgba(20, 28, 46, 0.58);
  border-right: 1px solid rgba(255, 255, 255, 0.030);
  border-bottom: 1px solid rgba(255, 255, 255, 0.030);
  border-left: none;
  border-top: none;
  min-height: 88px;
  padding: 2px;
}

.dashboard-premium .calendar-day.empty {
  background: rgba(12, 18, 30, 0.38);
}

.dashboard-premium .calendar-day.has-jobs {
  background: rgba(24, 34, 56, 0.68);
}

/* Today highlight */
.dashboard-premium .calendar-day.is-today {
  background: rgba(255, 122, 0, 0.08);              /* --kb-orange-bg     */
  border-right-color:  rgba(255, 122, 0, 0.18) !important;
  border-bottom-color: rgba(255, 122, 0, 0.18) !important;
  box-shadow: inset 0 0 18px rgba(255, 95, 0, 0.05); /* --kb-orange-haze  */
}

.dashboard-premium .calendar-day.is-today .date-number {
  color: #ff8f1f;  /* --kb-orange-hot */
  font-weight: 700;
}

.dashboard-premium .date-number {
  color: rgba(255, 255, 255, 0.68);
  padding: 8px 10px;
  font-size: 0.78rem;
  font-weight: 500;
}

.dashboard-premium .calendar-day:not(.empty):hover {
  background: rgba(255, 255, 255, 0.055);
}

/* "Next" — KB Premium Orange */
.dashboard-premium .calendar-nav-btn {
  background: linear-gradient(135deg, var(--kb-orange-deep) 0%, var(--kb-orange-base) 100%);
  color: #180900;
  font-weight: 700;
  border-radius: 8px;
  box-shadow:
    0 3px 14px rgba(180, 80, 0, 0.34),
    0 1px 0 rgba(255,255,255,0.24) inset;
}

.dashboard-premium .calendar-nav-btn:hover {
  background: linear-gradient(135deg, var(--kb-orange-base) 0%, var(--kb-orange-hot) 100%);
  box-shadow:
    0 6px 22px rgba(180, 80, 0, 0.48),
    0 1px 0 rgba(255,255,255,0.28) inset;
  transform: translateY(-1px);
  color: #180900;
}

/* "Previous" — dark glass secondary, visually quieter */
.dashboard-premium .calendar-nav-btn--prev {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  color: rgba(255, 255, 255, 0.65) !important;
  font-weight: 500 !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 2px 8px rgba(0, 0, 0, 0.20) !important;
}

.dashboard-premium .calendar-nav-btn--prev:hover {
  background: rgba(255, 255, 255, 0.11) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: rgba(255, 255, 255, 0.88) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 4px 14px rgba(0, 0, 0, 0.26) !important;
  transform: translateY(-1px);
}

.dashboard-premium .calendar-title,
.dashboard-premium .calendar-month-display {
  color: rgba(255, 255, 255, 0.70);
}

/* Calendar legend */
.dashboard-premium .calendar-legend {
  background: rgba(18, 26, 48, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  margin-top: 1rem;
}

.dashboard-premium .calendar-legend h4 { color: rgba(255, 255, 255, 0.70); }

/* ── 13. Section card padding + header ────────────────────────────────────── */
.dashboard-premium .dashboard-section-card {
  padding: 1.75rem 2rem;
}

.dashboard-premium .dashboard-section-header {
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.065);
}

/* ── 14. Empty state CTA spacing ──────────────────────────────────────────── */
.dashboard-premium .dashboard-empty-cta {
  margin-top: 1.4rem;
}

/* ── 15. Section accent colour tokens ─────────────────────────────────────── */
:root {
  --section-equipment: #ff7a00;   /* = --kb-orange-base */
  --section-jobs:      #7c3aed;   /* violet         */
  --section-invoices:  #10b981;   /* emerald        */
  --section-roles:     #06b6d4;   /* cyan           */
  --section-settings:  #6366f1;   /* indigo / slate */
}

/* ── 16. Ambient halo animations ──────────────────────────────────────────── */
/*
 * "Breathing" animation for metric icon halos — quiet instrument-panel life.
 * Scale ≤ 1.5%, opacity ≤ 16% change, 8–10 s duration, staggered by badge.
 */
@keyframes halo-breathe {
  0%, 100% { opacity: 1.00; transform: scale(1.000); }
  50%       { opacity: 0.72; transform: scale(1.035); }
}

/*
 * Hero light-leak micro-drift — 28 s, translate ≤ 2 px, feels like
 * atmospheric light shifting rather than an animation.
 */
@keyframes hero-light-drift {
  0%,  100% { opacity: 1.00; transform: translate(  0px,  0px); }
  33%        { opacity: 0.90; transform: translate( 2px, -1px); }
  66%        { opacity: 0.95; transform: translate(-1px,  2px); }
}

/* Apply breathing to each metric icon badge, staggered 2 s apart */
.dashboard-premium .dashboard-metric-chip--equipment .metric-chip-icon {
  animation: halo-breathe  6s ease-in-out infinite 0.0s;
}
.dashboard-premium .dashboard-metric-chip--jobs .metric-chip-icon {
  animation: halo-breathe  7s ease-in-out infinite 2.0s;
}
.dashboard-premium .dashboard-metric-chip--invoices .metric-chip-icon {
  animation: halo-breathe  8s ease-in-out infinite 4.0s;
}

/* Hero light-leak pseudo-element drifts slowly */
.dashboard-premium .dashboard-hero::before {
  animation: hero-light-drift 28s ease-in-out infinite;
}

/* Respect user motion preferences — all ambient animations off */
@media (prefers-reduced-motion: reduce) {
  .dashboard-premium .metric-chip-icon,
  .dashboard-premium .dashboard-hero::before {
    animation: none !important;
  }
}

/* ── Dark form inputs — explicit overrides for all input types on dark pages ── */

/* CSS variable tokens (used by kb-input base rule) */
.dashboard-premium-page {
  --kb2-input-bg:           #151c30;
  --kb2-input-border:       rgba(255, 255, 255, 0.12);
  --kb2-input-border-focus: #ff7a00;
  --kb2-input-shadow-focus: 0 0 0 3px rgba(255, 122, 0, 0.22);
}

/* Direct override — catches every input type; higher specificity than UA sheet */
.dashboard-premium-page input.kb-input,
.dashboard-premium-page select.kb-input,
.dashboard-premium-page textarea.kb-input {
  background-color: #151c30;
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.90);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.90);
}

.dashboard-premium-page input.kb-input::placeholder,
.dashboard-premium-page select.kb-input::placeholder,
.dashboard-premium-page textarea.kb-input::placeholder {
  color: rgba(255, 255, 255, 0.28);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.28);
  opacity: 1;
}

.dashboard-premium-page input.kb-input:focus,
.dashboard-premium-page select.kb-input:focus,
.dashboard-premium-page textarea.kb-input:focus {
  border-color: #ff7a00;
  box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.22);
  outline: none;
}

/* Autofill suppression — prevents browser turning fields yellow/blue */
.dashboard-premium-page input.kb-input:-webkit-autofill,
.dashboard-premium-page input.kb-input:-webkit-autofill:hover,
.dashboard-premium-page input.kb-input:-webkit-autofill:focus,
.dashboard-premium-page input.kb-input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #151c30 inset !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.90) !important;
  caret-color: rgba(255, 255, 255, 0.90);
  transition: background-color 5000s ease-in-out 0s;
}

/* Dark label style */
.dashboard-premium-page .kb-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  margin-bottom: 0.4rem;
}

/* Textarea — auto height, don't clip content */
.dashboard-premium-page textarea.kb-input {
  height: auto;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  line-height: 1.6;
}

/* Date picker icon — muted on dark backgrounds */
.dashboard-premium-page input[type="date"].kb-input::-webkit-calendar-picker-indicator {
  filter: invert(0.55) brightness(1.1);
  cursor: pointer;
  opacity: 0.65;
}

/* Select — custom dark chevron arrow */
.dashboard-premium-page select.kb-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.42)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 12px 12px;
  padding-right: 2.25rem;
}

/* Select option text — dark bg for dropdown list */
.dashboard-premium-page select.kb-input option {
  background-color: #1a2035;
  color: rgba(255, 255, 255, 0.88);
}

/* Disabled state */
.dashboard-premium-page input.kb-input:disabled,
.dashboard-premium-page select.kb-input:disabled,
.dashboard-premium-page textarea.kb-input:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

/* ── Crew rate grid — dark overrides (dashboard-premium-page) ────────────── */

/* Strip the grid's own card border — the kb-glass-panel provides the container */
.dashboard-premium-page .crew-rate-grid {
  border: none;
  border-radius: 0;
  margin-top: 0;
  overflow: hidden;
}

/* Header strip */
.dashboard-premium-page .crew-rate-grid-header {
  background: rgba(255, 255, 255, 0.022);
  color: rgba(255, 255, 255, 0.30);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* Row dividers */
.dashboard-premium-page .crew-rate-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.01);
}
.dashboard-premium-page .crew-rate-row .col-label {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.875rem;
}

/* Rate/qty inputs inside the grid */
.dashboard-premium-page .crew-rate-row .col-rate input,
.dashboard-premium-page .crew-rate-row .col-qty input {
  background: #151c30;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.90);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.90);
  border-radius: 6px;
}
.dashboard-premium-page .crew-rate-row .col-rate input::placeholder,
.dashboard-premium-page .crew-rate-row .col-qty input::placeholder {
  color: rgba(255, 255, 255, 0.22);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.22);
}
.dashboard-premium-page .crew-rate-row .col-rate input:focus,
.dashboard-premium-page .crew-rate-row .col-qty input:focus {
  outline: none;
  border-color: #ff7a00;
  box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.20);
}

/* Line totals */
.dashboard-premium-page .crew-rate-row .col-total {
  color: rgba(255, 255, 255, 0.55);
}

/* Subtotal row */
.dashboard-premium-page .crew-rate-subtotal-row {
  background: rgba(255, 255, 255, 0.028);
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-bottom: none;
}
.dashboard-premium-page .crew-rate-subtotal-row .col-label strong {
  color: rgba(255, 255, 255, 0.78);
}
.dashboard-premium-page .crew-rate-subtotal-row .col-total strong {
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.95rem;
}

/* $ prefix wrapper (input-with-prefix) */
.dashboard-premium-page .input-with-prefix {
  display: flex;
  align-items: stretch;
}
.dashboard-premium-page .input-prefix {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-right: none;
  color: rgba(255, 255, 255, 0.36);
  border-radius: 6px 0 0 6px;
}
.dashboard-premium-page .input-with-prefix input {
  border-radius: 0 6px 6px 0;
  background: #151c30;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.90);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.90);
}
.dashboard-premium-page .input-with-prefix input::placeholder {
  color: rgba(255, 255, 255, 0.22);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.22);
}
.dashboard-premium-page .input-with-prefix input:focus {
  outline: none;
  border-color: #ff7a00;
  box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.20);
}

/* No-rate-card notice */
.dashboard-premium-page .no-rate-card-notice {
  background: rgba(243, 156, 18, 0.09);
  border-color: rgba(243, 156, 18, 0.30);
  color: rgba(243, 175, 72, 0.90);
  border-radius: 8px;
}
.dashboard-premium-page .no-rate-card-notice a {
  color: rgba(255, 152, 30, 0.92);
}

/* ==========================================================
   Roles & Rates — V2 Dark Theme Overrides
   ==========================================================
   WHY !important IS REQUIRED:
   The original V1 style.css applies light input styling
   (.rate-input-wrapper, .rate-currency, etc.) with equal or
   higher cascade priority depending on load order. These
   overrides intentionally force the V2 dark appearance
   without affecting print views (the .dashboard-premium-page
   body class is never applied during print or PDF rendering).
   ========================================================== */

/* Rate input grid — consistent gap; column width comes from the auto-fill
   rule in style.css (minmax 160px, 1fr). Both Day and Hourly sections now
   use the same grid definition so every input is identical width. */
.dashboard-premium-page .rate-grid-items {
  gap: 1rem !important;
}

/* Rate input wrapper — dark glass container */
.dashboard-premium-page .rate-input-wrapper {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  border-radius: 7px !important;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.dashboard-premium-page .rate-input-wrapper:focus-within {
  border-color: rgba(243, 156, 18, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.10) !important;
}

/* Dollar prefix chip */
.dashboard-premium-page .rate-currency {
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.35) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.10) !important;
  font-size: 0.875rem;
}

/* Typed value — near-white, tabular figures */
.dashboard-premium-page .rate-input-wrapper input {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.88) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.88) !important;
  font-variant-numeric: tabular-nums;
}

/* Placeholder / em dash — muted but legible */
.dashboard-premium-page .rate-input-wrapper input::placeholder {
  color: rgba(255, 255, 255, 0.25) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.25) !important;
  opacity: 1 !important;
}

/* Autofill — prevent browser white/yellow flash on saved values */
.dashboard-premium-page .rate-input-wrapper input:-webkit-autofill,
.dashboard-premium-page .rate-input-wrapper input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px rgba(30, 35, 50, 0.95) inset !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.88) !important;
  caret-color: rgba(255, 255, 255, 0.88);
}

/* Field labels above each rate input */
.dashboard-premium-page .rate-grid-item label {
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.8rem;
}

/* Tier category badges — dark-palette colour map */
.dashboard-premium-page .tier-badge-default      { background: rgba(14,  165, 233, 0.12) !important; color: rgba(125, 211, 252, 0.88) !important; }
.dashboard-premium-page .tier-badge-tv_drama     { background: rgba(236,  72, 153, 0.12) !important; color: rgba(249, 168, 212, 0.88) !important; }
.dashboard-premium-page .tier-badge-commercial   { background: rgba(34,  197,  94, 0.12) !important; color: rgba(134, 239, 172, 0.88) !important; }
.dashboard-premium-page .tier-badge-feature_film { background: rgba(234, 179,   8, 0.12) !important; color: rgba(253, 224,  71, 0.88) !important; }
.dashboard-premium-page .tier-badge-union        { background: rgba(139,  92, 246, 0.12) !important; color: rgba(196, 181, 253, 0.88) !important; }
.dashboard-premium-page .tier-badge-non_union    { background: rgba(255, 255, 255, 0.07) !important; color: rgba(255, 255, 255, 0.50) !important; }