@media screen {

.settings-preview #settingsMenu{width:260px;padding:14px;background:var(--white);color:var(--ink)}
.pref-menu-button,.pref-menu-services a{display:block;box-sizing:border-box;width:100%;min-height:44px;padding:12px;border:0;border-radius:7px;font:600 14px inherit;color:var(--ink);background:transparent;text-align:left;text-decoration:none;cursor:pointer}
.pref-menu-services{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:8px 0;padding:10px 0}
.pref-menu-services>span{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em;padding:4px 12px}
.pref-menu-button:hover,.pref-menu-services a:hover{background:var(--light)}
.preferences-dialog{box-sizing:border-box;width:min(850px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 40px);padding:0;border:1px solid var(--line);border-radius:16px;background:var(--white);color:var(--ink);box-shadow:0 24px 80px #071e3550;overflow:auto}
.preferences-dialog::backdrop{background:#071b2a80}
.preferences-dialog header{display:flex;justify-content:space-between;align-items:center;padding:24px 28px;border-bottom:1px solid var(--line)}
.preferences-dialog h2{margin:6px 0 0;font-size:25px;line-height:1.3;letter-spacing:-.5px}
.pref-eyebrow{font-size:10px;font-weight:700;letter-spacing:.13em;color:var(--teal)}
.preferences-dialog button,.preferences-dialog select{font:inherit;font-size:14px;min-height:44px;border:1px solid var(--line);border-radius:7px;background:var(--white);color:var(--ink);padding:10px 14px;cursor:pointer}
.preferences-dialog .pref-close{font-size:25px;padding:0;width:44px}
.pref-layout{display:grid;grid-template-columns:190px minmax(0,1fr);min-height:390px}
.pref-layout nav{background:var(--light);border-right:1px solid var(--line);padding:18px 12px;display:flex;flex-direction:column;gap:6px}
.pref-layout nav button{text-align:left;border:0;background:transparent;font-weight:600}
.pref-layout nav button[aria-pressed=true]{background:var(--white);color:var(--teal);box-shadow:inset 3px 0 var(--teal)}
#preferenceContent{padding:26px 30px;min-width:0;font-size:14px}
#preferenceContent h3{font-size:19px;margin:0 0 8px}
.pref-muted{font-size:13px;color:var(--muted);line-height:1.6;margin:0 0 24px}
.preferences-dialog fieldset{border:0;margin:0 0 24px;padding:0;min-width:0}
.preferences-dialog legend{font-size:13px;font-weight:650;margin-bottom:10px}
.pref-options{display:flex;flex-wrap:wrap;gap:8px}
.pref-options label{display:flex;align-items:center;gap:8px;min-height:44px;box-sizing:border-box;border:1px solid var(--line);padding:10px 12px;border-radius:8px;cursor:pointer;font-size:13px;background:var(--white)}
.pref-options label:has(input:checked){border-color:var(--teal);background:var(--light);box-shadow:inset 0 0 0 1px var(--teal)}
.pref-options input{accent-color:var(--teal);margin:0;width:16px;height:16px;min-height:0}
.pref-field{display:grid;gap:10px;font-size:13px;font-weight:600;margin:24px 0}
.pref-service{display:flex;justify-content:space-between;align-items:center;padding:18px;border:1px solid var(--line);border-radius:10px;margin:14px 0;text-decoration:none;color:var(--ink);gap:16px;background:var(--white)}
.pref-service:hover{border-color:var(--teal);background:var(--light)}
.pref-service strong{display:block;font-size:14px;margin-bottom:6px}
.pref-service small{font-size:12px;line-height:1.5;color:var(--muted)}
.pref-facts{border-top:1px solid var(--line);margin-top:28px;padding-top:18px;display:grid;gap:14px;font-size:12px}
.pref-facts span{display:flex;justify-content:space-between;gap:14px;color:var(--muted)}
.pref-facts strong{font-weight:500;color:var(--ink);text-align:right}
.preferences-dialog footer{display:flex;align-items:center;justify-content:flex-end;gap:8px;border-top:1px solid var(--line);padding:18px 24px;background:var(--white)}
.preferences-dialog footer>span{margin-right:auto;font-size:11px;color:var(--muted);max-width:240px;line-height:1.5}
.preferences-dialog .pref-primary{background:var(--teal);border-color:var(--teal);color:#fbfaf7;font-weight:650}
.preferences-dialog :is(a,button,input,select):focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.settings-preview[data-preview-density=compact] #main td{padding-top:9px!important;padding-bottom:9px!important}
.settings-preview[data-preview-density=comfortable] #main td{padding-top:21px!important;padding-bottom:21px!important}
.settings-preview[data-preview-motion=reduced] *,.settings-preview[data-preview-motion=reduced] *::before,.settings-preview[data-preview-motion=reduced] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(prefers-reduced-motion:reduce){.settings-preview *,.settings-preview *::before,.settings-preview *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(max-width:600px){.preferences-dialog{width:calc(100vw - 20px);max-height:calc(100dvh - 24px)}.preferences-dialog header{padding:18px}.pref-layout{grid-template-columns:1fr;min-height:0}.pref-layout nav{flex-direction:row;overflow:auto;border-right:0;border-bottom:1px solid var(--line);padding:10px}.pref-layout nav button{white-space:nowrap;flex:1;padding:8px;font-size:12px}#preferenceContent{padding:22px 18px}.preferences-dialog footer{flex-wrap:wrap;padding:14px}.preferences-dialog footer>span{max-width:none;width:100%;margin-bottom:5px}.pref-facts span{flex-wrap:wrap}.settings-preview #settingsMenu{max-width:calc(100vw - 30px)}}
}
@media print{.preferences-dialog{display:none!important}.preferences-dialog::backdrop{display:none}}
@media screen{.settings-preview #settingsMenu #themeToggle{display:none}}
@media screen{.settings-preview[data-theme=dark] .preferences-dialog .pref-primary{color:#082c33}}
/* Scheme tokens unify the existing shell and preferences in both modes. */
@media screen{
body.settings-preview{background:var(--page);color:var(--ink);color-scheme:light}
body.settings-preview[data-theme=dark]{color-scheme:dark}
body.settings-preview .topbar,body.settings-preview .preferences-dialog,body.settings-preview .preferences-dialog header,body.settings-preview .preferences-dialog footer,body.settings-preview #settingsMenu{background:var(--white)!important;color:var(--ink);border-color:var(--line)}
body.settings-preview:not(.refined-preview) #sidebar{background:var(--white)!important;border-color:var(--line)}
body.settings-preview:not(.refined-preview) #sidebar nav a{color:var(--ink)}
body.settings-preview:not(.refined-preview) #sidebar nav a.active{background:var(--light)!important;color:var(--teal)!important;border-color:var(--teal)}
body.settings-preview #main :is(.panel,.metric,.panel-head,.hr-card,.table-wrap){background:var(--white)!important;color:var(--ink)!important;border-color:var(--line)}
body.settings-preview #main :is(.filterbar,.entry-summary),body.settings-preview #main thead th{background:var(--light)!important;color:var(--ink);border-color:var(--line)}
body.settings-preview #main .metric-value,body.settings-preview #main .metric-label{color:var(--ink)!important}
body.settings-preview :is(input,select,textarea){background:var(--white);color:var(--ink);border-color:var(--line)}
body.settings-preview #main .button.primary,body.settings-preview .preferences-dialog .pref-primary{background:var(--teal)!important;color:var(--on-accent)!important;border-color:var(--teal)!important}
body.settings-preview .pref-layout nav,body.settings-preview .pref-options label:has(input:checked){background:var(--light)}
body.settings-preview .preferences-dialog :is(button,select),body.settings-preview .pref-service,body.settings-preview .pref-options label{background:var(--white);color:var(--ink);border-color:var(--line)}
body.settings-preview .pref-layout nav button[aria-pressed=true]{color:var(--teal);background:var(--white)}
body.settings-preview .pref-options label:has(input:checked),body.settings-preview .scheme-options label:has(input:checked){border-color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal)}
.preferences-dialog #preferenceContent h3{margin-bottom:24px}
.preferences-dialog .pref-service strong{margin:0}
#preferenceFeedback:empty{display:none}
.mode-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mode-options label{position:relative;flex-direction:column;padding:10px;gap:10px;font-weight:600}
.mode-options input,.scheme-options input{position:absolute;opacity:0;width:1px;height:1px;min-height:0}
.mode-options label:focus-within,.scheme-options label:focus-within{outline:3px solid var(--teal);outline-offset:3px}
.mode-thumbnail{display:block;position:relative;width:100%;height:58px;border-radius:6px;overflow:hidden;background:#e8eef6;border:1px solid #cbd5e1}
.mode-thumbnail i{position:absolute;left:0;top:0;bottom:0;width:26%;background:#bccbdc}
.mode-thumbnail b{position:absolute;left:34%;right:10%;top:20%;height:42%;border-radius:3px;background:#fbfaf7;border-top:7px solid #2770bf;box-shadow:0 14px 0 #c4d4e8}
.mode-thumbnail.dark{background:#152537;border-color:#415367}.mode-thumbnail.dark i{background:#273c52}.mode-thumbnail.dark b{background:#334f6b;border-top-color:#84baff;box-shadow:0 14px 0 #30465d}
.mode-thumbnail.system{background:linear-gradient(110deg,#e8eef6 50%,#152537 50%)}.mode-thumbnail.system i{background:#bccbdc}.mode-thumbnail.system b{background:linear-gradient(110deg,#fbfaf7 50%,#334f6b 50%);border-top-color:#4c8bcf}
.scheme-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.scheme-options label{position:relative;display:flex;flex-direction:column;gap:8px;align-items:center;min-width:0;border:1px solid var(--line);border-radius:9px;padding:10px 8px;font-size:12px;font-weight:600;cursor:pointer;color:var(--ink);background:var(--white)}
.scheme-swatch{position:relative;display:block;height:42px;width:100%;border-radius:5px;background:var(--swatch-bg);overflow:hidden;border:1px solid var(--line)}
.scheme-swatch i{position:absolute;left:0;top:0;bottom:0;width:24%;background:var(--swatch-night)}
.scheme-swatch b{position:absolute;left:32%;right:8%;top:10px;height:9px;background:var(--swatch-accent);border-radius:2px}
.scheme-swatch em{position:absolute;left:32%;right:8%;bottom:7px;height:10px;background:var(--swatch-surface);border-radius:2px}
@media(max-width:600px){.mode-options{gap:8px}.mode-options label{padding:8px}.mode-thumbnail{height:48px}.scheme-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.preferences-dialog #preferenceContent{padding:20px 16px}.preferences-dialog fieldset{margin-bottom:20px}}
}
@media screen{.mode-options input,.scheme-options input{inset:0;width:100%;height:100%;margin:0;z-index:1}}
@media screen{.mode-options label:has(input:checked)::after,.scheme-options label:has(input:checked)::after{content:'✓';position:absolute;right:5px;top:5px;width:18px;height:18px;display:grid;place-items:center;border-radius:50%;background:var(--teal);color:var(--on-accent);font-size:12px;font-weight:800;pointer-events:none}}
@media screen{
.text-size-row{display:flex;align-items:center;gap:12px;min-width:0;font-size:13px}
.preferences-dialog input[type=range]{flex:1;min-width:70px;width:auto;min-height:44px;padding:0;border:0;background:transparent;box-shadow:none;accent-color:var(--teal);cursor:ew-resize}
.text-size-row .large-a{font-size:23px}.text-size-row output{font-size:12px;min-width:36px;font-variant-numeric:tabular-nums}
body.settings-preview #main :is(td,.button,.subtitle,.panel-body,.hr-card p){font-size:calc(14px * var(--preview-text-scale,1))!important}
body.settings-preview #main :is(th,.meta,.badge,.metric-label,.hint){font-size:calc(12px * var(--preview-text-scale,1))!important}
body.settings-preview #main h1{font-size:calc(28px * var(--preview-text-scale,1))!important}
body.settings-preview #main :is(h2,.panel-head h2){font-size:calc(18px * var(--preview-text-scale,1))!important}
body.settings-preview #main .metric-value{font-size:calc(28px * var(--preview-text-scale,1))!important}
body.settings-preview #sidebar nav a{font-size:calc(14px * var(--preview-text-scale,1))!important}
body.settings-preview #main :is(label,input,select,textarea){font-size:calc(14px * var(--preview-text-scale,1))!important}
@media(max-width:600px){.text-size-row{gap:8px}.text-size-row button{padding:8px}.preferences-dialog input[type=range]{min-width:45px}}
}
@media screen{.text-size-sample{font-size:calc(16px * var(--preview-text-scale,1));font-weight:600;color:var(--ink);margin-top:12px}}
@media screen{
body.settings-preview #main h3,body.settings-preview #main .hr-card>span{font-size:calc(16px * var(--preview-text-scale,1))!important}
body.settings-preview #main :is(.interactive-bar,.bar-label,.bar-value,.week-day,.status-choice){font-size:calc(13px * var(--preview-text-scale,1))!important}
body.settings-preview #main svg text{font-size:calc(12px * var(--preview-text-scale,1))!important}
}
@media screen{body.settings-preview #main .button.primary{box-shadow:0 3px 10px color-mix(in srgb,var(--teal) 16%,transparent)}}
/* Override legacy navy/white sidebar rules with the selected scheme, in either layout. */
@media screen{
body.settings-preview[data-palette] aside#sidebar{background:var(--sidebar-bg)!important;color:var(--ink)!important;border-right:1px solid var(--line);box-shadow:none}
body.settings-preview[data-palette] #sidebar nav a{color:var(--ink)!important;background:transparent;border-color:transparent;box-shadow:none}
body.settings-preview[data-palette] #sidebar nav a:hover{background:var(--sidebar-surface)!important;color:var(--ink)!important}
body.settings-preview[data-palette] #sidebar nav a.active,body.settings-preview[data-palette] #sidebar nav a[aria-current=page]{background:var(--teal)!important;color:var(--on-accent)!important;border-color:var(--teal)!important;box-shadow:none}
body.settings-preview[data-palette] #sidebar .nav-icon{color:inherit!important}
body.settings-preview[data-palette] #sidebar :is(.workspace-label,.sample-pill,.sidebar-reset){color:var(--muted)!important}
body.settings-preview[data-palette] #sidebar :is(.workspace-switch,select,.button){background:var(--sidebar-surface)!important;color:var(--ink)!important;border-color:var(--line)!important;box-shadow:none}
body.settings-preview[data-palette] #sidebar :is(.sidebar-bottom,.nav-separator){border-color:var(--line)!important}
body.settings-preview[data-palette] #sidebar .nav-count{background:var(--sidebar-surface);color:var(--ink)}
body.settings-preview[data-palette] #sidebar .brand{background:transparent!important;box-shadow:none}
body.settings-preview[data-palette] .topbar :is(.settings-button,.avatar){background:var(--light)!important;color:var(--teal)!important;border-color:var(--line)!important;box-shadow:none}
body.settings-preview[data-palette] #main .button:not(.primary){background:var(--white)!important;color:var(--ink)!important;border-color:var(--line)!important;box-shadow:none}
}

/* Theme chart series and widgets together; warning, loss and paid states retain their meaning. */
@media screen{
body.settings-preview[data-palette] #main{--chart-series:var(--chart-1)}
body.settings-preview[data-palette] .overview-grid>.panel:nth-child(2){--chart-series:var(--chart-2)}
body.settings-preview[data-palette] .overview-grid>.panel:nth-child(3){--chart-series:var(--chart-3)}
body.settings-preview[data-palette] .interactive-bar .bar-track>span{background:var(--chart-series)!important}
body.settings-preview[data-palette] :is(.bar-track,.wr-chart-track,.wr-mix-track,.wr-budget-chart-track){background:var(--line)!important}
body.settings-preview[data-palette] .review-trend polyline{stroke:var(--chart-4)}
body.settings-preview[data-palette] .review-trend circle{fill:var(--chart-4)}
body.settings-preview[data-palette] .review-trend line{stroke:var(--line)}
body.settings-preview[data-palette] .review-trend text{fill:var(--muted)!important}
body.settings-preview[data-palette] .review-ring{background:conic-gradient(var(--teal) var(--review-share),var(--line) 0)!important}
body.settings-preview[data-palette] .leave-balance-ring{background:conic-gradient(var(--teal) var(--share),var(--line) 0)!important}
body.settings-preview[data-palette] :is(.review-ring,.leave-balance-ring)>div{background:var(--white)!important;color:var(--ink)!important}
body.settings-preview[data-palette] :is(.approval-widget strong,.metric.featured .metric-value){color:var(--teal)!important}
body.settings-preview[data-palette] :is(.leave-balance-widget p,.approval-widget small,.nav-group-title){color:var(--muted)!important}
body.settings-preview[data-palette] .approval-widget{border-color:var(--line)}
body.settings-preview[data-palette] .metric{border-top-color:var(--chart-1)!important}
body.settings-preview[data-palette] .metric:nth-child(2){border-top-color:var(--chart-2)!important}
body.settings-preview[data-palette] .metric:nth-child(3){border-top-color:var(--chart-3)!important}
body.settings-preview[data-palette] .metric:nth-child(4){border-top-color:var(--chart-4)!important}
body.settings-preview[data-palette] :is(.wr-key-invoiced,.wr-trend-bars i,.wr-profit-bars i,.wr-contribution-bars i,.wr-budget-chart-track i:not(.is-near):not(.is-over)){background:var(--chart-1)!important}
body.settings-preview[data-palette] :is(.wr-key-cost,.wr-profit-bars i.wr-key-cost,.wr-contribution-bars i.is-cost){background:var(--chart-2)!important}
body.settings-preview[data-palette] :is(.wr-key-received,.wr-trend-bars i.wr-key-received,.wr-mix-track i.is-pending){background:var(--chart-3)!important}
body.settings-preview[data-palette] :is(.wr-crm-dashboard .panel-head,.overview-strip,.interactive-bar:hover,.interactive-bar.chosen,.status-choice){background:var(--light)!important;color:var(--ink)!important;border-color:var(--line)!important}
}
@media screen{
body.settings-preview[data-palette],body.settings-preview[data-palette] :is(.shell,main#main){background:var(--page)!important;background-image:none!important;color:var(--ink)}
body.settings-preview[data-palette] :is(.empty,.panel-body,.panel-head){background:var(--white)!important;color:var(--ink)!important}
body.settings-preview[data-palette] #main a:not(.button):not(.interactive-bar):not(.approval-widget):not(.metric-link){color:var(--teal)}
}
/* Shared component surfaces prevent legacy white/navy patches in any colour family. */
@media screen{
body.settings-preview[data-palette] :is(dialog,.modal-head,.modal-body,.modal-footer,.panel,.metric,.hr-card,.org-card,.org-position-group,.org-stacked,.integrated-month-bar,.month-summary-item,.note-strip,.year-history summary,.week-day,.wr-count strong){background:var(--white)!important;color:var(--ink)!important;border-color:var(--line)!important}
body.settings-preview[data-palette] :is(input:not([type=radio]):not([type=checkbox]):not([type=range]),select,textarea){background:var(--white)!important;color:var(--ink)!important;border-color:var(--line)!important;color-scheme:light}
body.settings-preview[data-palette][data-theme=dark] :is(input,select,textarea){color-scheme:dark}
body.settings-preview[data-palette] :is(thead,th,.table-head,.report-switch,.claim-allocation,.vehicle-options label){background:var(--light)!important;color:var(--ink)!important;border-color:var(--line)!important}
body.settings-preview[data-palette] :is(.vehicle-options label:has(input:checked),.month-summary-item:hover,.year-history summary:hover){background:var(--light)!important;color:var(--ink)!important;outline-color:var(--teal)}
body.settings-preview[data-palette] .metric.featured :is(.metric-label,.metric-note){color:var(--muted)!important}
body.settings-preview[data-palette] .metric.featured .metric-value{color:var(--ink)!important}
}

/* Main work actions remain legible across appearance settings. */
body.settings-preview #main :is(.page-head .actions .button,.daily-tabs .button,[data-action^="daily-"]:not([data-action="daily-open-day"]),.report-switch .button){font-size:calc(16px * var(--preview-text-scale,1))!important;min-height:44px}
#main a:not(.button):not(.metric):not(.interactive-bar){text-decoration:underline;text-underline-offset:3px}

body[data-theme="light"] #main .claim-filter>label{color:#4f6269!important}

/* Settings menu: one consistent row style for every item (no white button borders). */
@media screen{
 #settingsMenu .pref-menu-button,#settingsMenu .pref-menu-services a,#settingsMenu [data-action="profile-photo"],#settingsMenu .sign-out-button{display:flex;align-items:center;box-sizing:border-box;width:100%;min-height:42px;margin:2px 0;padding:10px 12px;border:0!important;border-radius:10px;background:transparent!important;box-shadow:none!important;color:inherit;font:600 14px var(--font-ui,inherit);text-align:left;text-decoration:none;cursor:pointer;outline:none;transform:none}
 #settingsMenu .pref-menu-button:hover,#settingsMenu .pref-menu-services a:hover,#settingsMenu [data-action="profile-photo"]:hover{background:color-mix(in srgb,var(--teal) 14%,transparent)!important}
 #settingsMenu .pref-menu-button:focus-visible,#settingsMenu .pref-menu-services a:focus-visible,#settingsMenu [data-action="profile-photo"]:focus-visible,#settingsMenu .sign-out-button:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
 #settingsMenu .pref-menu-services{margin:6px 0;padding:6px 0}
 #settingsMenu .pref-menu-services>span{padding:6px 12px 4px}
 #settingsMenu .sign-out-button{margin-top:6px;color:#b42335}
 #settingsMenu .sign-out-button:hover{background:color-mix(in srgb,#e11d48 12%,transparent)!important}
 body[data-theme="dark"] #settingsMenu .sign-out-button{color:#ff9aa3}
 body[data-theme="dark"] #settingsMenu .sign-out-button:hover{background:rgba(225,29,72,.18)!important;color:#ffd1d5}
}