/*
 * NAAS Enterprise UI Layer
 * Shared operational components for admin and company workspaces.
 * Page-specific CSS should only handle unique layout or domain visuals.
 */

:root {
    --ui-control-height: 40px;
    --ui-control-height-sm: 32px;
    --ui-card-radius: 8px;
    --ui-panel-radius: 8px;
    --ui-table-row-height: 38px;
    --ui-density-gap: 10px;
    --ui-section-gap: 12px;
    --ui-toolbar-gap: 8px;
    --ui-panel-pad: 14px;
    --ui-table-cell-pad-y: 8px;
    --ui-table-cell-pad-x: 10px;
    --ui-pagination-pad-y: 9px;
    --ui-pagination-pad-x: 10px;
    --ui-heading-size: 16px;
    --ui-body-note-size: 11.5px;
    --ui-surface: rgba(255, 255, 255, 0.94);
    --ui-surface-muted: rgba(247, 250, 255, 0.86);
    --ui-border: rgba(16, 32, 56, 0.1);
    --ui-border-strong: rgba(31, 111, 255, 0.22);
    --ui-muted: var(--grey-700);
}

@media (max-width: 1680px) {
    :root {
        --ui-control-height: 38px;
        --ui-control-height-sm: 31px;
        --ui-table-row-height: 36px;
        --ui-density-gap: 9px;
        --ui-section-gap: 11px;
        --ui-toolbar-gap: 7px;
        --ui-panel-pad: 13px;
        --ui-table-cell-pad-y: 7px;
        --ui-table-cell-pad-x: 9px;
        --ui-pagination-pad-y: 8px;
        --ui-pagination-pad-x: 9px;
        --ui-heading-size: 15px;
        --ui-body-note-size: 11px;
    }
}

@media (max-width: 1440px) {
    :root {
        --ui-control-height: 36px;
        --ui-control-height-sm: 30px;
        --ui-table-row-height: 34px;
        --ui-density-gap: 8px;
        --ui-section-gap: 10px;
        --ui-toolbar-gap: 6px;
        --ui-panel-pad: 12px;
        --ui-table-cell-pad-y: 7px;
        --ui-table-cell-pad-x: 8px;
        --ui-pagination-pad-y: 8px;
        --ui-pagination-pad-x: 8px;
        --ui-heading-size: 14px;
        --ui-body-note-size: 10.5px;
    }
}

@media (max-width: 1280px) {
    :root {
        --ui-control-height: 35px;
        --ui-control-height-sm: 29px;
        --ui-table-row-height: 32px;
        --ui-density-gap: 7px;
        --ui-section-gap: 9px;
        --ui-toolbar-gap: 6px;
        --ui-panel-pad: 11px;
        --ui-table-cell-pad-y: 6px;
        --ui-table-cell-pad-x: 8px;
        --ui-pagination-pad-y: 7px;
        --ui-pagination-pad-x: 8px;
        --ui-heading-size: 14px;
        --ui-body-note-size: 10px;
    }
}

body {
    text-rendering: optimizeLegibility;
}

.main-content {
    --surface: var(--ui-surface);
}

/* Shared surfaces */
:where(
    .card,
    .table-card,
    .form-card,
    .surface-panel,
    .workspace-section,
    .admin-panel,
    .admin-form-card,
    .admin-metric-card,
    .admin-action-card,
    .settings-card,
    .profile-form-card,
    .customer-form-panel,
    .bank-account-card,
    .brand-asset-card,
    .employee-form-card,
    .hr-suite-card,
    .invp-panel,
    .invp-metric-card,
    .invp-detail-card,
    .invp-preview-card
) {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-card-radius);
    background: var(--ui-surface);
    box-shadow: var(--shadow-sm);
}

:where(
    .workspace-section,
    .admin-panel,
    .admin-form-card,
    .admin-metric-card,
    .admin-action-card,
    .settings-card,
    .profile-form-card,
    .customer-form-panel,
    .bank-account-card,
    .employee-form-card,
    .hr-suite-card,
    .invp-panel
) {
    padding: var(--ui-panel-pad);
}

:where(
    .workspace-section:hover,
    .admin-panel:hover,
    .admin-form-card:hover,
    .settings-card:hover,
    .customer-form-panel:hover,
    .hr-suite-card:hover,
    .invp-panel:hover
) {
    border-color: rgba(16, 32, 56, 0.14);
}

/* Shared section headers */
:where(
    .workspace-section-head,
    .admin-panel-head,
    .panel-head,
    .bank-account-card-head,
    .hr-suite-card__head,
    .invp-panel-head,
    .invp-toolbar,
    .settings-card__head,
    .profile-password-head,
    .payslip-breakdown-head,
    .payslip-cpf-engine-head
) {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ui-toolbar-gap);
    min-width: 0;
}

:where(
    .workspace-section-head h2,
    .admin-panel-head h2,
    .panel-head h2,
    .bank-account-card-head h3,
    .hr-suite-card__head h2,
    .invp-panel-copy h2,
    .invp-toolbar-copy h2,
    .settings-card__head h2
) {
    font-size: var(--ui-heading-size);
    line-height: 1.18;
}

:where(
    .workspace-section-head p,
    .admin-panel p,
    .panel-head p,
    .bank-account-card-head p,
    .hr-suite-card__head p,
    .invp-panel-copy p,
    .settings-card__meta,
    .small-note
) {
    color: var(--ui-muted);
    font-size: var(--ui-body-note-size);
    line-height: 1.42;
}

/* Compact controls */
:where(
    input[type="text"],
    input[type="search"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="datetime-local"],
    select,
    textarea
) {
    min-height: var(--ui-control-height);
    border-radius: var(--ui-card-radius);
    border-color: var(--ui-border);
}

:where(textarea) {
    min-height: 74px;
}

:where(label, .workspace-filter-field > label) {
    color: var(--grey-700);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.01em;
}

:where(button, .btn) {
    min-height: var(--ui-control-height);
    border-radius: var(--ui-card-radius);
    font-size: 12px;
    font-weight: 700;
}

/* BUG FIX: :where() always contributes zero specificity, so this lost to
   the plain `.btn` rule in css/components.css regardless of load order,
   making .btn-sm do nothing anywhere in the app. Use real selectors. */
.btn-sm, .btn.btn-sm, button.btn-sm {
    min-height: var(--ui-control-height-sm);
    padding-inline: 10px;
    font-size: 11px;
}

:where(.btn-secondary, .btn-outline) {
    border-color: var(--ui-border);
}

/* Forms and action bars */
:where(.form-block) {
    margin-bottom: var(--ui-density-gap);
}

:where(.form-row-2, .inline-row, .admin-form-grid, .company-profile-grid, .hr-form-grid) {
    gap: var(--ui-density-gap);
}

:where(
    .page-toolbar,
    .workspace-actions,
    .admin-inline-actions,
    .admin-form-actions,
    .company-profile-footer-actions,
    .customer-form-actions,
    .hr-form-actions,
    .invoice-create-actions,
    .invp-toolbar-actions,
    .finance-filter-actions
) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-toolbar-gap);
}

:where(
    .admin-form-actions,
    .company-profile-footer-actions,
    .customer-form-actions,
    .hr-form-actions,
    .invoice-create-actions
) {
    justify-content: flex-end;
}

/* Filters */
:where(.workspace-filter-bar, .finance-filter-bar) {
    padding: 10px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-card-radius);
    background: var(--ui-surface-muted);
    box-shadow: none;
}

:where(.workspace-filter-grid, .finance-filter-main, .um-filter-grid) {
    gap: 8px;
}

:where(.workspace-filter-field input, .workspace-filter-field select, .workspace-filter-field textarea) {
    min-height: 36px;
    padding-block: 7px;
}

:where(.workspace-filter-search) {
    min-height: 38px;
    border-radius: var(--ui-card-radius);
}

:where(.workspace-filter-summary, .workspace-filter-hint, .finance-filter-meta) {
    color: var(--grey-600);
    font-size: 10.5px;
}

.ui-saved-view-controls,
.ui-table-tools-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.ui-table-tools-bar {
    margin-bottom: 8px;
}

.ui-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    padding: var(--ui-pagination-pad-y) var(--ui-pagination-pad-x);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-card-radius);
    background: var(--ui-surface-muted);
    color: var(--grey-700);
    font-size: 11px;
}

.ui-pagination__controls,
.ui-pagination__sizes {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.ui-pagination__button,
.ui-pagination__size,
.ui-pagination__page {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 9px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-card-radius);
    background: rgba(255, 255, 255, 0.88);
    color: var(--grey-800);
    text-decoration: none;
    font-weight: 750;
}

.ui-pagination__page {
    background: transparent;
}

.ui-pagination__button.is-disabled {
    opacity: 0.48;
}

.ui-pagination__size.is-active {
    border-color: var(--ui-border-strong);
    background: rgba(31, 111, 255, 0.1);
    color: var(--primary);
}

.ui-saved-view-controls {
    margin-right: auto;
}

.ui-saved-view-controls select,
.ui-saved-view-controls input,
.ui-table-tools-bar select,
.ui-table-tools-bar input {
    min-height: var(--ui-control-height-sm);
    max-width: 180px;
    font-size: 11px;
}

.ui-saved-view-controls .btn,
.ui-table-tools-bar .btn {
    min-height: var(--ui-control-height-sm);
}

.ui-selected-count {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--ui-surface-muted);
    color: var(--grey-700);
    font-size: 10px;
    font-weight: 800;
}

.ui-column-visibility-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ui-column-visibility-option {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 28px;
    padding: 0 8px;
    border: 1px solid var(--ui-border);
    border-radius: 999px;
    background: var(--ui-surface-muted);
    color: var(--grey-700);
    font-size: 10px;
    font-weight: 800;
}

.ui-column-visibility-option input {
    width: 13px;
    height: 13px;
    accent-color: var(--primary);
}

/* Tables */
:where(.table, .data-table, .admin-table, .finance-table, .documents-table) {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.main-content :where(table):not(.calendar-table):not(.ui-plain-table) {
    width: 100%;
}

.main-content :where(table):not(.calendar-table):not(.ui-plain-table) th,
.main-content :where(table):not(.calendar-table):not(.ui-plain-table) td,
:where(.table, .data-table, .admin-table, .finance-table, .documents-table) th,
:where(.table, .data-table, .admin-table, .finance-table, .documents-table) td {
    min-height: var(--ui-table-row-height);
    padding: var(--ui-table-cell-pad-y) var(--ui-table-cell-pad-x);
    border-bottom: 1px solid var(--ui-border);
    vertical-align: middle;
}

.main-content :where(table):not(.calendar-table):not(.ui-plain-table) th,
:where(.table, .data-table, .admin-table, .finance-table, .documents-table) th {
    /* Navy header (matches the sidebar / .cp-data-table, #0d1e44) is now the
       app-wide default listing-table look. Tables that must keep their own
       header (invoice/payslip documents, line-item editors) opt out with
       `.ui-plain-table`. */
    color: #ffffff;
    background: #0d1e44;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.main-content :where(table):not(.calendar-table):not(.ui-plain-table) tbody tr:hover td,
:where(.table, .data-table, .admin-table, .finance-table, .documents-table) tbody tr:hover td {
    background: rgba(13, 30, 68, 0.06);
}

.ui-table-scroll {
    overflow: auto;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-card-radius);
    background: var(--ui-surface);
}

.ui-table-scroll table {
    min-width: 760px;
}

/* ── Badges and status labels ──────────────────────────────────────────────
   ONE canonical status-badge. `:where()` keeps specificity at 0 so a real
   page-specific need can still override, and a page's existing class name can
   be routed in here (chrome + one of five semantic colors) WITHOUT touching
   its HTML. Semantic set: success · warning · danger · info · neutral.
   Domain status classes (invoice/quotation/PO/etc.) are mapped in below so the
   whole app draws payment/document status from this single definition. */
:where(
    .status-badge,
    .admin-pill,
    .company-module-badge,
    .workspace-pill,
    .settings-workspace-pill,
    .invp-count-badge,
    .invp-source-pill,
    .invp-status-badge,
    .inv-status,
    .ah-pill
) {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 22px;
    padding: 2px 8px;
    border: 1px solid rgba(31, 111, 255, 0.14);
    border-radius: 999px;
    background: rgba(31, 111, 255, 0.08);
    color: var(--blue-800);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

/* Families that keep their own chrome (square tags, uppercase, etc.) but draw
   their COLOURS from the shared semantics below: statement-status, hr-badge,
   task-status-chip, status-pill. They are intentionally NOT in the chrome list
   above so the shared border/radius don't override their page-specific shape. */

/* success — paid / received / delivered / completed / pass */
:where(
    .status-badge--success, .admin-pill--active, .is-success,
    .invp-status-badge--paid, .invp-status-badge--received, .invp-status-badge--delivered,
    .inv-status--paid,
    .statement-status--success, .hr-badge--success, .ah-pill--pass,
    .status-completed
) {
    border-color: rgba(17, 132, 91, 0.16);
    background: var(--success-bg);
    color: var(--success);
}

/* warning — partial / proforma / in-progress */
:where(
    .status-badge--warning, .admin-pill--inactive, .is-warning,
    .invp-status-badge--partial, .invp-status-badge--partially-received,
    .invp-status-badge--proforma-invoice,
    .inv-status--partial, .inv-status--proforma-invoice,
    .statement-status--warning, .hr-badge--warning, .ah-pill--warn,
    .status-tbc
) {
    border-color: rgba(197, 129, 0, 0.18);
    background: var(--warning-bg);
    color: var(--warning);
}

/* danger — cancelled / unpaid-overdue / fail */
:where(
    .status-badge--danger, .admin-pill--suspended, .is-danger,
    .invp-status-badge--cancelled,
    .statement-status--danger, .hr-badge--danger, .ah-pill--fail,
    .status-cancelled
) {
    border-color: rgba(214, 67, 82, 0.18);
    background: var(--danger-bg);
    color: var(--danger);
}

/* info — pending / issued / approved / sent / final */
:where(
    .status-badge--info, .is-info,
    .invp-status-badge--pending, .invp-status-badge--issued, .invp-status-badge--approved,
    .invp-status-badge--sent, .invp-status-badge--final-invoice,
    .inv-status--pending, .inv-status--final-invoice,
    .status-scheduled
) {
    border-color: rgba(31, 111, 255, 0.16);
    background: var(--blue-100);
    color: var(--blue-800);
}

/* neutral — draft / unpaid / waived / to-be-confirmed */
:where(
    .status-badge--neutral, .is-neutral,
    .invp-status-badge--draft, .invp-status-badge--unpaid, .invp-status-badge--waived,
    .inv-status--unpaid, .inv-status--waived,
    .statement-status--neutral, .hr-badge--neutral
) {
    border-color: rgba(148, 163, 184, 0.28);
    background: rgba(148, 163, 184, 0.16);
    color: var(--grey-700);
}

/* Dark-mode semantics (token-independent so they match the pre-existing
   dark badge palette exactly). */
html[data-theme="dark"] :where(
    .status-badge--success, .admin-pill--active, .is-success,
    .invp-status-badge--paid, .invp-status-badge--received, .invp-status-badge--delivered,
    .inv-status--paid, .statement-status--success, .hr-badge--success, .ah-pill--pass,
    .status-completed
) {
    border-color: rgba(76, 175, 80, 0.32);
    background: rgba(76, 175, 80, 0.14);
    color: #9ce2a0;
}

html[data-theme="dark"] :where(
    .status-badge--warning, .admin-pill--inactive, .is-warning,
    .invp-status-badge--partial, .invp-status-badge--partially-received,
    .invp-status-badge--proforma-invoice, .inv-status--partial, .inv-status--proforma-invoice,
    .statement-status--warning, .hr-badge--warning, .ah-pill--warn, .status-tbc
) {
    border-color: rgba(255, 193, 7, 0.32);
    background: rgba(255, 193, 7, 0.14);
    color: #ffd869;
}

html[data-theme="dark"] :where(
    .status-badge--danger, .admin-pill--suspended, .is-danger,
    .invp-status-badge--cancelled, .statement-status--danger, .hr-badge--danger,
    .ah-pill--fail, .status-cancelled
) {
    border-color: rgba(244, 67, 54, 0.34);
    background: rgba(244, 67, 54, 0.16);
    color: #ffd2cf;
}

html[data-theme="dark"] :where(
    .status-badge--info, .is-info,
    .invp-status-badge--pending, .invp-status-badge--issued, .invp-status-badge--approved,
    .invp-status-badge--sent, .invp-status-badge--final-invoice,
    .inv-status--pending, .inv-status--final-invoice,
    .status-scheduled
) {
    border-color: rgba(96, 165, 250, 0.34);
    background: rgba(59, 130, 246, 0.16);
    color: #bcd6ff;
}

html[data-theme="dark"] :where(
    .status-badge--neutral, .is-neutral,
    .invp-status-badge--draft, .invp-status-badge--unpaid, .invp-status-badge--waived,
    .inv-status--unpaid, .inv-status--waived,
    .statement-status--neutral, .hr-badge--neutral
) {
    border-color: rgba(180, 180, 180, 0.28);
    background: rgba(120, 120, 120, 0.18);
    color: #d8d8d8;
}

/* Feature/package configuration */
.ui-package-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
}

.ui-package-button {
    display: grid;
    gap: 4px;
    padding: 10px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-card-radius);
    background: var(--ui-surface-muted);
    color: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: none;
    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast);
}

.ui-package-button:hover {
    border-color: var(--ui-border-strong);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.ui-package-button.is-active,
.ui-package-button:focus-visible {
    border-color: var(--ui-border-strong);
    background: rgba(239, 246, 255, 0.98);
}

.ui-package-button:disabled {
    cursor: not-allowed;
    opacity: 0.62;
    transform: none;
}

.ui-package-button span {
    color: var(--grey-900);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.25;
}

.ui-package-button small {
    color: var(--grey-700);
    font-size: 10.5px;
    line-height: 1.35;
}

.ui-toggle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 8px;
}

.ui-toggle-stack {
    display: grid;
    gap: 12px;
}

.ui-toggle-group {
    display: grid;
    gap: 8px;
}

.ui-toggle-group__head h3 {
    margin: 0;
    color: var(--grey-900);
    font-size: 13px;
    line-height: 1.25;
}

.ui-toggle-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-card-radius);
    background: var(--ui-surface-muted);
    transition:
        border-color var(--transition-fast),
        background-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.ui-toggle-card input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 1px 0 0;
    accent-color: var(--primary);
}

.ui-toggle-card.is-enabled {
    border-color: var(--ui-border-strong);
    background: rgba(239, 246, 255, 0.94);
    box-shadow: 0 8px 20px rgba(31, 111, 255, 0.07);
}

.ui-toggle-card.is-required {
    border-style: dashed;
}

.ui-toggle-card.is-disabled {
    opacity: 0.58;
}

.ui-toggle-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.ui-toggle-card__title {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.ui-toggle-card strong {
    color: var(--grey-900);
    font-size: 13px;
    line-height: 1.25;
}

.ui-toggle-card p {
    margin: 0;
    color: var(--grey-700);
    font-size: 11px;
    line-height: 1.35;
}

.ui-toggle-note {
    color: var(--grey-600);
    font-style: italic;
}

/* Empty, loading, and feedback states */
:where(.empty-state, .ui-empty-state) {
    display: grid;
    place-items: center;
    gap: 6px;
    min-height: 96px;
    padding: 16px;
    border: 1px dashed rgba(16, 32, 56, 0.2);
    border-radius: var(--ui-card-radius);
    background: var(--ui-surface-muted);
    color: var(--grey-700);
    text-align: center;
}

/* Workspace page-strip alerts — the full-bleed status strip at the top of a
   workspace section. Chrome is identical across the company (`cp-ws-alert`) and
   admin (`ap-ws-alert`) portals, so it lives here once; each portal keeps only
   its own accent tint for the neutral/info tone (company = blue, admin = teal).
   `:where()` keeps this at zero specificity so the per-portal colour rules win. */
:where(.cp-ws-alert, .ap-ws-alert) {
    padding: 10px 20px;
    border-bottom: 1px solid transparent;
    font-size: 13px;
    font-weight: 600;
}

.ui-loading {
    position: relative;
    min-height: 80px;
}

.ui-loading::after {
    content: "";
    width: 22px;
    height: 22px;
    border: 3px solid rgba(31, 111, 255, 0.18);
    border-top-color: var(--primary);
    border-radius: 999px;
    animation: ui-spin 0.8s linear infinite;
}

@keyframes ui-spin {
    to { transform: rotate(360deg); }
}

/* ──────────────────────────────────────────────────────────────────────────
   Standalone card + pre-login auth screens
   Shared by the pre-login utility pages (password reset, email verification,
   two-factor challenge). Each of those pages previously re-created this exact
   layout with inline styles. `.ui-card` had no light-mode definition at all
   (only a dark-mode override existed), so these cards were effectively
   invisible in light mode — this restores a proper surface in both themes.
   ────────────────────────────────────────────────────────────────────────── */
.ui-card {
    padding: 20px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-card-radius);
    background: var(--ui-surface);
    box-shadow: var(--shadow-sm);
}

.ui-card--narrow {
    width: 100%;
    max-width: 420px;
}

.ui-card--center {
    text-align: center;
}

.auth-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
}

.auth-screen .ui-card {
    padding: 24px;
}

.auth-heading {
    margin: 0 0 12px;
    font-size: 20px;
}

.auth-copy {
    margin: 0 0 14px;
    color: var(--grey-600);
    font-size: 13px;
    line-height: 1.5;
}

.auth-foot {
    margin: 18px 0 0;
    text-align: center;
    font-size: 12px;
}

/* One-time-code / verification input (2FA challenge, enrolment) */
.otp-input {
    width: 100%;
    text-align: center;
    font-size: 18px;
    letter-spacing: 2px;
}

/* ── Two-factor (TOTP) enrolment UI ──
   Shared by admin/two_factor.php and company/two_factor.php, which previously
   diverged: admin used inline styles, company referenced `.cpf-*` classes it
   never loaded (so its setup form was silently unstyled). Both now use these. */
.totp-caption {
    margin: 0 0 4px;
    color: var(--grey-600);
    font-size: 12px;
}

.totp-secret {
    margin: 0 0 14px;
    font-family: monospace;
    font-size: 16px;
    letter-spacing: 2px;
}

.totp-otpauth {
    margin: 0 0 16px;
}

.totp-otpauth summary {
    cursor: pointer;
    font-size: 12px;
    color: var(--primary);
}

.totp-otpauth p {
    color: var(--grey-600);
    font-family: monospace;
    font-size: 11px;
    word-break: break-all;
}

.totp-codes {
    max-width: 360px;
}

.totp-codes td {
    font-family: monospace;
    letter-spacing: 1px;
}

/* Inline code-entry form: label+input+submit on one row (wraps on narrow) */
.otp-entry-form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    margin: 0 0 4px;
}

.otp-entry-form .form-block {
    margin: 0;
}

/* `input.` qualifier is required: the base `input[type="text"]{width:100%}`
   rule carries an attribute selector (specificity 0,1,1) that would otherwise
   outrank a plain `.otp-code-input` class (0,1,0) and force full width. */
input.otp-code-input {
    width: 120px;
    max-width: 100%;
}

/* ── Modal / dialog overlay ────────────────────────────────────────────────
   Shared foundation for centered overlay dialogs. There was no shared modal
   primitive before — each dialog re-declared the same backdrop tint and panel
   elevation. The existing modals (quick-customer entry, universal search) alias
   in for that common DNA while keeping their own size/surface/layout; new modals
   should use the `.ui-modal*` classes directly. `:where()` keeps the shared
   rules at zero specificity so each modal's own declarations win. */
.ui-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 20px;
}

.ui-modal[hidden] {
    display: none !important;
}

:where(.ui-modal__backdrop, .quick-customer-modal__backdrop, .universal-search__backdrop) {
    inset: 0;
    background: rgba(3, 7, 18, 0.52);
}

:where(.ui-modal__panel, .quick-customer-modal__panel, .universal-search__dialog) {
    box-shadow: 0 8px 32px rgba(3, 7, 18, 0.14);
}

.ui-modal__panel {
    position: relative;
    overflow: auto;
    padding: 18px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-card-radius);
    background: var(--ui-surface);
}

/* Keyboard and accessibility */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media (max-width: 860px) {
    :root {
        --ui-control-height: 42px;
    }

    :where(.page-toolbar, .workspace-actions, .admin-inline-actions, .admin-form-actions, .company-profile-footer-actions) {
        align-items: stretch;
    }

    :where(.page-toolbar .btn, .workspace-actions .btn, .admin-form-actions .btn, .company-profile-footer-actions .btn) {
        width: 100%;
    }

    .ui-saved-view-controls,
    .ui-table-tools-bar {
        width: 100%;
        align-items: stretch;
    }

    .ui-saved-view-controls select,
    .ui-saved-view-controls input,
    .ui-saved-view-controls .btn,
    .ui-table-tools-bar select,
    .ui-table-tools-bar input,
    .ui-table-tools-bar .btn {
        width: 100%;
        max-width: none;
    }
}

html[data-theme="dark"] {
    --ui-surface: rgba(17, 24, 39, 0.92);
    --ui-surface-muted: rgba(15, 23, 42, 0.78);
    --ui-border: rgba(148, 163, 184, 0.18);
    --ui-border-strong: rgba(96, 165, 250, 0.34);
    --ui-muted: var(--grey-500);
}

html[data-theme="dark"] :where(
    .workspace-section,
    .admin-panel,
    .admin-form-card,
    .settings-card,
    .customer-form-panel,
    .bank-account-card,
    .hr-suite-card,
    .invp-panel,
    .ui-table-scroll
) {
    background: var(--ui-surface);
    border-color: var(--ui-border);
}

html[data-theme="dark"] .main-content :where(table):not(.calendar-table):not(.ui-plain-table) th,
html[data-theme="dark"] :where(.table, .data-table, .admin-table, .finance-table, .documents-table) th {
    /* Dark counterpart of the navy default header: the same graphite band as
       .cp-data-table (see theme-dark-overrides.css) so every listing table's
       header matches in dark mode too. Text kept at 0.72 white for WCAG AA. */
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.72);
}

html[data-theme="dark"] .ui-package-button,
html[data-theme="dark"] .ui-toggle-card {
    background: var(--ui-surface-muted);
    border-color: var(--ui-border);
}

html[data-theme="dark"] .ui-package-button.is-active,
html[data-theme="dark"] .ui-toggle-card.is-enabled {
    background: rgba(30, 64, 175, 0.18);
    border-color: var(--ui-border-strong);
    box-shadow: none;
}