/* Shared semantic theme. Status colors do not change with the display mode. */
:root {
    --mos-color-scheme: dark;
    color-scheme: var(--mos-color-scheme);
    --mos-page: #06111C;
    --mos-surface: #0F2A44;
    --mos-raised: #173754;
    --mos-text: #F4F7FB;
    --mos-muted: #A2B0BE;
    --mos-border: rgba(94, 216, 208, 0.15);
    --mos-modal-backdrop: rgba(0, 0, 0, 0.35);
    --mos-brand: #0F2A44;
    --mos-action: #21B6B7;
    --mos-hover: #1A9D9E;
    --mos-success: #22C55E;
    --mos-warning: #F59E0B;
    --mos-error: #EF4444;
    --mos-action-text: #12263A;
    --brand-primary: var(--mos-brand);
    --brand-surface: var(--mos-surface);
    --brand-raised: var(--mos-raised);
    --brand-secondary: var(--mos-action);
    --brand-hover: var(--mos-hover);
    --brand-secondary-ink: var(--mos-action-text);
    --brand-accent: var(--mos-action);
    --brand-action-ink: var(--mos-action);
    --brand-link: var(--mos-action);
}
:root[data-theme="light"] {
    --mos-color-scheme: light;
    --mos-page: #F7FBFC;
    --mos-surface: #FFFFFF;
    --mos-raised: #EDF6F8;
    --mos-text: #12263A;
    --mos-muted: #637789;
    --mos-border: #D7E4E8;
}
/* Backdrops dim the live page; only the foreground dialog uses the panel surface. */
html body dialog::backdrop,
html body .template-studio.ts-mockup-shell .ts-preview-drawer,
html body :is(
    .portal-modal-backdrop, .modal-backdrop, [class*="-modal-backdrop"],
    .sheet-backdrop, [class*="-sheet-backdrop"], .confirmed-profile-modal, .settings-equipment-vendor-modal,
    .spotify-preview-backdrop, .questionnaire-add-music-backdrop, .portal-terms-backdrop,
    .comm-read-overlay, .comm-context-sheet, .comm-filter-sheet, .comm-new-sheet,
    .mobile-day-sheet, .mobile-calendar-sheet, .mobile-calendar-form-sheet,
    .mobile-task-form-sheet, .mobile-event-preview, .ts-preview-drawer
),
html body [id]:is([id$="-modal"], [id*="-picker"]):is(
    [style*="position:fixed"], [style*="position: fixed"]
):is([style*="inset:0"], [style*="inset: 0"]),
html body :is(
    #equipment-modal, #music-template-modal, #suggested-playlist-modal,
    #account-template-modal, #account-user-modal,
    #account-user-date-picker-modal, #account-user-time-restriction-modal
):is([style*="position:fixed"], [style*="position: fixed"]):is([style*="inset:0"], [style*="inset: 0"]),
html body.contact-detail-open::after {
    background: var(--mos-modal-backdrop) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html body dialog.suggested-playlist-modal {
    background: transparent !important;
}
.mos-primary-action {
    background: var(--brand-secondary);
    color: var(--brand-secondary-ink);
    border-color: var(--brand-secondary);
}
.mos-primary-action:hover, .mos-primary-action:active {
    background: var(--brand-hover);
}
.mos-secondary-action {
    background: var(--brand-raised);
    color: var(--mos-text);
    border-color: var(--mos-border);
}
.mos-secondary-action:hover {
    border-color: var(--brand-secondary);
}
.mos-danger-action, .mos-danger-action:hover, .mos-danger-action:active {
    background: var(--mos-error);
    color: var(--mos-action-text);
}
html[data-theme] body:is(.modern-app-shell, .portal-app, .portal-guest),
html[data-theme] body.modern-app-shell[data-density] {
    --pv-primary: var(--mos-text);
    --pv-bg: var(--mos-page);
    --pv-surface: var(--mos-surface);
    --pv-panel: var(--mos-surface);
    --pv-card: var(--mos-surface);
    --pv-text: var(--mos-text);
    --pv-muted: var(--mos-muted);
    --pv-border: var(--mos-border);
    --pv-secondary: var(--brand-secondary);
    --pv-secondary-hover: var(--mos-hover);
    --pv-accent: var(--brand-action-ink);
    --pv-success: var(--mos-success);
    --pv-warning: var(--mos-warning);
    --pv-error: var(--mos-error);
    --shell-bg: var(--mos-page);
    --shell-surface: var(--brand-surface);
    --shell-surface-2: var(--brand-raised);
    --shell-accent: var(--brand-secondary);
    --shell-accent-strong: var(--brand-secondary);
    --shell-text: var(--mos-text);
    --shell-muted: var(--mos-muted);
    --shell-border: var(--mos-border);
    background: var(--mos-page) !important;
    color: var(--mos-text);
}
html[data-theme] body .portal-auth-shell {
    background: var(--mos-page);
}
html[data-theme] body .portal-auth-shell::before {
    display: none;
}
html[data-theme] body :is(.portal-auth-card, .portal-modal-card) {
    background: var(--brand-surface);
    color: var(--mos-text);
    border-color: var(--mos-border);
}
html[data-theme] body :is(.portal-auth-card, .portal-app) :is(.text-gray-900, .text-gray-800, .text-gray-700) {
    color: var(--mos-text);
}
html[data-theme] body .portal-auth-card :is(.text-gray-600, .text-gray-500) {
    color: var(--mos-muted);
}
html[data-theme] body :is(.portal-auth-card input, .portal-input, .portal-select, .portal-textarea) {
    background: var(--brand-raised);
    color: var(--mos-text);
    border-color: var(--mos-border);
}
html[data-theme] body.modern-app-shell #workspace-main :is(.portal-input, .portal-select, .portal-textarea) {
    background: var(--brand-raised) !important;
    color: var(--mos-text) !important;
    border-color: var(--mos-border) !important;
}
html[data-theme] body.modern-app-shell #workspace-main :is(.dj-section, .dj-action-card, .document-card) {
    background: var(--brand-surface) !important;
    border-color: var(--mos-border) !important;
}
html[data-theme] body :is(input, select, textarea):focus-visible {
    outline: 2px solid var(--brand-secondary);
    outline-offset: 2px;
}
html[data-theme] body .portal-auth-card button[type="submit"] {
    background: var(--brand-secondary);
    color: var(--brand-secondary-ink);
}
html[data-theme] body .portal-auth-card button[type="submit"]:hover {
    background: var(--brand-hover);
}
html[data-theme] body .portal-auth-card input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
    -webkit-text-fill-color: var(--mos-text);
    caret-color: var(--mos-text);
}
html[data-theme] body .portal-auth-card input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--brand-raised) inset !important;
    -webkit-text-fill-color: var(--mos-text) !important;
    caret-color: var(--mos-text);
}
html[data-theme] body .portal-auth-card input:autofill {
    box-shadow: 0 0 0 1000px var(--brand-raised) inset !important;
    color: var(--mos-text) !important;
}
html[data-theme] body #workspace-main :is(.portal-btn-primary, .mws-save),
html[data-theme] body.portal-app .portal-btn-primary {
    background: var(--brand-secondary) !important;
    color: var(--brand-secondary-ink) !important;
    border-color: var(--brand-secondary) !important;
}
html[data-theme] body #workspace-main :is(.portal-btn-primary, .mws-save):hover,
html[data-theme] body.portal-app .portal-btn-primary:hover {
    background: var(--brand-hover) !important;
    border-color: var(--brand-hover) !important;
    color: var(--brand-secondary-ink) !important;
}

html[data-theme] input:is([type="checkbox"], [type="radio"], [type="range"]) {
    accent-color: var(--brand-secondary);
    color: var(--brand-secondary);
    --tw-ring-color: var(--brand-secondary);
}
html[data-theme] input:is([type="checkbox"], [type="radio"]) {
    background-color: var(--brand-raised);
    border-color: var(--mos-border);
}
html[data-theme] input:is([type="checkbox"], [type="radio"]):checked {
    background-color: var(--brand-secondary) !important;
    border-color: var(--brand-secondary) !important;
}
html[data-theme] input:is([type="checkbox"], [type="radio"], [type="range"]):focus-visible {
    outline: 2px solid var(--brand-secondary);
    outline-offset: 2px;
}

/* Generated utility color aliases: scripts/sync-theme-utilities.mjs */
:root[data-theme] [class~="bg-amber-100"]:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { background-color: color-mix(in srgb, var(--mos-warning) 12%, var(--brand-surface)); }
:root[data-theme] [class~="bg-amber-50"]:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { background-color: color-mix(in srgb, var(--mos-warning) 12%, var(--brand-surface)); }
:root[data-theme] [class~="bg-black"]:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { background-color: var(--mos-page); }
:root[data-theme] [class~="bg-blue-50"]:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { background-color: color-mix(in srgb, var(--brand-secondary) 12%, var(--brand-surface)); }
:root[data-theme] [class~="bg-gray-100"]:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { background-color: var(--brand-raised); }
:root[data-theme] [class~="bg-gray-50"]:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { background-color: var(--brand-surface); }
:root[data-theme] [class~="bg-gray-500"]:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { background-color: var(--brand-surface); }
:root[data-theme] [class~="bg-gray-800"]:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { background-color: var(--brand-surface); }
:root[data-theme] [class~="bg-green-100"]:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { background-color: color-mix(in srgb, var(--mos-success) 12%, var(--brand-surface)); }
:root[data-theme] [class~="bg-green-50"]:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { background-color: color-mix(in srgb, var(--mos-success) 12%, var(--brand-surface)); }
:root[data-theme] [class~="bg-indigo-50"]:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { background-color: color-mix(in srgb, var(--brand-secondary) 12%, var(--brand-surface)); }
:root[data-theme] [class~="bg-red-50"]:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { background-color: color-mix(in srgb, var(--mos-error) 12%, var(--brand-surface)); }
:root[data-theme] [class~="bg-sky-600"]:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { background-color: var(--brand-secondary); }
:root[data-theme] [class~="bg-slate-50"]:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { background-color: var(--brand-surface); }
:root[data-theme] [class~="bg-white"]:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { background-color: var(--brand-surface); }
:root[data-theme] [class~="border-amber-200"]:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { border-color: var(--mos-warning); }
:root[data-theme] [class~="border-black"]:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { border-color: var(--mos-border); }
:root[data-theme] [class~="border-blue-200"]:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { border-color: var(--brand-secondary); }
:root[data-theme] [class~="border-gray-200"]:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { border-color: var(--mos-border); }
:root[data-theme] [class~="border-gray-300"]:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { border-color: var(--mos-border); }
:root[data-theme] [class~="border-indigo-400"]:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { border-color: var(--brand-secondary); }
:root[data-theme] [class~="border-red-200"]:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { border-color: var(--mos-error); }
:root[data-theme] [class~="border-slate-200"]:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { border-color: var(--mos-border); }
:root[data-theme] [class~="border-white"]:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { border-color: var(--mos-border); }
:root[data-theme="dark"] [class~="dark:hover:bg-white"]:hover:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { background-color: var(--brand-surface); }
:root[data-theme="dark"] [class~="dark:hover:border-white"]:hover:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { border-color: var(--mos-border); }
:root[data-theme] [class~="focus:bg-gray-100"]:focus:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { background-color: var(--brand-raised); }
:root[data-theme] [class~="focus:bg-gray-50"]:focus:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { background-color: var(--brand-surface); }
:root[data-theme] [class~="focus:bg-indigo-100"]:focus:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { background-color: color-mix(in srgb, var(--brand-secondary) 12%, var(--brand-surface)); }
:root[data-theme] [class~="focus:border-gray-300"]:focus:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { border-color: var(--mos-border); }
:root[data-theme] [class~="focus:border-indigo-500"]:focus:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { border-color: var(--brand-secondary); }
:root[data-theme] [class~="focus:border-indigo-700"]:focus:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { border-color: var(--brand-secondary); }
:root[data-theme] [class~="focus:ring-indigo-500"]:focus:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { --tw-ring-color: var(--brand-secondary); }
:root[data-theme] [class~="focus:text-gray-700"]:focus:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { color: var(--mos-text); }
:root[data-theme] [class~="focus:text-gray-800"]:focus:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { color: var(--mos-text); }
:root[data-theme] [class~="focus:text-indigo-800"]:focus:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { color: var(--brand-action-ink); }
:root[data-theme] [class~="hover:bg-black"]:hover:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { background-color: var(--mos-page); }
:root[data-theme] [class~="hover:bg-gray-100"]:hover:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { background-color: var(--brand-raised); }
:root[data-theme] [class~="hover:bg-gray-50"]:hover:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { background-color: var(--brand-surface); }
:root[data-theme] [class~="hover:bg-gray-700"]:hover:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { background-color: var(--brand-surface); }
:root[data-theme] [class~="hover:border-black"]:hover:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { border-color: var(--mos-border); }
:root[data-theme] [class~="hover:border-gray-300"]:hover:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { border-color: var(--mos-border); }
:root[data-theme] [class~="hover:text-gray-700"]:hover:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { color: var(--mos-text); }
:root[data-theme] [class~="hover:text-gray-800"]:hover:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { color: var(--mos-text); }
:root[data-theme] [class~="hover:text-gray-900"]:hover:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { color: var(--mos-text); }
:root[data-theme] [class~="ring-black"]:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { --tw-ring-color: var(--brand-secondary); }
:root[data-theme] [class~="text-amber-800"]:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { color: var(--mos-warning); }
:root[data-theme] [class~="text-amber-900"]:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { color: var(--mos-warning); }
:root[data-theme] [class~="text-amber-950"]:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { color: var(--mos-warning); }
:root[data-theme] [class~="text-blue-700"]:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { color: var(--brand-action-ink); }
:root[data-theme] [class~="text-gray-400"]:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { color: var(--mos-muted); }
:root[data-theme] [class~="text-gray-500"]:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { color: var(--mos-muted); }
:root[data-theme] [class~="text-gray-600"]:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { color: var(--mos-muted); }
:root[data-theme] [class~="text-gray-700"]:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { color: var(--mos-text); }
:root[data-theme] [class~="text-gray-800"]:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { color: var(--mos-text); }
:root[data-theme] [class~="text-gray-900"]:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { color: var(--mos-text); }
:root[data-theme] [class~="text-green-600"]:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { color: var(--mos-success); }
:root[data-theme] [class~="text-green-700"]:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { color: var(--mos-success); }
:root[data-theme] [class~="text-green-800"]:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { color: var(--mos-success); }
:root[data-theme] [class~="text-green-900"]:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { color: var(--mos-success); }
:root[data-theme] [class~="text-indigo-600"]:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { color: var(--brand-action-ink); }
:root[data-theme] [class~="text-indigo-700"]:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { color: var(--brand-action-ink); }
:root[data-theme] [class~="text-red-600"]:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { color: var(--mos-error); }
:root[data-theme] [class~="text-red-700"]:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { color: var(--mos-error); }
:root[data-theme] [class~="text-sky-700"]:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { color: var(--brand-action-ink); }
:root[data-theme] [class~="text-slate-700"]:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { color: var(--mos-text); }
:root[data-theme] [class~="text-white"]:not(:where(.ts-canvas *, .ts-document-preview *, [data-document-content] *)) { color: var(--mos-text); }