html[data-appearance="light"]{color-scheme:light}
html[data-appearance="dark"]{color-scheme:dark;background:#111b16}
html[data-appearance="dark"] body{background:#111b16!important;color:#e1e9e3!important}
html[data-appearance="dark"] body *{border-color:#42574a!important}
html[data-appearance="dark"] :where(button,.button,nav a[aria-current="page"]){background-image:none!important}
html[data-appearance="dark"] .app-header nav a[aria-current="page"]{background:#39533c!important;color:#f5e6be!important}
html[data-appearance="dark"] :where(main,section,article,aside,form,dialog,.card,.panel,.modal,.alert,table,thead,tbody,td,th,input,select,textarea){border-color:#42574a!important}
html[data-appearance="dark"] body [data-hq-bg]{background-color:var(--hq-dark-bg)!important;background-image:none!important}
html[data-appearance="dark"] body [data-hq-color]{color:var(--hq-dark-color)!important}
html[data-appearance="dark"] input::placeholder,html[data-appearance="dark"] textarea::placeholder{color:#a3b8a9!important;opacity:1}
html[data-appearance="dark"] :focus-visible{outline:3px solid #d8b76b!important;outline-offset:3px}
.hq-appearance{position:relative;z-index:120;flex-shrink:0;align-self:center;font:13px/1.4 system-ui,sans-serif!important;color:#173f32!important;background:#fffdf5!important;border:1px solid #b7c7b8!important;border-radius:14px;padding:0!important;box-shadow:none;max-width:calc(100vw - 24px)}
.hq-appearance summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;padding:10px 13px!important;min-height:42px;font-weight:650;white-space:nowrap}.hq-appearance summary::-webkit-details-marker{display:none}
.hq-appearance :where(summary,label){background:transparent!important;color:inherit!important}
.hq-appearance .hq-appearance-options{background:#fffdf5!important;color:#173f32!important}
html[data-appearance="dark"] .hq-appearance .hq-appearance-options{background:#20372b!important;color:#e8eedf!important}
.hq-appearance summary svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7}
.hq-appearance-options{position:absolute;top:calc(100% + 8px);right:0;z-index:1100;width:215px;max-width:calc(100vw - 24px);padding-top:12px!important;border:1px solid #9fb4a4;border-radius:12px;box-shadow:0 8px 24px #0003;padding:0 12px 12px!important;display:grid;gap:8px}.hq-appearance-options label{font:12px system-ui!important;color:inherit!important;display:block!important;margin:0!important;padding:0!important}
.hq-appearance select{font:14px system-ui!important;width:180px!important;max-width:100%!important;min-height:42px!important;margin:0!important;padding:8px!important;background:#fffdf5!important;color:#173f32!important;border:1px solid #9fb4a4!important;border-radius:8px!important}
html[data-appearance="dark"] .hq-appearance{background:#20372b!important;color:#e8eedf!important;border-color:#6d8371!important}html[data-appearance="dark"] .hq-appearance select{background:#132219!important;color:#e8eedf!important}
@media(max-width:450px){.hq-appearance{max-width:100%}.hq-appearance summary{font-size:12px;padding:9px 11px!important}}
@media print{.hq-appearance{display:none!important}html[data-appearance="dark"],html[data-appearance="dark"] body{background:white!important;color:black!important}html[data-appearance="dark"] body [data-hq-bg]{background-color:var(--hq-print-bg)!important;background-image:var(--hq-print-image)!important}html[data-appearance="dark"] body [data-hq-color]{color:var(--hq-print-color)!important}html{color-scheme:light!important}}

.app-header .hq-appearance{margin:0 8px;background:#ffffff0d!important;color:#f2e7ca!important;border-color:#d0d9be55!important;border-radius:14px}
.app-header .hq-appearance>summary{min-height:44px;font-size:12px;color:inherit!important}
.tablet-header .hq-appearance{margin:0 2px;font-size:14px;border-radius:12px}
.tablet-header .hq-appearance>summary{min-height:44px;padding:10px 14px!important;color:inherit!important}
.hq-appearance-bar{display:flex;justify-content:flex-end;padding:10px 18px}
@media(max-width:1400px){.app-header nav .hq-appearance{margin:8px 0;align-self:stretch}.app-header nav .hq-appearance>summary{justify-content:flex-start}.app-header nav .hq-appearance-options{position:static;width:100%;box-shadow:none}.tablet-header{flex-wrap:wrap}.tablet-header .hq-appearance>summary{font-size:12px;padding:8px 10px!important}}
@media print{.hq-appearance-bar{display:none!important}}

/* Sampling must bypass transitions: otherwise a dark-to-light transition is read
   midway and a pale surface can be missed on the next adaptation pass. */
html[data-hq-sampling] *,html[data-hq-sampling] *::before,html[data-hq-sampling] *::after{transition:none!important}
@media screen{
html[data-appearance="dark"] body :is(.tablet-office-tabs a,.tablet-dashboard>a,.card,.panel,dialog,[role="dialog"],.planner-dialog){background:#1b2c23!important;background-image:none!important;color:#edf5ef!important;border-color:#52725d!important}
html[data-appearance="dark"] body :is(.tablet-office-tabs a,.tablet-dashboard>a) :is(strong,h3){color:#f4f8f5!important}
html[data-appearance="dark"] body :is(.tablet-office-tabs a,.tablet-dashboard>a) :is(small,p){color:#c6dacd!important}
html[data-appearance="dark"] body :is(.tablet-office-tabs a.is-active,.tablet-dashboard>a.active){background:#34533f!important;border-color:#c9b06a!important}
html[data-appearance="dark"] body :is(.office-tile-icon,.dashboard-icon){background:#304d3b!important;color:#e2d3a5!important}
html[data-appearance="dark"] body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea,option){background:#15251c!important;color:#edf5ef!important;border-color:#708979!important}
html[data-appearance="dark"] .app-header #shell-navigation>a[aria-current="page"]{background:#39533c!important;color:#f5e6be!important}
html[data-appearance="dark"] .app-header #shell-navigation>a[aria-current="page"] :is(b,span,small){color:#f5e6be!important}
html[data-appearance="dark"] :is(button,.button,a):hover{transition:box-shadow .15s,border-color .15s!important}
html[data-appearance="dark"] dialog::backdrop{background:#0009}
}

@media screen{html[data-appearance="dark"] body .planner .planner-secondary{background:#263e31!important;color:#edf5ef!important}html[data-appearance="dark"] body .planner .is-drop-target{background:#34533f!important}}

/* Keep colour changes immediate, including submit buttons and late-loaded panels. */
@media screen{html[data-appearance="dark"] body *{transition-property:box-shadow,transform,border-color!important}}

/* Green panels matching the back office. Explicit toilet-check colours keep touch controls legible in tablet dark mode. */
@media screen {
html[data-appearance="dark"] body[data-tablet-pub] #toilets {color:#edf5ef!important}
html[data-appearance="dark"] body[data-tablet-pub] #toilets .toilet-quick-form {background:#1b2c23!important;background-image:none!important;border-color:#52725d!important}
html[data-appearance="dark"] body[data-tablet-pub] #toilets :is(h2,h3,legend,label) {color:#edf5ef!important}
html[data-appearance="dark"] body[data-tablet-pub] #toilets :is(.muted,.toilet-check-actions>small,.toilet-recent-heading>small,.toilet-empty) {color:#c6dacd!important}
html[data-appearance="dark"] body[data-tablet-pub] #toilets .toilet-choice {background:#294734!important;background-image:none!important;color:#f3f8f4!important;border:2px solid #789783!important}
html[data-appearance="dark"] body[data-tablet-pub] #toilets .toilet-choice span {color:#f3f8f4!important}
html[data-appearance="dark"] body[data-tablet-pub] #toilets .toilet-choice input[type="checkbox"] {accent-color:#e1c678;color-scheme:dark}
html[data-appearance="dark"] body[data-tablet-pub] #toilets .toilet-choice.toilet-area-overdue {background:#46272d!important;border-color:#db8994!important}
html[data-appearance="dark"] body[data-tablet-pub] #toilets .toilet-choice:has(input:checked) {background:#315e43!important;border-color:#dfc77e!important}
html[data-appearance="dark"] body[data-tablet-pub] #toilets :is(.toilet-check-actions,.toilet-history) {border-color:#5d7a66!important}
html[data-appearance="dark"] body[data-tablet-pub] #toilets :is(.toilet-check-actions summary,.toilet-scheduled>summary) {background:#294734!important;background-image:none!important;color:#f0f6ef!important;border:1px solid #789783!important}
html[data-appearance="dark"] body[data-tablet-pub] #toilets :is(select,textarea) {background:#15251c!important;color:#edf5ef!important;border-color:#789783!important}
html[data-appearance="dark"] body[data-tablet-pub] #toilets .toilet-save {background:#346c4e!important;color:#fff!important;border:1px solid #8db29a!important}
html[data-appearance="dark"] body[data-tablet-pub] #toilets .toilet-history-row {background:#294734!important;background-image:none!important;border-color:#5d7a66!important;border-left-color:#b9d0a8!important;color:#edf5ef!important}
html[data-appearance="dark"] body[data-tablet-pub] #toilets .toilet-history-row>strong {color:#f4e1a4!important}
html[data-appearance="dark"] body[data-tablet-pub] #toilets .toilet-history-row>span {color:#d6e8dc!important}
html[data-appearance="dark"] body[data-tablet-pub] #toilets .toilet-history-row :is(p,small) {color:#d6e8dc!important}
html[data-appearance="dark"] body[data-tablet-pub] #toilets .toilet-alert-message {background:#46272d!important;color:#ffe0e4!important;border-color:#db8994!important}
}