/*
 * WebFormafy application theme contract.
 * Loaded after page styles so shared surfaces and controls always resolve to
 * one light/dark palette while pages retain their own layout and branding.
 */
:root {
    color-scheme: light;
    --app-primary: #0369a1;
    --app-primary-strong: #075985;
    --app-accent: #0e7490;
    --app-teal: #0f766e;
    --app-page: #f0f9ff;
    --app-page-deep: #e0f2fe;
    --app-surface: #ffffff;
    --app-surface-muted: #f8fafc;
    --app-surface-raised: #ffffff;
    --app-text: #0f172a;
    --app-text-muted: #64748b;
    --app-border: #cbd5e1;
    --app-border-soft: #e2e8f0;
    --app-focus: rgba(8, 145, 229, 0.25);
    --app-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);

    /* Aliases consumed by existing page styles. */
    --primary: var(--app-primary);
    --primary-blue: var(--app-primary);
    --dark-blue: var(--app-primary-strong);
    --accent: var(--app-accent);
    --accent-cyan: var(--app-accent);
    --accent-teal: var(--app-teal);
    --background: var(--app-page);
    --card-bg: var(--app-surface);
    /* White is a foreground color. Surfaces must use --app-surface. */
    --white: #ffffff;
    --sidebar-bg: var(--app-surface-muted);
    --light-gray: var(--app-surface-muted);
    --text-primary: var(--app-text);
    --text-dark: var(--app-text);
    --text-medium: #475569;
    --text-muted: var(--app-text-muted);
    --medium-gray: var(--app-text-muted);
    --border-color: var(--app-border-soft);

    /* Bootstrap vocabulary consumed by older signed-in pages. */
    --bs-body-bg: var(--app-surface);
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-body-color: var(--app-text);
    --bs-body-color-rgb: 15, 23, 42;
    --bs-secondary-color: var(--app-text-muted);
    --bs-secondary-bg: var(--app-surface-muted);
    --bs-tertiary-bg: var(--app-surface-muted);
    --bs-emphasis-color: var(--app-text);
    --bs-border-color: var(--app-border-soft);
}

html.theme-dark {
    color-scheme: dark;
    --app-primary: #38bdf8;
    --app-primary-strong: #0ea5e9;
    --app-accent: #22d3ee;
    --app-teal: #2dd4bf;
    --app-page: #020617;
    --app-page-deep: #000000;
    --app-surface: #0f172a;
    --app-surface-muted: #111827;
    --app-surface-raised: #1e293b;
    --app-text: #e2e8f0;
    --app-text-muted: #94a3b8;
    --app-border: #475569;
    --app-border-soft: #1e293b;
    --app-focus: rgba(56, 189, 248, 0.28);
    --app-shadow: 0 16px 34px rgba(0, 0, 0, 0.3);
    --text-medium: #cbd5e1;
    --bs-body-bg: var(--app-surface);
    --bs-body-bg-rgb: 15, 23, 42;
    --bs-body-color: var(--app-text);
    --bs-body-color-rgb: 226, 232, 240;
    --bs-secondary-color: var(--app-text-muted);
    --bs-secondary-bg: var(--app-surface-muted);
    --bs-tertiary-bg: var(--app-surface-muted);
    --bs-emphasis-color: var(--app-text);
    --bs-border-color: var(--app-border-soft);
}

html,
body {
    background-color: var(--app-page);
    color: var(--app-text);
}

html.theme-dark body {
    background: radial-gradient(circle at top, #0f172a 0%, var(--app-page) 48%, var(--app-page-deep) 100%);
    color: var(--app-text);
}

/* Shared Bootstrap vocabulary across all layout families. */
html.theme-dark .card,
html.theme-dark .card-body,
html.theme-dark .card-header,
html.theme-dark .card-footer,
html.theme-dark .modal-content,
html.theme-dark .modal-header,
html.theme-dark .modal-body,
html.theme-dark .modal-footer,
html.theme-dark .list-group-item,
html.theme-dark .accordion-item,
html.theme-dark .accordion-button,
html.theme-dark .offcanvas,
html.theme-dark .toast,
html.theme-dark .popover {
    background-color: var(--app-surface) !important;
    border-color: var(--app-border-soft) !important;
    color: var(--app-text) !important;
}

html.theme-dark .card-header,
html.theme-dark .card-footer,
html.theme-dark .accordion-button:not(.collapsed),
html.theme-dark .table-light,
html.theme-dark thead.table-light,
html.theme-dark .bg-light,
html.theme-dark .bg-white {
    background-color: var(--app-surface-muted) !important;
    color: var(--app-text) !important;
}

html.theme-dark .text-dark,
html.theme-dark .text-body,
html.theme-dark h1,
html.theme-dark h2,
html.theme-dark h3,
html.theme-dark h4,
html.theme-dark h5,
html.theme-dark h6,
html.theme-dark label,
html.theme-dark legend,
html.theme-dark summary {
    color: var(--app-text) !important;
}

html.theme-dark .text-muted,
html.theme-dark .form-text,
html.theme-dark .help-text,
html.theme-dark small.text-muted {
    color: var(--app-text-muted) !important;
}

html.theme-dark .form-control,
html.theme-dark .form-select,
html.theme-dark .form-check-input,
html.theme-dark .input-group-text,
html.theme-dark textarea,
html.theme-dark input:not([type="button"]):not([type="submit"]):not([type="reset"]),
html.theme-dark select {
    background-color: var(--app-surface-raised) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

html.theme-dark .form-control::placeholder,
html.theme-dark textarea::placeholder,
html.theme-dark input::placeholder {
    color: var(--app-text-muted) !important;
    opacity: 0.9;
}

html.theme-dark .form-control:focus,
html.theme-dark .form-select:focus,
html.theme-dark .form-check-input:focus,
html.theme-dark textarea:focus,
html.theme-dark input:focus,
html.theme-dark select:focus {
    border-color: var(--app-primary) !important;
    box-shadow: 0 0 0 0.25rem var(--app-focus) !important;
}

html.theme-dark .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--app-text);
    --bs-table-border-color: var(--app-border-soft);
    --bs-table-striped-bg: rgba(148, 163, 184, 0.06);
    --bs-table-hover-bg: rgba(56, 189, 248, 0.08);
    color: var(--app-text);
}

html.theme-dark .dropdown-menu:not(.main-navbar .dropdown-menu) {
    background-color: var(--app-surface-raised);
    border-color: var(--app-border);
    color: var(--app-text);
}

html.theme-dark .dropdown-menu:not(.main-navbar .dropdown-menu) .dropdown-item {
    color: var(--app-text);
}

html.theme-dark .dropdown-menu:not(.main-navbar .dropdown-menu) .dropdown-item:hover,
html.theme-dark .dropdown-menu:not(.main-navbar .dropdown-menu) .dropdown-item:focus {
    background-color: rgba(56, 189, 248, 0.12);
}

html.theme-dark .btn-light {
    background-color: var(--app-surface-raised);
    border-color: var(--app-border);
    color: var(--app-text);
}

html.theme-dark .btn-primary,
html.theme-dark .btn-primary:hover,
html.theme-dark .btn-primary:focus-visible {
    color: #ffffff !important;
}

html.theme-dark .analytics-hero {
    color: #ffffff !important;
    background: linear-gradient(135deg, #0c4a6e 0%, #075985 52%, #115e59 100%) !important;
}

html.theme-dark .analytics-hero h1,
html.theme-dark .analytics-hero .lead,
html.theme-dark .analytics-hero i {
    color: #ffffff !important;
}

html.theme-dark .btn-outline-secondary {
    border-color: #64748b;
    color: #cbd5e1;
}

html.theme-dark .alert-primary,
html.theme-dark .alert-info {
    background-color: rgba(8, 145, 229, 0.14);
    border-color: rgba(56, 189, 248, 0.32);
    color: #bae6fd;
}

html.theme-dark .alert-success {
    background-color: rgba(13, 148, 136, 0.15);
    border-color: rgba(45, 212, 191, 0.32);
    color: #99f6e4;
}

html.theme-dark .alert-warning {
    background-color: rgba(217, 119, 6, 0.16);
    border-color: rgba(251, 191, 36, 0.34);
    color: #fde68a;
}

html.theme-dark .alert-danger {
    background-color: rgba(220, 38, 38, 0.16);
    border-color: rgba(248, 113, 113, 0.34);
    color: #fecaca;
}

/* Page surfaces that previously hard-coded a light canvas. */
html.theme-dark .copilot-panel,
html.theme-dark .smart-intake-intro,
html.theme-dark .smart-intake-disclosure,
html.theme-dark .optional-business-context,
html.theme-dark .recommendation-card,
html.theme-dark .summary-grid article,
html.theme-dark .configuration-grid,
html.theme-dark .draft-editor,
html.theme-dark .draft-field-editor__row,
html.theme-dark .apply-review,
html.theme-dark .apply-review__confirmation,
html.theme-dark .pilot-feedback,
html.theme-dark .review-public-card,
html.theme-dark .review-display-widget,
html.theme-dark .confirmation-card,
html.theme-dark .paypal-return-panel {
    background: var(--app-surface) !important;
    border-color: var(--app-border-soft) !important;
    color: var(--app-text) !important;
}

html.theme-dark .panel-heading p,
html.theme-dark .smart-intake-intro span,
html.theme-dark .optional-business-context p,
html.theme-dark .copilot-empty,
html.theme-dark .recommendation-card span,
html.theme-dark .summary-grid span,
html.theme-dark .summary-grid p,
html.theme-dark .configuration-grid dd,
html.theme-dark .review-notice,
html.theme-dark .draft-editor > p,
html.theme-dark .apply-review > p,
html.theme-dark .pilot-feedback p,
html.theme-dark .pilot-feedback__status {
    color: var(--app-text-muted) !important;
}

html.theme-dark .copilot-empty h3,
html.theme-dark .draft-editor summary {
    color: var(--app-text) !important;
}

html.theme-dark .skygrid-copilot {
    --sg-ink: var(--app-text);
    --sg-soft: var(--app-surface-muted);
    --sg-line: var(--app-border-soft);
    color: var(--app-text) !important;
}

html.theme-dark .warning-block {
    color: #fde68a;
    background: rgba(217, 119, 6, 0.16);
}

[data-theme-toggle] {
    align-items: center;
    justify-content: center;
}

.app-theme-toggle--floating {
    position: fixed;
    z-index: 1090;
    top: max(0.75rem, env(safe-area-inset-top));
    right: max(0.75rem, env(safe-area-inset-right));
    display: inline-flex;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    color: var(--app-text);
    background: color-mix(in srgb, var(--app-surface) 92%, transparent);
    border: 1px solid var(--app-border);
    border-radius: 0.75rem;
    box-shadow: var(--app-shadow);
    backdrop-filter: blur(12px);
}

.app-theme-toggle--floating:hover,
.app-theme-toggle--floating:focus-visible {
    color: var(--app-primary);
    border-color: var(--app-primary);
}

[data-theme-toggle] .theme-icon-sun,
html.theme-dark [data-theme-toggle] .theme-icon-moon {
    display: none !important;
}

html.theme-dark [data-theme-toggle] .theme-icon-sun {
    display: inline-block !important;
}

@media print {
    .app-theme-toggle--floating {
        display: none !important;
    }

    html,
    html.theme-dark,
    html.theme-dark body {
        color-scheme: light;
        background: #ffffff !important;
        color: #000000 !important;
    }
}