/* Manage portal theme: design tokens for Light / Dark, the page background,
   the shared Brain launcher position and the few component bindings that
   cannot be expressed as a token swap.

   Loaded only by manage/base.html, which sets <html data-portal="manage"
   data-theme="light|dark"> on the server (manage_user_theme()). Every rule is
   scoped to html[data-portal="manage"], so the Field portal (which shares
   app_v3/base.html and app_v2.css) never matches anything here.

   Dark = the Manage portal as it looked before themes (dark glass sidebar and
   My Work blocks, light page content) plus the background image. Component
   CSS reads these tokens with the old literal as the var() fallback, so a
   token missing from the dark set means "exactly the old value".

   Some token names already exist app-wide (app_v2.css: --accent, --accent-soft,
   --border, --text-primary, --text-muted, --scrollbar-thumb, ...). Their
   meaning there is "light page content", which is still true in Dark, so Dark
   leaves them untouched and only Light redefines them. */

/* ------------------------------------------------------------------ Dark */

html[data-portal="manage"][data-theme="dark"] {
  /* Solid page background (no photo) + "light in fiber" lines (fiber-lines.js).
     --card-bg is defined only; the glass panels keep their translucent tokens. */
  --page-bg: #1E1F22;
  --card-bg: #2A2B2F;
  --fiber-core: #FFB066;
  --fiber-glow: rgba(255, 122, 26, 0.9);
  --fiber-blur: 14;
  --bg-page: var(--page-bg);
  --bg-image: none;

  --surface-sidebar: rgba(35, 33, 38, 0.9);
  --surface-main: rgba(35, 33, 38, 0.9);   /* My Work blocks */
  --surface-main-solid: #39373c;           /* same, without glass (<= 960px) */
  --surface-content: #fff;                 /* central block of the other pages */
  --surface-card: #fff;
  --surface-raised: #fff;
  --surface-input: #fff;
  --surface-input-disabled: #f6f5f7;
  --surface-hover: #f2f2f2;
  --surface-active: #ff681f;
  --surface-menu: rgba(30, 28, 33, 0.96);
  --surface-popover: rgba(28, 27, 31, 0.96);
  --border-strong: #dcd9df;
  --text-on-accent: #fff;
  --accent-text: #ff9a62;
  --accent-text-chrome: #ff9a62;
  --focus-ring: 0 0 0 3px rgba(255, 104, 31, 0.18);
  --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.05);
  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.18);

  /* Text and lines on the dark chrome (sidebar, My Work blocks, menus). */
  --chrome-scheme: dark;
  --chrome-strong: #fff;
  --chrome-text: rgba(255, 255, 255, 0.92);
  --chrome-text-2: rgba(255, 255, 255, 0.86);
  --chrome-subtle: rgba(255, 255, 255, 0.5);
  --chrome-faint: rgba(255, 255, 255, 0.42);
  --chrome-disabled: rgba(255, 255, 255, 0.3);
  --chrome-icon: rgba(226, 226, 232, 0.68);
  --chrome-icon-hover: rgba(255, 255, 255, 0.94);
  --chrome-line: rgba(255, 255, 255, 0.1);
  --chrome-raised-line: rgba(255, 255, 255, 0.09);
  --chrome-inset: rgba(0, 0, 0, 0.14);
  --chrome-focus: rgba(255, 255, 255, 0.85);
  --active-text: #fff;
  --active-shadow: 0 4px 14px rgba(255, 104, 31, 0.24);
  --menu-text: rgba(255, 255, 255, 0.88);
  --menu-icon: rgba(226, 226, 232, 0.7);
  --menu-hover: rgba(255, 104, 31, 0.16);
  --menu-hover-text: #fff;
  --menu-hover-icon: #ff8a4c;
  --menu-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
  --popover-text: #fff;
  --popover-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --avatar-bg: rgba(255, 104, 31, 0.18);
  --avatar-text: #ffb38f;
  --card-line: #e6e9ee;
  --card-line-soft: #eef0f3;
  --card-line-hover: #c9d1da;
  --card-hover-shadow: 0 2px 8px rgba(17, 24, 39, 0.08);
  --event-bg: rgba(255, 255, 255, 0.08);
  --event-line: rgba(255, 255, 255, 0.08);
  --today-ring: inset 0 0 0 1px rgba(255, 104, 31, 0.55);
  --content-line: rgba(255, 255, 255, 0.1);
  --content-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  /* Not defined in Dark on purpose (they stand for several slightly different
     alphas, each kept by its own fallback): --chrome-hover, --chrome-hover-strong,
     --chrome-muted, --chrome-raised, --chrome-divider, --chrome-control-line,
     --chrome-scroll. */

  --calendar-weekend: transparent;

  /* Launcher: the dark raised surface of the Brain chat, border only. */
  --launcher-bg: #2a262c;
  --launcher-line: rgba(255, 255, 255, 0.14);
  --launcher-icon: #f3efea;

  /* Page content stays light in Dark (as before), so native controls stay light;
     the dark chrome containers opt into dark controls via --chrome-scheme. */
  color-scheme: light;
}

/* ----------------------------------------------------------------- Light */

html[data-portal="manage"][data-theme="light"] {
  /* Solid page background (no photo) + "light in fiber" lines (fiber-lines.js).
     --card-bg is defined only; the glass panels keep their translucent tokens. */
  --page-bg: #F4F3F0;
  --card-bg: #FFFFFF;
  --fiber-core: #FF7A1A;
  --fiber-glow: rgba(255, 122, 26, 0.55);
  --fiber-blur: 8;
  --bg-page: var(--page-bg);
  --bg-image: none;

  --surface-sidebar: #fcfbf9;
  --surface-main: #fcfbf9;
  --surface-main-solid: #fcfbf9;
  --surface-content: #fcfbf9;
  --surface-card: #f6f4f1;
  --surface-raised: #ffffff;
  --surface-input: #ffffff;
  --surface-input-disabled: #f3f1ee;
  --surface-hover: #f1eeea;
  --calendar-weekend: #f2f0ec;
  --surface-active: var(--accent-soft);   /* existing accent #ff5a00 at 12% */
  --surface-menu: #ffffff;
  --surface-popover: #ffffff;
  --border: #eae6e1;
  --border-strong: #dcd7d0;
  --text-primary: #24211e;
  --text-secondary: #5c5752;
  --text-muted: #8e8882;
  --text-on-accent: #fff;
  /* --accent / --accent-hover keep their existing values (app_v2.css). */
  --accent-soft: rgba(255, 90, 0, 0.12);
  --accent-text: #b9561e;
  --accent-text-chrome: #b9561e;
  --focus-ring: 0 0 0 3px rgba(255, 90, 0, 0.28);
  --shadow-sm: 0 1px 2px rgba(30, 25, 20, 0.05);
  --shadow-md: 0 4px 12px rgba(30, 25, 20, 0.07);
  --shadow-lg: 0 12px 32px rgba(30, 25, 20, 0.1);
  --scrollbar-thumb: #d8d3cc;
  --scrollbar-thumb-hover: #c9c3bb;

  /* Existing app-wide tokens used by the page stylesheets. */
  --bg: var(--bg-page);
  --surface: var(--surface-raised);
  --surface2: var(--surface-hover);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --border-hover: var(--border-strong);
  --panel-dark: var(--text-primary);

  /* The former dark chrome, now light. */
  --chrome-scheme: light;
  --chrome-strong: var(--text-primary);
  --chrome-text: var(--text-primary);
  --chrome-text-2: var(--text-secondary);
  --chrome-subtle: var(--text-muted);
  --chrome-muted: var(--text-secondary);
  --chrome-faint: var(--text-muted);
  --chrome-disabled: #b5afa8;
  --chrome-icon: var(--text-secondary);
  --chrome-icon-hover: var(--text-primary);
  --chrome-hover: var(--surface-hover);
  --chrome-hover-strong: #ebe7e2;
  --chrome-line: var(--border);
  --chrome-divider: var(--border);
  --chrome-control-line: var(--border-strong);
  --chrome-raised: var(--surface-card);
  --chrome-raised-line: var(--border);
  --chrome-inset: var(--surface-card);
  --chrome-focus: #ff5a00;
  --chrome-scroll: var(--scrollbar-thumb);
  --active-text: #b9561e;
  --active-shadow: none;
  --menu-text: var(--text-primary);
  --menu-icon: var(--text-secondary);
  --menu-hover: var(--surface-hover);
  --menu-hover-text: var(--text-primary);
  --menu-hover-icon: #b9561e;
  --menu-shadow: var(--shadow-lg);
  --popover-text: var(--text-primary);
  --popover-shadow: var(--shadow-md), 0 0 0 1px var(--border);
  --avatar-bg: var(--surface-hover);
  --avatar-text: var(--text-secondary);
  --card-line: var(--border);
  --card-line-soft: var(--border);
  --card-line-hover: var(--border-strong);
  --card-hover-shadow: var(--shadow-md);
  --event-bg: var(--surface-raised);
  --event-line: var(--border);
  --today-ring: none;
  --content-line: var(--border);
  --content-shadow: var(--shadow-md);

  --launcher-bg: var(--surface-raised);
  --launcher-line: var(--border);
  --launcher-icon: var(--text-primary);

  color-scheme: light;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

/* --------------------------------------------------------- Shared rules */

html[data-portal="manage"] ::selection {
  background: rgba(255, 90, 0, 0.22);
}

/* Theme switch: a short colour fade, added by manage_profile.js for ~250 ms
   only, so it never replaces the components' own transitions otherwise. */
html[data-portal="manage"].mp-theme-switching,
html[data-portal="manage"].mp-theme-switching *,
html[data-portal="manage"].mp-theme-switching *::before,
html[data-portal="manage"].mp-theme-switching *::after {
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease !important;
}

/* Brain launcher: one position for every Manage page (My Work's: 20px inside
   the central block's bottom-right corner = 12px gap + 20px). Phones/tablets:
   16px from the corner. right/bottom add the safe-area insets (ai_chat.css:
   right = gap + --safe-right, bottom = gap + --safe-bottom + --aic-lift, where
   --aic-lift only lifts it above a toast/tray docked in that corner). */
html[data-portal="manage"] body.manage-portal .aic-widget {
  --aic-gap: 32px;
}

@media (max-width: 960px) {
  html[data-portal="manage"] body.manage-portal .aic-widget {
    --aic-gap: 16px;
  }
}

html[data-portal="manage"] body.manage-portal .aic-launcher {
  position: fixed;
  border-color: var(--launcher-line, rgba(255, 255, 255, 0.1));
  background: var(--launcher-bg, rgba(35, 33, 38, 0.9));
}

html[data-portal="manage"] body.manage-portal .aic-launcher__close {
  color: var(--launcher-icon, #fff);
}

html[data-portal="manage"] body.manage-portal .aic-launcher__dot {
  border-color: var(--launcher-bg, #232126);
}

html[data-portal="manage"][data-theme="light"] body.manage-portal .aic-launcher {
  box-shadow: var(--shadow-md);
}

html[data-portal="manage"][data-theme="light"] body.manage-portal .aic-launcher:hover {
  box-shadow: var(--shadow-lg);
}

/* --------------------------------------------- Edit Profile: Appearance */

.mp-theme-switch {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  align-self: flex-start;
  padding: 4px;
  border: 1px solid var(--mp-theme-switch-line, #dcd9df);
  border-radius: 12px;
  background: var(--mp-theme-switch-bg, #f6f5f7);
}

.mp-theme-switch__opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 104px;
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--mp-theme-switch-text, #6b6870);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.mp-theme-switch__opt:hover {
  color: var(--mp-theme-switch-text-on, #1d1b20);
}

.mp-theme-switch__opt[aria-checked="true"] {
  background: var(--mp-theme-switch-on, #fff);
  color: var(--mp-theme-switch-text-on, #1d1b20);
  box-shadow: 0 1px 3px rgba(17, 17, 17, 0.12);
}

.mp-theme-switch__opt[aria-checked="true"] .mp-theme-switch__icon {
  color: #ff681f;
}

.mp-theme-switch__opt:focus-visible {
  outline: 2px solid #ff681f;
  outline-offset: 2px;
}

.mp-theme-switch__icon {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
}

/* ------------------------------------------- Light: component bindings */

/* Edit Profile dialog (already light; warm it up and use the tokens). */
html[data-portal="manage"][data-theme="light"] {
  --mp-theme-switch-line: var(--border-strong);
  --mp-theme-switch-bg: var(--surface-input-disabled);
  --mp-theme-switch-on: var(--surface-raised);
  --mp-theme-switch-text: var(--text-secondary);
  --mp-theme-switch-text-on: var(--text-primary);
}

html[data-portal="manage"][data-theme="light"] .mp-profile-modal__dialog {
  background: var(--surface-raised);
  color: var(--text-primary);
  box-shadow: var(--shadow-lg);
}

html[data-portal="manage"][data-theme="light"] .mp-profile-modal__backdrop {
  background: rgba(36, 33, 30, 0.32);
}

html[data-portal="manage"][data-theme="light"] .mp-profile-modal__subtitle,
html[data-portal="manage"][data-theme="light"] .mp-profile-crop__zoom {
  color: var(--text-secondary);
}

html[data-portal="manage"][data-theme="light"] .mp-profile-field__label {
  color: var(--text-secondary);
}

html[data-portal="manage"][data-theme="light"] .mp-profile-field__hint,
html[data-portal="manage"][data-theme="light"] .mp-profile-modal__hint {
  color: var(--text-secondary);
}

html[data-portal="manage"][data-theme="light"] .mp-profile-field__input,
html[data-portal="manage"][data-theme="light"] .mp-profile-modal__photo-btn,
html[data-portal="manage"][data-theme="light"] .mp-profile-modal__btn:not(.mp-profile-modal__btn--primary) {
  border-color: var(--border-strong);
  background: var(--surface-input);
  color: var(--text-primary);
}

html[data-portal="manage"][data-theme="light"] .mp-profile-field__input::placeholder {
  color: var(--text-muted);
}

html[data-portal="manage"][data-theme="light"] .mp-profile-field__input:focus {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

html[data-portal="manage"][data-theme="light"] .mp-profile-field__input[readonly] {
  background: var(--surface-input-disabled);
  color: var(--text-secondary);
}

html[data-portal="manage"][data-theme="light"] .mp-profile-modal__btn:not(.mp-profile-modal__btn--primary):hover:not(:disabled) {
  background: var(--surface-hover);
}

html[data-portal="manage"][data-theme="light"] .mp-profile-modal__avatar {
  background: var(--accent-soft);
  color: var(--accent-text);
  box-shadow: 0 0 0 1px var(--border);
}

/* Sidebar + My Work blocks: frosted glass in both themes (see "Glass" at the
   end of this file; the Light-only "no blur" rules that were here are gone). */

/* My Work (light): calendar "today" + weekend columns, event chips. */
html[data-portal="manage"][data-theme="light"] .mp-main--mywork .mp-cal__mini-day:nth-child(7n + 6),
html[data-portal="manage"][data-theme="light"] .mp-main--mywork .mp-cal__mini-day:nth-child(7n) {
  background: var(--calendar-weekend);
}

html[data-portal="manage"][data-theme="light"] .mp-main--mywork .mp-cal__mini-day:hover {
  background: var(--surface-hover);
}

html[data-portal="manage"][data-theme="light"] .mp-main--mywork .mp-cal__mini-day.is-today {
  background: var(--accent-soft);
  color: var(--accent-text);
}

html[data-portal="manage"][data-theme="light"] .mp-main--mywork .mp-cal__mini-day.is-selected,
html[data-portal="manage"][data-theme="light"] .mp-main--mywork .mp-cal__mini-day.is-selected:hover {
  background: #ff681f;
  color: var(--text-on-accent);
}

html[data-portal="manage"][data-theme="light"] .mp-main--mywork .mp-cal__allday-chip {
  background: var(--accent-soft);
  color: var(--accent-text);
}

html[data-portal="manage"][data-theme="light"] .mp-main--mywork .mp-cal__event {
  box-shadow: var(--shadow-sm);
}

html[data-portal="manage"][data-theme="light"] .mp-main--mywork .mp-cal__event:hover {
  background: var(--surface-hover);
}

html[data-portal="manage"][data-theme="light"] .mp-main--mywork .mp-cal__event.is-selected {
  background: var(--accent-soft);
}

html[data-portal="manage"][data-theme="light"] .mp-main--mywork .mp-cal__today-btn:hover {
  background: var(--accent-soft);
  color: var(--accent-text);
}

/* My Work cards: --surface-card with a 1px --border; stat tiles inside them
   lift off with --surface-raised + 1px --border. */
html[data-portal="manage"][data-theme="light"] .mp-main--mywork .mp-count-card {
  border-color: var(--border);
  background: var(--surface-card);
}

html[data-portal="manage"][data-theme="light"] .mp-main--mywork .mp-count-card__stat {
  border: 1px solid var(--border);
  background: var(--surface-raised);
}

/* Unstyled native controls and tables inside Manage content (zero
   specificity, so every page's own styles still win). */
:where(html[data-portal="manage"][data-theme="light"]) :where(.mp-main, .mp-modal, .aic-root) :where(input, select, textarea)::placeholder {
  color: var(--text-muted);
}

:where(html[data-portal="manage"][data-theme="light"]) :where(.mp-main) :where(th) {
  border-color: var(--border-strong);
}

/* ------------------------------------------- Status palette + dark content */

/* Shared status palette (OSP Reports, JSA, ...): 4 tokens per status -- card
   background tint / card border / badge chip / badge + hue text. Light values;
   any page whose content stays light in Dark keeps them too. */
html[data-portal="manage"] {
  --st-new-production-bg: #f1f8f8;
  --st-new-production-border: #d3e9e9;
  --st-new-production-chip: #ddf0ef;
  --st-new-production-text: #1f6b68;
  --st-in-progress-bg: #f2f6fd;
  --st-in-progress-border: #d7e3f8;
  --st-in-progress-chip: #e1eafb;
  --st-in-progress-text: #2f5bb7;
  --st-resubmitted-bg: #f6f3fd;
  --st-resubmitted-border: #e3daf7;
  --st-resubmitted-chip: #ebe3fb;
  --st-resubmitted-text: #6a45b8;
  --st-rejected-bg: #fdf3f2;
  --st-rejected-border: #f5d9d6;
  --st-rejected-chip: #fbe3e0;
  --st-rejected-text: #b4372e;
  --st-manager-approval-bg: #fdf6ee;
  --st-manager-approval-border: #f3e1c8;
  --st-manager-approval-chip: #fbe9d3;
  --st-manager-approval-text: #9a5a12;
  --st-ready-for-payment-bg: #f1f8f3;
  --st-ready-for-payment-border: #d3eadb;
  --st-ready-for-payment-chip: #ddf1e4;
  --st-ready-for-payment-text: #237a4e;
  --st-neutral-bg: #ffffff;
  --st-neutral-border: #eae6e1;
  --st-neutral-chip: #f1eeea;
  --st-neutral-text: #5c5752;
}

/* Light: more saturated status values (the html-level values above stay
   for pages whose content is light in Dark, e.g. ISP Reports, so Dark is
   unchanged). Neutral is unchanged. */
html[data-portal="manage"][data-theme="light"] {
  --st-new-production-bg: #e3f4f3;
  --st-new-production-border: #a9ddd9;
  --st-new-production-chip: #c6ebe8;
  --st-new-production-text: #156460;
  --st-in-progress-bg: #e8f0fe;
  --st-in-progress-border: #b4ccf5;
  --st-in-progress-chip: #cfdffb;
  --st-in-progress-text: #2450a8;
  --st-resubmitted-bg: #efe9fd;
  --st-resubmitted-border: #cdbdf3;
  --st-resubmitted-chip: #ddd1fa;
  --st-resubmitted-text: #5b37a8;
  --st-rejected-bg: #fde9e7;
  --st-rejected-border: #f2b8b2;
  --st-rejected-chip: #f9d3ce;
  --st-rejected-text: #a92f26;
  --st-manager-approval-bg: #fdf0df;
  --st-manager-approval-border: #f0cc97;
  --st-manager-approval-chip: #f9dfb8;
  --st-manager-approval-text: #8a4e0c;
  --st-ready-for-payment-bg: #e4f4ea;
  --st-ready-for-payment-border: #a9dbbb;
  --st-ready-for-payment-chip: #c9ebd5;
  --st-ready-for-payment-text: #1d6e45;
}

/* One mapping from an element's status key to the generic --st-bg / -border /
   -chip / -text its component reads (cards, lanes, badges and selects carry
   data-status-key; OSP's header counters carry .bv-col-badge--<key>).
   Unknown / empty status -> neutral. */
[data-status-key],
.bv-col-badge {
  --st-bg: var(--st-neutral-bg);
  --st-border: var(--st-neutral-border);
  --st-chip: var(--st-neutral-chip);
  --st-text: var(--st-neutral-text);
}

[data-status-key="new"], .bv-col-badge--new {
  --st-bg: var(--st-new-production-bg);
  --st-border: var(--st-new-production-border);
  --st-chip: var(--st-new-production-chip);
  --st-text: var(--st-new-production-text);
}

[data-status-key="progress"], .bv-col-badge--progress {
  --st-bg: var(--st-in-progress-bg);
  --st-border: var(--st-in-progress-border);
  --st-chip: var(--st-in-progress-chip);
  --st-text: var(--st-in-progress-text);
}

[data-status-key="resubmitted"], .bv-col-badge--resubmitted {
  --st-bg: var(--st-resubmitted-bg);
  --st-border: var(--st-resubmitted-border);
  --st-chip: var(--st-resubmitted-chip);
  --st-text: var(--st-resubmitted-text);
}

[data-status-key="rejected"], .bv-col-badge--rejected {
  --st-bg: var(--st-rejected-bg);
  --st-border: var(--st-rejected-border);
  --st-chip: var(--st-rejected-chip);
  --st-text: var(--st-rejected-text);
}

[data-status-key="manager"], .bv-col-badge--manager {
  --st-bg: var(--st-manager-approval-bg);
  --st-border: var(--st-manager-approval-border);
  --st-chip: var(--st-manager-approval-chip);
  --st-text: var(--st-manager-approval-text);
}

[data-status-key="ready"], [data-status-key="paid"],
.bv-col-badge--ready, .bv-col-badge--paid {
  --st-bg: var(--st-ready-for-payment-bg);
  --st-border: var(--st-ready-for-payment-border);
  --st-chip: var(--st-ready-for-payment-chip);
  --st-text: var(--st-ready-for-payment-text);
}

/* Dark page content. In Dark the portal keeps page content light; a page that
   is themed for dark content opts in with .mp-main--dark-content (manage_main_class)
   and gets dark values for the base tokens (and the older names some page
   stylesheets still read, incl. .mp-topbar's crumb) plus the dark status palette. */
html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content,
html[data-portal="manage"][data-theme="dark"] .aic-widget,
html[data-portal="manage"][data-theme="dark"] .tk-popover {
  color-scheme: dark;
  --surface-content: #1c191e;
  --surface-card: #232026;
  --surface-raised: #2a262c;
  --surface-input: #1f1c21;
  --surface-input-disabled: #262329;
  --surface-hover: #302c33;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --border-hover: rgba(255, 255, 255, 0.14);
  --text-primary: #f3efea;
  --text-secondary: #b3aca5;
  --text-muted: #8a837d;
  --accent-soft: rgba(238, 122, 59, 0.18);
  --accent-border: rgba(238, 122, 59, 0.42);
  --accent-text: #f29a62;
  --focus-ring: 0 0 0 3px rgba(238, 122, 59, 0.28);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45);
  --bg: #1f1c21;
  --surface: #2a262c;
  --surface2: #302c33;
  --text: #f3efea;
  --muted: #b3aca5;

  --st-new-production-bg: rgba(56, 178, 172, 0.1);
  --st-new-production-border: rgba(56, 178, 172, 0.28);
  --st-new-production-chip: rgba(56, 178, 172, 0.2);
  --st-new-production-text: #6fd3cc;
  --st-in-progress-bg: rgba(91, 141, 239, 0.1);
  --st-in-progress-border: rgba(91, 141, 239, 0.28);
  --st-in-progress-chip: rgba(91, 141, 239, 0.2);
  --st-in-progress-text: #8fb0f5;
  --st-resubmitted-bg: rgba(150, 110, 240, 0.1);
  --st-resubmitted-border: rgba(150, 110, 240, 0.28);
  --st-resubmitted-chip: rgba(150, 110, 240, 0.2);
  --st-resubmitted-text: #b9a0f5;
  --st-rejected-bg: rgba(240, 106, 94, 0.1);
  --st-rejected-border: rgba(240, 106, 94, 0.28);
  --st-rejected-chip: rgba(240, 106, 94, 0.2);
  --st-rejected-text: #ff8f84;
  --st-manager-approval-bg: rgba(232, 160, 70, 0.1);
  --st-manager-approval-border: rgba(232, 160, 70, 0.28);
  --st-manager-approval-chip: rgba(232, 160, 70, 0.2);
  --st-manager-approval-text: #f2b76a;
  --st-ready-for-payment-bg: rgba(69, 192, 138, 0.1);
  --st-ready-for-payment-border: rgba(69, 192, 138, 0.28);
  --st-ready-for-payment-chip: rgba(69, 192, 138, 0.2);
  --st-ready-for-payment-text: #6fd6a4;
  --st-neutral-bg: #2a262c;
  --st-neutral-border: rgba(255, 255, 255, 0.08);
  --st-neutral-chip: #302c33;
  --st-neutral-text: #b3aca5;
}

/* ------------------------------------------------------ TechCom Brain chat */

/* The floating chat (mini window + expanded view) on the theme tokens. In
   Light the global tokens apply; in Dark .aic-widget shares the dark-content
   values above. ai_chat.css is left untouched: every rule here is prefixed
   with html[data-portal="manage"] .aic-widget, so it outranks the component
   rules, and the Field portal never matches. Visual only. */
html[data-portal="manage"] .aic-widget {
  --aic-code-bg: #f3f1ee;
  --aic-window-shadow: var(--shadow-lg);
  --aic-composer-shadow: var(--shadow-sm);
  --aic-rec-ring: rgba(180, 55, 46, 0.32);
  --aic-drop-bg: rgba(255, 255, 255, 0.92);
  --aic-scroll-thumb: var(--border-strong);
}

html[data-portal="manage"][data-theme="dark"] .aic-widget {
  --aic-code-bg: #1a171c;
  --aic-window-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
  --aic-composer-shadow: none;
  --aic-rec-ring: rgba(255, 143, 132, 0.3);
  --aic-drop-bg: rgba(28, 25, 30, 0.92);
}

/* Launcher (the round button under the mini window): Dark = border only. */
html[data-portal="manage"][data-theme="dark"] body.manage-portal .aic-launcher,
html[data-portal="manage"][data-theme="dark"] body.manage-portal .aic-launcher:hover {
  box-shadow: none;
}

/* Surfaces: mini window = raised; expanded = page main; history = panel. */
html[data-portal="manage"] .aic-widget .aic-root {
  background: var(--surface-raised);
  color: var(--text-primary);
}

html[data-portal="manage"] .aic-widget:not(.is-expanded) .aic-root {
  border-color: var(--border);
  box-shadow: var(--aic-window-shadow);
}

html[data-portal="manage"] .aic-widget.is-expanded .aic-root,
html[data-portal="manage"] .aic-widget .aic-memory {
  background: var(--surface-content);
}

html[data-portal="manage"] .aic-widget:not(.is-expanded) .aic-memory {
  background: var(--surface-raised);
}

html[data-portal="manage"] .aic-widget .aic-sidebar {
  border-right-color: var(--border);
  background: var(--surface-card);
}

html[data-portal="manage"] .aic-widget .aic-header,
html[data-portal="manage"] .aic-widget .aic-memory__bar {
  border-bottom-color: var(--border);
}

/* Logos: the plain theme mark, no tile. The PNG has ~26% transparent margin
   per side, so the image is scaled uniformly past it inside the clipped box
   (the mark fills ~82% of 28px / 48px; never stretched). */
html[data-portal="manage"] .aic-widget .aic-logo--header,
html[data-portal="manage"] .aic-widget .aic-logo--welcome {
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

html[data-portal="manage"] .aic-widget .aic-logo--header { width: 28px; height: 28px; }
html[data-portal="manage"] .aic-widget .aic-logo--welcome { width: 48px; height: 48px; margin-bottom: 10px; }

html[data-portal="manage"] .aic-widget .aic-logo--header img,
html[data-portal="manage"] .aic-widget .aic-logo--welcome img {
  width: 170%;
  object-fit: contain;
  filter: none;
}

/* Header text. */
html[data-portal="manage"] .aic-widget .aic-model__btn {
  color: var(--text-primary);
  font-weight: 700;
}

html[data-portal="manage"] .aic-widget .aic-model__btn:hover:not(:disabled),
html[data-portal="manage"] .aic-widget .aic-model__btn[aria-expanded="true"] {
  background: var(--surface-hover);
}

html[data-portal="manage"] .aic-widget .aic-header__title,
html[data-portal="manage"] .aic-widget .aic-model__chevron {
  color: var(--text-secondary);
}

/* Icon buttons (header, composer, history, viewer): transparent, hover surface. */
html[data-portal="manage"] .aic-widget .aic-icon-btn {
  background: transparent;
  color: var(--text-secondary);
}

html[data-portal="manage"] .aic-widget .aic-icon-btn:hover:not(:disabled),
html[data-portal="manage"] .aic-widget .aic-icon-btn:focus-visible,
html[data-portal="manage"] .aic-widget .aic-icon-btn.is-active {
  background: var(--surface-hover);
  color: var(--text-primary);
}

html[data-portal="manage"] .aic-widget .aic-header .aic-icon-btn,
html[data-portal="manage"] .aic-widget .aic-sidebar__head .aic-icon-btn {
  border-radius: 50%;
}

@media (min-width: 601px) {
  html[data-portal="manage"] .aic-widget .aic-header .aic-icon-btn {
    width: 32px;
    height: 32px;
  }
}

/* Welcome. */
html[data-portal="manage"] .aic-widget .aic-welcome .mp-eyebrow { color: var(--text-secondary); }
html[data-portal="manage"] .aic-widget .aic-welcome h3 { color: var(--text-primary); }

/* Temporary chat: neutral dashed chip; active = accent. The header pill only
   shows while a temporary chat is on, so it wears the active look. */
html[data-portal="manage"] .aic-widget .aic-temp-toggle {
  border-color: var(--border-strong);
  color: var(--text-secondary);
}

html[data-portal="manage"] .aic-widget .aic-temp-toggle[aria-pressed="true"],
html[data-portal="manage"] .aic-widget .aic-temp-pill {
  border: 1px dashed var(--accent);
  background: var(--accent-soft);
  color: var(--accent-text);
}

html[data-portal="manage"] .aic-widget .aic-temp-note {
  border-color: var(--border-strong);
  color: var(--text-secondary);
}

/* History. */
html[data-portal="manage"] .aic-widget .aic-sidebar__title,
html[data-portal="manage"] .aic-widget .aic-sidebar__empty {
  color: var(--text-secondary);
}

html[data-portal="manage"] .aic-widget .aic-new {
  border: 1px solid var(--border);
  background: var(--surface-raised);
  color: var(--text-primary);
  font-weight: 600;
}

html[data-portal="manage"] .aic-widget .aic-new:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  color: var(--text-primary);
}

html[data-portal="manage"] .aic-widget .aic-root.is-temporary .aic-new--temp {
  border-color: var(--accent-border, rgba(255, 90, 0, 0.32));
  background: var(--accent-soft);
  color: var(--accent-text);
}

html[data-portal="manage"] .aic-widget .aic-convo-list,
html[data-portal="manage"] .aic-widget .aic-thread,
html[data-portal="manage"] .aic-widget .aic-memory__body,
html[data-portal="manage"] .aic-widget .aic-model__menu {
  scrollbar-width: thin;
  scrollbar-color: var(--aic-scroll-thumb) transparent;
}

html[data-portal="manage"] .aic-widget .aic-convo-list::-webkit-scrollbar,
html[data-portal="manage"] .aic-widget .aic-thread::-webkit-scrollbar,
html[data-portal="manage"] .aic-widget .aic-memory__body::-webkit-scrollbar,
html[data-portal="manage"] .aic-widget .aic-model__menu::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

html[data-portal="manage"] .aic-widget .aic-convo-list::-webkit-scrollbar-track,
html[data-portal="manage"] .aic-widget .aic-thread::-webkit-scrollbar-track,
html[data-portal="manage"] .aic-widget .aic-memory__body::-webkit-scrollbar-track,
html[data-portal="manage"] .aic-widget .aic-model__menu::-webkit-scrollbar-track {
  background: transparent;
}

html[data-portal="manage"] .aic-widget .aic-convo-list::-webkit-scrollbar-thumb,
html[data-portal="manage"] .aic-widget .aic-thread::-webkit-scrollbar-thumb,
html[data-portal="manage"] .aic-widget .aic-memory__body::-webkit-scrollbar-thumb,
html[data-portal="manage"] .aic-widget .aic-model__menu::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: var(--aic-scroll-thumb);
}

html[data-portal="manage"] .aic-widget .aic-convo { border-radius: 10px; }

html[data-portal="manage"] .aic-widget .aic-convo:hover,
html[data-portal="manage"] .aic-widget .aic-convo:focus-within {
  background: var(--surface-hover);
}

html[data-portal="manage"] .aic-widget .aic-convo__open {
  color: var(--text-primary);
  font-size: 14px;
}

html[data-portal="manage"] .aic-widget .aic-convo.is-active {
  background: var(--accent-soft);
  box-shadow: none;
}

html[data-portal="manage"] .aic-widget .aic-convo.is-active .aic-convo__open {
  color: var(--accent-text);
  font-weight: 600;
}

html[data-portal="manage"] .aic-widget .aic-convo__more { color: var(--text-secondary); }

html[data-portal="manage"] .aic-widget .aic-convo__more:hover,
html[data-portal="manage"] .aic-widget .aic-convo.is-menu-open .aic-convo__more {
  background: var(--surface-hover);
  color: var(--text-primary);
}

/* Popovers: model menu, history row menu. */
html[data-portal="manage"] .aic-widget .aic-model__menu,
html[data-portal="manage"] .aic-widget .aic-convo-menu {
  border-color: var(--border);
  background: var(--surface-raised);
  color: var(--text-primary);
  box-shadow: var(--shadow-lg);
}

html[data-portal="manage"] .aic-widget .aic-model__option:hover,
html[data-portal="manage"] .aic-widget .aic-model__option.is-highlighted,
html[data-portal="manage"] .aic-widget .aic-convo-menu__item:hover,
html[data-portal="manage"] .aic-widget .aic-convo-menu__item:focus-visible {
  background: var(--surface-hover);
}

html[data-portal="manage"] .aic-widget .aic-model__option[aria-selected="true"] .aic-model__option-name { color: var(--accent-text); }
html[data-portal="manage"] .aic-widget .aic-model__option[aria-selected="true"]::after { border-color: var(--accent-text); }
html[data-portal="manage"] .aic-widget .aic-model__option-desc { color: var(--text-secondary); }
html[data-portal="manage"] .aic-widget .aic-convo-menu__item { color: var(--text-primary); }
html[data-portal="manage"] .aic-widget .aic-convo-menu__item svg { color: var(--text-secondary); }

html[data-portal="manage"] .aic-widget .aic-convo-menu__item--danger,
html[data-portal="manage"] .aic-widget .aic-convo-menu__item--danger svg {
  color: var(--st-rejected-text);
}

html[data-portal="manage"] .aic-widget .aic-convo-menu__item--danger:hover,
html[data-portal="manage"] .aic-widget .aic-convo-menu__item--danger:focus-visible {
  background: var(--st-rejected-bg);
}

/* Banners. */
html[data-portal="manage"] .aic-widget .aic-banner--info {
  border-color: var(--st-in-progress-border);
  background: var(--st-in-progress-bg);
  color: var(--st-in-progress-text);
}

html[data-portal="manage"] .aic-widget .aic-banner--error {
  border-color: var(--st-rejected-border);
  background: var(--st-rejected-chip);
  color: var(--st-rejected-text);
}

/* Messages. */
html[data-portal="manage"] .aic-widget .aic-msg__bubble { color: var(--text-primary); }

html[data-portal="manage"] .aic-widget .aic-msg--user .aic-msg__bubble {
  border-radius: 16px 16px 6px 16px;
  background: var(--accent-soft);
  color: var(--text-primary);
}

html[data-portal="manage"] .aic-widget .aic-msg.is-failed .aic-msg__bubble {
  border-color: var(--st-rejected-border);
  background: var(--st-rejected-chip);
}

html[data-portal="manage"] .aic-widget .aic-msg__error,
html[data-portal="manage"] .aic-widget .aic-memory__status.is-error,
html[data-portal="manage"] .aic-widget .aic-memory__clear,
html[data-portal="manage"] .aic-widget .aic-import__counter.is-over,
html[data-portal="manage"] .aic-widget .aic-composer__count.is-over {
  color: var(--st-rejected-text);
}

html[data-portal="manage"] .aic-widget .aic-msg__note,
html[data-portal="manage"] .aic-widget .aic-job,
html[data-portal="manage"] .aic-widget .aic-loading,
html[data-portal="manage"] .aic-widget .aic-sources__label,
html[data-portal="manage"] .aic-widget .aic-sources__num,
html[data-portal="manage"] .aic-widget .aic-artifacts__label,
html[data-portal="manage"] .aic-widget .aic-web-result__line,
html[data-portal="manage"] .aic-widget .aic-msg__modality {
  color: var(--text-secondary);
}

html[data-portal="manage"] .aic-widget .aic-typing span { background: var(--text-secondary); }

html[data-portal="manage"] .aic-widget .aic-md a,
html[data-portal="manage"] .aic-widget .aic-sources__link,
html[data-portal="manage"] .aic-widget .aic-complete__link,
html[data-portal="manage"] .aic-widget .aic-linkbtn {
  color: var(--accent-text);
  text-decoration: none;
}

html[data-portal="manage"] .aic-widget .aic-md a:hover,
html[data-portal="manage"] .aic-widget .aic-sources__link:hover,
html[data-portal="manage"] .aic-widget .aic-complete__link:hover,
html[data-portal="manage"] .aic-widget .aic-linkbtn:hover {
  text-decoration: underline;
}

html[data-portal="manage"] .aic-widget .aic-md blockquote {
  border-left-color: var(--border-strong);
  color: var(--text-secondary);
}

html[data-portal="manage"] .aic-widget .aic-md hr { border-top-color: var(--border); }

html[data-portal="manage"] .aic-widget .aic-md-code,
html[data-portal="manage"] .aic-widget .aic-md-pre {
  border: 1px solid var(--border);
  background: var(--aic-code-bg);
  color: var(--text-primary);
}

html[data-portal="manage"] .aic-widget .aic-md-pre .aic-md-code {
  padding: 0;
  border: 0;
  background: transparent;
}

html[data-portal="manage"] .aic-widget .aic-copy {
  border-color: var(--border);
  background: var(--aic-code-bg);
  color: var(--text-secondary);
}

html[data-portal="manage"] .aic-widget .aic-copy:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

html[data-portal="manage"] .aic-widget .aic-md-table th,
html[data-portal="manage"] .aic-widget .aic-md-table td {
  border-color: var(--border);
}

html[data-portal="manage"] .aic-widget .aic-md-table th { background: var(--surface-card); }

html[data-portal="manage"] .aic-widget .aic-basis__tag--verified { color: var(--st-ready-for-payment-text); }

html[data-portal="manage"] .aic-widget .aic-basis__tag--unsuccessful,
html[data-portal="manage"] .aic-widget .aic-basis__tag--not_verified,
html[data-portal="manage"] .aic-widget .aic-files-used__partial,
html[data-portal="manage"] .aic-widget .aic-import__warning {
  color: var(--st-manager-approval-text);
}

/* Attachment chips (messages + composer). */
html[data-portal="manage"] .aic-widget .aic-file {
  border-color: var(--border);
  background: var(--surface-hover);
}

html[data-portal="manage"] .aic-widget .aic-file__name { color: var(--text-primary); }
html[data-portal="manage"] .aic-widget .aic-file__meta { color: var(--text-secondary); }
html[data-portal="manage"] .aic-widget .aic-file__progress { background: var(--border-strong); }

html[data-portal="manage"] .aic-widget .aic-file--failed,
html[data-portal="manage"] .aic-widget .aic-file--error {
  border-color: var(--st-rejected-border);
  background: var(--st-rejected-bg);
}

html[data-portal="manage"] .aic-widget .aic-file--failed .aic-file__meta,
html[data-portal="manage"] .aic-widget .aic-file--error .aic-file__meta {
  color: var(--st-rejected-text);
}

html[data-portal="manage"] .aic-widget .aic-file__icon { background: var(--accent-soft); color: var(--accent-text); }
html[data-portal="manage"] .aic-widget .aic-file__icon--pdf { background: var(--st-rejected-chip); color: var(--st-rejected-text); }
html[data-portal="manage"] .aic-widget .aic-file__icon--xlsx,
html[data-portal="manage"] .aic-widget .aic-file__icon--csv { background: var(--st-ready-for-payment-chip); color: var(--st-ready-for-payment-text); }
html[data-portal="manage"] .aic-widget .aic-file__icon--docx { background: var(--st-in-progress-chip); color: var(--st-in-progress-text); }
html[data-portal="manage"] .aic-widget .aic-file__icon--pptx { background: var(--st-manager-approval-chip); color: var(--st-manager-approval-text); }
html[data-portal="manage"] .aic-widget .aic-file__icon--png,
html[data-portal="manage"] .aic-widget .aic-file__icon--jpeg,
html[data-portal="manage"] .aic-widget .aic-file__icon--webp { background: var(--st-resubmitted-chip); color: var(--st-resubmitted-text); }
html[data-portal="manage"] .aic-widget .aic-file__icon--json { background: var(--st-neutral-chip); color: var(--st-neutral-text); }

html[data-portal="manage"] .aic-widget .aic-file__remove { color: var(--text-muted); }

html[data-portal="manage"] .aic-widget .aic-file__remove:hover:not(:disabled) {
  background: var(--st-rejected-bg);
  color: var(--st-rejected-text);
}

html[data-portal="manage"] .aic-widget .aic-drop { background: var(--aic-drop-bg); }

/* Composer. */
html[data-portal="manage"] .aic-widget .aic-composer {
  border-color: var(--border-strong);
  background: var(--surface-input);
  box-shadow: var(--aic-composer-shadow);
}

html[data-portal="manage"] .aic-widget .aic-composer:focus-within {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

html[data-portal="manage"] .aic-widget .aic-composer__input {
  color: var(--text-primary);
  caret-color: var(--accent);
}

html[data-portal="manage"] .aic-widget .aic-composer__input::placeholder { color: var(--text-muted); }

html[data-portal="manage"] .aic-widget .aic-composer__hint,
html[data-portal="manage"] .aic-widget .aic-composer__count {
  color: var(--text-secondary);
}

html[data-portal="manage"] .aic-widget .aic-composer__hint.is-attention { color: var(--st-manager-approval-text); }

html[data-portal="manage"] .aic-widget .aic-mic-lang {
  border-color: var(--border);
  color: var(--text-secondary);
  font-weight: 700;
}

html[data-portal="manage"] .aic-widget .aic-mic-lang:hover:not(:disabled) {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

/* Dictation: rejected text with a soft pulsing ring (static with reduced motion). */
html[data-portal="manage"] .aic-widget .aic-mic[data-state="listening"],
html[data-portal="manage"] .aic-widget .aic-mic[data-state="processing"],
html[data-portal="manage"] .aic-widget .aic-mic[data-state="listening"]:hover:not(:disabled),
html[data-portal="manage"] .aic-widget .aic-mic[data-state="processing"]:hover:not(:disabled) {
  background: var(--st-rejected-bg);
  color: var(--st-rejected-text);
}

html[data-portal="manage"] .aic-widget .aic-mic[data-state="listening"] {
  animation: aic-theme-rec 1.4s ease-out infinite;
}

@keyframes aic-theme-rec {
  0% { box-shadow: 0 0 0 0 var(--aic-rec-ring); }
  100% { box-shadow: 0 0 0 9px transparent; }
}

/* Send: accent when there is something to send; disabled = input-disabled;
   while sending = accent with the white spinner. */
html[data-portal="manage"] .aic-widget .aic-send {
  background: var(--accent);
  color: var(--text-on-accent, #fff);
}

html[data-portal="manage"] .aic-widget .aic-send:hover:not(:disabled) { background: var(--accent-hover); }

html[data-portal="manage"] .aic-widget .aic-send:disabled {
  background: var(--surface-input-disabled);
  color: var(--text-muted);
  cursor: not-allowed;
}

html[data-portal="manage"] .aic-widget .aic-send.is-busy {
  background: var(--accent);
  color: var(--text-on-accent, #fff);
  cursor: progress;
}

/* Personal Memory panel, viewer, form controls inside the chat. */
html[data-portal="manage"] .aic-widget .aic-memory__intro,
html[data-portal="manage"] .aic-widget .aic-memory__hint,
html[data-portal="manage"] .aic-widget .aic-memory__h,
html[data-portal="manage"] .aic-widget .aic-memory__meta,
html[data-portal="manage"] .aic-widget .aic-msg__note--memory,
html[data-portal="manage"] .aic-widget .aic-import__counter {
  color: var(--text-secondary);
}

html[data-portal="manage"] .aic-widget .aic-memory__item { border-color: var(--border); }
html[data-portal="manage"] .aic-widget .aic-memory__modes { background: var(--surface-hover); }
html[data-portal="manage"] .aic-widget .aic-memory__mode { color: var(--text-secondary); }

html[data-portal="manage"] .aic-widget .aic-memory__mode.is-active {
  background: var(--surface-raised);
  color: var(--text-primary);
}

html[data-portal="manage"] .aic-widget .aic-memory__input,
html[data-portal="manage"] .aic-widget .aic-memory__select {
  border-color: var(--border-strong);
  background: var(--surface-input);
  color: var(--text-primary);
}

html[data-portal="manage"] .aic-widget .aic-import__coverage-counts,
html[data-portal="manage"] .aic-widget .aic-import__coverage-categories {
  color: var(--text-primary);
}

html[data-portal="manage"] .aic-widget .aic-import__footer {
  border-top-color: var(--border);
  background: var(--surface-content);
}

html[data-portal="manage"] .aic-widget:not(.is-expanded) .aic-import__footer {
  background: var(--surface-raised);
}

html[data-portal="manage"] .aic-widget .aic-viewer {
  background: var(--surface-raised);
  color: var(--text-primary);
}

html[data-portal="manage"] .aic-widget .aic-viewer__bar { border-bottom-color: var(--border); }

@media (prefers-reduced-motion: reduce) {
  html[data-portal="manage"] .aic-widget .aic-mic[data-state="listening"] {
    animation: none;
    box-shadow: 0 0 0 3px var(--aic-rec-ring);
  }
}

/* ------------------------------------------------------------------ Glass */

/* Frosted (matte) glass over the page background image, both themes.
   A) True glass (backdrop-filter): sidebar, central content block, My Work
      blocks, modals, chat, popovers, toasts.
   B) Glass tiles (no blur): neutral widgets / columns / filter bars / table
      containers inside the central block. Status-tinted cards keep their tint,
      layered over the tile.
   C) Unchanged: My Tasks / JSA today / Bank cards, the chat launcher, buttons,
      chips; inputs stay solid (input surface tokens).

   Grain: every true-glass surface gets an overlay pseudo-element painting
   /static/portal-noise.png (256px, alpha <= 16/255) at --grain-opacity, above
   the glass tint and below the content (see "Grain overlay" below). The
   surface's backdrop-filter already makes it the containing block and a
   stacking context, so the overlay is position: absolute; inset: 0;
   z-index: -1 with no position / overflow / z-index change on the surface
   (dropdowns, sticky headers and the fixed modals inside .mp-main unaffected).

   Readability (measured on portal-bg-*.webp, 28px blur, brightest/darkest
   spot behind each surface, 1280-1920px viewports): Light 0.55 keeps
   --text-primary >= 11.7:1 and --text-secondary >= 5.2:1. Dark needs more:
   the sidebar uses 0.70 (--chrome-subtle >= 4.5:1; 0.55 gave 4.05) and the
   central block 0.86 (--text-secondary >= 4.5:1 on a tile / tinted card over
   the orange glow; 0.55 gave 3.2:1). Same reason in Dark tiles never stack:
   a card inside a tiled column takes only its status tint.

   Page panels (2026-11-10): the page background is now a plain colour, so the
   page-level panels -- desktop sidebar, central content block, My Work main
   block and right panel -- use --panel-bg / --panel-blur instead: plain
   translucent, blur(0px), no grain, so the fiber lines show through them.
   blur(0px) (not none) keeps each panel the containing block for its
   dropdowns and absolutely positioned children. Borders and shadows are
   unchanged. Glass + grain (--glass-*) remains on popovers, modals, toasts
   and chat. */

html[data-portal="manage"][data-theme="light"] {
  --panel-bg: rgba(255, 255, 255, 0.70);
  --panel-blur: blur(0px);
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-content: var(--glass-bg);
  --glass-bg-strong: rgba(255, 255, 255, 0.78);
  --glass-tile: rgba(255, 255, 255, 0.62);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  --glass-shadow: 0 10px 30px rgba(60, 40, 20, 0.1);
  --glass-blur: blur(28px) saturate(140%);
  --glass-scrim: rgba(30, 25, 20, 0.3);
  --glass-text: #24211e;
  --glass-solid: #fcfbf9;
  --glass-solid-strong: #fff;
  --card-solid: #fff;
  --modal-solid: #fff;
  --modal-body: #fcfbf9;
}

html[data-portal="manage"][data-theme="dark"] {
  --panel-bg: rgba(42, 43, 47, 0.72);
  --panel-blur: blur(0px);
  --glass-bg: rgba(28, 24, 30, 0.7);
  --glass-bg-content: rgba(28, 24, 30, 0.86);
  --glass-bg-strong: rgba(32, 28, 34, 0.82);
  --glass-tile: rgba(255, 255, 255, 0.045);
  --glass-border: rgba(255, 255, 255, 0.09);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --glass-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
  --glass-blur: blur(28px) saturate(125%);
  --glass-scrim: rgba(0, 0, 0, 0.5);
  --glass-text: #f3efea;
  --glass-solid: #1c191e;
  --glass-solid-strong: #2a262c;
  --card-solid: #2a262c;
  --modal-solid: #2a262c;
  --modal-body: #232026;
}

html[data-portal="manage"] {
  --glass-grain: url("/static/portal-noise.png?v=1") 0 0 / 256px 256px repeat;
  /* Edit Profile stays a light dialog in Dark (its controls are light-only). */
  --glass-light-strong: rgba(255, 255, 255, 0.86);
}

/* Grain strength (opacity of the grain overlay); tune here. */
:root {
  --grain-opacity: 0.5;
}

html[data-theme="light"] {
  --grain-opacity: 0.4;
}

/* No backdrop-filter support, or the viewer asked for less transparency:
   solid surfaces, no blur (tiles stay, they sit on solid now). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-portal="manage"][data-theme] {
    --glass-bg: var(--glass-solid);
    --glass-bg-content: var(--glass-solid);
    --glass-bg-strong: var(--glass-solid-strong);
    --glass-light-strong: #fff;
    --panel-bg: var(--card-bg);
    --grain-display: none;   /* no backdrop-filter = no containing block for the overlay */
  }
}

@media (prefers-reduced-transparency: reduce) {
  html[data-portal="manage"][data-theme] {
    --glass-bg: var(--glass-solid);
    --glass-bg-content: var(--glass-solid);
    --glass-bg-strong: var(--glass-solid-strong);
    --glass-light-strong: #fff;
    --glass-blur: none;
    --panel-bg: var(--card-bg);
    --panel-blur: none;
    --grain-display: none;
  }
}

/* -- A) True glass --------------------------------------------------------- */

/* Sidebar (desktop; <= 960px it is the solid sticky header). */
@media (min-width: 961px) {
  html[data-portal="manage"] .mp-sidebar {
    border: 1px solid var(--glass-border);
    background: var(--panel-bg);
    -webkit-backdrop-filter: var(--panel-blur);
    backdrop-filter: var(--panel-blur);
    box-shadow: var(--glass-highlight), var(--glass-shadow);
  }
}

/* Central content block. .mp-main cannot carry a backdrop-filter (it would
   become the containing block of the fixed-position modals inside it), so the
   glass is a ::before of .mp-layout placed in .mp-main's grid cell, with the
   same margins/radius, painted below it (z-index -1). Light: every page.
   Dark: only pages themed for dark content -- the others keep their light
   content on the solid white block. */
html[data-portal="manage"][data-theme="light"] .mp-layout:has(> .mp-main:not(.mp-main--mywork))::before,
html[data-portal="manage"][data-theme="dark"] .mp-layout:has(> .mp-main.mp-main--dark-content:not(.mp-main--mywork))::before {
  content: "";
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  z-index: -1;
  box-sizing: border-box;
  min-width: 0;
  margin: calc(12px + var(--safe-top)) 12px calc(12px + var(--safe-bottom));
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  background: var(--panel-bg);
  -webkit-backdrop-filter: var(--panel-blur);
  backdrop-filter: var(--panel-blur);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  pointer-events: none;
}

html[data-portal="manage"][data-theme="light"] .mp-layout:has(> .mp-main:not(.mp-main--mywork)) > .mp-sidebar,
html[data-portal="manage"][data-theme="dark"] .mp-layout:has(> .mp-main.mp-main--dark-content:not(.mp-main--mywork)) > .mp-sidebar {
  grid-column: 1;
  grid-row: 1;
}

html[data-portal="manage"][data-theme="light"] .mp-layout > .mp-main:not(.mp-main--mywork),
html[data-portal="manage"][data-theme="dark"] .mp-layout > .mp-main.mp-main--dark-content:not(.mp-main--mywork) {
  grid-column: 2;
  grid-row: 1;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

@media (max-width: 960px) {
  html[data-portal="manage"][data-theme="light"] .mp-layout:has(> .mp-main:not(.mp-main--mywork))::before,
  html[data-portal="manage"][data-theme="dark"] .mp-layout:has(> .mp-main.mp-main--dark-content:not(.mp-main--mywork))::before {
    grid-column: 1;
    grid-row: 2;
    margin: 12px 12px calc(12px + var(--safe-bottom));
    border-radius: 20px;
  }

  html[data-portal="manage"][data-theme="light"] .mp-layout > .mp-main:not(.mp-main--mywork),
  html[data-portal="manage"][data-theme="dark"] .mp-layout > .mp-main.mp-main--dark-content:not(.mp-main--mywork) {
    grid-column: 1;
    grid-row: 2;
  }
}

@media (max-width: 600px) {
  html[data-portal="manage"][data-theme="light"] .mp-layout:has(> .mp-main:not(.mp-main--mywork))::before,
  html[data-portal="manage"][data-theme="dark"] .mp-layout:has(> .mp-main.mp-main--dark-content:not(.mp-main--mywork))::before {
    margin: 8px 8px calc(8px + var(--safe-bottom));
    border-radius: 18px;
  }
}

/* My Work: the central block and the right panel (desktop; they already
   carried the blur in Dark). */
@media (min-width: 961px) {
  html[data-portal="manage"] .mp-main--mywork .mp-mywork__main,
  html[data-portal="manage"] .mp-main--mywork .mp-cal__panel {
    border-color: var(--glass-border);
    background: var(--panel-bg);
    -webkit-backdrop-filter: var(--panel-blur);
    backdrop-filter: var(--panel-blur);
    box-shadow: var(--glass-highlight), var(--glass-shadow);
  }
}

/* Popovers / dropdowns. */
html[data-portal="manage"] .mp-profile-menu,
html[data-portal="manage"] .mp-nav-tooltip,
html[data-portal="manage"][data-theme="light"] .mp-user-menu__panel,
html[data-portal="manage"] .aic-widget .aic-model__menu,
html[data-portal="manage"] .aic-widget .aic-convo-menu,
html[data-portal="manage"] .mp-main--jsa .jsa-crew__menu,
html[data-portal="manage"] .mp-main--osp:not(.mp-main--isp-reports) .bv-toolbar .bv-customer-dropdown {
  border-color: var(--glass-border);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
}

html[data-portal="manage"] .mp-nav-tooltip {
  border: 1px solid var(--glass-border);
}

/* Portal toast (#mpProfileToast: profile + My Work messages): solid raised
   surface so error text stays readable over any background. */
html[data-portal="manage"] .mp-profile-toast {
  border: 1px solid var(--toast-border, #dcd7d0);
  background: var(--modal-solid);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  color: var(--glass-text);
}

html[data-portal="manage"][data-theme="light"] { --toast-border: #dcd7d0; }
html[data-portal="manage"][data-theme="dark"] { --toast-border: rgba(255, 255, 255, 0.14); }

/* Glass toasts. */
html[data-portal="manage"] .bv-toast {
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  color: var(--glass-text);
}

/* Brain chat: mini window and expanded view. The history column is a tile;
   overlays inside it (Personal Memory, file viewer) stay solid so the thread
   never shows through them. */
html[data-portal="manage"] .aic-widget .aic-root,
html[data-portal="manage"] .aic-widget.is-expanded .aic-root {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

html[data-portal="manage"] .aic-widget:not(.is-expanded) .aic-root {
  border-color: var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
}

/* <= 820px the history is a drawer over the thread, so it stays solid there. */
@media (min-width: 821px) {
  html[data-portal="manage"] .aic-widget .aic-sidebar {
    border-right-color: var(--glass-border);
    background: var(--glass-tile);
  }
}

/* Modals: glass dialog over a dim, lightly blurred scrim. */
html[data-portal="manage"] .mp-profile-modal__backdrop,
html[data-portal="manage"] .mp-main--osp:not(.mp-main--isp-reports) .bv-modal-overlay,
html[data-portal="manage"] .mw-notes-modal__backdrop {
  background: var(--glass-scrim);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* ::backdrop gets literal colours: older engines do not inherit custom
   properties into it. [data-theme] matches the specificity of the Dark rule
   in management_jsa.css (this file loads after it). */
html[data-portal="manage"][data-theme] .mp-main--jsa .jsa-detail::backdrop {
  background: rgba(30, 25, 20, 0.3);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

html[data-portal="manage"][data-theme="dark"] .mp-main--jsa .jsa-detail::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

html[data-portal="manage"][data-theme] .mp-profile-modal__dialog {
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
}

/* Edit Profile is a light dialog in both themes: light glass in Dark too. */
html[data-portal="manage"][data-theme="dark"] .mp-profile-modal__dialog {
  border-color: rgba(255, 255, 255, 0.65);
  background: var(--glass-light-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), var(--glass-shadow);
}

/* OSP report window + JSA detail: opaque (no glass, no grain). Container,
   header and footer = --modal-solid; body = --modal-body. The JSA dialog is
   painted with the body colour because its scroll area stops 4px short of the
   right edge (header/footer cover their own strips). Their dropdowns keep the
   pages' own solid raised style (the glass dropdown rule is toolbar-only). */
html[data-portal="manage"] .mp-main--osp:not(.mp-main--isp-reports) .bv-modal,
html[data-portal="manage"] .mp-main--osp:not(.mp-main--isp-reports) .bv-modal-head {
  background: var(--modal-solid);
}

html[data-portal="manage"] .mp-main--osp:not(.mp-main--isp-reports) .bv-modal-body,
html[data-portal="manage"] .mp-main--jsa .jsa-detail {
  background: var(--modal-body);
}

html[data-portal="manage"] .mp-main--jsa .jsa-detail__head,
html[data-portal="manage"] .mp-main--jsa .jsa-detail__foot {
  background: var(--modal-solid);
}

html[data-portal="manage"][data-theme="dark"] .mp-main--osp:not(.mp-main--isp-reports) .bv-modal,
html[data-portal="manage"][data-theme="dark"] .mp-main--jsa .jsa-detail {
  border-color: rgba(255, 255, 255, 0.1);
}

/* Notes modal and the My Work settings popover are solid (my_work_widgets.css):
   working dialogs and dropdowns are opaque, like the OSP / JSA / Tasks ones. */

/* -- Grain overlay ----------------------------------------------------------- */

/* Same surfaces as above (same theme/page/media conditions). */
@media (min-width: 961px) {
  html[data-portal="manage"] .mp-sidebar::before,
  html[data-portal="manage"] .mp-main--mywork .mp-mywork__main::before,
  html[data-portal="manage"] .mp-main--mywork .mp-cal__panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    display: none;   /* page panels: no grain (see "Page panels" above) */
    border-radius: inherit;
    background: var(--glass-grain);
    opacity: var(--grain-opacity);
    pointer-events: none;
  }
}

html[data-portal="manage"] .mp-profile-menu::before,
html[data-portal="manage"] .mp-nav-tooltip::before,
html[data-portal="manage"][data-theme="light"] .mp-user-menu__panel::before,
html[data-portal="manage"] .aic-widget .aic-model__menu::before,
html[data-portal="manage"] .aic-widget .aic-convo-menu::before,
html[data-portal="manage"] .mp-main--jsa .jsa-crew__menu::before,
html[data-portal="manage"] .mp-main--osp:not(.mp-main--isp-reports) .bv-toolbar .bv-customer-dropdown::before,
html[data-portal="manage"] .bv-toast::before,
html[data-portal="manage"] .aic-widget .aic-root::before,
html[data-portal="manage"][data-theme] .mp-profile-modal__dialog::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  display: var(--grain-display, block);
  border-radius: inherit;
  background: var(--glass-grain);
  opacity: var(--grain-opacity);
  pointer-events: none;
}

/* Central block: its glass is .mp-layout::before, so the grain is
   .mp-layout::after in the same grid cell, painted just above it. */
html[data-portal="manage"][data-theme="light"] .mp-layout:has(> .mp-main:not(.mp-main--mywork))::after,
html[data-portal="manage"][data-theme="dark"] .mp-layout:has(> .mp-main.mp-main--dark-content:not(.mp-main--mywork))::after {
  content: "";
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  z-index: -1;
  display: none;   /* page panels: no grain (see "Page panels" above) */
  min-width: 0;
  margin: calc(12px + var(--safe-top)) 12px calc(12px + var(--safe-bottom));
  border-radius: 24px;
  background: var(--glass-grain);
  opacity: var(--grain-opacity);
  pointer-events: none;
}

@media (max-width: 960px) {
  html[data-portal="manage"][data-theme="light"] .mp-layout:has(> .mp-main:not(.mp-main--mywork))::after,
  html[data-portal="manage"][data-theme="dark"] .mp-layout:has(> .mp-main.mp-main--dark-content:not(.mp-main--mywork))::after {
    grid-column: 1;
    grid-row: 2;
    margin: 12px 12px calc(12px + var(--safe-bottom));
    border-radius: 20px;
  }
}

@media (max-width: 600px) {
  html[data-portal="manage"][data-theme="light"] .mp-layout:has(> .mp-main:not(.mp-main--mywork))::after,
  html[data-portal="manage"][data-theme="dark"] .mp-layout:has(> .mp-main.mp-main--dark-content:not(.mp-main--mywork))::after {
    margin: 8px 8px calc(8px + var(--safe-bottom));
    border-radius: 18px;
  }
}

/* -- B) Glass tiles (no blur) ---------------------------------------------- */

/* Light: on every themed page below. Dark: only inside dark content (in Dark
   My Work keeps its light cards on the dark glass block). */
html[data-portal="manage"][data-theme="light"] .mp-main--mywork .mp-count-card,
html[data-portal="manage"][data-theme="light"] .mp-main--mywork .mw-personal-widget--calendar,
html[data-portal="manage"][data-theme="light"] .mp-main--mywork .mw-personal-widget--meetings,
html[data-portal="manage"][data-theme="light"] .mp-main--mywork .mp-cal__mini,
html[data-portal="manage"][data-theme="light"] .mp-main--mywork .mp-cal__body,
html[data-portal="manage"] .mp-main--osp.mp-main--dark-content .bv-toolbar,
html[data-portal="manage"] .mp-main--osp.mp-main--dark-content .bv-col,
html[data-portal="manage"] .mp-main--osp.mp-main--dark-content .bv-lane,
html[data-portal="manage"] .mp-main--jsa .jsa-toolbar,
html[data-portal="manage"] .mp-main--jsa .jsa-table-wrap {
  border-color: var(--glass-border);
  background: var(--glass-tile);
  box-shadow: var(--glass-highlight);
}

/* A lane inside a customer column shares the column's tile (no stacking);
   the strips that repeated the container colour go transparent. */
html[data-portal="manage"] .mp-main--osp.mp-main--dark-content .bv-col .bv-lane {
  background: transparent;
  box-shadow: none;
}

html[data-portal="manage"] .mp-main--osp.mp-main--dark-content .bv-col-header,
html[data-portal="manage"] .mp-main--osp.mp-main--dark-content .bv-lane-header {
  background: transparent;
}

/* OSP (Light): near-white columns instead of the 0.62 tile, so the warm page
   no longer tints them; lanes inside a customer column stay transparent.
   Cards: a slightly deeper resting shadow; header counters at weight 700. */
html[data-portal="manage"][data-theme="light"] .mp-main--osp.mp-main--dark-content .bv-col,
html[data-portal="manage"][data-theme="light"] .mp-main--osp.mp-main--dark-content .bv-lane {
  border-color: #e6e1da;
  background: rgba(255, 255, 255, 0.78);
}

html[data-portal="manage"][data-theme="light"] .mp-main--osp.mp-main--dark-content .bv-col .bv-lane {
  background: transparent;
}

html[data-portal="manage"][data-theme="light"] .mp-main--osp.mp-main--dark-content {
  --osp-card-shadow: 0 1px 2px rgba(30, 25, 20, 0.06), 0 2px 6px rgba(30, 25, 20, 0.05);
}

html[data-portal="manage"][data-theme="light"] .mp-main--osp.mp-main--dark-content .bv-col-badge {
  font-weight: 700;
}

/* JSA table: rows show the container's tile; the sticky header keeps a solid
   fill so scrolled rows never show through it. */
html[data-portal="manage"] .mp-main--jsa .jsa-table td {
  background: transparent;
}

html[data-portal="manage"] .mp-main--jsa .jsa-table__row:hover td {
  background: var(--surface-hover);
}

/* Status cards (OSP, JSA, Bank) are opaque: the status tint over a solid
   base (Dark tints are rgba, so the hue stays and the card is opaque).
   Neutral = --st-neutral-bg (#fff / #2a262c, already solid). Columns/lanes
   stay glass tiles; border, radius, hover and shadow are the pages' own. */
html[data-portal="manage"] .mp-main--osp.mp-main--dark-content .bv-card,
html[data-portal="manage"] .mp-main--jsa .jsa-card,
html[data-portal="manage"] .mp-main--bank-tx .mct-card {
  background: linear-gradient(var(--st-bg), var(--st-bg)), var(--card-solid);
}

/* Linked My Work cards keep their hover outline/lift shadow. */
html[data-portal="manage"][data-theme="light"] .mp-main--mywork .mp-count-card--link:hover {
  border-color: var(--card-line-hover);
  box-shadow: var(--glass-highlight), var(--card-hover-shadow);
}