/* ========================================================================== 
   Two3rd Portal - Design Tokens (single source of truth)
   ========================================================================== */

@import url("./nav_contract.css");
@import url("./nav_contract_flat_menu.css");
/* ``playbook_theme_fix.css`` and ``playbook_theme_hard_override.css`` were
   imported here historically. Their rules are body-class-gated to
   ``body.user-home-theme.playbook-theme`` (set only by
   ``templates/playbook/index.html``), so they were inert on every other
   portal page while still costing the download + parse on each navigation.
   They are now loaded directly from the Playbook template's ``head`` block. */

:root {
  /* Color: surfaces */
  --token-surface-bg: var(--app-bg, var(--portal-body-bg, #ffffff));
  --token-surface-fg: var(--app-fg, var(--portal-body-color, #0f172a));
  --token-surface-muted: var(--app-muted, var(--bs-secondary-color));
  --token-surface-border: var(--app-border, var(--portal-border-color, #e5e7eb));
  --token-surface-panel: var(--app-panel, var(--bs-body-bg));
  --token-surface-soft: var(--app-soft-bg);
  --token-surface-chip: var(--app-chip, var(--bs-tertiary-bg));

  /* Color: brand and semantic */
  --token-color-primary: var(--app-accent, var(--bs-primary));
  --token-color-primary-soft: var(--app-accent-2, var(--bs-primary));
  --token-color-success: var(--app-good, var(--bs-success));
  --token-color-warning: var(--app-warn, var(--bs-warning));
  --token-color-danger: var(--app-bad, var(--bs-danger));
  --token-color-on-primary: var(--bs-body-bg);
  --token-color-on-danger: var(--bs-body-bg);
  --token-color-inverse: var(--bs-body-bg);
  --token-color-on-accent: var(--bs-body-bg);
  --token-color-ink-deep: var(--brand-ink, #0f172a);
  --token-color-text-darken: #000;
  --token-color-inverse-rgb: 255, 255, 255;
  --token-color-ink-deep-rgb: 15, 23, 42;

  /* Focus, overlays, and elevation */
  --token-focus-ring: color-mix(in srgb, var(--token-color-primary) 35%, transparent);
  --token-focus-ring-shadow: 0 0 0 .2rem var(--token-focus-ring);
  --token-overlay-backdrop: rgba(0, 0, 0, .45);
  --token-shadow-modal: 0 16px 48px rgba(0, 0, 0, .2);

  /* Spacing */
  --token-space-xs: var(--space-1, .25rem);
  --token-space-sm: var(--space-2, .5rem);
  --token-space-md: var(--space-3, .75rem);
  --token-space-lg: var(--space-4, 1rem);
  --token-space-xl: var(--space-5, 1.5rem);
  --token-space-2xl: var(--space-6, 2rem);
  --token-page-gutter: var(--app-page-gutter, clamp(.75rem, 1.2vw, 1.25rem));

  /* Layout */
  --token-container-max: var(--portal-container-max, 1380px);
  --token-grid-gap: var(--grid-gap, .85rem);
  --token-card-padding: var(--card-padding, 1rem);
  --token-radius-sm: 6px;
  --token-radius-md: 10px;
  --token-radius-lg: var(--app-radius, 12px);

  /* Typography */
  --token-font-sans: var(--portal-font-sans, "Inter", system-ui, sans-serif);
  --token-font-heading: var(--portal-font-heading, "Poppins", "Inter", sans-serif);
  --token-font-size-base: var(--portal-font-size-base, 1rem);
  --token-font-size-sm: .85rem;
  --token-font-size-xs: .75rem;
  --token-font-weight-regular: 400;
  --token-font-weight-medium: 500;
  --token-font-weight-semi: 600;
  --token-font-weight-bold: 700;
  --token-line-height-base: 1.45;

  /* Elevation */
  --token-shadow-sm: 0 4px 12px rgba(15, 23, 42, .06);
  --token-shadow-md: var(--portal-surface-shadow, 0 14px 34px rgba(15, 23, 42, .08));
  --token-shadow-lg: var(--app-shadow, 0 18px 45px rgba(18, 19, 23, .12));

  /* Motion */
  --token-motion-duration-fast: 120ms;
  --token-motion-duration-base: 180ms;
  --token-motion-easing: cubic-bezier(.2, .6, .2, 1);

  /* Navbar */
  --token-nav-link-font-size: var(--app-navbar-font-size, .875rem);
  --token-nav-link-color: var(--bs-body-color);
  --token-nav-link-hover-color: var(--token-color-primary);
  --token-nav-link-active-color: var(--token-color-primary);
  --token-nav-brand-font-size: var(--app-navbar-brand-font-size, .95rem);
  --token-nav-logo-height: var(--app-navbar-logo-height, 28px);
  --token-nav-menu-hover-bg: var(--nav-uniform-menu-hover-bg, color-mix(in srgb, var(--token-color-primary) 8%, transparent));

  /* Legacy --brand-* aliases — kept for older widgets that haven't been
     migrated to --portal-*. Brand red is now the accent in ALL three themes,
     so every alias (including the RGB triple) chains through the active theme
     via --portal-accent / --bs-primary-rgb. A single THEME_CHOICES edit
     propagates here; no per-theme overrides are needed anymore. */
  --brand-red: var(--portal-accent);
  --brand-red-rgb: var(--bs-primary-rgb);
  --brand-red-dark: var(--portal-accent-strong);
  --brand-red-soft: var(--portal-accent-soft);
  --brand-ink: var(--portal-body-color);
  --brand-muted: var(--portal-muted-color);
}

html[data-bs-theme="dark"] {
  --token-shadow-sm: 0 4px 12px rgba(0, 0, 0, .35);
  --token-shadow-md: 0 10px 24px rgba(0, 0, 0, .4);
  --token-shadow-lg: var(--app-shadow, 0 10px 24px rgba(0, 0, 0, .35));
}

/* ==========================================================================
   Per-theme cascade — light / 23rd-dark / ocean
   --------------------------------------------------------------------------
   The portal injects --portal-* values per theme via THEME_CHOICES (see
   portal_app/__init__.py). The blocks below extend that injection by
   re-routing the secondary token namespaces (--uh-*, --hub-*, --token-*,
   --app-*) so legacy widgets that read from those namespaces always follow
   the active theme. This is the same pattern playbook_modern.css uses to
   stay theme-pure: never reference a hex literal directly, always route
   through the canonical --portal-* surface tokens.

   When adding new themes, add a parallel block here and a matching entry in
   portal_app/__init__.py THEME_CHOICES. Component CSS should NOT need any
   per-theme overrides — read from --token-* / --portal-* and theme switch
   for free.
   ========================================================================== */
html.theme-light[data-bs-theme="light"],
body.theme-light {
  color-scheme: light;
  --uh-background: var(--portal-body-bg);
  --uh-surface: var(--portal-surface-bg);
  --uh-surface-soft: var(--portal-card-muted-bg);
  --uh-surface-strong: var(--portal-card-bg);
  --uh-border: var(--portal-border-color);
  --uh-border-soft: color-mix(in srgb, var(--portal-border-color) 55%, transparent);
  --uh-border-strong: color-mix(in srgb, var(--portal-border-color) 80%, var(--portal-body-color) 12%);
  --uh-text-primary: var(--portal-body-color);
  --uh-text-soft: color-mix(in srgb, var(--portal-body-color) 78%, transparent);
  --uh-text-muted: var(--portal-muted-color);
  --uh-accent: var(--portal-accent);
  --uh-accent-soft: var(--portal-accent-soft);
  --uh-chip-bg: color-mix(in srgb, var(--portal-accent) 10%, transparent);
  --uh-chip-border: color-mix(in srgb, var(--portal-accent) 28%, transparent);
  --uh-focus-ring: 0 0 0 .2rem color-mix(in srgb, var(--portal-accent) 28%, transparent);
  --uh-shadow: var(--portal-surface-shadow);
  --uh-shadow-soft: 0 8px 22px -16px color-mix(in srgb, var(--portal-body-color) 28%, transparent);

  --hub-surface: var(--portal-surface-bg);
  --hub-surface-soft: var(--portal-card-muted-bg);
  --hub-surface-strong: var(--portal-card-bg);
  --hub-text: var(--portal-body-color);
  --hub-text-soft: color-mix(in srgb, var(--portal-body-color) 78%, transparent);
  --hub-text-muted: var(--portal-muted-color);
  --hub-border: var(--portal-border-color);
  --hub-border-soft: color-mix(in srgb, var(--portal-border-color) 55%, transparent);
  --hub-border-strong: color-mix(in srgb, var(--portal-border-color) 80%, var(--portal-body-color) 12%);
  --hub-accent: var(--portal-accent);
  --hub-accent-soft: var(--portal-accent-soft);
  --hub-focus: color-mix(in srgb, var(--portal-accent) 28%, transparent);
  --hub-shadow: var(--portal-surface-shadow);

  --app-bg: var(--portal-body-bg);
  --app-fg: var(--portal-body-color);
  --app-muted: var(--portal-muted-color);
  --app-border: var(--portal-border-color);
  --app-panel: var(--portal-card-bg);
  --app-soft-bg: var(--portal-surface-alt-bg);
  --app-chip: var(--portal-card-muted-bg);
  --app-accent: var(--portal-accent);
  --app-accent-2: var(--portal-accent-strong);
  --app-shadow: var(--portal-surface-shadow);
}

html.theme-ocean[data-bs-theme="dark"],
body.theme-ocean {
  color-scheme: dark;
  --uh-background: var(--portal-body-bg);
  --uh-surface: var(--portal-surface-bg);
  --uh-surface-soft: var(--portal-card-muted-bg);
  --uh-surface-strong: color-mix(in srgb, var(--portal-card-bg) 88%, var(--portal-body-bg) 12%);
  --uh-border: var(--portal-border-color);
  --uh-border-soft: color-mix(in srgb, var(--portal-border-color) 55%, transparent);
  --uh-border-strong: color-mix(in srgb, var(--portal-border-color) 90%, var(--portal-body-color) 14%);
  --uh-text-primary: var(--portal-body-color);
  --uh-text-soft: color-mix(in srgb, var(--portal-body-color) 80%, transparent);
  --uh-text-muted: var(--portal-muted-color);
  --uh-accent: var(--portal-accent);
  --uh-accent-soft: var(--portal-accent-soft);
  --uh-chip-bg: color-mix(in srgb, var(--portal-accent) 14%, transparent);
  --uh-chip-border: color-mix(in srgb, var(--portal-accent) 36%, transparent);
  --uh-focus-ring: 0 0 0 .2rem color-mix(in srgb, var(--portal-accent) 32%, transparent);
  --uh-backdrop-glow: color-mix(in srgb, var(--portal-accent) 12%, transparent);
  --uh-shadow: var(--portal-surface-shadow);
  --uh-shadow-soft: 0 12px 28px -18px color-mix(in srgb, #000 60%, transparent);

  --hub-surface: var(--portal-surface-bg);
  --hub-surface-soft: var(--portal-card-muted-bg);
  --hub-surface-strong: color-mix(in srgb, var(--portal-card-bg) 88%, var(--portal-body-bg) 12%);
  --hub-text: var(--portal-body-color);
  --hub-text-soft: color-mix(in srgb, var(--portal-body-color) 80%, transparent);
  --hub-text-muted: var(--portal-muted-color);
  --hub-border: var(--portal-border-color);
  --hub-border-soft: color-mix(in srgb, var(--portal-border-color) 55%, transparent);
  --hub-border-strong: color-mix(in srgb, var(--portal-border-color) 90%, var(--portal-body-color) 14%);
  --hub-accent: var(--portal-accent);
  --hub-accent-soft: var(--portal-accent-soft);
  --hub-focus: color-mix(in srgb, var(--portal-accent) 32%, transparent);
  --hub-shadow: var(--portal-surface-shadow);

  --token-shadow-sm: 0 4px 12px rgba(0, 0, 0, .45);
  --token-shadow-md: 0 12px 28px rgba(0, 0, 0, .5);
  --token-shadow-lg: 0 22px 52px rgba(0, 0, 0, .55);

  /* Legacy --brand-* alias (used by widgets that predate --portal-*) — routes
     through the active theme's accent. Brand red is the accent on Ocean too
     now, so --brand-red-rgb inherits the canonical --bs-primary-rgb from the
     :root block above; no per-theme override needed. */
  --brand-red: var(--portal-accent);
  --brand-red-dark: var(--portal-accent-strong);
  --brand-red-soft: var(--portal-accent-soft);
  --brand-ink: var(--portal-body-color);
  --brand-muted: var(--portal-muted-color);

  /* Legacy --app-* namespace, also used by older shells. Mirroring through
     --portal-* makes Ocean show navy surfaces and cyan accents in those
     components without per-shell overrides. */
  --app-bg: var(--portal-body-bg);
  --app-fg: var(--portal-body-color);
  --app-muted: var(--portal-muted-color);
  --app-border: var(--portal-border-color);
  --app-panel: var(--portal-card-bg);
  --app-soft-bg: var(--portal-card-muted-bg);
  --app-chip: var(--portal-card-muted-bg);
  --app-accent: var(--portal-accent);
  --app-accent-2: var(--portal-accent-strong);
  --app-shadow: var(--portal-surface-shadow);

  /* Bootstrap link colors — the auto-derivation in _build_theme_meta only
     sets --bs-link-color/--bs-link-hover-color when missing; force them to
     Ocean's cyan so links don't stay graphite-tinted on Ocean. */
  --bs-link-color: var(--portal-accent);
  --bs-link-color-rgb: 56, 189, 248;
  --bs-link-hover-color: var(--portal-accent-strong);
  --bs-link-hover-color-rgb: 2, 132, 199;
}

/* ============================================================================
   23rd-Dark cascade — routes secondary token namespaces from --portal-*
   ----------------------------------------------------------------------------
   --portal-* values are set on :root by the THEME_CHOICES injection
   (templates/base.html); this block extends them by deriving the legacy
   --app-*, --brand-*, --uh-*, --hub-*, --token-* namespaces from the same
   --portal-* source. No hardcoded hex: every color flows from THEME_CHOICES.
   Mirrors the Light (line 127) and Ocean (line 163) blocks above.
   ============================================================================ */
html.theme-23rd-dark[data-bs-theme="dark"],
body.theme-23rd-dark {
  color-scheme: dark;

  --uh-background: var(--portal-body-bg);
  --uh-surface: var(--portal-surface-bg);
  --uh-surface-soft: var(--portal-surface-alt-bg);
  --uh-surface-strong: var(--portal-card-bg);
  --uh-border: var(--portal-border-color);
  --uh-border-soft: color-mix(in srgb, var(--portal-border-color) 70%, transparent);
  --uh-border-strong: var(--portal-surface-outline);
  --uh-text-primary: var(--portal-body-color);
  --uh-text-soft: color-mix(in srgb, var(--portal-body-color) 80%, transparent);
  --uh-text-muted: var(--portal-muted-color);
  --uh-accent: var(--portal-accent);
  --uh-accent-soft: var(--portal-accent-soft);
  --uh-chip-bg: var(--portal-accent-soft);
  --uh-chip-border: color-mix(in srgb, var(--portal-accent) 30%, transparent);
  --uh-focus-ring: 0 0 0 .2rem color-mix(in srgb, var(--portal-accent) 32%, transparent);
  --uh-backdrop-glow: transparent;
  --uh-shadow: var(--portal-surface-shadow);
  --uh-shadow-soft: var(--portal-surface-shadow);

  --hub-surface: var(--portal-surface-bg);
  --hub-surface-soft: var(--portal-surface-alt-bg);
  --hub-surface-strong: var(--portal-card-bg);
  --hub-text: var(--portal-body-color);
  --hub-text-soft: color-mix(in srgb, var(--portal-body-color) 80%, transparent);
  --hub-text-muted: var(--portal-muted-color);
  --hub-border: var(--portal-border-color);
  --hub-border-soft: color-mix(in srgb, var(--portal-border-color) 70%, transparent);
  --hub-border-strong: var(--portal-surface-outline);
  --hub-accent: var(--portal-accent);
  --hub-accent-soft: var(--portal-accent-soft);
  --hub-focus: color-mix(in srgb, var(--portal-accent) 32%, transparent);
  --hub-shadow: var(--portal-surface-shadow);

  --app-bg: var(--portal-body-bg);
  --app-fg: var(--portal-body-color);
  --app-muted: var(--portal-muted-color);
  --app-border: var(--portal-border-color);
  --app-panel: var(--portal-card-bg);
  --app-soft-bg: var(--portal-surface-alt-bg);
  --app-chip: var(--portal-card-muted-bg);
  --app-accent: var(--portal-accent);
  --app-accent-2: var(--portal-accent-strong);
  --app-shadow: var(--portal-surface-shadow);

  --brand-red: var(--portal-accent);
  --brand-red-dark: var(--portal-accent-strong);
  --brand-red-soft: var(--portal-accent-soft);
  --brand-ink: var(--portal-body-color);
  --brand-muted: var(--portal-muted-color);

  --token-shadow-sm: var(--portal-surface-shadow, 0 4px 12px rgba(0, 0, 0, .35));
  --token-shadow-md: var(--portal-surface-shadow, 0 10px 24px rgba(0, 0, 0, .4));
  --token-shadow-lg: var(--portal-surface-shadow, 0 10px 24px rgba(0, 0, 0, .35));
}

html.theme-23rd-dark[data-bs-theme="dark"] body.user-home-theme::before,
html.theme-23rd-dark[data-bs-theme="dark"] body.user-home-theme::after,
body.theme-23rd-dark.user-home-theme::before,
body.theme-23rd-dark.user-home-theme::after {
  background: transparent;
  opacity: 0;
}

/* Portal-wide widget rules in 23rd-dark — read from --portal-* so palette
   changes flow through automatically. */
html.theme-23rd-dark[data-bs-theme="dark"] :where(
  #main-content, .portal-wrapper, .app-main, .app-main > .container-fluid,
  .portal-page, .portal-shell-wrap, .portal-two-panel-shell,
  .portal-screenfit-page, .admin-shell, .command-shell, .clients-hub-shell,
  .vhq-shell, .billing-hub-shell, .hr-hub-shell, .boyz-portal-shell,
  .cmcs-shell, .page, .wo-shell, .wo-main, .wo-pane
) {
  background-color: var(--portal-body-bg);
  color: var(--portal-body-color);
}

html.theme-23rd-dark[data-bs-theme="dark"] :where(
  .card, .panel, .portal-panel, .cmcs-card, .portal-widget-surface,
  .dropdown-menu, .modal-content, .offcanvas, .list-group-item, .accordion-item,
  .table-responsive, .portal-table-shell, .portal-state-empty,
  .portal-state-loading, .portal-state-error, .wo-rail-card, .wo-view-card,
  .wo-filter-group, .wo-results-card, .wo-table-wrap, .two3-card, .pulse-panel,
  .people-pulse-card, .people-pulse-midwidget, .people-pulse-total-card,
  .people-pulse-badge, .ct-widget-panel, .ct-phone-tree-card
) {
  background-color: var(--portal-card-bg);
  background-image: none;
  border-color: var(--portal-border-color);
  box-shadow: var(--portal-surface-shadow);
  color: var(--portal-body-color);
}

html.theme-23rd-dark[data-bs-theme="dark"] :where(
  .card-header, .card-footer, .panel-header, .panel-footer, .modal-header,
  .modal-footer, .cmcs-card-header, .portal-panel__header,
  .portal-panel__footer, .table thead th, .wo-table-wrap thead th,
  .ct-phone-tree-card-head
) {
  background-color: var(--portal-card-muted-bg);
  background-image: none;
  border-color: var(--portal-border-color);
  color: var(--portal-body-color);
}

html.theme-23rd-dark[data-bs-theme="dark"] :where(
  .form-control, .form-select, .input-group-text, textarea, select,
  input[type="text"], input[type="search"], input[type="email"],
  input[type="number"], input[type="date"], input[type="datetime-local"],
  .ct-widget-input, .ct-widget-select, .ct-widget-textarea
) {
  background-color: var(--portal-input-bg);
  border-color: var(--portal-input-border);
  box-shadow: none;
  color: var(--portal-body-color);
}

html.theme-23rd-dark[data-bs-theme="dark"] :where(
  .form-control, .form-select, textarea, select, input,
  .ct-widget-input, .ct-widget-select, .ct-widget-textarea
):focus {
  border-color: color-mix(in srgb, var(--portal-accent) 35%, var(--portal-input-border));
  box-shadow: 0 0 0 .18rem var(--portal-input-focus-ring);
}

html.theme-23rd-dark[data-bs-theme="dark"] .form-control::placeholder,
html.theme-23rd-dark[data-bs-theme="dark"] textarea::placeholder,
html.theme-23rd-dark[data-bs-theme="dark"] input::placeholder {
  color: var(--portal-muted-color);
}

html.theme-23rd-dark[data-bs-theme="dark"] :where(
  .text-muted, .text-body-secondary, small, .small,
  .portal-page-header__subtitle, .portal-section-header__subtitle,
  .wo-rail-subtitle, .wo-view-subtitle, .wo-results-eyebrow, .ct-widget-label
) {
  color: var(--portal-muted-color);
}

html.theme-23rd-dark[data-bs-theme="dark"] :where(
  .btn-primary, .btn-success, .theme-option.btn-primary, .btn-brand,
  .ct-widget-btn--primary, .wo-filter-actions .btn:not(.btn-outline),
  .wo-results-actions .btn:not(.btn-outline)
) {
  background-color: var(--portal-accent);
  background-image: none;
  border-color: var(--portal-accent);
  box-shadow: none;
  color: var(--portal-button-primary-text);
}

html.theme-23rd-dark[data-bs-theme="dark"] :where(
  .btn-primary:hover, .btn-primary:focus, .btn-success:hover, .btn-success:focus,
  .theme-option.btn-primary:hover, .btn-brand:hover, .ct-widget-btn--primary:hover
) {
  background-color: var(--portal-accent-strong);
  border-color: var(--portal-accent-strong);
  color: var(--portal-button-primary-text);
}

html.theme-23rd-dark[data-bs-theme="dark"] :where(
  .btn-outline-primary, .btn-outline-success, .btn-outline-secondary,
  .btn-outline-dark, .btn-secondary, .btn-outline, .ct-widget-btn--ghost,
  .wo-toggle, .wo-saved-item
) {
  background-color: var(--portal-button-secondary-bg);
  background-image: none;
  border-color: var(--portal-button-secondary-border);
  box-shadow: none;
  color: var(--portal-button-secondary-text);
}

html.theme-23rd-dark[data-bs-theme="dark"] :where(
  .btn-outline-primary:hover, .btn-outline-success:hover,
  .btn-outline-secondary:hover, .btn-outline-dark:hover, .btn-secondary:hover,
  .btn-outline:hover, .ct-widget-btn--ghost:hover, .wo-toggle:hover,
  .wo-saved-item:hover
) {
  background-color: var(--portal-card-muted-bg);
  border-color: var(--portal-surface-outline);
  color: var(--portal-body-color);
}

html.theme-23rd-dark[data-bs-theme="dark"] .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--portal-body-color);
  --bs-table-border-color: var(--portal-border-color);
  --bs-table-hover-bg: var(--portal-card-muted-bg);
  --bs-table-hover-color: var(--portal-body-color);
  color: var(--portal-body-color);
}

html.theme-23rd-dark[data-bs-theme="dark"] :where(
  .table th, .table td, .list li, .wo-activity, .ct-widget-footer,
  .ct-phone-tree-grid-item
) {
  border-color: var(--portal-border-color);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --token-motion-duration-fast: 0ms;
    --token-motion-duration-base: 0ms;
  }
}