/* Appearance controls are independent of either complete component stylesheet. */
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] {
    color-scheme: light;
    --brand-500: var(--brand-600);
    --brand: var(--brand-700);
    --shadow-soft: var(--shadow-sm);
}
html[data-theme-loading="light"] { background: #f5f7f6; }
html[data-theme-loading="dark"] { background: #18191d; }
html[data-theme-loading] body { visibility: hidden; }

.theme-toggle {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    transition: background 160ms ease, border-color 160ms ease;
}
.theme-toggle:hover { border-color: var(--brand-600); }
.theme-toggle[aria-busy="true"] { cursor: progress; }
.theme-toggle:focus-visible { outline: 3px solid var(--brand-500); outline-offset: 3px; }
.theme-symbol { display: inline-flex; }
html[data-theme="dark"] [data-theme-icon="light"],
html[data-theme="light"] [data-theme-icon="dark"] { display: none; }
.theme-control-topbar { display: flex; flex: 0 0 auto; }
.theme-control-topbar .theme-toggle { width: 40px; padding: 0; border-color: transparent; background: transparent; }
.theme-control-topbar .theme-toggle:hover { background: var(--brand-50); }
.theme-control-topbar .theme-toggle-label { display: none; }
.theme-control-sidebar { display: none; margin: 0 12px 8px; }
.theme-control-sidebar .theme-toggle { width: 100%; justify-content: flex-start; }
.theme-control-auth { position: fixed; z-index: 35; top: 30px; right: 30px; }
.auth-form-context { padding-right: 90px; }

/* Shared accessibility/layout additions that are absent from the supplied legacy light CSS. */
html[data-theme="light"] .skip-link { position: fixed; z-index: 10000; top: 12px; left: 12px; padding: 12px 18px; transform: translateY(-160%); border-radius: 10px; background: var(--surface); color: var(--brand-700); box-shadow: var(--shadow-md); }
html[data-theme="light"] .skip-link:focus { transform: translateY(0); }
html[data-theme="light"] body :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--brand-600); outline-offset: 3px; }
html[data-theme="light"] .employee-table-scroll { position: relative; }

@media (max-width: 1180px) {
    .theme-control-topbar { display: none; }
    .theme-control-sidebar { display: block; }
}
@media (max-width: 900px) {
    .theme-control-auth { top: 20px; right: auto; left: 16px; }
    .theme-control-auth .theme-toggle { width: 40px; padding: 0; }
    .theme-control-auth .theme-toggle-label { display: none; }
    .auth-form-context { padding-right: 0; }
}
@media (max-width: 380px) {
    html[data-theme="light"] .topbar { padding-inline: 8px; gap: 4px; }
    html[data-theme="light"] .topbar-actions { gap: 2px; }
    html[data-theme="light"] .logged-user { padding-inline: 4px; }
    html[data-theme="light"] .organization-trigger img { width: 46px; }
}
@media (prefers-reduced-motion: reduce) {
    .theme-toggle { transition: none; }
}
@media (forced-colors: active) {
    .theme-toggle { border: 1px solid ButtonText; }
}