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

/* ========== DARK THEME (default) ========== */
[data-theme="dark"] {
    --bg-primary: #0a0a1a;
    --bg-secondary: rgba(255,255,255,0.05);
    --bg-tertiary: rgba(255,255,255,0.03);
    --bg-nav: rgba(10,10,26,0.95);
    --bg-auth: linear-gradient(135deg,#0a0a1a 0%,#1a0a2e 50%,#0a1a2e 100%);
    --bg-input: rgba(255,255,255,0.08);
    --bg-hover: rgba(255,255,255,0.06);
    --bg-glass: rgba(255,255,255,0.06);
    --bg-glass-hover: rgba(255,255,255,0.1);
    --border-primary: rgba(255,255,255,0.08);
    --border-input: rgba(255,255,255,0.15);
    --border-accent: rgba(255,183,77,0.3);
    --border-glass: rgba(255,255,255,0.12);
    --text-primary: #e0e0e0;
    --text-secondary: #aaa;
    --text-muted: #888;
    --text-dim: #666;
    --text-heading: #ffb74d;
    --text-accent: #ffb74d;
    --accent-primary: #ff9800;
    --accent-secondary: #ff5722;
    --accent-gradient: linear-gradient(135deg,#ff9800,#ff5722);
    --google-btn-bg: #fff;
    --google-btn-text: #333;
    --google-btn-shadow: rgba(255,255,255,0.2);
    --divider: rgba(255,255,255,0.1);
    --shadow: rgba(0,0,0,0.3);
    --stat1:#ff9800; --stat2:#4caf50; --stat3:#2196f3; --stat4:#9c27b0;
    --stat1-bar: linear-gradient(90deg,#ff9800,#ff5722);
    --stat2-bar: linear-gradient(90deg,#4caf50,#8bc34a);
    --stat3-bar: linear-gradient(90deg,#2196f3,#03a9f4);
    --stat4-bar: linear-gradient(90deg,#9c27b0,#e91e63);
    --progress-bg: rgba(255,255,255,0.1);
    --progress-fill: linear-gradient(90deg,#ff9800,#4caf50);
    --select-bg: #1a1a2e;
    --cat-deity-bg: rgba(156,39,176,0.15); --cat-deity-text: #ce93d8;
    --cat-prasad-bg: rgba(76,175,80,0.15); --cat-prasad-text: #81c784;
    --cat-sanitation-bg: rgba(33,150,243,0.15); --cat-sanitation-text: #64b5f6;
    --cat-events-bg: rgba(255,152,0,0.15); --cat-events-text: #ffb74d;
    --cat-general-bg: rgba(158,158,158,0.15); --cat-general-text: #bdbdbd;
}

/* ========== LIGHT THEME (Vedabase-inspired) ========== */
[data-theme="light"] {
    --bg-primary: #FFF8E1;
    --bg-secondary: rgba(80,40,10,0.05);
    --bg-tertiary: rgba(80,40,10,0.03);
    --bg-nav: rgba(255,243,210,0.97);
    --bg-auth: linear-gradient(135deg,#FFF8E1 0%,#FFE0B2 50%,#FFF3E0 100%);
    --bg-input: rgba(80,40,10,0.06);
    --bg-hover: rgba(80,40,10,0.08);
    --bg-glass: rgba(255,255,255,0.5);
    --bg-glass-hover: rgba(255,255,255,0.65);
    --border-primary: rgba(80,40,10,0.15);
    --border-input: rgba(80,40,10,0.25);
    --border-accent: rgba(139,0,0,0.35);
    --border-glass: rgba(80,40,10,0.18);
    --text-primary: #1a1a1a;
    --text-secondary: #2d2d2d;
    --text-muted: #4a4a4a;
    --text-dim: #5c5c5c;
    --text-heading: #8B0000;
    --text-accent: #8B0000;
    --accent-primary: #B71C1C;
    --accent-secondary: #BF360C;
    --accent-gradient: linear-gradient(135deg,#B71C1C,#BF360C);
    --google-btn-bg: #fff;
    --google-btn-text: #1a1a1a;
    --google-btn-shadow: rgba(0,0,0,0.12);
    --divider: rgba(0,0,0,0.15);
    --shadow: rgba(0,0,0,0.1);
    --stat1:#BF360C; --stat2:#1B5E20; --stat3:#0D47A1; --stat4:#4A148C;
    --stat1-bar: linear-gradient(90deg,#BF360C,#E65100);
    --stat2-bar: linear-gradient(90deg,#1B5E20,#2E7D32);
    --stat3-bar: linear-gradient(90deg,#0D47A1,#1565C0);
    --stat4-bar: linear-gradient(90deg,#4A148C,#7B1FA2);
    --progress-bg: rgba(0,0,0,0.08);
    --progress-fill: linear-gradient(90deg,#BF360C,#1B5E20);
    --select-bg: #FFF8E1;
    --cat-deity-bg: rgba(74,20,140,0.1); --cat-deity-text: #4A148C;
    --cat-prasad-bg: rgba(27,94,32,0.1); --cat-prasad-text: #1B5E20;
    --cat-sanitation-bg: rgba(13,71,161,0.1); --cat-sanitation-text: #0D47A1;
    --cat-events-bg: rgba(191,54,12,0.1); --cat-events-text: #BF360C;
    --cat-general-bg: rgba(66,66,66,0.1); --cat-general-text: #424242;
}

/* ========== BASE ========== */
* { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family:'Poppins',sans-serif;
    background:var(--bg-primary);
    color:var(--text-primary);
    overflow-x:hidden;
    transition:background .35s,color .35s;
    min-height:100vh;
}

a { color:var(--text-accent); text-decoration:none; }
a:hover { opacity:0.8; }

/* ========== NAVBAR ========== */
.navbar {
    position:fixed; top:0; left:0; right:0; z-index:1000;
    background:var(--bg-nav);
    backdrop-filter:blur(20px);
    border-bottom:1px solid var(--border-accent);
    padding:10px 20px;
    display:flex; align-items:center; gap:12px;
    transition:background .35s,border-color .35s;
}

.nav-brand {
    font-size:18px; font-weight:700;
    background:var(--accent-gradient);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    white-space:nowrap;
}

.nav-links { display:flex; gap:6px; flex-wrap:wrap; }

.nav-link {
    padding:6px 14px;
    border:1px solid var(--border-accent);
    background:transparent;
    color:var(--text-secondary);
    border-radius:20px;
    font-size:12px; font-family:'Poppins',sans-serif;
    text-decoration:none;
    transition:all .3s;
    white-space:nowrap;
}

.nav-link:hover, .nav-link.active {
    background:var(--accent-gradient);
    color:#fff; border-color:transparent;
    opacity:1;
}

.theme-toggle {
    display:flex; align-items:center; gap:6px;
    margin-left:8px;
}

.toggle-icon { font-size:16px; cursor:pointer; }

.toggle-switch {
    width:44px; height:24px;
    background:var(--bg-secondary);
    border:2px solid var(--border-accent);
    border-radius:12px;
    cursor:pointer;
    position:relative;
    transition:all .3s;
    flex-shrink:0;
}

.toggle-switch::after {
    content:'';
    position:absolute; top:2px; left:2px;
    width:16px; height:16px; border-radius:50%;
    background:var(--accent-gradient);
    transition:transform .3s;
    box-shadow:0 2px 4px var(--shadow);
}

[data-theme="light"] .toggle-switch::after { transform:translateX(20px); }

.nav-user {
    display:flex; align-items:center; gap:8px;
    margin-left:8px;
}

.nav-avatar {
    width:32px; height:32px; border-radius:50%;
    background:var(--accent-gradient);
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-weight:600; font-size:12px;
    overflow:hidden;
}

.nav-avatar img { width:100%; height:100%; object-fit:cover; }

.nav-logout {
    padding:4px 12px;
    border:1px solid rgba(244,67,54,0.4);
    color:#f44336;
    border-radius:6px;
    font-size:11px;
    background:transparent;
    cursor:pointer;
    font-family:'Poppins',sans-serif;
    text-decoration:none;
}

/* ========== MAIN CONTENT ========== */
.main-content { padding:70px 20px 40px; max-width:1200px; margin:0 auto; }

.page-header {
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:30px; flex-wrap:wrap; gap:15px;
}

.page-header h2 { font-size:22px; color:var(--text-heading); }

.page-subtitle { font-size:13px; color:var(--text-muted); }

/* ========== CARDS ========== */
.card {
    background:var(--bg-secondary);
    border:1px solid var(--border-primary);
    border-radius:14px;
    padding:20px;
    transition:background .35s,border-color .35s;
}

.card h3 {
    font-size:16px; color:var(--text-heading);
    margin-bottom:16px;
    display:flex; align-items:center; gap:8px;
}

/* Glassmorphic Card */
.glass-card {
    background:var(--bg-glass);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border:1px solid var(--border-glass);
    border-radius:16px;
    padding:20px;
    transition:all .35s;
    box-shadow:0 4px 24px var(--shadow);
}

.glass-card:hover {
    background:var(--bg-glass-hover);
    border-color:var(--border-accent);
    transform:translateY(-2px);
    box-shadow:0 8px 32px var(--shadow);
}

/* ========== STATS GRID ========== */
.stats-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:16px; margin-bottom:30px;
}

.stat-card {
    background:var(--bg-secondary);
    border:1px solid var(--border-primary);
    border-radius:14px;
    padding:20px;
    position:relative; overflow:hidden;
    transition:background .35s,border-color .35s;
}

.stat-card::before {
    content:''; position:absolute;
    top:0; left:0; right:0; height:3px;
}

.stat-card:nth-child(1)::before { background:var(--stat1-bar); }
.stat-card:nth-child(2)::before { background:var(--stat2-bar); }
.stat-card:nth-child(3)::before { background:var(--stat3-bar); }
.stat-card:nth-child(4)::before { background:var(--stat4-bar); }
.stat-card:nth-child(5)::before { background:var(--stat1-bar); }
.stat-card:nth-child(6)::before { background:var(--stat2-bar); }

.stat-label { font-size:12px; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px; }
.stat-value { font-size:32px; font-weight:700; margin:8px 0 4px; }
.stat-card:nth-child(1) .stat-value { color:var(--stat1); }
.stat-card:nth-child(2) .stat-value { color:var(--stat2); }
.stat-card:nth-child(3) .stat-value { color:var(--stat3); }
.stat-card:nth-child(4) .stat-value { color:var(--stat4); }
.stat-card:nth-child(5) .stat-value { color:var(--stat1); }
.stat-card:nth-child(6) .stat-value { color:var(--stat2); }
.stat-sub { font-size:12px; color:var(--text-dim); }

/* Admin glassmorphic stats */
.admin-stats-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:16px; margin-bottom:24px;
}

.admin-stat {
    display:flex; align-items:center; gap:16px;
}

.admin-stat-icon {
    width:50px; height:50px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    font-size:24px;
    background:rgba(255,152,0,0.12);
}

.admin-stat-val { font-size:24px; font-weight:700; color:var(--text-primary); }
.admin-stat-label { font-size:12px; color:var(--text-muted); }

/* ========== PROGRESS BAR ========== */
.progress-section {
    background:var(--bg-secondary);
    border:1px solid var(--border-primary);
    border-radius:14px;
    padding:24px; margin-bottom:24px;
    transition:background .35s,border-color .35s;
}

.progress-section h3 { font-size:16px; color:var(--text-heading); margin-bottom:15px; }

.progress-bar-bg {
    background:var(--progress-bg);
    border-radius:10px; height:24px; overflow:hidden;
}

.progress-bar-fill {
    height:100%; background:var(--progress-fill);
    border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    font-size:12px; font-weight:600; color:#fff;
    transition:width 1s ease;
}

.progress-info {
    display:flex; justify-content:space-between;
    margin-top:10px; font-size:13px; color:var(--text-muted);
}

/* ========== SECTION GRID ========== */
.section-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(350px,1fr));
    gap:20px; margin-bottom:24px;
}

/* ========== BOOKING ITEMS ========== */
.booking-item {
    display:flex; align-items:center; gap:14px;
    padding:12px;
    background:var(--bg-tertiary);
    border-radius:10px; margin-bottom:10px;
    border-left:3px solid var(--stat1);
    transition:background .2s;
}

.booking-item:hover { background:var(--bg-hover); }
.booking-item:nth-child(2) { border-left-color:var(--stat2); }
.booking-item:nth-child(3) { border-left-color:var(--stat3); }

.booking-date { text-align:center; min-width:50px; }
.booking-day { font-size:22px; font-weight:700; color:var(--text-accent); }
.booking-month { font-size:11px; color:var(--text-muted); text-transform:uppercase; }

.booking-details { flex:1; }
.booking-name { font-size:14px; font-weight:500; color:var(--text-primary); }
.booking-time { font-size:12px; color:var(--text-muted); margin-top:2px; }

/* ========== HISTORY ITEMS ========== */
.history-item {
    display:flex; justify-content:space-between; align-items:center;
    padding:10px 0;
    border-bottom:1px solid var(--border-primary);
}

.history-item:last-child { border-bottom:none; }
.history-name { font-size:14px; color:var(--text-primary); }
.history-date { font-size:12px; color:var(--text-muted); }
.history-hours { font-size:14px; font-weight:600; color:var(--stat2); }

/* ========== QUEUE ITEMS ========== */
.queue-item {
    display:flex; align-items:center; justify-content:space-between;
    padding:14px;
    background:var(--bg-tertiary);
    border-radius:10px; margin-bottom:10px;
    flex-wrap:wrap; gap:10px;
}

.queue-student { display:flex; align-items:center; gap:12px; }

.queue-avatar {
    width:40px; height:40px; border-radius:50%;
    background:linear-gradient(135deg,#2196f3,#03a9f4);
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-weight:600; font-size:14px;
}

.queue-name { font-size:14px; font-weight:500; color:var(--text-primary); }
.queue-college { font-size:12px; color:var(--text-muted); }
.queue-actions { display:flex; gap:8px; }

/* ========== SEVA CATALOGUE ========== */
.seva-filters { display:flex; gap:10px; margin-bottom:20px; flex-wrap:wrap; }

.filter-btn {
    padding:8px 16px;
    border:1px solid var(--border-input);
    background:transparent;
    color:var(--text-secondary);
    border-radius:20px;
    cursor:pointer;
    font-size:13px; font-family:'Poppins',sans-serif;
    transition:all .3s;
}

.filter-btn.active, .filter-btn:hover {
    background:rgba(255,152,0,0.15);
    border-color:var(--accent-primary);
    color:var(--accent-primary);
}

.seva-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:16px;
}

.seva-card {
    background:var(--bg-secondary);
    border:1px solid var(--border-primary);
    border-radius:14px; padding:20px;
    transition:transform .2s,border-color .3s,background .35s;
    cursor:pointer;
}

.seva-card:hover {
    transform:translateY(-3px);
    border-color:var(--border-accent);
}

.seva-card-header {
    display:flex; justify-content:space-between; align-items:flex-start;
    margin-bottom:12px;
}

.seva-card-header h4 { font-size:16px; color:var(--text-primary); }
.seva-card p { font-size:13px; color:var(--text-muted); margin-bottom:14px; line-height:1.5; }
.seva-meta { display:flex; gap:16px; font-size:12px; color:var(--text-dim); margin-bottom:14px; }
.seva-slots { display:flex; gap:8px; flex-wrap:wrap; }

/* Category Badges */
.cat-badge { padding:3px 10px; border-radius:12px; font-size:11px; font-weight:500; }
.cat-deity { background:var(--cat-deity-bg); color:var(--cat-deity-text); }
.cat-prasad { background:var(--cat-prasad-bg); color:var(--cat-prasad-text); }
.cat-sanitation { background:var(--cat-sanitation-bg); color:var(--cat-sanitation-text); }
.cat-events { background:var(--cat-events-bg); color:var(--cat-events-text); }
.cat-general { background:var(--cat-general-bg); color:var(--cat-general-text); }

.slot-chip {
    padding:6px 12px;
    background:rgba(255,152,0,0.1);
    border:1px solid rgba(255,152,0,0.3);
    border-radius:8px;
    font-size:12px; color:var(--stat1);
    cursor:pointer; transition:all .2s;
    text-decoration:none;
}

.slot-chip:hover { background:rgba(255,152,0,0.25); opacity:1; }

.slot-chip.full {
    background:rgba(244,67,54,0.1);
    border-color:rgba(244,67,54,0.3);
    color:#e53935;
    cursor:not-allowed;
}

/* ========== ATTENDANCE ========== */
.att-header {
    background:var(--bg-secondary);
    border:1px solid var(--border-primary);
    border-radius:14px; padding:20px;
    margin-bottom:20px;
    display:flex; justify-content:space-between; align-items:center;
    flex-wrap:wrap; gap:15px;
    transition:background .35s,border-color .35s;
}

.att-slot-info h3 { color:var(--text-heading); font-size:18px; }
.att-slot-info p { color:var(--text-muted); font-size:13px; margin-top:4px; }

.att-timer {
    text-align:center; padding:12px 20px;
    background:rgba(76,175,80,0.1);
    border:1px solid rgba(76,175,80,0.3);
    border-radius:10px;
}

.att-timer-label { font-size:11px; color:var(--text-muted); text-transform:uppercase; }
.att-timer-value { font-size:24px; font-weight:700; color:var(--stat2); }

.att-list {
    background:var(--bg-secondary);
    border:1px solid var(--border-primary);
    border-radius:14px; overflow:hidden;
    transition:background .35s,border-color .35s;
}

.att-row {
    display:flex; align-items:center;
    padding:14px 20px;
    border-bottom:1px solid var(--border-primary);
    gap:15px; transition:background .2s;
}

.att-row:hover { background:var(--bg-hover); }
.att-row:last-child { border-bottom:none; }
.att-num { width:30px; font-size:14px; color:var(--text-dim); font-weight:600; }
.att-student-info { flex:1; }
.att-name { font-size:14px; font-weight:500; color:var(--text-primary); }
.att-college { font-size:12px; color:var(--text-muted); }
.att-actions { display:flex; gap:8px; flex-wrap:wrap; }

.att-btn {
    padding:6px 14px; border-radius:6px;
    font-size:12px; cursor:pointer;
    font-family:'Poppins',sans-serif;
    border:1px solid; background:transparent;
    transition:all .2s;
}

.att-btn.present { border-color:rgba(76,175,80,0.4); color:#4caf50; }
.att-btn.present:hover, .att-btn.present.selected { background:rgba(76,175,80,0.2); }
.att-btn.absent { border-color:rgba(244,67,54,0.4); color:#f44336; }
.att-btn.absent:hover, .att-btn.absent.selected { background:rgba(244,67,54,0.2); }
.att-btn.late { border-color:rgba(255,193,7,0.4); color:#f9a825; }
.att-btn.late:hover, .att-btn.late.selected { background:rgba(255,193,7,0.2); }
.att-btn.exception { border-color:rgba(156,39,176,0.4); color:#9c27b0; }
.att-btn.exception:hover, .att-btn.exception.selected { background:rgba(156,39,176,0.2); }

/* ========== AUTH ========== */
.auth-page {
    min-height:100vh;
    display:flex; justify-content:center; align-items:center;
    background:var(--bg-auth);
    padding:70px 20px 40px;
    transition:background .35s;
}

.auth-container { width:440px; max-width:95%; }

.auth-header { text-align:center; margin-bottom:30px; }

.auth-header .om-symbol {
    font-size:48px; color:var(--text-accent);
    text-shadow:0 0 30px rgba(255,183,77,0.3);
}

.auth-header h1 {
    font-size:28px;
    background:var(--accent-gradient);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    margin-top:10px;
}

.auth-header p { color:var(--text-muted); font-size:13px; margin-top:5px; }

.auth-card {
    background:var(--bg-secondary);
    border:1px solid var(--border-primary);
    border-radius:16px; padding:30px;
    backdrop-filter:blur(10px);
    transition:background .35s,border-color .35s;
}

.auth-toggle {
    display:flex;
    gap:10px;
    background:transparent;
    border:none;
    border-radius:10px; padding:0;
    margin-bottom:20px;
}

.auth-toggle button {
    flex:1; padding:8px;
    border:1px solid var(--border-input);
    background:transparent;
    color:var(--text-muted);
    font-size:13px; font-family:'Poppins',sans-serif;
    border-radius:8px; cursor:pointer;
    transition:all .3s;
}

.auth-toggle button.active {
    background:var(--accent-gradient);
    color:#fff;
    border-color:transparent;
}

.auth-section { display:none; }
.auth-section.active { display:block; }

.google-btn {
    width:100%; padding:12px;
    background:#FFFDE7;
    color:#1a1a1a;
    border:1px solid rgba(255,183,77,0.5);
    border-radius:10px;
    font-size:15px; font-weight:500;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:10px;
    font-family:'Poppins',sans-serif;
    transition:transform .2s,box-shadow .2s;
}

.google-btn:hover {
    transform:translateY(-2px);
    box-shadow:0 5px 20px rgba(255,183,77,0.25);
    background:#FFF8E1;
}

.google-note { text-align:center; font-size:12px; color:var(--text-dim); margin-top:8px; }

.divider {
    display:flex; align-items:center; gap:15px;
    margin:20px 0; color:var(--text-dim); font-size:12px;
}

.divider::before, .divider::after {
    content:''; flex:1; height:1px;
    background:var(--divider);
}

/* ========== FORMS ========== */
.form-group { margin-bottom:16px; }

.form-group label {
    display:block; font-size:13px;
    color:var(--text-secondary); margin-bottom:6px;
}

.form-group input, .form-group select, .form-group textarea {
    width:100%; padding:10px 14px;
    background:var(--bg-input);
    border:1px solid var(--border-input);
    border-radius:8px;
    color:var(--text-primary);
    font-size:14px; font-family:'Poppins',sans-serif;
    outline:none;
    transition:border-color .3s,background .35s;
}

.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color:var(--accent-primary);
}

.form-group select { cursor:pointer; }
.form-group select option { background:var(--select-bg); }
.form-group textarea { resize:vertical; min-height:80px; }

.form-row {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

/* ========== BUTTONS ========== */
.btn-primary {
    padding:12px 24px;
    background:var(--accent-gradient);
    color:#fff; border:none;
    border-radius:10px;
    font-size:15px; font-weight:600;
    cursor:pointer; font-family:'Poppins',sans-serif;
    transition:transform .2s,box-shadow .2s;
    text-decoration:none; display:inline-block;
    text-align:center;
}

.btn-primary:hover {
    transform:translateY(-2px);
    box-shadow:0 5px 20px rgba(255,87,34,0.4);
    color:#fff; opacity:1;
}

.btn-secondary {
    padding:8px 20px;
    background:transparent;
    color:var(--text-secondary);
    border:1px solid var(--border-input);
    border-radius:8px;
    font-size:13px; cursor:pointer;
    font-family:'Poppins',sans-serif;
    text-decoration:none; display:inline-block;
    transition:all .3s;
}

.btn-secondary:hover {
    border-color:var(--accent-primary);
    color:var(--accent-primary);
    opacity:1;
}

.btn-approve {
    padding:6px 16px;
    background:rgba(76,175,80,0.12);
    border:1px solid rgba(76,175,80,0.4);
    color:#4caf50;
    border-radius:6px; cursor:pointer;
    font-size:12px; font-family:'Poppins',sans-serif;
}

.btn-reject {
    padding:6px 16px;
    background:rgba(244,67,54,0.12);
    border:1px solid rgba(244,67,54,0.4);
    color:#f44336;
    border-radius:6px; cursor:pointer;
    font-size:12px; font-family:'Poppins',sans-serif;
}

.btn-cancel {
    padding:5px 12px;
    border:1px solid rgba(255,87,34,0.4);
    color:var(--accent-secondary);
    border-radius:6px;
    font-size:11px; cursor:pointer;
    background:transparent; font-family:'Poppins',sans-serif;
    text-decoration:none;
}

.btn-small {
    padding:4px 12px; font-size:11px;
    border-radius:6px; cursor:pointer;
    font-family:'Poppins',sans-serif;
    border:1px solid var(--border-input);
    background:transparent;
    color:var(--text-secondary);
    text-decoration:none; display:inline-block;
}

.btn-small:hover { border-color:var(--accent-primary); color:var(--accent-primary); opacity:1; }

/* ========== STATUS BADGES ========== */
.badge { padding:3px 10px; border-radius:12px; font-size:11px; font-weight:500; display:inline-block; }
.badge-approved { background:rgba(76,175,80,0.2); color:#4caf50; }
.badge-pending { background:rgba(255,193,7,0.2); color:#f9a825; }
.badge-rejected { background:rgba(244,67,54,0.2); color:#f44336; }
.badge-suspended { background:rgba(244,67,54,0.2); color:#f44336; }
.badge-active { background:rgba(76,175,80,0.2); color:#4caf50; }
.badge-inactive { background:rgba(158,158,158,0.2); color:#9e9e9e; }
.badge-draft { background:rgba(158,158,158,0.2); color:#9e9e9e; }
.badge-open { background:rgba(33,150,243,0.2); color:#2196f3; }
.badge-full { background:rgba(255,152,0,0.2); color:#ff9800; }
.badge-closed { background:rgba(158,158,158,0.2); color:#9e9e9e; }
.badge-completed { background:rgba(76,175,80,0.2); color:#4caf50; }
.badge-confirmed { background:rgba(33,150,243,0.2); color:#2196f3; }
.badge-waitlisted { background:rgba(255,152,0,0.2); color:#ff9800; }
.badge-cancelled { background:rgba(158,158,158,0.2); color:#9e9e9e; }
.badge-noshow { background:rgba(244,67,54,0.2); color:#f44336; }
.badge-admin { background:rgba(156,39,176,0.2); color:#9c27b0; }
.badge-coordinator { background:rgba(33,150,243,0.2); color:#2196f3; }
.badge-incharge { background:rgba(76,175,80,0.2); color:#4caf50; }
.badge-student { background:rgba(255,152,0,0.2); color:#ff9800; }
[data-theme="light"] .badge-approved { background:rgba(27,94,32,0.15); color:#1B5E20; }
[data-theme="light"] .badge-pending { background:rgba(230,81,0,0.15); color:#BF360C; }
[data-theme="light"] .badge-rejected { background:rgba(183,28,28,0.15); color:#B71C1C; }
[data-theme="light"] .badge-suspended { background:rgba(183,28,28,0.15); color:#B71C1C; }
[data-theme="light"] .badge-active { background:rgba(27,94,32,0.15); color:#1B5E20; }
[data-theme="light"] .badge-open { background:rgba(13,71,161,0.15); color:#0D47A1; }
[data-theme="light"] .badge-completed { background:rgba(27,94,32,0.15); color:#1B5E20; }
[data-theme="light"] .badge-confirmed { background:rgba(13,71,161,0.15); color:#0D47A1; }
[data-theme="light"] .badge-full { background:rgba(191,54,12,0.15); color:#BF360C; }
[data-theme="light"] .badge-admin { background:rgba(74,20,140,0.15); color:#4A148C; }
[data-theme="light"] .badge-coordinator { background:rgba(13,71,161,0.15); color:#0D47A1; }
[data-theme="light"] .badge-incharge { background:rgba(27,94,32,0.15); color:#1B5E20; }
[data-theme="light"] .badge-student { background:rgba(191,54,12,0.15); color:#BF360C; }
[data-theme="light"] .history-hours { color:#1B5E20; }
[data-theme="light"] .btn-approve { color:#1B5E20; border-color:rgba(27,94,32,0.5); }
[data-theme="light"] .btn-reject { color:#B71C1C; border-color:rgba(183,28,28,0.5); }
[data-theme="light"] .att-btn.present { color:#1B5E20; border-color:rgba(27,94,32,0.5); }
[data-theme="light"] .att-btn.absent { color:#B71C1C; border-color:rgba(183,28,28,0.5); }
[data-theme="light"] .att-btn.late { color:#E65100; border-color:rgba(230,81,0,0.5); }
[data-theme="light"] .att-btn.exception { color:#4A148C; border-color:rgba(74,20,140,0.5); }
[data-theme="light"] .att-timer-value { color:#1B5E20; }
[data-theme="light"] .flash-success { color:#1B5E20; }
[data-theme="light"] .flash-error { color:#B71C1C; }
[data-theme="light"] .flash-info { color:#0D47A1; }
[data-theme="light"] .flash-warning { color:#E65100; }
[data-theme="light"] .nav-logout { color:#B71C1C; border-color:rgba(183,28,28,0.5); }
[data-theme="light"] .slot-chip { color:#BF360C; }
[data-theme="light"] .slot-chip.full { color:#B71C1C; }

/* ========== FLASH MESSAGES ========== */
.flash-messages { padding:70px 20px 0; max-width:1200px; margin:0 auto; }

.flash {
    padding:12px 20px; border-radius:10px;
    margin-bottom:10px; font-size:14px;
    display:flex; align-items:center; justify-content:space-between;
}

.flash-success { background:rgba(76,175,80,0.15); color:#4caf50; border:1px solid rgba(76,175,80,0.3); }
.flash-error { background:rgba(244,67,54,0.15); color:#f44336; border:1px solid rgba(244,67,54,0.3); }
.flash-info { background:rgba(33,150,243,0.15); color:#2196f3; border:1px solid rgba(33,150,243,0.3); }
.flash-warning { background:rgba(255,193,7,0.15); color:#f9a825; border:1px solid rgba(255,193,7,0.3); }

.flash-close {
    background:none; border:none; color:inherit;
    cursor:pointer; font-size:18px; opacity:0.7;
}

.flash-close:hover { opacity:1; }

/* ========== DATA TABLE ========== */
.data-table { width:100%; border-collapse:collapse; }

.data-table th, .data-table td {
    padding:12px 16px; text-align:left;
    border-bottom:1px solid var(--border-primary);
    font-size:13px;
}

.data-table th {
    color:var(--text-muted); font-weight:600;
    text-transform:uppercase; letter-spacing:1px;
    font-size:11px;
}

.data-table td { color:var(--text-primary); }
.data-table tr:hover td { background:var(--bg-hover); }

/* ========== EMPTY STATE ========== */
.empty-state {
    text-align:center; padding:40px 20px;
    color:var(--text-muted); font-size:14px;
}

.empty-state .empty-icon { font-size:48px; margin-bottom:10px; opacity:0.5; }

/* ========== PENDING PAGE ========== */
.pending-card {
    text-align:center; padding:40px;
}

.pending-icon { font-size:64px; margin-bottom:15px; }
.pending-title { font-size:20px; color:var(--text-heading); margin-bottom:10px; }
.pending-text { font-size:14px; color:var(--text-muted); line-height:1.6; }

/* ========== SEARCH ========== */
.search-bar {
    display:flex; gap:10px; margin-bottom:20px;
}

.search-bar input {
    flex:1; padding:10px 16px;
    background:var(--bg-input);
    border:1px solid var(--border-input);
    border-radius:10px;
    color:var(--text-primary);
    font-size:14px; font-family:'Poppins',sans-serif;
    outline:none;
}

.search-bar input:focus { border-color:var(--accent-primary); }

/* ========== RESPONSIVE ========== */
@media (max-width:768px) {
    .navbar { padding:8px 12px; gap:8px; }
    .nav-brand { font-size:15px; }
    .nav-links { display:none; }
    .nav-links.open { display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0; background:var(--bg-nav); padding:10px; border-bottom:1px solid var(--border-accent); }

    .hamburger { display:block; background:none; border:none; color:var(--text-secondary); font-size:22px; cursor:pointer; }

    .main-content { padding:65px 12px 30px; }
    .page-header { flex-direction:column; align-items:flex-start; gap:10px; }
    .page-header h2 { font-size:18px; }

    .stats-grid { grid-template-columns:1fr 1fr; gap:10px; }
    .stat-card { padding:14px; }
    .stat-value { font-size:26px; }

    .section-grid { grid-template-columns:1fr; }
    .seva-grid { grid-template-columns:1fr; }
    .admin-stats-grid { grid-template-columns:1fr 1fr; }

    .att-header { flex-direction:column; align-items:flex-start; }
    .att-actions { flex-wrap:wrap; gap:6px; }
    .att-btn { padding:5px 10px; font-size:11px; }
    .att-row { padding:12px; flex-wrap:wrap; }

    .booking-item { flex-wrap:wrap; }

    .queue-item { flex-direction:column; align-items:flex-start; }
    .queue-actions { width:100%; }
    .queue-actions button, .queue-actions a { flex:1; text-align:center; }

    .auth-container { width:95%; }
    .auth-card { padding:20px; }
    .auth-header h1 { font-size:24px; }

    .progress-info { flex-direction:column; gap:4px; font-size:12px; }
    .form-row { grid-template-columns:1fr; }

    .data-table { font-size:12px; }
    .data-table th, .data-table td { padding:8px 10px; }
}

@media (max-width:480px) {
    .stats-grid { grid-template-columns:1fr; }
    .admin-stats-grid { grid-template-columns:1fr; }
    .stat-value { font-size:22px; }
    .seva-meta { flex-wrap:wrap; gap:8px; }
    .seva-slots { flex-direction:column; }
    .att-actions { width:100%; }
    .att-btn { flex:1; text-align:center; }
}

/* ========== HAMBURGER (hidden on desktop) ========== */
.hamburger { display:none; }