/* ============================================================
   Education ERP LIVE — Design skin (Bootstrap 5.3 + custom)
   Modern · clean · professional (indigo primary, emerald accent)
   ============================================================ */
:root {
  --ed-primary: #4f46e5;
  --ed-primary-dark: #4338ca;
  --ed-accent: #10b981;
  --ed-bg: #f4f6fb;
  --ed-sidebar-w: 250px;
  --ed-border: #e2e8f0;
}

body { background: var(--ed-bg); font-family: "Segoe UI", system-ui, -apple-system, sans-serif; }

/* ---------- public website ---------- */
.public-nav { background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--ed-border); }
.public-hero {
  background: linear-gradient(135deg, #312e81 0%, #4f46e5 55%, #6d28d9 100%);
  color: #fff; padding: 5.5rem 0 4.5rem; position: relative; overflow: hidden;
}
.public-hero::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(600px 300px at 85% 20%, rgba(255,255,255,.14), transparent 60%);
}
.feature-card { border: 1px solid var(--ed-border); border-radius: 1rem; background: #fff; transition: transform .15s ease, box-shadow .15s ease; }
.feature-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(79,70,229,.12); }
.icon-badge { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: #fff; }

/* ---------- app shell ---------- */
.app-shell { display: flex; min-height: 100vh; }
.app-sidebar {
  width: var(--ed-sidebar-w); background: #1e1b4b; color: #c7d2fe; position: fixed; inset: 0 auto 0 0;
  display: flex; flex-direction: column; z-index: 1040; transition: transform .2s ease;
}
.app-sidebar .brand { padding: 1.1rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.08); color: #fff; font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; gap: .6rem; }
.app-sidebar .nav-link { color: #c7d2fe; border-radius: .6rem; margin: .1rem .7rem; padding: .55rem .8rem; font-size: .92rem; display: flex; align-items: center; gap: .65rem; }
.app-sidebar .nav-link:hover { color: #fff; background: rgba(255,255,255,.08); }
.app-sidebar .nav-link.active { color: #fff; background: var(--ed-primary); box-shadow: 0 6px 16px rgba(79,70,229,.35); }
.app-sidebar .nav-section { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #818cf8; margin: 1rem .7rem .3rem; }
.app-sidebar .nav-link .badge { margin-left: auto; }
.app-main { margin-left: var(--ed-sidebar-w); flex: 1; display: flex; flex-direction: column; min-width: 0; }
.app-topbar { background: #fff; border-bottom: 1px solid var(--ed-border); padding: .65rem 1.25rem; display: flex; align-items: center; gap: 1rem; position: sticky; top: 0; z-index: 1030; }
.app-content { padding: 1.5rem 1.5rem 3rem; }

@media (max-width: 991.98px) {
  .app-sidebar { transform: translateX(-100%); }
  .app-sidebar.open { transform: translateX(0); }
  .app-main { margin-left: 0; }
}

/* ---------- components ---------- */
.card { border: 1px solid var(--ed-border); border-radius: .9rem; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.card-header { background: #fff; border-bottom: 1px solid var(--ed-border); border-radius: .9rem .9rem 0 0 !important; font-weight: 600; }
.stat-card { border-radius: 1rem; border: 1px solid var(--ed-border); background: #fff; padding: 1.15rem 1.25rem; height: 100%; }
.stat-card .stat-icon { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.2rem; }
.stat-card .stat-value { font-size: 1.65rem; font-weight: 700; line-height: 1.15; }
.stat-card .stat-label { color: #64748b; font-size: .85rem; }

.btn-primary { background: var(--ed-primary); border-color: var(--ed-primary); }
.btn-primary:hover { background: var(--ed-primary-dark); border-color: var(--ed-primary-dark); }
.btn-accent { background: var(--ed-accent); border-color: var(--ed-accent); color: #fff; }
.btn-accent:hover { background: #059669; border-color: #059669; color: #fff; }

.table thead th { font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: #64748b; border-bottom-width: 1px; }
.table td { vertical-align: middle; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: #e0e7ff; color: #4338ca; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: .85rem; }

.badge-soft-success { background: #d1fae5; color: #065f46; }
.badge-soft-danger  { background: #fee2e2; color: #991b1b; }
.badge-soft-warning { background: #fef3c7; color: #92400e; }
.badge-soft-info    { background: #dbeafe; color: #1e40af; }
.badge-soft-secondary { background: #e2e8f0; color: #334155; }
.badge-soft-primary { background: #e0e7ff; color: #3730a3; }

.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1e1b4b, #4f46e5 60%, #7c3aed); padding: 1rem; }
.login-card { width: 100%; max-width: 420px; border-radius: 1.1rem; }

.flash-item { margin-bottom: .5rem; }
.presence-btn { min-width: 92px; }
.result-input { width: 90px; }

.footer-muted { color: #94a3b8; font-size: .85rem; }
.small-muted { color: #64748b; font-size: .82rem; }
a { text-decoration: none; }