/* =========================================================
   NGO Attendance System — Visual Identity
   Built on top of Bootstrap 5. Inter font. Soft shadows,
   rounded corners, a confident accent gradient.
   ========================================================= */

:root{
  --accent-1:#4f46e5;
  --accent-2:#0ea5a4;
  --accent-grad: linear-gradient(135deg, #4f46e5 0%, #0ea5a4 100%);
  --bg-soft:#f4f6fb;
  --ink:#111827;
  --ink-soft:#6b7280;
  --card-radius:16px;
  --shadow-soft: 0 4px 24px rgba(17,24,39,.06);
  --shadow-pop: 0 12px 32px rgba(79,70,229,.18);
}

*{ font-family:'Inter', system-ui, -apple-system, sans-serif; }

body{ background:var(--bg-soft); color:var(--ink); }

/* ============== ADMIN SHELL ============== */
.admin-shell{ display:flex; min-height:100vh; }

.admin-sidebar{
  width:260px; flex-shrink:0;
  background:#12122b;
  background-image: radial-gradient(circle at top left, #1c1c47 0%, #0b0b1f 70%);
  color:#e5e7ff;
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
  transition:transform .25s ease;
  z-index:1000;
}
.sidebar-brand{
  display:flex; align-items:center; gap:.6rem;
  padding:1.5rem 1.25rem 1rem;
  font-weight:800; font-size:1.02rem; line-height:1.2;
}
.brand-mark{
  width:38px; height:38px; border-radius:11px;
  background:var(--accent-grad);
  display:flex; align-items:center; justify-content:center;
  font-size:1.15rem; color:#fff; flex-shrink:0;
  box-shadow:var(--shadow-pop);
}
.sidebar-nav{ display:flex; flex-direction:column; gap:.2rem; padding:1rem .75rem; flex:1; }
.sidebar-nav a{
  display:flex; align-items:center; gap:.7rem;
  padding:.65rem .9rem; border-radius:10px;
  color:#c7c9ec; text-decoration:none; font-weight:500; font-size:.93rem;
  transition:.15s ease;
}
.sidebar-nav a i{ font-size:1.05rem; width:20px; text-align:center; }
.sidebar-nav a:hover{ background:rgba(255,255,255,.06); color:#fff; }
.sidebar-nav a.active{
  background:var(--accent-grad); color:#fff;
  box-shadow:var(--shadow-pop);
}
.sidebar-footer{ padding:1rem .9rem 1.5rem; display:flex; flex-direction:column; gap:.3rem; border-top:1px solid rgba(255,255,255,.08); }
.sidebar-footer a{ color:#aeb0d6; text-decoration:none; font-size:.87rem; padding:.4rem .5rem; border-radius:8px; }
.sidebar-footer a:hover{ background:rgba(255,255,255,.06); color:#fff; }
.sidebar-footer a.text-danger{ color:#fca5a5 !important; }

.admin-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.admin-topbar{
  background:#fff; border-bottom:1px solid #eef0f5;
  padding:1rem 1.75rem; display:flex; align-items:center; gap:1rem;
  position:sticky; top:0; z-index:10;
}
.topbar-title{ font-size:1.15rem; font-weight:700; margin:0; flex:1; }
.topbar-user{ display:flex; align-items:center; gap:.5rem; color:var(--ink-soft); font-weight:600; font-size:.9rem; }
.topbar-user i{ font-size:1.4rem; color:var(--accent-1); }
.btn-burger{ border:none; background:none; font-size:1.4rem; color:var(--ink); }
.admin-content{ padding:1.75rem; max-width:1400px; }

/* ============== CARDS / STAT TILES ============== */
.stat-card{
  background:#fff; border-radius:var(--card-radius); padding:1.4rem;
  box-shadow:var(--shadow-soft); border:1px solid #f0f1f6;
  display:flex; align-items:center; gap:1rem; height:100%;
}
.stat-icon{
  width:52px; height:52px; border-radius:14px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:1.4rem; color:#fff;
}
.stat-icon.bg-a{ background:var(--accent-grad); }
.stat-icon.bg-b{ background:linear-gradient(135deg,#f59e0b,#ef4444); }
.stat-icon.bg-c{ background:linear-gradient(135deg,#10b981,#059669); }
.stat-icon.bg-d{ background:linear-gradient(135deg,#3b82f6,#6366f1); }
.stat-value{ font-size:1.6rem; font-weight:800; line-height:1.1; }
.stat-label{ color:var(--ink-soft); font-size:.83rem; font-weight:500; }

.panel{
  background:#fff; border-radius:var(--card-radius); padding:1.5rem;
  box-shadow:var(--shadow-soft); border:1px solid #f0f1f6;
}
.panel-title{ font-weight:700; font-size:1.02rem; margin-bottom:1rem; display:flex; align-items:center; gap:.5rem; }
.panel-title i{ color:var(--accent-1); }

.table-modern{ font-size:.9rem; }
.table-modern thead th{ color:var(--ink-soft); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; border-bottom:2px solid #f0f1f6; }
.table-modern td, .table-modern th{ vertical-align:middle; padding:.75rem .6rem; }
.table-modern tbody tr:hover{ background:#f9fafc; }

.badge-pill{ border-radius:99px; padding:.35em .8em; font-weight:600; font-size:.76rem; }

.btn-accent{
  background:var(--accent-grad); border:none; color:#fff; font-weight:600;
  box-shadow:var(--shadow-pop);
}
.btn-accent:hover{ color:#fff; filter:brightness(1.06); }

.avatar-circle{
  width:38px; height:38px; border-radius:50%; background:var(--accent-grad);
  color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem; flex-shrink:0;
}

@media (max-width: 991px){
  .admin-sidebar{ position:fixed; transform:translateX(-100%); }
  .admin-shell.sidebar-open .admin-sidebar{ transform:translateX(0); }
}

/* ============== LOGIN PAGE ============== */
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 20% 20%, #201f52 0%, #0b0b1f 60%);
  padding:1rem;
}
.login-card{
  background:#fff; border-radius:20px; padding:2.5rem 2rem; width:100%; max-width:400px;
  box-shadow:0 30px 60px rgba(0,0,0,.35);
}
.login-logo{
  width:56px; height:56px; border-radius:16px; background:var(--accent-grad);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.6rem;
  margin:0 auto 1rem; box-shadow:var(--shadow-pop);
}

/* ============== KIOSK ============== */
.kiosk-body{
  min-height:100vh;
  background:radial-gradient(circle at top left, #eef2ff 0%, #e0f7f4 100%);
  display:flex; align-items:center; justify-content:center;
  padding:1.25rem;
}
.kiosk-wrap{ width:100%; max-width:560px; }
.kiosk-card{
  background:#fff; border-radius:26px; padding:2rem 1.75rem;
  box-shadow:0 20px 50px rgba(17,24,39,.12);
}
.kiosk-logo{ display:flex; align-items:center; gap:.7rem; justify-content:center; margin-bottom:1.5rem; }
.kiosk-logo .brand-mark{ width:46px; height:46px; font-size:1.4rem; }
.kiosk-logo span{ font-weight:800; font-size:1.15rem; }

.type-choice{
  display:flex; gap:1rem; margin:1.5rem 0;
}
.type-btn{
  flex:1; border:2px solid #eef0f5; border-radius:18px; background:#fafbff;
  padding:1.5rem 1rem; text-align:center; cursor:pointer; transition:.15s ease;
  font-weight:700; color:var(--ink);
}
.type-btn i{ font-size:2rem; display:block; margin-bottom:.5rem; color:var(--accent-1); }
.type-btn:hover, .type-btn.selected{ border-color:var(--accent-1); background:#eef1ff; transform:translateY(-2px); box-shadow:var(--shadow-pop); }

.kiosk-input{
  border-radius:14px !important; padding:.85rem 1rem !important; font-size:1.05rem !important;
  border:2px solid #eef0f5 !important;
}
.kiosk-input:focus{ border-color:var(--accent-1) !important; box-shadow:0 0 0 4px rgba(79,70,229,.12) !important; }

.kiosk-big-btn{
  width:100%; padding:1rem; border-radius:16px; font-size:1.1rem; font-weight:700;
  background:var(--accent-grad); border:none; color:#fff; box-shadow:var(--shadow-pop);
}

.search-result-item{
  padding:.85rem 1rem; border-radius:12px; cursor:pointer; display:flex; justify-content:space-between; align-items:center;
  border:1px solid #eef0f5; margin-bottom:.5rem; font-weight:600; transition:.12s;
}
.search-result-item:hover{ background:#eef1ff; border-color:var(--accent-1); }
.result-status-label{ font-size:.76rem; font-weight:600; margin-top:.15rem; }
.result-status-label-new{ color:var(--ink-soft); font-weight:500; }
.result-status-label-in{ color:#f59e0b; }
.result-status-label-out{ color:var(--ink-soft); font-weight:500; }
.result-status-label-done{ color:#10b981; }
.result-status-in{ border-color:#f59e0b; background:#fffbeb; }
.result-status-done{ border-color:#10b981; background:#f0fdf4; }

.result-screen{ text-align:center; padding:2rem 1rem; }
.result-icon{
  width:110px; height:110px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:3.4rem; margin:0 auto 1rem; color:#fff;
  animation: pop .35s ease;
}
.result-icon.ok{ background:linear-gradient(135deg,#10b981,#059669); }
.result-icon.bye{ background:linear-gradient(135deg,#3b82f6,#6366f1); }
.result-icon.info{ background:linear-gradient(135deg,#f59e0b,#f97316); }
.result-icon.err{ background:linear-gradient(135deg,#ef4444,#dc2626); }
@keyframes pop{ from{ transform:scale(.5); opacity:0; } to{ transform:scale(1); opacity:1; } }

.result-progress{ width:100%; height:6px; background:#eef0f5; border-radius:99px; overflow:hidden; }
.result-progress-bar{ height:100%; width:0%; background:var(--accent-grad); border-radius:99px; }

@keyframes shakeAnim{
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60% { transform: translateX(8px); }
}
.shake{ animation: shakeAnim .5s; }

.kiosk-footer-link{ text-align:center; margin-top:1rem; }
.kiosk-footer-link a{ color:var(--ink-soft); font-size:.8rem; text-decoration:none; }

.pin-dots{ display:flex; gap:.6rem; justify-content:center; margin:1rem 0; }
.pin-dots .dot{ width:16px; height:16px; border-radius:50%; border:2px solid var(--accent-1); }
.pin-dots .dot.filled{ background:var(--accent-1); }

.keypad{ display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; }
.keypad button{
  padding:1rem; font-size:1.4rem; font-weight:700; border-radius:14px; border:2px solid #eef0f5; background:#fafbff;
}
.keypad button:active{ background:#eef1ff; }

/* Badge print page */
.badge-card{
  width:340px; border:2px dashed #c7c9ec; border-radius:20px; padding:1.5rem; text-align:center; margin:1rem auto;
  background: linear-gradient(180deg,#fff 0%, #f7f8ff 100%);
}
@media print{
  .no-print{ display:none !important; }
  body{ background:#fff; }
}