@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&display=swap');

/* ── Light Mode Variables ─────────────────────────────── */
:root {
    --gold: #b8860b;
    --gold-light: #d4a017;
    --gold-dark: #8b6508;
    --gold-bg: rgba(184,134,11,0.08);
    --bg-page: #f5f4f0;
    --bg-card: #ffffff;
    --bg-sidebar: #1a1a24;
    --bg-input: #ffffff;
    --border: #e0ddd6;
    --border-sidebar: #2a2a38;
    --text-primary: #1a1a1a;
    --text-muted: #6b6b6b;
    --text-sidebar: #a0a0b0;
    --shadow: 0 2px 12px rgba(0,0,0,0.08);
    --shadow-card: 0 4px 20px rgba(0,0,0,0.06);
    --danger: #dc3545;
    --success: #198754;
    --warning: #d97706;
    --info: #0369a1;
    --topbar-bg: #ffffff;
    --topbar-border: #e0ddd6;
}

/* ── Dark Mode Variables ──────────────────────────────── */
[data-theme="dark"] {
    --gold: #c9a84c;
    --gold-light: #e0c06a;
    --gold-dark: #a07830;
    --gold-bg: rgba(201,168,76,0.1);
    --bg-page: #0e0e16;
    --bg-card: #14141f;
    --bg-sidebar: #0a0a12;
    --bg-input: #1c1c28;
    --border: #2a2a3c;
    --border-sidebar: #1e1e2e;
    --text-primary: #efefef;
    --text-muted: #8888a0;
    --text-sidebar: #8888a0;
    --shadow: 0 2px 12px rgba(0,0,0,0.4);
    --shadow-card: 0 4px 20px rgba(0,0,0,0.3);
    --topbar-bg: #14141f;
    --topbar-border: #2a2a3c;
}

/* ── Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
    background-color: var(--bg-page);
    color: var(--text-primary);
    font-family: 'Cairo', sans-serif;
    min-height: 100vh;
    transition: background-color 0.3s, color 0.3s;
}

/* ── Sidebar ──────────────────────────────────────────── */
.sidebar {
    position: fixed; top: 0; right: 0;
    width: 250px; height: 100vh;
    background: var(--bg-sidebar);
    border-left: 1px solid var(--border-sidebar);
    display: flex; flex-direction: column; z-index: 200;
}
.sidebar-brand {
    display: flex; align-items: center; gap: 12px;
    padding: 28px 24px 24px;
    border-bottom: 1px solid var(--border-sidebar);
}
.sidebar-logo {
    width: 44px; height: 44px;
    background: linear-gradient(135deg, var(--gold-dark), var(--gold));
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(184,134,11,0.3);
}
.sidebar-brand-text h6 { color:#fff; font-weight:700; font-size:0.95rem; line-height:1.2; margin:0; }
.sidebar-brand-text span { color:var(--text-sidebar); font-size:0.72rem; }
.sidebar-nav { flex:1; padding:20px 12px; display:flex; flex-direction:column; gap:4px; overflow-y:auto; }
.nav-section-label { color:var(--text-sidebar); font-size:0.68rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:12px 12px 6px; opacity:0.6; }
.sidebar-nav .nav-link { display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:10px; color:var(--text-sidebar); font-size:0.9rem; font-weight:600; text-decoration:none; transition:all 0.2s; }
.sidebar-nav .nav-link i { font-size:1.05rem; width:20px; text-align:center; flex-shrink:0; }
.sidebar-nav .nav-link:hover { background:rgba(255,255,255,0.05); color:#fff; }
.sidebar-nav .nav-link.active { background:var(--gold-bg); color:var(--gold); border-right:3px solid var(--gold); }
.sidebar-footer { padding:16px 20px 24px; border-top:1px solid var(--border-sidebar); }
.user-pill { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; background:rgba(255,255,255,0.04); margin-bottom:10px; }
.user-avatar { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--gold-dark),var(--gold)); display:flex; align-items:center; justify-content:center; font-size:0.85rem; font-weight:700; color:#fff; flex-shrink:0; }
.user-name { color:#fff; font-size:0.85rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.btn-logout { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:9px; border-radius:10px; border:1px solid rgba(255,255,255,0.1); background:transparent; color:var(--text-sidebar); font-size:0.85rem; font-weight:600; font-family:'Cairo',sans-serif; text-decoration:none; cursor:pointer; transition:all 0.2s; }
.btn-logout:hover { border-color:var(--danger); color:var(--danger); background:rgba(220,53,69,0.08); }

/* ── Main Content ─────────────────────────────────────── */
.main-content { margin-right:250px; min-height:100vh; display:flex; flex-direction:column; }
.topbar { background:var(--topbar-bg); border-bottom:1px solid var(--topbar-border); padding:0 28px; height:64px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:100; box-shadow:var(--shadow); }
.topbar-title { font-size:1.1rem; font-weight:700; color:var(--text-primary); }
.breadcrumb-sep { color:var(--text-muted); margin:0 8px; font-weight:400; }
.breadcrumb-current { color:var(--gold); }
.theme-toggle { display:flex; align-items:center; gap:8px; padding:7px 14px; border-radius:20px; border:1px solid var(--border); background:var(--bg-input); color:var(--text-muted); font-size:0.82rem; font-weight:600; cursor:pointer; font-family:'Cairo',sans-serif; transition:all 0.2s; }
.theme-toggle:hover { border-color:var(--gold); color:var(--gold); }
.page-body { padding:28px; flex:1; }

/* ── Cards ────────────────────────────────────────────── */
.card { background:var(--bg-card); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow-card); transition:background 0.3s, border-color 0.3s; }
.card-header { background:transparent; border-bottom:1px solid var(--border); padding:18px 24px; font-weight:700; font-size:0.95rem; color:var(--text-primary); display:flex; align-items:center; gap:8px; border-radius:16px 16px 0 0 !important; }
.card-header i { color:var(--gold); font-size:1.1rem; }
.card-body { padding:24px; }

/* ── Stat Cards ───────────────────────────────────────── */
.stat-card { background:var(--bg-card); border:1px solid var(--border); border-radius:16px; padding:24px; position:relative; overflow:hidden; transition:all 0.25s; box-shadow:var(--shadow-card); }
.stat-card:hover { transform:translateY(-3px); box-shadow:0 8px 28px rgba(0,0,0,0.1); }
.stat-icon { width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:16px; }
.stat-icon.gold   { background:rgba(184,134,11,0.12); color:var(--gold); }
.stat-icon.green  { background:rgba(25,135,84,0.12);  color:var(--success); }
.stat-icon.red    { background:rgba(220,53,69,0.12);  color:var(--danger); }
.stat-icon.blue   { background:rgba(3,105,161,0.12);  color:var(--info); }
.stat-icon.purple { background:rgba(111,66,193,0.12); color:#6f42c1; }
.stat-value { font-size:2.2rem; font-weight:700; line-height:1; color:var(--text-primary); }
.stat-label { font-size:0.82rem; color:var(--text-muted); margin-top:4px; font-weight:500; }

/* ── Table ────────────────────────────────────────────── */
.table { color:var(--text-primary); border-color:var(--border); margin:0; }
.table thead th { background:var(--gold-bg); color:var(--gold); font-weight:700; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.8px; border-bottom:1px solid var(--border); border-top:none; padding:14px 16px; white-space:nowrap; }
.table tbody td { border-color:var(--border); padding:14px 16px; vertical-align:middle; font-size:0.9rem; background:var(--bg-card); }
.table tbody tr:hover td { background:var(--gold-bg); }

/* ── Badges ───────────────────────────────────────────── */
.badge-status { display:inline-flex; align-items:center; gap:5px; padding:5px 12px; border-radius:20px; font-size:0.78rem; font-weight:600; }
.badge-pending  { background:rgba(217,119,6,0.1);  color:var(--warning); border:1px solid rgba(217,119,6,0.25); }
.badge-confirmed{ background:rgba(25,135,84,0.1);  color:var(--success); border:1px solid rgba(25,135,84,0.25); }
.badge-declined { background:rgba(220,53,69,0.1);  color:var(--danger);  border:1px solid rgba(220,53,69,0.25); }
.badge-checkedin{ background:rgba(3,105,161,0.1);  color:var(--info);    border:1px solid rgba(3,105,161,0.25); }

/* ── Buttons ──────────────────────────────────────────── */
.btn-gold { background:linear-gradient(135deg,var(--gold-dark),var(--gold-light)); color:#fff; font-weight:700; border:none; border-radius:10px; padding:9px 20px; font-family:'Cairo',sans-serif; font-size:0.9rem; transition:all 0.2s; display:inline-flex; align-items:center; gap:6px; cursor:pointer; text-decoration:none; }
.btn-gold:hover { color:#fff; transform:translateY(-1px); box-shadow:0 4px 16px rgba(184,134,11,0.35); filter:brightness(1.08); }
.btn-outline-gold { border:1.5px solid var(--gold); color:var(--gold); background:transparent; border-radius:10px; font-weight:600; padding:8px 18px; font-family:'Cairo',sans-serif; font-size:0.9rem; transition:all 0.2s; display:inline-flex; align-items:center; gap:6px; text-decoration:none; cursor:pointer; }
.btn-outline-gold:hover { background:var(--gold-bg); color:var(--gold); }

/* ── Forms ────────────────────────────────────────────── */
.form-control, .form-select {
    background: var(--bg-input);
    border: 1.5px solid var(--border);
    color: var(--text-primary);
    border-radius: 10px;
    padding: 10px 14px;
    font-family: 'Cairo', sans-serif;
    font-size: 0.9rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form-control:focus, .form-select:focus {
    background: var(--bg-input);
    color: var(--text-primary);
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(184,134,11,0.12);
    outline: none;
}
.form-control::placeholder { color:var(--text-muted); opacity:0.7; }
.form-label { color:var(--text-muted); font-size:0.83rem; font-weight:700; margin-bottom:6px; display:block; }
.form-text  { color:var(--text-muted); font-size:0.78rem; margin-top:4px; }

/* ── Input Group — unified border ────────────────────── */
.input-group {
    border: 1.5px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.input-group:focus-within {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(184,134,11,0.12);
}
.input-group .input-group-text {
    background: var(--bg-input);
    border: none;
    color: var(--text-muted);
    padding: 10px 14px;
    border-radius: 0;
    font-size: 1rem;
}
.input-group .form-control {
    background: var(--bg-input);
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--text-primary);
    padding: 10px 14px;
}
.input-group .form-control:focus {
    border: none !important;
    box-shadow: none !important;
    outline: none;
}
/* separator line between icon and input */
.input-group .input-group-text + .form-control {
    border-right: 1.5px solid var(--border) !important;
}
/* show/hide password button on the left */
.input-group .form-control + .input-group-text {
    /*border-right: 1.5px solid var(--border);*/
    border-right: none;
    cursor: pointer;
    transition: color 0.2s;
}
.input-group .form-control + .input-group-text:hover { color:var(--gold); }

/* Validation */
.field-validation-error { color:var(--danger); font-size:0.78rem; margin-top:4px; display:block; }
.input-validation-error { border-color:var(--danger) !important; }
.validation-summary-errors { background:rgba(220,53,69,0.08); border:1px solid rgba(220,53,69,0.25); border-radius:10px; padding:12px 16px; color:var(--danger); font-size:0.85rem; margin-bottom:16px; }
.validation-summary-errors ul { margin:0; padding-right:20px; }

/* ── Auth Pages ───────────────────────────────────────── */
.auth-wrapper { min-height:100vh; display:flex; background:var(--bg-page); }
.auth-left { flex:1; background:linear-gradient(145deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 40px; position:relative; overflow:hidden; }
.auth-left::before { content:''; position:absolute; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle,rgba(184,134,11,0.15) 0%,transparent 70%); top:-100px; right:-100px; }
.auth-left::after  { content:''; position:absolute; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle,rgba(184,134,11,0.1) 0%,transparent 70%); bottom:-80px; left:-80px; }
.auth-brand { text-align:center; z-index:1; }
.auth-brand-icon { width:80px; height:80px; background:linear-gradient(135deg,var(--gold-dark),var(--gold-light)); border-radius:24px; display:flex; align-items:center; justify-content:center; font-size:2rem; margin:0 auto 24px; box-shadow:0 8px 30px rgba(184,134,11,0.4); }
.auth-brand h2 { color:#fff; font-weight:700; font-size:1.8rem; margin-bottom:8px; }
.auth-brand p  { color:rgba(255,255,255,0.5); font-size:0.9rem; }
.auth-features { margin-top:48px; z-index:1; width:100%; max-width:320px; }
.auth-feature-item { display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,0.06); }
.auth-feature-item:last-child { border-bottom:none; }
.auth-feature-icon { width:38px; height:38px; border-radius:10px; background:rgba(184,134,11,0.15); display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:1rem; flex-shrink:0; }
.auth-feature-text strong { display:block; color:#fff; font-size:0.88rem; font-weight:600; }
.auth-feature-text span   { color:rgba(255,255,255,0.4); font-size:0.78rem; }
.auth-right { width:480px; display:flex; align-items:center; justify-content:center; padding:48px 56px; background:var(--bg-card); }
.auth-form-box { width:100%; }
.auth-form-box h4 { font-size:1.5rem; font-weight:700; color:var(--text-primary); margin-bottom:6px; }
.auth-form-box .auth-subtitle { color:var(--text-muted); font-size:0.88rem; margin-bottom:32px; }

/* ── Progress ─────────────────────────────────────────── */
.progress { background:var(--border); border-radius:10px; }
.progress-bar { border-radius:10px; }

/* ── List Group ───────────────────────────────────────── */
.list-group-item { background:var(--bg-card) !important; border-color:var(--border) !important; color:var(--text-primary) !important; padding:14px 20px; }

/* ── Alert ────────────────────────────────────────────── */
hr { border-color:var(--border); opacity:1; }
.alert { border-radius:12px; border:none; padding:14px 18px; font-size:0.88rem; }
.alert-danger  { background:rgba(220,53,69,0.1);  color:var(--danger);  border:1px solid rgba(220,53,69,0.2)  !important; }
.alert-success { background:rgba(25,135,84,0.1);  color:var(--success); border:1px solid rgba(25,135,84,0.2)  !important; }
.alert-warning { background:rgba(217,119,6,0.1);  color:var(--warning); border:1px solid rgba(217,119,6,0.2)  !important; }

/* ── Checkbox ─────────────────────────────────────────── */
.form-check-input:checked { background-color:var(--gold); border-color:var(--gold); }
.form-check-label { font-size:0.88rem; color:var(--text-muted); }

/* ── Empty State ──────────────────────────────────────── */
.empty-state { text-align:center; padding:60px 20px; color:var(--text-muted); }
.empty-state i { font-size:3rem; opacity:0.3; margin-bottom:16px; display:block; }
.empty-state h6 { font-size:1rem; font-weight:600; margin-bottom:8px; }
.empty-state p  { font-size:0.85rem; }

/* ── Scrollbar ────────────────────────────────────────── */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:10px; }

/* ── Text Utils ───────────────────────────────────────── */
.text-gold  { color:var(--gold) !important; }
.text-muted { color:var(--text-muted) !important; }