/* forms.css — DxPopup/popup form styles + the shared .sos-* form-validation contract, moved verbatim from app.css. Global on purpose: DxPopup teleports its content to document.body, so component-scoped CSS never reaches it. */

/* Scheduler job add/edit popup (WorkTaskScheduler, PopupScaffold) — the status banner
   above the form fields is job-specific and must live here (DxPopup teleports to body).
   Colors ride the semantic --sos-status-* tokens (theme + dark-mode aware). */
.job-edit-popup .form-status-bar {
    padding: 0.4rem 0.75rem;
    border-radius: var(--sos-radius-md);
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    background: var(--status-surface, var(--sos-status-info-surface));
    color: var(--status-content, var(--sos-status-info-content));
    border: 1px solid var(--status-content, var(--sos-status-info-content));
}

.job-edit-popup .status-on-hold,
.job-edit-popup .status-needs-review {
    --status-surface: var(--sos-status-warning-surface);
    --status-content: var(--sos-status-warning-content);
}

.job-edit-popup .status-cancelled {
    --status-surface: var(--sos-status-danger-surface);
    --status-content: var(--sos-status-danger-content);
}

.job-edit-popup .status-completed {
    --status-surface: var(--sos-status-success-surface);
    --status-content: var(--sos-status-success-content);
}

/* ── Shared form-validation contract ─────────────────────────────────────────
   One presentation for validation across every popup form. Global (not scoped)
   because DxPopup teleports content to document.body.
   .sos-form-error  — block-level error strip (form-wide message)
   .sos-field-error — inline message under the offending field
   .sos-required    — label modifier that appends a required asterisk */
.sos-form-error {
    color: var(--sos-status-danger-content);
    background: var(--sos-status-danger-surface);
    border-radius: var(--sos-radius-md, 0.375rem);
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
}

.sos-field-error {
    color: var(--sos-status-danger-content);
    font-size: 0.8rem;
    margin-top: 0.2rem;
}

.sos-required::after {
    content: " *";
    color: var(--sos-status-danger-content);
}

/* Customer add/edit popup (PopupScaffold + .sos-form vocabulary) — the card-style
   type selector is customer-specific and must live here (DxPopup teleports to body;
   these rules previously sat dead in the page's scoped CSS and never applied). */
.customer-crud-popup .type-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.customer-crud-popup .type-opt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.25rem 1rem;
    border: 2px solid var(--dxds-color-border-neutral-default-rest);
    border-radius: 0.5rem;
    background: var(--dxds-color-surface-neutral-default-rest);
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}

    .customer-crud-popup .type-opt:hover {
        border-color: var(--dxds-color-border-primary-default-rest);
        background: var(--dxds-color-surface-primary-default-rest);
    }

.customer-crud-popup .type-opt-selected {
    border-color: var(--dxds-color-border-primary-default-rest) !important;
    background: var(--dxds-color-surface-primary-default-rest) !important;
}

    .customer-crud-popup .type-opt-selected .type-opt-label {
        color: var(--dxds-color-content-neutral-default-static-dark-rest) !important;
    }

.customer-crud-popup .type-opt-icon {
    width: 1.75rem;
    height: 1.75rem;
    line-height: 1;
    opacity: 0.85;
}

.customer-crud-popup .type-opt-selected .type-opt-icon {
    opacity: 1;
    background-color: var(--dxds-color-content-neutral-default-static-dark-rest);
}

.customer-crud-popup .type-opt-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dxds-color-content-neutral-default-rest);
}

/* Employee add/edit popup (PopupScaffold + .sos-form vocabulary) — the two pieces
   below are employee-specific and must stay global (DxPopup teleports to body). */
.employee-crud-popup .employee-form-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2.5rem 1rem;
    color: var(--dxds-color-content-secondary-default-rest);
}

/* Static role-description legend under the Roles tag-box (no DB column). */
.employee-crud-popup .employee-role-legend {
    display: flex;
    flex-direction: column;
    gap: var(--sos-space-xs);
    margin-top: var(--sos-space-md);
    padding-top: var(--sos-space-md);
    border-top: 1px solid var(--dxds-color-border-neutral-default-rest);
}

.employee-crud-popup .employee-role-legend-item {
    display: grid;
    grid-template-columns: minmax(7.5rem, auto) 1fr;
    column-gap: var(--sos-space-md);
    align-items: baseline;
}

.employee-crud-popup .employee-role-legend-name {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--dxds-color-content-primary-default-rest);
}

.employee-crud-popup .employee-role-legend-desc {
    font-size: 0.8rem;
    color: var(--dxds-color-content-secondary-default-rest);
}

/* (The Add Job popup block that lived here died with the PopupScaffold conversion — Jobs now uses the .sos-form vocabulary below.) */

/* ═══════════════════════════ Subscription change / pay popup ═══════════════════════════
   PopupScaffold + the .sos-form vocabulary; only the checkout-specific pieces remain
   (DxPopup teleports its content to document.body, so they must live here). */
.change-plan-popup .cpp-amount {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--dxds-color-content-primary-default-rest);
}

.change-plan-popup .cpp-amount span {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--dxds-color-content-secondary-default-rest);
}

.change-plan-popup .cpp-note {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--dxds-color-content-secondary-default-rest);
}

.change-plan-popup .cpp-note code {
    padding: 0.05rem 0.3rem;
    border-radius: 4px;
    background: var(--dxds-color-surface-neutral-subdued-rest);
    font-size: 0.72rem;
}

/* ═══════════════════════════ Back-office subscription manage popup ═══════════════════════════
   A management console (not an edit form): raw DxPopup + sos-form-popup marker; the
   sap-* pieces below are its own vocabulary and teleport to <body> with it. */
.subadmin-popup .sap-status {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: var(--dxds-color-content-secondary-default-rest);
    margin-bottom: 1rem;
}

.subadmin-popup .sap-section {
    border: 1px solid var(--dxds-color-border-neutral-default-rest);
    border-radius: 8px;
    padding: 0.9rem 1rem;
    margin-bottom: 1rem;
}

.subadmin-popup .sap-section-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--dxds-color-content-secondary-default-rest);
    margin-bottom: 0.75rem;
}

.subadmin-popup .sap-assign {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.subadmin-popup .sap-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.subadmin-popup .sap-field > label {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--dxds-color-content-secondary-default-rest);
}

.subadmin-popup .sap-field-check {
    justify-content: center;
    padding-bottom: 0.4rem;
}

.subadmin-popup .sap-full {
    width: 100%;
}

.subadmin-popup .sap-cancel {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--dxds-color-border-neutral-default-rest);
}

.subadmin-popup .sap-cancel-prompt {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--dxds-color-content-primary-default-rest);
}

.subadmin-popup .sap-empty {
    margin: 0;
    font-size: 0.85rem;
    color: var(--dxds-color-content-secondary-default-rest);
}

.subadmin-popup .sap-invoices {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.subadmin-popup .sap-invoices th {
    text-align: left;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--dxds-color-content-secondary-default-rest);
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid var(--dxds-color-border-neutral-default-rest);
}

.subadmin-popup .sap-invoices td {
    padding: 0.45rem 0.5rem;
    border-bottom: 1px solid var(--dxds-color-border-neutral-default-rest);
    color: var(--dxds-color-content-primary-default-rest);
}

.subadmin-popup .sap-invoices .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}


/* =========================================================================
   GENERIC FORM VOCABULARY (redesign Phase 4) — the standard classes every
   popup/inline form migrates to as its page converts to the scaffold layer.
   Replaces the per-popup class families (.popup-form, .employee-field-grid,
   …) one wave at a time; the legacy blocks above die with their pages.
   ========================================================================= */

/* Popup root marker. PopupScaffold applies "sos-form-popup" plus a per-popup class
   and passes Width="min(Npx, 92vw)" itself (min() avoids the fixed-width overflow
   trap documented at the top of this file), so no width lives here — this class
   handles centering on desktop and the full-screen takeover below on phones. */
.sos-form-popup {
    min-width: 0 !important;
    justify-self: center !important;
}

/* Column-flow form body */
.sos-form {
    display: flex;
    flex-direction: column;
    gap: var(--sos-space-lg);
    padding: var(--sos-space-2xs) 0;
}

/* Two-up field row; collapses to one column on compact phones (<sm) */
.sos-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sos-space-lg);
}

/* Three-up field row (qty / price / discount on line-item forms) */
.sos-form-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sos-space-lg);
}

@media (max-width: 639.98px) {
    .sos-form-grid,
    .sos-form-grid-3 {
        grid-template-columns: 1fr;
    }
}

.sos-field {
    display: flex;
    flex-direction: column;
    gap: var(--sos-space-xs);
    min-width: 0;
}

.sos-field-label {
    font-size: var(--sos-text-sm);
    font-weight: 600;
    color: var(--sos-content-secondary);
}

/* Small explanatory line under a field's editor */
.sos-field-hint {
    font-size: 0.72rem;
    font-style: italic;
    color: var(--sos-content-tertiary);
}

/* From → to editor pair inside one field (e.g. a date range) */
.sos-field-range {
    display: flex;
    align-items: center;
    gap: var(--sos-space-xs);
}

.sos-field-range > * {
    min-width: 0;
}

.sos-field-range-sep {
    color: var(--sos-content-tertiary);
    flex: 0 0 auto;
}

/* Plain explanatory line inside a form (e.g. "Set status for 3 selected quotes:") */
.sos-form-note {
    margin: 0;
    font-size: var(--sos-text-sm);
    color: var(--sos-content-secondary);
}

/* Right-aligned computed preview line (e.g. "Line Total: $123.45") */
.sos-form-total {
    font-size: var(--sos-text-sm);
    color: var(--sos-content-secondary);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.sos-form-section {
    display: flex;
    flex-direction: column;
    gap: var(--sos-space-md);
    padding-top: var(--sos-space-md);
    border-top: 1px solid var(--sos-border-subtle);
}

/* First section needs no divider — the popup header already separates it. */
.sos-form > .sos-form-section:first-child {
    border-top: none;
    padding-top: 0;
}

.sos-form-section-title {
    font-size: var(--sos-text-sm);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sos-content-tertiary);
}

.sos-popup-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--sos-space-sm);
    width: 100%;
}

/* Action row for INLINE (non-popup) forms — popup buttons belong in the
   PopupScaffold footer instead. */
.sos-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--sos-space-sm);
    margin-top: var(--sos-space-xs);
}

.sos-form-actions-start {
    justify-content: flex-start;
}

/* Optional left-aligned slot in the footer (e.g. Delete + secondary actions) */
.sos-popup-footer-start {
    display: flex;
    align-items: center;
    gap: var(--sos-space-sm);
    margin-right: auto;
}

/* =========================================================================
   PHONE FULL-SCREEN TAKEOVER (<md). Any popup carrying the sos-form-popup
   marker becomes a full-screen surface — long forms beat cramped windows.
   ⚠ DX-INTERNAL SELECTORS: .dxbl-modal / .dxbl-modal-root / .dxbl-popup-*
   are DevExpress internals pinned against v26.1.3 — RE-VERIFY AFTER EVERY
   DEVEXPRESS UPGRADE (see TESTING-CHECKLIST.md).
   ========================================================================= */
@media (max-width: 767.98px) {
    .dxbl-modal > .dxbl-modal-root > .dxbl-popup.sos-form-popup,
    .dxbl-popup.sos-form-popup {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        justify-self: stretch !important;
        align-self: stretch !important;
    }

    /* Body scrolls between the pinned header and footer. */
    .dxbl-popup.sos-form-popup .dxbl-popup-body {
        flex: 1 1 auto;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .dxbl-popup.sos-form-popup .dxbl-popup-header {
        padding-top: calc(0.5rem + var(--sos-safe-top));
    }

    .dxbl-popup.sos-form-popup .dxbl-popup-footer {
        padding-bottom: calc(0.75rem + var(--sos-safe-bottom));
    }
}