/* ╔══════════════════════════════════════════════════════════╗
   ║  كأس العالم الإلكتروني — فلسطين 2026                   ║
   ║  Dark / Light Mode — Toggle                             ║
   ╚══════════════════════════════════════════════════════════╝ */

/* ══════════ DARK THEME (default) ══════════ */
:root, [data-theme="dark"] {
    --bg-base: #13171f;
    --bg-elevated: #1a1f2b;
    --bg-card: #1f2535;
    --bg-card-hover: #252c3d;
    --bg-input: #171c27;
    --bg-section: #161b25;
    --border: rgba(255,255,255,0.08);
    --border-hover: rgba(255,255,255,0.14);
    --border-gold: rgba(196,163,67,0.25);
    --text: #e2e6ee;
    --text-sec: #8b95a8;
    --text-muted: #5c6478;
    --text-heading: #f0f2f6;
    --gold: #c4a343;
    --gold-light: #dfc56a;
    --gold-dim: rgba(196,163,67,0.1);
    --gold-glow: rgba(196,163,67,0.06);
    --blue: #4e8ef7;
    --cyan: #36c5d8;
    --green: #34b864;
    --red: #e05555;
    --orange: #e09030;
    --purple: #9c6aed;
    --pink: #e0549a;
    --green-dim: rgba(52,184,100,0.1);
    --red-dim: rgba(224,85,85,0.08);
    --blue-dim: rgba(78,142,247,0.08);
    --cyan-dim: rgba(54,197,216,0.08);
    --purple-dim: rgba(156,106,237,0.08);
    --orange-dim: rgba(224,144,48,0.08);
    --pink-dim: rgba(224,84,154,0.08);
    --shadow: rgba(0,0,0,0.3);
    --shadow-sm: rgba(0,0,0,0.2);
    --nav-bg: rgba(19,23,31,0.85);
    --nav-bg-scroll: rgba(19,23,31,0.95);
    --hero-grad: linear-gradient(180deg, var(--bg-base) 0%, var(--bg-elevated) 100%);
    --footer-bg: var(--bg-elevated);
    --toggler-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%238b95a8' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    --progress-bg: rgba(255,255,255,0.05);
    --modal-bg: var(--bg-card);
}

/* ══════════ LIGHT THEME ══════════ */
[data-theme="light"] {
    --bg-base: #f4f6fa;
    --bg-elevated: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #f8f9fc;
    --bg-input: #f0f2f7;
    --bg-section: #f9fafb;
    --border: #dfe3ec;
    --border-hover: #c7cdd8;
    --border-gold: rgba(168,120,0,0.2);
    --text: #1a2030;
    --text-sec: #4a5568;
    --text-muted: #8896a8;
    --text-heading: #111827;
    --gold: #a87800;
    --gold-light: #c49a20;
    --gold-dim: rgba(168,120,0,0.07);
    --gold-glow: rgba(168,120,0,0.04);
    --blue: #2563eb;
    --cyan: #0891b2;
    --green: #16a34a;
    --red: #dc2626;
    --orange: #d97706;
    --purple: #7c3aed;
    --pink: #db2777;
    --green-dim: rgba(22,163,74,0.07);
    --red-dim: rgba(220,38,38,0.05);
    --blue-dim: rgba(37,99,235,0.06);
    --cyan-dim: rgba(8,145,178,0.06);
    --purple-dim: rgba(124,58,237,0.05);
    --orange-dim: rgba(217,119,6,0.06);
    --pink-dim: rgba(219,39,119,0.05);
    --shadow: rgba(0,0,0,0.06);
    --shadow-sm: rgba(0,0,0,0.04);
    --nav-bg: rgba(255,255,255,0.88);
    --nav-bg-scroll: rgba(255,255,255,0.96);
    --hero-grad: linear-gradient(165deg, #0f2341 0%, #1a365d 40%, #2a4a7f 100%);
    --footer-bg: #111827;
    --toggler-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%234a5568' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    --progress-bg: #e5e7eb;
    --modal-bg: #ffffff;
}

/* ══════════ BASE ══════════ */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Cairo',sans-serif;background:var(--bg-base);color:var(--text);-webkit-font-smoothing:antialiased;min-height:100vh;transition:background .35s,color .35s}
h1,h2,h3,h4,h5,h6{font-family:'Noto Kufi Arabic',sans-serif;color:var(--text-heading);transition:color .35s}
a{color:var(--blue)}
a:hover{color:var(--gold-light)}
.text-gold{color:var(--gold)!important}
.text-muted{color:var(--text-muted)!important}

/* ══════════ THEME TOGGLE ══════════ */
.theme-toggle {
    width: 40px; height: 40px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-sec);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .25s;
    font-size: 1rem;
    flex-shrink: 0;
}

.theme-toggle:hover {
    background: var(--gold-dim);
    color: var(--gold);
    border-color: var(--border-gold);
}

/* Toggle icon switching */
[data-theme="dark"] .theme-toggle .fa-sun { display: inline; }
[data-theme="dark"] .theme-toggle .fa-moon { display: none; }
[data-theme="light"] .theme-toggle .fa-sun { display: none; }
[data-theme="light"] .theme-toggle .fa-moon { display: inline; }

/* ══════════ NAVBAR ══════════ */
.site-navbar {
    background: var(--nav-bg) !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--border);
    transition: all .3s;
    padding: 8px 0;
}

.site-navbar.scrolled {
    background: var(--nav-bg-scroll) !important;
    box-shadow: 0 4px 20px var(--shadow);
}

.site-navbar .navbar-brand {
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-weight: 800;
    gap: 6px;
    display: flex;
    align-items: center;
}

.brand-text { font-size: .9rem; color: var(--text-heading); transition: color .35s; }
.brand-year { font-size: .75rem; color: var(--gold); margin-right: 4px; }

.site-navbar .nav-link {
    font-size: .85rem;
    font-weight: 500;
    color: var(--text-sec) !important;
    padding: 8px 12px !important;
    border-radius: 8px;
    transition: all .25s;
}

.site-navbar .nav-link:hover,
.site-navbar .nav-link.active {
    color: var(--gold) !important;
    background: var(--gold-dim);
}

.site-navbar .navbar-toggler { border-color: var(--border); }
.site-navbar .navbar-toggler-icon { background-image: var(--toggler-icon); }

/* ══════════ BUTTONS ══════════ */
.btn-gold {
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    color: #fff !important;
    border: none;
    font-weight: 700;
    font-family: 'Noto Kufi Arabic', sans-serif;
    box-shadow: 0 2px 12px rgba(168,120,0,0.2);
}

[data-theme="dark"] .btn-gold { color: #0f1218 !important; }

.btn-gold:hover {
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(168,120,0,0.3);
}

.btn-outline-gold { border: 1.5px solid var(--gold); color: var(--gold) !important; background: transparent; }
.btn-outline-gold:hover { background: var(--gold-dim); color: var(--gold) !important; }
.btn-outline-light { border-color: var(--border); color: var(--text-sec) !important; }
.btn-outline-light:hover { background: var(--gold-dim); color: var(--gold) !important; border-color: var(--border-gold); }
.btn-outline-secondary { border-color: var(--border) !important; color: var(--text-sec) !important; }
.btn-outline-secondary:hover { background: rgba(255,255,255,0.05); color: var(--text) !important; }
.btn-outline-success { border-color: var(--green); color: var(--green) !important; }
.btn-outline-success:hover { background: var(--green-dim); }
.btn-outline-danger { border-color: var(--red); color: var(--red) !important; }
.btn-outline-danger:hover { background: var(--red-dim); }
.btn-outline-info { border-color: var(--cyan); color: var(--cyan) !important; }
.btn-outline-info:hover { background: var(--cyan-dim); }

/* ══════════ HERO (always dark) ══════════ */
.hero-main {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    padding: 120px 0 80px;
    position: relative; overflow: hidden;
    color: #fff;
}

[data-theme="dark"] .hero-main {
    background: radial-gradient(ellipse at 25% 15%,rgba(196,163,67,0.06) 0%,transparent 50%),
                radial-gradient(ellipse at 75% 85%,rgba(78,142,247,0.04) 0%,transparent 50%),
                linear-gradient(180deg,#13171f 0%,#1a1f2b 100%);
}

[data-theme="light"] .hero-main {
    background: radial-gradient(ellipse at 25% 15%,rgba(212,168,67,0.1) 0%,transparent 50%),
                radial-gradient(ellipse at 75% 85%,rgba(255,255,255,0.05) 0%,transparent 50%),
                linear-gradient(165deg, #0f2341 0%, #1a365d 40%, #2a4a7f 100%);
}

.hero-main::before {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(0deg,transparent,transparent 120px,rgba(255,255,255,0.008) 120px,rgba(255,255,255,0.008) 121px);
    pointer-events: none;
}

.hero-main h1,.hero-main h2,.hero-main h3,.hero-main h4,.hero-main h5,.hero-main h6,.hero-main strong.text-white { color: #fff !important; }
.hero-main .text-gold, .hero-main strong.text-gold { color: #dfc56a !important; }
.hero-main .text-secondary, .hero-main .text-muted { color: rgba(255,255,255,0.55) !important; }
.hero-main .lead { color: rgba(255,255,255,0.7); }

.hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(224,85,85,0.1); border: 1px solid rgba(224,85,85,0.2); color: #f19090;
    padding: 8px 24px; border-radius: 100px; font-size: .82rem; font-weight: 700;
}

.hero-badge .dot { width:8px;height:8px;border-radius:50%;background:#f19090;animation:pulse-dot 2s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }

.hero-title { font-size:clamp(2.4rem,6vw,4.5rem);font-weight:900;line-height:1.1;color:#fff; }
.hero-title .shimmer {
    background: linear-gradient(135deg,#c4a343 0%,#dfc56a 40%,#fff 50%,#dfc56a 60%,#c4a343 100%);
    background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:shimmer 4s linear infinite;
}
@keyframes shimmer { 0%{background-position:200% center} 100%{background-position:-200% center} }

.hero-main .stat-box { background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);backdrop-filter:blur(8px); }
.hero-main .stat-number { color:#dfc56a; }
.hero-main .stat-label { color:rgba(255,255,255,0.5); }
.hero-main .btn-outline-light { border-color:rgba(255,255,255,0.3);color:#fff!important; }

/* ══════════ CARDS ══════════ */
.card-dark {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px;
    transition: transform .3s, border-color .3s, box-shadow .3s, background .35s; color: var(--text);
    box-shadow: 0 1px 4px var(--shadow-sm);
}
.card-dark:hover { transform:translateY(-4px);border-color:var(--border-hover);box-shadow:0 8px 30px var(--shadow); }

/* ══════════ STATS ══════════ */
.stat-box { background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:28px 16px;text-align:center;box-shadow:0 1px 4px var(--shadow-sm);transition:background .35s; }
.stat-number { font-family:'Noto Kufi Arabic',sans-serif;font-size:2.2rem;font-weight:900;color:var(--gold);line-height:1; }
.stat-label { font-size:.8rem;color:var(--text-muted);margin-top:6px; }

/* ══════════ SECTIONS ══════════ */
.section-dark { background:var(--bg-section);transition:background .35s; }
.section-tag { font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold); }
.section-heading { font-weight:800;font-size:clamp(1.5rem,3vw,2rem); }
.section-line { width:48px;height:3px;background:var(--gold);border-radius:2px; }

/* ══════════ FLAGS ══════════ */
.flag-card { background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:20px 10px;text-align:center;transition:all .3s;cursor:pointer; }
.flag-card:hover,.flag-card.selected { border-color:var(--border-gold);background:var(--gold-glow);transform:translateY(-3px);box-shadow:0 6px 20px var(--shadow); }
.flag-card .flag-emoji{font-size:2rem}
.flag-card .flag-name{font-size:.75rem;color:var(--text-sec);margin-top:6px}

/* ══════════ FORMS ══════════ */
.form-dark .form-control,.form-dark .form-select { background:var(--bg-input);border:1px solid var(--border);color:var(--text);border-radius:10px;padding:10px 14px;transition:all .25s; }
.form-dark .form-control:focus,.form-dark .form-select:focus { background:var(--bg-elevated);border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-dim);color:var(--text-heading); }
.form-dark .form-control::placeholder{color:var(--text-muted)}
.form-dark .form-label{color:var(--text-sec);font-weight:600;font-size:.88rem}
.form-dark .form-text{color:var(--text-muted)}
.form-dark .form-check-input{background-color:var(--bg-input);border-color:var(--border)}
.form-dark .form-check-input:checked{background-color:var(--gold);border-color:var(--gold)}

/* ══════════ PROFILE ══════════ */
.profile-header{background:linear-gradient(135deg,var(--bg-card),var(--gold-glow));border:1px solid var(--border-gold);border-radius:20px;padding:32px;transition:background .35s}
.avatar-lg{width:80px;height:80px;border-radius:20px;background:var(--gold-dim);color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:2rem}
.stat-mini{text-align:center;padding:16px 12px;background:var(--bg-section);border-radius:12px;border:1px solid var(--border);transition:background .35s}
.stat-mini .num{font-family:'Noto Kufi Arabic',sans-serif;font-weight:900;font-size:1.4rem;color:var(--gold)}
.stat-mini .lbl{font-size:.72rem;color:var(--text-muted)}

/* ══════════ BADGES ══════════ */
.badge-status{padding:4px 12px;border-radius:100px;font-size:.72rem;font-weight:600}
.badge-pending{background:var(--orange-dim);color:var(--orange)}
.badge-confirmed{background:var(--green-dim);color:var(--green)}
.badge-rejected{background:var(--red-dim);color:var(--red)}
.badge-paid{background:var(--cyan-dim);color:var(--cyan)}

/* ══════════ MATCH ══════════ */
.match-vs{font-family:'Noto Kufi Arabic',sans-serif;font-weight:900;font-size:.85rem;color:var(--gold);padding:4px 12px;background:var(--gold-dim);border-radius:8px}

/* ══════════ TABLES ══════════ */
.table-dark-custom{--bs-table-bg:var(--bg-card);--bs-table-border-color:var(--border);--bs-table-hover-bg:var(--bg-card-hover);color:var(--text);border-radius:16px;overflow:hidden}
.table-dark-custom thead th{background:var(--gold-glow);color:var(--gold);font-family:'Noto Kufi Arabic',sans-serif;font-weight:700;font-size:.82rem;border-bottom:1px solid var(--border)}
.table-dark-custom td{vertical-align:middle;font-size:.88rem;color:var(--text-sec);border-color:var(--border)}
[data-theme="light"] .table-dark-custom thead th { color: var(--text-heading); }

/* ══════════ NOTIFICATIONS ══════════ */
.notif-item{padding:14px 16px;border-bottom:1px solid var(--border);transition:background .2s}
.notif-item:hover{background:var(--bg-section)}
.notif-item.unread{border-right:3px solid var(--gold);background:var(--gold-glow)}

/* ══════════ FOOTER (always dark) ══════════ */
.site-footer{background:var(--footer-bg);border-top:1px solid var(--border);padding:48px 0 24px;color:rgba(255,255,255,0.8);transition:background .35s}
[data-theme="light"] .site-footer { background:#111827; }
.site-footer h5,.site-footer h6{color:#dfc56a}
.site-footer .text-muted{color:rgba(255,255,255,0.45)!important}
.footer-links li{margin-bottom:6px}
.footer-links a{color:rgba(255,255,255,0.45);text-decoration:none;font-size:.85rem;transition:color .2s}
.footer-links a:hover{color:#dfc56a}
.site-footer hr{border-color:rgba(255,255,255,0.08)}

/* ══════════ ADMIN ══════════ */
.admin-sidebar{background:var(--bg-elevated);border-left:1px solid var(--border);min-height:100vh;padding-top:80px;width:260px;position:fixed;right:0;top:0;transition:background .35s}
.admin-sidebar .nav-link{color:var(--text-sec);padding:10px 20px;font-size:.85rem;border-radius:0;transition:all .2s}
.admin-sidebar .nav-link:hover,.admin-sidebar .nav-link.active{color:var(--gold);background:var(--gold-dim)}
.admin-content{margin-right:260px;padding-top:80px;min-height:100vh}

/* ══════════ PAGE HEADER (always dark) ══════════ */
.page-header{padding:120px 0 40px;text-align:center;border-bottom:1px solid var(--border);color:#fff}
[data-theme="dark"] .page-header { background:linear-gradient(135deg,#13171f 0%,#1a1f2b 100%); }
[data-theme="light"] .page-header { background:linear-gradient(135deg,#0f2341 0%,#1a365d 100%); }
.page-header h1,.page-header .section-heading{color:#fff!important}
.page-header .text-muted{color:rgba(255,255,255,0.55)!important}
.page-header .section-tag{color:#dfc56a}

/* ══════════ ALERTS ══════════ */
.alert-success{background:var(--green-dim);border-color:var(--green);color:var(--green)}
.alert-danger{background:var(--red-dim);border-color:var(--red);color:var(--red)}

/* ══════════ MISC ══════════ */
.progress{background:var(--progress-bg)}
.progress-bar{background:var(--gold)!important}
.modal-content{background:var(--modal-bg)!important;border:1px solid var(--border)!important;color:var(--text)!important}
[data-theme="dark"] .btn-close{filter:invert(1) brightness(0.7)}
[data-theme="light"] .table { color: var(--text); }

/* ══════════ RESPONSIVE ══════════ */
@media(max-width:768px){.hero-title{font-size:2rem}.admin-sidebar{display:none}.admin-content{margin-right:0}.stat-number{font-size:1.6rem}}

/* ══════════ ANIMATIONS ══════════ */
@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:fadeIn .6s ease both}
.fade-in-1{animation-delay:.1s}
.fade-in-2{animation-delay:.2s}
.fade-in-3{animation-delay:.3s}
.fade-in-4{animation-delay:.4s}