/* ── Reset ─────────────────────────────────────────────────────── */
* { margin:0; padding:0; box-sizing:border-box; }

/* ── Variables ─────────────────────────────────────────────────── */
:root {
    --primary:      #00d9ff;
    --primary-dark: #0099cc;
    --secondary:    #ff6b35;
    --dark:         #0a0e27;
    --dark-2:       #151935;
    --dark-3:       #1e2442;
    --dark-card:    #111827;
    --light:        #ffffff;
    --gray:         #a0aec0;
    --gray-light:   #e2e8f0;
    --success:      #48bb78;
    --danger:       #f56565;
    --warning:      #ed8936;
    --gold:          #ffd700;
    --font-display: 'Orbitron', sans-serif;
    --font-body:    'Rajdhani', sans-serif;
}

/* ── Body ──────────────────────────────────────────────────────── */
body {
    font-family: var(--font-body);
    background: var(--dark);
    color: var(--light);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}
body::before {
    content:'';
    position: fixed; top:0; left:0; width:100%; height:100%;
    background:
        radial-gradient(circle at 20% 50%, rgba(0,217,255,.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255,107,53,.08) 0%, transparent 50%),
        linear-gradient(180deg, var(--dark) 0%, var(--dark-2) 100%);
    z-index:-1;
}

/* ── Header & Nav ──────────────────────────────────────────────── */
.main-header { position:sticky; top:0; z-index:100; background:rgba(10,14,39,.95); backdrop-filter:blur(10px); border-bottom:1px solid rgba(0,217,255,.15); }
.header-banner { width:100%; max-height:120px; overflow:hidden; }
.banner-img { width:100%; height:100%; object-fit:cover; display:block; }
.main-nav { padding:.8rem 0; }
.nav-container { max-width:1200px; margin:0 auto; padding:0 2rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.nav-logo { font-family:var(--font-display); font-size:1.1rem; color:var(--primary); text-decoration:none; font-weight:700; white-space:nowrap; }
.nav-menu { list-style:none; display:flex; align-items:center; gap:.3rem; flex-wrap:wrap; }
.nav-menu li a { color:var(--gray); text-decoration:none; padding:.4rem .8rem; border-radius:6px; font-size:.95rem; font-weight:500; transition:all .2s; }
.nav-menu li a:hover { color:var(--primary); background:rgba(0,217,255,.1); }
.btn-login   { background:rgba(0,217,255,.15)  !important; color:var(--primary)  !important; border:1px solid rgba(0,217,255,.3)  !important; border-radius:6px; }
.btn-register{ background:rgba(255,107,53,.15) !important; color:var(--secondary)!important; border:1px solid rgba(255,107,53,.3) !important; border-radius:6px; }
.btn-logout  { background:rgba(245,101,101,.15)!important; color:var(--danger)   !important; border:1px solid rgba(245,101,101,.3)!important; border-radius:6px; }
.btn-login:hover   { background:rgba(0,217,255,.3)  !important; }
.btn-register:hover{ background:rgba(255,107,53,.3) !important; }
.btn-logout:hover  { background:rgba(245,101,101,.3)!important; }
.badge-notif { background:var(--danger); color:#fff; font-size:.7rem; padding:.1rem .4rem; border-radius:999px; font-weight:700; vertical-align:middle; margin-left:.3rem; }

/* Mobile nav */
.nav-toggle { display:none; background:none; border:none; color:var(--primary); font-size:1.6rem; cursor:pointer; padding:.4rem; }
@media(max-width:768px){
    .nav-toggle { display:block; }
    .nav-menu { display:none; flex-direction:column; width:100%; padding:.5rem 0; }
    .nav-menu.open { display:flex; }
    .nav-menu li { width:100%; }
    .nav-menu li a { display:block; padding:.6rem 1rem; }
}

/* ── Main content ──────────────────────────────────────────────── */
.main-content { flex:1; max-width:1200px; width:100%; margin:0 auto; padding:2rem; }

/* ── Hero ──────────────────────────────────────────────────────── */
.hero { text-align:center; padding:3rem 1rem; margin-bottom:2rem; }
.hero h1 { font-family:var(--font-display); font-size:clamp(1.5rem,4vw,2.5rem); color:var(--primary); margin-bottom:1rem; }
.hero p   { font-size:1.1rem; color:var(--gray); max-width:600px; margin:0 auto; }

/* ── Cards ─────────────────────────────────────────────────────── */
.card {
    background: var(--dark-card);
    border: 1px solid rgba(0,217,255,.15);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    transition: border-color .3s, transform .2s;
}
.card:hover { border-color:rgba(0,217,255,.3); }
.card h2 { font-family:var(--font-display); font-size:1.2rem; color:var(--primary); margin-bottom:1rem; }
.card h3 { font-size:1.1rem; color:var(--light); margin-bottom:.8rem; }

/* ── Grid ──────────────────────────────────────────────────────── */
.grid { display:grid; gap:1.5rem; }
.grid-2 { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.grid-3 { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }

/* ── Stats ─────────────────────────────────────────────────────── */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem; margin-bottom:1.5rem; }
.stat-card {
    background:var(--dark-card);
    border:1px solid rgba(0,217,255,.2);
    border-radius:10px;
    padding:1.2rem;
    text-align:center;
    transition:border-color .3s;
}
.stat-card:hover { border-color:var(--primary); }
.stat-value { display:block; font-family:var(--font-display); font-size:2rem; font-weight:900; color:var(--primary); }
.stat-label { display:block; font-size:.85rem; color:var(--gray); margin-top:.3rem; }

/* ── Buttons ───────────────────────────────────────────────────── */
.btn {
    display:inline-block; padding:.6rem 1.2rem; border-radius:8px; border:none;
    font-family:var(--font-body); font-size:.95rem; font-weight:600;
    cursor:pointer; text-decoration:none; transition:all .2s; text-align:center;
}
.btn-primary   { background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:var(--dark); }
.btn-secondary { background:rgba(0,217,255,.1); color:var(--primary); border:1px solid rgba(0,217,255,.3); }
.btn-danger    { background:linear-gradient(135deg,var(--danger),#c53030); color:#fff; }
.btn-success   { background:linear-gradient(135deg,var(--success),#276749); color:#fff; }
.btn-block     { display:block; width:100%; text-align:center; }
.btn-primary:hover   { opacity:.85; transform:translateY(-1px); }
.btn-secondary:hover { background:rgba(0,217,255,.2); transform:translateY(-1px); }
.btn-danger:hover    { opacity:.85; }
.btn-success:hover   { opacity:.85; }

/* ── Forms ─────────────────────────────────────────────────────── */
.form-group { margin-bottom:1.2rem; }
.form-group label { display:block; margin-bottom:.4rem; color:var(--gray); font-size:.95rem; }
.form-control {
    width:100%; padding:.7rem 1rem; background:rgba(255,255,255,.05);
    border:1px solid rgba(0,217,255,.2); border-radius:8px;
    color:var(--light); font-family:var(--font-body); font-size:1rem;
    transition:border-color .2s;
}
.form-control:focus { outline:none; border-color:var(--primary); background:rgba(0,217,255,.05); }
.form-control option { background:var(--dark-2); color:var(--light); }
select.form-control { cursor:pointer; }
textarea.form-control { resize:vertical; min-height:100px; }
.checkbox-group { display:flex; align-items:center; gap:.8rem; padding:.8rem 0; }
.checkbox-group input[type=checkbox] { width:18px; height:18px; cursor:pointer; accent-color:var(--primary); }
.checkbox-group label { color:var(--gray); font-size:.95rem; cursor:pointer; }

/* ── Flash messages ────────────────────────────────────────────── */
.flash { padding:1rem 1.5rem; border-radius:8px; margin-bottom:1.5rem; font-weight:600; }
.flash-success { background:rgba(72,187,120,.15); border:1px solid rgba(72,187,120,.4); color:var(--success); }
.flash-error   { background:rgba(245,101,101,.15); border:1px solid rgba(245,101,101,.4); color:var(--danger); }

/* ── Badges ────────────────────────────────────────────────────── */
.badge { display:inline-block; padding:.2rem .6rem; border-radius:999px; font-size:.8rem; font-weight:700; }
.badge-pending  { background:rgba(237,137,54,.2); color:var(--warning); border:1px solid rgba(237,137,54,.4); }
.badge-approved { background:rgba(72,187,120,.2); color:var(--success); border:1px solid rgba(72,187,120,.4); }
.badge-cancelled{ background:rgba(245,101,101,.2);color:var(--danger);  border:1px solid rgba(245,101,101,.4); }
.badge-vip      { background:rgba(255,215,0,.2);  color:#ffd700;        border:1px solid rgba(255,215,0,.4); }

/* ── Tables ────────────────────────────────────────────────────── */
.table-container { overflow-x:auto; border-radius:8px; }
table { width:100%; border-collapse:collapse; font-size:.95rem; }
thead tr { background:rgba(0,217,255,.1); }
th { padding:.8rem 1rem; text-align:left; color:var(--primary); font-weight:700; font-size:.9rem; white-space:nowrap; border-bottom:1px solid rgba(0,217,255,.2); }
td { padding:.8rem 1rem; border-bottom:1px solid rgba(255,255,255,.05); color:var(--gray); vertical-align:middle; }
tbody tr:hover { background:rgba(0,217,255,.04); }
tbody tr:last-child td { border-bottom:none; }

/* ── Footer ────────────────────────────────────────────────────── */
.main-footer { background:var(--dark-2); border-top:1px solid rgba(0,217,255,.15); padding:2rem 0 0; margin-top:auto; }
.footer-container { max-width:1200px; margin:0 auto; padding:0 2rem; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:2rem; padding-bottom:2rem; }
.footer-section h3 { font-family:var(--font-display); font-size:1rem; color:var(--primary); margin-bottom:.8rem; }
.footer-section h4 { font-size:.95rem; color:var(--light); margin-bottom:.8rem; }
.footer-section p  { color:var(--gray); font-size:.9rem; line-height:1.8; }
.footer-section ul { list-style:none; }
.footer-section ul li a { color:var(--gray); text-decoration:none; font-size:.9rem; line-height:2; transition:color .2s; }
.footer-section ul li a:hover { color:var(--primary); }
.footer-bottom { text-align:center; padding:1rem 2rem; border-top:1px solid rgba(0,217,255,.1); color:var(--gray); font-size:.85rem; }

/* ── Tarif list ─────────────────────────────────────────────────── */
.tarif-list { list-style:none; padding:0; }
.tarif-list li { padding:.25rem 0; color:var(--gray); }
.tarif-list li::before { content:"• "; color:var(--primary); }

/* ── Modals ────────────────────────────────────────────────────── */
.modal-overlay {
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,.85); z-index:9999;
    align-items:center; justify-content:center; padding:1rem;
}
.modal-overlay.open { display:flex; }
.modal-box { background:var(--dark-card); border:1px solid rgba(0,217,255,.3); border-radius:14px; padding:2rem; max-width:520px; width:100%; max-height:90vh; overflow-y:auto; }
.modal-box h3 { color:var(--primary); margin-bottom:1.5rem; }

/* ── Animations ────────────────────────────────────────────────── */
@keyframes fadeIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
.card { animation:fadeIn .4s ease both; }