/* ========================================================================
   ระบบทะเบียนคุมงบโครงการ/กิจกรรม โรงเรียนร้องกวางอนุสรณ์
   โทนสีม่วงเข้ม — ออกแบบให้ดูน่าเชื่อถือแบบระบบราชการ/สถานศึกษา
   ======================================================================== */

:root{
  --plum-950:#1a0b2e;
  --plum-900:#2d1052;
  --plum-800:#3d1670;
  --plum-700:#4c1d95;
  --plum-600:#6528b0;
  --plum-500:#7c3aed;
  --plum-400:#9d63f2;
  --plum-100:#efe7fc;
  --plum-50:#f8f6fd;

  --gold:#d4af37;
  --ink:#211b2e;
  --ink-soft:#5d5770;
  --line:#e6e1f2;
  --bg:#f6f4fb;
  --surface:#ffffff;

  --good:#1a8f5e;
  --good-bg:#e6f7ef;
  --warn:#b8790a;
  --warn-bg:#fdf1de;
  --bad:#c22b4d;
  --bad-bg:#fbe8ee;

  --radius:14px;
  --radius-sm:9px;
  --shadow:0 4px 18px rgba(45,16,82,.08);
  --shadow-lift:0 10px 30px rgba(45,16,82,.14);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Sarabun', sans-serif;
  font-size:15.5px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.display{
  font-family:'Kanit', 'Sarabun', sans-serif;
  font-weight:600;
  color:var(--plum-900);
  margin:0 0 .4em;
}
a{color:var(--plum-600); text-decoration:none;}
a:hover{color:var(--plum-800);}
:focus-visible{outline:3px solid var(--plum-400); outline-offset:2px;}

/* ---------- Layout ---------- */
.app-shell{display:flex; min-height:100vh;}

.sidebar{
  width:264px;
  flex-shrink:0;
  background:linear-gradient(190deg, var(--plum-950) 0%, var(--plum-800) 100%);
  color:#e9e1fa;
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
}
.sidebar-brand{
  display:flex; align-items:center; gap:12px;
  padding:22px 20px 18px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.sidebar-brand img{width:44px; height:44px; border-radius:10px; background:#fff; object-fit:contain; padding:3px;}
.sidebar-brand .brand-text{line-height:1.3;}
.sidebar-brand .brand-name{font-family:'Kanit',sans-serif; font-weight:600; font-size:14.5px; color:#fff;}
.sidebar-brand .brand-school{font-size:12px; color:#c6b6ea;}

.nav-section{padding:16px 12px;}
.nav-label{font-size:11.5px; color:#9a83c9; padding:8px 12px 4px; letter-spacing:.02em;}
.nav-link{
  display:flex; align-items:center; gap:11px;
  padding:10px 14px; margin:2px 0;
  border-radius:10px;
  color:#d9cdf5;
  font-size:14.5px;
  transition:background .15s ease, color .15s ease;
}
.nav-link svg{width:18px; height:18px; flex-shrink:0; opacity:.85;}
.nav-link:hover{background:rgba(255,255,255,.08); color:#fff;}
.nav-link.active{background:var(--plum-500); color:#fff; box-shadow:0 4px 12px rgba(124,58,237,.4);}

.sidebar-foot{
  margin-top:auto;
  padding:16px 20px;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:11.5px;
  color:#8a76b8;
}

.main{flex:1; min-width:0; display:flex; flex-direction:column;}

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 28px;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:10;
}
.topbar h1{font-size:19px; margin:0;}
.topbar .subtitle{font-size:13px; color:var(--ink-soft); margin-top:2px;}
.topbar-user{display:flex; align-items:center; gap:12px;}
.user-chip{display:flex; align-items:center; gap:10px;}
.user-avatar{
  width:38px; height:38px; border-radius:50%;
  background:var(--plum-100); color:var(--plum-700);
  display:flex; align-items:center; justify-content:center;
  font-weight:600; font-size:14px;
}
.user-meta{line-height:1.25;}
.user-meta .name{font-size:13.5px; font-weight:600; color:var(--ink);}
.user-meta .role{font-size:12px; color:var(--ink-soft);}
.btn-logout{
  font-size:13px; color:var(--bad); border:1px solid var(--bad-bg); background:var(--bad-bg);
  padding:6px 12px; border-radius:8px;
}
.btn-logout:hover{background:#f6d3dd;}

.content{padding:26px 28px 60px; max-width:1400px; width:100%; margin:0 auto;}

.mobile-topbar{display:none;}

/* ---------- Cards & stats ---------- */
.stat-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px;
}
.stat-card{
  background:var(--surface); border-radius:var(--radius); padding:18px 20px;
  box-shadow:var(--shadow); border:1px solid var(--line);
  position:relative; overflow:hidden;
}
.stat-card .stat-label{font-size:12.5px; color:var(--ink-soft);}
.stat-card .stat-value{font-family:'Kanit',sans-serif; font-size:24px; font-weight:600; color:var(--plum-900); margin-top:4px; font-variant-numeric:tabular-nums;}
.stat-card .stat-sub{font-size:12px; color:var(--ink-soft); margin-top:4px;}
.stat-card.accent{border-color:var(--plum-500);}
.stat-card .stat-icon{
  position:absolute; right:14px; top:14px; width:34px; height:34px;
  border-radius:9px; background:var(--plum-100); color:var(--plum-600);
  display:flex; align-items:center; justify-content:center;
}
.stat-card .stat-icon svg{width:18px; height:18px;}

.card{
  background:var(--surface); border-radius:var(--radius); border:1px solid var(--line);
  box-shadow:var(--shadow); padding:22px; margin-bottom:22px;
}
.card-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; gap:12px; flex-wrap:wrap;}
.card-header h2{font-size:16.5px; margin:0;}
.card-header .card-desc{font-size:12.5px; color:var(--ink-soft); margin-top:2px;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font-family:'Sarabun',sans-serif; font-size:14px; font-weight:600;
  padding:9px 16px; border-radius:9px; border:1px solid transparent;
  cursor:pointer; transition:all .15s ease; line-height:1.3;
}
.btn-primary{background:var(--plum-600); color:#fff;}
.btn-primary:hover{background:var(--plum-700); color:#fff;}
.btn-outline{background:#fff; border-color:var(--plum-500); color:var(--plum-600);}
.btn-outline:hover{background:var(--plum-50);}
.btn-ghost{background:transparent; color:var(--ink-soft); border-color:var(--line);}
.btn-ghost:hover{background:var(--plum-50); color:var(--plum-700);}
.btn-danger{background:var(--bad-bg); color:var(--bad); border-color:#f3c9d5;}
.btn-danger:hover{background:#f6d3dd;}
.btn-sm{padding:6px 11px; font-size:12.5px; border-radius:7px;}
.btn:disabled{opacity:.5; cursor:not-allowed;}
.btn svg{width:15px; height:15px;}

/* ---------- Forms ---------- */
label{display:block; font-size:13.5px; font-weight:600; color:var(--ink); margin-bottom:6px;}
.form-group{margin-bottom:16px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.form-row-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px;}
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], select, textarea{
  width:100%; padding:10px 13px; border:1px solid var(--line); border-radius:9px;
  font-family:'Sarabun',sans-serif; font-size:14.5px; color:var(--ink); background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus{
  border-color:var(--plum-500); box-shadow:0 0 0 3px rgba(124,58,237,.15); outline:none;
}
textarea{resize:vertical; min-height:80px;}
.hint{font-size:12px; color:var(--ink-soft); margin-top:5px;}
.required::after{content:" *"; color:var(--bad);}

/* ---------- Table ---------- */
.table-wrap{overflow-x:auto; border-radius:var(--radius-sm); border:1px solid var(--line);}
table{width:100%; border-collapse:collapse; font-size:14px; background:#fff;}
thead th{
  background:var(--plum-50); color:var(--plum-800); font-family:'Kanit',sans-serif; font-weight:500;
  text-align:left; padding:11px 14px; font-size:13px; border-bottom:1px solid var(--line); white-space:nowrap;
}
tbody td{padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:var(--plum-50);}
td.num, th.num{text-align:right; font-variant-numeric:tabular-nums;}
.table-empty{padding:40px 20px; text-align:center; color:var(--ink-soft);}

/* ---------- Badges & progress ---------- */
.badge{display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:99px; font-size:12px; font-weight:600;}
.badge-good{background:var(--good-bg); color:var(--good);}
.badge-warn{background:var(--warn-bg); color:var(--warn);}
.badge-bad{background:var(--bad-bg); color:var(--bad);}
.badge-admin{background:#efe0ff; color:#6d1fb3;}
.badge-plan{background:var(--plum-100); color:var(--plum-700);}
.badge-exec{background:#fff2e0; color:#a05a06;}
.badge-teacher{background:#e0f2ff; color:#0a6ca0;}

.progress{height:8px; border-radius:99px; background:var(--plum-100); overflow:hidden;}
.progress-bar{height:100%; border-radius:99px; background:var(--plum-500);}
.progress-bar.warn{background:var(--warn);}
.progress-bar.bad{background:var(--bad);}

/* ---------- Alerts / flash ---------- */
.alert{padding:12px 16px; border-radius:10px; font-size:13.5px; margin-bottom:18px; display:flex; align-items:center; gap:9px;}
.alert-success{background:var(--good-bg); color:var(--good);}
.alert-error{background:var(--bad-bg); color:var(--bad);}
.alert-info{background:var(--plum-100); color:var(--plum-700);}

/* ---------- Login page ---------- */
.login-page{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 20% 20%, var(--plum-800), var(--plum-950) 65%);
  padding:24px;
}
.login-card{
  width:100%; max-width:400px; background:#fff; border-radius:18px; padding:34px 32px;
  box-shadow:var(--shadow-lift);
}
.login-card .login-brand{display:flex; flex-direction:column; align-items:center; text-align:center; margin-bottom:22px;}
.login-card .login-brand img{width:64px; height:64px; border-radius:14px; margin-bottom:12px;}
.login-card .login-brand h1{font-size:16.5px; line-height:1.4; margin-bottom:2px;}
.login-card .login-brand p{font-size:12.5px; color:var(--ink-soft); margin:0;}
.login-card .btn-primary{width:100%; padding:11px; font-size:14.5px; margin-top:6px;}
.login-footer{text-align:center; font-size:11.5px; color:#c6b6ea; margin-top:22px;}

/* ---------- Utility ---------- */
.text-muted{color:var(--ink-soft);}
.text-good{color:var(--good);}
.text-bad{color:var(--bad);}
.text-right{text-align:right;}
.flex{display:flex; align-items:center;}
.flex-between{display:flex; align-items:center; justify-content:space-between;}
.gap-8{gap:8px;} .gap-12{gap:12px;}
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.filter-bar{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; align-items:flex-end;}
.filter-bar .form-group{margin-bottom:0; min-width:150px;}
.empty-state{text-align:center; padding:50px 20px; color:var(--ink-soft);}
.empty-state svg{width:46px; height:46px; color:var(--plum-300); margin-bottom:10px;}

/* ---------- Mobile ---------- */
.sidebar-toggle{display:none;}
@media (max-width: 960px){
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .form-row, .form-row-3{grid-template-columns:1fr;}
}
@media (max-width: 780px){
  .sidebar{
    position:fixed; z-index:40; left:0; top:0; transform:translateX(-100%);
    transition:transform .2s ease; box-shadow:var(--shadow-lift);
  }
  .sidebar.open{transform:translateX(0);}
  .app-shell{display:block;}
  .topbar{padding:12px 16px;}
  .content{padding:18px 16px 50px;}
  .stat-grid{grid-template-columns:1fr 1fr;}
  .sidebar-toggle{
    display:flex; align-items:center; justify-content:center;
    width:38px; height:38px; border-radius:9px; border:1px solid var(--line); background:#fff; margin-right:6px;
  }
  .sidebar-backdrop{display:none; position:fixed; inset:0; background:rgba(26,11,46,.5); z-index:35;}
  .sidebar-backdrop.open{display:block;}
}