/**
 * Admin theme contract: target dark mode with
 *   body[data-theme-version="dark"]
 * Legacy alias used in some blades: body.dark-mode (keep in sync if toggled).
 * Transparent: body[data-theme-version="transparent"] — feature CSS may need extra rules.
 *
 * Design tokens live in this file. NEVER hardcode brand colors, spacing, radius,
 * type sizes, or shadows anywhere else — reference the variables below.
 */

:root {
    /* Brand.
     *
     * `--primary`, `--primary-dark`, `--primary-hover` and `--rgba-primary-N`
     * are written PER ORGANIZATION by the inline <style> block in
     * resources/views/layouts/admin.blade.php (driven by $branding from
     * AppearanceService::getAppearanceSettings). The design-system tokens
     * below resolve to those per-org values at use time, so every component
     * (.page-header, .app-modal, .app-card, etc.) automatically wears the
     * organization's brand color.
     *
     * The hex fallbacks only apply when no organization branding is loaded
     * (logged-out pages, asset-only requests, etc.).
     */
    --brand-primary: var(--primary, #0283f5);
    --brand-primary-dark: var(--primary-dark, #056ad1);
    --brand-primary-hover: var(--primary-hover, #026fd1);
    --brand-gradient: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
    /* Brand alpha tints: --rgba-primary-N is "N×10% opacity of --primary",
     * set per-organization by the admin layout. Components prefer these
     * aliases so usage stays readable. */
    --brand-alpha-low: var(--rgba-primary-1, rgba(2, 131, 245, 0.1));
    --brand-alpha-soft: var(--rgba-primary-2, rgba(2, 131, 245, 0.2));
    --brand-alpha-medium: var(--rgba-primary-3, rgba(2, 131, 245, 0.3));
    --brand-alpha-strong: var(--rgba-primary-4, rgba(2, 131, 245, 0.4));

    /* Status */
    --color-success: #10b981;
    --color-success-bg: rgba(16, 185, 129, 0.1);
    --color-danger: #ef4444;
    --color-danger-bg: rgba(239, 68, 68, 0.1);
    --color-warning: #f59e0b;
    --color-warning-bg: rgba(245, 158, 11, 0.1);
    --color-info: #06b6d4;
    --color-info-bg: rgba(6, 182, 212, 0.1);

    /* Surfaces (light theme defaults) */
    --admin-surface: #ffffff;
    --admin-surface-2: #f8f9fa;
    --admin-page-bg: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    --admin-text: #212529;
    --admin-text-muted: #6c757d;
    --admin-border: rgba(0, 0, 0, 0.08);
    --admin-input-bg: #ffffff;

    /* Spacing scale (4px base) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-9: 40px;
    --space-10: 48px;

    /* Radius scale */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-pill: 999px;
    --radius-circle: 50%;

    /* Typography scale */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.75rem;
    --text-4xl: 2rem;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --leading-tight: -0.02em;
    --leading-normal: normal;

    --font-sans: 'Cairo', 'Segoe UI', 'Roboto', system-ui, -apple-system, sans-serif;

    /* Shadows.
     * Brand-tinted shadows use the per-org --rgba-primary-* vars when present
     * so the elevation glow matches the organization's primary color. */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.04);
    --shadow-card-hover: 0 12px 40px -10px var(--rgba-primary-2, rgba(2, 131, 245, 0.15)), 0 4px 20px -8px rgba(0, 0, 0, 0.08);
    --shadow-elev: 0 10px 40px var(--rgba-primary-2, rgba(2, 131, 245, 0.2));
    --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* Transitions */
    --transition-fast: all 0.15s ease;
    --transition-base: all 0.25s ease;
    --transition-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Container padding (used by .content-body container resets).
     *
     * This single variable controls the horizontal breathing room every
     * admin page gets from `.content-body`. The base reset in
     * public/css/admin/base.css applies it to every `.container-fluid`
     * descendant of `.content-body`, so changing the value here resizes
     * every admin index (Users, Subscriptions, Performance Analysis,
     * Grades, Teachers, Students, Reports, HRM, etc.) in lockstep — no
     * per-page edits required.
     *
     * Was 1.875rem (30px). Reduced to 1rem (16px) so admin pages render
     * roughly the same width as `/admin/users` did pre-migration, with a
     * tighter, more modern dashboard feel on wide monitors. */
    --container-padding-x: 1rem;
}

body[data-theme-version="dark"] {
    --admin-surface: #1e1e2d;
    --admin-surface-2: #151521;
    --admin-page-bg: linear-gradient(135deg, #151521 0%, #1e1e2d 100%);
    --admin-text: #e9ecef;
    --admin-text-muted: #a1a1b5;
    --admin-border: rgba(255, 255, 255, 0.1);
    --admin-input-bg: #2a2a3c;

    /* Slightly softer shadows in dark mode (brand glow follows --primary). */
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.25);
    --shadow-card-hover: 0 12px 40px -10px var(--rgba-primary-3, rgba(2, 131, 245, 0.25)), 0 4px 20px -8px rgba(0, 0, 0, 0.4);
    --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
}

body[data-theme-version="dark"] .content-body {
    background-color: var(--admin-surface-2) !important;
    color: var(--admin-text);
}

body[data-theme-version="dark"] .content-body .text-muted {
    color: var(--admin-text-muted) !important;
}

body[data-theme-version="dark"] .content-body .card {
    background-color: var(--admin-surface);
    border-color: var(--admin-border);
    color: var(--admin-text);
}

body[data-theme-version="dark"] .content-body .card-header,
body[data-theme-version="dark"] .content-body .card-footer {
    background-color: rgba(255, 255, 255, 0.03);
    border-color: var(--admin-border);
    color: var(--admin-text);
}

body[data-theme-version="dark"] .content-body .form-control,
body[data-theme-version="dark"] .content-body .form-select {
    background-color: var(--admin-input-bg);
    border-color: var(--admin-border);
    color: var(--admin-text);
}

body[data-theme-version="dark"] .content-body .table {
    --bs-table-bg: transparent;
    color: var(--admin-text);
    border-color: var(--admin-border);
}

body[data-theme-version="dark"] .content-body .table thead th {
    border-color: var(--admin-border);
    color: var(--admin-text);
}

body[data-theme-version="dark"] .content-body .table tbody td {
    border-color: var(--admin-border);
    color: var(--admin-text);
}

body[data-theme-version="dark"] .content-body .card-title,
body[data-theme-version="dark"] .content-body .card-header h1,
body[data-theme-version="dark"] .content-body .card-header h2,
body[data-theme-version="dark"] .content-body .card-header h3,
body[data-theme-version="dark"] .content-body .card-header h4,
body[data-theme-version="dark"] .content-body .card-header h5,
body[data-theme-version="dark"] .content-body .card-header h6 {
    color: var(--admin-text);
}

body[data-theme-version="dark"] .content-body .border,
body[data-theme-version="dark"] .content-body .border-top,
body[data-theme-version="dark"] .content-body .border-bottom {
    border-color: var(--admin-border) !important;
}

/* Bold card / widget headings (light + dark) */
.content-body .card .card-title,
.content-body .card .card-header h1,
.content-body .card .card-header h2,
.content-body .card .card-header h3,
.content-body .card .card-header h4,
.content-body .card .card-header h5,
.content-body .card .card-header h6,
.content-body .card .card-header .heading,
.content-body .chart-card-title,
.content-body .card-header-modern h4,
.content-body .dashboard-card .card-header-modern h4,
.content-body .analytics-chart-card .chart-title,
.content-body .fa-dash-widget-title,
.content-body .daily-ops-title,
.content-body .activity-card .activity-title,
.content-body .summary-stat-label,
.content-body .branch-stat-name,
.content-body .super-admin-dashboard-scope .kpi-card-label,
.content-body .quick-action-text,
.content-body .projected-income-title {
    font-weight: 700;
}