body.dark-theme {
      --cf-canvas: #0f0f0f;
      --cf-surface: #1a1a1a;
      --cf-text: #f3f4f6;
      --cf-muted: #9ca3af;
      --cf-border: #2a2a2a;
      --cf-accent: #37c2e0;
      --cf-accent-contrast: #0f0f0f;
      --cf-dark-card: var(--cf-surface);
      --cf-dark-surface: #141414;
      --cf-dark-sunken: #202020;
      --cf-dark-border: var(--cf-border);
      --cf-dark-border-strong: #3a3a3a;
      --cf-dark-text-strong: var(--cf-text);
      --cf-dark-text: #d1d5db;
      --cf-dark-muted: var(--cf-muted);
      --cf-dark-faint: #6b7280;
      --cf-dark-teal: var(--cf-accent);
      --cf-dark-teal-bg: rgba(0,106,133,0.22);
      --cf-dark-teal-border: rgba(55,194,224,0.35);
      --cf-dark-green: #4ade80;
      --cf-dark-green-bg: rgba(34,197,94,0.15);
      --cf-dark-green-border: rgba(74,222,128,0.35);
      --cf-dark-red: #f87171;
      --cf-dark-red-bg: rgba(239,68,68,0.15);
      --cf-dark-red-border: rgba(248,113,113,0.35);
      --cf-dark-amber: #fbbf24;
      --cf-dark-amber-bg: rgba(245,158,11,0.15);
      --cf-dark-amber-border: rgba(251,191,36,0.35);
      --cf-dark-blue: #60a5fa;
      --cf-dark-blue-bg: rgba(59,130,246,0.15);
      --cf-dark-blue-border: rgba(96,165,250,0.35);
      --cf-dark-purple: #a78bfa;
      --cf-dark-purple-bg: rgba(139,92,246,0.15);
      --cf-dark-purple-border: rgba(167,139,250,0.35);
      --cf-dark-orange: #fb923c;
      --cf-dark-orange-bg: rgba(249,115,22,0.15);
    }

    /* Light theme styles */
    /* The body background IS the document canvas, and the canvas is what the
       browser paints in any region the compositor has not rasterised yet. This
       used to be a mint gradient (#f0fdf4 -> #dcfce7 -> #ecfdf5) left over from
       the pre-refonte design; nothing ever showed it on purpose (the fixed white
       sidebar and `main.main-content`'s #F5F6F8 cover the viewport), so its only
       visible effect was a green flash over the not-yet-painted strip during a
       fast scroll. Keep it equal to `main.main-content` — then an unpainted tile
       is indistinguishable from the page. */
    body.light-theme {
      background: var(--cf-canvas) !important;
    }

    body.light-theme .card-gradient {
      background: rgba(255, 255, 255, 0.9) !important;
      border-color: #e2e8f0 !important;
    }

    body.light-theme .bg-gray-900 {
      background-color: #f8fafc !important;
    }

    body.light-theme .bg-gray-800 {
      background-color: #ffffff !important;
    }

    body.light-theme .bg-gray-700 {
      background-color: #f1f5f9 !important;
    }

    body.light-theme .border-gray-800 {
      border-color: #e2e8f0 !important;
    }

    body.light-theme .border-gray-700 {
      border-color: #e2e8f0 !important;
    }

    body.light-theme .border-gray-600 {
      border-color: #cbd5e1 !important;
    }

    body.light-theme .text-white {
      color: #1e293b !important;
    }
    /* CFT-908 — the broad .text-white remap above is needed for legacy text that
       sits on now-light surfaces, but it also darkened white BUTTON text on
       brand-teal backgrounds (making "Envoyer à tous", selected interest tags,
       and Confirmer/Envoyer unreadable). Re-whiten .text-white when it rides on a
       teal/primary button — same element or a teal container above it. */
    body.light-theme .cf-btn-primary.text-white,
    body.light-theme .cf-btn-primary .text-white,
    body.light-theme .text-white.bg-\[\#006a85\],
    body.light-theme .bg-\[\#006a85\] .text-white,
    body.light-theme .text-white.from-\[\#006a85\],
    body.light-theme .from-\[\#006a85\] .text-white {
      color: #ffffff !important;
    }

    /* DC "Smart Search" (Figma "app web DC") paints white text/icons on inline
       coloured backgrounds — rank badges, avatar initials, send icons, score/mode
       badges. The broad .text-white→dark remap above (needed for legacy white-on-
       white) would darken all of them, so re-whiten every .text-white inside the
       search view. Everything here rides on a coloured chip/badge/button. */
    body.light-theme .cd-search-root .text-white { color: #ffffff !important; }

    /* Same problem, rest of the casting-director app (Suivi, Réception, Carnet,
       Nouveau projet, triage, scheduler). Its white labels ride on INLINE
       style="background:…" — teal action buttons, cdAvatarColor initials chips, the
       photo-gradient caption, the KPI hero — so none of the class-based exceptions
       above could match and every one of them rendered dark slate on a saturated
       background. Everything carrying .text-white under this root sits on a coloured
       or photographic surface, same as Smart Search. */
    body.light-theme .cd-app-root .text-white { color: #ffffff !important; }

    body.light-theme .text-gray-100 {
      color: #334155 !important;
    }

    body.light-theme .text-gray-200 {
      color: #475569 !important;
    }

    body.light-theme .text-gray-300 {
      color: #64748b !important;
    }

    body.light-theme .text-gray-400 {
      color: #64748b !important;
    }

    body.light-theme .text-gray-500 {
      color: #94a3b8 !important;
    }

    body.light-theme aside {
      background-color: rgba(248, 250, 252, 0.95) !important;
    }

    body.light-theme input,
    body.light-theme textarea,
    body.light-theme select {
      background-color: #f8fafc !important;
      border-color: #e2e8f0 !important;
      color: #1e293b !important;
    }

    body.light-theme input::placeholder,
    body.light-theme textarea::placeholder {
      color: #94a3b8 !important;
    }

    /* CFT-908 #7 — actor-fiche read-only fields. Every fiche tab that becomes
       editable via "Modifier" wraps its inputs in <fieldset disabled
       class="actor-edit-fieldset">. Outside edit mode the theme rule above still
       painted them as grey text boxes, so a read-only profile looked editable.
       While disabled, strip the box (transparent bg + border, no padding, no
       select chrome) so the value reads as plain text. Higher specificity than
       the theme `input` rule above, so it wins in both themes. */
    fieldset[disabled].actor-edit-fieldset input,
    fieldset[disabled].actor-edit-fieldset select,
    fieldset[disabled].actor-edit-fieldset textarea {
      background: transparent !important;
      border-color: transparent !important;
      padding-left: 0 !important;
      cursor: default !important;
      color: #0f172a !important;
      -webkit-appearance: none;
      appearance: none;
    }
    fieldset[disabled].actor-edit-fieldset select { background-image: none !important; }
    fieldset[disabled].actor-edit-fieldset input::placeholder,
    fieldset[disabled].actor-edit-fieldset textarea::placeholder { color: #cbd5e1 !important; }
    /* Empty selects show a light "—" like the input placeholders. */
    fieldset[disabled].actor-edit-fieldset select[data-empty] { color: #cbd5e1 !important; }

    /* Home page background - adapts to theme */
    .home-page-bg {
      background: linear-gradient(to bottom, rgba(30, 58, 138, 0.3), #111827, #111827);
    }

    body.light-theme .home-page-bg {
      background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 50%, #ecfdf5 100%) !important;
    }

    /* Dark theme overrides */
    body.dark-theme .sidebar-main {
      background: #0f0f0f !important;
      border-right-color: #1a1a1a !important;
    }
    body.dark-theme .cf-topbar {
      background: #0f0f0f !important;
      border-bottom-color: #1a1a1a !important;
    }
    body.dark-theme .main-content {
      background: #0f0f0f !important;
    }
    body.dark-theme .mobile-nav {
      background: #0f0f0f !important;
      border-top-color: #1a1a1a !important;
    }
    body.dark-theme .home-page-bg {
      background: #0f0f0f !important;
    }
    body.dark-theme .card-gradient {
      background: rgba(15, 15, 15, 0.9) !important;
      border-color: #1a1a1a !important;
    }
    body.dark-theme .bg-gray-900,
    body.dark-theme .bg-gray-800,
    body.dark-theme .bg-gray-700 {
      background-color: #0f0f0f !important;
    }
    body.dark-theme .border-gray-800,
    body.dark-theme .border-gray-700,
    body.dark-theme .border-gray-600 {
      border-color: #1a1a1a !important;
    }
    body.dark-theme input,
    body.dark-theme textarea,
    body.dark-theme select {
      background-color: #1a1a1a !important;
      border-color: #333333 !important;
      color: #e5e7eb !important;
    }
    body.dark-theme input::placeholder,
    body.dark-theme textarea::placeholder {
      color: #6b7280 !important;
    }
    body.dark-theme .sidebar-main img[src*="castflow-wordmark"] {
      content: url('/agency/castflow-wordmark-dark.png') !important;
      filter: none !important;
    }
    body.dark-theme .sidebar-main img[src*="/agency/assets/icons/"] {
      filter: invert(1) !important;
    }
    body.dark-theme .cf-topbar input {
      color: #e5e7eb !important;
    }

    .nav-arrow-icon {
      width: 2.5rem;
      height: 2.5rem;
      transition: all 0.2s;
    }

    .nav-arrow-label {
      font-size: 0.75rem;
      font-weight: 600;
      text-align: center;
      max-width: 100px;
      line-height: 1.2;
      color: white;
    }

    .nav-arrow-sublabel {
      font-size: 0.65rem;
      font-weight: 400;
      text-align: center;
      max-width: 120px;
      line-height: 1.2;
      color: rgba(255, 255, 255, 0.7);
      margin-top: 4px;
    }