/* ============================================================================
   ORDERMATIC x CHATWOOT theme — GENERATED from packages/ui tokens.
   DO NOT EDIT — re-run infrastructure/chatwoot/scripts/build-chatwoot-theme.mjs.
   Dark cockpit rail + bright warm-paper workspace; orange ~2% on CTA/active/focus.
   Radix-based remap: n-blue→orange, n-slate→neutral, purple killed, status kept.
   ========================================================================== */

/* Self-hosted Poppins (display/headings) — the same variable woff2 the webapp
   ships (apps/webapp/public/fonts), mounted at /brand-assets/fonts. No external
   fetch (keeps the black-box posture). Body stays Chatwoot's Inter. */
@font-face {
  font-family: Poppins;
  src: url('/brand-assets/fonts/poppins-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Headings → Poppins with tight tracking (apps/webapp/DESIGN.md typography). */
h1,
h2,
h3,
[class*='page-title'],
[class~='text-xl'],
[class~='text-2xl'],
[class~='text-3xl'] {
  font-family: Poppins, ui-sans-serif, system-ui, sans-serif !important;
  letter-spacing: -0.01em;
}

/* ── ACCENT (both light + dark): blue scale → orange ramp, purple killed.
   Orange reads on light AND dark, so these are unconditional. ─────────────── */
:root {
  /* accent: blue scale -> smooth orange ramp (9=#FD5C01 · 11=#C44801 AA) */
  --blue-1: 255 248 243;
  --blue-2: 255 239 228;
  --blue-3: 255 231 214;
  --blue-4: 255 220 197;
  --blue-5: 255 203 170;
  --blue-6: 255 181 138;
  --blue-7: 251 154 99;
  --blue-8: 246 120 52;
  --blue-9: 253 92 1;
  --blue-10: 228 82 1;
  --blue-11: 196 72 1;
  --blue-12: 122 45 6;
  --n-brand: 253 92 1; /* vivid mark (underline/active glyph) */
  /* kill leftover PURPLE: iris + violet mirror the orange ramp */
  --iris-1: 255 248 243;
  --iris-2: 255 239 228;
  --iris-3: 255 231 214;
  --iris-4: 255 220 197;
  --iris-5: 255 203 170;
  --iris-6: 255 181 138;
  --iris-7: 251 154 99;
  --iris-8: 246 120 52;
  --iris-9: 253 92 1;
  --iris-10: 228 82 1;
  --iris-11: 196 72 1;
  --iris-12: 122 45 6;
  --violet-1: 255 248 243;
  --violet-2: 255 239 228;
  --violet-3: 255 231 214;
  --violet-4: 255 220 197;
  --violet-5: 255 203 170;
  --violet-6: 255 181 138;
  --violet-7: 251 154 99;
  --violet-8: 246 120 52;
  --violet-9: 253 92 1;
  --violet-10: 228 82 1;
  --violet-11: 196 72 1;
  --violet-12: 122 45 6;
}

/* ── LIGHT MODE ONLY: the bright warm-paper workspace. Scoped to :not(.dark)
   so DARK MODE FALLS THROUGH to Chatwoot's native dark theme — the light/dark
   toggle actually works instead of our overrides forcing light surfaces. ──── */
:root:not(.dark):not(:has(body.dark)) {
  /* neutral: slate scale -> warm paper -> navy ink */
  --slate-1: 250 250 248;
  --slate-2: 244 242 237;
  --slate-3: 240 238 233;
  --slate-4: 231 228 221;
  --slate-5: 224 220 212;
  --slate-6: 206 201 192;
  --slate-7: 180 176 168;
  --slate-8: 176 180 178;
  --slate-9: 107 107 107;
  --slate-10: 104 104 104;
  --slate-11: 92 92 92;
  --slate-12: 14 14 14;

  /* semantic aliases → warm PAPER page-fill (surface-1) with WHITE cards
     (surface-2 / card) + bone borders. surface-1 is the conversation list +
     message pane fill, so paper here gives content depth vs a flat white void. */
  --background-color: 248 246 241;
  --surface-1: 248 246 241;
  --surface-2: 255 255 255;
  --surface-3: 240 238 233;
  --card-color: 255 255 255;
  --border-container: 224 220 212;
  --border-strong: 212 207 197;
  --border-weak: 236 232 225;
  --label-background: 240 238 233;
  --alpha-1: 176, 172, 164, 0.22;
  --solid-blue: 255 231 214;
  --text-blue: 122 45 6;
  --border-blue: 253, 92, 1, 0.5;
  /* amber / teal / ruby (warning / success / error) intentionally untouched */
}

/* n-brand solid is hardcoded to old blue-9 → Ordermatic. Use ~= (exact class
   TOKEN) not *= — substring also catches variant tokens like after:bg-n-brand
   / hover:bg-n-brand and wrongly fills the element (the solid-tab-block bug). */
.text-n-brand,
[class~='text-n-brand'] {
  color: #c44801 !important;
} /* AA, never neon */
[class~='after:bg-n-brand']::after {
  background-color: #fd5c01 !important;
}
button[class~='bg-n-brand'],
a[class~='bg-n-brand'],
[class~='bg-n-brand'] {
  background-color: #c44801 !important;
  color: #ffffff !important; /* CTA 4.91:1 */
}
button[class~='bg-n-brand']:hover,
a[class~='bg-n-brand']:hover,
[class~='bg-n-brand']:hover {
  background-color: #ae3f01 !important;
}

/* Active filter tab / selected item: soft tint + orange text/underline, NOT a
   solid block; scoped to tab/option semantics so real CTA buttons stay solid. */
[role='tab'][aria-selected='true'],
[aria-selected='true'][class~='bg-n-brand'],
[role='option'][aria-selected='true'][class~='bg-n-brand'] {
  background-color: rgba(253, 92, 1, 0.1) !important;
  color: #c44801 !important;
  box-shadow: inset 0 -2px 0 0 #fd5c01;
}
[role='tab'][aria-selected='true'] * {
  color: #c44801 !important;
}

/* Focus: restrained orange ring on keyboard focus */
:focus-visible {
  outline: 2px solid #fd5c01 !important;
  outline-offset: 2px;
}

/* ============================================================================
   CONTENT SURFACES — "white cards on warm paper" (apps/webapp/DESIGN.md).
   Incoming message bubbles default to a flat grey (bg-n-slate-4) that reads
   muddy on the paper workspace; make them crisp WHITE cards with a bone border.
   The private-note amber and the agent/right-bubble tint keep their semantics.
   ========================================================================== */
.left-bubble {
  /* LIGHT: crisp white card on paper */
  background-color: #ffffff !important;
  border: 1px solid #e0dcd4 !important;
}
.dark .left-bubble {
  /* DARK: Chatwoot's native incoming bubble */
  background-color: rgb(var(--slate-4)) !important;
  border-color: rgb(var(--slate-5)) !important;
}

/* ============================================================================
   RAIL — RESPONDS to the light/dark toggle. LIGHT is the unconditional default
   (white sidebar, dark ink, orange active). DARK is scoped to a ".dark" ANCESTOR
   (descendant selector) so it matches whether Chatwoot toggles the class on
   html (v3app) OR body (dashboard bundle) — and its higher specificity wins in
   dark mode. (Keying light on :root:not(.dark) was the bug: with .dark on body,
   :root never has it, so the light rail leaked into dark mode.)
   ========================================================================== */

/* ── LIGHT (default): light sidebar matching the bright workspace ─────────── */
aside.bg-n-background {
  background-color: #ffffff !important;
  border-right: 1px solid #e0dcd4 !important;
}
aside.bg-n-background span,
aside.bg-n-background a,
aside.bg-n-background button,
aside.bg-n-background p,
aside.bg-n-background div,
aside.bg-n-background li {
  color: #0e0e0e !important;
}
/* CTA contents must stay white despite the dark-ink rail rule above. */
aside.bg-n-background [class~='bg-n-brand'],
aside.bg-n-background [class~='bg-n-brand'] * {
  color: #ffffff !important;
}
aside.bg-n-background svg {
  color: #5c5c5c !important;
  opacity: 1;
}
aside.bg-n-background [class*='text-n-slate-11'],
aside.bg-n-background [class*='text-n-slate-10'],
aside.bg-n-background [class*='text-n-slate-9'] {
  color: #6b6b6b !important;
}
aside.bg-n-background a:hover,
aside.bg-n-background button:hover,
aside.bg-n-background li:hover {
  background-color: #f8f6f1 !important;
  background-image: none !important;
}
aside.bg-n-background [class*='from-n-background'] {
  background-image: linear-gradient(to top, #ffffff, rgba(255, 255, 255, 0)) !important;
}
aside.bg-n-background [aria-current='page'],
aside.bg-n-background a.active,
aside.bg-n-background .is-active,
aside.bg-n-background [class*='bg-n-slate'],
aside.bg-n-background [class*='bg-n-alpha'] {
  background-color: rgba(253, 92, 1, 0.1) !important;
}
aside.bg-n-background [aria-current='page'],
aside.bg-n-background a.active,
aside.bg-n-background .is-active {
  box-shadow: inset 0 2px 0 0 #fd5c01;
  color: #0e0e0e !important;
}
aside.bg-n-background [aria-current='page'] svg,
aside.bg-n-background a.active svg,
aside.bg-n-background .is-active svg {
  color: #fd5c01 !important;
  opacity: 1;
}
aside.bg-n-background input {
  background-color: #f8f6f1 !important;
  color: #0e0e0e !important;
  border-color: #e0dcd4 !important;
}
aside.bg-n-background input::placeholder {
  color: #6b6b6b !important;
}

/* ── DARK (.dark on <html> OR <body>): the navy cockpit rail ──────────────── */
.dark aside.bg-n-background {
  background-color: #0d111a !important;
  border-right: 1px solid #1a3540 !important;
}
.dark aside.bg-n-background span,
.dark aside.bg-n-background a,
.dark aside.bg-n-background button,
.dark aside.bg-n-background p,
.dark aside.bg-n-background div,
.dark aside.bg-n-background li {
  color: #ddd5d2 !important;
}
.dark aside.bg-n-background svg {
  color: #ddd5d2 !important;
  opacity: 0.9;
}
.dark aside.bg-n-background [class*='text-n-slate-11'],
.dark aside.bg-n-background [class*='text-n-slate-10'],
.dark aside.bg-n-background [class*='text-n-slate-9'] {
  color: #999999 !important;
}
.dark aside.bg-n-background a:hover,
.dark aside.bg-n-background button:hover,
.dark aside.bg-n-background li:hover,
.dark aside.bg-n-background [class*='hover\:bg-n']:hover,
.dark aside.bg-n-background [class*='hover\:bg-gradient']:hover {
  background-color: #121e27 !important;
  background-image: none !important;
}
.dark aside.bg-n-background [class*='bg-gradient'][class*='from-n-background'],
.dark aside.bg-n-background [class*='from-n-background'] {
  background-image: linear-gradient(to top, #0d111a, rgba(13, 17, 26, 0)) !important;
}
.dark aside.bg-n-background [aria-current='page'],
.dark aside.bg-n-background a.active,
.dark aside.bg-n-background .is-active,
.dark aside.bg-n-background [class*='bg-n-alpha'],
.dark aside.bg-n-background [class*='bg-n-slate'] {
  background-color: #1a3540 !important;
}
.dark aside.bg-n-background [aria-current='page'],
.dark aside.bg-n-background a.active,
.dark aside.bg-n-background .is-active {
  box-shadow: inset 0 2px 0 0 #fd5c01;
  color: #ffffff !important;
}
.dark aside.bg-n-background [aria-current='page'] svg,
.dark aside.bg-n-background a.active svg,
.dark aside.bg-n-background .is-active svg {
  color: #fd5c01 !important;
  opacity: 1;
}
.dark aside.bg-n-background input {
  background-color: #1a3540 !important;
  color: #ddd5d2 !important;
  border-color: #1f2933 !important;
}
.dark aside.bg-n-background input::placeholder {
  color: #8a8a8a !important;
}
.dark aside.bg-n-background [class~='bg-n-brand'],
.dark aside.bg-n-background [class~='bg-n-brand'] * {
  color: #ffffff !important;
}

/* Captain (AI) mascot is a purple SVG asset (not a themeable token) —
   hue-rotate it to Ordermatic orange. Black/white parts are hueless so they
   don't move; scoped to assistant/captain images so avatars + our logo are safe. */
img[src*='assistant'],
img[src*='captain'] {
  filter: hue-rotate(122deg) saturate(1.25);
}

/* ============================================================================
   RAIL TRIM — the Ordermatic Inbox is order-triage, not all of Chatwoot. Hide
   the nav sections we don't ship (Contacts, Reports, Campaigns, Help Center,
   Settings); keep My Inbox + Conversations (and its channels). Pure CSS via
   :has() on each section's sub-item hrefs — no code fork, no script.
   ========================================================================== */
aside.bg-n-background li:has(a[href*='/contacts']),
aside.bg-n-background li:has(a[href*='/reports/']),
aside.bg-n-background li:has(a[href*='/campaigns/']),
aside.bg-n-background li:has(a[href*='/portals/']),
aside.bg-n-background li:has(a[href*='/settings/']) {
  display: none !important;
}

/* ============================================================================
   SUPER-ADMIN CONSOLE — a separate Rails layout that uses the LEGACY Tailwind
   "woot" palette (hardcoded blue), not the Vue n-* tokens. Recolor woot to orange.
   (Harmless to the agent app, which uses n-* not woot.)
   ========================================================================== */
[class~='bg-woot-500'] {
  background-color: #c44801 !important;
}
[class~='bg-woot-600'],
[class~='hover:bg-woot-600']:hover {
  background-color: #ae3f01 !important;
}
[class~='bg-woot-25'] {
  background-color: #f0f0ed !important;
} /* large-area tint → warm neutral, not peachy */
[class~='text-woot-500'],
[class~='text-woot-600'] {
  color: #c44801 !important;
}
[class~='text-woot-700'] {
  color: #983700 !important;
}
[class~='border-woot-500'] {
  border-color: #c44801 !important;
}
[class~='ring-woot-500'] {
  --tw-ring-color: #fd5c01 !important;
}

/* ============================================================================
   WHITE-LABEL: hide Chatwoot upsell / off-brand links. DISABLE_ENTERPRISE=true
   removes the EE code paths, but a few UNGATED bits still render — billing /
   "Upgrade now" / "Manage" links (hub.2.chatwoot.com/billing), the Discord
   "Community Support" button, the agent app's docs/changelog/feature links, and
   the super-admin Features grid's "EE" badge + hover "Switch to Enterprise
   edition" button. Overlay display:none — NOT a code fork; the pinned image
   (v4.16.2) keeps these selectors stable. Verified: matches the upsell markup,
   not internal (/app/…) links, ordermatic.co, or a bare text-xxs badge. */
a[href*='chatwoot.com'],
a[href*='chatwoot.help'],
a[href*='discord.gg'] {
  display: none !important;
}
span[class~='text-xxs'][class~='bg-green-100/70'],
[class~='invisible'][class~='group-hover:visible'][class~='top-5'] {
  display: none !important;
}