/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --secondary: #6b7280;
    --success: #16a34a;
    --danger: #dc2626;
    --warning: #d97706;
    --bg: #f8fafc;
    --surface: #ffffff;
    --border: #e2e8f0;
    --text: #1e293b;
    --text-muted: #94a3b8;
    --sidebar-w: 240px;
    --radius: 8px;
    --shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
    --shadow-md: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.05);
}
html { font-size: 15px; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===== BUTTONS ===== */
.btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:var(--radius); font-size:.875rem; font-weight:500; cursor:pointer; border:none; transition:all .15s; white-space:nowrap; }
.btn-primary   { background:var(--primary);   color:#fff; }
.btn-primary:hover { background:var(--primary-dark); color:#fff; text-decoration:none; }
.btn-secondary { background:#fff; color:var(--text); border:1px solid var(--border); }
.btn-secondary:hover { background:#f1f5f9; text-decoration:none; }
.btn-success   { background:var(--success); color:#fff; }
.btn-success:hover { background:#15803d; color:#fff; text-decoration:none; }
.btn-danger    { background:var(--danger); color:#fff; }
.btn-danger:hover { background:#b91c1c; text-decoration:none; }
.btn-text      { background:transparent; padding:4px 8px; }
.btn-block     { width:100%; justify-content:center; }
.btn-sm        { padding:5px 10px; font-size:.8rem; }
.btn-xs        { padding:2px 6px; font-size:.75rem; }
.btn:disabled  { opacity:.5; cursor:not-allowed; }
.btn-logout    { color:var(--text-muted); font-size:.85rem; background:none; border:none; cursor:pointer; }
.btn-logout:hover { color:var(--danger); }

/* ===== ALERTS ===== */
.alert { padding:12px 16px; border-radius:var(--radius); margin-bottom:16px; font-size:.9rem; }
.alert-success { background:#dcfce7; color:#166534; border:1px solid #bbf7d0; }
.alert-error   { background:#fee2e2; color:#991b1b; border:1px solid #fecaca; }

/* ===== CARDS ===== */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:20px; overflow:hidden; }
.card-header { display:flex; justify-content:space-between; align-items:center; padding:14px 20px; border-bottom:1px solid var(--border); }
.card-header h2 { font-size:1rem; font-weight:600; }
.card-toolbar { padding:12px 20px; border-bottom:1px solid var(--border); }

/* ===== TABLES ===== */
.table { width:100%; border-collapse:collapse; font-size:.875rem; }
.table th { text-align:left; padding:10px 16px; background:#f8fafc; border-bottom:1px solid var(--border); font-weight:600; color:var(--secondary); font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; }
.table th.sortable { cursor:pointer; user-select:none; white-space:nowrap; }
.table th.sortable:hover { background:#f1f5f9; color:var(--primary); }
.table th.sortable::after { content:'↕'; margin-left:6px; opacity:.3; font-size:.85em; }
.table th.sort-asc::after  { content:'↑'; opacity:1; color:var(--primary); }
.table th.sort-desc::after { content:'↓'; opacity:1; color:var(--primary); }
.table td { padding:11px 16px; border-bottom:1px solid #f1f5f9; }
.table tr:last-child td { border-bottom:none; }
.table tr:hover td { background:#fafafa; }

/* ===== BADGES ===== */
.badge { display:inline-block; padding:2px 8px; border-radius:100px; font-size:.75rem; font-weight:600; }
.badge-pending  { background:#fef9c3; color:#854d0e; }
.badge-sent     { background:#dbeafe; color:#1e40af; }
.badge-signed   { background:#dcfce7; color:#166534; }
.badge-rejected { background:#fee2e2; color:#991b1b; }
.badge-expired  { background:#f3f4f6; color:#6b7280; }
.badge-admin    { background:#ede9fe; color:#5b21b6; }
.badge-guest    { background:#e0f2fe; color:#0369a1; }

/* ===== FORMS ===== */
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:.875rem; font-weight:500; margin-bottom:6px; }
.form-group input, .form-group select, .form-group textarea {
    width:100%; padding:9px 12px; border:1px solid var(--border); border-radius:var(--radius);
    font-size:.9rem; transition:border-color .15s; background:#fff;
}
.form-group input:focus, .form-group select:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.1); }
.form-hint { display:block; font-size:.8rem; color:var(--text-muted); margin-top:4px; }
.form-row  { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.form-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:20px; padding-top:16px; border-top:1px solid var(--border); }
.mt-2 { margin-top:16px; }

/* ===== LOGIN PAGE ===== */
.login-page { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#eff6ff,#f8fafc); }
.login-container { width:100%; max-width:400px; padding:20px; }
.login-card { background:#fff; border-radius:12px; box-shadow:var(--shadow-md); padding:40px; }
.login-logo { text-align:center; margin-bottom:32px; }
.login-logo svg { color:var(--primary); width:48px; height:48px; }
.login-logo h1 { font-size:1.6rem; font-weight:700; margin:8px 0 4px; }
.login-logo p  { color:var(--text-muted); font-size:.9rem; }

/* ===== ADMIN LAYOUT ===== */
.admin-layout { display:flex; min-height:100vh; }
.sidebar { width:var(--sidebar-w); background:#1e293b; color:#e2e8f0; display:flex; flex-direction:column; position:fixed; top:0; left:0; height:100vh; overflow-y:auto; z-index:100; }
.sidebar-brand { display:flex; align-items:center; gap:10px; padding:20px; font-weight:700; font-size:1.1rem; border-bottom:1px solid #334155; }
.sidebar-brand svg { color:#60a5fa; }
.sidebar-nav { list-style:none; padding:12px 0; flex:1; }
.sidebar-nav a { display:flex; align-items:center; gap:10px; padding:10px 20px; color:#94a3b8; font-size:.9rem; transition:all .15s; }
.sidebar-nav a:hover, .sidebar-nav a.active { background:#334155; color:#fff; text-decoration:none; }
.sidebar-nav a.active { border-right:3px solid #3b82f6; }
.sidebar-footer { padding:16px 20px; border-top:1px solid #334155; font-size:.85rem; display:flex; justify-content:space-between; align-items:center; }
.admin-main { margin-left:var(--sidebar-w); flex:1; }
.admin-content { padding:24px 28px; max-width:1200px; }
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; gap:12px; }
.page-header h1 { font-size:1.5rem; font-weight:700; }

/* ===== DASHBOARD ===== */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
.stat-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:20px; display:flex; align-items:center; gap:16px; box-shadow:var(--shadow); }
.stat-icon { width:48px; height:48px; border-radius:10px; display:flex; align-items:center; justify-content:center; }
.stat-blue   { background:#dbeafe; color:#1d4ed8; }
.stat-yellow { background:#fef9c3; color:#92400e; }
.stat-green  { background:#dcfce7; color:#166534; }
.stat-purple { background:#ede9fe; color:#5b21b6; }
.stat-value  { display:block; font-size:1.8rem; font-weight:700; line-height:1; }
.stat-label  { display:block; font-size:.8rem; color:var(--text-muted); margin-top:4px; }
.dashboard-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.activity-list { list-style:none; }
.activity-item { display:flex; justify-content:space-between; padding:10px 20px; border-bottom:1px solid #f1f5f9; font-size:.875rem; }
.activity-event { font-weight:500; }
.activity-meta { color:var(--text-muted); }

/* ===== INFO LIST ===== */
.info-list { padding:16px 20px; }
.info-list dt { font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); margin-top:12px; }
.info-list dd { font-size:.9rem; margin-top:2px; }

/* ===== DETAIL GRID ===== */
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; }

/* ===== FILTER TABS ===== */
.filter-tabs { display:flex; gap:4px; }
.tab { padding:5px 12px; border-radius:6px; font-size:.85rem; color:var(--secondary); }
.tab:hover, .tab.active { background:var(--primary); color:#fff; text-decoration:none; }

/* ===== PAGINATION ===== */
.pagination { display:flex; gap:4px; padding:12px 20px; }
.pagination a { padding:5px 10px; border-radius:6px; font-size:.85rem; border:1px solid var(--border); color:var(--text); }
.pagination a.active, .pagination a:hover { background:var(--primary); color:#fff; border-color:var(--primary); text-decoration:none; }

/* ===== UPLOAD AREA ===== */
.upload-area { border:2px dashed var(--border); border-radius:var(--radius); padding:30px; text-align:center; cursor:pointer; position:relative; transition:border-color .2s; }
.upload-area input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer; }
.upload-area.dragover { border-color:var(--primary); background:#eff6ff; }
.upload-hint svg { color:var(--text-muted); }
.upload-hint p { margin-top:8px; color:var(--text-muted); }
.upload-hint .link { color:var(--primary); }
.upload-hint small { color:var(--text-muted); }
.upload-selected { margin-top:8px; font-weight:500; }

/* ===== CENTERED PAGE ===== */
.centered-page { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg); }
.info-card { background:#fff; border-radius:12px; box-shadow:var(--shadow-md); padding:48px 40px; text-align:center; max-width:400px; }
.info-card h1 { font-size:3rem; font-weight:700; color:var(--primary); margin-bottom:8px; }
.info-card h2 { font-size:1.4rem; margin-bottom:12px; }
.success-icon { font-size:3rem; color:var(--success); margin-bottom:12px; }
.error-icon   { font-size:3rem; color:var(--danger); margin-bottom:12px; }

/* ===== MISC ===== */
.text-center { text-align:center; }
.text-muted  { color:var(--text-muted); }
.text-small  { font-size:.8rem; }
code { background:#f1f5f9; padding:2px 6px; border-radius:4px; font-size:.85em; }

/* ===== MODAL ===== */
.modal { position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; z-index:1000; }
.modal-content { background:#fff; border-radius:12px; padding:32px; max-width:400px; width:90%; }
.modal-content h3 { margin-bottom:12px; }
.modal-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:24px; }