/* ============================================================
   Baha Builder — shared Dark/Light theme toggle
   Used by the platform pages (login, plans, setup, employees,
   status / payment pages and the info pages).
   Preference key: localStorage "baha_dash_theme"
   ============================================================ */

:root { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

/* Floating toggle button (auto-injected by js/theme-toggle.js) */
.baha-theme-fab {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 3000;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: #334155;
    border: 1px solid #d1d5db;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16);
    cursor: pointer;
    transition: all 0.2s ease;
}
.baha-theme-fab:hover { color: #3b82f6; border-color: #3b82f6; transform: translateY(-2px); }
.baha-theme-fab svg { width: 20px; height: 20px; pointer-events: none; }

html[data-theme="dark"] .baha-theme-fab {
    background: #1e293b;
    color: #e2e8f0;
    border-color: #334155;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .baha-theme-fab:hover { color: #ffffff; border-color: #60a5fa; }

/* ---- Dark theme base ---- */
html[data-theme="dark"] { background-color: #0f172a; }
html[data-theme="dark"] body {
    background: #0f172a;
    color: #e2e8f0;
}

/* ---- Surfaces (cards / panels / modals) ---- */
html[data-theme="dark"] .auth-container,
html[data-theme="dark"] .pricing-card,
html[data-theme="dark"] .box,
html[data-theme="dark"] .card,
html[data-theme="dark"] .status-card,
html[data-theme="dark"] .content-container,
html[data-theme="dark"] .loader-card,
html[data-theme="dark"] .comparison-table,
html[data-theme="dark"] .success-message,
html[data-theme="dark"] .toast,
html[data-theme="dark"] .custom-modal-content,
html[data-theme="dark"] .delete-store-content,
html[data-theme="dark"] .modal-content {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    color: #e2e8f0;
}

/* Inner tinted boxes */
html[data-theme="dark"] .invitation-info,
html[data-theme="dark"] .info-box,
html[data-theme="dark"] .order-info,
html[data-theme="dark"] .service-list li,
html[data-theme="dark"] .note,
html[data-theme="dark"] .preview-box,
html[data-theme="dark"] .icon-chip {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #e2e8f0;
}
html[data-theme="dark"] .icon-chip { color: #a78bfa; }
html[data-theme="dark"] .delete-store-warning {
    background-color: rgba(239, 68, 68, 0.16) !important;
    border-color: #7f1d1d !important;
    color: #fca5a5 !important;
}
html[data-theme="dark"] .sb-header p { color: rgba(255, 255, 255, 0.92); }

/* ---- Headings & text ---- */
html[data-theme="dark"] .auth-header h1,
html[data-theme="dark"] .title,
html[data-theme="dark"] .form-group label,
html[data-theme="dark"] .info-value,
html[data-theme="dark"] .pricing-header h1,
html[data-theme="dark"] .plan-name,
html[data-theme="dark"] .plan-price,
html[data-theme="dark"] .pack-name,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .modal-header h3 { color: #e2e8f0; }

html[data-theme="dark"] .auth-footer,
html[data-theme="dark"] .subtitle,
html[data-theme="dark"] .info-label,
html[data-theme="dark"] .info,
html[data-theme="dark"] .loader-sub,
html[data-theme="dark"] .loader-status,
html[data-theme="dark"] .features-list li,
html[data-theme="dark"] .plan-desc,
html[data-theme="dark"] .pack-desc,
html[data-theme="dark"] .status-msg,
html[data-theme="dark"] p { color: #94a3b8; }

/* ---- Forms ---- */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background-color: #0f172a;
    color: #e2e8f0;
    border-color: #334155 !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #64748b; }
html[data-theme="dark"] input[readonly],
html[data-theme="dark"] select[disabled] { background-color: #1e293b !important; color: #94a3b8 !important; }

/* ---- Secondary / neutral buttons ---- */
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .cancel-btn,
html[data-theme="dark"] .back-btn,
html[data-theme="dark"] .btn-outline {
    background-color: #334155 !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}

/* ---- Tables ---- */
html[data-theme="dark"] table { border-color: #334155 !important; }
html[data-theme="dark"] th {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
}
html[data-theme="dark"] td { color: #e2e8f0; border-color: #334155 !important; }