/* ============================================================
   Sports Academies — Modern Saudi Design System
   Emerald + Gold palette, contemporary & RTL-friendly
   ============================================================ */

:root {
    --emerald-50: #ecfdf5;
    --emerald-100: #d1fae5;
    --emerald-200: #a7f3d0;
    --emerald-300: #6ee7b7;
    --emerald-400: #34d399;
    --emerald-500: #10b981;
    --emerald-600: #059669;
    --emerald-700: #047857;
    --emerald-800: #065f46;
    --emerald-900: #064e3b;
    --gold-300: #f6d689;
    --gold-400: #eec25d;
    --gold-500: #e0aa3e;
    --gold-600: #c78f26;
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Segoe UI', 'Tajawal', 'Cairo', Tahoma, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Modern Arabic typography for RTL */
[dir="rtl"] body,
html[dir="rtl"] body {
    font-family: 'Tajawal', 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
    letter-spacing: 0;
}

/* ---------- Focus & form fields ---------- */
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--emerald-500);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

a, button { transition: all 0.18s ease; }

/* ---------- Component: buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    border-radius: 0.75rem;
    padding: 0.625rem 1.25rem;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
}
.btn-primary {
    background: linear-gradient(135deg, var(--emerald-600), var(--emerald-700));
    color: #fff;
    box-shadow: 0 6px 16px -6px rgba(5, 150, 105, 0.55);
}
.btn-primary:hover { background: linear-gradient(135deg, var(--emerald-500), var(--emerald-600)); transform: translateY(-1px); }
.btn-gold {
    background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
    color: #1f2937;
    box-shadow: 0 6px 16px -6px rgba(224, 170, 62, 0.6);
}
.btn-gold:hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn-outline {
    border: 1px solid var(--emerald-600);
    color: var(--emerald-700);
    background: transparent;
}
.btn-outline:hover { background: rgba(16, 185, 129, 0.08); }

/* ---------- Component: cards ---------- */
.card {
    background: #fff;
    border-radius: 1rem;
    border: 1px solid #eef2f0;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
    transition: all 0.22s ease;
}
.card:hover { box-shadow: 0 12px 28px -10px rgba(6, 78, 59, 0.18); transform: translateY(-3px); }

/* ---------- Saudi hero gradient ---------- */
.saudi-gradient {
    background:
        radial-gradient(1100px 500px at 85% -10%, rgba(224, 170, 62, 0.28), transparent 55%),
        radial-gradient(900px 500px at 0% 110%, rgba(110, 231, 183, 0.20), transparent 50%),
        linear-gradient(140deg, #033a2c 0%, #065f46 45%, #047857 100%);
}
.saudi-gradient-soft {
    background:
        radial-gradient(800px 400px at 90% 0%, rgba(224, 170, 62, 0.12), transparent 55%),
        linear-gradient(135deg, #ecfdf5 0%, #f3fbf7 100%);
}

/* Gold ring accent (subtle Saudi-flag nod, tasteful) */
.gold-ring {
    position: relative;
}
.gold-ring::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(224, 170, 62, 0.25);
    pointer-events: none;
}

/* ---------- Stats / number chips ---------- */
.stat-chip {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0.9rem;
}

/* ---------- Tables & dashboards refinements ---------- */
.dash-panel {
    background: #fff;
    border: 1px solid #eef2f0;
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
}
.dash-sidebar {
    background: linear-gradient(180deg, #064e3b 0%, #022c22 100%);
}
.dash-sidebar a.active {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-inline-start: 3px solid var(--gold-400);
}

/* ---------- Sidebar nav link ---------- */
.nav-link { border-radius: 0.6rem; }