/* =============================================================================
* v5-cs-navy.css — Cars Services canvas: Midnight Navy + Workshop Teal
*
* Final implementation of the "Cars Services Colour Direction" recommendation.
* Re-skins the workshop module from RAC's near-black "vault" to a lifted dark
* NAVY canvas, and swaps RAC orange for the refined Workshop Teal accent — so
* Cars Services matches the platform but reads as its own room.
*
* THE TRICK (why this file is tiny and low-risk)
* The V5 layers (v5-shell / v5-worklists / v5-detail-flow / v5-cs-ops) already
* paint every authenticated surface from CSS VARIABLES: var(--v5-void),
* var(--v5-void-3), var(--v5-rac-orange), var(--v5-on-void-2)... So we don't
* re-style any component — we just REBIND those variables inside the
* [data-company="cars-services"] scope. Every existing rule re-skins itself.
*
* LOAD (base.html) — add ONE line, LAST in the CSS chain:
*
* (This supersedes the earlier accent-only patch v5-cs-accent.css — use one
* or the other, not both. This file does everything that one did, plus navy.)
*
* SAFETY
* - Additive only. No existing stylesheet, template, model, migration, or
* test-pinned class name is touched.
* - Every rule is scoped to [data-company="cars-services"]; Rent A Car and
* every other surface are provably unaffected (they keep void + orange).
* - Pure colour. No layout / spacing / font / structural change.
* - Reversible: delete the file + the line.
* ============================================================================= */
/* -----------------------------------------------------------------------------
* 1. Re-skin the vault → Midnight Navy
* Rebinding these makes the sidebar, topbar, content canvas, every card,
* table, filter bar, modal and form re-skin to navy with zero per-component
* rules (they all read these vars already).
* --------------------------------------------------------------------------- */
[data-company="cars-services"] {
--v5-abyss: #121d33; /* sidebar */
--v5-void: #1a2942; /* page canvas — the "dark blue, not black" */
--v5-void-2: #1f2f49; /* topbar · card gradient base */
--v5-void-3: #243653; /* cards · wells · filter bars */
--v5-carbon: #2a3c5b; /* raised surfaces */
--v5-steel: #36496a; /* heavy dividers */
/* Generic tokens used by ds.css, the Tailwind bridge, and page modules. */
--bg: #1a2942;
--surface: #1f2f49;
--surface-2: #243653;
--card: #243653;
--line: rgba(255, 255, 255, 0.09);
--line-soft: rgba(255, 255, 255, 0.05);
--ink: #f3f5fa;
--ink-2: #d8deeb;
--muted: #9aa6bd;
--on: #d8deeb;
--panel: #243653;
--topbar: #1f3049;
--sidebar: #121d33;
--sidebar-2: #16223c;
--sidebar-3: #0d1626;
--on-sidebar: #c7ccd6;
--on-sidebar-muted: #7c8398;
--v5-on-void: #d8deeb; /* body text on navy */
--v5-on-void-2: #f3f5fa; /* headings / primary text */
--v5-on-void-mute: #9aa6bd; /* secondary / labels */
--v5-on-void-dim: #71809b; /* tertiary / meta */
--v5-line: rgba(255, 255, 255, 0.09);
--v5-line-soft: rgba(255, 255, 255, 0.05);
--v5-line-strong: rgba(255, 255, 255, 0.15);
--green: #84d091;
--amber: #ecbf6a;
--red: #ea7a6c;
--blue: #9cc6f0;
--slate: #71809b;
}
/* -----------------------------------------------------------------------------
* 2. Swap RAC orange → Workshop Teal (root-cause: kills every orange leak)
* Every focus ring, active nav rail, card-title tick, eyebrow, link hover,
* file-upload button and primary CTA that reads var(--v5-rac-orange) becomes
* teal in one move. RAC keeps orange because this is company-scoped.
* --------------------------------------------------------------------------- */
[data-company="cars-services"] {
--v5-rac-orange: #1FA39B;
--v5-rac-orange-2: #16847D;
--v5-rac-tint: rgba(31, 163, 155, 0.14);
--v5-rac-glow: rgba(31, 163, 155, 0.42);
/* keep the group + company accent band on the same refined teal scale */
--company-accent: #1FA39B;
--company-accent-2: #16847D;
--company-accent-3: #34BEB5;
--company-accent-tint: rgba(31, 163, 155, 0.13);
--accent: var(--company-accent);
--accent-2: var(--company-accent-2);
--accent-3: var(--company-accent-3);
--accent-tint: var(--company-accent-tint);
--cs-accent-strong: #3fc8be;
--cs-warn: #ecbf6a;
}
[data-company="cars-services"] .app-main {
--cs-accent: #1FA39B;
--cs-accent-2: #16847D;
--cs-accent-strong:#3fc8be;
--cs-accent-hover: #34BEB5;
--cs-accent-tint: rgba(31, 163, 155, 0.13);
--cs-accent-ink: #04211F; /* dark ink for text on a teal fill */
}
/* -----------------------------------------------------------------------------
* 3. Canvas glow — v5-shell.css hard-codes an orange radial (literal rgba, not
* a token), so it can't be reached by the variable swap. Repaint it teal.
* --------------------------------------------------------------------------- */
[data-company="cars-services"] .app-main {
background-image:
linear-gradient(to right, rgba(255, 255, 255, 0.014) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255, 255, 255, 0.014) 1px, transparent 1px),
radial-gradient(900px 600px at 100% 0%, rgba(31, 163, 155, 0.08), transparent 60%);
background-size: 56px 56px, 56px 56px, auto;
background-position: 0 0, 0 0, top right;
background-repeat: repeat, repeat, no-repeat;
}
/* -----------------------------------------------------------------------------
* 4. Contrast nicety: the V5 primary button paints text with var(--v5-void).
* After the navy rebind that is navy-on-teal (readable, but not ideal). Use
* the darker accent-ink for a cleaner read on the teal fill.
* --------------------------------------------------------------------------- */
[data-company="cars-services"] .app-main .btn--primary,
[data-company="cars-services"] .app-main .btn--accent,
[data-company="cars-services"] .app-main .flow5-action__btn--primary,
[data-company="cars-services"] .app-main input[type="file"]::file-selector-button,
[data-company="cars-services"] .app-main input[type="file"]::-webkit-file-upload-button {
color: var(--cs-accent-ink);
}
/* -----------------------------------------------------------------------------
* 5. (OPTIONAL — Phase 2) One status palette.
* Maps the shared .badge primitive onto the single v5 status set so a status
* looks identical as a badge, a pill, and a stepper dot. Left commented
* because .badge variants are referenced by tests — enable after QA.
* --------------------------------------------------------------------------- */
/*
[data-company="cars-services"] .app-main .badge { border-radius: 999px; }
[data-company="cars-services"] .app-main .badge--approved,
[data-company="cars-services"] .app-main .badge--available,
[data-company="cars-services"] .app-main .badge--active {
background: rgba(108, 191, 122, 0.16); color: #84d091; border-color: rgba(108, 191, 122, 0.46);
}
[data-company="cars-services"] .app-main .badge--pending,
[data-company="cars-services"] .app-main .badge--draft {
background: rgba(227, 179, 82, 0.16); color: #ecbf6a; border-color: rgba(227, 179, 82, 0.46);
}
[data-company="cars-services"] .app-main .badge--rejected,
[data-company="cars-services"] .app-main .badge--cancelled,
[data-company="cars-services"] .app-main .badge--on-hold {
background: rgba(214, 85, 67, 0.16); color: #ea7a6c; border-color: rgba(214, 85, 67, 0.5);
}
[data-company="cars-services"] .app-main .badge--reserved,
[data-company="cars-services"] .app-main .badge--escalated {
background: rgba(124, 177, 224, 0.16); color: #9cc6f0; border-color: rgba(124, 177, 224, 0.46);
}
*/
/* =============================================================================
* END v5-cs-navy.css
* Net change: one new static file + one line in base.html.
* RAC canvas: untouched (still void + orange).
* CS canvas: Midnight Navy #1A2942 + Workshop Teal #1FA39B, leaks closed.
* ============================================================================= */