/* DOLE corporate: white surfaces, navy controls and restrained red accents. */
@media screen {
    :root {
        --navy: #132e50;
        --blue: #214b7c;
        --teal: #214b7c;
        --ink: #22354d;
        --muted: #617187;
        --line: #dde5ee;
        --bg: #f5f7fa;
        --accent: #214b7c;
    }
    body {
        background: var(--bg);
        color: var(--ink);
    }
    a {
        color: var(--blue);
    }
    .sidebar {
        background: #fff;
        border-right: 1px solid var(--line);
        border-top: 4px solid var(--accent);
        color: var(--navy);
    }
    .brand {
        letter-spacing: 0.3px;
    }
    .brand small {
        color: #617187;
        opacity: 1;
    }
    .mark {
        background: var(--navy);
        border-radius: 10px;
        box-shadow: inset 0 -3px 0 var(--accent);
    }
    .sidebar .nav-label {
        color: #7b899b;
        letter-spacing: 1.7px;
    }
    .sidebar nav a {
        color: #44576f;
        border-left: 3px solid transparent;
        border-radius: 6px;
    }
    .sidebar nav a:hover,
    .sidebar nav a:focus-visible {
        background: #edf2f8;
        color: var(--navy);
        border-left-color: var(--accent);
    }
    .sidebar-signout {
        background: #fff;
        color: var(--navy);
        border-color: var(--line);
    }
    .sidebar-signout:hover {
        background: #fff3f4;
        color: #9c2330;
        border-color: #ecc8cd;
    }
    .topbar {
        background: #fff;
        color: var(--navy);
        border-bottom-color: var(--line);
    }
    .page-heading {
        position: relative;
    }
    .page-heading h1 {
        color: var(--navy);
        letter-spacing: -0.5px;
    }
    .eyebrow {
        color: #214b7c;
        letter-spacing: 1.8px;
    }
    .welcome {
        background: linear-gradient(110deg, #edf2f8, #fff);
        border: 1px solid #dbe4ee;
        border-left: 4px solid var(--accent);
        color: var(--navy);
        border-radius: 12px;
    }
    .welcome .eyebrow {
        color: #214b7c;
    }
    .welcome p {
        color: #556b85;
    }
    .welcome .button.light,
    .button,
    button.primary,
    .modal-action {
        background: var(--blue);
        color: #fff;
    }
    .button:hover,
    button.primary:hover,
    .modal-action:hover {
        background: #183c65;
        filter: none;
    }
    button.danger,
    .danger {
        background: var(--accent) !important;
        color: #fff;
    }
    .secondary,
    .button.secondary {
        background: #eef2f6;
        color: #354a63;
    }
    .secondary:hover,
    .button.secondary:hover {
        background: #e4eaf1;
        color: var(--navy);
    }
    .card {
        border-color: var(--line);
        border-radius: 12px;
        box-shadow: 0 3px 14px #132e5005;
    }
    .card h2,
    .dialog-heading h2 {
        color: var(--navy);
    }
    .stats strong {
        color: var(--navy);
    }
    th {
        background: #edf2f8;
        color: #52677f;
        font-size: 11px;
        letter-spacing: 0.7px;
    }
    tbody tr:hover {
        background: #fafbfd;
    }
    td {
        border-color: #e7edf3;
    }
    .badge,
    .role,
    .credit-value {
        background: #edf2f8;
        color: #214b7c;
    }
    .credit-row {
        border-bottom-color: #e7edf3;
    }
    .credit-value {
        border: 1px solid #dde7f3;
    }
    .notice {
        background: #f0f7f4;
        color: #275e49;
        border-color: #d0e5da;
    }
    input,
    select,
    textarea {
        border-color: #d1dce9;
    }
    input:focus,
    select:focus,
    textarea:focus {
        border-color: var(--blue);
        outline-color: #c7d6e9;
    }
    .upload-zone {
        background: #f8fafc;
        border-color: #a9bed7;
    }
    .leave-day-preview {
        background: #edf2f8;
        color: #214b7c;
    }
    .calendar-weekday {
        background: #edf2f8;
        color: #52677f;
    }
    .calendar-day.today {
        background: #fff7ed;
        box-shadow: inset 0 2px 0 var(--accent);
    }
    .calendar-navigation a,
    .pagination a {
        background: #fff;
        color: var(--blue);
        border-color: var(--line);
    }
    .event-leave {
        background: #eaf0f8;
        color: #214b7c;
    }
    .event-cto {
        background: #edf6f2;
        color: #29634e;
    }
    .event-holiday {
        background: #fff0f2;
        color: #9c2330;
    }
    .legend-leave::before {
        background: #214b7c;
    }
    .legend-cto::before {
        background: #29634e;
    }
    .legend-holiday::before {
        background: var(--accent);
    }
    .queue-tabs a {
        background: #fff;
        color: #52677f;
    }
    .queue-tabs .selected {
        background: #edf2f8;
        border-color: #cbd8e8;
        border-bottom: 3px solid var(--accent);
        color: var(--navy);
    }
    .queue-tabs span {
        background: var(--blue);
    }
    .queue-tabs a:hover {
        background: #edf2f8;
    }
    .account-dropdown summary {
        background: #edf2f8;
        color: var(--navy);
        border-color: #dbe5f1;
    }
    .account-panel {
        border-color: var(--line);
        box-shadow: 0 10px 32px #132e5018;
    }
    .account-panel a,
    .account-panel button {
        color: var(--navy);
    }
    .account-panel a:hover,
    .account-panel button:hover {
        background: #edf2f8;
    }
    .account-panel .account-signout button {
        color: #9c2330;
    }
    .dialog-heading {
        background: #f8fafc;
        border-top: 3px solid var(--accent);
        border-bottom-color: var(--line);
    }
    .dialog-close,
    .sidebar-close {
        background: #edf2f8;
        color: var(--navy);
    }
    .application-dialog {
        box-shadow: 0 24px 80px #132e5033;
    }
    .application-dialog::backdrop {
        background: #132e5070;
    }
    .mobile-menu {
        background: var(--navy);
        border-bottom: 3px solid var(--accent);
        box-shadow: 0 6px 20px #132e5030;
    }
    .menu-backdrop:not([hidden]) {
        background: #132e5060;
    }
    .auth-main {
        background:
            radial-gradient(ellipse at top left, #e9eff7, transparent 60%),
            radial-gradient(ellipse at bottom right, #edf2f8, transparent 55%), #f7f9fc;
    }
    .auth-card {
        border-top: 4px solid var(--accent);
        border-radius: 14px;
        box-shadow: 0 15px 45px #132e500d;
    }
    .auth-card h1 {
        color: var(--navy);
    }
    .sweet-alert .btn-primary,
    .sweet-alert .confirm {
        background: var(--blue);
        color: #fff;
    }
    .sweet-alert .btn-default,
    .sweet-alert .cancel {
        background: #eef2f6;
        color: var(--navy);
    }
    .sweet-alert h2 {
        color: var(--navy);
    }
    footer {
        color: #738197;
    }
    :focus-visible {
        outline: 2px solid #789bc5;
        outline-offset: 3px;
    }
}

@media screen {
    .application-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 18px;
    }
    .application-nav > a:first-child {
        font-size: 13px;
        color: var(--muted);
    }
    .application-summary {
        padding: 28px;
        border-top: 3px solid var(--accent);
    }
    .application-title {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 16px;
    }
    .application-title h2 {
        font-size: 27px;
        margin: 7px 0;
    }
    .application-title p {
        margin: 0;
    }
    .request-status {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 7px 12px;
        border-radius: 25px;
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
        background: #edf2f8;
        color: #214b7c;
    }
    .request-status:before {
        content: "";
        width: 7px;
        height: 7px;
        background: currentColor;
        border-radius: 50%;
    }
    .status-pending {
        background: #fff5e4;
        color: #865818;
    }
    .status-approved {
        background: #edf7f1;
        color: #29634e;
    }
    .status-closed {
        background: #fff0f2;
        color: #9c2330;
    }
    .application-facts {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
        margin-top: 25px;
        padding-top: 21px;
        border-top: 1px solid var(--line);
    }
    .application-facts > div {
        border-right: 1px solid var(--line);
        padding-right: 14px;
    }
    .application-facts > div:last-child {
        border: 0;
    }
    .application-facts span,
    .application-facts strong,
    .application-facts > div > small {
        display: block;
    }
    .application-facts span {
        font-size: 11px;
        color: var(--muted);
        margin-bottom: 6px;
    }
    .application-facts strong {
        font-size: 19px;
        color: var(--navy);
    }
    .application-facts small {
        font-size: 11px;
        font-weight: 400;
        color: var(--muted);
    }
    .application-detail-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        gap: 22px;
        align-items: start;
    }
    .application-information dl {
        grid-template-columns: 80px minmax(0, 1fr);
        font-size: 13px;
        gap: 13px;
    }
    .application-reason {
        padding: 16px;
        background: #f8fafc;
        border: 1px solid var(--line);
        border-radius: 9px;
        margin-top: 22px;
    }
    .application-reason p {
        margin: 9px 0 0;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }
    .approval-stepper {
        list-style: none;
        margin: 20px 0 0;
        padding: 0;
    }
    .approval-stepper li {
        position: relative;
        display: flex;
        gap: 13px;
        padding: 0 0 22px;
        min-width: 0;
    }
    .approval-stepper li:last-child {
        padding-bottom: 0;
    }
    .approval-stepper li:before {
        content: "";
        position: absolute;
        left: 15px;
        top: 34px;
        bottom: 3px;
        width: 2px;
        background: #e2e9f1;
    }
    .approval-stepper li:last-child:before {
        display: none;
    }
    .step-number {
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
        display: grid;
        place-items: center;
        border: 1px solid #dbe4ee;
        background: #f4f7fa;
        color: #687b92;
        border-radius: 50%;
        font-size: 12px;
        font-weight: 700;
    }
    .approval-stepper strong,
    .step-status,
    .approval-stepper small {
        display: block;
    }
    .approval-stepper strong {
        font-size: 13px;
        line-height: 1.5;
        color: var(--navy);
    }
    .step-status {
        font-size: 12px;
        color: var(--muted);
        margin: 2px 0;
    }
    .approval-stepper small {
        font-size: 11px;
        color: var(--muted);
    }
    .step-complete .step-number {
        background: #e8f5ed;
        color: #29634e;
        border-color: #cde5d6;
    }
    .step-complete .step-status {
        color: #29634e;
    }
    .step-current .step-number {
        background: #214b7c;
        color: white;
        border-color: #214b7c;
        box-shadow: 0 0 0 4px #edf2f8;
    }
    .step-current .step-status {
        color: #865818;
    }
    .step-stopped .step-number {
        background: #fff0f2;
        color: #9c2330;
        border-color: #ecc8cd;
    }
    .application-documents .file-row {
        align-items: center;
    }
    .application-documents .modal-action {
        margin-top: 16px;
    }
    .application-action {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: 20px 25px;
    }
    .application-action h2 {
        font-size: 16px;
        margin-bottom: 5px;
    }
    .application-action p {
        font-size: 12px;
        margin: 0;
    }
    .application-action .modal-action {
        flex-shrink: 0;
    }
    .activity-list {
        list-style: none;
        padding: 0;
        margin: 20px 0 0;
    }
    .activity-list li {
        position: relative;
        display: flex;
        gap: 14px;
        padding-bottom: 20px;
    }
    .activity-list li:last-child {
        padding-bottom: 0;
    }
    .activity-list li:before {
        content: "";
        position: absolute;
        top: 15px;
        left: 5px;
        bottom: 0;
        width: 1px;
        background: var(--line);
    }
    .activity-list li:last-child:before {
        display: none;
    }
    .activity-dot {
        flex: 0 0 11px;
        width: 11px;
        height: 11px;
        border: 3px solid #dde7f3;
        border-radius: 50%;
        background: var(--blue);
        margin-top: 5px;
    }
    .activity-list strong {
        font-size: 13px;
    }
    .activity-stage {
        margin-left: 8px;
        font-size: 10px;
        background: #edf2f8;
        color: var(--blue);
        border-radius: 4px;
        padding: 2px 5px;
    }
    .activity-meta {
        font-size: 11px;
        color: var(--muted);
        margin: 4px 0 0;
        overflow-wrap: anywhere;
    }
    .activity-remarks {
        font-size: 12px;
        margin: 8px 0 0;
        padding: 8px 11px;
        border-left: 2px solid var(--line);
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }
    @media (max-width: 900px) {
        .application-detail-grid {
            grid-template-columns: 1fr;
            gap: 0;
        }
    }
    @media (max-width: 720px) {
        .application-summary {
            padding: 20px;
        }
        .application-title {
            flex-wrap: wrap;
        }
        .application-title h2 {
            font-size: 24px;
        }
        .application-facts {
            grid-template-columns: 1fr;
            gap: 14px;
            margin-top: 18px;
            padding-top: 16px;
        }
        .application-facts > div {
            border: 0;
            border-bottom: 1px solid var(--line);
            padding: 0 0 12px;
        }
        .application-facts > div:last-child {
            padding-bottom: 0;
        }
        .application-facts strong {
            font-size: 18px;
        }
        .application-action {
            align-items: stretch;
            flex-direction: column;
            padding: 18px;
            gap: 14px;
        }
        .application-action .modal-action {
            width: 100%;
        }
        .application-nav {
            font-size: 12px;
        }
        .application-nav .button {
            padding: 9px 12px;
            font-size: 12px;
        }
        .request-status {
            font-size: 11px;
        }
        .application-documents .file-row {
            align-items: flex-start;
        }
        .activity-stage {
            display: inline-block;
        }
        .application-information dl {
            grid-template-columns: 1fr;
            gap: 3px;
        }
        .application-information dd {
            margin-bottom: 10px;
        }
    }
}

@media screen {
    .sidebar {
        background: var(--navy);
        color: #fff;
        border-top: 0;
        border-right: 0;
    }
    .sidebar .brand small {
        color: #bbcee3;
    }
    .sidebar .mark {
        background: #fff;
        color: var(--navy);
        box-shadow: none;
    }
    .sidebar .nav-label {
        color: #a9bed7;
    }
    .sidebar nav a {
        display: flex;
        align-items: center;
        gap: 11px;
        color: #e0e9f4;
    }
    .sidebar nav a:hover,
    .sidebar nav a:focus-visible {
        background: #ffffff14;
        color: #fff;
        border-left-color: #fff;
    }
    .sidebar-signout {
        display: flex;
        align-items: center;
        gap: 10px;
        background: #ffffff08;
        color: #fff;
        border-color: #ffffff25;
    }
    .sidebar-signout:hover {
        background: #ffffff16;
        color: #fff;
        border-color: #ffffff40;
    }
    .ui-icon {
        display: inline-block;
        flex-shrink: 0;
        vertical-align: middle;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .account-panel a,
    .account-panel button {
        display: flex;
        align-items: center;
        gap: 9px;
    }
    .application-nav > a,
    .application-documents .file-row > a,
    .record-open {
        display: inline-flex;
        align-items: center;
        gap: 7px;
    }
    .comp-record-table {
        table-layout: fixed;
    }
    .comp-record-table th:first-child {
        width: 23%;
    }
    .comp-record-table th:nth-child(2) {
        width: 45%;
    }
    .comp-record-table th:nth-child(3) {
        width: 18%;
    }
    .comp-record-table th:last-child {
        width: 14%;
    }
    .comp-record-table td {
        white-space: normal;
        overflow-wrap: anywhere;
        vertical-align: top;
    }
    .comp-note-cell {
        min-width: 230px;
    }
    .coc-note {
        font-size: 13px;
        line-height: 1.6;
    }
    .note-expander summary {
        list-style: none;
        cursor: pointer;
    }
    .note-expander summary::-webkit-details-marker {
        display: none;
    }
    .note-preview {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .note-more,
    .note-less {
        font-size: 11px;
        font-weight: 600;
        color: var(--blue);
        margin-top: 4px;
    }
    .note-more {
        display: inline-block;
    }
    .note-less {
        display: none;
    }
    .note-expander[open] .note-more,
    .note-expander[open] .note-preview {
        display: none;
    }
    .note-expander[open] .note-less {
        display: inline-block;
    }
    .note-full {
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        margin: 0;
    }
    .note-expander[open] .note-full {
        margin-top: 8px;
    }
    .balance-label {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        margin-top: 8px;
        border: 1px solid var(--line);
        background: #f5f8fc;
        padding: 3px 8px;
        border-radius: 6px;
        font-size: 11px;
        color: #52677f;
    }
    .record-open {
        font-size: 12px;
        font-weight: 600;
    }
}

@media screen {
    .credit-summary .section-heading {
        align-items: center;
    }
    .credit-summary .section-heading h2 {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 18px;
        margin: 0;
    }
    .credit-card-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 11px;
        margin-top: 20px;
    }
    .credit-tile {
        position: relative;
        min-width: 0;
        padding: 15px;
        background: #f8fafc;
        border: 1px solid #e0e7f0;
        border-radius: 10px;
    }
    .credit-tile-icon {
        display: inline-flex;
        padding: 6px;
        border: 1px solid #dbe5f1;
        border-radius: 8px;
        background: #edf2f8;
        color: var(--blue);
    }
    .credit-tile h3 {
        font-size: 12px;
        font-weight: 600;
        line-height: 1.4;
        color: #405670;
        margin: 10px 0 8px;
        min-height: 34px;
        overflow-wrap: anywhere;
    }
    .credit-tile strong {
        display: block;
        font-size: 24px;
        line-height: 1.3;
        color: var(--navy);
        font-variant-numeric: tabular-nums;
        overflow-wrap: anywhere;
    }
    .credit-tile small {
        display: block;
        font-size: 10px;
        color: var(--muted);
        margin-top: 4px;
    }
    .credit-help {
        margin: 16px 0 0;
        line-height: 1.7;
    }
    @media (max-width: 390px) {
        .credit-tile {
            padding: 12px;
        }
        .credit-tile strong {
            font-size: 22px;
        }
        .credit-tile h3 {
            font-size: 11px;
        }
        .credit-card-grid {
            gap: 9px;
        }
    }
}

@media screen {
    .topbar-account-controls {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .approval-shortcut {
        position: relative;
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        border: 1px solid #dbe5f1;
        border-radius: 50%;
        background: #edf2f8;
        color: var(--navy);
    }
    .approval-shortcut:hover {
        background: #e3ecf7;
        text-decoration: none;
    }
    .approval-count {
        position: absolute;
        top: -5px;
        right: -5px;
        min-width: 19px;
        height: 19px;
        display: grid;
        place-items: center;
        padding: 0 4px;
        background: var(--navy);
        border: 2px solid white;
        border-radius: 12px;
        color: white;
        font-size: 9px;
        font-weight: 700;
    }
    @media (max-width: 720px) {
        .topbar .topbar-account-controls {
            gap: 10px;
            flex-shrink: 0;
        }
        .topbar > span {
            max-width: calc(100% - 100px);
        }
        .approval-shortcut {
            width: 38px;
            height: 38px;
        }
        .topbar-account-controls .account-dropdown {
            margin-left: 0;
        }
    }
}
@media screen {
    .credit-card-grid {
        gap: 8px;
        margin-top: 14px;
    }
    .credit-tile {
        padding: 11px 12px;
        border-radius: 8px;
    }
    .credit-tile-icon {
        padding: 4px;
        border-radius: 6px;
    }
    .credit-tile-icon svg {
        width: 16px;
        height: 16px;
    }
    .credit-tile h3 {
        margin: 6px 0 4px;
        min-height: 0;
        font-size: 11px;
        line-height: 1.35;
    }
    .credit-tile strong {
        font-size: 20px;
        line-height: 1.25;
    }
    .credit-tile small {
        font-size: 9px;
        margin-top: 2px;
    }
    .credit-help {
        font-size: 10px;
        margin-top: 12px;
    }
    .approval-dropdown {
        position: relative;
    }
    .approval-dropdown > summary {
        cursor: pointer;
        list-style: none;
    }
    .approval-dropdown > summary::-webkit-details-marker {
        display: none;
    }
    .pending-panel {
        position: absolute;
        right: 0;
        top: calc(100% + 10px);
        z-index: 26;
        width: 360px;
        max-width: calc(100vw - 32px);
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 12px;
        box-shadow: 0 10px 35px #132e501f;
        color: var(--ink);
    }
    .pending-heading {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px;
        border-bottom: 1px solid var(--line);
        gap: 12px;
    }
    .pending-heading strong {
        color: var(--navy);
        font-size: 14px;
    }
    .pending-list {
        max-height: min(440px, calc(100dvh - 180px));
        overflow: auto;
    }
    .pending-group {
        padding: 12px 14px;
        border-bottom: 1px solid var(--line);
    }
    .pending-group-heading {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        margin-bottom: 8px;
        font-size: 11px;
        color: var(--muted);
    }
    .pending-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 5px;
        border-radius: 6px;
        color: var(--navy);
    }
    .pending-item:hover {
        background: #edf2f8;
        text-decoration: none;
    }
    .pending-item > span {
        flex: 1;
        min-width: 0;
    }
    .pending-item strong,
    .pending-item small {
        display: block;
        overflow-wrap: anywhere;
    }
    .pending-item strong {
        font-size: 12px;
    }
    .pending-item small {
        font-size: 10px;
        color: var(--muted);
        margin-top: 3px;
    }
    .pending-all {
        display: block;
        font-size: 11px;
        padding: 7px 5px;
    }
    .pending-empty {
        font-size: 11px;
        color: var(--muted);
        margin: 8px 5px;
    }
    .pending-footer {
        display: block;
        padding: 12px 16px;
        font-size: 12px;
        text-align: center;
        background: #f8fafc;
        border-radius: 0 0 12px 12px;
    }
    .table-print,
    .advanced-record-table td > a {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        white-space: nowrap;
    }
    @media (max-width: 720px) {
        .pending-panel {
            position: fixed;
            top: 70px;
            right: 16px;
            width: calc(100vw - 32px);
        }
        .credit-tile {
            padding: 9px 10px;
        }
        .credit-tile strong {
            font-size: 19px;
        }
    }
}

@media screen {
    .top-page-action {
        padding: 16px 20px;
        margin-bottom: 18px;
        display: flex;
        justify-content: flex-end;
    }
    .top-page-action .modal-action {
        font-size: 12px;
    }
    .top-page-action h2 {
        display: none;
    }
    @media (max-width: 720px) {
        .top-page-action {
            padding: 14px;
        }
        .top-page-action .modal-action {
            width: 100%;
        }
    }
}

@media screen {
    .account-record-table {
        min-width: 950px !important;
    }
    .account-record-table td {
        vertical-align: middle;
    }
    .account-record-table .modal-action {
        font-size: 11px;
        padding: 8px 12px;
    }
    .account-record-table td:nth-child(3) {
        white-space: normal;
        min-width: 190px;
    }
    .account-record-table td:first-child {
        min-width: 160px;
    }
}

/* Compact credit tiles, with gentle colors distinguishing leave categories. */
@media screen {
    .credit-summary {
        container-type: inline-size;
    }
    .credit-card-grid {
        gap: 7px;
        margin-top: 12px;
    }
    .credit-tile {
        --tile-bg: #eff5ff;
        --tile-ink: #28569a;
        --tile-border: #d8e5fb;
        padding: 9px 10px;
        background: var(--tile-bg);
        border-color: var(--tile-border);
        border-left: 3px solid var(--tile-ink);
        border-radius: 7px;
    }
    .credit-tile-icon {
        position: absolute;
        top: 8px;
        right: 8px;
        padding: 3px;
        background: #ffffffa0;
        color: var(--tile-ink);
        border: 0;
        border-radius: 5px;
    }
    .credit-tile-icon svg {
        width: 14px;
        height: 14px;
    }
    .credit-tile h3 {
        padding-right: 20px;
        margin: 0 0 4px;
        min-height: 26px;
        font-size: 10px;
        line-height: 1.3;
        color: #35465c;
    }
    .credit-tile strong {
        font-size: 18px;
        line-height: 1.2;
        color: var(--tile-ink);
    }
    .credit-tile small {
        font-size: 9px;
        margin-top: 2px;
        color: #53657a;
    }
    .credit-tile[data-credit="mandatory"],
    .credit-tile[data-credit="study"] {
        --tile-bg: #fff8e9;
        --tile-ink: #906313;
        --tile-border: #efdfb7;
    }
    .credit-tile[data-credit="sick"],
    .credit-tile[data-credit="rehab"] {
        --tile-bg: #edf8f2;
        --tile-ink: #296749;
        --tile-border: #cde9d9;
    }
    .credit-tile[data-credit="maternity"],
    .credit-tile[data-credit="women"] {
        --tile-bg: #fff0f5;
        --tile-ink: #9a446a;
        --tile-border: #efd1df;
    }
    .credit-tile[data-credit="paternity"],
    .credit-tile[data-credit="adoption"] {
        --tile-bg: #f2f0fc;
        --tile-ink: #65529c;
        --tile-border: #dfd8f2;
    }
    .credit-tile[data-credit="specialprivilege"],
    .credit-tile[data-credit="wellness"] {
        --tile-bg: #ecf8f8;
        --tile-ink: #287174;
        --tile-border: #cce7e7;
    }
    .credit-tile[data-credit="soloparent"],
    .credit-tile[data-credit="calamity"] {
        --tile-bg: #fff4ea;
        --tile-ink: #94602c;
        --tile-border: #edd9c3;
    }
    @container (min-width:360px) {
        .credit-card-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }
    @media (max-width: 720px) {
        .credit-card-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .credit-tile {
            padding: 8px 9px;
        }
        .credit-help {
            font-size: 9px;
            margin-top: 10px;
        }
    }
}

/* Notifications occupy their own browser top layer, independently of entry forms. */
.notification-layer {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 16px;
    border: 0;
    background: transparent;
    overflow: hidden;
}
.notification-layer[open] {
    display: grid;
    place-items: center;
}
.notification-layer::backdrop {
    background: #132e507a;
    backdrop-filter: blur(2px);
}
.notification-layer > .sweet-overlay {
    display: none !important;
}
.notification-layer > .sweet-alert {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: none !important;
    width: min(430px, calc(100vw - 32px)) !important;
    max-width: 100% !important;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    padding: 22px !important;
    overflow: auto;
    border-radius: 14px;
    border: 1px solid #dbe5f1;
    box-shadow: 0 20px 70px #132e5035;
}
.notification-layer .sweet-alert h2 {
    margin: 14px 0 10px;
    font-size: 22px;
    line-height: 1.3;
}
.notification-layer .sweet-alert p {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.6;
}
.notification-layer .sa-button-container {
    margin-top: 18px;
}
.notification-layer .sa-icon {
    box-sizing: content-box;
    margin: 8px auto 14px;
    flex-shrink: 0;
}
@media (max-width: 390px) {
    .notification-layer > .sweet-alert {
        padding: 20px !important;
    }
    .notification-layer .sweet-alert h2 {
        font-size: 21px;
    }
    .notification-layer .sweet-alert p {
        font-size: 13px;
    }
}

/* Records are prominent; personal balances and a compact calendar share the right panel. */
@media screen {
    .dashboard-workspace {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 380px;
        gap: 20px;
        align-items: start;
    }
    .dashboard-records {
        min-width: 0;
        margin: 0;
    }
    .dashboard-side-panel {
        display: grid;
        gap: 18px;
        min-width: 0;
    }
    .dashboard-side-panel > .card {
        margin: 0;
        padding: 18px;
    }
    .dashboard-records > .section-heading {
        justify-content: center;
        text-align: center;
        flex-wrap: wrap;
        gap: 10px;
    }
    .dashboard-records > .section-heading > div {
        flex-basis: 100%;
    }
    .dashboard-records > .section-heading h2 {
        margin-bottom: 7px;
    }
    .dashboard-records > .section-heading p {
        font-size: 12px;
        margin: 0;
    }
    .dashboard-records > .section-heading > button {
        padding: 9px 16px;
        font-size: 12px;
    }
    .dashboard-records .queue-tabs {
        justify-content: center;
        margin-top: 18px;
    }
    .dashboard-records .filter-main {
        gap: 9px;
    }
    .dashboard-records .filter-main label {
        flex-basis: 110px;
    }
    .dashboard-records .filter-main label:first-child {
        flex-basis: 100%;
    }
    .dashboard-records .record-filters {
        padding: 14px 0;
    }
    .dashboard-side-panel .credit-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }
    .dashboard-side-panel .credit-tile {
        padding: 8px;
    }
    .dashboard-side-panel .credit-tile strong {
        font-size: 17px;
    }
    .dashboard-side-panel .credit-tile h3 {
        font-size: 9px;
        min-height: 25px;
    }
    .dashboard-side-panel .credit-tile small {
        font-size: 8px;
    }
    .dashboard-side-panel .credit-summary h2 {
        font-size: 16px;
    }
    .dashboard-side-panel .employee-calendar .section-heading {
        gap: 8px;
        align-items: center;
    }
    .dashboard-side-panel .employee-calendar h2 {
        font-size: 14px;
        margin: 0;
    }
    .dashboard-side-panel .calendar-navigation {
        gap: 4px;
    }
    .dashboard-side-panel .calendar-navigation a {
        font-size: 10px;
        padding: 3px 6px;
    }
    .dashboard-side-panel .calendar-title {
        font-size: 17px;
        margin: 12px 0 8px;
    }
    .dashboard-side-panel .calendar-legend {
        font-size: 8px;
        gap: 7px;
        margin: 8px 0;
    }
    .dashboard-side-panel .calendar-weekday {
        font-size: 9px;
        padding: 5px 1px;
    }
    .dashboard-side-panel .calendar-day {
        min-height: 36px;
        padding: 3px;
    }
    .dashboard-side-panel .calendar-day time {
        font-size: 9px;
        margin-bottom: 2px;
    }
    .dashboard-side-panel .calendar-event {
        font-size: 8px;
        padding: 2px;
        line-height: 1.2;
    }
    .welcome {
        padding: 22px 26px;
        margin-bottom: 20px;
    }
    .welcome h2 {
        font-size: 25px;
    }
    @media (max-width: 1100px) {
        .dashboard-workspace {
            grid-template-columns: 1fr;
        }
        .dashboard-side-panel {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            align-items: start;
        }
        .dashboard-side-panel .credit-card-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
    @media (max-width: 720px) {
        .dashboard-workspace {
            gap: 16px;
        }
        .dashboard-side-panel {
            grid-template-columns: 1fr;
            gap: 16px;
        }
        .dashboard-side-panel > .card {
            padding: 16px;
        }
        .dashboard-side-panel .credit-card-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .dashboard-side-panel .credit-tile h3 {
            font-size: 10px;
        }
        .dashboard-side-panel .credit-tile strong {
            font-size: 18px;
        }
        .dashboard-records .queue-tabs {
            gap: 6px;
        }
        .dashboard-records .queue-tabs a {
            padding: 7px 9px;
            font-size: 11px;
        }
        .welcome {
            padding: 20px;
        }
        .dashboard-records .filter-main label {
            flex-basis: calc(50% - 9px);
        }
    }
}

@media screen {
    .journal-dialog {
        width: min(1180px, calc(100vw - 32px));
        max-width: calc(100vw - 32px);
    }
    .journal-index-table {
        min-width: 740px !important;
    }
    .journal-index-table td:nth-child(2) {
        white-space: normal;
        min-width: 180px;
    }
    .journal-open {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        padding: 8px 12px;
    }
    .journal-opening-balances {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        padding: 18px 0 4px;
    }
    .journal-opening-balances > span {
        padding: 9px 13px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #edf2f8;
        font-size: 12px;
        color: var(--navy);
    }
    .journal-opening-balances strong {
        margin-left: 10px;
    }
    .journal-month-table {
        min-width: 1150px;
    }
    .journal-month-table td {
        padding: 12px 10px;
    }
    .journal-month-table .modal-action {
        font-size: 11px;
        padding: 7px 10px;
    }
    .journal-month-table td:nth-last-child(2),
    .journal-month-table td:nth-last-child(3) {
        white-space: normal;
        min-width: 140px;
        overflow-wrap: anywhere;
    }
}

@media screen {
    .history-fold > summary {
        cursor: pointer;
        font-size: 14px;
        font-weight: 600;
        color: var(--navy);
    }
    .history-fold > summary .fine {
        margin-left: 12px;
        font-weight: 400;
    }
    .history-fold[open] > summary {
        padding-bottom: 12px;
        border-bottom: 1px solid var(--line);
    }
    .tracker-remarks {
        margin: 6px 0 0;
        padding: 7px 10px;
        font-size: 11px;
        border-radius: 6px;
        background: #f5f8fc;
        border: 1px solid var(--line);
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }
    .approval-stepper > li > div {
        min-width: 0;
    }
}

@media screen {
    .comp-create-action {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 16px;
    }
    .coc-selection {
        grid-column: 1/-1;
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 12px 16px;
        margin: 10px 0;
    }
    .coc-selection legend {
        font-size: 13px;
        font-weight: 600;
        color: var(--navy);
        padding: 0 5px;
    }
    .coc-option {
        padding: 9px 10px;
        border: 1px solid var(--line);
        border-radius: 7px;
        margin: 7px 0;
        background: #f8fafc;
    }
    .coc-option small {
        display: block;
        font-size: 11px;
        font-weight: 400;
        color: var(--muted);
    }
    .cto-total {
        padding: 10px 12px;
        border-radius: 7px;
        font-size: 12px;
        background: #fff6e6;
        color: #865818;
        margin-top: 12px;
    }
    .cto-total.hours-ready {
        background: #edf7f1;
        color: #29634e;
    }
    .allocation-source {
        font-size: 12px;
        padding: 5px 0;
    }
    @media (max-width: 720px) {
        .comp-create-action .modal-action {
            width: 100%;
        }
        .coc-selection {
            padding: 10px;
        }
        .coc-option {
            font-size: 13px;
        }
    }
}

/* Blue, red and white corporate theme. Dedicated print styles stay unchanged. */
@media screen {
    :root {
        --navy: #12336b;
        --blue: #175cd3;
        --teal: #175cd3;
        --accent: #d52b3e;
        --bg: #f4f7fc;
        --line: #dce5f2;
        --ink: #233754;
    }
    .sidebar {
        background: linear-gradient(180deg, #12336b, #17458f);
        border-top: 4px solid var(--accent);
    }
    .sidebar nav a:hover,
    .sidebar nav a:focus-visible {
        background: #ffffff18;
        border-left-color: #ff6778;
    }
    .sidebar .mark {
        color: var(--blue);
        border-bottom: 3px solid var(--accent);
    }
    .topbar {
        border-top: 3px solid var(--accent);
    }
    .welcome {
        background: linear-gradient(110deg, #eaf2ff, #fff);
        border-left-color: var(--blue);
        border-top: 3px solid var(--accent);
    }
    .welcome .button.light,
    .button,
    button.primary,
    .modal-action,
    .floating-menu {
        background: var(--blue);
        color: white;
    }
    .button:hover,
    button.primary:hover,
    .modal-action:hover {
        background: #124baa;
    }
    .sidebar-signout:hover {
        background: #d52b3e;
        color: white;
    }
    .approval-count,
    .pending-count {
        background: var(--accent);
        color: white;
    }
    .queue-tabs a.active {
        background: var(--blue);
        color: white;
        border-color: var(--blue);
    }
    .auth-card,
    .application-summary {
        border-top-color: var(--accent);
    }
    .notification-layer > .sweet-alert {
        background: #fff;
        border-top: 4px solid var(--blue);
        padding: 24px !important;
        isolation: isolate;
    }
    /* Legacy success pseudo-elements extend past the icon and can mask the title. */
    .notification-layer .sweet-alert .sa-icon {
        overflow: hidden;
        isolation: isolate;
        margin: 4px auto 20px;
        flex-shrink: 0;
    }
    .notification-layer .sweet-alert h2 {
        position: relative;
        z-index: 2;
        clear: both;
        margin: 0 0 12px;
        padding: 0;
        color: var(--navy);
        line-height: 1.4;
        overflow-wrap: anywhere;
    }
    .notification-layer .sweet-alert p {
        position: relative;
        z-index: 2;
        margin: 0 0 18px;
        color: var(--ink);
        overflow-wrap: anywhere;
    }
    .notification-layer .sa-button-container {
        position: relative;
        z-index: 2;
        margin-top: 16px;
        display: flex;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
    }
    .notification-layer .sweet-alert button {
        font: inherit;
        font-weight: 600;
        line-height: 1.4;
        border: 0;
        border-radius: 8px;
        padding: 11px 24px;
        margin: 0;
        min-width: 84px;
    }
    .notification-layer .sweet-alert button.confirm {
        background: var(--blue);
        color: white;
    }
    .notification-layer .sweet-alert button.cancel {
        background: #edf2fa;
        color: var(--navy);
    }
    @media (max-width: 390px) {
        .notification-layer > .sweet-alert {
            padding: 20px !important;
        }
        .notification-layer .sweet-alert h2 {
            font-size: 20px;
        }
    }
}

@media screen {
    .auth-main {
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: none;
        padding: 40px 24px;
        background: radial-gradient(ellipse at top right, #e4edff, transparent 65%), #f4f7fc;
    }
    .login-layout {
        width: min(1100px, 100%);
        display: grid;
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
        align-items: center;
        gap: 50px;
    }
    .login-updates {
        padding: 36px;
        border-radius: 20px;
        background: linear-gradient(135deg, #12336b, #1752ae);
        border-top: 5px solid #d52b3e;
        color: #fff;
        box-shadow: 0 16px 48px #12336b16;
    }
    .login-updates .brand {
        margin-bottom: 32px;
    }
    .login-updates .mark {
        background: #fff;
        color: #175cd3;
        border-bottom: 3px solid #d52b3e;
    }
    .login-updates .brand small {
        opacity: 1;
        color: #d2e1ff;
    }
    .login-updates .eyebrow {
        color: #cadcff;
        line-height: 1.6;
    }
    .login-updates h2 {
        font-size: 30px;
        line-height: 1.25;
        margin: 12px 0;
        color: #fff;
    }
    .login-intro {
        color: #dce8ff;
        font-size: 14px;
        margin: 0 0 25px;
    }
    .login-feature-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: grid;
        gap: 20px;
    }
    .login-feature-list li {
        display: flex;
        align-items: flex-start;
        gap: 14px;
    }
    .feature-number {
        display: grid;
        place-items: center;
        flex: 0 0 34px;
        height: 34px;
        background: #ffffff16;
        border: 1px solid #ffffff35;
        border-radius: 9px;
        font-size: 11px;
        font-weight: 700;
        color: #fff;
    }
    .login-feature-list h3 {
        font-size: 14px;
        color: #fff;
        margin: 0 0 4px;
        line-height: 1.4;
    }
    .login-feature-list p {
        font-size: 12px;
        line-height: 1.6;
        color: #dce8ff;
        margin: 0;
    }
    .login-update-note {
        border-top: 1px solid #ffffff30;
        margin-top: 26px;
        padding-top: 18px;
        font-size: 11px;
        color: #dce8ff;
    }
    .login-layout .auth-card {
        width: 100%;
        min-width: 0;
        padding: 36px;
        border-top: 4px solid #d52b3e;
    }
    .login-layout .auth-card h1 {
        margin-bottom: 14px;
    }
    .login-layout .auth-card .fine {
        margin-top: 22px;
        margin-bottom: 0;
    }
    @media (max-width: 820px) {
        .login-layout {
            grid-template-columns: 1fr;
            gap: 24px;
            max-width: 560px;
        }
        .login-layout .auth-card {
            order: -1;
        }
        .login-updates {
            padding: 28px;
        }
        .auth-main {
            padding: 24px 16px;
        }
        .login-updates h2 {
            font-size: 26px;
        }
    }
    @media (max-width: 390px) {
        .login-layout .auth-card {
            padding: 24px;
        }
        .login-updates {
            padding: 22px;
        }
        .login-feature-list {
            gap: 17px;
        }
        .login-updates h2 {
            font-size: 24px;
        }
        .login-updates .brand {
            margin-bottom: 24px;
        }
    }
}
@media screen {
    .registration-card {
        width: min(760px, 100%);
        background: white;
        border: 1px solid var(--line);
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 15px 45px #12336b12;
    }
    .registration-heading {
        background: var(--navy);
        color: white;
        text-align: center;
        padding: 22px;
        border-top: 4px solid var(--accent);
    }
    .registration-heading h1 {
        color: white;
        font-size: 24px;
        margin: 5px 0;
    }
    .registration-heading p {
        font-size: 12px;
        color: #d3e3ff;
        margin: 0;
    }
    .registration-form {
        padding: 24px 30px;
    }
    .registration-form label {
        margin: 10px 0;
    }
    .registration-input {
        display: flex;
        align-items: stretch;
        margin-top: 7px;
        border: 1px solid #d5dfeb;
        border-radius: 7px;
        overflow: hidden;
        background: white;
        min-width: 0;
    }
    .registration-input > span {
        display: grid;
        place-items: center;
        padding: 0 10px;
        background: #edf3ff;
        color: var(--navy);
        flex-shrink: 0;
    }
    .registration-input input,
    .registration-input select {
        margin: 0;
        border: 0;
        border-radius: 0;
        min-width: 0;
        width: 100%;
        padding: 10px;
    }
    .registration-input:focus-within {
        outline: 2px solid #bdd4fa;
    }
    .registration-input input:focus,
    .registration-input select:focus {
        outline: none;
    }
    .password-toggle {
        background: #edf3ff;
        border: 0;
        color: var(--blue);
        font-size: 11px;
        cursor: pointer;
        padding: 0 10px;
    }
    .signature-pad {
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 12px;
        margin-top: 16px;
    }
    .signature-pad legend {
        font-weight: 600;
        font-size: 12px;
        color: var(--navy);
    }
    .signature-pad canvas {
        display: block;
        width: 100%;
        height: 140px;
        background: #f9fbff;
        border: 1px solid #cfdaea;
        border-radius: 6px;
        touch-action: none;
    }
    .signature-tools {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 14px;
        margin-top: 10px;
    }
    .signature-tools label {
        flex: 1;
        font-size: 11px;
        min-width: 180px;
    }
    .signature-tools input {
        padding: 6px;
        font-size: 11px;
    }
    .registration-login {
        text-align: center;
        font-size: 12px;
        margin: 20px 0 0;
    }
    @media (max-width: 600px) {
        .registration-form {
            padding: 20px;
        }
        .registration-form .form-grid {
            grid-template-columns: 1fr;
        }
        .registration-input input,
        .registration-input select {
            font-size: 16px;
        }
        .registration-heading h1 {
            font-size: 22px;
        }
    }
}
@media screen {
    .account-overview {
        display: flex;
        align-items: center;
        gap: 22px;
        border-top: 3px solid var(--accent);
    }
    .account-avatar {
        flex: 0 0 70px;
        width: 70px;
        height: 70px;
        display: grid;
        place-items: center;
        background: #eaf2ff;
        color: var(--blue);
        border-radius: 18px;
    }
    .account-overview h2 {
        font-size: 23px;
        margin: 5px 0;
    }
    .account-overview p {
        margin: 0 0 10px;
        font-size: 12px;
        color: var(--muted);
    }
    .account-settings-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        gap: 22px;
        align-items: start;
    }
    .account-security-panels {
        min-width: 0;
    }
    .account-settings-grid h2 {
        display: flex;
        align-items: center;
        gap: 9px;
        font-size: 17px;
    }
    .account-settings-grid p {
        font-size: 12px;
    }
    .account-facts {
        grid-template-columns: 115px minmax(0, 1fr);
        gap: 12px;
        font-size: 13px;
        margin: 22px 0;
    }
    .account-facts dd {
        font-weight: 500;
        overflow-wrap: anywhere;
    }
    .account-signature-preview {
        background: #fbfcff;
        border: 1px dashed var(--line);
        border-radius: 9px;
        padding: 12px;
        margin: 16px 0;
    }
    .account-signature-preview img {
        display: block;
        max-width: 100%;
        max-height: 100px;
        margin: auto;
        object-fit: contain;
    }
    @media (max-width: 900px) {
        .account-settings-grid {
            grid-template-columns: 1fr;
            gap: 0;
        }
    }
    @media (max-width: 390px) {
        .account-overview {
            align-items: flex-start;
            gap: 12px;
        }
        .account-avatar {
            flex-basis: 44px;
            width: 44px;
            height: 44px;
            border-radius: 10px;
        }
        .account-overview h2 {
            font-size: 19px;
        }
        .account-facts {
            grid-template-columns: 1fr;
            gap: 3px;
        }
        .account-facts dd {
            margin-bottom: 10px;
        }
    }
}
@media screen {
    .signature-mode-options {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
        margin: 4px 0 16px;
        padding: 10px;
        background: #edf3ff;
        border-radius: 8px;
    }
    .signature-mode-options label {
        margin: 0;
        font-size: 12px;
    }
    .signature-mode-options input {
        accent-color: var(--blue);
    }
    [data-signature-pad] [hidden] {
        display: none !important;
    }
    [data-signature-pad] canvas {
        cursor: crosshair;
        touch-action: none;
        user-select: none;
        pointer-events: auto;
        position: relative;
        z-index: 1;
    }
    [data-signature-draw] > .secondary {
        margin-top: 10px;
    }
    [data-signature-preview] {
        max-width: 100%;
        max-height: 140px;
        display: block;
        object-fit: contain;
        margin: 12px auto;
        padding: 8px;
        background: white;
        border: 1px solid var(--line);
        border-radius: 6px;
    }
}
@media screen {
    .agency-logo {
        display: block;
        width: 48px;
        height: 48px;
        object-fit: contain;
        flex-shrink: 0;
        background: white;
        border-radius: 8px;
        padding: 3px;
    }
    .registration-heading > .agency-logo {
        margin: 0 auto 8px;
        width: 60px;
        height: 60px;
    }
}
@media screen {
    .work-date-picker {
        width: min(360px, calc(100vw - 24px));
        padding: 18px;
        border: 1px solid var(--line);
        border-radius: 14px;
        color: var(--ink);
        box-shadow: 0 15px 55px #10294730;
    }
    .work-date-picker::backdrop {
        background: #10294770;
    }
    .work-date-picker header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        gap: 12px;
    }
    .work-date-picker header button {
        border: 0;
        border-radius: 6px;
        background: #edf3ff;
        color: var(--blue);
        padding: 6px 12px;
        font-size: 22px;
        cursor: pointer;
    }
    .work-date-weekdays,
    .work-date-grid {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 5px;
        text-align: center;
    }
    .work-date-weekdays {
        font-size: 10px;
        color: var(--muted);
        margin-bottom: 8px;
    }
    .work-date-grid button {
        min-height: 34px;
        border: 1px solid var(--line);
        border-radius: 6px;
        background: white;
        color: var(--navy);
        cursor: pointer;
    }
    .work-date-grid button:disabled {
        background: #f0f2f6;
        color: #a6adba;
        cursor: not-allowed;
        border-color: #eff0f4;
    }
    .work-date-grid button:not(:disabled):hover,
    .work-date-grid button.selected {
        background: var(--blue);
        color: white;
    }
    .work-date-grid .half-workday:not(:disabled) {
        border-bottom: 3px solid var(--accent);
    }
    .work-date-picker p {
        font-size: 10px;
        color: var(--muted);
        margin: 12px 0;
    }
    .account-queue-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin: 16px 0;
    }
    .account-queue-tabs .badge {
        margin-left: 6px;
    }
}
@media screen {
    .modal-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        border: 0;
        padding: 9px 14px;
        border-radius: 8px;
        font: inherit;
        font-size: 12px;
        font-weight: 600;
        background: var(--blue);
        color: white;
        cursor: pointer;
        white-space: nowrap;
    }
    .modal-action:hover {
        background: #124baa;
    }
    .modal-action:focus-visible {
        outline: 3px solid #aacbff;
        outline-offset: 2px;
    }
}
@media screen {
    .topbar-agency {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
    }
    .topbar-agency > img {
        width: 38px;
        height: 38px;
        object-fit: contain;
        flex-shrink: 0;
    }
    .topbar-agency > span {
        overflow-wrap: anywhere;
    }
    @media (max-width: 720px) {
        .topbar > .topbar-agency {
            max-width: calc(100% - 105px);
            font-size: 10px;
            line-height: 1.4;
            gap: 7px;
        }
        .topbar-agency > img {
            width: 30px;
            height: 30px;
        }
    }
}
/* Soft blue and sky-blue theme, with clear white surfaces. */
@media screen {
    :root {
        --navy: #234b78;
        --blue: #3978b8;
        --teal: #519ac6;
        --accent: #82c4e7;
        --bg: #f5f9fc;
        --ink: #29445f;
        --muted: #6c8297;
        --line: #dfebf4;
    }
    body {
        background: #f5f9fc;
    }
    .sidebar {
        background: linear-gradient(155deg, #294f7b, #3a83b6);
        border-top: 4px solid #98d5ef;
    }
    .sidebar nav a:hover,
    .sidebar nav a:focus-visible {
        border-left-color: #b5e7fb;
        background: #ffffff16;
    }
    .topbar {
        border-top: 3px solid #9cd5ed;
        background: #ffffff;
    }
    .welcome {
        background: linear-gradient(115deg, #e9f3ff, #eefaff);
        border-left-color: #78b9de;
        border-top: 0;
    }
    .button,
    button.primary,
    .modal-action,
    .welcome .button.light,
    .mobile-menu {
        background: linear-gradient(115deg, #3978b8, #5da6d0);
        color: white;
        box-shadow: 0 3px 10px #467fa612;
    }
    .button:hover,
    button.primary:hover,
    .modal-action:hover {
        background: linear-gradient(115deg, #326ca8, #5098c4);
    }
    .login-updates {
        background: linear-gradient(140deg, #315d8b, #57a2c8);
        border-top-color: #a5def2;
    }
    .login-layout .auth-card,
    .auth-card,
    .application-summary,
    .account-overview,
    .registration-heading {
        border-top-color: #a5d8ee;
    }
    .registration-heading {
        background: linear-gradient(120deg, #315d8b, #5ba5ca);
    }
    .sidebar .mark,
    .login-updates .mark {
        border-bottom-color: #94d7ef;
    }
    .sidebar-signout:hover {
        background: #ffffff20;
        color: white;
    }
    .approval-count,
    .pending-count {
        background: #487daa;
        color: white;
    }
    .credit-tile,
    .credit-tile[data-credit] {
        --tile-bg: #eff7fd;
        --tile-ink: #3c78a8;
        --tile-border: #d7e8f5;
    }
    .credit-tile:nth-child(3n + 2) {
        --tile-bg: #edf9fc;
        --tile-ink: #468ba5;
        --tile-border: #d4eaf0;
    }
    .credit-tile:nth-child(3n) {
        --tile-bg: #f2f6fc;
        --tile-ink: #587fa9;
        --tile-border: #dbe5f2;
    }
    .ui-icon {
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .account-avatar,
    .account-trigger,
    .registration-input > span {
        background: #edf6fc;
        color: #447ca8;
    }
    .notification-layer > .sweet-alert {
        border-top-color: #8dcce6;
    }
    .work-date-grid .half-workday:not(:disabled) {
        border-bottom-color: #70b8d6;
    }
    .page-heading h1 {
        color: #294d72;
    }
}
@media screen {
    .button,
    button.primary,
    .modal-action,
    .welcome .button.light,
    .mobile-menu {
        background: linear-gradient(115deg, #346797, #3c749b);
        color: #fff;
    }
    .button:hover,
    button.primary:hover,
    .modal-action:hover {
        background: linear-gradient(115deg, #2d5d8b, #33698f);
    }
    .sidebar {
        background: linear-gradient(155deg, #294f7b, #326e98);
    }
    .sidebar .brand small,
    .sidebar .nav-label {
        color: #e5f3ff;
    }
    .login-updates {
        background: linear-gradient(140deg, #315d8b, #3e7398);
    }
    .login-feature-list p,
    .login-intro,
    .login-update-note,
    .login-updates .eyebrow {
        color: #f4fbff;
    }
    .credit-tile,
    .credit-tile[data-credit] {
        --tile-ink: #315f86;
    }
    .credit-tile:nth-child(3n + 2) {
        --tile-ink: #326980;
    }
    .credit-tile:nth-child(3n) {
        --tile-ink: #42658d;
    }
}
@media screen {
    button.danger,
    .danger {
        background: #42688b !important;
        color: #fff;
    }
    .status-closed {
        background: #edf4fa;
        color: #456883;
    }
}