/* ============================================================
   IT-CIL — Design Language v1  ·  "ห้องเรียนชุมชน"
   An original, warm-editorial identity. NOT related to any
   other system. Trirong (serif display) + IBM Plex Sans Thai.
   Palette: warm paper · pine green · terracotta · amber.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Trirong:wght@400;500;600;700&family=IBM+Plex+Sans+Thai:wght@300;400;500;600;700&display=swap');

:root{
  /* ============================================================
     IT-CIL palette · น้ำเงิน 80% · ขาวนวล 15% · ส้ม 5% (+สีรองเล็กน้อย)
     คงชื่อตัวแปรเดิม (pine/terra/amber/plum) เพื่อไม่ต้องแก้ทุก component:
       pine = น้ำเงินหลัก · terra = ส้ม accent · amber = น้ำเงินรอง · plum = น้ำเงินเข้ม
     ============================================================ */
  /* surfaces — ขาวนวลอมฟ้า (ไม่ใช่ #fff) */
  --paper:#eef1f8; --paper-2:#e1e6f1;
  --surface:#fbfcff; --surface-2:#f3f6fc;
  --line:#dce1ee; --line-2:#eaeef7;
  /* ink — น้ำเงินเข้ม */
  --ink:#1f2433; --ink-2:#454d66; --ink-3:#7e869f; --ink-4:#aab0c4;
  /* brand: pine = น้ำเงินหลัก (80%) */
  --pine:#3a4a77; --pine-dark:#2b3759; --pine-deep:#1f2747; --pine-soft:#e7eaf2;
  /* terra = ส้ม accent (5%) */
  --terra:#eb5a26; --terra-dark:#c8431a; --terra-soft:#fce4da;
  /* amber = น้ำเงินรอง */
  --amber:#5b6aa0; --amber-dark:#3a4a77; --amber-soft:#e7eaf2;
  /* plum = น้ำเงินเข้ม (แอดมิน) */
  --plum:#2b3759; --plum-soft:#e2e6f0;
  /* semantic (status — คงไว้ให้แยกออกจากแบรนด์) */
  --ok:#2f8f63; --ok-soft:#def0e7; --ok-ink:#1f6647;
  --warn:#d98324; --warn-soft:#faecd6; --warn-ink:#8a5410;
  --bad:#cf4434; --bad-soft:#fae0dc; --bad-ink:#8f291d;
  /* role tints */
  --r-teacher:var(--terra); --r-teacher-soft:var(--terra-soft);
  --r-student:var(--pine);  --r-student-soft:var(--pine-soft);
  --r-community:var(--amber); --r-community-soft:var(--amber-soft);
  --r-admin:var(--plum); --r-admin-soft:var(--plum-soft);
  /* shape */
  --r1:8px; --r2:12px; --r3:16px; --r4:22px; --pill:999px;
  --sh-1:0 1px 2px rgba(31,36,51,.06), 0 1px 3px rgba(31,36,51,.05);
  --sh-2:0 2px 6px rgba(31,36,51,.06), 0 6px 18px rgba(31,36,51,.08);
  --sh-3:0 4px 12px rgba(31,36,51,.08), 0 14px 36px rgba(31,36,51,.12);
  /* layout */
  --rail:268px; --top:0px;
  /* accent (themable per role) */
  --accent:var(--pine); --accent-dark:var(--pine-dark); --accent-soft:var(--pine-soft);
  --serif:'Trirong', Georgia, serif;
  --sans:'IBM Plex Sans Thai','IBM Plex Sans', system-ui, sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{ font-family:var(--sans); color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; line-height:1.55; font-size:15px; }
.ph{ line-height:1; }
:focus-visible{ outline:2.5px solid var(--accent); outline-offset:2px; border-radius:4px; }
button{ font-family:inherit; }

/* paper texture: faint blue dots */
.paper-bg{
  background-color:var(--paper);
  background-image:radial-gradient(rgba(58,74,119,.06) 1px, transparent 1.4px);
  background-size:22px 22px;
}

h1,h2,h3{ font-family:var(--serif); font-weight:600; letter-spacing:-.01em; color:var(--ink); margin:0; line-height:1.18; }
.serif{ font-family:var(--serif); }
.eyebrow{ font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.muted{ color:var(--ink-3); }

/* ─────────── Reviewer perspective switcher ─────────── */
.persp{ position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:600;
  display:flex; align-items:center; gap:3px; background:rgba(39,34,25,.92);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); padding:5px; border-radius:var(--pill);
  box-shadow:0 12px 30px rgba(40,28,10,.3); }
.persp .lbl{ color:rgba(255,255,255,.5); font-size:.68rem; font-weight:600; padding:0 8px 0 11px; letter-spacing:.05em; display:flex; align-items:center; gap:5px; }
.persp button{ font-size:.8rem; font-weight:600; border:none; background:transparent; color:rgba(255,255,255,.72);
  padding:6px 14px; border-radius:var(--pill); cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:.15s; }
.persp button:hover{ color:#fff; background:rgba(255,255,255,.1); }
.persp button.on{ background:var(--surface); color:var(--pine-deep); }
.persp button.on .ph{ color:var(--terra); }
@media(max-width:720px){ .persp .lbl{display:none;} .persp button span{display:none;} .persp button{padding:7px 11px;} }

/* ─────────── Buttons ─────────── */
.btn{ font-family:var(--sans); font-weight:600; font-size:.9rem; border:1.5px solid transparent;
  border-radius:var(--r2); padding:.6rem 1.1rem; display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  cursor:pointer; text-decoration:none; transition:all .18s ease; white-space:nowrap; line-height:1.2; }
.btn .ph{ font-size:1.05em; }
.btn-pri{ background:var(--accent); color:#fff; box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 28%,transparent); }
.btn-pri:hover{ background:var(--accent-dark); transform:translateY(-1px); box-shadow:0 8px 18px color-mix(in srgb,var(--accent) 35%,transparent); }
.btn-terra{ background:var(--terra); color:#fff; box-shadow:0 4px 12px rgba(191,93,56,.28); }
.btn-terra:hover{ background:var(--terra-dark); transform:translateY(-1px); }
.btn-ghost{ background:var(--surface); color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.btn-soft{ background:var(--accent-soft); color:var(--accent-dark); }
.btn-soft:hover{ background:color-mix(in srgb,var(--accent-soft) 70%,var(--accent) 12%); }
.btn-block{ width:100%; }
.btn-sm{ padding:.42rem .8rem; font-size:.82rem; border-radius:var(--r1); }
.btn-lg{ padding:.78rem 1.4rem; font-size:1rem; }
.btn[disabled]{ opacity:.5; pointer-events:none; }
.icon-btn{ width:40px; height:40px; border-radius:var(--r2); border:1.5px solid var(--line); background:var(--surface);
  color:var(--ink-2); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:1.1rem; position:relative; transition:.15s; }
.icon-btn:hover{ border-color:var(--accent); color:var(--accent); }
.icon-dot{ position:absolute; top:-3px; right:-3px; min-width:17px; height:17px; padding:0 4px; border-radius:var(--pill);
  background:var(--terra); color:#fff; font-size:.62rem; font-weight:700; display:flex; align-items:center; justify-content:center; border:2px solid var(--surface); }

/* ─────────── Cards & misc surfaces ─────────── */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r3); box-shadow:var(--sh-1); }
.card-pad{ padding:20px 22px; }
.tile{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r3); padding:18px; box-shadow:var(--sh-1); }
.divider{ height:1px; background:var(--line); border:0; margin:0; }

/* badges / pills / chips */
.badge{ display:inline-flex; align-items:center; gap:5px; font-size:.72rem; font-weight:600; padding:3px 10px; border-radius:var(--pill); background:var(--surface-2); color:var(--ink-2); }
.badge.ok{ background:var(--ok-soft); color:var(--ok-ink); }
.badge.warn{ background:var(--warn-soft); color:var(--warn-ink); }
.badge.bad{ background:var(--bad-soft); color:var(--bad-ink); }
.badge.draft{ background:var(--paper-2); color:var(--ink-3); }
.badge.accent{ background:var(--accent-soft); color:var(--accent-dark); }
.chip{ display:inline-flex; align-items:center; gap:6px; font-size:.82rem; font-weight:500; padding:6px 13px; border-radius:var(--pill);
  background:var(--surface); border:1.5px solid var(--line); color:var(--ink-2); cursor:pointer; transition:.15s; font-family:var(--sans); }
.chip:hover{ border-color:var(--accent); color:var(--accent); }
.chip.on{ background:var(--accent); border-color:var(--accent); color:#fff; }
.rolepill{ display:inline-flex; align-items:center; gap:6px; font-size:.74rem; font-weight:600; padding:4px 11px; border-radius:var(--pill); }
.rolepill .dot{ width:8px; height:8px; border-radius:50%; }
.role-teacher{ background:var(--terra-soft); color:var(--terra-dark); } .role-teacher .dot{ background:var(--terra); }
.role-student{ background:var(--pine-soft); color:var(--pine-dark); } .role-student .dot{ background:var(--pine); }
.role-community{ background:var(--amber-soft); color:var(--amber-dark); } .role-community .dot{ background:var(--amber); }
.role-admin{ background:var(--plum-soft); color:var(--plum); } .role-admin .dot{ background:var(--plum); }

/* progress (growth bar) */
.bar{ height:9px; border-radius:var(--pill); background:var(--paper-2); overflow:hidden; }
.bar > i{ display:block; height:100%; border-radius:var(--pill); background:linear-gradient(90deg,var(--accent),var(--accent-dark)); transition:width .5s ease; }
.bar.amber > i{ background:linear-gradient(90deg,var(--amber),var(--amber-dark)); }

/* growth ring */
.ring{ --p:0; --c:var(--accent); width:64px; height:64px; border-radius:50%;
  background:conic-gradient(var(--c) calc(var(--p)*1%), var(--paper-2) 0); display:flex; align-items:center; justify-content:center; }
.ring::before{ content:''; position:absolute; width:46px; height:46px; border-radius:50%; background:var(--surface); }
.ring span{ position:relative; font-weight:700; font-size:.92rem; font-family:var(--serif); color:var(--accent-dark); }

/* ─────────── App shell ─────────── */
.shell{ position:fixed; inset:0; display:grid; grid-template-columns:var(--rail) 1fr; background:var(--paper); overflow:hidden; }
.shell.paper-bg{ background-color:var(--paper); }

.rail{ background:var(--surface); border-right:1px solid var(--line); display:flex; flex-direction:column; min-height:0; }
.rail-brand{ display:flex; align-items:center; gap:11px; padding:18px 18px 16px; border-bottom:1px solid var(--line-2); }
.brand-mark{ width:42px; height:42px; border-radius:13px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(140deg,var(--pine),var(--pine-deep)); color:var(--terra); font-size:1.35rem; box-shadow:var(--sh-1); position:relative; }
.brand-mark::after{ content:''; position:absolute; inset:0; border-radius:13px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
.brand-name{ font-family:var(--serif); font-weight:700; font-size:1.05rem; line-height:1.1; }
.brand-sub{ font-size:.66rem; color:var(--ink-3); margin-top:1px; }
.rail-nav{ flex:1; overflow-y:auto; padding:14px 12px; display:flex; flex-direction:column; gap:3px; }
.rail-sec{ font-size:.64rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-4); padding:14px 12px 5px; }
.nav-i{ display:flex; align-items:center; gap:11px; padding:.6rem .8rem; border-radius:var(--r2); border:none; background:transparent;
  color:var(--ink-2); font-family:var(--sans); font-size:.9rem; font-weight:500; text-align:left; cursor:pointer; transition:.15s; position:relative; }
.nav-i .ph{ font-size:1.2rem; width:24px; text-align:center; flex-shrink:0; color:var(--ink-3); }
.nav-i:hover{ background:var(--surface-2); color:var(--ink); }
.nav-i.on{ background:var(--accent-soft); color:var(--accent-dark); font-weight:600; }
.nav-i.on .ph{ color:var(--accent); }
.nav-i.on::before{ content:''; position:absolute; left:-12px; top:50%; transform:translateY(-50%); width:4px; height:22px; border-radius:0 4px 4px 0; background:var(--terra); }
.nav-i .tag{ margin-left:auto; font-size:.66rem; font-weight:700; padding:1px 8px; border-radius:var(--pill); background:var(--amber-soft); color:var(--amber-dark); }
.nav-i .hot{ margin-left:auto; width:7px; height:7px; border-radius:50%; background:var(--terra); }
.rail-foot{ margin:12px; padding:13px 14px; border-radius:var(--r2); background:var(--accent-soft); display:flex; gap:9px; font-size:.78rem; color:var(--accent-dark); line-height:1.5; }
.rail-foot .ph{ font-size:1.1rem; flex-shrink:0; }

.work{ display:flex; flex-direction:column; min-height:0; }
.topbar{ height:64px; flex-shrink:0; background:color-mix(in srgb,var(--paper) 80%, transparent);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 26px; }
.topbar-title{ font-family:var(--serif); font-weight:600; font-size:1.08rem; }
.topbar-r{ display:flex; align-items:center; gap:12px; }
.usr{ display:flex; align-items:center; gap:10px; }
.usr .av{ width:38px; height:38px; border-radius:12px; color:#fff; font-weight:700; font-size:.82rem; display:flex; align-items:center; justify-content:center; font-family:var(--serif); }
.usr-meta{ line-height:1.2; }
.usr-meta b{ font-size:.86rem; font-weight:600; display:block; }
.usr-meta small{ font-size:.7rem; color:var(--ink-3); }
.scroll{ flex:1; overflow-y:auto; }
.page{ max-width:1080px; padding:26px 28px 70px; margin:0 auto; }
.page-wide{ max-width:1240px; }

/* page header */
.ph-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.ph-head h2{ font-size:1.7rem; }
.ph-head p{ margin:5px 0 0; color:var(--ink-3); font-size:.92rem; }

/* section header inside cards */
.sec-h{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:.95rem; color:var(--ink); padding-bottom:10px; margin-bottom:14px; border-bottom:1.5px solid var(--line-2); }
.sec-h .ph{ color:var(--accent); font-size:1.1rem; }

/* stat cards */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.stat{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r3); padding:16px 18px; box-shadow:var(--sh-1); }
.stat .ic{ width:42px; height:42px; border-radius:var(--r2); display:flex; align-items:center; justify-content:center; font-size:1.25rem; color:#fff; margin-bottom:12px; }
.stat .n{ font-family:var(--serif); font-size:1.8rem; font-weight:700; line-height:1; }
.stat .l{ font-size:.8rem; color:var(--ink-3); margin-top:5px; }
.stat .delta{ font-size:.74rem; font-weight:600; color:var(--ok); margin-top:7px; display:inline-flex; align-items:center; gap:3px; }
@media(max-width:860px){ .stats{ grid-template-columns:repeat(2,1fr); } }

/* tables */
.tbl{ width:100%; border-collapse:collapse; }
.tbl th{ text-align:left; font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3);
  background:var(--surface-2); padding:11px 18px; border-bottom:1px solid var(--line); white-space:nowrap; }
.tbl td{ padding:13px 18px; font-size:.86rem; border-bottom:1px solid var(--line-2); }
.tbl tbody tr:last-child td{ border-bottom:none; }
.tbl tbody tr:hover{ background:var(--surface-2); }
.row-t{ display:flex; align-items:center; gap:10px; font-weight:500; }
.row-t .ph{ color:var(--accent); }
.act{ width:34px; height:34px; border-radius:9px; border:1.5px solid var(--line); background:var(--surface); color:var(--ink-3);
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:.15s; margin-right:4px; }
.act:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.act.bad:hover{ border-color:var(--bad); color:var(--bad); background:var(--bad-soft); }

/* forms */
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.field > label{ font-size:.82rem; font-weight:600; color:var(--ink-2); }
.field .req{ color:var(--bad); }
.inp{ width:100%; border:1.5px solid var(--line); border-radius:var(--r2); padding:.6rem .85rem; font-family:var(--sans); font-size:.9rem;
  background:var(--surface); color:var(--ink); outline:none; transition:.15s; }
.inp:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
textarea.inp{ resize:vertical; min-height:76px; }
.inp-pre{ display:flex; align-items:stretch; border:1.5px solid var(--line); border-radius:var(--r2); overflow:hidden; background:var(--surface); }
.inp-pre:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.inp-pre span{ display:flex; align-items:center; padding:0 12px; background:var(--surface-2); border-right:1px solid var(--line); color:var(--ink-3); font-size:.9rem; }
.inp-pre .inp{ border:none; box-shadow:none; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:760px){ .grid2{ grid-template-columns:1fr; } }
.upl{ display:flex; align-items:center; gap:12px; padding:14px 16px; border:2px dashed var(--line); border-radius:var(--r2);
  background:var(--surface-2); cursor:pointer; color:var(--ink-2); transition:.15s; }
.upl:hover{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent-dark); }
.upl .ph{ font-size:1.5rem; color:var(--accent); flex-shrink:0; }
.upl strong{ display:block; font-size:.86rem; } .upl small{ display:block; font-size:.74rem; color:var(--ink-3); }
.upl-big{ flex-direction:column; text-align:center; padding:34px 20px; }
.upl-big .ph{ font-size:2.6rem; }
.switch{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; }
.switch input{ display:none; }
.switch .sl{ width:44px; height:25px; border-radius:var(--pill); background:var(--paper-2); position:relative; transition:.15s; }
.switch .sl::before{ content:''; position:absolute; top:2.5px; left:2.5px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:var(--sh-1); transition:.18s; }
.switch input:checked + .sl{ background:var(--accent); }
.switch input:checked + .sl::before{ transform:translateX(19px); }

/* segmented tabs */
.seg{ display:inline-flex; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r2); padding:4px; gap:3px; }
.seg button{ border:none; background:transparent; color:var(--ink-2); font-family:var(--sans); font-weight:600; font-size:.84rem;
  padding:.45rem .9rem; border-radius:var(--r1); cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:.15s; }
.seg button:hover{ color:var(--ink); }
.seg button.on{ background:var(--surface); color:var(--accent-dark); box-shadow:var(--sh-1); }

/* form-actions footer */
.f-actions{ display:flex; gap:10px; justify-content:flex-end; padding-top:18px; margin-top:4px; border-top:1px solid var(--line-2); }

.note{ display:flex; gap:9px; align-items:flex-start; padding:11px 13px; border-radius:var(--r2); background:var(--accent-soft);
  color:var(--accent-dark); font-size:.82rem; line-height:1.5; }
.note .ph{ flex-shrink:0; margin-top:1px; }
.empty{ text-align:center; padding:46px 20px; color:var(--ink-3); }
.empty .ph{ font-size:2.6rem; color:var(--ink-4); display:block; margin-bottom:8px; }