/* Product dark palette — loaded after styles.css. Does not change JS or markup. */

/* Re-assert tokens on the logged-in shell so leftover light values
   (cached CSS or hardcoded surfaces) cannot wash out text. */
.dashboard-layout,
#view-generating {
    color-scheme: dark;
    --bg: #050507;
    --bg-section: #050507;
    --bg-card: #14141a;
    --bg-card-hover: #1a1a22;
    --bg-secondary: #0c0c10;
    --surface: #14141a;
    --surface-alt: #0c0c10;
    --text: #f3f3f5;
    --text-muted: rgba(243, 243, 245, 0.72);
    --text-primary: #f3f3f5;
    --text-secondary: rgba(243, 243, 245, 0.72);
    --border: rgba(255, 255, 255, 0.10);
    --border-color: rgba(255, 255, 255, 0.10);
    --border-subtle: rgba(255, 255, 255, 0.06);
    --card-bg: #14141a;
    --bg-subtle: #0c0c10;
    --hover-bg: #1a1a22;
    --primary: #8b9cff;
    --primary-dark: #9dadff;
    --primary-light: #c5cdff;
    color: #f3f3f5;
    background: #050507;
}

.dashboard-sidebar {
    background: #0c0c10;
    box-shadow: none;
}

.sidebar-header,
.sidebar-footer {
    background: transparent;
}

.sidebar-nav-item {
    color: rgba(243, 243, 245, 0.78);
}

.sidebar-nav-item:hover {
    background: rgba(139, 156, 255, 0.08);
    color: #c5cdff;
}

.sidebar-nav-item.active {
    background: rgba(139, 156, 255, 0.12);
    box-shadow: none;
    color: #c5cdff;
}

.sidebar-user {
    background: #14141a;
    border-color: rgba(255, 255, 255, 0.1);
}

.user-name {
    color: #f3f3f5;
}

.dashboard-content,
.dashboard-content::before,
.dashboard-main {
    background: #050507;
}

.dashboard-content::before {
    background: radial-gradient(circle at 20% 0%, rgba(99, 102, 241, 0.12) 0%, transparent 42%);
}

#view-settings,
.settings-content,
.campaigns-section {
    background: transparent;
}

.dashboard-header {
    background: #14141a;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: none;
}

.dashboard-header h1,
.campaigns-section h2,
.settings-page-title,
.settings-section-title,
.usage-title {
    color: #f3f3f5;
    background: none;
    -webkit-text-fill-color: #f3f3f5;
    background-clip: border-box;
}

.subtitle,
.settings-page-subtitle,
.campaign-card .date {
    color: rgba(243, 243, 245, 0.68);
}

.campaign-card,
.output-tabs-container,
.settings-card,
.usage-card {
    background: #14141a;
    border-color: rgba(255, 255, 255, 0.1);
    color: #f3f3f5;
}

.campaign-card h3 {
    color: #f3f3f5;
}

.campaign-card .btn-primary {
    background: #fff;
    color: #050507;
}

#view-integrations {
    background: #050507;
}

.integrations-section-title,
.integration-card-platform,
.integration-card-status-line,
.integration-card-help,
.integration-detail-label {
    color: rgba(243, 243, 245, 0.68);
}

.integration-card {
    background: #14141a;
    border-color: rgba(255, 255, 255, 0.1);
    color: #f3f3f5;
}

.integration-card-name,
.integration-detail-value {
    color: #f3f3f5;
}

.integration-card-details {
    background: #0c0c10;
    border-color: rgba(255, 255, 255, 0.1);
}

.picker-modal-title {
    color: #f3f3f5;
}

.picker-modal-subtitle,
.picker-field-label,
.picker-field-optional {
    color: rgba(243, 243, 245, 0.68);
}

.output-tabs-container {
    background: #050507;
}

.form-input-modern,
.form-input-disabled,
.auth-modal-content .form-group input,
.dashboard-layout select,
.dashboard-layout textarea,
.dashboard-layout input[type="text"],
.dashboard-layout input[type="email"],
.dashboard-layout input[type="password"],
.dashboard-layout input[type="tel"],
.dashboard-layout input[type="number"],
.dashboard-layout input[type="url"],
.dashboard-layout input[type="search"] {
    background: #0c0c10 !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

.form-input-modern:focus,
.auth-modal-content .form-group input:focus {
    box-shadow: 0 0 0 3px rgba(139, 156, 255, 0.18);
}

.form-input-disabled {
    color: var(--text-muted) !important;
}

.btn-primary,
.btn-primary-dark,
.wizard-header-btn-primary {
    background: #fff;
    color: #050507;
}

.btn-primary:hover,
.btn-primary-dark:hover,
.wizard-header-btn-primary:hover {
    background: #ececf1;
    color: #050507;
}

.btn-secondary {
    background: transparent;
    color: var(--text);
    border-color: var(--border);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.06);
}

.auth-modal {
    background: rgba(0, 0, 0, 0.72);
}

.auth-modal-content {
    background: #14141a;
    color: var(--text);
    border: 1px solid var(--border);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}

.auth-modal-content h2 {
    color: #fff;
}

.toast {
    background: #14141a;
    color: var(--text);
    border: 1px solid var(--border);
}

/* Signup */
body.signup-page-body {
    background: #050507;
}

.signup-brand {
    background: radial-gradient(circle at 20% 10%, rgba(99, 102, 241, 0.22) 0%, transparent 42%), #050507;
}

.signup-pane {
    background: #0c0c10;
}

.signup-card-title,
.signup-form-row label {
    color: #f3f3f5;
}

.signup-card-sub,
.signup-back,
.signup-fineprint,
.signup-help {
    color: rgba(243, 243, 245, 0.58);
}

.signup-back:hover,
.signup-fineprint a,
.signup-alt-link a {
    color: #b7c0ff;
}

.signup-form-row input {
    background: #14141a;
    border-color: rgba(255, 255, 255, 0.08);
    color: #f3f3f5;
}

.signup-form-row input:focus {
    border-color: #8b9cff;
    box-shadow: 0 0 0 3px rgba(139, 156, 255, 0.18);
}

.signup-submit-btn,
.signup-submit-btn:hover:not(:disabled) {
    background: #fff;
    color: #050507;
}

.team-modal,
.credit-modal,
.picker-modal,
.searchable-select__panel,
.searchable-select__control {
    background-color: #14141a;
    color: var(--text);
    border-color: var(--border);
}

.dashboard-header h1,
.settings-page-title,
.settings-section-title,
.usage-title {
    color: #f3f3f5;
    background: none;
    -webkit-text-fill-color: #f3f3f5;
}

.settings-page-subtitle,
.subtitle,
.form-input-hint {
    color: rgba(243, 243, 245, 0.68);
}

.progress-bar {
    background: rgba(255, 255, 255, 0.08);
}

.progress-bar-fill {
    background: #8b9cff;
}

.sidebar-logout {
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.08);
}

.sidebar-logout:hover {
    color: #fff;
}

.plan-badge {
    border-color: var(--border);
}

.empty-state,
.empty-state-mini {
    color: var(--text-muted);
}

.wizard-header {
    background: #0c0c10;
    border-bottom: 1px solid var(--border);
    box-shadow: none;
}

/* Tables */
.dashboard-layout table,
.dashboard-layout th,
.dashboard-layout td {
    color: var(--text);
    border-color: var(--border);
}

.dashboard-layout thead {
    background: #0c0c10;
}

/* Campaign wizard — match the 6-step form layout on the dark palette */
#view-wizard {
    background: #050507;
    color: #f3f3f5;
}

.dashboard-layout:has(#view-wizard.active) .dashboard-main {
    background: #050507;
}

#view-wizard .form-group input,
#view-wizard .form-group select,
#view-wizard .form-group textarea,
#view-wizard #strategy-custom-instructions,
#view-wizard input[type="date"] {
    background-color: #0c0c10 !important;
    color: #f3f3f5 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

#view-wizard .form-group input::placeholder,
#view-wizard .form-group textarea::placeholder,
#view-wizard #strategy-custom-instructions::placeholder {
    color: rgba(243, 243, 245, 0.38) !important;
}

#view-wizard .form-group .wizard-brand-preview .wizard-product-chip input[type="checkbox"] {
    width: auto !important;
    min-width: 1rem !important;
    min-height: unset !important;
    height: 1rem !important;
    padding: 0 !important;
    margin: 0 !important;
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    border-radius: 4px !important;
}

#view-wizard .wizard-autofill-btn {
    background: transparent !important;
    color: #f3f3f5 !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
}

#view-wizard .wizard-autofill-btn:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

#view-wizard .wizard-nav .btn-primary,
#view-wizard .wizard-nav .btn-generate {
    background: #fff;
    color: #050507;
}

#view-wizard .wizard-nav .btn-primary:hover,
#view-wizard .wizard-nav .btn-generate:hover {
    background: #ececf1;
    color: #050507;
}

#view-generating {
    background: #050507;
    min-height: 100vh;
}

#view-generating .generating-content h2 {
    color: #fff;
}

#view-wizard [id^="platform-warning-for-"] {
    background: rgba(245, 158, 11, 0.12) !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
    color: #fbbf24 !important;
}

@media (max-width: 640px) {
    .wizard-url-row {
        flex-direction: column;
    }

    .wizard-autofill-btn {
        width: 100%;
        justify-content: center;
    }
}

/* -------------------------------------------------------------------------
   Dashboard views — dark palette overrides for legacy light hardcoded blocks
   ------------------------------------------------------------------------- */

#view-audiences,
#view-reporting,
#view-campaigns,
#view-creative-lab,
#view-projects,
#view-project-detail,
#view-team,
#view-output {
    background: transparent;
    color: var(--text);
}

/* Creative Lab */
.dashboard-layout .creative-lab-title,
.dashboard-layout .creative-lab-quota strong,
.dashboard-layout .campaign-cl-title,
.dashboard-layout .cl-step-title,
.dashboard-layout .cl-template-card-name,
.dashboard-layout .cl-generating-title {
    color: var(--text);
}

.dashboard-layout .creative-lab-subtitle,
.dashboard-layout .creative-lab-quota,
.dashboard-layout .campaign-cl-subtitle,
.dashboard-layout .campaign-cl-quota,
.dashboard-layout .cl-step-desc,
.dashboard-layout .cl-label,
.dashboard-layout .cl-template-card-desc,
.dashboard-layout .cl-template-card-meta,
.dashboard-layout .cl-generating-status,
.dashboard-layout .cl-generating-hint,
.dashboard-layout .cl-ai-label,
.dashboard-layout .cl-upload-hint,
.dashboard-layout .cl-product-thumb p {
    color: var(--text-muted);
}

.dashboard-layout .cl-step-card,
.dashboard-layout .cl-generating-card,
.dashboard-layout .cl-template-card,
.dashboard-layout .cl-add-option {
    background: var(--bg-card);
    border-color: var(--border);
    color: var(--text);
}

.dashboard-layout .cl-step-badge {
    background: rgba(139, 156, 255, 0.15);
    color: var(--primary-light);
}

.dashboard-layout .cl-step-badge.cl-complete {
    background: rgba(34, 197, 94, 0.15);
    color: var(--success);
}

.dashboard-layout .cl-input {
    background: var(--bg-secondary);
    border-color: var(--border);
    color: var(--text);
}

.dashboard-layout .cl-input:focus {
    border-color: var(--primary);
    background: var(--bg-card);
}

.dashboard-layout .cl-input::placeholder {
    color: rgba(243, 243, 245, 0.38);
}

.dashboard-layout .cl-template-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
}

.dashboard-layout .cl-template-card.cl-selected {
    border-color: var(--primary);
    background: rgba(139, 156, 255, 0.12);
}

.dashboard-layout .cl-upload-dropzone {
    border-color: var(--border);
    color: var(--text-muted);
}

.dashboard-layout .cl-upload-dropzone:hover,
.dashboard-layout .cl-upload-dropzone.cl-drag-over {
    border-color: var(--primary);
    background: rgba(139, 156, 255, 0.1);
    color: var(--primary-light);
}

.dashboard-layout .cl-add-images-section,
.dashboard-layout .cl-aspect-section {
    border-top-color: var(--border);
}

.dashboard-layout .cl-product-thumb img {
    border-color: var(--border);
}

.dashboard-layout .cl-spinner {
    border-color: var(--border);
    border-top-color: var(--primary);
}

.dashboard-layout .cl-aspect-btn {
    background: var(--bg-secondary);
    border-color: var(--border);
    color: var(--text-muted);
}

.dashboard-layout .cl-aspect-btn:hover {
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text);
}

.dashboard-layout .cl-aspect-btn.cl-selected {
    border-color: var(--primary);
    background: rgba(139, 156, 255, 0.12);
    color: var(--text);
}

.dashboard-layout .cl-result-card {
    background: var(--bg-card);
    border-color: var(--border);
}

.dashboard-layout .cl-gen-info,
.dashboard-layout .cl-gen-info strong {
    color: var(--text-muted);
}

.dashboard-layout .cl-gen-info strong {
    color: var(--text);
}

/* Reporting breakdown tables */
.dashboard-layout .tmd-reporting-breakdown-table thead th,
.dashboard-layout .tmd-reporting-drill-table thead th {
    background: var(--bg-subtle);
    color: var(--text-muted);
}

.dashboard-layout .tmd-reporting-drill-row > td {
    background: var(--bg-secondary);
}

.dashboard-layout .tmd-metric-pill.is-active {
    background: var(--bg-card);
    color: var(--text);
}

.dashboard-layout .tmd-controls-cbo,
.dashboard-layout .tmd-controls-name-btn:hover {
    background: var(--bg-secondary);
    border-color: var(--border);
}

.dashboard-layout .tmd-controls-camp-name,
.dashboard-layout .tmd-controls-section-title {
    color: var(--text);
}

/* Date pills inactive state */
.dashboard-layout .tmd-date-pill {
    background: var(--bg-card);
    border-color: var(--border);
    color: var(--text-muted);
}

.dashboard-layout .tmd-date-pill:hover {
    background: var(--bg-card-hover);
    color: var(--text);
}

/* Team / credit modals */
.dashboard-layout .team-modal,
.dashboard-layout .credit-modal {
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--border);
}

.dashboard-layout .team-modal-header h2,
.dashboard-layout .credit-modal-header h2 {
    color: var(--text);
}

.dashboard-layout .credit-modal-sub,
.dashboard-layout .credit-modal-foot {
    color: var(--text-muted);
}

.dashboard-layout .credit-modal-sub strong {
    color: var(--text);
}

.dashboard-layout .team-modal-close:hover,
.dashboard-layout .credit-modal-close:hover {
    background: var(--bg-card-hover);
    color: var(--text);
}