/* Milemarker Agents theme.
 * Installed by /opt/milemarker-whitelabel/apply-whitelabel.sh -> ui-dist/mm-brand/milemarker.css
 * and linked from index.html AFTER the app stylesheet, so equal-specificity rules here win.
 * Overrides the shadcn tokens the app is built on; no bundle edits.
 * Tokens: milemarker.co (orange #FD571A, Hedvig Letters Serif / Inter / Roboto Mono,
 * radius 10px controls / 12px cards) with neutral greys, never warm cream (reads brown). */

@import url("https://fonts.googleapis.com/css2?family=Hedvig+Letters+Serif:opsz@12..24&family=Roboto+Mono:wght@400;500&display=swap");

/* ---- Tokens: light ---------------------------------------------------- */
:root {
  --radius: 0.75rem;                       /* lg 12px cards, md 9.6px controls */
  --mm-orange: #FD571A;
  --mm-orange-deep: #E8430C;
  --mm-orange-ink: #C2400E;                /* orange text on light: 5.2:1 */
  --mm-gradient: linear-gradient(135deg, #E8430C 0%, #FD571A 52%, #FF9421 100%);   /* official brand gradient */

  --background: #FFFFFF;
  --foreground: #16181D;
  --card: #FFFFFF;
  --card-foreground: #16181D;
  --popover: #FFFFFF;
  --popover-foreground: #16181D;
  --primary: #FD571A;
  --primary-foreground: #FFFFFF;
  --secondary: #F4F5F7;
  --secondary-foreground: #16181D;
  --muted: #F4F5F7;
  --muted-foreground: #5B606B;
  --accent: #F4F5F7;
  --accent-foreground: #16181D;
  --border: #E7E8EC;
  --input: #E7E8EC;
  --ring: #FD571A;
  --sidebar: #F7F8FA;
  --sidebar-foreground: #16181D;
  --sidebar-primary: #FD571A;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #FFF1E9;
  --sidebar-accent-foreground: #FD571A;
  --sidebar-border: #E7E8EC;
  --sidebar-ring: #FD571A;
  --scrollbar-thumb: #C9CCD3;
  --scrollbar-thumb-hover: #A9AEB8;
}

/* ---- Tokens: dark (neutral charcoal) ----------------------------------- */
html.dark, :root.dark, .dark {
  --background: #111317;
  --foreground: #F4F5F7;
  --card: #1A1D23;
  --card-foreground: #F4F5F7;
  --popover: #1A1D23;
  --popover-foreground: #F4F5F7;
  --bubble-agent: #16181D;
  --primary: #FD571A;
  --primary-foreground: #FFFFFF;
  --secondary: #23262D;
  --secondary-foreground: #F4F5F7;
  --muted: #23262D;
  --muted-foreground: #9AA0AB;
  --accent: #23262D;
  --accent-foreground: #F4F5F7;
  --border: rgb(255 255 255 / 0.08);
  --input: rgb(255 255 255 / 0.12);
  --ring: #FD571A;
  --sidebar: #15171C;
  --sidebar-foreground: #F4F5F7;
  --sidebar-primary: #FD571A;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: rgb(253 87 26 / 0.14);
  --sidebar-accent-foreground: #FF8B4D;
  --sidebar-border: rgb(255 255 255 / 0.08);
  --sidebar-ring: #FD571A;
  --scrollbar-thumb: #3A3E47;
  --scrollbar-thumb-hover: #4A4F5A;
}

/* ---- Type -------------------------------------------------------------- */
/* Page titles: Hedvig, sentence case, never bold (Hedvig ships one weight). */
h1 {
  font-family: "Hedvig Letters Serif", Georgia, "Times New Roman", serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
}
h1.uppercase {
  text-transform: none !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
}
/* Labels and identifiers: Roboto Mono (brand eyebrow face). */
.font-mono,
.uppercase:not(h1) {
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
}
.uppercase:not(h1) { font-weight: 500 !important; }

/* ---- Primary buttons: brand gradient ----------------------------------- */
button.bg-primary,
a.bg-primary,
[data-slot="button"].bg-primary {
  background-image: var(--mm-gradient);
  border-color: transparent;
}
button.bg-primary:hover:not(:disabled),
a.bg-primary:hover {
  filter: brightness(1.06);
}

/* ---- Loading screen: flag instead of the paperclip --------------------- */
.paperclip-thinking-icon .paperclip-thinking-icon-path { display: none !important; }
.paperclip-thinking-icon {
  background: url("/mm-brand/flag.svg") center / 62% auto no-repeat;
  animation: mm-flag-breathe 1.6s ease-in-out infinite;
}
@keyframes mm-flag-breathe {
  0%, 100% { opacity: 0.5; transform: scale(0.94); }
  50%      { opacity: 1;   transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .paperclip-thinking-icon { animation: none; }
}

/* ---- Sidebar header: wordmark alone for the Milemarker company ---------
 * Flag + name side by side is off-brand. Scoped to Milemarker's company logo
 * asset so other firms keep their own logo + name. Text stays in the DOM for
 * screen readers; only the paint changes. */
button[data-slot="dropdown-menu-trigger"] > span:has(> div > img[src*="a38632d7-125f-4693-9d2b-5e4d4de77c71"]) {
  background: url("/mm-brand/wordmark-color.svg") left center / auto 22px no-repeat;
  min-height: 24px;
}
button[data-slot="dropdown-menu-trigger"] > span:has(> div > img[src*="a38632d7-125f-4693-9d2b-5e4d4de77c71"]) > * {
  opacity: 0;
}
.dark button[data-slot="dropdown-menu-trigger"] > span:has(> div > img[src*="a38632d7-125f-4693-9d2b-5e4d4de77c71"]) {
  background-image: url("/mm-brand/wordmark-white.svg");
}

/* ---- Sign-in page: Milemarker wordmark instead of the vendor lockup ---- */
svg[viewBox="22.5 22.5 121 27"] {
  width: 108px !important;
  height: 20px !important;
  background: url("/mm-brand/wordmark-color.svg") left center / contain no-repeat;
}
svg[viewBox="22.5 22.5 121 27"] > * { display: none; }
.dark svg[viewBox="22.5 22.5 121 27"] { background-image: url("/mm-brand/wordmark-white.svg"); }

/* Sign-in page right panel: brand gradient + white flag instead of the
 * vendor's ASCII paperclip animation (a <pre> inside the half-width panel). */
div.overflow-hidden:has(> pre.select-none) {
  background: url("/mm-brand/flag-white.svg") center / 32% auto no-repeat, var(--mm-gradient);
}
div.overflow-hidden:has(> pre.select-none) > pre { visibility: hidden; }
/* Theme toggle sits over the orange panel on sign-in: make it legible. */
div.fixed.inset-0:has(pre.select-none) > .absolute.top-4.right-4 button { color: #FFFFFF; }

/* Mad Men-style agent characters (swapped in by milemarker.js on /MIL pages). */
img.mm-agent-character { border-radius: 9999px; object-fit: cover !important; }

/* ---- Bright brand orange everywhere (Jud 2026-10-16: "use the bright orange") ----
 * The patcher's orange ramp had brownish dark steps (600 #EC4A0F, 700 #C2400E,
 * 800 #9A3410). Re-anchor the scale bright, and lift the one baked dark class. */
:root {
  --color-blue-300: #FFB182;
  --color-blue-400: #FF9421;
  --color-blue-500: #FD571A;
  --color-blue-600: #FD571A;
  --color-blue-700: #F04E14;
  --color-blue-800: #E8430C;
  --color-blue-900: #D23A08;
  --color-blue-950: #A82E06;
}
.text-\[\#C2400E\] { color: #FD571A !important; }

/* Active sidebar item: the brand gradient with white label + icon. */
.bg-sidebar-accent.text-sidebar-accent-foreground {
  background-image: var(--mm-gradient) !important;
  color: #FFFFFF !important;
}
.bg-sidebar-accent.text-sidebar-accent-foreground * { color: #FFFFFF !important; }

/* Primary buttons hover: stay bright, just lift a touch. */
button.bg-primary:hover:not(:disabled), a.bg-primary:hover { filter: brightness(1.05) saturate(1.05); }
/* Large avatars animate on a <canvas> layered over the img; hide it when the
 * img has been swapped for a character so the character shows. */
*:has(> img.mm-agent-character) > canvas { display: none !important; }
img.mm-agent-character { opacity: 1 !important; visibility: visible !important; }
/* Detail-page avatar: img sits in an .invisible wrapper, canvas in a sibling
 * .absolute overlay one level up. Hide that overlay once the img is swapped. */
*:has(> * > img.mm-agent-character) > .absolute:has(canvas) { display: none !important; }