/*
 * DATACORB SOLUTIONS — Form Dark-Mode & Service-Order Width Hotfix
 * Presentation only. No form fields, actions, JavaScript, PHP processing,
 * uploads, email logic, CSRF, Turnstile or security behavior is changed.
 */

/* Service Order: increase the current 920px shell by 50% on desktop. */
@media (min-width: 1100px) {
    body:has(#orderForm) .page-content > .card[role="main"] {
        width: min(96vw, 1380px) !important;
        max-width: 1380px !important;
        margin-inline: auto !important;
    }
}

@media (max-width: 1099px) {
    body:has(#orderForm) .page-content > .card[role="main"] {
        width: min(100%, 920px) !important;
        max-width: 100% !important;
    }
}

/* Shared dark shells for the three affected forms. */
html[data-theme="dark"] body:has(#orderForm) .page-content > .card[role="main"],
html[data-theme="dark"] body:has(#pickPlanForm) .page-content > .container > .card,
html[data-theme="dark"] .hr-form-page .hr-form-container {
    color: var(--dt-text, #d7dde6) !important;
    background: var(--dt-surface-solid, #0f131a) !important;
    border-color: var(--dt-border, rgba(215, 225, 238, .13)) !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .36) !important;
}

/* Headings and supporting text. */
html[data-theme="dark"] body:has(#orderForm) .page-content h1,
html[data-theme="dark"] body:has(#orderForm) .page-content h2,
html[data-theme="dark"] body:has(#orderForm) .page-content h3,
html[data-theme="dark"] body:has(#pickPlanForm) .page-content h1,
html[data-theme="dark"] body:has(#pickPlanForm) .page-content h2,
html[data-theme="dark"] body:has(#pickPlanForm) .page-content h3,
html[data-theme="dark"] .hr-form-page h1,
html[data-theme="dark"] .hr-form-page h2,
html[data-theme="dark"] .hr-form-page h3 {
    color: var(--dt-ink, #f5f7fb) !important;
    opacity: 1 !important;
}

html[data-theme="dark"] body:has(#orderForm) .small,
html[data-theme="dark"] body:has(#orderForm) .small-muted,
html[data-theme="dark"] body:has(#orderForm) .deliveryCell,
html[data-theme="dark"] body:has(#pickPlanForm) .small-muted,
html[data-theme="dark"] body:has(#pickPlanForm) .sub-features,
html[data-theme="dark"] body:has(#pickPlanForm) .totals,
html[data-theme="dark"] .hr-form-page .hr-subtitle {
    color: var(--dt-muted, #97a2b0) !important;
}

/* Plan Picker heading and HR subtitle had fixed light styling. */
html[data-theme="dark"] body:has(#pickPlanForm) .page-content > .container > .card > h1,
html[data-theme="dark"] .hr-form-page .hr-subtitle {
    color: var(--dt-ink, #f5f7fb) !important;
    background: var(--dt-bg-soft, #0b0f15) !important;
    border-color: var(--dt-border-strong, rgba(215, 225, 238, .28)) !important;
}

/* Inputs and upload controls. */
html[data-theme="dark"] #orderForm input,
html[data-theme="dark"] #orderForm select,
html[data-theme="dark"] #orderForm textarea,
html[data-theme="dark"] #pickPlanForm input,
html[data-theme="dark"] #pickPlanForm select,
html[data-theme="dark"] #pickPlanForm textarea,
html[data-theme="dark"] #hrRecruitForm input,
html[data-theme="dark"] #hrRecruitForm select,
html[data-theme="dark"] #hrRecruitForm textarea {
    color: var(--dt-text, #d7dde6) !important;
    background: var(--dt-surface-elevated, #141a23) !important;
    border-color: var(--dt-border, rgba(215, 225, 238, .13)) !important;
}

html[data-theme="dark"] #orderForm input::placeholder,
html[data-theme="dark"] #orderForm textarea::placeholder,
html[data-theme="dark"] #pickPlanForm input::placeholder,
html[data-theme="dark"] #pickPlanForm textarea::placeholder,
html[data-theme="dark"] #hrRecruitForm input::placeholder,
html[data-theme="dark"] #hrRecruitForm textarea::placeholder {
    color: var(--dt-muted, #97a2b0) !important;
}

html[data-theme="dark"] #orderForm input[type="file"]::file-selector-button,
html[data-theme="dark"] #pickPlanForm input[type="file"]::file-selector-button,
html[data-theme="dark"] #hrRecruitForm input[type="file"]::file-selector-button {
    color: var(--dt-ink, #f5f7fb) !important;
    background: var(--dt-bg-soft, #0b0f15) !important;
    border: 1px solid var(--dt-border-strong, rgba(215, 225, 238, .28)) !important;
    border-radius: 9px !important;
}

/* Service Order and Plan Picker tables. */
html[data-theme="dark"] #orderForm .table-wrap,
html[data-theme="dark"] #pickPlanForm .table-wrap,
html[data-theme="dark"] #orderForm #previewContent {
    color: var(--dt-text, #d7dde6) !important;
    background: var(--dt-surface-elevated, #141a23) !important;
    border-color: var(--dt-border-strong, rgba(215, 225, 238, .28)) !important;
}

html[data-theme="dark"] #orderForm .table th,
html[data-theme="dark"] #pickPlanForm .order-table thead th,
html[data-theme="dark"] #orderForm #previewContent th {
    color: #ffffff !important;
    background: #05070b !important;
    border-color: var(--dt-border-strong, rgba(215, 225, 238, .28)) !important;
}

html[data-theme="dark"] #orderForm .table td,
html[data-theme="dark"] #pickPlanForm .order-table td,
html[data-theme="dark"] #pickPlanForm .order-table tbody th,
html[data-theme="dark"] #orderForm #previewContent td {
    color: var(--dt-text, #d7dde6) !important;
    background: var(--dt-surface-solid, #0f131a) !important;
    border-color: var(--dt-border, rgba(215, 225, 238, .13)) !important;
}

/* Informational panels and drag-and-drop area. */
html[data-theme="dark"] #orderForm .important-points,
html[data-theme="dark"] #pickPlanForm .important-points,
html[data-theme="dark"] #pickPlanForm .drop-area {
    color: var(--dt-text, #d7dde6) !important;
    background: #101926 !important;
    border-color: var(--dt-border-strong, rgba(215, 225, 238, .28)) !important;
}

html[data-theme="dark"] #orderForm .important-points h4,
html[data-theme="dark"] #orderForm .important-points li,
html[data-theme="dark"] #pickPlanForm .important-points h4,
html[data-theme="dark"] #pickPlanForm .important-points li,
html[data-theme="dark"] #pickPlanForm .drop-area .small-muted {
    color: var(--dt-text, #d7dde6) !important;
}

html[data-theme="dark"] #pickPlanForm .drop-area.dragover {
    color: var(--dt-ink, #f5f7fb) !important;
    background: #0b1727 !important;
    border-color: var(--dt-accent, #78b9ff) !important;
}

/* Secondary and upload/form buttons. */
html[data-theme="dark"] #orderForm .btn.secondary,
html[data-theme="dark"] #pickPlanForm .add-row,
html[data-theme="dark"] #pickPlanForm .remove-row,
html[data-theme="dark"] #hrRecruitForm .hr-submit-btn {
    color: var(--dt-ink, #f5f7fb) !important;
    background: var(--dt-surface-elevated, #141a23) !important;
    border-color: var(--dt-border-strong, rgba(215, 225, 238, .28)) !important;
}

html[data-theme="dark"] #orderForm .btn.secondary:hover,
html[data-theme="dark"] #orderForm .btn.secondary:focus-visible,
html[data-theme="dark"] #pickPlanForm .add-row:hover,
html[data-theme="dark"] #pickPlanForm .add-row:focus-visible,
html[data-theme="dark"] #hrRecruitForm .hr-submit-btn:hover,
html[data-theme="dark"] #hrRecruitForm .hr-submit-btn:focus-visible {
    color: #07101b !important;
    background: var(--dt-accent, #78b9ff) !important;
    border-color: var(--dt-accent, #78b9ff) !important;
}

html[data-theme="dark"] #pickPlanForm .remove-row:hover,
html[data-theme="dark"] #pickPlanForm .remove-row:focus-visible {
    color: #ffffff !important;
    background: #b42318 !important;
    border-color: #b42318 !important;
}

/* Keep primary submit actions prominent in dark mode. */
html[data-theme="dark"] #orderForm .btn:not(.secondary),
html[data-theme="dark"] #pickPlanForm .btn-submit {
    color: #07101b !important;
    background: var(--dt-accent, #78b9ff) !important;
    border-color: var(--dt-accent, #78b9ff) !important;
}

html[data-theme="dark"] #orderForm .btn:not(.secondary):hover,
html[data-theme="dark"] #orderForm .btn:not(.secondary):focus-visible,
html[data-theme="dark"] #pickPlanForm .btn-submit:hover,
html[data-theme="dark"] #pickPlanForm .btn-submit:focus-visible {
    color: #07101b !important;
    background: var(--dt-accent-bright, #a8d2ff) !important;
    border-color: var(--dt-accent-bright, #a8d2ff) !important;
}

/* Responsive safeguards. */
@media (max-width: 900px) {
    body:has(#orderForm) .page-content > .card[role="main"] {
        padding-inline: clamp(18px, 4vw, 28px) !important;
    }

    html[data-theme="dark"] #orderForm .table-wrap,
    html[data-theme="dark"] #pickPlanForm .table-wrap {
        scrollbar-color: var(--dt-accent, #78b9ff) var(--dt-bg-soft, #0b0f15);
    }
}