/* DO Suite look for HRMS (owner-approved v2, 29 Oct 2026). Loaded after flo.css and flo-dark.css only when the
   "New design" switch is on; index.php then puts class="do-look" on <html>. Switch it off and the Flo look returns as it was.
   Rules: ~/.claude/skills/do-suite-design. Kit: HRMS/do-ui. Warm neutrals + one deep-green accent, ink primary buttons,
   Geist only, no gradients, no glow, no glass, no uppercase labels, light-tinted sidebar. */

/* ── Tokens: light ── */
html.do-look {
    --fl-bg: #FAFAF9; --fl-bg-2: #F3F4F2;
    --fl-panel: #FFFFFF; --fl-panel-2: #F3F4F2; --fl-panel-3: #ECEDEA;
    --fl-line: #E6E7E4; --fl-line-2: #D9DBD7;
    --fl-text: #171917; --fl-soft: #3D403D; --fl-faint: #5F635F;
    --fl-iris: #0E7C5A; --fl-iris-2: #0B6A4D; --fl-iris-soft: rgb(14 124 90 / .09); --fl-iris-ink: #0B6A4D;
    --fl-aqua: #0E7C5A; --fl-ember: #A15C07; --fl-rose: #C23B30;
    --fl-glow: transparent; --fl-ring: rgb(14 124 90 / .16); --fl-glass: #FAFAF9; --fl-grid: transparent;
    --fl-shadow: 0 0 0 1px transparent; --fl-shadow-lg: 0 8px 28px rgb(0 0 0 / .14);
    --fl-side: #F3F4F2; --fl-side-2: #ECEDEA; --fl-side-line: #E6E7E4; --fl-side-text: #3D403D;
    --fl-overlay: rgb(12 13 12 / .45);
    --fl-rgb-appbg: 250 250 249; --fl-rgb-panel: 255 255 255; --fl-rgb-primary: 23 25 23;
    --fl-rgb-textmain: 23 25 23; --fl-rgb-textsoft: 95 99 95; --fl-rgb-stroke: 230 231 228;
    --fl-display: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --fl-body: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --ui-radius: 12px; --ui-radius-sm: 8px;
    --do-ink: #171917; --do-on-ink: #FAFAF9; --do-ink-hover: #2B2E2B; --do-control: #8A8E89;
    color-scheme: light;
}
/* ── Tokens: dark (elevation by lightness, no shadows) ── */
html.do-look[data-fl-theme="dark"] {
    --fl-bg: #0C0D0C; --fl-bg-2: #111211;
    --fl-panel: #151615; --fl-panel-2: #1B1C1B; --fl-panel-3: #212321;
    --fl-line: rgb(255 255 255 / .07); --fl-line-2: rgb(255 255 255 / .12);
    --fl-text: #ECEDEB; --fl-soft: #C2C5C1; --fl-faint: #8F948E;
    --fl-iris: #3FCF98; --fl-iris-2: #5ADBA9; --fl-iris-soft: rgb(63 207 152 / .12); --fl-iris-ink: #3FCF98;
    --fl-aqua: #3FCF98; --fl-ember: #E8A94A; --fl-rose: #F07A6E;
    --fl-glow: transparent; --fl-ring: rgb(63 207 152 / .2); --fl-glass: #0C0D0C; --fl-grid: transparent;
    --fl-shadow: none; --fl-shadow-lg: 0 0 0 1px rgb(255 255 255 / .12);
    --fl-side: #111211; --fl-side-2: #151615; --fl-side-line: rgb(255 255 255 / .07); --fl-side-text: #C2C5C1;
    --fl-overlay: rgb(0 0 0 / .6);
    --fl-rgb-appbg: 12 13 12; --fl-rgb-panel: 21 22 21; --fl-rgb-primary: 236 237 235;
    --fl-rgb-textmain: 236 237 235; --fl-rgb-textsoft: 143 148 142; --fl-rgb-stroke: 38 40 38;
    --do-ink: #ECEDEB; --do-on-ink: #111211; --do-ink-hover: #FFFFFF; --do-control: #6A6F67;
    color-scheme: dark;
}

/* ── Base: no ambient glow or grid, one family, calm headings ── */
html.do-look body { font-feature-settings: normal; }
html.do-look body::before, html.do-look body::after { display: none !important; background: none !important; }
html.do-look #mainContent h1, html.do-look #mainContent h2, html.do-look #mainContent h3, html.do-look #mainContent h4,
html.do-look #pageTitle, html.do-look .brand-copy p:first-child { font-family: var(--fl-body) !important; font-weight: 600 !important; letter-spacing: -.015em; text-wrap: balance; }
html.do-look #mainContent .font-extrabold, html.do-look #mainContent .font-black { font-weight: 600 !important; }
html.do-look #mainContent .uppercase, html.do-look #pageEyebrow, html.do-look #mainContent thead th,
html.do-look .fl-tag, html.do-look .fl-pal-group, html.do-look #appSidebar .nav-group-label, html.do-look .auth-visual .fl-login-copy {
    text-transform: none !important; letter-spacing: 0 !important; font-family: var(--fl-body) !important;
}
html.do-look #mainContent thead th { font-size: 12.5px !important; font-weight: 500 !important; color: var(--fl-faint) !important; }
html.do-look #mainContent thead { background: var(--fl-panel) !important; }
html.do-look #mainContent table, html.do-look #mainContent .tabular-nums, html.do-look #mainContent td { font-variant-numeric: tabular-nums; }
html.do-look :focus-visible { outline: 2px solid var(--fl-iris) !important; outline-offset: 2px; }
html.do-look ::selection { background: var(--fl-iris-soft); }

/* ── Sidebar: light-tinted neutral, accent only on the current item ── */
html.do-look #appSidebar { background: var(--fl-side) !important; background-image: none !important; border-right: 1px solid var(--fl-side-line) !important; }
html.do-look #appSidebar > div > .sticky.top-0::after { background: var(--fl-side) !important; }
html.do-look #appSidebar .brand-logo-fallback { box-shadow: none !important; }
html.do-look #appSidebar .brand-copy p { color: var(--fl-text) !important; }
html.do-look #appSidebar .menu-link, html.do-look #appSidebar .menu-button { color: var(--fl-side-text) !important; }
html.do-look #appSidebar .menu-link:hover, html.do-look #appSidebar .menu-button:hover { background: var(--fl-panel) !important; color: var(--fl-text) !important; }
html.do-look[data-fl-theme="dark"] #appSidebar .menu-link:hover, html.do-look[data-fl-theme="dark"] #appSidebar .menu-button:hover { background: var(--fl-panel-2) !important; }
html.do-look #appSidebar .menu-active, html.do-look #appSidebar .menu-link.menu-active { background: var(--fl-iris-soft) !important; color: var(--fl-iris) !important; box-shadow: none !important; font-weight: 500; }
html.do-look #appSidebar .menu-active::before { display: none !important; }
html.do-look #appSidebar .menu-active i { color: var(--fl-iris) !important; }
html.do-look #appSidebar .submenu a { color: var(--fl-side-text) !important; }
html.do-look #appSidebar .submenu a:hover, html.do-look #appSidebar .submenu a.menu-active { color: var(--fl-text) !important; }
html.do-look #appSidebar .nav-group-label { font-size: 12px !important; font-weight: 500 !important; color: var(--fl-faint) !important; }
html.do-look #appSidebar .sidebar-toggle-button { background: var(--fl-panel) !important; border-color: var(--fl-line-2) !important; color: var(--fl-soft) !important; }
html.do-look #appSidebar::-webkit-scrollbar-thumb { background: var(--fl-line-2); }
html.do-look .fl-dock { background: var(--fl-side) !important; border-top: 1px solid var(--fl-side-line); }
html.do-look .fl-dock button { background: var(--fl-panel) !important; border: 1px solid var(--fl-line-2) !important; color: var(--fl-text) !important; }
html.do-look .fl-dock button:hover { border-color: var(--do-control) !important; }
html.do-look .fl-dock canvas { display: none; }
html.do-look .fl-dock small, html.do-look .fl-dock kbd { color: var(--fl-faint) !important; border-color: var(--fl-line-2) !important; letter-spacing: 0 !important; }

/* ── Top bar: solid, hairline, no blur ── */
html.do-look #mainContent > header { background: var(--fl-bg) !important; backdrop-filter: none !important; border-bottom: 1px solid var(--fl-line) !important; }
html.do-look #mainContent > header .h-11.w-11.rounded-full { background: var(--do-ink) !important; color: var(--do-on-ink) !important; background-image: none !important; }
html.do-look #searchInput { background: var(--fl-panel) !important; border: 1px solid var(--fl-line-2) !important; }

/* ── Cards: hairline ring, no shadow, no gradient banners ── */
html.do-look #mainContent .panel-card, html.do-look #mainContent .prem-card, html.do-look #mainContent .kpi-stat-card,
html.do-look #mainContent .dash-header-new, html.do-look #mainContent .att-hero, html.do-look #mainContent .pr-hero, html.do-look #mainContent .mf-card,
html.do-look #mainContent section[class*="rounded-[2"], html.do-look #mainContent div[class*="rounded-[2"].border {
    background: var(--fl-panel) !important; background-image: none !important; border: 1px solid var(--fl-line) !important; box-shadow: none !important;
}
html.do-look #mainContent .dash-header-new::after { display: none !important; }
html.do-look #mainContent [class*="bg-[linear-gradient"], html.do-look #mainContent [class*="bg-gradient-to"] { background-image: none !important; background-color: var(--fl-panel) !important; }
html.do-look #mainContent [class*="bg-[linear-gradient"].text-white, html.do-look #mainContent [class*="bg-gradient-to"].text-white {
    background-color: var(--do-ink) !important; background-image: none !important; color: var(--do-on-ink) !important;
}
html.do-look #mainContent [class*="bg-[linear-gradient"].text-white *, html.do-look #mainContent [class*="bg-gradient-to"].text-white * { color: inherit; }
html.do-look #mainContent .shadow-soft, html.do-look #mainContent .shadow-sm, html.do-look #mainContent .shadow, html.do-look #mainContent .shadow-md, html.do-look #mainContent .shadow-lg, html.do-look #mainContent .shadow-xl { box-shadow: none !important; }
html.do-look #mainContent .kpi-stat-card:hover, html.do-look #mainContent .panel-card:hover { transform: none !important; }

/* ── Buttons: ink primary, flat ── */
html.do-look #mainContent .bg-primary, html.do-look .fixed.inset-0 .bg-primary, html.do-look .action-btn-primary, html.do-look .auth-shell form button {
    background: var(--do-ink) !important; background-image: none !important; color: var(--do-on-ink) !important; box-shadow: none !important; border-color: transparent !important;
}
html.do-look #mainContent .bg-primary:hover, html.do-look .fixed.inset-0 .bg-primary:hover, html.do-look .action-btn-primary:hover, html.do-look .auth-shell form button:hover { background: var(--do-ink-hover) !important; }
html.do-look #mainContent .bg-primary *, html.do-look .fixed.inset-0 .bg-primary * { color: inherit !important; }
html.do-look .action-btn-secondary { background: var(--fl-panel) !important; border: 1px solid var(--fl-line-2) !important; color: var(--fl-text) !important; }
html.do-look #mainContent .text-primary, html.do-look .fixed.inset-0 .text-primary { color: var(--fl-iris) !important; }
html.do-look #mainContent button, html.do-look .fixed.inset-0 button { border-radius: 8px; }
/* Every action looks like a button (owner, 30 Oct 2026): secondary = 1px control border (3:1) on the surface. Covers HRMS's
   named secondary classes and the Tailwind outline buttons built in app.js, hrx.js and modules. Selected tabs/chips
   (border-primary), dark-banner buttons (border-white/…), attendance cells and choice cards (text-left) keep their own look. */
html.do-look :is(.action-btn-secondary, .rb-btn-secondary, .rb-mini-btn, .rb-rich-btn, .rb-select, .payroll-control-button:not(.primary)) {
    border: 1px solid var(--do-control) !important; background-color: var(--fl-panel) !important; color: var(--fl-text) !important; box-shadow: none !important;
}
html.do-look :is(#mainContent, .fixed.inset-0) :is(button, a).border:not(.cell-button, .att, .text-left, .bg-primary, .text-white, .border-primary, [class*=" border-white"], [class^="border-white"], .border-transparent, .border-dashed) {
    border-color: var(--do-control) !important;
}
@media (hover: hover) {
    html.do-look :is(.action-btn-secondary, .rb-btn-secondary, .rb-mini-btn, .rb-rich-btn, .payroll-control-button:not(.primary)):hover,
    html.do-look :is(#mainContent, .fixed.inset-0) :is(button, a).border:not(.cell-button, .att, .text-left, .bg-primary, .text-white, .border-primary, [class*=" border-white"], [class^="border-white"], .border-transparent, .border-dashed):hover { border-color: var(--fl-text) !important; }
}
/* Danger-quiet: red text on the surface, same control border. */
html.do-look :is(#mainContent, .fixed.inset-0) :is(button, a).border:is(.border-rose-100, .border-rose-200, .border-rose-300, .border-red-200, .border-red-300):not(.text-white) { background-color: var(--fl-panel) !important; color: var(--fl-rose) !important; }
@media (hover: hover) { html.do-look #mainContent [class*="hover:-translate-y"]:hover { transform: none !important; } }

/* ── Inputs: 3:1 control border, accent focus ── */
html.do-look #mainContent input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(#searchInput),
html.do-look #mainContent select, html.do-look #mainContent textarea,
html.do-look .fixed.inset-0 input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html.do-look .fixed.inset-0 select, html.do-look .fixed.inset-0 textarea {
    border-color: var(--do-control) !important; background-color: var(--fl-panel) !important; color: var(--fl-text) !important; border-radius: 6px !important;
}
html.do-look #mainContent input:focus, html.do-look #mainContent select:focus, html.do-look #mainContent textarea:focus,
html.do-look .fixed.inset-0 input:focus, html.do-look .fixed.inset-0 select:focus, html.do-look .fixed.inset-0 textarea:focus {
    border-color: var(--fl-iris) !important; box-shadow: 0 0 0 3px var(--fl-ring) !important;
}
html.do-look input[type="checkbox"], html.do-look input[type="radio"] { accent-color: var(--do-ink); }
html.do-look .feat-switch:checked { background: var(--fl-iris) !important; }

/* ── Tables ── */
html.do-look #mainContent tbody tr:hover { background-color: var(--fl-panel-2) !important; }

/* ── Status chips: quieter, no glow ── */
html.do-look #mainContent .live-pill, html.do-look #mainContent .stat-chip, html.do-look #mainContent .att-stat-chip, html.do-look #mainContent .att-live-badge { box-shadow: none !important; background-image: none !important; }
html.do-look #mainContent .animate-pulse:not(.skel) { animation: none !important; }
html.do-look #mainContent .animate-ping { display: none !important; }

/* ── Modals and toasts: solid overlay, no blur ── */
html.do-look .fixed.inset-0[class*="bg-slate-950"] { background-color: var(--fl-overlay) !important; backdrop-filter: none !important; }
html.do-look .fixed.inset-0 > form, html.do-look .fixed.inset-0 > div > form, html.do-look .fixed.inset-0 > div[class*="max-w"] { background: var(--fl-panel) !important; box-shadow: var(--fl-shadow-lg) !important; border-radius: 16px !important; }
html.do-look #appToastStack > div { backdrop-filter: none !important; background: var(--do-ink) !important; color: var(--do-on-ink) !important; box-shadow: var(--fl-shadow-lg) !important; }
html.do-look #appToastStack > div * { color: inherit !important; }

/* ── Loading: a calm pulse, not a coloured shimmer ── */
html.do-look .skel, html.do-look .fl-shimmer { background: var(--fl-panel-3) !important; background-image: none !important; animation: do-pulse 1.4s ease-in-out infinite !important; }
@keyframes do-pulse { 50% { opacity: .55; } }

/* ── Flo AI blocks: marked by a label and their cost, not by colour ── */
html.do-look .fl-insight, html.do-look .fl-insight.is-writing { background: var(--fl-line) !important; animation: none !important; }
html.do-look .fl-insight-in { background: var(--fl-panel) !important; background-image: none !important; }
html.do-look .fl-tag { background: var(--fl-panel-2) !important; color: var(--fl-faint) !important; border: 1px solid var(--fl-line-2); font-size: 12px !important; }
html.do-look .fl-caret { animation: none !important; }
html.do-look .fl-thinking i { background: var(--fl-faint) !important; }
html.do-look .fl-pal-wrap { backdrop-filter: none !important; }
html.do-look .fl-pal { background: var(--fl-panel) !important; box-shadow: var(--fl-shadow-lg) !important; }
html.do-look .fl-pal-item .ic.is-person, html.do-look .fl-chip b { background: var(--fl-panel-3) !important; color: var(--fl-text) !important; }

/* ── Login: plain, centred card ── */
html.do-look .auth-page { background: var(--fl-bg) !important; background-image: none !important; }

/* ── Charts and bars: one accent ── */
html.do-look .payroll-dept-bar > span { background: var(--fl-iris) !important; }
html.do-look #dox-feedback-root .mf-result { background: var(--do-ink) !important; background-image: none !important; color: var(--do-on-ink) !important; }

/* ── Motion: page views appear without the rise ── */
html.do-look .app-view.active { animation: none !important; }
@media (prefers-reduced-motion: reduce) { html.do-look * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ── Colour discipline: pastel fills, tinted icon tiles and coloured pills become neutral. Green stays only as "done",
   red as a problem, amber as waiting, as text or a dot on a neutral ground. Decorative hues go grey. ── */
html.do-look :is(#mainContent, .fixed.inset-0) :is([class*="bg-cyan-50"], [class*="bg-cyan-100"], [class*="bg-cyan-200"], [class*="bg-sky-50"], [class*="bg-sky-100"], [class*="bg-sky-200"], [class*="bg-blue-50"], [class*="bg-blue-100"], [class*="bg-blue-200"], [class*="bg-indigo-50"], [class*="bg-indigo-100"], [class*="bg-indigo-200"], [class*="bg-violet-50"], [class*="bg-violet-100"], [class*="bg-violet-200"], [class*="bg-purple-50"], [class*="bg-purple-100"], [class*="bg-purple-200"], [class*="bg-pink-50"], [class*="bg-pink-100"], [class*="bg-pink-200"], [class*="bg-fuchsia-50"], [class*="bg-fuchsia-100"], [class*="bg-fuchsia-200"], [class*="bg-teal-50"], [class*="bg-teal-100"], [class*="bg-teal-200"], [class*="bg-lime-50"], [class*="bg-lime-100"], [class*="bg-lime-200"], [class*="bg-emerald-50"], [class*="bg-emerald-100"], [class*="bg-emerald-200"], [class*="bg-green-50"], [class*="bg-green-100"], [class*="bg-green-200"], [class*="bg-rose-50"], [class*="bg-rose-100"], [class*="bg-rose-200"], [class*="bg-red-50"], [class*="bg-red-100"], [class*="bg-red-200"], [class*="bg-amber-50"], [class*="bg-amber-100"], [class*="bg-amber-200"], [class*="bg-yellow-50"], [class*="bg-yellow-100"], [class*="bg-yellow-200"], [class*="bg-orange-50"], [class*="bg-orange-100"], [class*="bg-orange-200"]) { background-color: var(--fl-panel-2) !important; }
html.do-look :is(#mainContent, .fixed.inset-0) :is(.border-cyan-100, .border-cyan-200, .border-cyan-300, .border-cyan-400, .border-cyan-500, .border-sky-100, .border-sky-200, .border-sky-300, .border-sky-400, .border-sky-500, .border-blue-100, .border-blue-200, .border-blue-300, .border-blue-400, .border-blue-500, .border-indigo-100, .border-indigo-200, .border-indigo-300, .border-indigo-400, .border-indigo-500, .border-violet-100, .border-violet-200, .border-violet-300, .border-violet-400, .border-violet-500, .border-purple-100, .border-purple-200, .border-purple-300, .border-purple-400, .border-purple-500, .border-pink-100, .border-pink-200, .border-pink-300, .border-pink-400, .border-pink-500, .border-fuchsia-100, .border-fuchsia-200, .border-fuchsia-300, .border-fuchsia-400, .border-fuchsia-500, .border-teal-100, .border-teal-200, .border-teal-300, .border-teal-400, .border-teal-500, .border-lime-100, .border-lime-200, .border-lime-300, .border-lime-400, .border-lime-500, .border-emerald-100, .border-emerald-200, .border-emerald-300, .border-emerald-400, .border-emerald-500, .border-green-100, .border-green-200, .border-green-300, .border-green-400, .border-green-500, .border-rose-100, .border-rose-200, .border-rose-300, .border-rose-400, .border-rose-500, .border-red-100, .border-red-200, .border-red-300, .border-red-400, .border-red-500, .border-amber-100, .border-amber-200, .border-amber-300, .border-amber-400, .border-amber-500, .border-yellow-100, .border-yellow-200, .border-yellow-300, .border-yellow-400, .border-yellow-500, .border-orange-100, .border-orange-200, .border-orange-300, .border-orange-400, .border-orange-500, .ring-cyan-200, .ring-cyan-300, .ring-cyan-400, .ring-sky-200, .ring-sky-300, .ring-sky-400, .ring-blue-200, .ring-blue-300, .ring-blue-400, .ring-indigo-200, .ring-indigo-300, .ring-indigo-400, .ring-violet-200, .ring-violet-300, .ring-violet-400, .ring-purple-200, .ring-purple-300, .ring-purple-400, .ring-pink-200, .ring-pink-300, .ring-pink-400, .ring-fuchsia-200, .ring-fuchsia-300, .ring-fuchsia-400, .ring-teal-200, .ring-teal-300, .ring-teal-400, .ring-lime-200, .ring-lime-300, .ring-lime-400, .ring-emerald-200, .ring-emerald-300, .ring-emerald-400, .ring-green-200, .ring-green-300, .ring-green-400, .ring-rose-200, .ring-rose-300, .ring-rose-400, .ring-red-200, .ring-red-300, .ring-red-400, .ring-amber-200, .ring-amber-300, .ring-amber-400, .ring-yellow-200, .ring-yellow-300, .ring-yellow-400, .ring-orange-200, .ring-orange-300, .ring-orange-400) { border-color: var(--fl-line-2) !important; --tw-ring-color: var(--fl-line-2) !important; }
html.do-look :is(#mainContent, .fixed.inset-0) :is(.text-cyan-400, .text-cyan-500, .text-cyan-600, .text-cyan-700, .text-cyan-800, .text-cyan-900, .text-sky-400, .text-sky-500, .text-sky-600, .text-sky-700, .text-sky-800, .text-sky-900, .text-blue-400, .text-blue-500, .text-blue-600, .text-blue-700, .text-blue-800, .text-blue-900, .text-indigo-400, .text-indigo-500, .text-indigo-600, .text-indigo-700, .text-indigo-800, .text-indigo-900, .text-violet-400, .text-violet-500, .text-violet-600, .text-violet-700, .text-violet-800, .text-violet-900, .text-purple-400, .text-purple-500, .text-purple-600, .text-purple-700, .text-purple-800, .text-purple-900, .text-pink-400, .text-pink-500, .text-pink-600, .text-pink-700, .text-pink-800, .text-pink-900, .text-fuchsia-400, .text-fuchsia-500, .text-fuchsia-600, .text-fuchsia-700, .text-fuchsia-800, .text-fuchsia-900, .text-teal-400, .text-teal-500, .text-teal-600, .text-teal-700, .text-teal-800, .text-teal-900, .text-lime-400, .text-lime-500, .text-lime-600, .text-lime-700, .text-lime-800, .text-lime-900) { color: var(--fl-soft) !important; }
html.do-look :is(#mainContent, .fixed.inset-0) :is(.text-emerald-400, .text-emerald-500, .text-emerald-600, .text-emerald-700, .text-emerald-800, .text-emerald-900, .text-green-400, .text-green-500, .text-green-600, .text-green-700, .text-green-800, .text-green-900) { color: var(--fl-iris) !important; }
html.do-look :is(#mainContent, .fixed.inset-0) :is(.text-rose-400, .text-rose-500, .text-rose-600, .text-rose-700, .text-rose-800, .text-rose-900, .text-red-400, .text-red-500, .text-red-600, .text-red-700, .text-red-800, .text-red-900) { color: var(--fl-rose) !important; }
html.do-look :is(#mainContent, .fixed.inset-0) :is(.text-amber-400, .text-amber-500, .text-amber-600, .text-amber-700, .text-amber-800, .text-amber-900, .text-yellow-400, .text-yellow-500, .text-yellow-600, .text-yellow-700, .text-yellow-800, .text-yellow-900, .text-orange-400, .text-orange-500, .text-orange-600, .text-orange-700, .text-orange-800, .text-orange-900) { color: var(--fl-ember) !important; }
html.do-look :is(#mainContent, .fixed.inset-0) :is(.bg-cyan-300, .bg-cyan-400, .bg-cyan-500, .bg-cyan-600, .bg-cyan-700, .bg-sky-300, .bg-sky-400, .bg-sky-500, .bg-sky-600, .bg-sky-700, .bg-blue-300, .bg-blue-400, .bg-blue-500, .bg-blue-600, .bg-blue-700, .bg-indigo-300, .bg-indigo-400, .bg-indigo-500, .bg-indigo-600, .bg-indigo-700, .bg-violet-300, .bg-violet-400, .bg-violet-500, .bg-violet-600, .bg-violet-700, .bg-purple-300, .bg-purple-400, .bg-purple-500, .bg-purple-600, .bg-purple-700, .bg-pink-300, .bg-pink-400, .bg-pink-500, .bg-pink-600, .bg-pink-700, .bg-fuchsia-300, .bg-fuchsia-400, .bg-fuchsia-500, .bg-fuchsia-600, .bg-fuchsia-700, .bg-teal-300, .bg-teal-400, .bg-teal-500, .bg-teal-600, .bg-teal-700, .bg-lime-300, .bg-lime-400, .bg-lime-500, .bg-lime-600, .bg-lime-700, .bg-emerald-300, .bg-emerald-400, .bg-emerald-500, .bg-emerald-600, .bg-emerald-700, .bg-green-300, .bg-green-400, .bg-green-500, .bg-green-600, .bg-green-700) { background-color: var(--fl-iris) !important; }
html.do-look :is(#mainContent, .fixed.inset-0) :is(.bg-rose-300, .bg-rose-400, .bg-rose-500, .bg-rose-600, .bg-rose-700, .bg-red-300, .bg-red-400, .bg-red-500, .bg-red-600, .bg-red-700) { background-color: var(--fl-rose) !important; }
html.do-look :is(#mainContent, .fixed.inset-0) :is(.bg-amber-300, .bg-amber-400, .bg-amber-500, .bg-amber-600, .bg-amber-700, .bg-yellow-300, .bg-yellow-400, .bg-yellow-500, .bg-yellow-600, .bg-yellow-700, .bg-orange-300, .bg-orange-400, .bg-orange-500, .bg-orange-600, .bg-orange-700) { background-color: var(--fl-ember) !important; }
html.do-look :is(#mainContent, .fixed.inset-0) :is(.bg-indigo-600, .bg-indigo-700).text-white { background-color: var(--do-ink) !important; color: var(--do-on-ink) !important; }
/* Flo orb: the same particles, in grey */
html.do-look :is(#mainContent, .fl-pal) canvas { filter: grayscale(1) contrast(.9); }
/* Ask Flo dock: body face, not mono */
html.do-look .fl-dock :is(small, kbd) { font-family: var(--fl-body) !important; }

/* ── HRMS's own colour classes (index.php styles) ── */
html.do-look :is(.badge-healthy, .badge-ready, .badge-review, .badge-pulse, .insight-pill-good, .insight-pill-warn, .insight-pill-hot, .status-paid, .status-pending, .status-locked, .stat-chip, .live-pill) {
    background: var(--fl-panel-2) !important; background-image: none !important; border: 1px solid var(--fl-line-2) !important; color: var(--fl-soft) !important; box-shadow: none !important;
}
html.do-look :is(.badge-healthy, .insight-pill-good, .status-paid) { color: var(--fl-iris) !important; }
html.do-look :is(.badge-review, .insight-pill-warn, .status-pending) { color: var(--fl-ember) !important; }
html.do-look :is(.metric-trend-up, .metric-trend-warn) { background: none !important; border: 0 !important; padding-left: 0 !important; color: var(--fl-faint) !important; }
html.do-look .progress-rail { background: var(--fl-line) !important; }
html.do-look .progress-fill { background: var(--fl-iris) !important; background-image: none !important; }
html.do-look :is(.ann-card-anniversary, .ann-card-birthday, .ann-card-manual) { border-left: 1px solid var(--fl-line) !important; }
html.do-look :is(.activity-card, .insight-card, .payroll-summary-card, .performer-row, .chart-ring-shell) { background-image: none !important; box-shadow: none !important; }
/* Chart legends follow the chart: accent, then lighter steps of it */
html.do-look #payrollSankeyChart + div .stat-chip:nth-child(1) > span:first-child { background: var(--fl-iris) !important; }
html.do-look #payrollSankeyChart + div .stat-chip:nth-child(2) > span:first-child { background: color-mix(in srgb, var(--fl-iris) 60%, transparent) !important; }
html.do-look #payrollSankeyChart + div .stat-chip:nth-child(3) > span:first-child { background: color-mix(in srgb, var(--fl-iris) 32%, transparent) !important; }
html.do-look #mainContent .live-pill .animate-pulse { animation: none !important; }

/* ── Text a little bigger everywhere (owner, 29 Oct 2026): nothing below 13px; tables 14.5px ── */
html.do-look body { font-size: 15.5px; }
html.do-look #mainContent :is(.text-xs, .text-\[11px\], .text-\[10px\], .text-\[10\.5px\], .text-\[12px\]) { font-size: 13px !important; line-height: 1.45 !important; }
html.do-look #mainContent :is(.text-sm, .text-\[13px\], .text-\[13\.5px\]) { font-size: 14.5px !important; }
html.do-look #mainContent table { font-size: 14.5px !important; }
html.do-look #mainContent thead th { font-size: 13.5px !important; }
html.do-look #appSidebar :is(.menu-text, .submenu a) { font-size: 14.5px !important; }
html.do-look #appSidebar .nav-group-label { font-size: 13px !important; }
html.do-look :is(#mainContent, .fixed.inset-0) :is(button, a.action-btn-primary, a.action-btn-secondary) { font-size: max(13.5px, 1em); }
html.do-look #mainContent { overflow-wrap: anywhere; }
html.do-look #mainContent :is(td, th) { overflow-wrap: normal; }