/*
TimeCapsule Care
Workforce Management Suite
TimeCapsule Software Solutions

FOUNDER'S NOTE:
TimeCapsule should feel like a professional working environment rather
than a collection of disconnected web forms.

The interface preserves a familiar framed application layout:
identity across the top, persistent navigation on the left, and the
active working area in the center.

Complexity belongs behind the curtain.
Simplicity belongs in front of the user.

PROFESSIONAL NOTE:
This stylesheet establishes the shared administrative application shell.

Module-specific presentation should remain in appropriately separated
stylesheets once individual modules become visually complex.
*/


/* -------------------------------------------------------------------------
   Foundation
   ------------------------------------------------------------------------- */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    background: #10151c;
    color: #dce4ee;
    font-family:
        Inter,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
    font-size: 15px;
    line-height: 1.5;
}


/* -------------------------------------------------------------------------
   Application Shell
   ------------------------------------------------------------------------- */

.app-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-header {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    padding: 14px 26px;

    background: #18212c;
    border-bottom: 1px solid #2a3745;
}

.brand-block {
    min-width: 0;
}

.brand-name {
    color: #ffffff;
    font-size: 23px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.brand-subtitle {
    margin-top: 1px;

    color: #8fa3b8;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.header-context {
    color: #9fb2c6;
    font-size: 14px;
    font-weight: 600;
}

.app-body {
    flex: 1;

    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);

    min-height: 0;
}


/* -------------------------------------------------------------------------
   Sidebar
   ------------------------------------------------------------------------- */

.sidebar {
    background: #141b24;
    border-right: 1px solid #293541;

    padding: 20px 12px;
}

.primary-nav {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.nav-section-label {
    margin: 19px 10px 6px;

    color: #718399;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.nav-section-label:first-of-type {
    margin-top: 18px;
}

.nav-item {
    display: block;

    min-height: 38px;
    padding: 9px 11px;

    border: 1px solid transparent;
    border-radius: 5px;

    color: #b9c7d6;
    text-decoration: none;

    font-size: 14px;
    font-weight: 500;

    transition:
        background 120ms ease,
        border-color 120ms ease,
        color 120ms ease;
}

a.nav-item:hover {
    background: #1d2935;
    border-color: #304152;
    color: #ffffff;
}

.nav-item.active {
    background: #214d78;
    border-color: #2f679c;
    color: #ffffff;
}

.nav-item.disabled {
    color: #7e8b99;
    cursor: default;
}


/* -------------------------------------------------------------------------
   Workspace
   ------------------------------------------------------------------------- */

.workspace {
    min-width: 0;
    padding: 28px 32px 40px;

    background: #10151c;
}

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 22px;
}

.page-header h1 {
    margin: 0;

    color: #f2f6fa;
    font-size: 26px;
    font-weight: 650;
    line-height: 1.2;
}

.page-description {
    max-width: 760px;

    margin: 7px 0 0;

    color: #91a2b5;
    font-size: 14px;
}


/* -------------------------------------------------------------------------
   Home
   ------------------------------------------------------------------------- */

.welcome-panel {
    max-width: 1050px;

    padding: 24px;

    background: #18212b;
    border: 1px solid #293745;
    border-radius: 7px;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.16);
}

.welcome-panel h2 {
    margin: 0 0 8px;

    color: #eaf0f6;
    font-size: 18px;
    font-weight: 650;
}

.welcome-panel > p {
    max-width: 820px;

    margin: 0;

    color: #9dafc0;
}

.foundation-status {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;

    margin-top: 22px;
}

.status-card {
    min-height: 82px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 14px 16px;

    background: #121a23;
    border: 1px solid #2b3947;
    border-radius: 6px;
}

.status-card strong {
    color: #dce7f1;
    font-size: 14px;
    font-weight: 650;
}

.status-card span {
    margin-top: 4px;

    color: #69b7ff;
    font-size: 12px;
    font-weight: 600;
}


/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */

.app-footer {
    min-height: 40px;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 9px 18px;

    background: #111820;
    border-top: 1px solid #27333f;

    color: #738497;
    font-size: 11px;
    text-align: center;
}

.footer-separator {
    color: #435364;
}


/* -------------------------------------------------------------------------
   Responsive Behavior
   ------------------------------------------------------------------------- */

@media (max-width: 900px) {

    .app-body {
        grid-template-columns: 180px minmax(0, 1fr);
    }

    .workspace {
        padding: 22px;
    }

    .foundation-status {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 650px) {

    .app-header {
        padding: 12px 16px;
    }

    .header-context {
        display: none;
    }

    .app-body {
        display: block;
    }

    .sidebar {
        border-right: 0;
        border-bottom: 1px solid #293541;
    }

    .primary-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .nav-section-label {
        grid-column: 1 / -1;
    }

    .workspace {
        padding: 18px 16px 28px;
    }

    .page-header h1 {
        font-size: 22px;
    }
}


/* ============================================================
   Employee Registry / Shared Data Interface
   ============================================================

   FOUNDER'S NOTE:
   Administrative screens should make important workforce
   information easy to scan without overwhelming the user.

   PROFESSIONAL NOTE:
   These styles establish reusable data-panel and table patterns.
   Other registry-style modules may reuse them rather than
   creating separate visual systems.
   ============================================================ */


.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.page-header h1 {
    margin: 0 0 6px;
    font-size: 1.75rem;
    font-weight: 650;
    color: #f1f5f9;
}

.page-description {
    margin: 0;
    color: #9eacbc;
    line-height: 1.5;
}

.page-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.button {
    min-height: 38px;
    padding: 8px 16px;
    border: 1px solid #34485d;
    border-radius: 5px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.button-primary {
    background: #214d78;
    border-color: #2f679c;
    color: #f5f9fd;
}

.button-primary:hover:not(:disabled) {
    background: #285b8d;
}

.button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}


.data-panel {
    overflow: hidden;
    background: #18212b;
    border: 1px solid #293746;
    border-radius: 7px;
}

.data-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 20px;
    border-bottom: 1px solid #293746;
}

.data-panel-header h2 {
    margin: 0 0 3px;
    font-size: 1.05rem;
    font-weight: 650;
    color: #edf3f8;
}

.data-panel-header p {
    margin: 0;
    font-size: 0.86rem;
    color: #8f9dad;
}


.table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.data-table th {
    padding: 11px 16px;
    text-align: left;
    white-space: nowrap;
    background: #141c25;
    border-bottom: 1px solid #2b3948;
    color: #9eacbc;
    font-size: 0.76rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.data-table td {
    padding: 13px 16px;
    border-bottom: 1px solid #25323f;
    color: #d5dee8;
    vertical-align: middle;
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.data-table tbody tr:hover {
    background: #1b2733;
}

.employee-name {
    font-weight: 650;
    color: #eef4fa !important;
}


.status-badge {
    display: inline-block;
    min-width: 72px;
    padding: 4px 9px;
    border: 1px solid;
    border-radius: 4px;
    text-align: center;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.status-badge.active {
    background: rgba(39, 174, 96, 0.10);
    border-color: #2f8f5b;
    color: #62d893;
}

.status-badge.inactive {
    background: rgba(190, 70, 70, 0.10);
    border-color: #8e4545;
    color: #df7777;
}

.inactive-row {
    opacity: 0.68;
}


.empty-state {
    padding: 48px 24px;
    text-align: center;
}

.empty-state h3 {
    margin: 0 0 8px;
    color: #e6edf4;
}

.empty-state p {
    margin: 0;
    color: #8f9dad;
}


@media (max-width: 700px) {

    .page-header {
        flex-direction: column;
    }

    .page-actions {
        width: 100%;
    }

    .page-actions .button {
        width: 100%;
    }

}


/* ============================================================
   Employee Form
   ============================================================

   FOUNDER'S NOTE:
   Routine administrative entry should feel calm, obvious, and fast.
   The user should not need technical knowledge to create a valid
   workforce record.

   PROFESSIONAL NOTE:
   These form styles are intentionally reusable. Future registry
   modules can use the same field, grid, error, and action patterns
   without creating a separate visual language.
   ============================================================ */


.employee-form-panel {
    margin-bottom: 24px;
}

.form-panel-body {
    padding: 20px;
}

.employee-form {
    width: 100%;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 20px;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.form-field label {
    color: #aebbc9;
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.form-field input,
.form-field select {
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    padding: 8px 10px;
    background: #111922;
    border: 1px solid #344556;
    border-radius: 5px;
    color: #e4ebf2;
    font: inherit;
    outline: none;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background 0.15s ease;
}

.form-field input:hover,
.form-field select:hover {
    border-color: #456079;
}

.form-field input:focus,
.form-field select:focus {
    background: #131d27;
    border-color: #3d78ad;
    box-shadow: 0 0 0 2px rgba(61, 120, 173, 0.16);
}

.form-field input::placeholder {
    color: #657587;
}

.form-field select {
    cursor: pointer;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #293746;
}

.button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    box-sizing: border-box;
    padding: 8px 16px;
    background: #18232e;
    border: 1px solid #34485d;
    border-radius: 5px;
    color: #cbd6e1;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
}

.button-secondary:hover {
    background: #202e3b;
    border-color: #456079;
    color: #eef4fa;
}

a.button-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-decoration: none;
}

a.button-primary:hover {
    color: #ffffff;
}

.form-error {
    margin-bottom: 18px;
    padding: 11px 13px;
    background: rgba(190, 70, 70, 0.10);
    border: 1px solid #8e4545;
    border-radius: 5px;
    color: #e28a8a;
    font-size: 0.9rem;
    line-height: 1.45;
}


@media (max-width: 1050px) {

    .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 650px) {

    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .form-actions .button,
    .form-actions .button-secondary {
        width: 100%;
    }

}


/* ============================================================
   Registry Row Actions
   ============================================================ */

.row-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.inline-form {
    display: inline;
    margin: 0;
}

.table-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    box-sizing: border-box;
    padding: 5px 9px;
    background: #182735;
    border: 1px solid #38536d;
    border-radius: 4px;
    color: #b9d5ee;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

.table-action:hover {
    background: #21364a;
    border-color: #4b7092;
    color: #eef7ff;
}

.table-action.danger {
    background: rgba(176, 63, 63, 0.08);
    border-color: #704040;
    color: #d98b8b;
}

.table-action.danger:hover {
    background: rgba(176, 63, 63, 0.18);
    border-color: #985151;
    color: #efaaaa;
}

.table-action.success {
    background: rgba(47, 143, 91, 0.08);
    border-color: #376d50;
    color: #78cf9c;
}

.table-action.success:hover {
    background: rgba(47, 143, 91, 0.18);
    border-color: #469368;
    color: #9ae5b8;
}

/* --------------------------------------------------------------------------
   Settings
   -------------------------------------------------------------------------- */

.settings-section {
    width: 100%;
}

.section-description {
    margin: 5px 0 0;
    max-width: 760px;
    color: #9eacbb;
    font-size: 0.9rem;
    line-height: 1.45;
}

.settings-form-area {
    padding: 18px 20px;
    border-bottom: 1px solid #2a3542;
    background: #151e28;
}

.settings-form-area h3 {
    margin: 0 0 16px;
    font-size: 1rem;
    font-weight: 600;
    color: #e5edf6;
}

.rank-form-grid {
    grid-template-columns: minmax(180px, 1fr) 150px minmax(280px, 2fr);
}

.rank-description-field {
    min-width: 0;
}

.settings-error {
    margin: 16px 20px;
}

@media (max-width: 1050px) {
    .rank-form-grid {
        grid-template-columns: 1fr 1fr;
    }

    .rank-description-field {
        grid-column: 1 / -1;
    }
}

@media (max-width: 650px) {
    .rank-form-grid {
        grid-template-columns: 1fr;
    }

    .rank-description-field {
        grid-column: auto;
    }
}

/* --------------------------------------------------------------------------
   Employee Rank Color
   -------------------------------------------------------------------------- */

.rank-form-grid {
    grid-template-columns:
        minmax(180px, 1fr)
        130px
        minmax(260px, 1.7fr)
        minmax(190px, 0.8fr);
}

.rank-color-field {
    min-width: 0;
}

.rank-color-control {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 38px;
}

.rank-color-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #c8d4e0;
    font-size: 0.84rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.rank-color-toggle input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: #4a90e2;
    cursor: pointer;
}

.rank-color-picker-group {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition:
        opacity 120ms ease,
        filter 120ms ease;
}

.rank-color-picker-group input[type="color"] {
    width: 38px;
    height: 30px;
    padding: 2px;
    border: 1px solid #415164;
    border-radius: 4px;
    background: #111923;
    cursor: pointer;
}

.rank-color-picker-group input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 2px;
}

.rank-color-picker-group input[type="color"]::-webkit-color-swatch {
    border: 0;
    border-radius: 2px;
}

.rank-color-disabled {
    opacity: 0.38;
    filter: grayscale(0.7);
}

.rank-color-disabled input[type="color"] {
    cursor: not-allowed;
}

.rank-color-value {
    min-width: 64px;
    color: #8fa1b3;
    font-family: monospace;
    font-size: 0.76rem;
    letter-spacing: 0.02em;
}

.field-help {
    margin-top: 5px;
    color: #7f8d9b;
    font-size: 0.75rem;
    line-height: 1.35;
}

@media (max-width: 1200px) {
    .rank-form-grid {
        grid-template-columns: minmax(180px, 1fr) 130px minmax(240px, 1.5fr);
    }

    .rank-color-field {
        grid-column: 1 / -1;
    }
}

@media (max-width: 1050px) {
    .rank-form-grid {
        grid-template-columns: 1fr 1fr;
    }

    .rank-description-field,
    .rank-color-field {
        grid-column: 1 / -1;
    }
}

@media (max-width: 650px) {
    .rank-form-grid {
        grid-template-columns: 1fr;
    }

    .rank-description-field,
    .rank-color-field {
        grid-column: auto;
    }

    .rank-color-control {
        flex-wrap: wrap;
    }
}

/* Rank color indicator used alongside readable rank text. */
.rank-name-display {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.rank-color-marker {
    display: inline-block;
    width: 5px;
    height: 18px;
    flex: 0 0 5px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}


/* ==========================================================================
   Program Authorization
   ========================================================================== */

.authorization-employee-selector {
    margin-top: 20px;
    margin-bottom: 28px;
    max-width: 420px;
}

.authorization-selector-form {
    margin: 0;
}

.authorization-employee-field {
    margin: 0;
}

.authorization-employee-field select {
    width: 100%;
}

.authorization-heading {
    margin-bottom: 18px;
}

.authorization-heading h3 {
    margin: 0 0 5px;
}

.authorization-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 14px;
    max-width: 1180px;
}

.authorization-tile-form {
    margin: 0;
}

.authorization-tile {
    width: 100%;
    min-height: 128px;
    padding: 16px;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;

    appearance: none;
    font: inherit;
    text-align: left;

    background: #1f5f8f;
    border: 1px solid #347caf;
    border-radius: 5px;

    color: #edf6fc;
    cursor: pointer;

    transition:
        border-color 120ms ease,
        background-color 120ms ease,
        transform 120ms ease;
}

.authorization-tile:hover {
    background: #256b9e;
    border-color: #4b94c7;
    transform: translateY(-1px);
}

.authorization-tile:focus-visible {
    outline: 2px solid #d9edf9;
    outline-offset: 3px;
}

.authorization-program-name {
    display: block;
    margin-bottom: 6px;

    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
}

.authorization-program-address {
    display: block;
    min-height: 34px;
    margin-bottom: 14px;

    color: #c9dce9;
    font-size: 0.82rem;
    line-height: 1.35;
}

.authorization-state {
    display: block;
    width: 100%;

    padding: 7px 8px;

    border: 1px solid currentColor;
    border-radius: 3px;

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-align: center;
}

.authorization-tile.authorized .authorization-state {
    color: #45ef9a;
    background: rgba(0, 74, 42, 0.45);
}

.authorization-tile.unauthorized .authorization-state {
    color: #ff7c83;
    background: rgba(91, 22, 29, 0.48);
}

.authorization-empty-selection {
    margin-top: 8px;
    padding: 22px;

    max-width: 620px;

    border: 1px solid #293844;
    border-radius: 4px;

    color: #91a3b2;
    background: #111a21;
}

@media (max-width: 700px) {
    .authorization-grid {
        grid-template-columns: 1fr;
    }
}


/* -------------------------------------------------------------------------
   Scheduling - Weekly Grid
   ------------------------------------------------------------------------- */

.schedule-week-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    align-items: start;
}

.schedule-day-column {
    min-width: 0;
    border: 1px solid var(--border-color, #334155);
    border-radius: 6px;
    overflow: hidden;
}

.schedule-day-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 6px;
    text-align: center;
    border-bottom: 1px solid var(--border-color, #334155);
}

.schedule-day-header strong {
    font-size: 0.9rem;
}

.schedule-day-header span {
    font-size: 0.75rem;
    opacity: 0.75;
}

.schedule-shift-block {
    border-bottom: 1px solid var(--border-color, #334155);
}

.schedule-shift-block:last-child {
    border-bottom: 0;
}

.schedule-shift-header {
    padding: 6px 8px;
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.04em;
    opacity: 0.8;
}

.schedule-position {
    min-height: 36px;
    padding: 7px 8px;
    border-top: 1px solid var(--border-color, #334155);
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

.schedule-vacant {
    opacity: 0.6;
    font-style: italic;
}

.schedule-empty {
    text-align: center;
    opacity: 0.4;
}

/* Scheduling workspace action spacing */
.schedule-workspace-actions {
    margin-top: 24px;
    padding-top: 20px;
    padding-bottom: 12px;
}

.schedule-print-action {
    display: flex;
    align-items: center;
    padding: 8px 0;
}

/* ============================================================
   OT Master Schedule Workspace
   ============================================================ */

.ot-master-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin-top: 20px;
}

.ot-master-table th,
.ot-master-table td {
    border: 1px solid #34485d;
    padding: 12px 8px;
    vertical-align: top;
    text-align: left;
    overflow-wrap: anywhere;
}

.ot-master-table thead th {
    background: #18232e;
    color: #e4edf6;
    text-align: center;
}

.ot-master-table th:first-child {
    width: 15%;
}

.ot-master-table tbody th {
    background: #18212b;
    color: #f1f5f9;
}

.ot-master-assignment {
    padding: 6px 0;
    font-size: 0.85rem;
    line-height: 1.4;
}

.ot-master-assignment + .ot-master-assignment {
    border-top: 1px dashed #34485d;
    margin-top: 6px;
    padding-top: 10px;
}

.ot-master-assignment strong {
    color: #e4edf6;
}

.ot-master-assignment div {
    color: #9eacbc;
    margin-top: 3px;
}


/* Scheduling assignment edit controls */
.schedule-assignment-form select { width: 100%; max-width: 100%; font-size: 0.8rem; }
.schedule-remove-form { margin-top: 5px; }
.schedule-remove-button { border: 0; background: transparent; color: #c24141; cursor: pointer; padding: 2px 0; font-size: 0.75rem; text-decoration: underline; }
.schedule-remove-button:hover { color: #ef4444; }

/* -------------------------------------------------------------------------
   Global dark dropdown menus
   Keep native select popups aligned with the dark administrative theme.
   ------------------------------------------------------------------------- */
:root {
    color-scheme: dark;
}

select {
    color-scheme: dark;
    background-color: #111922;
    color: #e4ebf2;
}

select option,
select optgroup {
    background-color: #18212c;
    color: #e4ebf2;
}

select option:disabled {
    color: #8fa3b8;
}

/* Rank names remain visible even if a browser ignores colors in native select popups. */
.schedule-rank-display, .schedule-rank-badge { border-left: 4px solid var(--rank-accent, #64748b); padding-left: 6px; }
.schedule-rank-badge { display: inline-block; margin-top: 4px; color: var(--rank-accent, #cbd5e1); font-size: .75rem; font-weight: 700; }
/* NAR required programs: a small label, and a warning on shifts with no NAR + DEL employee (never a block). */
.schedule-nar-required { display: inline-block; margin-left: 8px; padding: 2px 8px; border: 1px solid #f59e0b; border-radius: 999px; color: #fbbf24; font-size: .75rem; vertical-align: middle; }
.schedule-nar-flag { display: block; margin-top: 3px; color: #fbbf24; font-size: .7rem; letter-spacing: 0; }
.schedule-rank-select { background-color: #111922; color: #e4edf6; color-scheme: dark; }
.schedule-rank-select option { background-color: #111922; }

/* Compact, expandable administrative dashboard */
.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(260px,1fr);gap:16px;align-items:start}
.dashboard-card{background:#17212b;border:1px solid #304152;border-radius:8px;padding:18px;min-width:0}
.dashboard-card-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.dashboard-card h2{font-size:16px;margin:0;color:#eaf0f6}
.dashboard-muted{font-size:13px;color:#aabaca;line-height:1.5;margin:10px 0}
.dashboard-status{font-size:11px;font-weight:700;padding:5px 9px;border:1px solid #567086;border-radius:999px;color:#dce7f1}
.dashboard-status.ok{border-color:#3e886c;color:#80d7a7}.dashboard-status.urgent{border-color:#ad6059;color:#ffafa4}
.dashboard-progress-label{display:flex;gap:12px;align-items:baseline;margin:16px 0 8px;flex-wrap:wrap}
.dashboard-progress-label strong{font-size:30px;color:#eaf0f6}.dashboard-progress-label span{font-size:12px;color:#aabaca}
.dashboard-progress{height:10px;border-radius:10px;background:#304152;overflow:hidden}.dashboard-progress>div{height:100%;background:#69b7ff;border-radius:10px}
.dashboard-subheading{display:flex;justify-content:space-between;font-weight:650;font-size:13px;color:#eaf0f6;margin:20px 0 8px}
.dashboard-programs{list-style:none;margin:0;padding:0;max-height:230px;overflow-y:auto}
.dashboard-programs li{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid #304152;font-size:13px}
.dashboard-programs li a,.dashboard-link{color:#80c3ff;text-decoration:none}.dashboard-programs li a:hover,.dashboard-link:hover{text-decoration:underline}
.dashboard-programs li span{color:#aabaca;text-align:right}
.dashboard-link{display:inline-block;margin-top:14px;font-size:13px;font-weight:650}
@media(max-width:850px){.dashboard-grid{grid-template-columns:1fr}}

/* Compact, read-only schedule summary on the admin information board. */
.dashboard-grid{grid-template-columns:repeat(2,minmax(0,300px));justify-content:start}
.dashboard-readiness-compact{min-height:205px}
.dashboard-readiness-compact .dashboard-card-heading{flex-wrap:nowrap}
.dashboard-readiness-compact .dashboard-card h2{font-size:15px}
.dashboard-readiness-compact .dashboard-progress-label{margin:12px 0 7px}
.dashboard-readiness-compact .dashboard-progress-label strong{font-size:27px}
.dashboard-readiness-compact .dashboard-progress{height:8px}
.dashboard-program-count{font-size:14px;margin:15px 0 0;color:#eaf0f6}
.dashboard-deadline{margin-top:12px;font-size:12px}
@media(max-width:720px){.dashboard-grid{grid-template-columns:minmax(0,1fr)}}

/* Compliance monitors: quiet inset screens, no duplicate navigation */
.compliance-monitor-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.compliance-monitor{background:#101b25;border:1px solid #395065;border-radius:10px;padding:18px;min-width:0;box-shadow:inset 0 2px 9px rgba(0,0,0,.28),0 1px 2px rgba(0,0,0,.15)}
.compliance-monitor-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.compliance-monitor h2{font-size:16px;color:#e9f2f9;margin:0}
.monitor-indicator{height:7px;width:7px;background:#74b9d9;border-radius:50%;box-shadow:0 0 6px rgba(116,185,217,.35);flex:none}
.monitor-stat{display:flex;align-items:baseline;gap:10px;margin:12px 0 9px}
.monitor-stat strong{font-size:28px;color:#e9f2f9}.monitor-stat span{font-size:12px;color:#b2c0cc}
.monitor-secondary{font-size:13px;color:#c6d4df;margin:11px 0}
.monitor-empty{margin:18px 0 12px;font-size:15px;font-weight:600;color:#c8d8e6}
.monitor-breakdown{border-top:1px solid #304355;margin-top:17px;padding-top:12px}
.monitor-breakdown h3{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#a8bbcb;margin:0 0 8px}
.monitor-breakdown-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid #263847;font-size:12px;color:#d9e5ee}
.monitor-breakdown-row span:last-child{text-align:right;color:#a9c5d8;white-space:nowrap}
.monitor-footnote{font-size:11px;line-height:1.5;color:#9aafc0;margin:10px 0 0}
.monitor-caution{font-size:12px;color:#e4c18a;margin:10px 0}
.dashboard-readiness-compact{background:#101b25;border-color:#395065;box-shadow:inset 0 2px 9px rgba(0,0,0,.28)}
@media(max-width:850px){.compliance-monitor-grid{grid-template-columns:1fr}}

/* Company policy control and noninteractive Compliance monitor previews */
.settings-payroll-policy{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:.65rem 0}
.settings-rounding-label{display:flex;align-items:center;gap:.75rem;flex:1;min-width:230px;cursor:pointer}
.settings-rounding-label input{width:19px;height:19px;accent-color:#5c91d1}
.settings-rounding-label span{display:flex;flex-direction:column;gap:.2rem}
.settings-rounding-label small{opacity:.75;font-size:.82rem}
.monitor-review-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin:1rem 0}
.monitor-review-stats>div{display:flex;flex-direction:column;gap:.25rem;align-items:center;background:rgba(95,130,170,.10);border:1px solid rgba(120,150,180,.20);border-radius:9px;padding:.75rem .25rem;text-align:center}
.monitor-review-stats strong{font-size:1.35rem}
.monitor-review-stats span{font-size:.78rem;opacity:.8}
.monitor-preview-actions{display:flex;gap:.6rem;margin-top:.8rem;flex-wrap:wrap}
.monitor-preview-actions button:disabled{opacity:.5;cursor:not-allowed}

/* Calendar administration preview — scoped to avoid scheduler regressions */
.nav-subitem{padding-left:29px!important;font-size:.92em}
.tc-calendar{max-width:1600px;margin:0 auto;color:#e5edf8}
.tc-calendar-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}.tc-calendar-title h1{font-size:30px;margin:0}.tc-calendar-title p{margin:3px 0;color:#9db1c6}
.tc-preview{border:1px solid #5b7390;color:#c9d8e8;border-radius:20px;padding:5px 12px;font-size:11px;white-space:nowrap}.tc-preview-inline{font-size:10px;color:#9fb5ce;letter-spacing:.04em;font-weight:500}
.tc-calendar-layout{display:grid;grid-template-columns:minmax(0,2.5fr) minmax(260px,1fr);gap:15px;align-items:start}.tc-calendar-main,.tc-cal-side{display:grid;gap:15px;min-width:0}.tc-cal-card{background:#111e2b;border:1px solid #31485f;border-radius:13px;padding:15px;min-width:0}.tc-cal-card h2{font-size:17px;margin:0 0 13px}.tc-month-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:13px}.tc-month-toolbar h2{flex:1;text-align:center;margin:0;font-size:19px}.tc-icon-btn,.tc-small-btn{background:#172b40;border:1px solid #35506c;color:#e4effb;border-radius:8px;padding:7px 13px;cursor:pointer;font-size:16px}.tc-action-primary{background:#0966d7;border:1px solid #2986f6;color:white;border-radius:8px;padding:9px 14px;cursor:pointer;font-weight:700}.tc-small-btn{font-size:13px}.tc-cal-weekdays,.tc-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.tc-cal-weekdays span{text-align:center;background:#1a3147;border:1px solid #344b61;padding:9px 1px;font-size:12px}.tc-cal-grid{border-left:1px solid #344b61;border-top:1px solid #344b61}.tc-day{background:#0d1b29;color:#eaf2fb;text-align:left;border:0;border-right:1px solid #344b61;border-bottom:1px solid #344b61;min-height:95px;padding:7px 4px;display:flex;flex-direction:column;gap:3px;min-width:0;cursor:pointer}.tc-day:hover,.tc-day.chosen{background:#213c54}.tc-day.outside{background:#102131;opacity:.5;cursor:default}.tc-day-number{font-weight:600;font-size:13px;margin-left:3px}.tc-day-tag{display:block;border-radius:5px;padding:3px 5px;font-size:10px;line-height:1.3;overflow-wrap:anywhere}.tc-day-tag.approved,.tc-status.approved{background:#07552f;color:#c9ffdb}.tc-day-tag.pending,.tc-status.pending{background:#80600b;color:#fff3b9}.tc-day-tag.denied,.tc-status.denied{background:#761d31;color:#ffe0e3}.tc-day-tag.event{background:#104780;color:#d7efff}.tc-day-tag.company{background:#493187;color:#e9e1ff}.tc-selected{padding-top:11px;color:#9eb7ce;font-size:12px;min-height:32px}.tc-card-title{display:flex;align-items:center;justify-content:space-between;gap:10px}.tc-table-wrap{overflow-x:auto}.tc-cal-table{width:100%;border-collapse:collapse;font-size:12px;white-space:nowrap}.tc-cal-table th{background:#1a3045;text-align:left;color:#c5d7e9;padding:9px}.tc-cal-table td{padding:9px;border-bottom:1px solid #2b4056}.tc-status{border-radius:6px;padding:4px 8px}.tc-review{border:1px solid #4277b5;background:#173b62;color:#e7f3ff;border-radius:6px;padding:4px 9px;cursor:pointer}.tc-cal-side .tc-cal-card h2{margin-bottom:13px}.tc-side-action{display:block;width:100%;border:1px solid transparent;border-radius:8px;color:white;text-align:left;padding:11px;margin-top:9px;font-weight:700;cursor:pointer}.tc-side-action small{display:block;font-size:11px;font-weight:400;margin-left:23px;opacity:.9}.tc-side-action.purple{background:#41218d}.tc-side-action.green{background:#08663b}.tc-side-action.blue{background:#104e96}.tc-event-list{display:grid;gap:12px}.tc-event-list>div{display:flex;gap:12px;align-items:center}.tc-event-list b{font-size:11px;min-width:55px;background:#2a2368;color:#e7e1ff;padding:10px 6px;text-align:center;border-radius:8px}.tc-event-list span{font-size:13px;font-weight:600}.tc-event-list small{display:block;color:#9eb2c8;font-size:11px;font-weight:400}.tc-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.tc-stat-grid>div{background:#192c40;border:1px solid #293e53;border-radius:8px;padding:10px}.tc-stat-grid strong{display:block;font-size:24px}.tc-stat-grid small{color:#9eb4c8;font-size:11px}.tc-cal-footer{font-size:12px;color:#a3b8cd}.tc-cal-dialog{max-width:420px;border:1px solid #42658a;border-radius:14px;background:#15283a;color:#ecf4fd;padding:24px;box-shadow:0 20px 80px #0009}.tc-cal-dialog::backdrop{background:#0009}.tc-cal-dialog h2{margin-top:0}
@media(max-width:1050px){.tc-calendar-layout{grid-template-columns:1fr}.tc-cal-side{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.tc-calendar-title{align-items:flex-start;flex-direction:column}.tc-cal-side{grid-template-columns:1fr}.tc-month-toolbar{flex-wrap:wrap}.tc-day{min-height:62px}.tc-day-tag{font-size:9px}.tc-calendar-title h1{font-size:24px}}
body.light-theme .tc-calendar,body[data-theme="light"] .tc-calendar{color:#182d43}body.light-theme .tc-cal-card,body[data-theme="light"] .tc-cal-card{background:#fff;border-color:#d0dce8}body.light-theme .tc-day,body[data-theme="light"] .tc-day{background:#f9fbfe;color:#182d43}body.light-theme .tc-day.outside,body[data-theme="light"] .tc-day.outside{background:#e7edf4}body.light-theme .tc-day:hover,body[data-theme="light"] .tc-day:hover{background:#e4effa}body.light-theme .tc-selected,body[data-theme="light"] .tc-selected{color:#425a72}body.light-theme .tc-cal-table th,body[data-theme="light"] .tc-cal-table th{background:#e9f0f7;color:#263e58}body.light-theme .tc-cal-table td,body[data-theme="light"] .tc-cal-table td{border-color:#dce5ed}body.light-theme .tc-stat-grid>div,body[data-theme="light"] .tc-stat-grid>div{background:#edf4fa}body.light-theme .tc-cal-weekdays span,body[data-theme="light"] .tc-cal-weekdays span{background:#e5edf5;color:#203950}

/* TDS presentation refinement: compact without hiding functions. */
.dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1100px;gap:12px;align-items:stretch}
.dashboard-grid>.dashboard-card{min-height:0;padding:14px}
.dashboard-grid>.dashboard-card:nth-child(1){grid-column:1;grid-row:1}
.dashboard-grid>.dashboard-card:nth-child(2){grid-column:2;grid-row:1}
.dashboard-grid>.dashboard-card:nth-child(3){grid-column:2;grid-row:2}
.dashboard-grid>.dashboard-card:nth-child(4){grid-column:1;grid-row:2}
.dashboard-grid .dashboard-subheading{margin:10px 0 5px}
.dashboard-grid .dashboard-programs{max-height:115px;overflow-y:auto}
.dashboard-grid .dashboard-programs li{padding:5px 0}
.settings-section{margin-bottom:12px}
.settings-section .data-panel{padding:12px 15px!important;margin-bottom:0!important}
.settings-section .data-panel-header{margin-bottom:9px}
.settings-section .employee-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;align-items:start}
.settings-section .employee-form>.form-actions{grid-column:1/-1}
.settings-section .form-field{min-width:0;margin-bottom:4px}
.settings-section input[type="checkbox"]{appearance:auto!important;width:17px!important;height:17px!important;min-width:17px!important;min-height:17px!important;flex:none!important;accent-color:#5d9fea;vertical-align:middle}
.settings-section .form-field label:has(input[type="checkbox"]){display:inline-flex;align-items:center;gap:8px;max-width:100%;width:auto}
.settings-section .form-field label:has(input[type="checkbox"]) input{margin:0}
.settings-section .form-field>div:has(input[type="checkbox"]){gap:7px 14px!important}
.settings-section .form-field>div:has(input[type="checkbox"]) label{display:inline-flex;align-items:center;gap:6px}
.rank-chooser{max-width:620px;display:grid;gap:9px}
.rank-chooser>label{font-weight:650}
.rank-chooser>select{width:100%;max-width:430px}
.rank-detail-card{padding:13px;border:1px solid var(--border-color,#34495d);border-radius:9px}
.rank-detail-card[hidden]{display:none!important}
.rank-detail-heading{display:flex;align-items:center;gap:12px}
.rank-detail-card p{margin:8px 0}
.tc-calendar-title{margin-bottom:9px}.tc-calendar-title h1{font-size:25px}
.tc-calendar-layout{gap:10px;grid-template-columns:minmax(0,2.7fr) minmax(245px,1fr)}
.tc-calendar-main,.tc-cal-side{gap:10px}
.tc-cal-card{padding:11px}.tc-cal-card h2{font-size:15px;margin-bottom:8px}
.tc-month-toolbar{gap:8px;margin-bottom:8px}.tc-month-toolbar h2{font-size:17px}
.tc-cal-weekdays span{padding:6px 1px}.tc-day{min-height:69px;padding:4px 3px;gap:2px}
.tc-day-tag{font-size:9px;padding:2px 4px}.tc-selected{min-height:24px;padding-top:6px}
.tc-cal-table th,.tc-cal-table td{padding:6px}.tc-side-action{padding:8px;margin-top:6px}
.tc-event-list{gap:7px}.tc-event-list b{padding:7px 5px}
.tc-stat-grid>div{padding:7px}.tc-stat-grid strong{font-size:20px}
@media(max-width:850px){.dashboard-grid{grid-template-columns:1fr}.dashboard-grid>.dashboard-card:nth-child(n){grid-column:auto;grid-row:auto}.settings-section .employee-form{grid-template-columns:1fr}.tc-calendar-layout{grid-template-columns:1fr}}
@media(max-width:620px){.tc-day{min-height:58px}}

.tc-context-help{text-align:right;margin:-6px 0 8px;font-size:12px}
.tc-context-help a{color:#8dc5ff;text-decoration:none}.tc-context-help a:hover{text-decoration:underline}
.tc-help-layout{display:grid;grid-template-columns:minmax(185px,240px) minmax(0,1fr);gap:14px;max-width:1050px}
.tc-help-menu,.tc-help-article{padding:16px}.tc-help-menu h2{font-size:17px;margin:0 0 10px}
.tc-help-item{display:block;padding:8px 10px;text-decoration:none;color:inherit;border-radius:6px}
.tc-help-item:hover,.tc-help-item.selected{background:rgba(90,150,210,.18)}
.tc-help-article h1{font-size:24px}.tc-help-article h2{font-size:17px;margin-top:20px}
.tc-help-article p{line-height:1.6;max-width:72ch}
@media(max-width:650px){.tc-help-layout{grid-template-columns:1fr}}


/* Action Center read-only concept; all numbers and requests are illustrative. */
.ac-page{max-width:1170px}
.ac-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.ac-header h1{margin:0 0 4px}.ac-header p{margin:0}
.ac-preview{font-size:11px;letter-spacing:.07em;font-weight:750;border:1px solid #b18a4c;color:#d7b77c;border-radius:20px;padding:7px 10px;white-space:nowrap}
.ac-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin-bottom:12px}
.ac-stat,.ac-panel{background:var(--panel-bg,#1b283a);border:1px solid var(--border-color,#35465b);border-radius:10px}
.ac-stat{padding:13px;display:flex;flex-direction:column;gap:4px}
.ac-stat span,.ac-stat small,.ac-note,.ac-request small,.ac-history small{color:var(--text-muted,#a8b8c9)}
.ac-stat span{font-size:12px}.ac-stat strong{font-size:27px;line-height:1.2}.ac-stat small{font-size:11px}
.ac-stat .ac-status-text{font-size:19px}
.ac-layout{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(260px,1fr);gap:12px;align-items:start}
.ac-panel{padding:15px;margin-bottom:12px}
.ac-panel-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:9px}
.ac-panel-head h2{font-size:17px;margin:0}.ac-panel-head span{font-size:12px;color:var(--text-muted,#a8b8c9)}
.ac-note{font-size:12px;line-height:1.55;margin:7px 0 12px}
.ac-request{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--border-color,#35465b)}
.ac-request-main{display:flex;flex-direction:column;gap:5px;min-width:0}
.ac-request-main strong{font-size:14px}.ac-request small{font-size:12px}
.ac-type{font-size:11px;font-weight:700;color:#86bfff}
.ac-priority{font-size:11px;border-radius:20px;padding:5px 8px;border:1px solid var(--border-color,#35465b);white-space:nowrap}
.ac-priority.high{color:#efbb80;border-color:#b18a4c}
.ac-steps{padding-left:22px;margin:5px 0;font-size:13px;line-height:1.7}
.ac-steps li{margin-bottom:6px}
.ac-history{display:flex;gap:9px;align-items:start;padding:10px 0;border-top:1px solid var(--border-color,#35465b)}
.ac-history div{display:flex;flex-direction:column;gap:4px;font-size:13px}
.ac-dot{width:8px;height:8px;flex:none;border-radius:50%;background:#6dbf9b;margin-top:5px}
@media(max-width:900px){.ac-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.ac-layout{grid-template-columns:1fr}}
@media(max-width:480px){.ac-summary{grid-template-columns:1fr 1fr}.ac-stat{padding:9px}.ac-preview{white-space:normal}}

.compliance-monitor-column{display:flex;flex-direction:column;gap:16px;min-width:0}

.tc-help-article pre{white-space:pre;overflow:auto;padding:1rem;background:#0d1720;border:1px solid #304352;border-radius:8px}
#class-qr svg{width:260px;height:260px;background:white;padding:12px}
@media print{body:has(#class-print:not([hidden])) *{visibility:hidden}body:has(#class-print:not([hidden])) #class-print,body:has(#class-print:not([hidden])) #class-print *{visibility:visible}#class-print{position:absolute;left:0;top:0;color:black;background:white;padding:20px}#class-url{overflow-wrap:anywhere}}
.settings-panel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}.settings-panel-tile{padding:24px;text-align:left;background:#172b38;color:#e7edf3;border:1px solid #38596f;border-radius:12px;min-height:100px;font-size:1.05rem;cursor:pointer}.settings-panel-tile:hover{background:#204158}.settings-overlay,dialog.employee-rank-dialog{width:min(850px,90vw);max-height:85vh;overflow:auto;background:#101b24;color:#e7edf3;border:1px solid #587487;border-radius:12px;padding:20px}.settings-overlay::backdrop,dialog.employee-rank-dialog::backdrop{background:#0009}.settings-overlay-close{display:block;margin-left:auto}.settings-overlay .settings-section{margin-top:12px}

@media print{body:has(#class-print:not([hidden])) *:not(#class-print):not(#class-print *):not(:has(#class-print)){display:none!important}body:has(#class-print:not([hidden])),body:has(#class-print:not([hidden])) .app-shell,body:has(#class-print:not([hidden])) .app-body,body:has(#class-print:not([hidden])) .workspace,body:has(#class-print:not([hidden])) .dashboard-card{display:block!important;height:auto!important;min-height:0!important;overflow:visible!important;margin:0!important;padding:0!important;background:white!important}body:has(#class-print:not([hidden])) #class-print{position:static!important;padding:20px!important;break-inside:avoid}}
/* Overlay controls use the same readable spacing and dark palette as Care. */
.employee-rank-dialog form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.employee-rank-dialog label{display:flex;flex-direction:column;gap:8px}.employee-rank-dialog [role=status]{grid-column:1/-1;margin:0}.employee-rank-dialog input,.employee-rank-dialog select,.settings-overlay input:not([type=checkbox]),.settings-overlay select,.settings-overlay textarea{box-sizing:border-box;max-width:100%;min-height:40px;background:#101c26;color:#e7edf3;border:1px solid #486478;border-radius:7px;padding:9px 12px}.employee-rank-dialog input,.employee-rank-dialog select{width:100%}.employee-rank-dialog input[type=color]{padding:5px;height:42px}.settings-overlay form>label{display:block;margin:12px 0}.settings-overlay fieldset label{display:inline-flex;gap:6px;align-items:center;margin:6px 12px 6px 0}.employee-rank-dialog button,.settings-overlay button{min-height:38px;padding:8px 16px;background:#204b6a;color:#e7edf3;border:1px solid #527e9e;border-radius:7px;cursor:pointer}.employee-rank-dialog button:hover,.settings-overlay button:hover{background:#2b638c}.settings-overlay .settings-overlay-close{background:#24343f}.settings-overlay .danger{background:#6a2e38}.settings-overlay form>span{display:inline-block;margin:8px 16px 8px 0}

.company-footer{text-align:center;color:var(--text-muted,#a7bac9);font-size:.8rem;padding:1rem;line-height:1.5}

/* Compact office-maintained qualifications; preserve surrounding layouts. */
.qualification-options{border:1px solid var(--border-color,#486478);border-radius:8px;padding:12px;margin:10px 0;min-width:0}
.qualification-options legend{padding:0 5px;font-weight:600}
.qualification-options label{display:flex;align-items:center;gap:8px;margin:8px 0;line-height:1.4}
.qualification-options input[type="checkbox"]{appearance:auto;width:18px!important;height:18px!important;min-width:18px;min-height:18px;flex:none;margin:0;padding:0;accent-color:#5d9fea}