/* =========================================================
   GLCA Admin & Examination Panel — Modern Red Theme
   ========================================================= */
:root {
  --glca-red: #c8102e;
  --glca-red-dark: #8f0c21;
  --glca-red-soft: #fdeef0;
  --ink: #1c1c1e;
  --ink-soft: #6a6a70;
  --border: #ececec;
  --bg: #f6f5f7;
  --sidebar-bg: #1c1418;
  --white: #fff;
  --success: #1e8e3e;
  --shadow: 0 4px 16px rgba(0,0,0,0.06);
  --radius: 12px;
}
* { box-sizing: border-box; }
body { margin:0; font-family:'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--ink); }
a { text-decoration:none; color: var(--glca-red); }
img { max-width:100%; }

.app-shell { display:grid; grid-template-columns: 250px 1fr; min-height:100vh; }

/* ---- Sidebar ---- */
.sidebar { background: var(--sidebar-bg); color: #ddd; padding: 22px 16px; position: sticky; top:0; height:100vh; overflow-y:auto; }
.sidebar .brand { display:flex; align-items:center; gap:10px; color:#fff; font-weight:800; font-size:1.1rem; margin-bottom: 26px; padding: 0 6px;}
.brand-mark { width:36px; height:36px; border-radius:9px; background: linear-gradient(135deg, var(--glca-red), var(--glca-red-dark)); display:flex; align-items:center; justify-content:center; font-weight:900; color:#fff; }
.sidebar nav a { display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:9px; color:#ccc; font-weight:600; margin-bottom:4px; font-size:0.92rem; }
.sidebar nav a:hover { background: rgba(255,255,255,0.06); color:#fff; }
.sidebar nav a.active { background: var(--glca-red); color:#fff; }
.sidebar .section-label { text-transform:uppercase; font-size:0.7rem; letter-spacing:0.08em; color:#8a8a8e; margin: 18px 6px 8px; }

/* ---- Topbar ---- */
.topbar { background:#fff; border-bottom:1px solid var(--border); padding:14px 26px; display:flex; align-items:center; justify-content:space-between; }
.topbar .title { font-weight:800; font-size:1.15rem; }
.topbar .user-chip { display:flex; align-items:center; gap:10px; }
.avatar { width:34px; height:34px; border-radius:50%; background:var(--glca-red-soft); color:var(--glca-red-dark); display:flex; align-items:center; justify-content:center; font-weight:800; }

.main-content { padding: 26px; }

/* ---- Cards / KPIs ---- */
.kpi-grid { display:grid; grid-template-columns: repeat(5, 1fr); gap:16px; margin-bottom: 24px; }
.kpi-card { background:#fff; border:1px solid var(--border); border-radius: var(--radius); padding:18px; box-shadow: var(--shadow); }
.kpi-card .num { font-size:1.6rem; font-weight:800; color: var(--glca-red); }
.kpi-card .label { font-size:0.82rem; color: var(--ink-soft); font-weight:600; }

.card { background:#fff; border:1px solid var(--border); border-radius: var(--radius); padding:22px; box-shadow: var(--shadow); margin-bottom: 22px; }
.card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.card-header h3 { margin:0; }

/* ---- Buttons ---- */
.btn { display:inline-flex; align-items:center; gap:7px; padding:9px 18px; border-radius:8px; font-weight:600; font-size:0.88rem; border:1.5px solid transparent; cursor:pointer; }
.btn-primary { background: var(--glca-red); color:#fff; }
.btn-primary:hover { background: var(--glca-red-dark); }
.btn-outline { border-color: var(--glca-red); color: var(--glca-red); background:#fff; }
.btn-outline:hover { background: var(--glca-red-soft); }
.btn-success { background: var(--success); color:#fff; }
.btn-gray { background:#eee; color:#333; }
.btn-sm { padding:6px 12px; font-size:0.8rem; }
.btn:disabled { opacity:0.5; cursor:not-allowed; }

/* ---- Tables ---- */
table.data-table { width:100%; border-collapse:collapse; }
table.data-table th, table.data-table td { padding:12px 14px; border-bottom:1px solid var(--border); font-size:0.88rem; text-align:left; }
table.data-table th { background: var(--glca-red-soft); color: var(--glca-red-dark); font-weight:700; }
table.data-table tr:hover td { background:#fafafa; }

/* ---- Forms ---- */
.form-group { margin-bottom:16px; }
label { display:block; font-weight:600; margin-bottom:6px; font-size:0.88rem; }
input, select, textarea {
  width:100%; padding:10px 12px; border:1.5px solid var(--border); border-radius:8px; font-size:0.9rem; font-family:inherit;
}
input:focus, select:focus, textarea:focus { outline:none; border-color: var(--glca-red); box-shadow:0 0 0 3px rgba(200,16,46,0.12); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

/* ---- Badges / Alerts ---- */
.badge { display:inline-block; padding:4px 12px; border-radius:999px; font-size:0.74rem; font-weight:700; }
.badge-gray{background:#eee;color:#555;} .badge-blue{background:#e5f0ff;color:#1a56a8;}
.badge-green{background:#e7f6ec;color:#1e8e3e;} .badge-orange{background:#fff3e2;color:#a56000;}
.badge-red{background:#fdecec;color:#a3132b;}
.alert { padding:12px 16px; border-radius:9px; margin-bottom:16px; font-size:0.88rem; }
.alert-success{background:#e7f6ec;color:#1e8e3e;border:1px solid #b9e6c7;}
.alert-error{background:#fdecec;color:var(--glca-red-dark);border:1px solid #f6c3c9;}
.alert-info{background:#eaf2fb;color:#1a56a8;border:1px solid #c7dbf5;}

/* ---- Login page (admin) ---- */
.admin-login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background: radial-gradient(1000px 500px at 50% -10%, #ffe1e6, transparent), #fff; }
.admin-login-card { width:380px; background:#fff; border:1px solid var(--border); border-radius:16px; padding:34px; box-shadow: 0 12px 40px rgba(0,0,0,0.08); }

.tag-pill { display:inline-block; background:var(--glca-red-soft); color:var(--glca-red-dark); font-size:0.72rem; font-weight:700; padding:3px 10px; border-radius:999px; }

.media-preview { margin-top:10px; border:1px dashed var(--border); border-radius:8px; padding:10px; }

@media (max-width: 1000px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position:relative; height:auto; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: 1fr; }
}