/* ═══════════════════════════════════════════════════════
   PSDM Student Manager — Main Styles
   Professional Design System
═══════════════════════════════════════════════════════ */

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

/* ─── Design Tokens ───────────────────────────────────── */
:root {
  /* Brand */
  --primary:      #2563eb;
  --primary-h:    #1d4ed8;
  --primary-l:    #eff6ff;
  --primary-ll:   #dbeafe;
  --primary-d:    #1e40af;

  /* Neutrals */
  --bg:           #f1f5f9;
  --bg2:          #ffffff;
  --bg3:          #f8fafc;
  --bg4:          #f1f5f9;
  --bg5:          #e2e8f0;

  /* Text */
  --text:         #0f172a;
  --text2:        #334155;
  --text3:        #64748b;
  --text4:        #94a3b8;

  /* Borders */
  --border:       #e2e8f0;
  --border2:      #cbd5e1;

  /* Semantic */
  --green:        #059669;
  --green-l:      #ecfdf5;
  --green-d:      #047857;
  --red:          #dc2626;
  --red-l:        #fef2f2;
  --yellow:       #d97706;
  --yellow-l:     #fffbeb;
  --orange:       #ea580c;
  --orange-l:     #fff7ed;
  --purple:       #7c3aed;
  --purple-l:     #f5f3ff;

  /* Layout */
  --sidebar-w:    240px;
  --header-h:     60px;

  /* Shape */
  --radius:       12px;
  --radius-sm:    8px;
  --radius-xs:    6px;

  /* Shadows */
  --shadow-xs:    0 1px 2px rgba(0,0,0,.05);
  --shadow:       0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:    0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg:    0 10px 15px rgba(0,0,0,.08), 0 4px 6px rgba(0,0,0,.04);
  --shadow-xl:    0 20px 25px rgba(0,0,0,.1), 0 8px 10px rgba(0,0,0,.05);

  /* Animation */
  --ease:         cubic-bezier(.4,0,.2,1);
  --transition:   .15s var(--ease);
  --transition-md:.25s var(--ease);
}

/* Dark mode */
[data-theme="dark"] {
  --bg:           #0d1117;
  --bg2:          #161b22;
  --bg3:          #1c2128;
  --bg4:          #21262d;
  --bg5:          #30363d;
  --text:         #f0f6fc;
  --text2:        #c9d1d9;
  --text3:        #8b949e;
  --text4:        #6e7681;
  --border:       #30363d;
  --border2:      #484f58;
  --primary-l:    #0d2137;
  --primary-ll:   #1a3a5c;
  --green-l:      #0a2d1f;
  --red-l:        #2d0a0a;
  --yellow-l:     #2d1c00;
  --orange-l:     #2d1500;
  --purple-l:     #1a0d40;
  --shadow:       0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
  --shadow-md:    0 4px 6px rgba(0,0,0,.3), 0 2px 4px rgba(0,0,0,.2);
  --shadow-lg:    0 10px 15px rgba(0,0,0,.35), 0 4px 6px rgba(0,0,0,.2);
}

/* ─── Reset ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* ─── App Shell ────────────────────────────────────────── */
#app-shell { display: flex; min-height: 100vh; }

/* ─── Header ───────────────────────────────────────────── */
#app-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 14px;
  z-index: 100;
  box-shadow: var(--shadow-xs);
}

#header-logo {
  height: 44px;
  width: auto;
  object-fit: contain;
  border-radius: 6px;
}

#header-inst-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  overflow: hidden;
  flex: 1;
  min-width: 0;
}

#header-inst-name {
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: linear-gradient(135deg, var(--primary) 0%, var(--purple) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  flex-shrink: 0;
  max-width: 320px;
}

#header-branch-sep {
  color: var(--border);
  font-size: 16px;
  font-weight: 300;
  flex-shrink: 0;
  line-height: 1;
  padding: 0 2px;
}

#header-branch-name {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--bg3);
  padding: 2px 10px;
  border-radius: 20px;
  border: 1px solid var(--border);
  letter-spacing: 0.3px;
  flex-shrink: 0;
  max-width: 160px;
}

#header-save-status {
  font-size: 11.5px;
  color: var(--text3);
  white-space: nowrap;
  padding: 3px 8px;
  border-radius: 20px;
  background: var(--bg3);
}

#header-user {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 6px 12px 6px 6px;
  border-radius: 40px;
  border: 1px solid var(--border);
  position: relative;
  transition: all var(--transition);
}
#header-user:hover {
  background: var(--bg3);
  border-color: var(--border2);
}

.header-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--purple));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

#header-user-name { font-size: 13px; font-weight: 600; }
#header-user-role { font-size: 11px; color: var(--text3); }

.header-user-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xl);
  min-width: 200px;
  z-index: 200;
  display: none;
  overflow: hidden;
}
.header-user-menu.open { display: block; }
.header-user-menu-item {
  padding: 11px 16px;
  font-size: 13.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  transition: background var(--transition);
}
.header-user-menu-item:hover { background: var(--bg3); }
.header-user-menu-item.danger { color: var(--red); }
.header-user-menu-divider { height: 1px; background: var(--border); }

.hamburger {
  display: none;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--text);
  padding: 6px;
  border-radius: var(--radius-xs);
  transition: background var(--transition);
}
.hamburger:hover { background: var(--bg3); }

/* ─── Sidebar ──────────────────────────────────────────── */
#app-sidebar {
  position: fixed;
  top: var(--header-h);
  left: 0;
  width: var(--sidebar-w);
  height: calc(100vh - var(--header-h));
  background: var(--bg2);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  z-index: 90;
  padding: 12px 8px;
  transition: transform var(--transition-md);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
#app-sidebar::-webkit-scrollbar { width: 4px; }
#app-sidebar::-webkit-scrollbar-track { background: transparent; }
#app-sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text3);
  border-radius: var(--radius-sm);
  margin-bottom: 2px;
  transition: all var(--transition);
  position: relative;
}
.nav-item:hover {
  background: var(--bg3);
  color: var(--text2);
}
.nav-item.active {
  background: var(--primary-l);
  color: var(--primary);
  font-weight: 600;
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 25%;
  bottom: 25%;
  width: 3px;
  background: var(--primary);
  border-radius: 0 3px 3px 0;
  margin-left: -8px;
}
.nav-item .nav-icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  opacity: .8;
}
.nav-item.active .nav-icon { opacity: 1; }
.nav-separator {
  height: 1px;
  background: var(--border);
  margin: 8px 4px;
}
.nav-group-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--text4);
  padding: 10px 12px 4px;
}

/* ─── Main Content ─────────────────────────────────────── */
#main-content {
  margin-left: var(--sidebar-w);
  margin-top: var(--header-h);
  padding: 24px;
  min-height: calc(100vh - var(--header-h));
  flex: 1;
  min-width: 0;
  max-width: calc(100vw - var(--sidebar-w));
}

/* ─── PIN Screen ───────────────────────────────────────── */
.fullscreen-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #7c3aed 100%);
  display: flex;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  /* A fixed, inset-0 box does not scroll, so anything taller than the viewport
     was simply unreachable — on a phone the PIN card plus the kiosk panel
     below it overflow easily, and the bottom of the screen could not be
     scrolled to. It only felt like the scroll was sticking; there was no
     scroller at all.
     `align-items: flex-start` with `margin: auto` on the child keeps the old
     centred look whenever there is room, and lets the content scroll from the
     top the moment there isn't. */
  align-items: flex-start;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* Clears the notch and the home indicator on phones. */
  padding-top: max(20px, env(safe-area-inset-top));
  padding-bottom: max(20px, env(safe-area-inset-bottom));
}
/* Vertical only. `margin: auto` on all sides looked right with a single card,
   but this overlay can hold two side by side (the PIN pad and the kiosk panel)
   — and in a flex row an all-sides auto margin swallows the horizontal free
   space too, shoving the two cards apart. `margin-block` centres them
   vertically and leaves the horizontal spacing to the row itself. */
.fullscreen-overlay > * { margin-block: auto; }

#pin-screen .pin-card {
  background: var(--bg2);
  border-radius: 20px;
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 360px;
  padding: 36px 32px;
  text-align: center;
  border: 1px solid rgba(255,255,255,.1);
}

#pin-screen .pin-logo {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
}
#pin-screen .pin-logo img {
  max-height: 52px;
  max-width: 180px;
  object-fit: contain;
}

#pin-screen h2 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--text);
}
#pin-screen .inst-name {
  font-size: 13px;
  color: var(--text3);
  margin-bottom: 24px;
  font-weight: 500;
}

.pin-dots {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin: 16px 0 20px;
}
.pin-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--border2);
  transition: all .2s var(--ease);
  background: transparent;
}
.pin-dot.filled {
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-ll);
  transform: scale(1.15);
}
.pin-dot.error {
  background: var(--red);
  border-color: var(--red);
  box-shadow: 0 0 0 4px var(--red-l);
  animation: shake .3s ease;
}

@keyframes shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 240px;
  margin: 0 auto 16px;
}
.key {
  padding: 16px 10px;
  text-align: center;
  background: var(--bg3);
  border-radius: var(--radius-sm);
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--border);
  transition: all .1s var(--ease);
  color: var(--text);
}
.key:hover {
  background: var(--primary-l);
  border-color: var(--primary);
  color: var(--primary);
}
.key:active {
  transform: scale(.93);
  background: var(--primary-ll);
}

.pin-attempt-msg {
  background: var(--red-l);
  color: var(--red);
  padding: 10px 14px;
  border-radius: var(--radius-xs);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 12px;
  display: none;
  border: 1px solid rgba(220,38,38,.15);
}

/* ─── Attendance Kiosk panel (sits beside the staff pin-card) ──────────── */
.kiosk-panel {
  position: relative;
  background: var(--bg2);
  border-radius: 20px;
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 360px;
  height: 600px;
  padding: 28px 24px;
  text-align: left;
  border: 1px solid rgba(255,255,255,.1);
  margin-left: 24px;
  overflow: hidden;
}
.kiosk-content {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* old Edge/IE */
}
.kiosk-content::-webkit-scrollbar { width: 0; height: 0; } /* Chrome/Safari/new Edge */
.kiosk-content { transition: filter .3s ease, opacity .3s ease; }
.kiosk-panel.locked .kiosk-content {
  filter: blur(14px);
  opacity: .5;
  pointer-events: none;
  user-select: none;
}
.kiosk-lock-overlay {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.6);
  border-radius: 20px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 5;
  text-align: center;
  padding: 20px;
}
.kiosk-panel.locked .kiosk-lock-overlay { display: flex; }
.kiosk-lock-icon { font-size: 36px; margin-bottom: 10px; opacity: .75; }
.kiosk-lock-text {
  font-size: 13px;
  color: var(--text2);
  font-weight: 600;
  line-height: 1.5;
}

/* ─── Kiosk advanced-options tier (Assignments/Google Cert/Internship/Final
   Certificate) — its own lock, separate from the whole-panel one above, so
   Mark Present keeps working while this stays locked down. Deliberately a
   plain opacity fade (no blur) — the underlying content should still read
   clearly as "here's what's available once unlocked," not be obscured. ─── */
.kiosk-advanced-section { position: relative; margin-top: 4px; }
.kiosk-advanced-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 2px 8px;
}
.kiosk-advanced-title { font-size: 13px; font-weight: 700; color: var(--text2); }
.kiosk-advanced-lock-btn {
  background: var(--bg3); border: 1px solid var(--border); border-radius: 8px;
  padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer;
  color: var(--text2); transition: background .15s;
}
.kiosk-advanced-lock-btn:hover { background: var(--bg2); }
.kiosk-advanced-content { transition: opacity .25s ease; }
.kiosk-advanced-section.kiosk-advanced-locked .kiosk-advanced-header { display: none; }
.kiosk-advanced-section.kiosk-advanced-locked .kiosk-advanced-content {
  opacity: .5;
  pointer-events: none;
  user-select: none;
}
.kiosk-advanced-overlay {
  display: none;
  position: absolute;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  gap: 4px;
}
.kiosk-advanced-section.kiosk-advanced-locked .kiosk-advanced-overlay { display: flex; }
.kiosk-advanced-lock-icon { font-size: 28px; opacity: .8; margin-bottom: 2px; }
.kiosk-advanced-lock-text { font-size: 13px; color: var(--text2); font-weight: 600; margin-bottom: 6px; }
.kiosk-unlock-box {
  margin-top: 12px;
  background: var(--bg1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.kiosk-search-results {
  margin-top: 8px;
  max-height: 220px;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.kiosk-search-results::-webkit-scrollbar { width: 0; height: 0; }
.kiosk-result-item {
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
}
.kiosk-result-item:hover { background: var(--bg3); }
.kiosk-result-item .adm { color: var(--text3); font-size: 12px; flex-shrink: 0; }
.kiosk-result-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px; font-weight: 700;
  overflow: hidden;
}
.kiosk-result-avatar img { width: 100%; height: 100%; object-fit: cover; }
.kiosk-result-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kiosk-result-name {
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kiosk-result-course { font-size: 11.5px; color: var(--text3); }

@media (max-width: 780px) {
  #pin-screen {
    flex-direction: column;
    overflow-y: auto;
    padding: 24px 16px;
    height: auto;
    min-height: 100vh;
  }
  .kiosk-panel {
    margin-left: 0;
    margin-top: 20px;
  }
}

/* ─── Mobile header (phone-width specifically, not just tablet) ──────────
   The header was never given its own responsive treatment — on a narrow
   phone screen, hamburger + logo + save-status + branch switcher + module
   switcher + user badge simply don't fit, even after the institute name
   (the one element that was already allowed to shrink via flex/overflow)
   collapses to nothing. Confirmed directly: 472px of header content in a
   375px viewport. Trims the least-essential pieces rather than redesigning
   the whole header — save status is momentary feedback, not something
   that needs to always be visible, and the user badge's name/role text is
   redundant with what's already inside its own dropdown menu once opened. */
@media (max-width: 480px) {
  #header-save-status { display: none !important; }
  #header-branch-switch select { max-width: 90px !important; font-size: 11px !important; }
  #header-module-switch .btn { padding: 6px 10px !important; font-size: 12px !important; }
  #header-user > div:not(.header-avatar):not(.header-user-menu),
  #header-user > span {
    display: none;
  }
  #header-user { gap: 0 !important; padding: 6px !important; }
}

/* ─── Page Header ──────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}
.page-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.3px;
}
.page-subtitle {
  font-size: 13.5px;
  color: var(--text3);
  margin-top: 2px;
}
.page-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* ─── Cards ────────────────────────────────────────────── */
.card {
  background: var(--bg2);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 20px;
  box-shadow: var(--shadow);
}
.card-title {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ─── Stats Grid ───────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--bg2);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 20px;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: all var(--transition-md);
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--purple));
  opacity: 0;
  transition: opacity var(--transition-md);
}
.stat-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
  border-color: var(--primary-ll);
}
.stat-card:hover::before { opacity: 1; }

.stat-icon {
  font-size: 26px;
  margin-bottom: 10px;
  display: block;
}
.stat-val {
  font-size: 28px;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
  letter-spacing: -.5px;
}
.stat-lbl {
  font-size: 12px;
  color: var(--text3);
  margin-top: 5px;
  font-weight: 500;
}
.stat-trend {
  font-size: 11px;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 3px;
}

/* ─── Offline Banner ───────────────────────────────────── */
#offline-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(90deg, #d97706, #f59e0b);
  color: #fff;
  padding: 10px 20px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  z-index: 500;
  display: none;
  letter-spacing: .2px;
}

/* ─── Document thumbnails (uploaded + generated docs) ─────────────────────── */
.doc-thumb {
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg3, #f1f3f5);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-xs);
}
.doc-thumb-badge {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .5px;
  color: #fff;
}
.doc-thumb-badge.pdf  { background: linear-gradient(135deg,#e63946,#c1121f); }
.doc-thumb-badge.img  { background: linear-gradient(135deg,#3a86ff,#4361ee); }
.doc-thumb-badge.file { background: linear-gradient(135deg,#6c757d,#495057); }