/* StaffSync responsive hardening layer.
   Loaded after page-level styles so shared layouts reflow on phone, tablet,
   desktop, portrait, and landscape orientations without restricting orientation. */

:root {
    --staffsync-gutter: clamp(0.75rem, 2.75vw, 2rem);
    --staffsync-card-pad: clamp(1rem, 2.5vw, 1.75rem);
    --staffsync-gap: clamp(0.75rem, 2vw, 1.25rem);
    --staffsync-radius: clamp(1rem, 3vw, 1.875rem);
}

html {
    max-width: 100%;
}

body {
    min-width: 0;
    max-width: 100%;
}

:where(main, header, footer, nav, aside, section, article, form, fieldset, div, ul, ol, li, dl, dt, dd, figure) {
    min-width: 0;
}

:where(p, h1, h2, h3, h4, h5, h6, li, td, th, dd, dt, label, legend, button, a, span, output, figcaption) {
    overflow-wrap: anywhere;
    word-break: normal;
}

:where(img, video, canvas, iframe, object, embed) {
    max-width: 100%;
}

:where(img, video, canvas) {
    height: auto;
}

:where(pre, code, kbd, samp, .sample-block, .calendar-sync-code) {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea, .field-input, .field-select, .field-textarea, .date-input, .calendar-input, .calendar-select, .analytics-input, .analytics-select, .db-tool-input, .hardware-shell input, .hardware-shell select, .hardware-shell textarea) {
    max-width: 100%;
}

:where(textarea, select[multiple]) {
    resize: vertical;
}

:where(.dashboard-shell, .page-shell, .main-content, .content-wrap, .upload-shell, .db-tool-shell, .analytics-shell, .calendar-shell, .hardware-shell, .profile-card, .page-card, .section-card, .panel, .calendar-filter-card, .calendar-board-card, .calendar-detail-card) {
    width: 100%;
    max-width: 100%;
}

.dashboard-shell {
    max-width: 100vw;
}

.dashboard-shell #main-content {
    width: 100%;
    max-width: 100%;
}

.dashboard-shell #main-content > .w-full.flex-1 {
    padding: var(--staffsync-gutter) !important;
}

.dashboard-shell #main-content > header {
    padding-left: var(--staffsync-gutter) !important;
    padding-right: var(--staffsync-gutter) !important;
    scroll-margin-top: 0;
}

#tenant-selector {
    max-width: min(100%, 20rem) !important;
}

#topbar-user-menu {
    max-width: calc(100vw - (var(--staffsync-gutter) * 2));
}

#toast {
    max-width: calc(100vw - 2rem);
    overflow-wrap: anywhere;
}

/* Tables and two-dimensional widgets remain usable through local scrolling only. */
:where(.overflow-x-auto, .results-table-wrap, .org-tree, .analytics-chart, .calendar-board-card) {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

:where(table, .results-table) {
    width: 100%;
}

:where(th, td) {
    max-width: 28rem;
    overflow-wrap: anywhere;
    vertical-align: top;
}

:where(.results-table th, .results-table td) {
    white-space: normal;
}

/* Shared card and page headers. */
:where(.upload-hero, .db-tool-hero, .analytics-hero, .hardware-hero, .calendar-hero, .hero-card, .page-header, .panel-header, .section-header, .calendar-hero-header, .hardware-card__header) {
    border-radius: var(--staffsync-radius);
}

:where(.upload-hero__title, .db-tool-hero__title, .analytics-hero__title, .hardware-hero__title-row h1, .calendar-hero-title, .hero-title, .page-title, .topbar-title) {
    font-size: clamp(1.55rem, 4.5vw, 2.35rem) !important;
    line-height: 1.5 !important;
    letter-spacing: -0.025em;
}

:where(.section-title, .section-card h2, .panel-title, .calendar-section-title, .analytics-card__title, .hardware-card__title, .db-tool-panel__title, .upload-card h2) {
    line-height: 1.5;
}

:where(.status-pill, .calendar-chip, .count-badge, .upload-tenant-pill, .analytics-hero__badge, .db-tool-pill, .hardware-pill, .tenant-setting-card__pill, .user-meta-pill) {
    max-width: 100%;
    white-space: normal !important;
}

:where(.upload-actions, .db-tool-actions, .analytics-actions, .modal-actions, .actions, .panel-actions, .calendar-actions, .recent-orders-filter__actions, .hardware-card__header, .section-header, .page-header, .hero-header, .quick-actions-header, .calendar-hero-header, .hardware-hero__title-row, .db-tool-panel__header, .upload-hero, .db-tool-hero, .analytics-hero__row) {
    flex-wrap: wrap;
}

:where(.primary-action, .secondary-link, .db-tool-button, .analytics-button, .calendar-control-btn, .calendar-view-btn, .btn, .btn-primary, .btn-secondary, .primary-btn, .secondary-btn, .save-btn, .btn-back-onsite) {
    max-width: 100%;
    white-space: normal;
}

/* Responsive grid normalization for custom page components. */
:where(.quick-actions-grid, .summary-grid, .upload-grid, .db-tool-grid, .db-tool-facts, .analytics-summary-grid, .analytics-insights-grid, .analytics-grid, .analytics-weekdays, .tenant-settings-grid, .settings-overview, .user-cards, .profile-row, .profile-row--primary, .profile-row--approvals, .profile-row--footer, .profile-two-column-layout, .form-grid, .balance-grid, .summary-cards, .combined-info-grid, .calendar-steps, .hardware-stats, .hardware-grid, .management-grid, .mini-form, .recent-orders-filter, .supply-line, .order-card__meta) {
    max-width: 100%;
}

:where(.analytics-grid) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)) !important;
}

:where(.analytics-summary-grid) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)) !important;
}

:where(.analytics-insights-grid, .hardware-stats, .db-tool-facts) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)) !important;
}

:where(.quick-actions-grid, .summary-grid, .tenant-settings-grid, .user-cards, .balance-grid, .hardware-grid, .management-grid) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)) !important;
}

:where(.upload-grid, .db-tool-grid, .profile-two-column-layout, .combined-info-grid, .recent-orders-filter) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)) !important;
}

:where(.profile-row--footer, .supply-line, .mini-form) {
    grid-template-columns: minmax(0, 1fr) auto !important;
}

/* Desktop and tablet dashboard balance. */
@media (min-width: 1024px) {
    .dashboard-shell #main-content > .w-full.flex-1 {
        padding-left: clamp(0.75rem, 1.25vw, 1.5rem) !important;
    }

    :where(.analytics-shell, .calendar-shell, .hardware-shell, .upload-shell, .db-tool-shell) {
        gap: clamp(1rem, 1.6vw, 1.5rem);
    }
}

@media (max-width: 1023px) {
    .mobile-sidebar {
        width: min(22rem, calc(100vw - 1rem)) !important;
        max-width: calc(100vw - 1rem) !important;
    }

    .dashboard-shell.nav-drawer-mode #sidebar {
        width: 100vw !important;
        max-width: 100vw !important;
    }

    .dashboard-shell.nav-drawer-mode #sidebar nav > ul,
    .dashboard-shell.nav-drawer-mode #sidebar nav > ul > li > ul {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)) !important;
    }

    .dashboard-shell.nav-drawer-mode .sidebar-link {
        min-height: clamp(5.75rem, 18vw, 8.5rem) !important;
        padding: clamp(0.75rem, 2.5vw, 1rem) !important;
    }

    .dashboard-shell #main-content > header > div {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .dashboard-shell #main-content > header > div > div {
        min-width: 0;
    }
}

@media (max-width: 767px) {
    :root {
        --staffsync-gutter: clamp(0.75rem, 4vw, 1.25rem);
        --staffsync-card-pad: clamp(0.9rem, 4vw, 1.25rem);
    }

    .dashboard-shell #main-content > header {
        position: sticky;
        top: 0;
        padding-top: max(0.75rem, env(safe-area-inset-top, 0px)) !important;
        padding-bottom: 0.75rem !important;
    }

    .dashboard-shell #main-content > header > div {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .dashboard-shell #main-content > header > div > div,
    .dashboard-shell #main-content > header .flex.items-center {
        width: 100%;
        flex-wrap: wrap;
    }

    .dashboard-shell #main-content > header h1 {
        flex-basis: 100%;
        white-space: normal !important;
    }

    #tenant-selector {
        width: 100% !important;
        max-width: 100% !important;
    }

    #topbar-user-menu-wrap {
        margin-left: auto;
    }

    #topbar-user-menu {
        right: 0;
        width: min(20rem, calc(100vw - (var(--staffsync-gutter) * 2))) !important;
    }

    :where(.content-wrap, .main-content, .upload-shell, .db-tool-shell, .analytics-shell, .calendar-shell, .hardware-shell) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    :where(.upload-hero, .db-tool-hero, .analytics-hero, .hardware-hero, .calendar-hero, .hero-card, .page-header, .page-card, .profile-card, .section-card, .panel, .calendar-filter-card, .calendar-board-card, .calendar-detail-card, .status-panel, .quick-actions-section, .upcoming-leaves-card, .info-card) {
        padding: var(--staffsync-card-pad) !important;
        border-radius: var(--staffsync-radius) !important;
    }

    :where(.upload-hero, .db-tool-hero, .analytics-hero__row, .calendar-hero-header, .hardware-hero__title-row, .page-header, .hero-header, .quick-actions-header, .status-box, .panel-header, .section-header, .db-tool-panel__header, .upload-actions, .db-tool-actions, .analytics-actions, .modal-actions, .actions, .recent-orders-filter__actions) {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    :where(.upload-hero__identity, .db-tool-hero__identity, .analytics-hero__title-wrap, .calendar-section-title-wrap, .hero-title-wrap, .page-header-left, .panel-title-wrap) {
        align-items: flex-start !important;
    }

    :where(.quick-actions-grid, .summary-grid, .upload-grid, .db-tool-grid, .db-tool-facts, .analytics-summary-grid, .analytics-insights-grid, .analytics-grid, .tenant-settings-grid, .settings-overview, .user-cards, .profile-row, .profile-row--primary, .profile-row--approvals, .profile-row--footer, .profile-two-column-layout, .form-grid, .balance-grid, .summary-cards, .combined-info-grid, .calendar-steps, .hardware-stats, .hardware-grid, .management-grid, .mini-form, .recent-orders-filter, .supply-line, .order-card__meta) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    :where(.analytics-weekdays) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    :where(.quick-card) {
        min-height: auto !important;
    }

    :where(.modal-backdrop, .employee-edit-modal, [role="dialog"]) {
        padding: max(0.75rem, env(safe-area-inset-top, 0px)) max(0.75rem, env(safe-area-inset-right, 0px)) max(0.75rem, env(safe-area-inset-bottom, 0px)) max(0.75rem, env(safe-area-inset-left, 0px));
    }

    :where(.modal-card, .employee-edit-modal > div, [role="dialog"] > div) {
        width: min(100%, 34rem) !important;
        max-width: 100% !important;
        max-height: calc(100dvh - 1.5rem);
        overflow: auto;
    }

    :where(.upload-actions > *, .db-tool-actions > *, .analytics-actions > *, .modal-actions > *, .actions > *, .panel-actions > *, .recent-orders-filter__actions > *) {
        width: 100%;
    }

    :where(.primary-action, .secondary-link, .db-tool-button, .analytics-button, .btn, .btn-primary, .btn-secondary, .primary-btn, .secondary-btn, .save-btn, .btn-back-onsite) {
        width: 100%;
        justify-content: center;
    }

    :where(.calendar-control-btn, .calendar-view-btn) {
        flex: 1 1 8rem;
        justify-content: center;
    }

    :where(.truncate) {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    #topbar-user-name,
    #topbar-user-title,
    #topbar-user-menu-name,
    #topbar-user-menu-title {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    :where(.search-dropdown__summary, .org-node-name, .org-node-title) {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    :where(.overflow-x-auto, .results-table-wrap) {
        margin-left: calc(var(--staffsync-gutter) * -0.25);
        margin-right: calc(var(--staffsync-gutter) * -0.25);
        padding-bottom: 0.25rem;
    }

    :where(.overflow-x-auto table, .results-table) {
        min-width: 42rem;
    }

    :where(th, td) {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .calendar-grid,
    .calendar-weekdays {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .calendar-weekdays {
        display: none !important;
    }

    .calendar-day {
        min-height: auto !important;
    }

    .org-tree {
        min-height: 50vh !important;
        max-height: none !important;
    }

    .org-directory-chart {
        min-width: min(34rem, calc(100vw - 2rem)) !important;
    }

    .org-node-row {
        max-width: 100% !important;
        align-items: flex-start !important;
    }

    .home-fab {
        left: var(--staffsync-gutter) !important;
        right: var(--staffsync-gutter) !important;
        bottom: max(var(--staffsync-gutter), env(safe-area-inset-bottom, 0px)) !important;
        width: auto !important;
        justify-content: center;
    }

    #toast {
        left: var(--staffsync-gutter) !important;
        right: var(--staffsync-gutter) !important;
        bottom: max(var(--staffsync-gutter), env(safe-area-inset-bottom, 0px)) !important;
        width: auto !important;
    }
}

@media (max-width: 479px) {
    .dashboard-shell #main-content > header .flex.items-center.gap-2,
    .dashboard-shell #main-content > header .flex.items-center.gap-3,
    .dashboard-shell #main-content > header .flex.items-center.gap-4 {
        gap: 0.5rem !important;
    }

    #live-updates-toggle,
    #nav-view-toggle,
    #mobile-menu-button,
    #topbar-user-menu-button {
        flex: 1 1 auto;
    }

    #mobile-menu-button,
    #topbar-user-menu-button {
        max-width: max-content;
    }

    .dashboard-shell.nav-drawer-mode #sidebar nav > ul,
    .dashboard-shell.nav-drawer-mode #sidebar nav > ul > li > ul {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .dashboard-shell.nav-drawer-mode .sidebar-link {
        min-height: 4.75rem !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        text-align: left !important;
    }

    .dashboard-shell.nav-drawer-mode .sidebar-link > span:first-child {
        width: 3rem !important;
        height: 3rem !important;
    }

    :where(.upload-hero__icon, .db-tool-hero__icon, .analytics-hero__icon, .hardware-hero__icon, .hero-icon, .calendar-hero-icon, .page-header-icon) {
        width: 3rem !important;
        height: 3rem !important;
        border-radius: 1rem !important;
    }

    :where(.results-table-wrap, .overflow-x-auto) {
        border-radius: 1rem !important;
    }

    :where(th, td) {
        max-width: 18rem;
    }
}

/* Short landscape phones need compact chrome and scrollable overlays. */
@media (orientation: landscape) and (max-height: 520px) {
    .dashboard-shell #main-content > header {
        position: static;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .dashboard-shell.nav-drawer-mode #sidebar {
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow-y: auto !important;
    }

    .dashboard-shell.nav-drawer-mode #sidebar > div {
        position: static !important;
        padding: 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }

    .dashboard-shell.nav-drawer-mode .sidebar-brand-chronos,
    .mobile-sidebar .sidebar-brand-chronos {
        width: 3.5rem !important;
        height: 3.5rem !important;
    }

    .dashboard-shell.nav-drawer-mode .sidebar-link {
        min-height: 4.5rem !important;
        padding: 0.65rem !important;
    }

    :where(.modal-card, .employee-edit-modal > div, [role="dialog"] > div) {
        max-height: calc(100dvh - 1rem) !important;
    }

    :where(.login-card, main.min-h-screen > .relative) {
        min-height: auto !important;
    }
}

@supports (height: 100dvh) {
    .dashboard-shell.nav-drawer-mode #sidebar,
    .modal-backdrop.open {
        height: 100dvh !important;
        max-height: 100dvh !important;
    }
}

@media (min-width: 768px) and (max-width: 1180px) {
    :where(.quick-actions-grid, .summary-grid, .tenant-settings-grid, .user-cards, .balance-grid, .hardware-grid, .management-grid, .analytics-grid) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    :where(.upload-grid, .db-tool-grid, .profile-two-column-layout, .combined-info-grid) {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    :where(.home-fab, .quick-card, .planner-link-card, .analytics-button, .db-tool-button, .primary-action, .secondary-link) {
        transform: none !important;
    }
}

/* Department Settings uses full-width accordion cards. Prevent the shared auto-fit grid
   from squeezing each setting into narrow desktop columns. */
.tenant-settings-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: clamp(1rem, 2vw, 1.35rem) !important;
}

.tenant-setting-card {
    width: 100%;
}

.tenant-setting-card__summary {
    align-items: flex-start !important;
}

.tenant-setting-card__summary-main > div,
.tenant-setting-card__content > div {
    min-width: 0;
    width: 100%;
}

.tenant-setting-card__subtitle,
.settings-overview__helper {
    max-width: 78ch;
}

@media (min-width: 900px) {
    .settings-overview {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)) !important;
    }

    .tenant-setting-card__summary {
        padding: clamp(1.25rem, 2vw, 1.75rem) !important;
    }

    .tenant-setting-card__content {
        padding: clamp(1.25rem, 2vw, 1.75rem) !important;
    }
}

/* Responsive QA follow-up: prevent readable labels and button text from being squeezed into vertical letters. */
main :where(a, button, summary, label, label span, .btn, .btn-primary, .btn-secondary, .primary-btn, .secondary-btn, .save-btn, .calendar-control-btn, .calendar-view-btn, .tenant-setting-card__title, .tenant-setting-card__pill, .notification-channel-card, .notification-channel-card span) {
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none;
}

main :where(p, li, dd, dt, figcaption, blockquote, td, th, output, .user-email, .search-dropdown__option-primary, .search-dropdown__option-secondary, .calendar-sync-code, .calendar-input, .field-input, .field-summary, .field-help) {
    overflow-wrap: break-word;
    word-break: normal;
}

main :where(.calendar-sync-code, .user-email, .email, [href^="mailto:"], .search-dropdown__option-secondary, .db-tool-input, .sample-block) {
    overflow-wrap: anywhere;
}

@media (max-width: 1280px) {
    main :where([class*="min-w-["], [class*="lg:min-w-["], [class*="md:min-w"]) {
        min-width: 0 !important;
    }

    main :where([class*="whitespace-nowrap"], .whitespace-nowrap) {
        white-space: normal !important;
    }

    main :where(button, a, .btn, .btn-primary, .btn-secondary, .primary-btn, .secondary-btn, .save-btn, .calendar-control-btn, .calendar-view-btn) {
        text-align: center;
    }
}

/* Department Settings: full-width accordions with responsive forms and action buttons. */
.tenant-settings-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: clamp(1rem, 2vw, 1.35rem) !important;
}

.tenant-setting-card,
.tenant-setting-card__content,
.tenant-setting-card__summary,
.tenant-setting-card__summary-main,
.tenant-setting-card__summary-main > div {
    min-width: 0 !important;
    max-width: 100% !important;
}

.tenant-setting-card__summary {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start !important;
}

.tenant-setting-card__summary-main {
    align-items: flex-start !important;
}

.tenant-setting-card__title,
.tenant-setting-card__subtitle,
.tenant-setting-card__pill {
    max-width: 100%;
    white-space: normal !important;
}

.tenant-setting-card__content > .flex {
    flex-direction: column !important;
    align-items: stretch !important;
}

.tenant-setting-card__content > .flex > *,
.tenant-setting-card__content form,
.tenant-setting-card__content form > *,
.tenant-setting-card__content select,
.tenant-setting-card__content input,
.tenant-setting-card__content textarea {
    min-width: 0 !important;
    max-width: 100% !important;
}

.tenant-setting-card__content form {
    width: 100% !important;
}

.tenant-setting-card__content form > .flex {
    flex-wrap: wrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
}

.tenant-setting-card__content form > .flex > * {
    flex: 1 1 min(100%, 14rem) !important;
}

.tenant-setting-card__content .save-btn,
.tenant-setting-card__content .secondary-btn {
    min-width: 0 !important;
    white-space: normal !important;
    text-align: center !important;
}

@media (min-width: 1200px) {
    .tenant-setting-card__content > div:has(> form) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(20rem, 30rem);
        gap: clamp(1.25rem, 2vw, 2rem) !important;
        align-items: end !important;
    }
}

@media (max-width: 640px) {
    .tenant-setting-card__summary {
        grid-template-columns: minmax(0, 1fr);
    }

    .tenant-setting-card__chevron {
        justify-self: start;
        margin-top: 0.25rem;
    }

    .tenant-setting-card__content form > .flex {
        flex-direction: column !important;
    }

    .tenant-setting-card__content .save-btn,
    .tenant-setting-card__content .secondary-btn {
        width: 100% !important;
    }
}

/* Notifications: keep channel choices beside each alert only when there is room. */
#notification-settings-form fieldset > div > div.flex {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem);
    gap: clamp(1rem, 2vw, 1.5rem) !important;
    align-items: start !important;
}

#notification-settings-form [role="group"][aria-labelledby^="notification-item"] {
    width: 100%;
    max-width: 26rem;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#notification-settings-form [role="group"][aria-labelledby^="notification-item"] > div,
#notification-settings-form [role="group"][aria-labelledby^="notification-item"] label,
#notification-settings-form [role="group"][aria-labelledby^="notification-item"] span {
    min-width: 0 !important;
    max-width: 100% !important;
}

#notification-settings-form [role="group"][aria-labelledby^="notification-item"] label span {
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

#notification-settings-form [type="checkbox"] {
    flex: 0 0 auto;
    min-width: 1.25rem;
    min-height: 1.25rem;
}

@media (max-width: 1280px) {
    #notification-settings-form fieldset > div > div.flex {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    #notification-settings-form [role="group"][aria-labelledby^="notification-item"] {
        max-width: 100%;
    }
}

@media (max-width: 640px) {
    #notification-settings-form [role="group"][aria-labelledby^="notification-item"] {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    #save-notification-settings {
        width: 100%;
        min-height: 3rem;
        white-space: normal !important;
    }
}

/* Out Calendar: weekday headers only appear in the true seven-column calendar. */
.calendar-board-card {
    container: staffsync-calendar-board / inline-size;
}

.calendar-board-card .calendar-weekdays {
    display: none !important;
}

.calendar-board-card .calendar-grid {
    grid-template-columns: minmax(0, 1fr) !important;
}

@media (min-width: 768px) {
    .calendar-board-card .calendar-grid {
        grid-template-columns: repeat(2, minmax(min(100%, 16rem), 1fr)) !important;
    }
}

@media (min-width: 1400px) {
    .calendar-board-card .calendar-grid,
    .calendar-board-card .calendar-weekdays {
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    }

    .calendar-board-card .calendar-weekdays {
        display: grid !important;
    }
}

@container staffsync-calendar-board (min-width: 44rem) {
    .calendar-board-card .calendar-grid {
        grid-template-columns: repeat(2, minmax(min(100%, 16rem), 1fr)) !important;
    }

    .calendar-board-card .calendar-weekdays {
        display: none !important;
    }
}

@container staffsync-calendar-board (min-width: 72rem) {
    .calendar-board-card .calendar-grid,
    .calendar-board-card .calendar-weekdays {
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    }

    .calendar-board-card .calendar-weekdays {
        display: grid !important;
    }
}

@media (max-width: 767px) {
    .calendar-board-card .calendar-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

.calendar-day,
.calendar-day * {
    overflow-wrap: normal !important;
    word-break: normal !important;
}

.calendar-day .calendar-preview,
.calendar-day .calendar-chip {
    max-width: 100%;
    white-space: normal !important;
}

/* The home-page floating shortcut was removed; keep it hidden if stale markup remains. */
.home-fab {
    display: none !important;
}

/* Keep headings readable in narrow cards; do not break ordinary words letter-by-letter. */
main :where(h1, h2, h3, h4, h5, h6, legend, .page-title, .section-title, .panel-title, .calendar-section-title, .calendar-hero-title) {
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: none;
}

/* Final responsive control pass: keep button labels readable and move action rows
   before controls become too narrow. This supports WCAG reflow/resize text and
   target-size requirements without hiding actions at tablet widths. */
:root {
    --staffsync-action-min: 8.5rem;
    --staffsync-action-wide: 16rem;
}

main :where(
    button,
    a.inline-flex,
    a.flex[class*="rounded"],
    .btn,
    .btn-primary,
    .btn-secondary,
    .primary-btn,
    .secondary-btn,
    .save-btn,
    .primary-action,
    .secondary-link,
    .db-tool-button,
    .analytics-button,
    .calendar-control-btn,
    .calendar-view-btn,
    .calendar-link-btn,
    .home-ai-action
) {
    min-width: 44px;
    min-height: 44px;
    max-width: 100%;
    height: auto !important;
    line-height: 1.5 !important;
    text-align: center;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
}

main :where(
    button,
    a.inline-flex,
    a.flex[class*="rounded"],
    .btn,
    .btn-primary,
    .btn-secondary,
    .primary-btn,
    .secondary-btn,
    .save-btn,
    .primary-action,
    .secondary-link,
    .db-tool-button,
    .analytics-button,
    .calendar-control-btn,
    .calendar-view-btn,
    .calendar-link-btn,
    .home-ai-action
) :where(span, strong, em) {
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
}

@media (min-width: 641px) {
    main :where(
        button:not(.quick-card):not(.org-node-toggle),
        a.inline-flex,
        a.flex[class*="rounded"],
        .btn,
        .btn-primary,
        .btn-secondary,
        .primary-btn,
        .secondary-btn,
        .save-btn,
        .primary-action,
        .secondary-link,
        .db-tool-button,
        .analytics-button,
        .calendar-control-btn,
        .calendar-view-btn,
        .calendar-link-btn,
        .home-ai-action
    ),
    main :where(
        button:not(.quick-card):not(.org-node-toggle),
        a.inline-flex,
        a.flex[class*="rounded"],
        .btn,
        .btn-primary,
        .btn-secondary,
        .primary-btn,
        .secondary-btn,
        .save-btn,
        .primary-action,
        .secondary-link,
        .db-tool-button,
        .analytics-button,
        .calendar-control-btn,
        .calendar-view-btn,
        .calendar-link-btn,
        .home-ai-action
    ) :where(span, strong, em) {
        white-space: nowrap !important;
    }
}

@supports selector(.flex:has(> button)) {
    main :where(
        .flex:has(> button),
        .flex:has(> a.inline-flex),
        .flex:has(> .btn),
        .flex:has(> .btn-primary),
        .flex:has(> .btn-secondary),
        .flex:has(> .primary-btn),
        .flex:has(> .secondary-btn),
        .flex:has(> .save-btn),
        .flex:has(> .primary-action),
        .flex:has(> .secondary-link),
        .actions,
        .modal-actions,
        .panel-actions,
        .upload-actions,
        .db-tool-actions,
        .analytics-actions,
        .recent-orders-filter__actions
    ) {
        flex-wrap: wrap !important;
    }

    main :where(
        .flex:has(> button),
        .flex:has(> a.inline-flex),
        .flex:has(> .btn),
        .flex:has(> .btn-primary),
        .flex:has(> .btn-secondary),
        .flex:has(> .primary-btn),
        .flex:has(> .secondary-btn),
        .flex:has(> .save-btn),
        .flex:has(> .primary-action),
        .flex:has(> .secondary-link),
        .actions,
        .modal-actions,
        .panel-actions,
        .upload-actions,
        .db-tool-actions,
        .analytics-actions,
        .recent-orders-filter__actions
    ) > :where(
        button:not(.quick-card),
        a.inline-flex,
        a.flex[class*="rounded"],
        .btn,
        .btn-primary,
        .btn-secondary,
        .primary-btn,
        .secondary-btn,
        .save-btn,
        .primary-action,
        .secondary-link
    ) {
        flex: 0 0 auto;
    }
}

/* Home AI panel: always expose the generate control when AI is enabled. */
#home-ai-panel > .flex,
#home-ai-panel .flex.flex-col {
    align-items: stretch;
}

.home-ai-action {
    display: inline-flex !important;
    width: max-content;
    min-width: 7.5rem;
    flex: 0 0 auto;
    align-self: flex-start;
    justify-content: center;
}

@media (min-width: 768px) {
    #home-ai-panel > .flex,
    #home-ai-panel .flex.flex-col.md\:flex-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) max-content;
        align-items: center !important;
        gap: 1rem;
    }

    .home-ai-action {
        align-self: center;
        justify-self: end;
    }
}

/* Leave request final summary: stack on tablet instead of squeezing buttons
   beside the summary cards. */
.leave-final-card {
    position: static !important;
}

.leave-final-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: end !important;
    gap: clamp(1rem, 2vw, 1.5rem) !important;
}

.leave-summary-panel {
    min-width: 0 !important;
    width: 100%;
}

.leave-summary-panel > .flex {
    align-items: stretch !important;
}

#leave-live-summary {
    width: 100% !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr)) !important;
}

#leave-live-summary > div {
    min-width: 0;
}

.leave-action-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-width: max-content;
}

#leave-clear-btn,
#leave-submit-btn {
    min-width: var(--staffsync-action-min);
    min-height: 3rem;
    white-space: nowrap !important;
}

@media (max-width: 1180px) {
    .leave-final-layout {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .leave-action-buttons {
        width: 100%;
        min-width: 0;
        justify-content: flex-start !important;
    }
}

@media (max-width: 640px) {
    .leave-action-buttons {
        flex-direction: column-reverse !important;
        align-items: stretch !important;
    }

    #leave-clear-btn,
    #leave-submit-btn {
        width: 100%;
        min-width: 0;
    }
}

/* Notifications footer: keep the save button large enough or place it on its
   own row. */
.notification-save-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: center !important;
    gap: clamp(1rem, 2vw, 1.25rem) !important;
}

.notification-save-row > p {
    min-width: 0;
    max-width: 80ch;
}

#save-notification-settings {
    width: auto !important;
    min-width: var(--staffsync-action-wide);
    min-height: 3rem;
    height: auto !important;
    padding-block: 0.65rem;
    white-space: nowrap !important;
    justify-self: end;
    flex: 0 0 auto;
}

@media (max-width: 900px) {
    .notification-save-row {
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: stretch !important;
    }

    #save-notification-settings {
        justify-self: start;
    }
}

@media (max-width: 640px) {
    #save-notification-settings {
        width: 100% !important;
        min-width: 0;
        justify-self: stretch;
    }
}

/* Last-resort narrow-screen button safety. Labels may wrap at spaces on very
   small phones, but never as one-letter columns. */
@media (max-width: 360px) {
    main :where(
        button,
        a.inline-flex,
        a.flex[class*="rounded"],
        .btn,
        .btn-primary,
        .btn-secondary,
        .primary-btn,
        .secondary-btn,
        .save-btn,
        .primary-action,
        .secondary-link,
        .db-tool-button,
        .analytics-button,
        .calendar-control-btn,
        .calendar-view-btn,
        .calendar-link-btn,
        .home-ai-action
    ),
    main :where(
        button,
        a.inline-flex,
        a.flex[class*="rounded"],
        .btn,
        .btn-primary,
        .btn-secondary,
        .primary-btn,
        .secondary-btn,
        .save-btn,
        .primary-action,
        .secondary-link,
        .db-tool-button,
        .analytics-button,
        .calendar-control-btn,
        .calendar-view-btn,
        .calendar-link-btn,
        .home-ai-action
    ) :where(span, strong, em) {
        white-space: normal !important;
        overflow-wrap: break-word !important;
    }
}

/* Final responsive button/layout hardening.
   Keeps button text from being squeezed into one-letter columns while allowing
   action rows to wrap or stack before controls collide. */
main :where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"], a.inline-flex, a.flex, .btn, .btn-primary, .btn-secondary, .primary-btn, .secondary-btn, .save-btn, .primary-action, .secondary-link, .analytics-button, .db-tool-button, .calendar-control-btn, .calendar-view-btn) {
    max-width: 100%;
    min-height: 44px !important;
    line-height: 1.45 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    text-align: center;
}

main :where(button > span, [role="button"] > span, a.inline-flex > span, a.flex > span, .btn > span, .btn-primary > span, .btn-secondary > span, .primary-btn > span, .secondary-btn > span, .save-btn > span, .primary-action > span, .secondary-link > span, .analytics-button > span, .db-tool-button > span, .calendar-control-btn > span, .calendar-view-btn > span) {
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    min-width: 0;
}

main :where(button:not(.icon-btn):not(.search-dropdown__button):not(.tenant-setting-card__chevron), input[type="submit"], input[type="button"], input[type="reset"], .btn, .btn-primary, .btn-secondary, .primary-btn, .secondary-btn, .save-btn, .primary-action, .secondary-link, .analytics-button, .db-tool-button, .calendar-control-btn, .calendar-view-btn) {
    height: auto !important;
    min-width: 44px;
    padding-top: max(0.5rem, 0.5em) !important;
    padding-bottom: max(0.5rem, 0.5em) !important;
    flex-shrink: 0;
}

main :where(.upload-actions, .db-tool-actions, .analytics-actions, .modal-actions, .actions, .panel-actions, .calendar-actions, .recent-orders-filter__actions, .leave-action-buttons, .hardware-card__actions, .management-actions, .section-actions, .form-actions) {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0.75rem, 1.5vw, 1rem);
    align-items: center;
}

main :where(.leave-action-buttons, .modal-actions, .actions, .panel-actions, .form-actions) > :where(button, a, input[type="submit"]) {
    min-inline-size: min(100%, 7.5rem);
}

main :where(button[type="submit"]:not(.icon-btn), .btn-primary, .primary-btn, .primary-action, .save-btn, .analytics-button--primary) {
    min-inline-size: min(100%, 10rem);
}

/* Leave request footer: do not let the summary card and submit controls compete for the same row on tablet widths. */
.leave-final-card.section-card-final {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1rem, 2vw, 1.25rem) !important;
    align-items: stretch !important;
}

.leave-final-layout {
    display: contents !important;
}

.leave-summary-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.leave-summary-panel > div {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1rem, 2vw, 1.25rem) !important;
    align-items: start !important;
}

#leave-live-summary {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)) !important;
}

.leave-action-buttons {
    width: 100% !important;
    justify-content: flex-end !important;
}

.leave-action-buttons > button {
    min-height: 48px !important;
    min-inline-size: min(100%, 9.5rem) !important;
}

#leave-submit-btn {
    min-inline-size: min(100%, 11rem) !important;
}

@media (min-width: 1280px) {
    .leave-final-card.section-card-final {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center !important;
    }

    .leave-action-buttons {
        width: auto !important;
        align-self: center;
    }
}

@media (max-width: 767px) {
    .leave-final-card.section-card-final {
        position: static !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: var(--staffsync-radius) !important;
        border: 1px solid #e5e7eb !important;
    }

    .leave-action-buttons {
        flex-direction: column-reverse !important;
        align-items: stretch !important;
    }

    .leave-action-buttons > button,
    main :where(.modal-actions, .actions, .panel-actions, .form-actions) > :where(button, a, input[type="submit"]) {
        width: 100% !important;
        min-inline-size: 0 !important;
    }
}

/* Notifications: the save row stacks on tablet before the button text wraps into a cramped box. */
.notification-save-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center !important;
    gap: clamp(1rem, 2vw, 1.5rem) !important;
}

#notification-save-help {
    max-width: 72ch;
}

#save-notification-settings,
.notification-save-button {
    height: auto !important;
    min-height: 48px !important;
    min-inline-size: min(100%, 14rem) !important;
    padding-block: 0.75rem !important;
    white-space: normal !important;
    justify-self: end;
}

#save-notification-settings span,
.notification-save-button span {
    display: inline-block;
    max-width: 18ch;
}

@media (max-width: 1180px) {
    .notification-save-row {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    #save-notification-settings,
    .notification-save-button {
        justify-self: start;
    }
}

@media (max-width: 767px) {
    #save-notification-settings,
    .notification-save-button {
        width: 100% !important;
        min-inline-size: 0 !important;
        justify-self: stretch;
    }
}

/* Home AI card: keep the Generate action visible and sized like a real button. */
#home-ai-panel > .flex,
#home-ai-panel .home-ai-row {
    flex-wrap: wrap;
}

#home-ai-generate-button,
.home-ai-generate-button {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 48px !important;
    min-inline-size: min(100%, 9rem) !important;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    #home-ai-generate-button,
    .home-ai-generate-button {
        width: 100% !important;
    }
}

/* Include dynamically rendered Home AI buttons in the final visibility rule. */
.home-ai-action {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 48px !important;
    min-inline-size: min(100%, 9rem) !important;
    justify-content: center !important;
    align-items: center !important;
}

@media (max-width: 767px) {
    .home-ai-action {
        width: 100% !important;
    }
}

/* Final override: button text must stay horizontal on every page. */
@media (min-width: 361px) {
    main :where(
        button:not(.quick-card):not(.search-dropdown__button):not(.org-node-toggle),
        input[type="submit"],
        input[type="button"],
        input[type="reset"],
        a.inline-flex,
        a.flex[class*="rounded"],
        .btn,
        .btn-primary,
        .btn-secondary,
        .primary-btn,
        .secondary-btn,
        .save-btn,
        .primary-action,
        .secondary-link,
        .analytics-button,
        .db-tool-button,
        .calendar-control-btn,
        .calendar-view-btn,
        .calendar-link-btn,
        .home-ai-action
    ),
    main :where(
        button:not(.quick-card):not(.search-dropdown__button):not(.org-node-toggle),
        input[type="submit"],
        input[type="button"],
        input[type="reset"],
        a.inline-flex,
        a.flex[class*="rounded"],
        .btn,
        .btn-primary,
        .btn-secondary,
        .primary-btn,
        .secondary-btn,
        .save-btn,
        .primary-action,
        .secondary-link,
        .analytics-button,
        .db-tool-button,
        .calendar-control-btn,
        .calendar-view-btn,
        .calendar-link-btn,
        .home-ai-action
    ) :where(span, strong, em) {
        white-space: nowrap !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;
    }
}

#save-notification-settings,
.notification-save-button {
    white-space: nowrap !important;
    min-inline-size: max-content !important;
    width: auto !important;
}

#save-notification-settings span,
.notification-save-button span {
    max-width: none !important;
    white-space: nowrap !important;
}

@media (max-width: 767px) {
    #save-notification-settings,
    .notification-save-button {
        width: 100% !important;
        min-inline-size: 0 !important;
    }
}

#leave-clear-btn,
#leave-submit-btn,
#leave-clear-btn span,
#leave-submit-btn span,
.home-ai-action,
.home-ai-action span {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

/* Search/dropdown selector buttons behave like form fields, not action buttons. */
main .search-dropdown__button,
main .search-dropdown__button :where(span, strong, em) {
    white-space: normal !important;
    text-align: left !important;
}

main .search-dropdown__summary {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}


/* Final contrast and branding pass.
   Explicit colors are used here because some automated checkers do not resolve
   inherited Tailwind color utilities on nested button text reliably. */
.footer-uth-link {
    flex: 0 0 372px !important;
    width: 372px !important;
    max-width: 100% !important;
    height: 44px !important;
}

.footer-uth-logo {
    display: block !important;
    width: 372px !important;
    max-width: 100% !important;
    height: 44px !important;
    object-fit: contain !important;
}

@media (max-width: 420px) {
    .footer-uth-link,
    .footer-uth-logo {
        width: min(100%, 372px) !important;
    }
}

:where(.text-white),
:where(.text-white) :where(span, strong, em, small, i, svg),
:where(.bg-blue-600, .bg-blue-700, .bg-blue-800, .bg-blue-900, .bg-blue-950,
       .bg-indigo-600, .bg-indigo-700, .bg-indigo-800, .bg-indigo-900, .bg-indigo-950,
       .bg-sky-600, .bg-sky-700, .bg-sky-800, .bg-sky-900, .bg-sky-950,
       .bg-slate-800, .bg-slate-900, .bg-slate-950,
       .bg-gray-800, .bg-gray-900, .bg-gray-950,
       .bg-emerald-600, .bg-emerald-700, .bg-emerald-800, .bg-emerald-900, .bg-emerald-950,
       .bg-green-600, .bg-green-700, .bg-green-800, .bg-green-900, .bg-green-950,
       .bg-red-600, .bg-red-700, .bg-red-800, .bg-red-900, .bg-red-950,
       .bg-rose-600, .bg-rose-700, .bg-rose-800, .bg-rose-900, .bg-rose-950,
       .bg-amber-600, .bg-amber-700, .bg-amber-800, .bg-amber-900, .bg-amber-950,
       .bg-orange-600, .bg-orange-700, .bg-orange-800, .bg-orange-900, .bg-orange-950,
       .bg-violet-600, .bg-violet-700, .bg-violet-800, .bg-violet-900, .bg-violet-950,
       .bg-purple-600, .bg-purple-700, .bg-purple-800, .bg-purple-900, .bg-purple-950),
:where(.bg-blue-600, .bg-blue-700, .bg-blue-800, .bg-blue-900, .bg-blue-950,
       .bg-indigo-600, .bg-indigo-700, .bg-indigo-800, .bg-indigo-900, .bg-indigo-950,
       .bg-sky-600, .bg-sky-700, .bg-sky-800, .bg-sky-900, .bg-sky-950,
       .bg-slate-800, .bg-slate-900, .bg-slate-950,
       .bg-gray-800, .bg-gray-900, .bg-gray-950,
       .bg-emerald-600, .bg-emerald-700, .bg-emerald-800, .bg-emerald-900, .bg-emerald-950,
       .bg-green-600, .bg-green-700, .bg-green-800, .bg-green-900, .bg-green-950,
       .bg-red-600, .bg-red-700, .bg-red-800, .bg-red-900, .bg-red-950,
       .bg-rose-600, .bg-rose-700, .bg-rose-800, .bg-rose-900, .bg-rose-950,
       .bg-amber-600, .bg-amber-700, .bg-amber-800, .bg-amber-900, .bg-amber-950,
       .bg-orange-600, .bg-orange-700, .bg-orange-800, .bg-orange-900, .bg-orange-950,
       .bg-violet-600, .bg-violet-700, .bg-violet-800, .bg-violet-900, .bg-violet-950,
       .bg-purple-600, .bg-purple-700, .bg-purple-800, .bg-purple-900, .bg-purple-950) :where(span, strong, em, small, i, svg),
:where(.btn-primary, .btn-back-onsite, .primary-btn, .primary-action, .save-btn,
       .analytics-button--primary, .db-tool-button, .notification-save-button,
       .home-ai-action),
:where(.btn-primary, .btn-back-onsite, .primary-btn, .primary-action, .save-btn,
       .analytics-button--primary, .db-tool-button, .notification-save-button,
       .home-ai-action) :where(span, strong, em, small, i, svg),
#save-notification-settings,
#save-notification-settings :where(span, strong, em, small, i, svg) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

#save-notification-settings {
    background-color: #1e3a8a !important;
    border-color: #1e3a8a !important;
}

#save-notification-settings:hover,
#save-notification-settings:focus-visible {
    background-color: #172554 !important;
    border-color: #172554 !important;
}


.calendar-view-btn.is-active,
.calendar-view-btn.is-active :where(span, strong, em, small, i, svg) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


/* Site-wide button contrast hardening for automated WCAG checks.
   Several page-level rules set button text to #111827; these rules force
   white text on dark action backgrounds and all of their nested text nodes. */
html body :where(main, .main-content, .content-wrap, .modal, .modal-backdrop, .employee-edit-modal) :is(
    button, a, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]
):is(
    .text-white,
    .bg-blue-500, .bg-blue-600, .bg-blue-700, .bg-blue-800, .bg-blue-900, .bg-blue-950,
    .bg-indigo-500, .bg-indigo-600, .bg-indigo-700, .bg-indigo-800, .bg-indigo-900, .bg-indigo-950,
    .bg-sky-500, .bg-sky-600, .bg-sky-700, .bg-sky-800, .bg-sky-900, .bg-sky-950,
    .bg-slate-800, .bg-slate-900, .bg-slate-950,
    .bg-gray-800, .bg-gray-900, .bg-gray-950,
    .bg-emerald-500, .bg-emerald-600, .bg-emerald-700, .bg-emerald-800, .bg-emerald-900, .bg-emerald-950,
    .bg-green-500, .bg-green-600, .bg-green-700, .bg-green-800, .bg-green-900, .bg-green-950,
    .bg-red-500, .bg-red-600, .bg-red-700, .bg-red-800, .bg-red-900, .bg-red-950,
    .bg-rose-500, .bg-rose-600, .bg-rose-700, .bg-rose-800, .bg-rose-900, .bg-rose-950,
    .bg-violet-500, .bg-violet-600, .bg-violet-700, .bg-violet-800, .bg-violet-900, .bg-violet-950,
    .bg-purple-500, .bg-purple-600, .bg-purple-700, .bg-purple-800, .bg-purple-900, .bg-purple-950,
    .btn-primary, .primary-btn, .primary-action, .save-btn, .db-tool-button, .analytics-button--primary,
    .notification-save-button, .home-ai-action, .btn-back-onsite
),
html body :where(main, .main-content, .content-wrap, .modal, .modal-backdrop, .employee-edit-modal) :is(
    button, a, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]
):is(
    .text-white,
    .bg-blue-500, .bg-blue-600, .bg-blue-700, .bg-blue-800, .bg-blue-900, .bg-blue-950,
    .bg-indigo-500, .bg-indigo-600, .bg-indigo-700, .bg-indigo-800, .bg-indigo-900, .bg-indigo-950,
    .bg-sky-500, .bg-sky-600, .bg-sky-700, .bg-sky-800, .bg-sky-900, .bg-sky-950,
    .bg-slate-800, .bg-slate-900, .bg-slate-950,
    .bg-gray-800, .bg-gray-900, .bg-gray-950,
    .bg-emerald-500, .bg-emerald-600, .bg-emerald-700, .bg-emerald-800, .bg-emerald-900, .bg-emerald-950,
    .bg-green-500, .bg-green-600, .bg-green-700, .bg-green-800, .bg-green-900, .bg-green-950,
    .bg-red-500, .bg-red-600, .bg-red-700, .bg-red-800, .bg-red-900, .bg-red-950,
    .bg-rose-500, .bg-rose-600, .bg-rose-700, .bg-rose-800, .bg-rose-900, .bg-rose-950,
    .bg-violet-500, .bg-violet-600, .bg-violet-700, .bg-violet-800, .bg-violet-900, .bg-violet-950,
    .bg-purple-500, .bg-purple-600, .bg-purple-700, .bg-purple-800, .bg-purple-900, .bg-purple-950,
    .btn-primary, .primary-btn, .primary-action, .save-btn, .db-tool-button, .analytics-button--primary,
    .notification-save-button, .home-ai-action, .btn-back-onsite
) :is(span, strong, em, small, i, svg, path) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body :where(main, .main-content, .content-wrap) :is(
    button, a, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]
):is(.bg-blue-500, .bg-blue-600, .bg-blue-700, .primary-action, .save-btn, .home-ai-action) {
    background-color: #1e3a8a !important;
    border-color: #1e3a8a !important;
}

html body :where(main, .main-content, .content-wrap) :is(
    button, a, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]
):is(.bg-blue-500, .bg-blue-600, .bg-blue-700, .primary-action, .save-btn, .home-ai-action):hover,
html body :where(main, .main-content, .content-wrap) :is(
    button, a, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]
):is(.bg-blue-500, .bg-blue-600, .bg-blue-700, .primary-action, .save-btn, .home-ai-action):focus-visible {
    background-color: #172554 !important;
    border-color: #172554 !important;
}

/* Siteimprove final pass: dark/black action buttons.
   Some audits reported white text against the browser fallback button gray
   because the dark Tailwind utility was not being treated as the actual
   background. Force a real dark background color and white foreground on
   black/slate/gray action controls and their nested labels/icons. */
html body :is(button, a, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]):is(
    .bg-slate-800, .bg-slate-900, .bg-slate-950,
    .bg-gray-800, .bg-gray-900, .bg-gray-950,
    .bg-zinc-800, .bg-zinc-900, .bg-zinc-950,
    .bg-neutral-800, .bg-neutral-900, .bg-neutral-950,
    .bg-stone-800, .bg-stone-900, .bg-stone-950,
    .bg-black
) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background-color: #111827 !important;
    border-color: #111827 !important;
}

html body :is(button, a, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]):is(
    .bg-slate-800, .bg-slate-900, .bg-slate-950,
    .bg-gray-800, .bg-gray-900, .bg-gray-950,
    .bg-zinc-800, .bg-zinc-900, .bg-zinc-950,
    .bg-neutral-800, .bg-neutral-900, .bg-neutral-950,
    .bg-stone-800, .bg-stone-900, .bg-stone-950,
    .bg-black
) :is(span, strong, em, small, i, svg, path) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body :is(button, a, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]):is(
    .bg-slate-800, .bg-slate-900, .bg-slate-950,
    .bg-gray-800, .bg-gray-900, .bg-gray-950,
    .bg-zinc-800, .bg-zinc-900, .bg-zinc-950,
    .bg-neutral-800, .bg-neutral-900, .bg-neutral-950,
    .bg-stone-800, .bg-stone-900, .bg-stone-950,
    .bg-black
):is(:hover, :focus, :focus-visible) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background-color: #0f172a !important;
    border-color: #0f172a !important;
}

/* Siteimprove black-button contrast fix.
   Use simple selectors because Siteimprove can miss Tailwind utility backgrounds
   on native buttons and then compare white text against the browser's default
   #f0f0f0 button background. */
button.bg-gray-900,
button.bg-gray-800,
button.bg-slate-900,
button.bg-slate-800,
button.bg-black,
a.bg-gray-900,
a.bg-gray-800,
a.bg-slate-900,
a.bg-slate-800,
a.bg-black,
input.bg-gray-900,
input.bg-gray-800,
input.bg-slate-900,
input.bg-slate-800,
input.bg-black,
.action-dark {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: #111827 !important;
    background-color: #111827 !important;
    background-image: none !important;
    border-color: #111827 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

button.bg-gray-900 *,
button.bg-gray-800 *,
button.bg-slate-900 *,
button.bg-slate-800 *,
button.bg-black *,
a.bg-gray-900 *,
a.bg-gray-800 *,
a.bg-slate-900 *,
a.bg-slate-800 *,
a.bg-black *,
.action-dark * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

button.bg-gray-900:hover,
button.bg-gray-800:hover,
button.bg-slate-900:hover,
button.bg-slate-800:hover,
button.bg-black:hover,
button.bg-gray-900:focus-visible,
button.bg-gray-800:focus-visible,
button.bg-slate-900:focus-visible,
button.bg-slate-800:focus-visible,
button.bg-black:focus-visible,
a.bg-gray-900:hover,
a.bg-gray-800:hover,
a.bg-slate-900:hover,
a.bg-slate-800:hover,
a.bg-black:hover,
a.bg-gray-900:focus-visible,
a.bg-gray-800:focus-visible,
a.bg-slate-900:focus-visible,
a.bg-slate-800:focus-visible,
a.bg-black:focus-visible,
.action-dark:hover,
.action-dark:focus-visible {
    background: #0f172a !important;
    background-color: #0f172a !important;
    background-image: none !important;
    border-color: #0f172a !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Footer logo sizing fix.
   In a column flex footer, flex-basis becomes height. The old 372px flex-basis
   made a 44px logo reserve 372px of vertical space on tablet/smaller widths. */
.footer-uth-link {
    flex: 0 0 auto !important;
    width: min(100%, 372px) !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    line-height: 0 !important;
}

.footer-uth-logo {
    display: block !important;
    width: 372px !important;
    max-width: 100% !important;
    height: 44px !important;
    max-height: 44px !important;
    object-fit: contain !important;
}

/* Tablet portrait expanded navigation drawer fix.
   Keep the app drawer from compressing into four narrow columns on iPad/tablet portrait widths. */
@media (min-width: 768px) and (max-width: 899px) {
    .dashboard-shell.nav-drawer-mode #sidebar nav > ul {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 1rem !important;
    }

    .dashboard-shell.nav-drawer-mode #sidebar nav > ul > li > ul {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0.75rem !important;
    }

    .dashboard-shell.nav-drawer-mode #sidebar.mobile-sidebar .sidebar-link {
        min-height: 5.75rem !important;
        grid-template-columns: 4.25rem minmax(0, 1fr) !important;
        gap: 0.95rem !important;
        padding: 0.85rem 1rem !important;
    }

    .dashboard-shell.nav-drawer-mode #sidebar.mobile-sidebar .sidebar-link > span:first-child {
        width: 4rem !important;
        height: 4rem !important;
    }

    .dashboard-shell.nav-drawer-mode #sidebar.mobile-sidebar .sidebar-link .leading-snug,
    .dashboard-shell.nav-drawer-mode #sidebar.mobile-sidebar .sidebar-link .flex.min-w-0.flex-1.items-center.gap-2 > span:first-child,
    .dashboard-shell.nav-drawer-mode #sidebar.mobile-sidebar .sidebar-link .flex.min-w-0.flex-1.items-center.justify-between.gap-3 > span:first-child {
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;
        line-height: 1.35 !important;
        text-align: left !important;
    }
}

/* Strong tablet portrait expanded navigation layout fix.
   iPad portrait widths are too wide for the phone drawer but too narrow for
   the four-section app drawer. Force a 2x2 section layout and horizontal cards. */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
    .dashboard-shell.nav-drawer-mode #sidebar nav,
    .dashboard-shell.nav-drawer-mode #sidebar > div {
        width: min(100%, 52rem) !important;
    }

    .dashboard-shell.nav-drawer-mode #sidebar nav > ul {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 1rem !important;
        align-items: start !important;
    }

    .dashboard-shell.nav-drawer-mode #sidebar nav > ul > li {
        min-width: 0 !important;
    }

    .dashboard-shell.nav-drawer-mode #sidebar nav > ul > li > ul {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0.75rem !important;
        padding: 0.85rem !important;
    }

    .dashboard-shell.nav-drawer-mode #sidebar .sidebar-link,
    .dashboard-shell.nav-drawer-mode #sidebar.mobile-sidebar .sidebar-link {
        display: grid !important;
        grid-template-columns: 4rem minmax(0, 1fr) !important;
        min-height: 6rem !important;
        justify-content: stretch !important;
        align-items: center !important;
        gap: 1rem !important;
        padding: 0.9rem 1rem !important;
        text-align: left !important;
        flex-direction: row !important;
    }

    .dashboard-shell.nav-drawer-mode #sidebar .sidebar-link > span:first-child,
    .dashboard-shell.nav-drawer-mode #sidebar.mobile-sidebar .sidebar-link > span:first-child {
        width: 4rem !important;
        height: 4rem !important;
    }

    .dashboard-shell.nav-drawer-mode #sidebar .sidebar-link > span:not(:first-child),
    .dashboard-shell.nav-drawer-mode #sidebar .sidebar-link .min-w-0,
    .dashboard-shell.nav-drawer-mode #sidebar .sidebar-link .flex-1,
    .dashboard-shell.nav-drawer-mode #sidebar .sidebar-link .leading-snug {
        width: auto !important;
        min-width: 0 !important;
        text-align: left !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;
        line-height: 1.35 !important;
    }

    .dashboard-shell.nav-drawer-mode #sidebar .sidebar-link .flex.min-w-0.flex-1.items-center.gap-2,
    .dashboard-shell.nav-drawer-mode #sidebar .sidebar-link .flex.min-w-0.flex-1.items-center.justify-between.gap-3 {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.5rem !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .dashboard-shell.nav-drawer-mode #sidebar .sidebar-link .flex.min-w-0.flex-1.items-center.gap-2 > span:first-child,
    .dashboard-shell.nav-drawer-mode #sidebar .sidebar-link .flex.min-w-0.flex-1.items-center.justify-between.gap-3 > span:first-child {
        width: auto !important;
        min-width: 0 !important;
        white-space: normal !important;
    }

    .dashboard-shell.nav-drawer-mode #sidebar .sidebar-link .ai-nav-badge,
    .dashboard-shell.nav-drawer-mode #sidebar .sidebar-approvals-badge {
        top: 0.65rem !important;
        right: 0.65rem !important;
        margin-left: 0 !important;
    }
}

/* Tablet landscape expanded navigation drawer fix.
   On iPad/tablet landscape the app drawer can still be narrower than the
   desktop breakpoint, especially inside browser/device emulation. Keep the
   drawer from creating a hidden fourth column and horizontal scrolling. */
@media (min-width: 900px) and (max-width: 1279px) and (orientation: landscape) {
    .dashboard-shell.nav-drawer-mode #sidebar {
        overflow-x: hidden !important;
    }

    .dashboard-shell.nav-drawer-mode #sidebar > div,
    .dashboard-shell.nav-drawer-mode #sidebar nav {
        width: min(100%, 68rem) !important;
        max-width: 100% !important;
    }

    .dashboard-shell.nav-drawer-mode #sidebar nav > ul {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 1rem !important;
        align-items: start !important;
        overflow-x: hidden !important;
    }

    .dashboard-shell.nav-drawer-mode #sidebar nav > ul > li {
        min-width: 0 !important;
    }

    .dashboard-shell.nav-drawer-mode #sidebar nav > ul > li > ul {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.8rem !important;
        padding: 0.75rem !important;
        min-width: 0 !important;
    }

    .dashboard-shell.nav-drawer-mode #sidebar .sidebar-link,
    .dashboard-shell.nav-drawer-mode #sidebar.mobile-sidebar .sidebar-link {
        display: grid !important;
        grid-template-columns: 4rem minmax(0, 1fr) !important;
        min-height: 6.25rem !important;
        align-items: center !important;
        justify-content: stretch !important;
        gap: 0.9rem !important;
        padding: 0.85rem 0.95rem !important;
        text-align: left !important;
        flex-direction: row !important;
    }

    .dashboard-shell.nav-drawer-mode #sidebar .sidebar-link > span:first-child,
    .dashboard-shell.nav-drawer-mode #sidebar.mobile-sidebar .sidebar-link > span:first-child {
        width: 4rem !important;
        height: 4rem !important;
    }

    .dashboard-shell.nav-drawer-mode #sidebar .sidebar-link > span:not(:first-child),
    .dashboard-shell.nav-drawer-mode #sidebar .sidebar-link .min-w-0,
    .dashboard-shell.nav-drawer-mode #sidebar .sidebar-link .flex-1,
    .dashboard-shell.nav-drawer-mode #sidebar .sidebar-link .leading-snug {
        width: auto !important;
        min-width: 0 !important;
        text-align: left !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;
        line-height: 1.35 !important;
    }

    .dashboard-shell.nav-drawer-mode #sidebar .sidebar-link .flex.min-w-0.flex-1.items-center.gap-2,
    .dashboard-shell.nav-drawer-mode #sidebar .sidebar-link .flex.min-w-0.flex-1.items-center.justify-between.gap-3 {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.5rem !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .dashboard-shell.nav-drawer-mode #sidebar .sidebar-link .flex.min-w-0.flex-1.items-center.gap-2 > span:first-child,
    .dashboard-shell.nav-drawer-mode #sidebar .sidebar-link .flex.min-w-0.flex-1.items-center.justify-between.gap-3 > span:first-child {
        width: auto !important;
        min-width: 0 !important;
        white-space: normal !important;
    }

    .dashboard-shell.nav-drawer-mode #sidebar .sidebar-link .ai-nav-badge,
    .dashboard-shell.nav-drawer-mode #sidebar .sidebar-approvals-badge {
        top: 0.6rem !important;
        right: 0.6rem !important;
        margin-left: 0 !important;
    }
}