/* ============================================================
   App pages in the "Mission Control" look
   Every app page (Sales, Customers, Expenses, Payroll, Accounting, …) styles
   itself from the shared theme variables (hsl(var(--card)), --border,
   --primary …) plus a copy-pasted template: a blue-gradient icon tile and a
   gradient-text title in the header, *-btn-primary gradient buttons, ALL-CAPS
   table heads and section labels. This layer brings them into the shell's
   palette without editing each page:
     1. remap the theme variables to the Mission Control tokens (dawn + night);
     2. restyle the shared template patterns (inline ones via attribute selectors).
   Everything is scoped to body:has(.mc-sky), i.e. only while the app shell is
   mounted (sign-in and the organization picker are untouched), and covers the
   modals that pages append straight to <body>.
   Variables stay plain HSL triplets because some rules use hsl(var(--card) / a).
   ============================================================ */

/* 1 ── Theme variables ─────────────────────────────────────── */
html:has(.mc-sky) {
  --background: 207 45% 97%;        /* inputs, wells */
  --foreground: 213 68% 15%;        /* #0C2340 */
  --card: 0 0% 100%;
  --card-foreground: 213 68% 15%;
  --popover: 0 0% 100%;
  --popover-foreground: 213 68% 15%;
  --primary: 201 96% 32%;           /* #0369A1 */
  --primary-foreground: 0 0% 100%;
  --secondary: 208 40% 93%;
  --secondary-foreground: 213 68% 15%;
  --muted: 208 40% 94%;
  --muted-foreground: 210 32% 35%;  /* #3C5A76 */
  --accent: 208 40% 93%;
  --accent-foreground: 213 68% 15%;
  --border: 207 33% 82%;            /* near #B4C8DA */
  --input: 207 33% 82%;
  --ring: 201 96% 32%;
}
html.dark:has(.mc-sky) {
  --background: 220 70% 8%;         /* deeper than cards, for inputs */
  --foreground: 210 40% 94%;        /* #EAF0F6 */
  --card: 218 62% 13%;              /* #0B1B35 */
  --card-foreground: 210 40% 94%;
  --popover: 218 62% 13%;
  --popover-foreground: 210 40% 94%;
  --primary: 199 92% 60%;           /* #38BDF8 */
  --primary-foreground: 220 70% 8%;
  --secondary: 218 50% 18%;
  --secondary-foreground: 210 40% 90%;
  --muted: 218 50% 17%;
  --muted-foreground: 210 22% 71%;  /* #A3B6C9 */
  --accent: 218 50% 19%;
  --accent-foreground: 210 40% 92%;
  --border: 214 41% 25%;            /* near #2B4466 */
  --input: 214 41% 25%;
  --ring: 199 92% 60%;
  --sidebar: 218 62% 9%;
  --sidebar-border: 214 41% 20%;
}

/* --gradient-gold (blue in the old theme) drives the "gold" buttons and avatars
   on Teams, Settings, Team Login Logs and the alert dialog. Make it real logo gold. */
html:has(.mc-sky), html.dark:has(.mc-sky) { --gradient-gold: linear-gradient(140deg, #EBC585 0%, #D9A650 55%, #B9853A 100%); }
body:has(.mc-sky) [style*="gradient-gold"] { color: var(--mc-on-gold) !important; }
body:has(.mc-sky) [style*="gradient-gold"] svg { stroke: currentColor; }
body:has(.mc-sky) button[style*="gradient-gold"], body:has(.mc-sky) .btn-gold-glow { box-shadow: 0 8px 20px -10px rgba(226, 181, 104, .7) !important; }

/* 2 ── Type ───────────────────────────────────────────────── */
body:has(.mc-sky) #app-shell-content,
body:has(.mc-sky) #app-shell-content :where(button, input, select, textarea, table, h1, h2, h3, h4, p, span, td, th, label),
body:has(.mc-sky) :where([class*="-modal"], [class*="-modal"] *) {
  font-family: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body:has(.mc-sky) #app-shell-content { color: var(--mc-ink); -webkit-font-smoothing: antialiased; }

/* 3 ── Page header (inline template: icon tile + gradient title) ── */
/* Gradient-text titles become solid ink with tight tracking. */
body:has(.mc-sky) [style*="text-fill-color:transparent"],
body:has(.mc-sky) [style*="text-fill-color: transparent"],
body:has(.mc-sky) .sh-title,
body:has(.mc-sky) .tl-stat-value {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--mc-ink) !important;
  font-weight: 600 !important;
  letter-spacing: -.02em;
}
/* The 46px blue tile beside each page title: a quiet gold-tinted tile instead. */
body:has(.mc-sky) [style*="border-radius:14px;background:linear-gradient(135deg,#0369A1"],
body:has(.mc-sky) .sh-head-ico {
  background: var(--mc-gold-soft) !important;
  box-shadow: inset 0 0 0 1px rgba(226, 181, 104, .28) !important;
  color: var(--mc-gold-text) !important;
}
body:has(.mc-sky) [style*="border-radius:14px;background:linear-gradient(135deg,#0369A1"] svg,
body:has(.mc-sky) .sh-head-ico svg { stroke: var(--mc-gold-text) !important; color: var(--mc-gold-text) !important; }

/* 4 ── Surfaces ───────────────────────────────────────────── */
/* Cards and modals already take hsl(var(--card)); add the shell's edge and depth. */
body:has(.mc-sky) #app-shell-content :is([class$="-card"], [class*="-card "]):not(button):not(a) {
  border-color: var(--mc-hair) !important;
  box-shadow: var(--mc-shadow) !important;
}
body:has(.mc-sky) :is([class$="-modal"], [class*="-modal "]):not([class*="overlay"]) {
  border: 1px solid var(--mc-hair-2);
  box-shadow: 0 30px 80px -24px rgba(2, 8, 18, .6) !important;
}
body:has(.mc-sky) [class*="-modal-overlay"], body:has(.mc-sky) [class*="-overlay"][class*="modal"] {
  background: rgba(2, 8, 18, .55) !important;
}

/* 5 ── Buttons ────────────────────────────────────────────── */
/* Primary actions are logo gold, like Sign in. */
body:has(.mc-sky) :is([class*="-btn-primary"], .sl-btn-complete, .tl-load-btn) {
  background: var(--mc-gold) !important;
  color: var(--mc-on-gold) !important;
  border: 0 !important;
  box-shadow: 0 8px 20px -10px rgba(226, 181, 104, .7) !important;
  font-weight: 600;
}
body:has(.mc-sky) :is([class*="-btn-primary"], .sl-btn-complete, .tl-load-btn):hover { background: var(--mc-gold-hi) !important; opacity: 1 !important; }
body:has(.mc-sky) :is([class*="-btn-primary"], .sl-btn-complete, .tl-load-btn) svg { stroke: currentColor; }
/* Pale-pink danger buttons read as stickers on the night sky; make them outlined. */
body:has(.mc-sky) [class*="-btn-danger"] {
  background: transparent !important;
  color: var(--mc-warn) !important;
  border: 1px solid color-mix(in srgb, var(--mc-warn) 45%, transparent) !important;
}
/* Inline pale-pink delete buttons (per-row markup in several pages). */
body:has(.mc-sky) [style*="background:#FEF2F2;color:#DC2626"] {
  background: transparent !important;
  color: var(--mc-warn) !important;
  border: 1px solid color-mix(in srgb, var(--mc-warn) 45%, transparent) !important;
}
/* Inline pastel pills were drawn for a white page; at night keep their hue, drop the glare. */
html.dark body:has(.mc-sky) [style*="background:#FEF2F2"], html.dark body:has(.mc-sky) [style*="background:#FFF1F2"] { background: rgba(255, 138, 101, .12) !important; border-color: rgba(255, 138, 101, .3) !important; }
html.dark body:has(.mc-sky) [style*="background:#EFF6FF"] { background: rgba(56, 189, 248, .12) !important; border-color: rgba(56, 189, 248, .3) !important; }
html.dark body:has(.mc-sky) [style*="background:#F0FDF4"] { background: rgba(74, 222, 128, .12) !important; border-color: rgba(74, 222, 128, .3) !important; }
html.dark body:has(.mc-sky) [style*="background:#FFFBEB"], html.dark body:has(.mc-sky) [style*="background:#FEF3C7"] { background: rgba(226, 181, 104, .14) !important; border-color: rgba(226, 181, 104, .32) !important; }
html.dark body:has(.mc-sky) [style*="background:#FDF4FF"] { background: rgba(192, 132, 252, .12) !important; border-color: rgba(192, 132, 252, .3) !important; }
body:has(.mc-sky) [class*="-btn-danger"]:hover { background: color-mix(in srgb, var(--mc-warn) 12%, transparent) !important; }
body:has(.mc-sky) :is([class*="-btn-outline"], [class*="-btn-ghost"]) { border-color: var(--mc-hair-2) !important; }
/* Active tab in Accounting */
body:has(.mc-sky) .ac-tab.active { background: var(--mc-gold-soft) !important; color: var(--mc-gold-text) !important; box-shadow: inset 0 0 0 1px rgba(226, 181, 104, .3) !important; }

/* 6 ── Tables, labels, section headers: sentence case, no shouting ── */
body:has(.mc-sky) #app-shell-content th,
body:has(.mc-sky) [class*="-modal"] th {
  text-transform: none !important;
  letter-spacing: .01em !important;
  font-weight: 600 !important;
  color: var(--mc-faint) !important;
}
body:has(.mc-sky) #app-shell-content thead tr { background: var(--mc-tint) !important; }
body:has(.mc-sky) #app-shell-content tbody tr:hover { background: var(--mc-tint-2) !important; }
body:has(.mc-sky) :is(#app-shell-content, [class*="-modal"]) :is([class$="-label"], [class*="-label "]) {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 600 !important;
}
body:has(.mc-sky) [class*="-section-hdr"] {
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--mc-gold-text) !important;
  font-weight: 600 !important;
}

/* Every page rule that set text-transform: uppercase (generated from the pages'
   <style> blocks), plus inline and Tailwind uppercase inside the shell. */
body:has(.mc-sky) .ac-stat-label,
body:has(.mc-sky) .ac-table th,
body:has(.mc-sky) .ac-section-head td,
body:has(.mc-sky) .crp-label,
body:has(.mc-sky) .cp-label,
body:has(.mc-sky) .cp-table th,
body:has(.mc-sky) .cp-section-hdr,
body:has(.mc-sky) .em-label,
body:has(.mc-sky) .em-table th,
body:has(.mc-sky) .em-section-hdr,
body:has(.mc-sky) .ex-label,
body:has(.mc-sky) .ex-table th,
body:has(.mc-sky) .ex-section-hdr,
body:has(.mc-sky) .ghp-label,
body:has(.mc-sky) .pr-label,
body:has(.mc-sky) .pr-emp-table th,
body:has(.mc-sky) .pr-hist-table th,
body:has(.mc-sky) .pp-label,
body:has(.mc-sky) .pp-table th,
body:has(.mc-sky) .pp-section-hdr,
body:has(.mc-sky) .pp-stat-lbl,
body:has(.mc-sky) .pp-pay-hist-table th,
body:has(.mc-sky) .sh-sum-label,
body:has(.mc-sky) .sh-label,
body:has(.mc-sky) .sh-table th,
body:has(.mc-sky) .sh-sec,
body:has(.mc-sky) .sl-label,
body:has(.mc-sky) .sl-total-label,
body:has(.mc-sky) .sl-table th,
body:has(.mc-sky) .sl-section-hdr,
body:has(.mc-sky) .svcp-label,
body:has(.mc-sky) .svcp-section-hdr,
body:has(.mc-sky) .slp-label,
body:has(.mc-sky) .tl-table th,
body:has(.mc-sky) .up-stat-label,
body:has(.mc-sky) .up-table th,
body:has(.mc-sky) .up-section-hdr,
body:has(.mc-sky) .up-label,
body:has(.mc-sky) #app-shell-content [style*="text-transform:uppercase"],
body:has(.mc-sky) #app-shell-content .uppercase,
body:has(.mc-sky) [class*="-modal"] .uppercase {
  text-transform: none !important;
  letter-spacing: .01em !important;
}

/* 7 ── Inputs ─────────────────────────────────────────────── */
body:has(.mc-sky) :is(#app-shell-content, [class*="-modal"]) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not(#global-search-input), select, textarea):focus {
  border-color: var(--mc-accent) !important;
  box-shadow: 0 0 0 3px var(--mc-accent-soft) !important;
}

/* 8 ── Avatars and progress fills from the template ───────── */
body:has(.mc-sky) :is(.cp-avatar, .em-avatar, .pr-avatar, .tl-avatar) {
  background: linear-gradient(140deg, var(--mc-gold-hi), #B9853A) !important;
  color: var(--mc-on-gold) !important;
}
body:has(.mc-sky) .up-progress-bar { background: var(--mc-accent) !important; }

/* Page content sits on the sky: drop any page-level opaque backdrop. */
body:has(.mc-sky) #app-shell-content > :not(header):not(.mcd) { background-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  body:has(.mc-sky) [class*="-btn"]:hover { transform: none !important; }
}

/* ── "Who did it" stamps (js/utils/actorStamp.js) ──────────── */
.act-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
  border-radius: 999px; border: 1px solid hsl(var(--border) / .8); background: hsl(var(--muted) / .45);
  color: hsl(var(--muted-foreground)); font-size: .74rem; font-weight: 500; white-space: nowrap;
}
.act-chip svg { width: 13px; height: 13px; flex: none; }
.act-chip b { color: hsl(var(--foreground)); font-weight: 600; }
.act-chip i { font-style: normal; color: var(--mc-gold-text, #8A5418); font-weight: 600; margin-left: 2px; }
.act-line { display: block; margin-top: 2px; font-size: .72rem; font-weight: 500; color: hsl(var(--muted-foreground)); white-space: nowrap; }