:root {
    --color-focus: #1769d2;
    --muted: #526579;
    --green: #0b745f;
    --yellow: #854d0e;
}

main .eyebrow { color: #0b745f; }
.has-app-sidebar .app-header .eyebrow { color: #0b745f; }
body[data-active-view] .bottom-nav a:not(.active) { color: #526579; }
body[data-active-view] .metric-card.task-card small { color: #fff; }
.badge.status-yellow, .status-yellow { color: #854d0e; }
.app-version-label { color: #526579; }

[hidden] { display: none !important; }

body :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--color-focus) !important;
    outline-offset: 3px;
}

.skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 30000;
    padding: 12px 16px;
    border: 2px solid #1769d2;
    border-radius: 6px;
    background: #fff;
    color: #0f4fa3;
    transform: translateY(-160%);
}
.skip-link:focus { transform: none; }
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

:is(main, .container, .panel, .mobile-view, .app-header > div, .header-actions, .premium-filter-field) {
    min-width: 0;
}
:is(h1, h2, h3, .alert, .muted, .app-dialog-message) { overflow-wrap: anywhere; }
:is(input, select, textarea) { max-width: 100%; }
input:is([type="checkbox"], [type="radio"]) { min-width: 24px; min-height: 24px; accent-color: #1769d2; }
label:has(> input:is([type="checkbox"], [type="radio"])) { min-height: 44px; }
:is(button, .button, .logout-link) { white-space: normal; overflow-wrap: anywhere; }
:is(.table-wrap, .mobile-table, .table-scroll) {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}
.app-dialog { max-height: calc(100dvh - 40px); overflow-y: auto; }
form[aria-busy="true"] :is(button[type="submit"], button:not([type]), input[type="submit"]) {
    opacity: .65;
    cursor: wait;
}
.form-submit-status { color: #0f4fa3; font-size: 14px; }
.app-sidebar-close { display: none; }

/* Mobile shells do not load the desktop stylesheet. */
body:not(.has-app-sidebar):has(.mobile-shell, .app-shell) .global-loader-overlay {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgb(16 42 67 / 78%);
}
body:has(.mobile-shell, .app-shell) .loader { width: min(84vw, 620px); text-align: center; }
body:has(.mobile-shell, .app-shell) .loader__logo { width: 100%; height: auto; border-radius: 8px; }
body:has(.mobile-shell, .app-shell) .loader__message { display: block; margin-top: 16px; color: #fff; }

@media (max-width: 900px) {
    .schedule-entry-grid-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .app-sidebar-close { display: inline-flex; position: absolute; top: 18px; right: 10px; }
    .app-sidebar-brand { padding-right: 58px; }
    .app-sidebar[inert] { visibility: hidden; }
    body.sidebar-open { overflow: hidden; }
    .app-sidebar :is(a, summary) { min-height: 44px; }
}
@media (min-width: 901px) and (max-width: 1280px) {
    .has-app-sidebar .schedule-entry-grid-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .has-app-sidebar .attendance-report-filter-panel .attendance-report-filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .has-app-sidebar .attendance-report-filter-form > * { grid-column: auto !important; grid-row: auto !important; }
}
@media (max-width: 640px) {
    .schedule-entry-grid, .schedule-entry-grid-four { grid-template-columns: minmax(0, 1fr); }
    .has-app-sidebar .app-header { flex-direction: column; align-items: stretch; }
    .has-app-sidebar .header-actions { flex-wrap: wrap; justify-content: flex-start; }
    .has-app-sidebar .app-header h1 { font-size: 20px; }
    body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) { font-size: 16px; }
    body :is(button, .icon-button, .global-nav-button, .pagination a, .pagination button) {
        min-height: 44px;
        min-width: 44px;
    }
    .header-actions { flex-wrap: wrap; }
}
@media (max-width: 480px) {
    .mobile-form .field-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}
@media print {
    .skip-link, .global-loader-overlay, .form-submit-status { display: none !important; }
}