/* ====================================================
   Shared Stylesheet
   Face Recognition Student Management System
   ----------------------------------------------------
   Common theme, typography, and component styles used
   across student.html, attendance.html, history.html,
   and login.html. Page-specific styles (tables, cards,
   modals unique to one page, etc.) stay in that page's
   own <style> block -- only byte-for-byte identical
   rules were moved here, to avoid any visual changes
   during this refactor.
   ==================================================== */

:root{
  --bg:#F3F5F3;
  --surface:#FFFFFF;
  --surface-alt:#E9EDEA;
  --ink:#152420;
  --ink-soft:#54655F;
  --ink-faint:#8A9793;
  --primary:#1C4A42;
  --primary-hover:#123832;
  --primary-tint:#E4EDEA;
  --accent:#C98A3B;
  --accent-tint:#F6E9D4;
  --danger:#A6412B;
  --danger-tint:#F5E3DE;
  --success:#2F7D5A;
  --success-tint:#E1EFE6;
  --border:#DCE2DE;
  --shadow: 0 8px 24px -12px rgba(21,36,32,0.18);
  --radius: 14px;
}

*{box-sizing:border-box;}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Noto Sans Thai','Kanit',sans-serif;
  font-size:15px;
  line-height:1.5;
}

h1,h2,h3{ font-family:'Kanit','Noto Sans Thai',sans-serif; letter-spacing:0.01em; }

.mono{
  font-family:'JetBrains Mono',monospace;
}

/* ================= Viewfinder signature ================= */
.viewfinder{
  position:relative;
}
.viewfinder::before, .viewfinder::after,
.viewfinder .vf-tr, .viewfinder .vf-br{
  content:"";
  position:absolute;
  width:22px; height:22px;
  border:3px solid var(--accent);
}
.viewfinder::before{ top:-3px; left:-3px; border-right:none; border-bottom:none; border-radius:6px 0 0 0; }
.viewfinder::after{ bottom:-3px; left:-3px; border-right:none; border-top:none; border-radius:0 0 0 6px; }
.viewfinder .vf-tr{ top:-3px; right:-3px; border-left:none; border-bottom:none; border-radius:0 6px 0 0; }
.viewfinder .vf-br{ bottom:-3px; right:-3px; border-left:none; border-top:none; border-radius:0 0 6px 0; }

.logo-mark{
  width:52px;
  height:52px;
  flex-shrink:0;
  padding:10px;
}
.logo-mark svg{ width:100%; height:100%; display:block; }
.logo-mark.viewfinder::before, .logo-mark.viewfinder::after,
.logo-mark .vf-tr, .logo-mark .vf-br{ width:18px; height:18px; border-width:2.5px; }

/* ================= Top bar ================= */
.topbar{ display:flex; align-items:center; gap:20px; margin-bottom:24px; }
.topbar h1{
  font-size:22px;
  font-weight:700;
  margin:0;
  color:var(--primary);
}
.topbar p{
  margin:2px 0 0;
  color:var(--ink-soft);
  font-size:13.5px;
}

.nav-link{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  color:var(--ink-soft);
  text-decoration:none;
  font-weight:600;
  font-size:13.5px;
  transition:background .15s ease;
}
.nav-link:hover{ background:var(--surface-alt); }

/* ================= Buttons ================= */
.btn{
  font-family:'Noto Sans Thai',sans-serif;
  font-weight:600;
  font-size:14px;
  padding:10px 18px;
  border-radius:10px;
  border:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:background .15s ease, transform .1s ease;
}
.btn:active{ transform:scale(0.97); }
.btn-primary{ background:var(--primary); color:#fff; }
.btn-primary:hover{ background:var(--primary-hover); }
.btn-ghost{ background:transparent; color:var(--ink-soft); border:1px solid var(--border); }
.btn-ghost:hover{ background:var(--surface-alt); }

/* ================= Tables (shared base) ================= */
table{
  width:100%;
  border-collapse:collapse;
}
tbody tr:last-child td{ border-bottom:none; }

/* ================= Toast ================= */
#toast-stack{
  position:fixed;
  bottom:24px; right:24px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:200;
}
.toast.success{ background:var(--primary); }
.toast.error{ background:var(--danger); }
@keyframes toast-in{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ================= Utility ================= */
.hidden{ display:none !important; }

:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
}