/* ==========================================
   Theme System – Material Design 3 Inspired
   ==========================================
   Shared design tokens (typography, spacing, shape)
   + per-theme colour tokens via data-theme attribute.
   Dark is the default.
   ========================================== */

/* ---- Shared Design Tokens ---- */
:root {
    /* Typography */
    --sa-font-en: 'Inter', sans-serif;
    --sa-font-ar: 'Cairo', sans-serif;
    --sa-font-body: var(--sa-font-ar);

    /* Spacing – 4 px baseline */
    --sa-space-xs: 4px;
    --sa-space-sm: 8px;
    --sa-space-md: 16px;
    --sa-space-lg: 24px;
    --sa-space-xl: 32px;

    /* Shape */
    --sa-radius-sm: 6px;   /* buttons, inputs */
    --sa-radius-md: 8px;   /* cards */
    --sa-radius-lg: 12px;  /* modals, large containers */
    --sa-radius-pill: 100px;
}

/* ---- Dark Theme (Default) ---- */
:root,
[data-theme="dark"] {
    /* Primary palette – Deep Navy */
    --sa-primary: #091426;
    --sa-primary-light: #0f2a4a;
    --sa-primary-deep: #060e1a;

    /* Accent – Emerald */
    --sa-accent: #34d399;
    --sa-accent-hover: #2bb885;
    --sa-accent-glow: rgba(52, 211, 153, 0.25);
    --sa-accent-10: rgba(52, 211, 153, 0.10);
    --sa-accent-15: rgba(52, 211, 153, 0.15);
    --sa-accent-20: rgba(52, 211, 153, 0.20);

    /* Surface hierarchy (MD3 tonal) */
    --sa-surface-0: #091426;
    --sa-surface-1: #0d1b32;
    --sa-surface-2: #10203b;
    --sa-surface-3: #142745;
    --sa-surface-4: #182e50;

    /* Background */
    --sa-gradient-bg: linear-gradient(135deg, #060e1a 0%, #091426 40%, #0f2a4a 100%);

    /* Cards */
    --sa-card-bg: var(--sa-surface-1);
    --sa-card-border: rgba(255, 255, 255, 0.08);
    --sa-card-hover-border: rgba(52, 211, 153, 0.25);

    /* Navbar */
    --sa-navbar-bg: var(--sa-surface-1);
    --sa-navbar-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);

    /* Text */
    --sa-text: #e8edf4;
    --sa-text-muted: rgba(232, 237, 244, 0.55);
    --sa-text-nav: rgba(232, 237, 244, 0.70);
    --sa-heading: #f0f4fa;
    --sa-text-on-accent: #091426;

    /* Shadows – minimal, tonal layering preferred */
    --sa-shadow: 0 1px 3px rgba(0, 0, 0, 0.30);
    --sa-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.35);

    /* Inputs */
    --sa-input-bg: var(--sa-surface-2);
    --sa-input-border: rgba(255, 255, 255, 0.10);
    --sa-input-focus-bg: var(--sa-surface-3);
    --sa-select-option-bg: var(--sa-surface-2);

    /* Tables */
    --sa-table-border: rgba(255, 255, 255, 0.06);
    --sa-table-hover: rgba(52, 211, 153, 0.06);
    --sa-table-head-bg: var(--sa-surface-2);
    --sa-table-striped: rgba(255, 255, 255, 0.02);

    /* Modal / Dropdown */
    --sa-modal-bg: var(--sa-surface-2);
    --sa-dropdown-bg: var(--sa-surface-2);

    /* Misc */
    --sa-divider: rgba(255, 255, 255, 0.08);
    --sa-backdrop: blur(12px);
    --sa-btn-close-filter: invert(1);

    /* Status Colors */
    --sa-success: #34d399;
    --sa-success-bg: rgba(52, 211, 153, 0.15);
    --sa-warning: #fbbf24;
    --sa-warning-bg: rgba(251, 191, 36, 0.15);
    --sa-danger: #f87171;
    --sa-danger-bg: rgba(248, 113, 113, 0.15);
    --sa-danger-border: rgba(248, 113, 113, 0.25);
    --sa-info: #60a5fa;
    --sa-info-bg: rgba(96, 165, 250, 0.15);

    --sa-code-color: #c4b5fd;
    --sa-code-bg: rgba(255, 255, 255, 0.06);

    color-scheme: dark;
}

/* ---- Light Theme ---- */
[data-theme="light"] {
    /* Primary palette */
    --sa-primary: #f8f9fc;
    --sa-primary-light: #eef1f6;
    --sa-primary-deep: #ffffff;

    /* Accent – Emerald (deeper for contrast on light) */
    --sa-accent: #006c49;
    --sa-accent-hover: #005a3d;
    --sa-accent-glow: rgba(0, 108, 73, 0.18);
    --sa-accent-10: rgba(0, 108, 73, 0.07);
    --sa-accent-15: rgba(0, 108, 73, 0.11);
    --sa-accent-20: rgba(0, 108, 73, 0.15);

    /* Surface hierarchy (MD3 tonal) */
    --sa-surface-0: #fbf8fa;
    --sa-surface-1: #ffffff;
    --sa-surface-2: #f4f1f4;
    --sa-surface-3: #edeaed;
    --sa-surface-4: #e6e3e6;

    /* Background */
    --sa-gradient-bg: #f4f1f4;

    /* Cards */
    --sa-card-bg: #ffffff;
    --sa-card-border: #eae7e9;
    --sa-card-hover-border: rgba(0, 108, 73, 0.30);

    /* Navbar */
    --sa-navbar-bg: #ffffff;
    --sa-navbar-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);

    /* Text */
    --sa-text: #1a1c1e;
    --sa-text-muted: rgba(26, 28, 30, 0.55);
    --sa-text-nav: rgba(26, 28, 30, 0.65);
    --sa-heading: #111315;
    --sa-text-on-accent: #ffffff;

    /* Shadows */
    --sa-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    --sa-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08);

    /* Inputs */
    --sa-input-bg: var(--sa-surface-2);
    --sa-input-border: #ddd9dc;
    --sa-input-focus-bg: #ffffff;
    --sa-select-option-bg: #ffffff;

    /* Tables */
    --sa-table-border: #eae7e9;
    --sa-table-hover: rgba(0, 108, 73, 0.05);
    --sa-table-head-bg: var(--sa-surface-2);
    --sa-table-striped: rgba(0, 0, 0, 0.02);

    /* Modal / Dropdown */
    --sa-modal-bg: #ffffff;
    --sa-dropdown-bg: #ffffff;

    /* Misc */
    --sa-divider: #eae7e9;
    --sa-backdrop: blur(12px);
    --sa-btn-close-filter: none;

    /* Status Colors */
    --sa-success: #059669;
    --sa-success-bg: rgba(5, 150, 105, 0.10);
    --sa-warning: #d97706;
    --sa-warning-bg: rgba(217, 119, 6, 0.10);
    --sa-danger: #dc2626;
    --sa-danger-bg: rgba(220, 38, 38, 0.08);
    --sa-danger-border: rgba(220, 38, 38, 0.20);
    --sa-info: #2563eb;
    --sa-info-bg: rgba(37, 99, 235, 0.08);

    --sa-code-color: #7c3aed;
    --sa-code-bg: rgba(0, 0, 0, 0.04);

    color-scheme: light;
}

/* ==========================================
   Theme Toggle Button
   ========================================== */

.theme-toggle {
    background: var(--sa-input-bg);
    border: 1px solid var(--sa-card-border);
    color: var(--sa-text);
    width: 40px;
    height: 40px;
    border-radius: var(--sa-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1.1rem;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.theme-toggle:hover {
    background: var(--sa-accent-10);
    border-color: var(--sa-accent);
    color: var(--sa-accent);
    transform: translateY(-1px);
    box-shadow: var(--sa-shadow-hover);
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
    position: absolute;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark mode: show sun icon */
[data-theme="dark"] .theme-toggle .icon-sun {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}
[data-theme="dark"] .theme-toggle .icon-moon {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
}

/* Light mode: show moon icon */
[data-theme="light"] .theme-toggle .icon-sun {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
}
[data-theme="light"] .theme-toggle .icon-moon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* ==========================================
   Smooth Transitions for Theme Change
   ========================================== */

body,
.navbar,
.sidebar,
.card,
.card-header,
.card-body,
.stat-card,
.modal-content,
.dropdown-menu,
.form-control,
.form-select,
.input-group-text,
.table,
.page-link,
.btn,
.login-card,
.section-card,
.plan-card,
.top-bar {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}