/* ============================================================
   ระบบนิเทศภายในสถานศึกษา — ธีมโทนชมพู-ม่วง (แนวเดียวกับ ACMS)
   Font: Prompt (Thai + Latin)
   ============================================================ */
:root{
  --brand:#e5397f;  --brand-600:#c9246b;  --brand-100:#fcdcea;  --brand-50:#fdf2f7;
  --purple:#6d5bf5; --purple-600:#5b46d9; --purple-50:#f1eeff;
  --blue:#2f80ed;   --blue-400:#4dc3f7;   --blue-50:#eaf4fe;
  --teal:#14b8a6;   --green:#22c55e;      --green-50:#ecfdf5;
  --amber:#f59e0b;  --amber-50:#fffbeb;   --red:#ef4444;  --red-50:#fef2f2;

  --grad-pink:linear-gradient(135deg,#f2568f 0%,#e02f76 100%);
  --grad-purple:linear-gradient(135deg,#9b8bf8 0%,#6d5bf5 100%);
  --grad-blue:linear-gradient(135deg,#57c7f8 0%,#2f80ed 100%);
  --grad-amber:linear-gradient(135deg,#fbbf24 0%,#f97316 100%);
  --grad-green:linear-gradient(135deg,#4ade80 0%,#16a34a 100%);
  --grad-brand:linear-gradient(135deg,#f2568f 0%,#c9246b 100%);

  --ink:#2b2540; --muted:#8b87a3; --line:#ecebf4;
  --surface:#fff; --bg:#f7f6fb; --dark:#2f2a52;
  --shadow:0 1px 2px rgba(43,37,64,.04), 0 10px 30px rgba(109,91,245,.07);
  --shadow-lg:0 18px 40px rgba(43,37,64,.12);
  --radius:18px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"Prompt","Noto Sans Thai",system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--bg); color:var(--ink);
  margin:0; line-height:1.6; font-size:15px; letter-spacing:.1px;
  display:flex; flex-direction:column; min-height:100vh;
}
body > .container-fluid{flex:1 0 auto}
a{color:var(--brand-600); text-decoration:none}
a:hover{color:var(--brand)}
h1,h2,h3,h4,h5{font-weight:600; letter-spacing:-.2px; color:var(--ink)}
.text-brand{color:var(--brand-600)!important}
.bg-brand{background:var(--brand)!important}

/* ---------- Navbar ---------- */
.app-navbar{
  background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.app-navbar .navbar-brand{display:flex; align-items:center; gap:.55rem; font-weight:600; color:var(--ink); letter-spacing:-.3px}
.app-navbar .brand-mark{
  width:34px; height:34px; border-radius:10px; background:var(--grad-brand);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.05rem;
  box-shadow:0 4px 12px rgba(229,57,127,.35); overflow:hidden; flex:0 0 auto;
}
.app-navbar .brand-mark img{width:100%;height:100%;object-fit:cover}
.app-navbar .nav-link{color:var(--ink); font-weight:500; border-radius:10px; padding:.4rem .8rem!important}
.app-navbar .nav-link:hover{background:var(--brand-50); color:var(--brand-600)}
.app-navbar .navbar-toggler{border:none; padding:.25rem .5rem}
.app-navbar .navbar-toggler:focus{box-shadow:none}
.app-navbar .dropdown-menu{border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow)}
.badge-role{background:var(--brand-100); color:var(--brand-600); font-weight:500; border-radius:20px; padding:.25em .7em; font-size:.75rem}
.term-chip{
  display:inline-flex; align-items:center; gap:.35rem; font-size:.8rem; font-weight:500;
  color:var(--purple-600); background:var(--purple-50); border:1px solid #e0daff;
  padding:.3rem .8rem; border-radius:30px; white-space:nowrap;
}

/* ---------- ปุ่ม ---------- */
.btn{border-radius:11px; font-weight:500; padding:.5rem 1.05rem; transition:.15s}
.btn-brand{background:var(--grad-brand); border:none; color:#fff; box-shadow:0 6px 16px rgba(229,57,127,.3)}
.btn-brand:hover{background:var(--brand-600); color:#fff; transform:translateY(-1px)}
.btn-outline-brand{color:var(--brand-600); border:1px solid #f4bcd5; background:#fff}
.btn-outline-brand:hover{background:var(--brand); border-color:var(--brand); color:#fff}
.btn-lg{padding:.7rem 1.4rem; border-radius:13px}
.btn-sm{border-radius:9px; padding:.3rem .7rem; font-size:.85rem}

/* ---------- การ์ด ---------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
.card-header{background:#fff; border-bottom:1px solid var(--line); font-weight:600; color:var(--ink); padding:.9rem 1.15rem}
.card-body{padding:1.15rem}
.card-footer{background:#fff; border-top:1px solid var(--line)}

/* ---------- การ์ดสถิติ ---------- */
.stat-card{
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.1rem 1.2rem; box-shadow:var(--shadow);
  display:flex; align-items:center; gap:1rem; height:100%;
}
.stat-card .ic{
  flex:0 0 auto; width:52px; height:52px; border-radius:14px;
  background:var(--brand-50); color:var(--brand-600);
  display:flex; align-items:center; justify-content:center; font-size:1.5rem;
}
.stat-card.tone-purple .ic{background:var(--purple-50); color:var(--purple-600)}
.stat-card.tone-blue   .ic{background:var(--blue-50);   color:var(--blue)}
.stat-card.tone-green  .ic{background:var(--green-50);  color:#16a34a}
.stat-card.tone-amber  .ic{background:var(--amber-50);  color:#d97706}
.stat-card.tone-red    .ic{background:var(--red-50);    color:var(--red)}
.stat-card .num{font-size:1.7rem; font-weight:700; line-height:1.15; color:var(--ink)}
.stat-card .lbl{color:var(--muted); font-size:.85rem}
.stat-card .sub{color:var(--muted); font-size:.75rem; margin-top:.1rem}

/* ---------- หัวข้อหน้า ---------- */
.page-title{font-size:1.45rem; font-weight:600; margin:0; display:flex; align-items:center; gap:.6rem}
.page-title::before{content:""; width:5px; height:1.35rem; border-radius:3px; background:linear-gradient(var(--brand),var(--brand-600))}

/* ---------- ตาราง ---------- */
.table{--bs-table-bg:transparent; margin:0}
.table thead th{
  background:var(--dark); color:#fff; font-weight:500; border-bottom:none;
  white-space:nowrap; font-size:.82rem; letter-spacing:.02em; padding:.8rem .9rem;
}
.table thead th:first-child{border-top-left-radius:12px}
.table thead th:last-child{border-top-right-radius:12px}
.table tbody td{border-color:var(--line); padding:.7rem .9rem; vertical-align:middle}
.table-hover tbody tr:hover{background:var(--brand-50)}
.table-sm tbody td, .table-sm thead th{padding:.45rem .6rem}

/* ---------- ฟอร์ม ---------- */
.form-label{font-weight:500; font-size:.9rem; margin-bottom:.3rem}
.form-control,.form-select{border-radius:11px; border:1px solid #e3e1ee; padding:.55rem .85rem; font-size:.95rem}
.form-control:focus,.form-select:focus{border-color:var(--brand); box-shadow:0 0 0 .2rem rgba(229,57,127,.12)}
.input-group-text{border-radius:11px; background:var(--brand-50); border-color:#e3e1ee; color:var(--brand-600)}

/* ---------- Sidebar ---------- */
.app-shell{display:flex; gap:1.5rem; align-items:flex-start}
.app-sidebar{
  flex:0 0 258px; width:258px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:.6rem; box-shadow:var(--shadow); position:sticky; top:5rem;
}
.side-search{position:relative; margin:.2rem .2rem .6rem}
.side-search i{position:absolute; left:.7rem; top:50%; transform:translateY(-50%); color:var(--muted); font-size:.9rem}
.side-search input{
  width:100%; border:1px solid var(--line); background:var(--bg); border-radius:10px;
  padding:.45rem .6rem .45rem 2rem; font-size:.86rem; outline:none;
}
.side-search input:focus{border-color:var(--brand); background:#fff}
.side-group{margin-bottom:.5rem}
.side-group-title{
  display:flex; align-items:center; gap:.45rem; font-size:.72rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.05em; color:var(--muted); padding:.45rem .8rem .3rem;
}
.side-link{
  display:flex; align-items:center; gap:.65rem; padding:.55rem .8rem; border-radius:11px;
  color:var(--ink); font-weight:500; font-size:.92rem; margin-bottom:2px; transition:.14s;
}
.side-link i{font-size:1.05rem; color:var(--muted); width:1.3rem; text-align:center; flex:0 0 auto}
.side-link span{flex:1 1 auto; min-width:0}
.side-link:hover{background:var(--brand-50); color:var(--brand-600)}
.side-link:hover i{color:var(--brand-600)}
.side-link.active{background:var(--grad-brand); color:#fff; box-shadow:0 4px 12px rgba(229,57,127,.28)}
.side-link.active i{color:#fff}
.side-badge{background:var(--red); color:#fff; font-size:.7rem; border-radius:20px; padding:.05rem .45rem; font-weight:600}
.side-link.active .side-badge{background:#fff; color:var(--brand-600)}
.side-help{
  display:flex; align-items:center; gap:.5rem; margin-top:.5rem; padding:.55rem .8rem;
  border-top:1px solid var(--line); color:var(--muted); font-size:.85rem;
}
.app-content{flex:1 1 auto; min-width:0}
.side-toggle{
  display:none; width:100%; margin-bottom:.8rem; border:1px solid var(--line); background:#fff;
  border-radius:12px; padding:.6rem .9rem; font-weight:500; color:var(--ink); box-shadow:var(--shadow);
}
@media (max-width:991.98px){
  .app-shell{flex-direction:column}
  .app-sidebar{width:100%; flex:1 1 auto; position:static; display:none}
  .app-sidebar.show{display:block}
  .side-toggle{display:block}
}

/* ---------- Hero / หน้าแรก ---------- */
.hero{
  position:relative; overflow:hidden; border:1px solid var(--line); border-radius:24px; padding:3rem 2rem;
  background:radial-gradient(1200px 400px at 80% -20%, var(--brand-100), transparent 60%),
             linear-gradient(180deg,var(--brand-50),transparent);
}
.hero .eyebrow{
  display:inline-flex; align-items:center; gap:.4rem; font-size:.82rem; font-weight:500;
  color:var(--brand-600); background:#fff; border:1px solid var(--brand-100);
  padding:.35rem .85rem; border-radius:30px; margin-bottom:1rem;
}
.hero h1{font-size:2.3rem; font-weight:700; line-height:1.25; margin-bottom:.9rem}
.hero p.lead{color:var(--muted); font-size:1.02rem; max-width:640px}
.hero .hero-art{position:absolute; right:-25px; bottom:-40px; font-size:13rem; color:var(--brand); opacity:.08; transform:rotate(-8deg); pointer-events:none}

.feature{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem; height:100%; box-shadow:var(--shadow); transition:.16s}
.feature:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}
.feature .fic{width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:1.35rem; color:#fff; margin-bottom:.8rem}

/* ---------- หน้าเข้าสู่ระบบ ---------- */
.login-wrap{max-width:430px; margin:3rem auto}
.login-card{background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow-lg); overflow:hidden}
.login-card .top{background:var(--grad-brand); color:#fff; padding:2rem 1.5rem; text-align:center}
.login-card .top .ic{font-size:2.6rem; opacity:.95}

/* ---------- ปฏิทินจองคาบ ---------- */
.cal-grid{overflow-x:auto}
.cal-table{border-collapse:separate; border-spacing:6px; min-width:720px; width:100%}
.cal-table th{
  background:var(--dark); color:#fff; font-weight:500; font-size:.8rem; padding:.55rem .5rem;
  border-radius:10px; text-align:center; white-space:nowrap;
}
.cal-table th.date-col{background:var(--purple-600)}
.cal-table td{padding:0; vertical-align:top}
.cal-day{
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:.5rem .65rem;
  font-weight:500; white-space:nowrap; min-width:120px;
}
.cal-day .dow{font-size:.75rem; color:var(--muted)}
.slot{
  border:1px dashed #dfdcee; border-radius:12px; padding:.45rem .5rem; text-align:center;
  background:#fbfaff; min-height:62px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:.2rem; font-size:.8rem; color:var(--muted);
}
.slot.open{border-style:solid; border-color:#cfe9d6; background:var(--green-50); color:#15803d; cursor:pointer; transition:.14s}
.slot.open:hover{background:#d9f7e4; transform:translateY(-1px); box-shadow:0 6px 14px rgba(22,163,74,.15)}
.slot.full{border-color:#f6d3d3; background:var(--red-50); color:#b91c1c}
.slot.mine{border-color:var(--brand); background:var(--brand-50); color:var(--brand-600); font-weight:600}
.slot.closed{background:#f4f3f8; color:#b9b6c8}
.slot .q{font-size:.72rem; opacity:.85}
.slot-legend{display:flex; flex-wrap:wrap; gap:1rem; font-size:.82rem; color:var(--muted)}
.slot-legend .dot{display:inline-block; width:12px; height:12px; border-radius:4px; margin-right:.3rem; vertical-align:-1px}

/* ---------- แบบประเมิน (มาตรวัด) ---------- */
.rate-row{border:1px solid var(--line); border-radius:14px; padding:.7rem .9rem; margin-bottom:.55rem; background:#fff}
.rate-row:hover{border-color:#e7c9da; background:var(--brand-50)}
.rate-row .txt{font-size:.94rem}
.rate-scale{display:flex; gap:.3rem; flex-wrap:nowrap}
.rate-scale input{position:absolute; opacity:0; width:0; height:0}
.rate-scale label{
  width:38px; height:38px; border-radius:11px; border:1px solid #e3e1ee; background:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:600; cursor:pointer;
  font-size:.9rem; color:var(--muted); transition:.12s; margin:0;
}
.rate-scale label:hover{border-color:var(--brand); color:var(--brand-600)}
.rate-scale input:checked + label{background:var(--grad-brand); color:#fff; border-color:transparent; box-shadow:0 4px 10px rgba(229,57,127,.28)}
.rate-scale label.na{width:auto; padding:0 .6rem; font-size:.8rem; font-weight:500}
.rate-scale input:checked + label.na{background:#6b7280; box-shadow:none}
.scale-help{
  display:flex; flex-wrap:wrap; gap:.4rem .9rem; font-size:.8rem; color:var(--muted);
  background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:.55rem .85rem;
}
.scale-help strong{color:var(--ink)}
.section-head{
  background:var(--purple-50); border-left:4px solid var(--purple); border-radius:10px;
  padding:.55rem .9rem; font-weight:600; margin:1.1rem 0 .7rem; color:var(--purple-600);
}

/* ---------- แถบความก้าวหน้า ---------- */
.progress-thin{height:8px; background:#eceafb; border-radius:20px; overflow:hidden; min-width:80px}
.progress-thin .bar{height:100%; border-radius:20px}
.bg-primary{background:var(--blue)!important}
.bg-info{background:var(--blue-400)!important}

/* ---------- กล่องว่าง ---------- */
.empty-box{text-align:center; color:var(--muted); padding:2.5rem 1rem; background:#fff; border:1px dashed var(--line); border-radius:var(--radius)}
.empty-box i{font-size:2.5rem; opacity:.4; display:block; margin-bottom:.5rem}

/* ---------- ป้ายสถานะ ---------- */
.chip{display:inline-flex; align-items:center; gap:.3rem; font-size:.78rem; font-weight:500; padding:.22rem .7rem; border-radius:20px}
.chip-ok{background:var(--green-50); color:#15803d}
.chip-wait{background:var(--amber-50); color:#b45309}
.chip-off{background:#f4f3f8; color:var(--muted)}
.chip-no{background:var(--red-50); color:#b91c1c}

/* ---------- Footer ---------- */
.app-footer{margin-top:2rem; padding:1.2rem 0; background:#fff; border-top:1px solid var(--line); font-size:.9rem; flex-shrink:0}

/* ---------- เอกสารสำหรับพิมพ์ ---------- */
.print-doc{background:#fff; padding:1.5rem; border-radius:var(--radius); border:1px solid var(--line); box-shadow:var(--shadow)}
.print-doc .doc-head{text-align:center; margin-bottom:1.2rem}
.print-doc .doc-head h2{font-size:1.25rem; margin:0}
.print-doc .doc-head .sub{color:var(--muted); font-size:.9rem}
.crit-box{border:1px solid var(--line); border-radius:12px; padding:.7rem 1rem; font-size:.88rem; background:var(--bg)}
.sign-row{display:flex; justify-content:space-around; gap:2rem; margin-top:2.5rem; text-align:center; font-size:.9rem; flex-wrap:wrap}
.sign-row .line{border-top:1px dotted #999; padding-top:.4rem; min-width:200px}

@media print{
  @page{size:A4; margin:14mm}
  body{background:#fff; font-size:13px}
  .no-print, .app-navbar, .app-footer, .app-sidebar, .side-toggle, .btn{display:none!important}
  .app-shell{display:block}
  .container-fluid{padding:0!important}
  .card, .print-doc{box-shadow:none; border:none; border-radius:0; padding:0}
  .table thead th{background:#eee!important; color:#000!important; -webkit-print-color-adjust:exact; print-color-adjust:exact; border:1px solid #999}
  .table tbody td{border:1px solid #999}
  .badge, .chip{border:1px solid #999; color:#000!important; background:#fff!important}
  a{color:#000; text-decoration:none}
}