/* ============================================================
   DPA for School — ชั้น MVC
   สี 60-30-10 ประกาศเป็นโทเคนจริง อ้าง --brand-* / --gold-*
   เปลี่ยนชุดสีที่เดียว แล้วทั้งระบบขยับตาม
   ============================================================ */
:root {
  /* ชุดสีฐาน */
  --brand-50:#eef4ff;  --brand-100:#dbe6ff; --brand-300:#93b4fd;
  --brand-500:#3b6fe0; --brand-600:#2a56c6; --brand-700:#1f429c; --brand-900:#132a63;
  --gold-200:#fde9b8;  --gold-400:#f0b429;  --gold-600:#b9821a;

  --bg:#f4f6fb; --surface:#ffffff; --surface-2:#eef1f7;
  --ink:#1c2434; --ink-soft:#5b6577; --ink-faint:#8b94a6;
  --line:#e2e7f0;

  --ok:#128a5c; --ok-wash:#e5f6ee;
  --warn:#b9821a; --warn-wash:#fdf5e3;
  --danger:#c0392b; --danger-wash:#fbeae8;

  /* ── 60% พื้นกลาง ── */
  --c60:var(--bg); --c60-raise:var(--surface); --c60-sink:var(--surface-2);
  /* ── 30% แบรนด์ ── */
  --c30:var(--brand-600); --c30-deep:var(--brand-900);
  --c30-soft:var(--brand-300); --c30-wash:var(--brand-50);
  /* ── 10% เน้น (ห้ามใช้กับพื้นที่ใหญ่) ── */
  --c10:var(--gold-400); --c10-deep:var(--gold-600); --c10-soft:var(--gold-200);

  --r-sm:8px; --r:12px; --r-lg:18px;
  --sh-1:0 1px 2px rgba(19,42,99,.06), 0 1px 3px rgba(19,42,99,.08);
  --sh-2:0 4px 12px rgba(19,42,99,.08);
  --sh-3:0 12px 32px rgba(19,42,99,.14);
  --ease:cubic-bezier(.22,.61,.36,1);
  --sidebar-w:264px;
}

/* ── โหมดมืด ─────────────────────────────────────────────────
   ทับเฉพาะ "โทเคนฐาน" — โทเคน 60-30-10 อ้าง var() ต่อจากตัวเหล่านี้
   จึงขยับตามเองทั้งระบบ ไม่ต้องแก้ทีละคลาส
   ★ แถบข้าง/hero เป็นน้ำเงินเข้มอยู่แล้ว สีตัวอักษรในนั้นจึงคงเดิมได้
   ★ ธีมถูกตั้งที่ <html data-theme> ก่อนวาดหน้า (ดูสคริปต์ใน layout) กันจอกะพริบ
   ──────────────────────────────────────────────────────────── */
:root{color-scheme:light}
:root[data-theme="dark"]{
  color-scheme:dark;                      /* scrollbar / ช่องกรอกที่เบราว์เซอร์วาดเองต้องเข้าธีมด้วย */
  --bg:#0e131f; --surface:#171e2c; --surface-2:#1f2839;
  --ink:#e8edf6; --ink-soft:#a6b2c7; --ink-faint:#7b8697;
  --line:#2a3446;
  --brand-50:#16223a; --brand-100:#1b2c4b; --brand-300:#6f97ec;
  --ok:#3ecf9a;  --ok-wash:#10281e;
  --warn:#e2b23c; --warn-wash:#2a2313;
  --danger:#f08b7f; --danger-wash:#2d1a18;
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 6px 18px rgba(0,0,0,.45);
  --sh-3:0 18px 44px rgba(0,0,0,.55);
}
:root[data-theme="dark"] .alert-success{border-color:#1e4a37}
:root[data-theme="dark"] .alert-danger{border-color:#5a2d27}
:root[data-theme="dark"] .alert-warning{border-color:#4d3f16}
:root[data-theme="dark"] .side-user img{background:rgba(255,255,255,.12)}
:root[data-theme="dark"] .swal2-popup{background:var(--c60-raise); color:var(--ink)}
/* ★ --c30 (น้ำเงินเข้ม) ใช้เป็น "พื้นปุ่ม" ได้ในโหมดมืด แต่ใช้เป็น "สีตัวอักษร" ไม่ได้
   ตรงไหนที่เอา --c30 มาเป็นสีข้อความบนพื้นเข้ม ต้องสลับไปใช้ --brand-300 แทน */
:root[data-theme="dark"] a{color:var(--brand-300)}
:root[data-theme="dark"] .pill-brand{background:var(--brand-100); color:var(--brand-300)}
:root[data-theme="dark"] .btn-ghost:hover{color:var(--brand-300); border-color:var(--brand-300)}
:root[data-theme="dark"] .side-user{background:rgba(255,255,255,.07)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--c60); color:var(--ink);
  font-family:"Sarabun",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.6;
}
h1,h2,h3,h4,.display{font-family:"Kanit","Sarabun",system-ui,sans-serif; font-weight:600; line-height:1.3; margin:0}
a{color:var(--c30); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; height:auto}

/* ── โครงหน้า ───────────────────────────────────────────── */
.shell{display:flex; min-height:100vh}
.side{
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w);
  background:linear-gradient(170deg,var(--c30-deep),var(--brand-700));
  color:#dce6ff; display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.main{flex:1; min-width:0; display:flex; flex-direction:column}
.content{padding:1.5rem; flex:1}
@media (max-width:960px){
  .shell{display:block}
  .side{position:fixed; inset:0 auto 0 0; z-index:60; transform:translateX(-100%); transition:transform .25s var(--ease)}
  .side.open{transform:none}
  .content{padding:1rem}
}

/* ── Sidebar ────────────────────────────────────────────── */
.side-head{padding:1.25rem 1.1rem; border-bottom:1px solid rgba(255,255,255,.12)}
.brand{display:flex; align-items:center; gap:.7rem; color:#fff; text-decoration:none}
.brand-mark{
  width:42px; height:42px; border-radius:12px; flex:0 0 42px;
  background:linear-gradient(135deg,var(--c10),var(--c10-deep));
  display:grid; place-items:center; color:#2a1c00; font-size:1.1rem;
}
.brand b{display:block; font-family:"Kanit",sans-serif; font-size:1rem; line-height:1.25}
.brand small{color:#a9bdf0; font-size:.72rem}
.side-clock{
  margin-top:.85rem; font-variant-numeric:tabular-nums; font-size:.78rem;
  color:#a9bdf0; display:flex; align-items:center; gap:.4rem;
}
.side-user{
  margin:.9rem 1.1rem; padding:.7rem; border-radius:var(--r);
  background:rgba(255,255,255,.09); display:flex; gap:.6rem; align-items:center;
}
.side-user img{width:38px; height:38px; border-radius:50%; object-fit:cover; flex:0 0 38px; background:rgba(255,255,255,.2)}
.side-user .nm{font-size:.83rem; color:#fff; font-weight:600; line-height:1.25}
.side-user .rl{font-size:.7rem; color:#a9bdf0}
.side-user > div{min-width:0}
.side-user .nm,.side-user .rl{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.nav-group{padding:.4rem 0 .2rem}
.nav-group > h6{
  margin:.6rem 1.15rem .3rem; font-size:.66rem; letter-spacing:.09em;
  text-transform:uppercase; color:#8fa8e0; font-family:"Sarabun",sans-serif; font-weight:700;
}
.nav-link{
  display:flex; align-items:center; gap:.65rem; padding:.55rem 1.15rem;
  color:#cfdcfa; font-size:.87rem; position:relative; text-decoration:none;
  transition:background .16s var(--ease), color .16s var(--ease);
}
.nav-link:hover{background:rgba(255,255,255,.08); color:#fff; text-decoration:none}
.nav-link.active{background:rgba(255,255,255,.14); color:#fff; font-weight:600}
.nav-link.active::before{
  content:""; position:absolute; left:0; top:.35rem; bottom:.35rem; width:3px;
  border-radius:0 3px 3px 0; background:linear-gradient(180deg,var(--c10),var(--c10-deep));
}
.nav-link i{width:1.1rem; text-align:center; font-size:.95rem; flex:0 0 1.1rem}
.nav-link .tx{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* badge นับจำนวน — ตัวเลขมาจากคิวรีเดียว */
.badge-n{
  font-size:.7rem; font-variant-numeric:tabular-nums; padding:.1rem .45rem;
  border-radius:999px; background:rgba(255,255,255,.18); color:#fff; flex:0 0 auto;
}
.badge-n.zero{opacity:.35}
.badge-n.warn{background:var(--c10); color:#2a1c00; font-weight:700; position:relative}
.badge-n.warn::after{
  content:""; position:absolute; top:-2px; right:-2px; width:6px; height:6px;
  border-radius:50%; background:#e74c3c; animation:blip 1.6s infinite;
}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.badge-n.warn::after{animation:none}}

/* ── Topbar ─────────────────────────────────────────────── */
.topbar{
  background:var(--c60-raise); border-bottom:1px solid var(--line);
  padding:.7rem 1.5rem; display:flex; align-items:center; gap:1rem;
  position:sticky; top:0; z-index:30;
}
.topbar h1{font-size:1.05rem}
.topbar .sub{font-size:.76rem; color:var(--ink-faint)}
.burger{
  display:none; border:1px solid var(--line); background:var(--c60-raise);
  width:40px; height:40px; border-radius:var(--r-sm); cursor:pointer; color:var(--ink);
}
@media (max-width:960px){.burger{display:grid; place-items:center} .topbar{padding:.7rem 1rem}}
/* จอแคบมาก: ป้ายบทบาทตัดคำจนแถบบนสูงผิดรูป — ตัดออกได้เพราะแถบข้างบอกบทบาทอยู่แล้ว */
@media (max-width:480px){.topbar .pill-brand{display:none} .topbar h1{font-size:.98rem}}
.icon-btn{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  background:var(--c60-raise); color:var(--ink-soft); cursor:pointer;
  display:grid; place-items:center; font-size:.95rem; flex:0 0 38px;
  transition:color .15s var(--ease), border-color .15s var(--ease);
}
.icon-btn:hover{color:var(--c30); border-color:var(--c30-soft)}
.spacer{flex:1}

/* ── Hero + KPI ─────────────────────────────────────────── */
.hero{
  position:relative; overflow:hidden; border-radius:var(--r-lg); padding:1.6rem;
  background:linear-gradient(120deg,var(--c30-deep),var(--c30) 62%,var(--brand-500));
  color:#fff; margin-bottom:1.25rem;
}
.hero::after{
  content:""; position:absolute; inset:-40% -10% auto auto; width:60%; height:200%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);
  transform:rotate(18deg); pointer-events:none;
}
.hero h2{font-size:1.4rem; margin-bottom:.3rem}
.hero p{margin:0; color:#d5e2ff; font-size:.87rem}
.kpi-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:.85rem; margin-top:1.2rem}
.kpi{background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.18);
     border-radius:var(--r); padding:.8rem .9rem; backdrop-filter:blur(6px)}
.kpi .lb{font-size:.72rem; color:#cfdcfa; display:flex; align-items:center; gap:.35rem}
.kpi .vl{font-family:"Kanit",sans-serif; font-size:1.6rem; font-weight:600; font-variant-numeric:tabular-nums; line-height:1.2}

/* ── Card / Table ───────────────────────────────────────── */
.card{background:var(--c60-raise); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1)}
.card-head{padding:1rem 1.15rem; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:.75rem; flex-wrap:wrap}
.card-head h3{font-size:1rem; flex:1; min-width:140px}
.card-body{padding:1.15rem}
.card-body.flush{padding:0}

.tbl{width:100%; border-collapse:collapse; font-size:.88rem}
.tbl th{
  text-align:left; padding:.65rem .9rem; background:var(--c60-sink);
  color:var(--ink-soft); font-weight:600; font-size:.76rem;
  text-transform:uppercase; letter-spacing:.04em; white-space:nowrap;
}
.tbl td{padding:.7rem .9rem; border-top:1px solid var(--line); vertical-align:middle}
.tbl tbody tr:hover{background:var(--c30-wash)}
.tbl .num{text-align:right; font-variant-numeric:tabular-nums}
.tbl-wrap{overflow-x:auto}

/* ตาราง → การ์ด บนมือถือ */
@media (max-width:720px){
  .tbl thead{display:none}
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block; width:100%}
  .tbl tr{
    border:1px solid var(--line); border-radius:var(--r); margin:.7rem;
    background:var(--c60-raise); box-shadow:var(--sh-1); overflow:hidden;
  }
  .tbl td{border-top:none; display:flex; gap:1rem; padding:.5rem .85rem}
  .tbl td+td{border-top:1px dashed var(--line)}
  .tbl td::before{
    content:attr(data-label); font-size:.74rem; color:var(--ink-faint);
    font-weight:600; flex:0 0 34%; text-transform:uppercase; letter-spacing:.03em;
  }
  .tbl td.actions{justify-content:flex-end}
  .tbl td.actions::before{content:none}
}

/* ── ปุ่ม — 1 หน้าจอมีปุ่มสีเน้นได้ปุ่มเดียว ─────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  padding:.5rem .95rem; border-radius:var(--r-sm); border:1px solid transparent;
  font:inherit; font-size:.86rem; font-weight:600; cursor:pointer;
  min-height:40px; text-decoration:none; transition:all .16s var(--ease);
}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn:active{transform:none}
.btn-primary{background:var(--c30); color:#fff}
.btn-primary:hover{background:var(--c30-deep); color:#fff}
.btn-accent{background:var(--c10); color:#2a1c00}     /* ปุ่มเน้น — ใช้ได้ปุ่มเดียวต่อหน้า */
.btn-accent:hover{background:var(--c10-deep); color:#fff}
.btn-ghost{background:transparent; border-color:var(--line); color:var(--ink-soft)}
.btn-ghost:hover{border-color:var(--c30-soft); color:var(--c30); background:var(--c30-wash)}
.btn-danger{background:transparent; border-color:var(--danger); color:var(--danger)}
.btn-danger:hover{background:var(--danger); color:#fff}
.btn-sm{padding:.3rem .6rem; min-height:32px; font-size:.8rem}
.btn[disabled]{opacity:.55; cursor:not-allowed; transform:none}

/* ปุ่มแยกสองส่วน — งานเดียวกันแต่คนละรูปแบบผลลัพธ์ (เช่น เอกสาร PDF | พิมพ์ผ่านเบราว์เซอร์)
   ★ ต้องไม่ยกตัวตอน hover เหมือน .btn ปกติ ไม่งั้นสองซีกจะขยับแยกกันดูเหมือนปุ่มหลุด */
.btn-split{display:inline-flex}
.btn-split > .btn{border-radius:0; transform:none}
.btn-split > .btn:hover{transform:none; position:relative; z-index:1}
.btn-split > .btn:first-child{border-start-start-radius:var(--r-sm); border-end-start-radius:var(--r-sm)}
.btn-split > .btn:last-child{
  border-start-end-radius:var(--r-sm); border-end-end-radius:var(--r-sm);
  margin-inline-start:-1px; padding-inline:.5rem;
}

/* ── ฟอร์ม ──────────────────────────────────────────────── */
.field{margin-bottom:1rem}
.field label{display:block; font-size:.82rem; font-weight:600; color:var(--ink-soft); margin-bottom:.35rem}
.field .req{color:var(--danger)}
.input,.select,.textarea{
  width:100%; padding:.55rem .75rem; border:1px solid var(--line); border-radius:var(--r-sm);
  font:inherit; font-size:.9rem; background:var(--c60-raise); color:var(--ink); min-height:42px;
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.input:focus,.select:focus,.textarea:focus{
  outline:none; border-color:var(--c30); box-shadow:0 0 0 3px var(--c30-wash);
}
.textarea{min-height:96px; resize:vertical}
.hint{font-size:.76rem; color:var(--ink-faint); margin-top:.25rem}
.grid-2{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:0 1rem}

/* ── ป้าย / แจ้งเตือน / สถานะว่าง ────────────────────────── */
.pill{display:inline-flex; align-items:center; gap:.3rem; padding:.15rem .55rem;
      border-radius:999px; font-size:.75rem; font-weight:600}
.pill-ok{background:var(--ok-wash); color:var(--ok)}
.pill-warn{background:var(--warn-wash); color:var(--warn)}
.pill-muted{background:var(--c60-sink); color:var(--ink-faint)}
.pill-brand{background:var(--c30-wash); color:var(--c30)}

.alert{display:flex; gap:.6rem; padding:.75rem 1rem; border-radius:var(--r);
       margin-bottom:1rem; font-size:.88rem; border:1px solid transparent}
.alert-success{background:var(--ok-wash); color:var(--ok); border-color:#bfe6d4}
.alert-danger{background:var(--danger-wash); color:var(--danger); border-color:#f2c9c3}
.alert-warning{background:var(--warn-wash); color:var(--warn); border-color:#f0dcae}

.empty{text-align:center; padding:3rem 1rem; color:var(--ink-faint)}
.empty i{font-size:2.6rem; opacity:.35; display:block; margin-bottom:.6rem}

.search{position:relative; min-width:200px}
.search .input{padding-left:2.1rem}
.search i{position:absolute; left:.7rem; top:50%; transform:translateY(-50%); color:var(--ink-faint); font-size:.9rem}

/* ── กราฟ SVG ───────────────────────────────────────────── */
.bar-row{display:flex; align-items:center; gap:.7rem; padding:.4rem 0; font-size:.84rem}
.bar-row .nm{flex:0 0 40%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bar-track{flex:1; height:9px; background:var(--c60-sink); border-radius:999px; overflow:hidden}
.bar-fill{height:100%; border-radius:999px; background:linear-gradient(90deg,var(--c30),var(--c30-soft))}
.bar-row .vl{flex:0 0 auto; font-variant-numeric:tabular-nums; color:var(--ink-soft); font-weight:600}

.foot{padding:1rem 1.5rem; color:var(--ink-faint); font-size:.78rem; border-top:1px solid var(--line); background:var(--c60-raise)}
.scrim{display:none; position:fixed; inset:0; background:rgba(19,42,99,.45); z-index:50}
.scrim.on{display:block}
@media (min-width:961px){.scrim{display:none !important}}

/* ── SweetAlert2 — ปรับให้เข้ากับโทเคนสีและฟอนต์ของระบบ ───────
   skill ห้ามใช้ alert/confirm/prompt ของเบราว์เซอร์ ต้องใช้ตัวนี้แทน */
.swal2-popup{
  font-family:"Sarabun",system-ui,sans-serif !important;
  border-radius:var(--r-lg) !important;
  background:var(--c60-raise) !important;
  color:var(--ink) !important;
  box-shadow:var(--sh-3) !important;
}
.swal2-title{font-family:"Kanit",sans-serif !important; font-weight:600 !important;
             font-size:1.15rem !important; color:var(--ink) !important}
.swal2-html-container{font-size:.9rem !important; color:var(--ink-soft) !important}
.swal2-actions{gap:.6rem !important}
.swal2-styled{
  border-radius:var(--r-sm) !important; font-family:"Sarabun",sans-serif !important;
  font-weight:600 !important; font-size:.88rem !important; min-height:40px !important;
  padding:.5rem 1.1rem !important; box-shadow:none !important;
}
.swal2-styled.swal2-confirm{background:var(--c30) !important; color:#fff !important}
.swal2-styled.swal2-confirm.swal2-danger{background:var(--danger) !important}
.swal2-styled.swal2-cancel{
  background:transparent !important; color:var(--ink-soft) !important;
  border:1px solid var(--line) !important;
}
.swal2-icon{border-width:3px !important}
.swal2-icon.swal2-warning{border-color:var(--warn) !important; color:var(--warn) !important}
.swal2-icon.swal2-success [class^='swal2-success-line']{background:var(--ok) !important}
.swal2-icon.swal2-success .swal2-success-ring{border-color:var(--ok) !important}

/* toast มุมขวาบน สำหรับผลลัพธ์ที่ไม่ต้องให้ผู้ใช้ตอบ */
.swal2-toast{
  box-shadow:var(--sh-2) !important; border:1px solid var(--line) !important;
  border-radius:var(--r) !important;
}
.swal2-toast .swal2-title{font-size:.9rem !important}
@media (prefers-reduced-motion:reduce){
  .swal2-popup,.swal2-toast{animation:none !important}
}

/* ── ลิงก์ทางลัดบนหน้าหลัก ─────────────────────────────────
   ★ เดิมทำ hover ด้วย onmouseover/onmouseout ใน HTML ซึ่ง CSP บล็อก
     (script-src เป็น 'self' + nonce จึงไม่ครอบ event handler แบบ attribute)
     ย้ายมาเป็น :hover ใน CSS ซึ่งเป็นที่ที่ควรอยู่ตั้งแต่แรก */
.quick-link{
  display:flex; gap:.85rem; align-items:center; padding:.85rem 1rem;
  border:1px solid var(--line); border-radius:var(--r); text-decoration:none;
  color:inherit; background:transparent; transition:all .16s var(--ease);
}
.quick-link:hover,
.quick-link:focus-visible{ border-color:var(--c30-soft); background:var(--c30-wash); }