@import url('https://fonts.googleapis.com/css2?family=Anuphan:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-soft: #f1f5f9;
  --line: #e2e8f0;
  --text: #0f172a;
  --muted: #64748b;
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-soft: #dbeafe;
  --nav: #0f172a;
  --nav-2: #1e3a5f;
  --ok: #059669;
  --warn: #b45309;
  --bad: #dc2626;
  --shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 12px 28px rgba(15, 23, 42, .08);
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Global responsive hardening */
img, svg, video, canvas {
  max-width: 100%;
}

.table-wrap,
.card:has(.table),
.user-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table {
  min-width: 720px;
}

@media (max-width: 1180px) {
  .app { grid-template-columns: 250px minmax(0, 1fr); }
  .content { padding-inline: 22px; }
  .topbar { padding-inline: 22px; }
}

@media (max-width: 860px) {
  body { font-size: 13px; }
  .app { display: block; }
  .sidebar {
    position: relative;
    height: auto;
    max-height: none;
    padding: 16px;
  }
  .brand { margin-bottom: 12px; }
  .brand img { width: 48px; height: 48px; }
  .brand b { font-size: 20px; }
  .navitem {
    min-height: 40px;
    padding: 9px 10px;
  }
  .userbox { margin-top: 14px; }
  .topbar {
    position: relative;
    min-height: auto;
    display: grid;
    padding: 16px;
  }
  .topbar h1 { font-size: 22px; }
  .top-user {
    width: 100%;
    justify-content: space-between;
    margin-left: 0;
    text-align: left;
  }
  .content {
    width: 100%;
    padding: 16px 14px 42px;
  }
  .grid,
  .g2,
  .g3,
  .g4,
  .exec-grid,
  .round-grid,
  .filter-card,
  .audit-filter,
  .settings-grid,
  .form-grid {
    grid-template-columns: 1fr !important;
  }
  .page-actions,
  .section-head,
  .dashboard-hero {
    display: grid;
    align-items: start;
  }
  .dashboard-hero { padding: 22px; }
  .hero-score { text-align: left; }
  .row-actions,
  .modal-actions {
    justify-content: stretch;
  }
  .row-actions .btn,
  .modal-actions .btn {
    flex: 1 1 140px;
  }
  .modal {
    padding: 12px;
    align-items: end;
  }
  .modal-card {
    width: 100%;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    border-radius: 14px;
  }
}

@media (max-width: 520px) {
  .sidebar { padding: 14px 12px; }
  .brand { gap: 10px; }
  .brand b { font-size: 18px; }
  .brand span { font-size: 11px; }
  .navitem { font-size: 13px; }
  .topbar h1 { font-size: 20px; }
  .card { padding: 14px; }
  .btn { width: 100%; min-height: 42px; }
  input, select, textarea { min-width: 0; }
  .field input,
  .field select,
  .field textarea {
    width: 100%;
  }
  .table {
    min-width: 640px;
    font-size: 12px;
  }
  .login-card {
    width: 100%;
    padding: 22px 18px;
  }
  .login-brand {
    align-items: flex-start;
  }
  .login-brand h1 { font-size: 22px; }
}

.security-list {
  display: grid;
  gap: 10px;
}

.security-list span {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #334155;
  line-height: 1.6;
}

.security-list span::before {
  content: "";
  width: 9px;
  height: 9px;
  margin-top: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2563eb, #22c1d6);
  flex: 0 0 9px;
}

.view-count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 74px;
  padding: 8px 12px;
  border-radius: 999px;
  color: #0d5cc8;
  background: #eef6ff;
  font-weight: 900;
}

.view-count svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.view-count b {
  color: #082a52;
}

.security-tabs-card {
  margin-top: 16px;
}
.security-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px;
  margin-bottom: 14px;
  border: 1px solid #dbe7f5;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 14px 32px rgba(15, 23, 42, .06);
}
.security-tabs button {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 11px 15px;
  background: transparent;
  color: #475569;
  font: inherit;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.security-tabs button:hover {
  color: #155eef;
  background: #eef6ff;
}
.security-tabs button.active {
  color: #ffffff;
  background: linear-gradient(135deg, #2563eb, #0891b2);
  box-shadow: 0 10px 22px rgba(37, 99, 235, .24);
}
.security-panel {
  animation: soft-rise .28s ease both;
}
.security-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 12px;
}
.security-panel-head h3 {
  margin: 0;
  color: #0b2a4a;
  font-size: 20px;
}
.security-panel-head p {
  margin: 4px 0 0;
}
.security-panel .card:has(.security-table) {
  overflow-x: visible;
}
.security-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}
.security-table th,
.security-table td {
  white-space: normal;
  overflow-wrap: anywhere;
}
.security-table th:last-child,
.security-table td:last-child {
  text-align: right;
}
.security-table .view-count {
  min-width: 0;
  padding: 8px 11px;
}
.security-db-name {
  font-size: 20px !important;
  line-height: 1.25 !important;
  word-break: break-word;
}
.db-storage-card {
  margin-top: 14px;
}
.db-storage-table th:nth-child(n+2),
.db-storage-table td:nth-child(n+2) {
  text-align: right;
}
.db-storage-note {
  margin: 12px 0 0;
}

@media (max-width: 1180px) {
  .security-panel .grid.g2 {
    grid-template-columns: 1fr;
  }
}

/* Landing font scale refinement */
body.home-page .landing-brand b { font-size: 24px; }
body.home-page .landing-brand small { font-size: 12px; }
body.home-page .landing-login { min-height: 50px; padding: 11px 20px; font-size: 16px; }
body.home-page .landing-hero { min-height: 680px; padding-top: 58px; padding-bottom: 54px; }
body.home-page .landing-kicker { min-height: 38px; padding: 8px 14px; font-size: 14px; }
body.home-page .landing-copy h1 { margin-top: 22px; font-size: clamp(42px, 5vw, 76px); line-height: 1.08; }
body.home-page .landing-lead { margin-top: 22px; font-size: clamp(16px, 1.08vw, 20px); line-height: 1.75; }
body.home-page .landing-actions { margin-top: 30px; }
body.home-page .landing-actions .btn { min-height: 56px; padding: 13px 20px; font-size: 17px; }
body.home-page .landing-checks { gap: 20px; margin-top: 28px; font-size: 15px; }
body.home-page .mock-content p { font-size: 24px; }
body.home-page .mock-content small { font-size: 14px; }
body.home-page .mock-stats b { font-size: 26px; }
body.home-page .mock-stats span { font-size: 13px; }
body.home-page .mock-bars label { font-size: 13px; }
body.home-page .mock-ready { font-size: 13px; }
body.home-page .mock-float b { font-size: 25px; }
body.home-page .mock-float span { font-size: 13px; }
body.home-page .landing-section,
body.home-page .workflow-section { padding-top: 66px; padding-bottom: 66px; }
body.home-page .landing-section-head { margin-bottom: 36px; }
body.home-page .landing-section-head h2 { font-size: clamp(28px, 3vw, 42px); line-height: 1.22; }
body.home-page .landing-section-head p { font-size: 17px; }
body.home-page .capability-grid article,
body.home-page .workflow-steps article { min-height: 210px; padding: 26px; }
body.home-page .capability-grid h3,
body.home-page .workflow-steps h3 { margin-top: 22px; font-size: 22px; }
body.home-page .capability-grid p { font-size: 16px; line-height: 1.65; }
body.home-page .workflow-steps p { font-size: 14px; line-height: 1.55; }

@media (max-width: 720px) {
  body.home-page .landing-brand b { font-size: 18px; }
  body.home-page .landing-brand small { font-size: 10px; }
  body.home-page .landing-login { min-height: 40px; padding: 8px 12px; font-size: 14px; }
  body.home-page .landing-kicker { font-size: 12px; }
  body.home-page .landing-copy h1 { font-size: clamp(34px, 10vw, 48px); }
  body.home-page .landing-lead { font-size: 15px; }
  body.home-page .landing-actions .btn { min-height: 50px; font-size: 15px; }
  body.home-page .capability-grid h3,
  body.home-page .workflow-steps h3 { font-size: 20px; }
  body.home-page .capability-grid p { font-size: 15px; }
}

/* Final landing composition */
body.home-page {
  min-height: 100vh;
  color: #10233f;
  background:
    radial-gradient(circle at 88% 18%, rgba(45, 212, 191, .22), transparent 24rem),
    radial-gradient(circle at 6% 14%, rgba(37, 99, 235, .18), transparent 28rem),
    linear-gradient(135deg, #eff6ff 0%, #f8fbff 46%, #e7f8fb 100%);
}

body.home-page .landing-nav {
  position: relative;
  z-index: 3;
  min-height: 96px;
  padding: 18px clamp(20px, 5vw, 76px);
  color: #10233f;
  background: transparent;
  border-bottom: 0;
  backdrop-filter: none;
}

body.home-page .landing-brand b { color: #0b3a70; font-size: 24px; }
body.home-page .landing-brand small { display: block; margin-top: 6px; color: #64748b; font-size: 12px; line-height: 1.45; }
body.home-page .landing-brand img { width: 58px; height: 58px; border-radius: 16px; }
body.home-page .landing-login { min-height: 50px; padding: 11px 20px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #1d4ed8, #0ea5e9); font-size: 16px; }

body.home-page .landing-hero {
  min-height: 680px;
  grid-template-columns: minmax(0, 1.02fr) minmax(480px, .98fr);
  gap: clamp(42px, 6vw, 92px);
  width: min(1760px, 100%);
  padding: 58px clamp(28px, 5.2vw, 76px) 54px;
  color: #10233f;
}

body.home-page .landing-kicker {
  min-height: 46px;
  padding: 10px 16px;
  color: #0756ad;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 14px 38px rgba(37, 99, 235, .10);
  font-size: 17px;
}

body.home-page .landing-copy h1 { color: #172b45; font-size: clamp(54px, 6.4vw, 104px); line-height: 1.05; }
body.home-page .landing-copy h1 strong { color: #1d63d5; }
body.home-page .landing-lead { max-width: 850px; color: #526b89; font-size: clamp(18px, 1.4vw, 25px); line-height: 1.75; }
body.home-page .landing-actions .btn { min-height: 68px; border-radius: 12px; padding: 16px 24px; font-size: 20px; }
body.home-page .landing-actions .btn.outline { color: #1d4ed8; background: rgba(255, 255, 255, .82); border: 1px solid #bfdbfe; }

body.home-page .landing-dashboard { position: relative; min-height: 620px; }
body.home-page .mock-window { position: absolute; right: 0; top: 50px; width: min(820px, 100%); overflow: hidden; border: 1px solid rgba(148, 163, 184, .24); border-radius: 28px; background: rgba(255, 255, 255, .90); box-shadow: 0 36px 92px rgba(15, 23, 42, .18); }
body.home-page .mock-titlebar { display: flex; align-items: center; gap: 8px; height: 62px; padding: 0 22px; border-bottom: 1px solid #e2e8f0; color: #94a3b8; background: #f8fafc; }
body.home-page .mock-titlebar span { width: 12px; height: 12px; border-radius: 999px; background: #cbd5e1; }
body.home-page .mock-titlebar b { flex: 1; text-align: center; font-size: 15px; }
body.home-page .mock-body { display: grid; grid-template-columns: 110px 1fr; min-height: 560px; }
body.home-page .mock-sidebar { padding: 24px 22px; background: #123f69; }
body.home-page .mock-sidebar i, body.home-page .mock-sidebar em { display: block; border-radius: 10px; }
body.home-page .mock-sidebar i { width: 48px; height: 48px; margin: 2px auto 30px; background: linear-gradient(135deg, #38bdf8, #2563eb); }
body.home-page .mock-sidebar em { height: 11px; margin-top: 16px; background: rgba(191, 219, 254, .28); }
body.home-page .mock-sidebar em:first-of-type { background: #38bdf8; }
body.home-page .mock-content { padding: 40px 32px 32px; }
body.home-page .mock-content p { margin: 0; color: #172b45; font-size: 28px; font-weight: 800; }
body.home-page .mock-content small { display: block; margin-top: 8px; color: #94a3b8; font-size: 16px; }
body.home-page .mock-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
body.home-page .mock-stats div { padding: 20px 16px; border: 1px solid #e2e8f0; border-radius: 14px; background: #f8fafc; }
body.home-page .mock-stats b { display: block; color: #172b45; font-size: 30px; line-height: 1; }
body.home-page .mock-stats span { display: block; margin-top: 10px; color: #94a3b8; font-size: 15px; }
body.home-page .mock-bars { display: grid; gap: 22px; margin-top: 38px; }
body.home-page .mock-bars label { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 18px; color: #94a3b8; }
body.home-page .mock-bars span { position: relative; height: 10px; overflow: hidden; border-radius: 999px; background: #edf2f7; }
body.home-page .mock-bars span::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, #2563eb, #22c1d6); }
body.home-page .mock-ready { margin-top: 34px; padding: 16px; border-radius: 14px; color: #059669; background: #e9f8f2; text-align: center; font-weight: 800; }
body.home-page .mock-float { position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 16px 20px; border: 1px solid #dbeafe; border-radius: 18px; color: #64748b; background: rgba(255, 255, 255, .92); box-shadow: 0 22px 54px rgba(15, 23, 42, .14); }
body.home-page .mock-float b { color: #1d63d5; font-size: 30px; }
body.home-page .mock-float-top { right: -28px; top: 88px; }
body.home-page .mock-float-bottom { left: -18px; bottom: 74px; }

body.home-page .landing-section, body.home-page .workflow-section { padding: 82px clamp(22px, 4vw, 56px); background: rgba(255, 255, 255, .96); }
body.home-page .landing-section-head { max-width: 920px; margin: 0 auto 46px; text-align: center; }
body.home-page .landing-section-head span { color: #1d4ed8; font-weight: 800; }
body.home-page .landing-section-head h2 { margin: 16px 0 0; color: #10233f; font-size: clamp(34px, 4vw, 54px); line-height: 1.18; }
body.home-page .landing-section-head p { margin: 18px 0 0; color: #64748b; font-size: 20px; }
body.home-page .capability-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; width: min(1740px, 100%); margin: 0 auto; }
body.home-page .capability-grid article, body.home-page .workflow-steps article { min-height: 248px; padding: 30px; border: 1px solid #dbe5f0; border-radius: 22px; background: #fff; box-shadow: 0 12px 34px rgba(15, 23, 42, .04); }
body.home-page .capability-grid i { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 16px; color: #10233f; background: #eef5ff; }
body.home-page .capability-grid svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.home-page .capability-grid h3, body.home-page .workflow-steps h3 { margin: 28px 0 0; color: #082a52; font-size: 28px; line-height: 1.25; }
body.home-page .capability-grid p, body.home-page .workflow-steps p { margin: 14px 0 0; color: #64748b; font-size: 19px; line-height: 1.65; }
body.home-page .workflow-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 60px; width: min(1740px, 100%); margin: 0 auto; }
body.home-page .workflow-steps article { position: relative; display: grid; place-items: center; min-height: 206px; padding: 26px; text-align: center; }
body.home-page .workflow-steps article:not(:last-child)::after { content: "→"; position: absolute; right: -42px; top: 50%; color: #94a3b8; font-size: 32px; transform: translateY(-50%); }
body.home-page .workflow-steps b { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: #1d63d5; background: #eaf3ff; font-size: 20px; }

@media (max-width: 1100px) {
  body.home-page .landing-hero { grid-template-columns: 1fr; min-height: auto; }
  body.home-page .landing-dashboard { min-height: 520px; }
  body.home-page .mock-window { position: relative; top: 0; }
  body.home-page .mock-float-top { right: 12px; top: 42px; }
  body.home-page .mock-float-bottom { left: 12px; bottom: 22px; }
  body.home-page .capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.home-page .workflow-steps { grid-template-columns: 1fr; gap: 18px; }
  body.home-page .workflow-steps article:not(:last-child)::after { content: none; }
}

@media (max-width: 720px) {
  body.home-page .landing-nav { align-items: flex-start; padding: 16px; }
  body.home-page .landing-brand b { font-size: 22px; }
  body.home-page .landing-brand small { font-size: 11px; }
  body.home-page .landing-login { min-height: 44px; padding: 10px 14px; font-size: 15px; }
  body.home-page .landing-hero { padding: 32px 16px 42px; }
  body.home-page .landing-kicker { font-size: 13px; line-height: 1.45; }
  body.home-page .landing-copy h1 { font-size: clamp(42px, 13vw, 66px); }
  body.home-page .landing-lead { font-size: 17px; }
  body.home-page .landing-actions .btn { width: 100%; min-height: 56px; font-size: 17px; }
  body.home-page .landing-checks { gap: 12px; font-size: 14px; }
  body.home-page .landing-dashboard { min-height: auto; }
  body.home-page .mock-body { grid-template-columns: 70px 1fr; min-height: 420px; }
  body.home-page .mock-sidebar { padding: 20px 14px; }
  body.home-page .mock-stats { grid-template-columns: 1fr; }
  body.home-page .mock-bars label { grid-template-columns: 58px 1fr; }
  body.home-page .mock-float { display: none; }
  body.home-page .capability-grid { grid-template-columns: 1fr; }
  body.home-page .landing-section, body.home-page .workflow-section { padding: 54px 16px; }
  body.home-page .capability-grid article, body.home-page .workflow-steps article { min-height: auto; border-radius: 16px; }
}

/* Landing font scale refinement */
body.home-page .landing-brand b { font-size: 24px; }
body.home-page .landing-brand small { font-size: 12px; }
body.home-page .landing-login { min-height: 50px; padding: 11px 20px; font-size: 16px; }
body.home-page .landing-hero { min-height: 680px; padding-top: 58px; padding-bottom: 54px; }
body.home-page .landing-kicker { min-height: 38px; padding: 8px 14px; font-size: 14px; }
body.home-page .landing-copy h1 { margin-top: 22px; font-size: clamp(42px, 5vw, 76px); line-height: 1.08; }
body.home-page .landing-lead { margin-top: 22px; font-size: clamp(16px, 1.08vw, 20px); line-height: 1.75; }
body.home-page .landing-actions { margin-top: 30px; }
body.home-page .landing-actions .btn { min-height: 56px; padding: 13px 20px; font-size: 17px; }
body.home-page .landing-checks { gap: 20px; margin-top: 28px; font-size: 15px; }
body.home-page .mock-content p { font-size: 24px; }
body.home-page .mock-content small { font-size: 14px; }
body.home-page .mock-stats b { font-size: 26px; }
body.home-page .mock-stats span { font-size: 13px; }
body.home-page .mock-bars label { font-size: 13px; }
body.home-page .mock-ready { font-size: 13px; }
body.home-page .mock-float b { font-size: 25px; }
body.home-page .mock-float span { font-size: 13px; }
body.home-page .landing-section,
body.home-page .workflow-section { padding-top: 66px; padding-bottom: 66px; }
body.home-page .landing-section-head { margin-bottom: 36px; }
body.home-page .landing-section-head h2 { font-size: clamp(28px, 3vw, 42px); line-height: 1.22; }
body.home-page .landing-section-head p { font-size: 17px; }
body.home-page .capability-grid article,
body.home-page .workflow-steps article { min-height: 210px; padding: 26px; }
body.home-page .capability-grid h3,
body.home-page .workflow-steps h3 { margin-top: 22px; font-size: 22px; }
body.home-page .capability-grid p { font-size: 16px; line-height: 1.65; }
body.home-page .workflow-steps p { font-size: 14px; line-height: 1.55; }

@media (max-width: 720px) {
  body.home-page .landing-brand b { font-size: 18px; }
  body.home-page .landing-brand small { font-size: 10px; }
  body.home-page .landing-login { min-height: 40px; padding: 8px 12px; font-size: 14px; }
  body.home-page .landing-kicker { font-size: 12px; }
  body.home-page .landing-copy h1 { font-size: clamp(34px, 10vw, 48px); }
  body.home-page .landing-lead { font-size: 15px; }
  body.home-page .landing-actions .btn { min-height: 50px; font-size: 15px; }
  body.home-page .capability-grid h3,
  body.home-page .workflow-steps h3 { font-size: 20px; }
  body.home-page .capability-grid p { font-size: 15px; }
}

/* Landing page */
.home-page {
  min-height: 100vh;
  color: #10233f;
  background:
    radial-gradient(circle at 88% 18%, rgba(45, 212, 191, .22), transparent 24rem),
    radial-gradient(circle at 6% 14%, rgba(37, 99, 235, .18), transparent 28rem),
    linear-gradient(135deg, #eff6ff 0%, #f8fbff 46%, #e7f8fb 100%);
}

.landing-nav {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 96px;
  padding: 18px clamp(20px, 5vw, 76px);
}

.landing-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.landing-brand img {
  width: 58px;
  height: 58px;
  padding: 5px;
  border: 1px solid rgba(37, 99, 235, .12);
  border-radius: 16px;
  object-fit: contain;
  background: #fff;
  box-shadow: 0 14px 35px rgba(15, 23, 42, .10);
}

.landing-brand b {
  display: block;
  color: #0b3a70;
  font-size: 28px;
  line-height: 1.08;
}

.landing-brand small {
  display: block;
  margin-top: 6px;
  color: #64748b;
  font-size: 13px;
  line-height: 1.45;
}

.landing-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 14px 24px;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, #1d4ed8, #0ea5e9);
  box-shadow: 0 18px 38px rgba(37, 99, 235, .22);
  font-size: 18px;
  font-weight: 800;
}

.landing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(480px, .98fr);
  align-items: center;
  gap: clamp(42px, 6vw, 92px);
  width: min(1760px, 100%);
  min-height: 760px;
  margin: 0 auto;
  padding: 84px clamp(28px, 5.2vw, 76px) 64px;
}

.landing-copy {
  max-width: 920px;
}

.landing-kicker {
  display: inline-flex;
  max-width: 100%;
  min-height: 46px;
  align-items: center;
  padding: 10px 16px;
  border-radius: 999px;
  color: #0756ad;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 14px 38px rgba(37, 99, 235, .10);
  font-size: 17px;
  font-weight: 800;
}

.landing-copy h1 {
  margin: 28px 0 0;
  color: #172b45;
  font-size: clamp(54px, 6.4vw, 104px);
  line-height: 1.05;
  letter-spacing: 0;
}

.landing-copy h1 strong {
  color: #1d63d5;
  font-weight: 800;
}

.landing-lead {
  max-width: 850px;
  margin: 28px 0 0;
  color: #526b89;
  font-size: clamp(18px, 1.4vw, 25px);
  line-height: 1.75;
}

.landing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 38px;
}

.landing-actions .btn {
  min-height: 68px;
  border-radius: 12px;
  padding: 16px 24px;
  font-size: 20px;
}

.landing-actions .btn.outline {
  color: #1d4ed8;
  background: rgba(255, 255, 255, .82);
  border: 1px solid #bfdbfe;
}

.landing-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 34px;
  color: #475569;
  font-size: 17px;
}

.landing-checks span::before {
  content: "✓";
  margin-right: 6px;
  color: #047857;
}

.landing-dashboard {
  position: relative;
  min-height: 620px;
}

.mock-window {
  position: absolute;
  right: 0;
  top: 50px;
  width: min(820px, 100%);
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 28px;
  background: rgba(255, 255, 255, .90);
  box-shadow: 0 36px 92px rgba(15, 23, 42, .18);
}

.mock-titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 62px;
  padding: 0 22px;
  border-bottom: 1px solid #e2e8f0;
  color: #94a3b8;
  background: #f8fafc;
}

.mock-titlebar span {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #cbd5e1;
}

.mock-titlebar b {
  flex: 1;
  text-align: center;
  font-size: 15px;
}

.mock-body {
  display: grid;
  grid-template-columns: 110px 1fr;
  min-height: 560px;
}

.mock-sidebar {
  padding: 24px 22px;
  background: #123f69;
}

.mock-sidebar i,
.mock-sidebar em {
  display: block;
  border-radius: 10px;
}

.mock-sidebar i {
  width: 48px;
  height: 48px;
  margin: 2px auto 30px;
  background: linear-gradient(135deg, #38bdf8, #2563eb);
}

.mock-sidebar em {
  height: 11px;
  margin-top: 16px;
  background: rgba(191, 219, 254, .28);
}

.mock-sidebar em:first-of-type { background: #38bdf8; }

.mock-content {
  padding: 40px 32px 32px;
}

.mock-content p {
  margin: 0;
  color: #172b45;
  font-size: 28px;
  font-weight: 800;
}

.mock-content small {
  display: block;
  margin-top: 8px;
  color: #94a3b8;
  font-size: 16px;
}

.mock-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}

.mock-stats div {
  padding: 20px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #f8fafc;
}

.mock-stats b {
  display: block;
  color: #172b45;
  font-size: 30px;
  line-height: 1;
}

.mock-stats span {
  display: block;
  margin-top: 10px;
  color: #94a3b8;
  font-size: 15px;
}

.mock-bars {
  display: grid;
  gap: 22px;
  margin-top: 38px;
}

.mock-bars label {
  display: grid;
  grid-template-columns: 84px 1fr;
  align-items: center;
  gap: 18px;
  color: #94a3b8;
}

.mock-bars span {
  position: relative;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf2f7;
}

.mock-bars span::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #22c1d6);
}

.mock-ready {
  margin-top: 34px;
  padding: 16px;
  border-radius: 14px;
  color: #059669;
  background: #e9f8f2;
  text-align: center;
  font-weight: 800;
}

.mock-float {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 16px 20px;
  border: 1px solid #dbeafe;
  border-radius: 18px;
  color: #64748b;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 22px 54px rgba(15, 23, 42, .14);
}

.mock-float b {
  color: #1d63d5;
  font-size: 30px;
}

.mock-float-top { right: -28px; top: 88px; }
.mock-float-bottom { left: -18px; bottom: 74px; }

.landing-section,
.workflow-section {
  padding: 82px clamp(22px, 4vw, 56px);
  background: rgba(255, 255, 255, .94);
}

.landing-section-head {
  max-width: 920px;
  margin: 0 auto 46px;
  text-align: center;
}

.landing-section-head span {
  color: #1d4ed8;
  font-weight: 800;
}

.landing-section-head h2 {
  margin: 16px 0 0;
  color: #10233f;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.18;
  letter-spacing: 0;
}

.landing-section-head p {
  margin: 18px 0 0;
  color: #64748b;
  font-size: 20px;
}

.capability-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  width: min(1740px, 100%);
  margin: 0 auto;
}

.capability-grid article,
.workflow-steps article {
  min-height: 248px;
  padding: 30px;
  border: 1px solid #dbe5f0;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(15, 23, 42, .04);
}

.capability-grid i {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  color: #10233f;
  background: #eef5ff;
}

.capability-grid svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.capability-grid h3,
.workflow-steps h3 {
  margin: 28px 0 0;
  color: #082a52;
  font-size: 28px;
  line-height: 1.25;
}

.capability-grid p,
.workflow-steps p {
  margin: 14px 0 0;
  color: #64748b;
  font-size: 19px;
  line-height: 1.65;
}

.workflow-section {
  padding-top: 90px;
}

.workflow-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 60px;
  width: min(1740px, 100%);
  margin: 0 auto;
}

.workflow-steps article {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 206px;
  padding: 26px;
  text-align: center;
}

.workflow-steps article:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -42px;
  top: 50%;
  color: #94a3b8;
  font-size: 32px;
  transform: translateY(-50%);
}

.workflow-steps b {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  color: #1d63d5;
  background: #eaf3ff;
  font-size: 20px;
}

.workflow-steps h3 {
  margin-top: 22px;
  font-size: 25px;
}

.workflow-steps p {
  margin-top: 8px;
  font-size: 16px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Anuphan", "Noto Sans Thai", "Leelawadee UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, .09), transparent 30rem),
    linear-gradient(180deg, #f8fafc 0%, #eef4fb 100%);
  font-size: 14px;
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }

.app {
  display: grid;
  grid-template-columns: 292px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto;
  padding: 22px 18px;
  color: #e5eefb;
  background: #10233f;
  border-right: 1px solid rgba(255, 255, 255, .08);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding: 4px;
}

.brand img,
.login-brand img {
  object-fit: contain;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .16);
}

.brand img { width: 58px; height: 58px; padding: 4px; }
.brand b { display: block; color: #fff; font-size: 24px; line-height: 1.18; letter-spacing: 0; }
.brand span { display: block; margin-top: 4px; color: #bfd0e5; font-size: 12px; line-height: 1.45; }

.nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px 4px 16px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(191, 219, 254, .55) transparent;
}

.nav::-webkit-scrollbar {
  width: 6px;
}

.nav::-webkit-scrollbar-track {
  background: transparent;
}

.nav::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(191, 219, 254, .42);
}

.navitem {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  margin-top: 5px;
  padding: 10px 12px;
  border-radius: 8px;
  color: #d8e6f7;
  font-weight: 900;
  letter-spacing: 0;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}

.nav-label {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.25;
}

.nav-badge {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  color: #0b4aa2;
  background: #eaf3ff;
  box-shadow: 0 0 0 1px rgba(191, 219, 254, .72);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  flex: 0 0 auto;
}

.navitem.active .nav-badge {
  color: #075ed0;
  background: #fff;
}

.navitem:hover {
  color: #fff;
  background: rgba(255, 255, 255, .10);
}

.navitem.active {
  color: #fff;
  background: rgba(255, 255, 255, .16);
  box-shadow: inset 3px 0 0 #60a5fa;
}

.navitem.extra-role {
  color: #d9fff5;
  background: rgba(15, 118, 110, .14);
}

.navitem.extra-role:hover {
  color: #fff;
  background: rgba(15, 118, 110, .24);
}

.navitem.extra-role.active {
  color: #fff;
  background: rgba(20, 184, 166, .28);
}

.nav-emoji {
  display: grid;
  place-items: center;
  width: 24px;
  flex: 0 0 24px;
  color: currentColor;
  font-size: 0;
  line-height: 0;
}

.nav-svg {
  display: block;
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.userbox {
  margin-top: auto;
  padding: 0;
  border: 0;
  background: transparent;
  flex: 0 0 auto;
}

.userbox b,
.userbox span,
.userbox a { display: block; }
.userbox b,
.userbox span {
  padding: 0 14px;
  background: rgba(96, 165, 250, .18);
}
.userbox b {
  padding-top: 14px;
  color: #fff;
  border-radius: 8px 8px 0 0;
}
.userbox span {
  padding-top: 2px;
  padding-bottom: 14px;
  color: #fff;
  font-size: 12px;
  border-radius: 0 0 8px 8px;
}
.userbox .sidebar-logout {
  display: grid;
  place-items: center;
  min-height: 44px;
  margin-top: 8px;
  border-radius: 8px;
  color: #12325f;
  background: #f1f5f9;
  font-weight: 800;
  transition: background .16s ease, transform .16s ease;
}
.userbox .sidebar-logout:hover {
  background: #fff;
  transform: translateY(-1px);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 82px;
  padding: 0 30px;
  background: rgba(255, 255, 255, .88);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}

.topbar h1 { margin: 0; font-size: 24px; line-height: 1.25; letter-spacing: 0; }
.topbar p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.top-user {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  text-align: right;
}
.top-user b {
  display: block;
  color: #0f172a;
  font-size: 13px;
}
.top-user span {
  display: block;
  color: var(--muted);
}
.avatar-badge {
  display: grid !important;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: #1d4ed8 !important;
  background: #dbeafe;
  font-size: 13px;
  font-weight: 800;
}

.content {
  width: min(1500px, 100%);
  margin: 0 auto;
  padding: 26px 30px 64px;
}

.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.exec-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.card {
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  box-shadow: var(--shadow);
}

.card h2,
.card h3 {
  margin: 0 0 14px;
  color: #12325f;
  font-size: 18px;
  line-height: 1.35;
}

.kpi {
  position: relative;
  overflow: hidden;
}

.kpi::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #2563eb, #06b6d4);
}

.kpi b {
  display: block;
  color: var(--primary);
  font-size: 30px;
  line-height: 1;
}

.kpi span { display: block; margin-top: 8px; color: var(--muted); font-size: 12px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border: 0;
  border-radius: 8px;
  padding: 9px 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.btn:hover { transform: translateY(-1px); }
.btn:disabled { cursor: not-allowed; opacity: .45; transform: none; }
.btn.is-loading,
button.is-loading,
input[type="submit"].is-loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: .9;
  cursor: progress;
  pointer-events: none;
}

.btn-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  flex: 0 0 auto;
  animation: btn-spin .7s linear infinite;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

.btn.primary { color: #fff; background: linear-gradient(135deg, var(--primary), #0891b2); box-shadow: 0 10px 20px rgba(37, 99, 235, .22); }
.btn.outline { color: var(--primary-dark); background: #fff; border: 1px solid #bfdbfe; }
.btn.ghost { color: #334155; background: #eef4fb; }
.btn.danger { color: #991b1b; background: #fee2e2; }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.field label {
  display: block;
  margin-bottom: 6px;
  color: #334155;
  font-weight: 700;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text);
  background: #fff;
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.field input[type="file"] {
  padding: 8px;
  color: var(--muted);
  background: #f8fafc;
}

.field input[type="file"]::file-selector-button {
  margin-right: 12px;
  border: 0;
  border-radius: 8px;
  padding: 8px 12px;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), #0891b2);
  font-weight: 700;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease;
}

.field input[type="file"]::file-selector-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(37, 99, 235, .22);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}

.field textarea { min-height: 96px; resize: vertical; }

.table-wrap { overflow: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th,
.table td {
  padding: 12px 14px;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
  vertical-align: top;
}
.table th {
  color: #334155;
  background: #f8fafc;
  font-size: 12px;
  font-weight: 800;
}
.table tbody tr:hover { background: #f8fafc; }

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 800;
}
.pill.ok { color: #047857; background: #d1fae5; }
.pill.warn { color: #92400e; background: #fef3c7; }
.pill.bad { color: #b91c1c; background: #fee2e2; }
.pill.info { color: #1d4ed8; background: #dbeafe; }

.flash,
.notice {
  margin-bottom: 14px;
  border-radius: 8px;
  padding: 12px 14px;
  border: 1px solid transparent;
}
.flash.success { color: #065f46; background: #d1fae5; border-color: #a7f3d0; }
.flash.error { color: #991b1b; background: #fee2e2; border-color: #fecaca; }
.notice { color: #1e3a5f; background: #eff6ff; border-color: #bfdbfe; }

.source-guard-notice {
  position: fixed;
  top: 18px;
  left: 50%;
  z-index: 120;
  width: min(420px, calc(100vw - 32px));
  display: grid;
  gap: 3px;
  padding: 14px 16px;
  color: #0b2447;
  background: rgba(255, 255, 255, .96);
  border: 1px solid #cfe0f3;
  border-radius: 8px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .18);
  transform: translate(-50%, -18px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.source-guard-notice::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: 8px 0 0 8px;
  background: linear-gradient(180deg, #2563eb, #0891b2);
}

.source-guard-notice.show {
  transform: translate(-50%, 0);
  opacity: 1;
}

.source-guard-notice strong {
  font-size: 15px;
  line-height: 1.3;
}

.source-guard-notice span {
  color: #64748b;
  font-size: 13px;
  line-height: 1.45;
}

.idle-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, .5);
  backdrop-filter: blur(8px);
}

.idle-modal-backdrop[hidden] {
  display: none;
}

.idle-modal {
  width: min(460px, 100%);
  padding: 28px;
  text-align: center;
  background: rgba(255, 255, 255, .98);
  border: 1px solid #dbe7f5;
  border-radius: 8px;
  box-shadow: 0 28px 80px rgba(15, 23, 42, .25);
}

.idle-modal-icon {
  width: 62px;
  height: 62px;
  display: inline-grid;
  place-items: center;
  margin-bottom: 14px;
  color: #1d4ed8;
  background: #eff6ff;
  border-radius: 8px;
}

.idle-modal-icon svg {
  width: 34px;
  height: 34px;
}

.idle-modal-kicker {
  margin: 0 0 6px;
  color: #2563eb;
  font-size: 13px;
  font-weight: 900;
}

.idle-modal h2 {
  margin: 0;
  color: #08224a;
  font-size: 24px;
  line-height: 1.3;
}

.idle-modal p {
  color: #64748b;
  line-height: 1.7;
}

.idle-modal p b {
  color: #dc2626;
}

.idle-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 18px;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}
.tabs a {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 9px 13px;
  color: #334155;
  background: #fff;
  font-weight: 700;
}
.tabs a.active { color: #fff; background: var(--primary); border-color: var(--primary); }

.assessment-row {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) 360px;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid #e5e7eb;
}

.evidence-list { display: grid; gap: 8px; margin-top: 10px; }
.ev {
  border: 1px solid #dbe4ee;
  border-radius: 8px;
  padding: 10px;
  background: #f8fafc;
}
.ev.checked { border-color: #99f6e4; background: #f0fdfa; }
.ev label { display: flex; align-items: center; gap: 8px; }
.upload-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 8px 0 0 26px; }
.score-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.score-buttons label {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
  cursor: pointer;
}
.score-buttons input { margin-right: 4px; }

.timeline {
  margin-left: 10px;
  padding-left: 18px;
  border-left: 3px solid #dbeafe;
}
.timeline .step { padding: 0 0 18px; }
.timeline b { color: #1e3a5f; }
.bar { height: 10px; overflow: hidden; border-radius: 999px; background: #e2e8f0; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, #2563eb, #06b6d4); }

.dashboard-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 auto 16px;
  padding: 30px 34px;
  color: #fff;
  background: linear-gradient(135deg, #1d4ed8, #0891b2);
  border-radius: 16px;
  box-shadow: 0 24px 50px rgba(37, 99, 235, .22);
}
.dashboard-hero h2 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 28px;
  line-height: 1.25;
}
.dashboard-hero p { margin: 0; color: #e0f2fe; }
.hero-score { text-align: right; min-width: 150px; }
.hero-score b { display: block; font-size: 48px; line-height: 1; }
.hero-score span { display: block; margin-top: 8px; color: #e0f2fe; font-size: 12px; font-weight: 700; }

.stat-card { min-height: 148px; }
.stat-card::before { display: none; }
.stat-card span { color: var(--muted); }
.stat-card b {
  display: block;
  margin: 16px 0 12px;
  color: #0f172a;
  font-size: 32px;
  line-height: 1;
}
.stat-card em {
  display: inline-flex;
  border-radius: 999px;
  padding: 5px 10px;
  color: #1d4ed8;
  background: #dbeafe;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}
.stat-card:nth-child(2) em { color: #047857; background: #d1fae5; }
.stat-card:nth-child(3) em { color: #1d4ed8; background: #dbeafe; }
.stat-card:nth-child(4) em { color: #b45309; background: #fef3c7; }

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin: 30px 0 14px;
}

/* margin-top: 30px มีไว้เว้นระยะระหว่าง "หัวข้อกลุ่ม" กับการ์ดที่อยู่เหนือขึ้นไป
   แต่บางหน้าเอา .section-head ไปใช้เป็นหัวข้อ "ข้างใน" การ์ด (เช่น director/unlock)
   ระยะนั้นเลยกลายเป็นช่องว่างเปล่า 30px บวกกับ padding ของการ์ดอีก 18px
   หัวข้อจึงลอยห่างจากขอบบนการ์ดผิดสังเกต */
.card > .section-head:first-child {
  margin-top: 0;
}
.section-head h2 { margin: 0; font-size: 24px; line-height: 1.25; }
.section-head p { margin: 8px 0 0; color: var(--muted); }

.progress-list,
.score-list {
  display: grid;
  gap: 14px;
}
.progress-item > div:first-child,
.score-item > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 6px;
}
.progress-item span,
.score-item span { color: #0f172a; }
.progress-item b,
.score-item b { white-space: nowrap; color: #0f172a; }

.activity-list {
  position: relative;
  display: grid;
  gap: 18px;
  padding-left: 20px;
}
.activity-list::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: #dbeafe;
}
.activity-item {
  position: relative;
  display: grid;
  gap: 4px;
}
.activity-item::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 5px;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: #2563eb;
  box-shadow: 0 0 0 3px #dbeafe;
}
.activity-item b { color: #0f172a; }
.activity-item span { color: var(--muted); font-size: 13px; }

.page-actions {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}
.page-actions h2 {
  margin: 0;
  font-size: 26px;
  line-height: 1.25;
}
.page-actions p {
  margin: 8px 0 0;
  color: var(--muted);
}
.user-stat {
  min-height: 120px;
  display: grid;
  align-content: center;
}
.user-stat span { color: var(--muted); }
.user-stat b {
  display: block;
  margin-top: 14px;
  color: #0f172a;
  font-size: 32px;
  line-height: 1;
}
.user-stat small {
  display: inline-flex;
  width: fit-content;
  margin-top: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f3e8ff;
  color: #6b21a8;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}
.filter-card {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 1.2fr auto;
  gap: 12px;
  align-items: end;
  margin: 14px 0;
  padding: 18px;
  border: 1px solid #dbe7f5;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.94));
  box-shadow: 0 16px 36px rgba(15, 23, 42, .06);
}
.filter-card .field,
.filter-card label {
  min-width: 0;
}
.filter-card input,
.filter-card select,
.filter-card textarea {
  width: 100%;
  min-height: 50px;
  border: 1px solid #cfe0f3;
  border-radius: 8px;
  padding: 12px 14px;
  color: #0b2447;
  background: #fff;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.filter-card input::placeholder,
.filter-card textarea::placeholder {
  color: #94a3b8;
}
.filter-card select {
  padding-right: 42px;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #1e3a5f 50%),
    linear-gradient(135deg, #1e3a5f 50%, transparent 50%);
  background-position:
    calc(100% - 21px) 52%,
    calc(100% - 15px) 52%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.filter-card input:focus,
.filter-card select:focus,
.filter-card textarea:focus {
  border-color: #60a5fa;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}
.filter-card .btn {
  min-height: 50px;
  padding-inline: 18px;
}
.user-table td,
.user-table th {
  padding-top: 14px;
  padding-bottom: 14px;
}
.bulk-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid #dbe7f5;
  border-radius: 12px;
  background: #f8fbff;
}
.bulk-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #0b2447;
  font-weight: 900;
  cursor: pointer;
}
.bulk-check input,
.user-row-check {
  width: 18px;
  height: 18px;
  accent-color: #1d74d8;
}
.bulk-col {
  width: 44px;
  text-align: center;
}
.bulk-delete-list {
  display: grid;
  gap: 6px;
  max-height: 180px;
  overflow: auto;
  margin: 12px 0;
  padding: 10px;
  border-radius: 12px;
  background: #f8fbff;
}
.bulk-delete-list span,
.bulk-delete-list em {
  color: #334155;
  font-style: normal;
  font-size: 13px;
}
.role-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 800;
}
.role-admin { color: #4338ca; background: #e0e7ff; }
.role-director { color: #1d4ed8; background: #dbeafe; }
.role-committee { color: #b45309; background: #fef3c7; }
.role-teacher { color: #1d4ed8; background: #dbeafe; }

.round-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.round-card {
  display: grid;
  gap: 16px;
  min-height: 220px;
}
.round-card-head {
  display: flex;
  justify-content: flex-start;
}
.round-card h3 {
  margin: 0;
  color: #0f172a;
  font-size: 18px;
}
.round-card p {
  margin: 0;
}

.settings-panel {
  padding: 22px;
}
.settings-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px 12px;
}

.workflow-stat {
  min-height: 80px;
  display: grid;
  align-content: center;
  gap: 8px;
}
.workflow-stat b {
  color: var(--primary-dark);
  font-size: 22px;
  line-height: 1;
}
.workflow-stat span {
  color: var(--muted);
  font-size: 12px;
}
.workflow-task-list,
.cert-list {
  display: grid;
  gap: 10px;
}
.workflow-task {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.workflow-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: #1e3a5f;
  background: #eaf2ff;
  font-size: 0;
}
.workflow-svg {
  display: block;
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.workflow-task b { color: #0f172a; }
.workflow-task p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.workflow-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 800;
}
.workflow-badge.primary { color: #fff; background: linear-gradient(135deg, #2563eb, #0891b2); }
.workflow-badge.bad { color: #b91c1c; background: #fee2e2; }
.workflow-badge.warn { color: #b45309; background: #fef3c7; }
.cert-item {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.cert-item b { color: #12325f; }
.cert-item span { color: var(--muted); font-size: 12px; }
.cert-item .btn { width: max-content; }
.audit-filter {
  grid-template-columns: minmax(280px, 1fr) 170px 170px auto;
}
.audit-table td { font-size: 13px; }

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(15, 23, 42, .48);
  backdrop-filter: blur(8px);
}
.modal-backdrop[hidden] { display: none; }
.modal-card {
  width: min(760px, 100%);
  max-height: min(86vh, 820px);
  overflow: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 30px 90px rgba(15, 23, 42, .28);
}
.modal-sm { width: min(460px, 100%); }
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.modal-head h3 { margin: 0; color: #12325f; }
.modal-close {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  color: #475569;
  background: #f1f5f9;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 18px;
}

.notice-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 35%, rgba(37, 99, 235, .18), transparent 24rem),
    rgba(15, 23, 42, .42);
}

.notice-modal {
  width: min(520px, 100%);
  padding: 28px;
  text-align: center;
  background: rgba(255, 255, 255, .98);
  border: 1px solid #dbe7f5;
  border-radius: 8px;
  box-shadow: 0 28px 80px rgba(15, 23, 42, .24);
}

.notice-icon {
  width: 62px;
  height: 62px;
  display: inline-grid;
  place-items: center;
  color: #1d4ed8;
  background: #eff6ff;
  border-radius: 8px;
  margin-bottom: 14px;
}

.notice-icon svg {
  width: 34px;
  height: 34px;
}

.notice-kicker {
  margin: 0 0 6px;
  color: #2563eb;
  font-size: 13px;
  font-weight: 800;
}

.notice-modal h2 {
  margin: 0;
  color: #08224a;
  font-size: 26px;
  line-height: 1.3;
}

.notice-modal p {
  color: #64748b;
  line-height: 1.7;
}

.notice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 18px;
}

.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 20% 10%, rgba(37, 99, 235, .18), transparent 25rem),
    linear-gradient(135deg, #f8fafc, #e0f2fe);
}
.login-card {
  width: min(450px, 94vw);
  padding: 28px;
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .16);
}
.login-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.login-brand img { width: 72px; height: 72px; padding: 4px; }
.login-brand h1 { margin: 0; font-size: 26px; line-height: 1.2; letter-spacing: 0; }
.login-brand p { margin: 4px 0 0; color: var(--muted); }
.muted { color: var(--muted); }

.home-page {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    linear-gradient(105deg, rgba(10, 35, 66, .96) 0%, rgba(35, 83, 119, .86) 45%, rgba(214, 233, 246, .94) 100%),
    linear-gradient(180deg, #f8fafc 0%, #eaf2fb 100%);
}

.home-bg-logo {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: url('../img/school-logo.png') right 4vw top 15vh / min(680px, 56vw) no-repeat;
  opacity: .07;
}

.landing-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 76px;
  padding: 16px clamp(18px, 5vw, 78px);
  color: #fff;
  background: rgba(15, 38, 67, .44);
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(16px);
}

.landing-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 22px;
  font-weight: 800;
}

.landing-brand img {
  width: 46px;
  height: 46px;
  padding: 3px;
  object-fit: contain;
  border-radius: 999px;
  background: #fff;
}

.landing-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 22px;
  border-radius: 8px;
  color: #12325f;
  background: #fff;
  font-weight: 800;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .18);
}

.landing-hero {
  position: relative;
  z-index: 1;
  min-height: 88vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, .86fr);
  align-items: center;
  gap: clamp(36px, 6vw, 88px);
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: 130px clamp(22px, 7vw, 116px) 86px;
  color: #fff;
}

.landing-copy {
  max-width: 760px;
}

.landing-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 999px;
  color: #e0f2fe;
  background: rgba(255, 255, 255, .12);
  font-weight: 800;
}

.landing-copy h1,
.landing-copy h2 {
  margin: 0;
  letter-spacing: 0;
}

.landing-copy h1 {
  margin-top: 18px;
  font-size: clamp(58px, 8vw, 116px);
  line-height: .98;
}

.landing-copy > p {
  margin: 18px 0 0;
  color: rgba(226, 241, 255, .88);
  font-size: 18px;
}

.landing-copy h2 {
  max-width: 760px;
  margin-top: 34px;
  font-size: clamp(31px, 4vw, 58px);
  line-height: 1.14;
}

.landing-lead {
  max-width: 690px;
  line-height: 1.8;
}

.landing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.landing-actions .btn.outline {
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .42);
}

.landing-visual {
  justify-self: center;
  position: relative;
  display: grid;
  place-items: center;
  width: min(520px, 100%);
  aspect-ratio: 1;
  border-radius: 999px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .66), rgba(255, 255, 255, .24));
  border: 1px solid rgba(255, 255, 255, .56);
  box-shadow: 0 32px 90px rgba(15, 23, 42, .20);
  backdrop-filter: blur(14px);
}

.landing-logo-card {
  display: grid;
  place-items: center;
  width: 78%;
  min-height: 42%;
  padding: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .90);
  box-shadow: 0 24px 60px rgba(15, 23, 42, .14);
}

.landing-logo-card img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.landing-status-card {
  position: absolute;
  right: 8%;
  bottom: 8%;
  min-width: 150px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, .62);
  border-radius: 8px;
  color: #12325f;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 20px 42px rgba(15, 23, 42, .14);
}

.landing-status-card span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.landing-status-card b {
  display: block;
  margin-top: 4px;
  font-size: 38px;
  line-height: 1;
}

.landing-overview {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  width: min(1220px, calc(100% - 44px));
  margin: -50px auto 52px;
}

.landing-metric {
  min-height: 168px;
  padding: 26px;
  border: 1px solid rgba(255, 255, 255, .66);
  border-radius: 8px;
  background: rgba(255, 255, 255, .70);
  box-shadow: 0 18px 44px rgba(15, 23, 42, .12);
  backdrop-filter: blur(12px);
}

.landing-metric span {
  color: var(--muted);
  font-weight: 700;
}

.landing-metric b {
  display: block;
  margin-top: 10px;
  color: #0f3f75;
  font-size: 28px;
  line-height: 1;
}

.landing-metric p {
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.65;
}

@media (max-width: 1050px) {
  .app { grid-template-columns: 240px minmax(0, 1fr); }
  .g3,
  .g4,
  .exec-grid,
  .round-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-card,
  .settings-grid,
  .audit-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .assessment-row { grid-template-columns: 1fr; }
  .landing-hero { grid-template-columns: 1fr; }
  .landing-visual {
    width: min(390px, 74vw);
    order: -1;
  }
  .landing-copy h1 { font-size: clamp(48px, 11vw, 82px); }
}

@media (max-width: 760px) {
  .app { display: block; }
  .sidebar { position: relative; height: auto; }
  .topbar { position: relative; padding: 18px; align-items: flex-start; }
  .top-user { text-align: left; }
  .content { padding: 18px; }
  .dashboard-hero,
  .section-head { display: grid; align-items: start; }
  .page-actions { display: grid; align-items: start; }
  .dashboard-hero { padding: 24px; }
  .hero-score { text-align: left; }
  .g2,
  .g3,
  .g4,
  .exec-grid,
  .filter-card,
  .audit-filter,
  .round-grid,
  .settings-grid,
  .form-grid { grid-template-columns: 1fr; }
  .assessment-row { grid-template-columns: 1fr; }
  .landing-nav {
    position: relative;
    padding: 12px 18px;
    background: rgba(11, 36, 69, .62);
  }
  .landing-brand span { font-size: 16px; }
  .landing-login { min-height: 38px; padding: 8px 12px; }
  .landing-hero {
    min-height: auto;
    padding: 36px 22px 62px;
  }
  .landing-visual { width: min(310px, 82vw); }
  .landing-logo-card { width: 82%; padding: 18px; }
  .landing-status-card {
    right: 0;
    bottom: -12px;
    min-width: 124px;
    padding: 12px 14px;
  }
  .landing-status-card b { font-size: 30px; }
  .landing-actions .btn { width: 100%; }
  .landing-overview {
    grid-template-columns: 1fr;
    width: calc(100% - 36px);
    margin-top: -18px;
  }
}

/* Teacher SAW-D05 evidence */
.d05v2-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

/* ==========================================================================
   ลดขนาดส่วนหัวของหน้า SAW-D05 ทั้งชุด (หัวเรื่อง / แบนเนอร์ / การ์ด KPI / ข้อมูลครู)
   ของเดิมกินพื้นที่เกือบเต็มจอก่อนจะถึงเนื้อหาจริงคือรายการตัวชี้วัด
   ปรับสเกลให้ใกล้เคียงการ์ด KPI ของหน้าอื่นในระบบ (สูงราว 104-112px, ตัวเลข 26-28px)
   เพื่อให้ขนาดตัวอักษรทั้งระบบเป็นชุดเดียวกัน
   ========================================================================== */
.d05v2-head h2 {
  margin: 0 0 4px;
  color: #061a3b;
  font-size: 22px;
  line-height: 1.3;
}

.d05v2-head p {
  font-size: 13px;
}

.d05v2-head p,
.d05v2-meta p,
.d05v2-table-head p {
  margin: 0;
  color: #64748b;
}

.d05v2-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.d05v2-locked-pill {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  color: #047857;
  background: #dff7ed;
  font-weight: 800;
}

.d05v2-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 0;
  margin-bottom: 14px;
  padding: 18px 24px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, #1d63c8, #1298c8);
  box-shadow: 0 12px 28px rgba(13, 93, 176, .16);
}

.d05v2-hero h3 {
  margin: 0 0 5px;
  font-size: 20px;
  line-height: 1.3;
}

.d05v2-hero p {
  margin: 0;
  color: rgba(255,255,255,.9);
  font-size: 13px;
  line-height: 1.5;
}

.d05v2-percent {
  min-width: 116px;
  text-align: right;
}

.d05v2-percent b {
  display: block;
  font-size: 32px;
  line-height: 1;
}

.d05v2-percent span {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  font-weight: 800;
}

.d05v2-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.d05v2-kpis .card {
  min-height: 104px;
  padding: 16px 18px;
}

.d05v2-kpis span {
  color: #64748b;
  font-size: 13px;
}

.d05v2-kpis b {
  display: block;
  margin: 10px 0;
  color: #061a3b;
  font-size: 26px;
  line-height: 1;
}

.d05v2-kpis em {
  display: inline-flex;
  padding: 5px 10px;
  border-radius: 999px;
  color: #0b63c7;
  background: #eaf2ff;
  font-style: normal;
  font-weight: 800;
  font-size: 12px;
}

.d05v2-kpis .card:nth-child(2) em { color: #047857; background: #ddf8ec; }
.d05v2-kpis .card:nth-child(3) em { color: #b45309; background: #fff0d6; }

.d05v2-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
  padding: 18px;
}

.d05v2-meta .field:nth-child(4) {
  max-width: 420px;
}

.d05v2-meta label {
  margin-bottom: 4px;
  font-size: 13px;
}

/* ช่องพวกนี้ disabled ทั้งหมด เป็นแค่ข้อมูลอ่านอย่างเดียวที่ดึงมาจากโปรไฟล์
   จึงไม่ต้องสูงเท่าช่องกรอกจริง (.card select ตั้งไว้ 50px) */
.d05v2-meta select:disabled {
  min-height: 40px;
  /* คงที่ว่างด้านขวา 42px ไว้ตามที่ .card select กันไว้ให้ลูกศร dropdown
     ถ้าเขียน padding ย่อเป็นสองค่า ข้อความจะไปทับลูกศร */
  padding: 8px 42px 8px 12px;
  color: #64748b;
  background: #f8fafc;
  opacity: 1;
}

.d05v2-meta p {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  font-size: 12px;
}

.d05v2-meta p b {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 999px;
  color: #0b63c7;
  background: #eaf2ff;
  font-size: 11px;
}

.d05v2-warning,
.d05v2-info {
  display: grid;
  gap: 4px;
  margin: 0 0 12px;
  padding: 12px 16px;
  border: 1px solid #f6c56f;
  border-radius: 8px;
  color: #92400e;
  background: #fff7e8;
}

.d05v2-info {
  border-color: #bfdbfe;
  color: #174478;
  background: #edf7ff;
}

.d05v2-warning span,
.d05v2-info span {
  color: #64748b;
  font-size: 13px;
  line-height: 1.5;
}

/* แท็บ 5 ด้าน — เดิมเป็น flex ปุ่มจึงกว้างตามเนื้อหาของตัวเอง กว้างไม่เท่ากัน
   และแถวจบตรงกลางไม่เสมอกับการ์ดหัวข้อด้านล่าง

   เปลี่ยนเป็น grid ที่ทุกคอลัมน์กว้าง 1fr เท่ากัน และกางเต็มความกว้างเท่าการ์ดด้านล่าง
   ใช้ auto-fit แทนการล็อก repeat(5) ไว้ตายตัว เพราะ auto-fit จะยุบคอลัมน์ที่ว่าง
   ทิ้ง ปุ่มที่เหลือจึงยืดเต็มเสมอ และเมื่อจอแคบกว่าที่ 5 ปุ่มจะเรียงไหว
   มันลดจำนวนคอลัมน์ให้เอง โดยแต่ละปุ่มยังกว้างเท่ากันอยู่ ไม่ต้องเขียน media query
   ขั้นต่ำ 120px มาจากข้อความยาวสุดในปุ่มคือ "10 ตัวชี้วัด" บวก padding สองข้าง
   ค่านี้ทำให้ทั้ง 5 ปุ่มยังอยู่แถวเดียวกันได้จนจอแคบราว 640px */
.d05v2-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin: 0 0 12px;
}

.d05v2-tabs a {
  display: grid;
  align-content: center;
  gap: 5px;
  min-width: 0;
  padding: 12px 16px;
  border: 1px solid #c7d7eb;
  border-radius: 8px;
  color: #0f315f;
  background: #fff;
  text-align: center;
  text-decoration: none;
}

.d05v2-tabs a.active {
  color: #fff;
  border-color: #1478d4;
  background: linear-gradient(135deg, #2168d1, #0891b2);
}

.d05v2-tabs span {
  color: inherit;
  opacity: .8;
  font-size: 12px;
}

/* ช่องลิงก์วิดีโอการสอน (ด้านที่ 2 ข้อ 1) อยู่ใต้กล่องหมายเหตุในคอลัมน์ตัวชี้วัด */
.d05v2-video-input {
  width: 100%;
  min-height: 42px;
  margin-top: 2px;
  border: 1px solid #cfe0f3;
  border-radius: 8px;
  padding: 10px 12px;
  color: #0b2447;
  background: #fff;
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.d05v2-video-input:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}

.d05v2-video-hint {
  color: var(--muted);
  font-weight: 500;
}

.d05v2-video-note {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.d05v2-table {
  padding: 0;
  overflow: hidden;
  /* ปุ่มแท็บลิงก์มาที่ #d05-domain-form เว้นระยะไว้หน่อยจะได้ไม่ชิดขอบบนจอพอดีเป๊ะ
     และยังพอเห็นแถวปุ่มด้านอยู่เหนือขึ้นไป */
  scroll-margin-top: 16px;
}

/* หัวข้อด้าน — ลดลงมาให้อยู่ในสเกลเดียวกับส่วนหัวที่ย่อไปแล้ว
   ไม่งั้นมันจะกลายเป็นตัวอักษรที่ใหญ่ที่สุดในหน้าแทน */
.d05v2-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-left: 5px solid #1d6fd7;
  background: #eef6ff;
}

.d05v2-table-head h3 {
  margin: 0 0 4px;
  color: #0b3568;
  font-size: 20px;
}

.d05v2-table-head p {
  font-size: 13px;
}

.d05v2-table-head span {
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: 999px;
  color: #0b63c7;
  background: #e6f0ff;
  font-size: 13px;
  font-weight: 900;
}

.d05v2-row {
  display: grid;
  grid-template-columns: minmax(280px, .67fr) minmax(320px, 1fr);
  gap: 18px;
  padding: 20px 24px;
  border-top: 1px solid #dbe5f1;
}

.d05v2-indicator h4 {
  margin: 0 0 12px;
  color: #061a3b;
  font-size: 18px;
  line-height: 1.45;
}

.d05v2-indicator > span {
  display: inline-flex;
  margin-bottom: 18px;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.d05v2-indicator > span.ok {
  color: #047857;
  background: #ddf8ec;
}

.d05v2-indicator > span.warn {
  color: #b45309;
  background: #fff0d6;
}

.d05v2-indicator label {
  display: block;
  margin-bottom: 8px;
  color: #334155;
  font-weight: 800;
}

.d05v2-indicator textarea {
  width: 100%;
  min-height: 92px;
  border: 1px solid #d1dfef;
  border-radius: 8px;
  padding: 12px;
  color: #0f172a;
  resize: vertical;
}

.d05v2-evidence {
  display: grid;
  gap: 10px;
}

.d05v2-evidence-item {
  display: grid;
  gap: 9px;
  padding: 11px 12px;
  border: 1px solid #d4e0ee;
  border-radius: 8px;
  background: #fbfdff;
}

.d05v2-evidence-item.checked {
  border-color: #94c6ff;
  background: #f3f8ff;
}

.d05v2-evidence-item label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #0f315f;
  font-weight: 800;
  cursor: pointer;
}

.d05v2-evidence-item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.d05v2-evidence-item label span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border: 1px solid #9fb7d2;
  border-radius: 6px;
  background: #fff;
}

.d05v2-evidence-item input:checked + span {
  border-color: #1d6fd7;
  background: #1d6fd7;
}

.d05v2-evidence-item input:checked + span::before {
  content: "✓";
  color: #fff;
  font-size: 14px;
  font-weight: 900;
}

.d05v2-upload {
  display: none;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 32px;
}

.d05v2-evidence-item:has(input:checked) .d05v2-upload {
  display: flex;
}

.d05v2-upload .pretty-file {
  flex: 0 0 auto;
  width: auto;
  min-width: 118px;
  min-height: 38px;
  padding: 0;
  border-radius: 8px;
  border-style: solid;
  background: #fff;
  overflow: hidden;
}

.d05v2-upload .pretty-file span,
.d05v2-upload a,
.d05v2-upload .d05v2-upload-status {
  font-size: 13px;
}

.d05v2-upload .pretty-file span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 118px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 8px;
  white-space: nowrap;
}

.d05v2-upload a {
  max-width: min(420px, 100%);
  color: #155fc7;
  font-weight: 800;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.d05v2-upload .d05v2-upload-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.2;
}

.d05v2-upload .d05v2-upload-status.pending {
  color: #b45309;
  background: #fff0d6;
}

/* "ติ๊กแล้วแต่ยังไม่แนบไฟล์" ไม่ใช่ข้อผิดพลาด การแนบไฟล์เป็นทางเลือก
   จึงใช้โทนกลาง (เทา) ไม่ใช่สีส้มแบบคำเตือน จะได้ไม่ทำให้ครูเข้าใจว่าต้องแนบให้ครบก่อนส่ง */
.d05v2-upload .d05v2-upload-status.optional {
  color: #64748b;
  background: #eef2f7;
  font-weight: 700;
}

.d05v2-upload .d05v2-upload-status.saved,
.d05v2-upload .d05v2-upload-status.ready {
  color: #047857;
  background: #ddf8ec;
}

@media (max-width: 1100px) {
  .d05v2-kpis,
  .d05v2-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .d05v2-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .d05v2-head,
  .d05v2-hero,
  .d05v2-table-head {
    align-items: stretch;
    flex-direction: column;
  }
  /* ต้องเล็กกว่าค่าเริ่มต้นที่ย่อไปแล้ว (22/20/20px)
     ถ้าปล่อยไว้ที่ 22px เดิม จอแคบจะกลายเป็นตัวใหญ่กว่าจอกว้าง */
  .d05v2-head h2,
  .d05v2-hero h3,
  .d05v2-table-head h3 {
    font-size: 19px;
  }
  .d05v2-actions,
  .d05v2-actions .btn,
  .d05v2-meta,
  .d05v2-kpis {
    width: 100%;
    grid-template-columns: 1fr;
  }
  .d05v2-percent {
    text-align: left;
  }
  .d05v2-row {
    padding: 16px;
  }
  .d05v2-upload {
    padding-left: 0;
  }
}

.d05-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.d05-head h2 {
  margin: 0;
  color: #082a52;
  font-size: 28px;
}

.d05-head p {
  margin: 8px 0 0;
  color: var(--muted);
}

.d05-hero {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 360px);
  gap: 18px;
  align-items: center;
  margin-bottom: 16px;
  padding: 22px;
}

.d05-hero span,
.d05-hero small,
.d05-kpis span,
.d05-kpis em {
  display: block;
  color: var(--muted);
}

.d05-hero b {
  display: block;
  margin: 6px 0;
  color: #082a52;
  font-size: 22px;
}

.d05-scoreline {
  padding: 18px;
  border: 1px solid #d8e5f2;
  border-radius: 16px;
  background: #f8fbff;
}

.d05-scoreline b {
  color: #155fc7;
  font-size: 32px;
  line-height: 1;
}

.d05-scoreline em {
  display: block;
  height: 11px;
  margin-top: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: #eaf0f7;
}

.d05-scoreline i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1e63d5, #2fb7a3);
}

.d05-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.d05-kpis .card {
  min-height: 124px;
  padding: 20px;
}

.d05-kpis b {
  display: block;
  margin: 14px 0 10px;
  color: #061a3a;
  font-size: 32px;
  line-height: 1;
}

.d05-kpis em {
  font-style: normal;
  font-size: 13px;
}

.d05-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.d05-tabs a {
  min-width: 150px;
  padding: 11px 14px;
  border: 1px solid #cbd9eb;
  border-radius: 13px;
  color: #365771;
  background: #fff;
  font-weight: 900;
}

.d05-tabs a.active {
  color: #fff;
  border-color: #155ec7;
  background: linear-gradient(135deg, #155ec7, #168ecf);
  box-shadow: 0 10px 24px rgba(21, 94, 199, .18);
}

.d05-tabs small {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  opacity: .82;
}

.d05-layout {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.d05-item-list,
.d05-evidence-card {
  padding: 20px;
}

.d05-item-list {
  position: sticky;
  top: 92px;
  max-height: calc(100vh - 120px);
  overflow: auto;
}

.d05-item-list h3 {
  margin: 0 0 14px;
  color: #082a52;
  font-size: 18px;
  line-height: 1.45;
}

.d05-item-list > a {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px 12px;
  padding: 12px;
  border: 1px solid #d8e5f2;
  border-radius: 13px;
  background: #fff;
}

.d05-item-list > a + a {
  margin-top: 9px;
}

.d05-item-list > a.active {
  border-color: #83b9f3;
  background: #f3f8ff;
  box-shadow: 0 0 0 3px #ddecff;
}

.d05-item-list > a b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: #155fc7;
  background: #eaf3ff;
}

.d05-item-list > a span {
  color: #213b5c;
  font-size: 13px;
  line-height: 1.5;
}

.d05-item-list > a em {
  grid-column: 2;
  justify-self: start;
  padding: 5px 9px;
  border-radius: 999px;
  font-style: normal;
  font-size: 11px;
  font-weight: 900;
}

.d05-item-list .ok {
  color: #047857;
  background: #dff8ec;
}

.d05-item-list .warn {
  color: #b45309;
  background: #fff0d5;
}

.d05-item-list .muted {
  color: #64748b;
  background: #eef3f8;
}

.d05-form-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5edf6;
}

.d05-form-title span {
  color: #155fc7;
  font-weight: 900;
}

.d05-form-title h3 {
  margin: 8px 0 0;
  color: #082a52;
  font-size: 22px;
  line-height: 1.45;
}

.evidence-check-notice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
  padding: 13px 15px;
  border: 1px solid #cfe1f5;
  border-radius: 13px;
  color: #295477;
  background: #edf6ff;
}

.evidence-check-notice::before {
  content: "";
  width: 10px;
  height: 10px;
  margin-top: 7px;
  border-radius: 50%;
  background: #1d6bdb;
  flex: 0 0 auto;
}

.evidence-check-notice b,
.evidence-check-notice span {
  display: block;
}

.evidence-check-notice span {
  margin-top: 2px;
  color: #60758c;
  font-size: 13px;
}

.evidence-checklist {
  display: grid;
  gap: 10px;
}

.evidence-option {
  padding: 12px;
  border: 1px solid #dce5ef;
  border-radius: 13px;
  background: #fbfcfe;
}

.evidence-option.checked {
  border-color: #a9d8c4;
  background: #f2f9f6;
}

.evidence-checkline {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.evidence-checkline input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.evidence-fakecheck {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid #60b9cb;
  border-radius: 6px;
  color: #fff;
  flex: 0 0 auto;
  font-size: 13px;
}

.evidence-checkline input:checked + .evidence-fakecheck {
  border-color: #18865f;
  background: #18865f;
}

.evidence-checkline input:checked + .evidence-fakecheck::before {
  content: "✓";
}

.evidence-checkline b {
  color: #294760;
  font-size: 14px;
  line-height: 1.45;
}

.evidence-upload-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0 0 32px;
  padding-top: 10px;
  border-top: 1px dashed #cbd9e5;
}

.evidence-upload-mini {
  min-height: 36px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
}

.evidence-upload-mini span {
  min-height: 36px;
  color: #fff;
  background: #1763cf;
  font-size: 12px;
}

.evidence-file-name,
.evidence-waiting {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 5px 9px;
  border-radius: 9px;
  font-size: 12px;
}

.evidence-file-name {
  color: #155fc7;
  border: 1px solid #cdddea;
  background: #fff;
}

.evidence-waiting {
  color: #9b650b;
  background: #fff7e8;
}

.d05-note {
  margin-top: 18px;
}

.d05-note textarea {
  width: 100%;
  min-height: 110px;
  border: 1px solid #cfe0f2;
  border-radius: 12px;
  padding: 12px;
}

.d05-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #e5edf6;
}

@media (max-width: 1180px) {
  .d05-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .d05-layout {
    grid-template-columns: 1fr;
  }

  .d05-item-list {
    position: static;
    max-height: none;
  }
}

@media (max-width: 720px) {
  .d05-head,
  .d05-hero,
  .d05-kpis {
    grid-template-columns: 1fr;
  }

  .d05-head {
    display: grid;
    align-items: start;
  }

  .d05-head h2 {
    font-size: 23px;
  }

  .d05-tabs a {
    width: 100%;
  }

  .d05-form-title,
  .d05-form-actions,
  .evidence-upload-line {
    display: grid;
  }

  .evidence-upload-line {
    margin-left: 0;
  }

  .d05-form-title h3 {
    font-size: 19px;
  }

  .d05-form-actions .btn,
  .d05-head .btn {
    width: 100%;
  }
}

/* Final landing composition */
body.home-page {
  min-height: 100vh;
  color: #10233f;
  background:
    radial-gradient(circle at 88% 18%, rgba(45, 212, 191, .22), transparent 24rem),
    radial-gradient(circle at 6% 14%, rgba(37, 99, 235, .18), transparent 28rem),
    linear-gradient(135deg, #eff6ff 0%, #f8fbff 46%, #e7f8fb 100%);
}

body.home-page .landing-nav {
  position: relative;
  z-index: 3;
  min-height: 96px;
  padding: 18px clamp(20px, 5vw, 76px);
  color: #10233f;
  background: transparent;
  border-bottom: 0;
  backdrop-filter: none;
}

body.home-page .landing-brand b { color: #0b3a70; font-size: 28px; }
body.home-page .landing-brand small { display: block; margin-top: 6px; color: #64748b; font-size: 13px; line-height: 1.45; }
body.home-page .landing-brand img { width: 58px; height: 58px; border-radius: 16px; }
body.home-page .landing-login { min-height: 58px; padding: 14px 24px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #1d4ed8, #0ea5e9); font-size: 18px; }

body.home-page .landing-hero {
  min-height: 760px;
  grid-template-columns: minmax(0, 1.02fr) minmax(480px, .98fr);
  gap: clamp(42px, 6vw, 92px);
  width: min(1760px, 100%);
  padding: 84px clamp(28px, 5.2vw, 76px) 64px;
  color: #10233f;
}

body.home-page .landing-kicker { min-height: 38px; padding: 8px 14px; color: #0756ad; background: rgba(255, 255, 255, .72); box-shadow: 0 14px 38px rgba(37, 99, 235, .10); font-size: 14px; }
body.home-page .landing-copy h1 { color: #172b45; font-size: clamp(42px, 5vw, 76px); line-height: 1.08; }
body.home-page .landing-copy h1 strong { color: #1d63d5; }
body.home-page .landing-lead { max-width: 850px; color: #526b89; font-size: clamp(16px, 1.08vw, 20px); line-height: 1.75; }
body.home-page .landing-actions .btn { min-height: 56px; border-radius: 12px; padding: 13px 20px; font-size: 17px; }
body.home-page .landing-actions .btn.outline { color: #1d4ed8; background: rgba(255, 255, 255, .82); border: 1px solid #bfdbfe; }

body.home-page .landing-dashboard { position: relative; min-height: 620px; }
body.home-page .mock-window { position: absolute; right: 0; top: 50px; width: min(820px, 100%); overflow: hidden; border: 1px solid rgba(148, 163, 184, .24); border-radius: 28px; background: rgba(255, 255, 255, .90); box-shadow: 0 36px 92px rgba(15, 23, 42, .18); }
body.home-page .mock-titlebar { display: flex; align-items: center; gap: 8px; height: 62px; padding: 0 22px; border-bottom: 1px solid #e2e8f0; color: #94a3b8; background: #f8fafc; }
body.home-page .mock-titlebar span { width: 12px; height: 12px; border-radius: 999px; background: #cbd5e1; }
body.home-page .mock-titlebar b { flex: 1; text-align: center; font-size: 15px; }
body.home-page .mock-body { display: grid; grid-template-columns: 110px 1fr; min-height: 560px; }
body.home-page .mock-sidebar { padding: 24px 22px; background: #123f69; }
body.home-page .mock-sidebar i, body.home-page .mock-sidebar em { display: block; border-radius: 10px; }
body.home-page .mock-sidebar i { width: 48px; height: 48px; margin: 2px auto 30px; background: linear-gradient(135deg, #38bdf8, #2563eb); }
body.home-page .mock-sidebar em { height: 11px; margin-top: 16px; background: rgba(191, 219, 254, .28); }
body.home-page .mock-sidebar em:first-of-type { background: #38bdf8; }
body.home-page .mock-content { padding: 40px 32px 32px; }
body.home-page .mock-content p { margin: 0; color: #172b45; font-size: 24px; font-weight: 800; }
body.home-page .mock-content small { display: block; margin-top: 8px; color: #94a3b8; font-size: 14px; }
body.home-page .mock-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
body.home-page .mock-stats div { padding: 20px 16px; border: 1px solid #e2e8f0; border-radius: 14px; background: #f8fafc; }
body.home-page .mock-stats b { display: block; color: #172b45; font-size: 26px; line-height: 1; }
body.home-page .mock-stats span { display: block; margin-top: 10px; color: #94a3b8; font-size: 13px; }
body.home-page .mock-bars { display: grid; gap: 22px; margin-top: 38px; }
body.home-page .mock-bars label { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 18px; color: #94a3b8; }
body.home-page .mock-bars span { position: relative; height: 10px; overflow: hidden; border-radius: 999px; background: #edf2f7; }
body.home-page .mock-bars span::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, #2563eb, #22c1d6); }
body.home-page .mock-ready { margin-top: 34px; padding: 16px; border-radius: 14px; color: #059669; background: #e9f8f2; text-align: center; font-weight: 800; }
body.home-page .mock-float { position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 16px 20px; border: 1px solid #dbeafe; border-radius: 18px; color: #64748b; background: rgba(255, 255, 255, .92); box-shadow: 0 22px 54px rgba(15, 23, 42, .14); }
body.home-page .mock-float b { color: #1d63d5; font-size: 30px; }
body.home-page .mock-float-top { right: -28px; top: 88px; }
body.home-page .mock-float-bottom { left: -18px; bottom: 74px; }

body.home-page .landing-section, body.home-page .workflow-section { padding: 66px clamp(22px, 4vw, 56px); background: rgba(255, 255, 255, .96); }
body.home-page .landing-section-head { max-width: 920px; margin: 0 auto 46px; text-align: center; }
body.home-page .landing-section-head span { color: #1d4ed8; font-weight: 800; }
body.home-page .landing-section-head h2 { margin: 16px 0 0; color: #10233f; font-size: clamp(28px, 3vw, 42px); line-height: 1.22; }
body.home-page .landing-section-head p { margin: 18px 0 0; color: #64748b; font-size: 17px; }
body.home-page .capability-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; width: min(1740px, 100%); margin: 0 auto; }
body.home-page .capability-grid article, body.home-page .workflow-steps article { min-height: 210px; padding: 26px; border: 1px solid #dbe5f0; border-radius: 22px; background: #fff; box-shadow: 0 12px 34px rgba(15, 23, 42, .04); }
body.home-page .capability-grid i { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 16px; color: #10233f; background: #eef5ff; }
body.home-page .capability-grid svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.home-page .capability-grid h3, body.home-page .workflow-steps h3 { margin: 22px 0 0; color: #082a52; font-size: 22px; line-height: 1.25; }
body.home-page .capability-grid p, body.home-page .workflow-steps p { margin: 14px 0 0; color: #64748b; font-size: 16px; line-height: 1.65; }
body.home-page .workflow-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 60px; width: min(1740px, 100%); margin: 0 auto; }
body.home-page .workflow-steps article { position: relative; display: grid; place-items: center; min-height: 206px; padding: 26px; text-align: center; }
body.home-page .workflow-steps article:not(:last-child)::after { content: "→"; position: absolute; right: -42px; top: 50%; color: #94a3b8; font-size: 32px; transform: translateY(-50%); }
body.home-page .workflow-steps b { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: #1d63d5; background: #eaf3ff; font-size: 20px; }

@media (max-width: 1100px) {
  body.home-page .landing-hero { grid-template-columns: 1fr; min-height: auto; }
  body.home-page .landing-dashboard { min-height: 520px; }
  body.home-page .mock-window { position: relative; top: 0; }
  body.home-page .mock-float-top { right: 12px; top: 42px; }
  body.home-page .mock-float-bottom { left: 12px; bottom: 22px; }
  body.home-page .capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.home-page .workflow-steps { grid-template-columns: 1fr; gap: 18px; }
  body.home-page .workflow-steps article:not(:last-child)::after { content: none; }
}

@media (max-width: 720px) {
  body.home-page .landing-nav { align-items: flex-start; padding: 16px; }
  body.home-page .landing-brand b { font-size: 22px; }
  body.home-page .landing-brand small { font-size: 11px; }
  body.home-page .landing-login { min-height: 44px; padding: 10px 14px; font-size: 15px; }
  body.home-page .landing-hero { padding: 32px 16px 42px; }
  body.home-page .landing-kicker { font-size: 13px; line-height: 1.45; }
  body.home-page .landing-copy h1 { font-size: clamp(42px, 13vw, 66px); }
  body.home-page .landing-lead { font-size: 17px; }
  body.home-page .landing-actions .btn { width: 100%; min-height: 56px; font-size: 17px; }
  body.home-page .landing-checks { gap: 12px; font-size: 14px; }
  body.home-page .landing-dashboard { min-height: auto; }
  body.home-page .mock-body { grid-template-columns: 70px 1fr; min-height: 420px; }
  body.home-page .mock-sidebar { padding: 20px 14px; }
  body.home-page .mock-stats { grid-template-columns: 1fr; }
  body.home-page .mock-bars label { grid-template-columns: 58px 1fr; }
  body.home-page .mock-float { display: none; }
  body.home-page .capability-grid { grid-template-columns: 1fr; }
  body.home-page .landing-section, body.home-page .workflow-section { padding: 54px 16px; }
  body.home-page .capability-grid article, body.home-page .workflow-steps article { min-height: auto; border-radius: 16px; }
}

/* Final landing font normalization */
body.home-page .landing-brand b { font-size: 24px !important; }
body.home-page .landing-brand small { font-size: 12px !important; }
body.home-page .landing-login { min-height: 50px !important; padding: 11px 20px !important; font-size: 16px !important; }
body.home-page .landing-hero { min-height: 680px !important; padding-top: 58px !important; padding-bottom: 54px !important; }
body.home-page .landing-kicker { min-height: 38px !important; padding: 8px 14px !important; font-size: 14px !important; }
body.home-page .landing-copy h1 { font-size: clamp(42px, 5vw, 76px) !important; line-height: 1.08 !important; }
body.home-page .landing-lead { font-size: clamp(16px, 1.08vw, 20px) !important; line-height: 1.75 !important; }
body.home-page .landing-actions .btn { min-height: 56px !important; padding: 13px 20px !important; font-size: 17px !important; }
body.home-page .landing-checks { font-size: 15px !important; }
body.home-page .mock-content p { font-size: 24px !important; }
body.home-page .mock-content small { font-size: 14px !important; }
body.home-page .mock-stats b { font-size: 26px !important; }
body.home-page .mock-stats span,
body.home-page .mock-bars label,
body.home-page .mock-ready,
body.home-page .mock-float span { font-size: 13px !important; }
body.home-page .mock-float b { font-size: 25px !important; }
body.home-page .landing-section-head h2 { font-size: clamp(28px, 3vw, 42px) !important; }
body.home-page .landing-section-head p { font-size: 17px !important; }
body.home-page .capability-grid h3,
body.home-page .workflow-steps h3 { font-size: 22px !important; }
body.home-page .capability-grid p { font-size: 16px !important; }
body.home-page .workflow-steps p { font-size: 14px !important; }

@media (max-width: 720px) {
  body.home-page .landing-brand b { font-size: 18px !important; }
  body.home-page .landing-brand small { font-size: 10px !important; }
  body.home-page .landing-login { min-height: 40px !important; padding: 8px 12px !important; font-size: 14px !important; }
  body.home-page .landing-kicker { font-size: 12px !important; }
  body.home-page .landing-copy h1 { font-size: clamp(34px, 10vw, 48px) !important; }
  body.home-page .landing-lead { font-size: 15px !important; }
  body.home-page .landing-actions .btn { min-height: 50px !important; font-size: 15px !important; }
  body.home-page .capability-grid h3,
  body.home-page .workflow-steps h3 { font-size: 20px !important; }
  body.home-page .capability-grid p { font-size: 15px !important; }
}

/* Final responsive system overrides */
html {
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

input,
select,
textarea,
button {
  max-width: 100%;
}

.table-wrap,
.user-table,
.card:has(table),
.data-card:has(table) {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table,
table {
  width: 100%;
}

@media (max-width: 1180px) {
  .app {
    grid-template-columns: 250px minmax(0, 1fr);
  }

  .content {
    padding: 24px;
  }

  .topbar {
    padding-inline: 24px;
  }
}

@media (max-width: 920px) {
  .app {
    display: block;
    min-height: auto;
  }

  .sidebar {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: auto;
    padding: 14px;
  }

  .brand {
    gap: 10px;
    padding-bottom: 12px;
  }

  .brand img {
    width: 46px;
    height: 46px;
  }

  .brand h2,
  .brand-title {
    font-size: 18px;
    line-height: 1.25;
  }

  .nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
  }

  .nav a {
    min-height: 44px;
    padding: 10px 12px;
  }

  .userbox {
    margin-top: 14px;
  }

  .topbar {
    position: relative;
    min-height: auto;
    padding: 16px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .topbar h1 {
    font-size: 22px;
  }

  .top-user {
    text-align: right;
  }

  .content {
    padding: 18px 16px 28px;
  }

  .dashboard-hero,
  .section-head,
  .page-actions {
    display: grid;
    gap: 14px;
  }

  .hero-score {
    text-align: left;
  }

  .g2,
  .g3,
  .g4,
  .exec-grid,
  .round-grid,
  .filter-card,
  .settings-grid,
  .audit-filter,
  .form-grid,
  .master-toolbar,
  .security-grid {
    grid-template-columns: 1fr !important;
  }

  .row-actions,
  .modal-actions,
  .form-actions {
    flex-wrap: wrap;
  }

  .table,
  table {
    min-width: 720px;
  }
}

@media (max-width: 560px) {
  .sidebar {
    padding: 12px;
  }

  .nav {
    grid-template-columns: 1fr;
  }

  .topbar {
    grid-template-columns: 1fr;
  }

  .top-user {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }

  .content {
    padding-inline: 12px;
  }

  .card,
  .stat,
  .dashboard-hero,
  .panel,
  .modal-card {
    border-radius: 14px;
  }

  .btn,
  button.btn,
  a.btn {
    min-height: 42px;
  }

  .row-actions .btn,
  .modal-actions .btn,
  .form-actions .btn {
    flex: 1 1 100%;
  }

  .modal {
    align-items: flex-end;
    padding: 10px;
  }

  .modal-card {
    width: 100%;
    max-height: calc(100vh - 20px);
    overflow-y: auto;
    padding: 18px;
  }

  .field input,
  .field select,
  .field textarea,
  input,
  select,
  textarea {
    min-height: 42px;
    font-size: 16px;
  }
}

/* Mobile hamburger navigation */
.mobile-menu-toggle,
.sidebar-backdrop {
  display: none;
}

.mobile-menu-toggle {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 80;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(191, 219, 254, .75);
  border-radius: 14px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 16px 36px rgba(15, 23, 42, .14);
  cursor: pointer;
}

.mobile-menu-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 5px auto;
  border-radius: 999px;
  background: #0f3764;
  transition: transform .2s ease, opacity .2s ease;
}

.sidebar-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(15, 23, 42, .42);
  backdrop-filter: blur(3px);
}

body.sidebar-open {
  overflow: hidden;
}

body.sidebar-open .mobile-menu-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

body.sidebar-open .mobile-menu-toggle span:nth-child(2) {
  opacity: 0;
}

body.sidebar-open .mobile-menu-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 920px) {
  .mobile-menu-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .sidebar-backdrop {
    display: block;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }

  .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 70;
    width: min(320px, 88vw) !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    padding: 18px 14px !important;
    overflow-y: auto;
    transform: translateX(-104%);
    transition: transform .22s ease;
    box-shadow: 24px 0 60px rgba(15, 23, 42, .24);
  }

  body.sidebar-open .sidebar {
    transform: translateX(0);
  }

  body.sidebar-open .sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .topbar {
    padding-left: 76px !important;
  }

  .nav {
    display: block !important;
  }

  .navitem {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .mobile-menu-toggle {
    top: 10px;
    left: 10px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }

  .topbar {
    padding-left: 64px !important;
  }
}

/* Sidebar auto-fit and scroll behavior */
.sidebar {
  overflow: hidden !important;
}

.sidebar .brand {
  flex: 0 0 auto;
}

.sidebar .nav {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  padding-bottom: 16px;
}

.sidebar .userbox {
  flex: 0 0 auto;
  margin-top: 12px;
}

@media (max-width: 920px) {
  .sidebar .nav {
    display: block !important;
    flex: 1 1 auto;
    overflow-y: auto;
    padding-bottom: 18px;
  }

  .sidebar .userbox {
    margin-top: 12px !important;
  }
}

/* Role and permission management */
.permission-role-card {
  min-height: 260px;
}

.permission-role-card h3 {
  margin: 28px 0 14px;
  font-size: 20px;
}

.permission-role-card p {
  min-height: 78px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}

.permission-form {
  margin-top: 18px;
}

.permission-table td:first-child {
  min-width: 320px;
}

.permission-table td:first-child span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
}

.switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.switch span {
  position: relative;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: #dbe5f0;
  transition: background .18s ease;
}

.switch span::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .18);
  transition: transform .18s ease;
}

.switch input:checked + span {
  background: linear-gradient(135deg, #1d63d5, #1ca4c9);
}

.switch input:checked + span::after {
  transform: translateX(20px);
}

.switch em {
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
}

.switch.switch-locked {
  cursor: default;
}

.switch.switch-locked span {
  background: linear-gradient(135deg, #0f766e, #16a34a);
}

.switch.switch-locked em {
  color: #047857;
}

.permission-detail-grid {
  margin-top: 16px;
}

.permission-modal-card {
  width: min(720px, 100%);
}

.permission-check-list {
  display: grid;
  gap: 10px;
}

.permission-check-list label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.permission-check-list input {
  margin-top: 4px;
}

.permission-check-list b,
.permission-check-list em {
  display: block;
}

.permission-check-list em {
  margin-top: 3px;
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 720px) {
  .permission-role-card {
    min-height: auto;
  }

  .permission-role-card p {
    min-height: auto;
  }
}

/* AI API settings */
.ai-settings-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: 24px;
  align-items: start;
}

.ai-settings-hero h3 {
  margin: 18px 0 8px;
  font-size: 26px;
}

.ai-settings-hero p {
  max-width: 780px;
  color: var(--muted);
  line-height: 1.7;
}

.ai-global-settings {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
}

.ai-number-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ai-provider-grid {
  margin-top: 16px;
}

.ai-provider-card {
  display: grid;
  gap: 14px;
}

.ai-provider-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ai-provider-head h3 {
  margin: 0;
  font-size: 19px;
}

.ai-provider-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.ai-provider-badge {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 14px;
  color: #155fc7;
  background: #eaf3ff;
  font-weight: 900;
}

.inline-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.ai-note-card {
  margin-top: 16px;
}

.ai-save-actions {
  margin-top: 16px;
}

@media (max-width: 920px) {
  .ai-settings-hero,
  .ai-number-grid {
    grid-template-columns: 1fr;
  }
}

/* Full-height desktop sidebar */
@media (min-width: 921px) {
  .app {
    align-items: stretch;
    min-height: 100vh;
  }

  .sidebar {
    position: relative !important;
    top: auto !important;
    align-self: stretch;
    height: auto !important;
    min-height: 100vh !important;
    overflow: hidden !important;
  }

  .sidebar .nav {
    flex: 1 1 auto;
    max-height: none;
    overflow-y: auto;
  }
}

/* Account menu in topbar */
.account-menu {
  position: relative;
}

.account-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  text-align: right;
  cursor: pointer;
}

.account-copy b,
.account-copy span {
  display: block;
}

.account-copy b {
  color: #0f172a;
  font-size: 13px;
}

.account-copy span {
  color: var(--muted);
}

.account-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 30;
  width: 210px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .14);
  text-align: left;
}

.account-dropdown[hidden] {
  display: none;
}

.account-dropdown-head {
  padding: 10px 10px 12px;
  border-bottom: 1px solid var(--line);
}

.account-dropdown-head b,
.account-dropdown-head span {
  display: block;
}

.account-dropdown-head b {
  color: #0f172a;
}

.account-dropdown-head span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

/* ต้องเป็น flex ไม่ใช่ grid
   ตอนกดปุ่ม app.js จะแทนเนื้อหาข้างในเป็น <span class="btn-spinner"> + <span>ข้อความ</span>
   ถ้าเป็น grid + place-items:center สองก้อนนี้จะกลายเป็นสองแถวเรียงลงมา
   ตัวหมุนไปอยู่เหนือข้อความ และความสูงรวมทะลุ min-height จนล้นกรอบ
   flex + gap ทำให้มันอยู่บรรทัดเดียวกัน ตรงกับที่ .btn-spinner ออกแบบมา (flex:0 0 auto) */
.account-link,
.account-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 12px;
  border-radius: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.account-link {
  margin-bottom: 8px;
  color: #0f5fc4;
  background: #edf6ff;
}

.account-link:hover {
  background: #dbeafe;
}

.account-logout {
  color: #b91c1c;
  background: #fef2f2;
}

.account-logout:hover {
  background: #fee2e2;
}

@media (max-width: 560px) {
  .account-copy {
    display: none;
  }

  .account-dropdown {
    right: auto;
    left: 0;
    width: min(240px, calc(100vw - 24px));
  }
}

/* Keep the account dropdown usable even when a cached script is slow to refresh. */
.topbar {
  overflow: visible;
}

.account-menu {
  z-index: 90;
}

.account-toggle {
  min-height: 52px;
  padding: 4px 6px 4px 10px;
  border-radius: 16px;
}

.account-toggle:hover,
.account-menu.open .account-toggle,
.account-menu:focus-within .account-toggle {
  background: #f1f6ff;
}

.account-dropdown {
  z-index: 120;
}

.account-menu.open .account-dropdown {
  display: block;
}

/* ทางสำรองเมื่อ JS ไม่ทำงาน (หรือเบราว์เซอร์ยังใช้ app.js ที่แคชไว้เวอร์ชันเก่า)
   ให้เปิดเมนูด้วยโฟกัสได้ เพื่อไม่ให้ปุ่มออกจากระบบกดไม่ได้เลย

   ต้องกันไม่ให้ทำงานตอน JS ปกติ ไม่งั้นสองกลไกจะแย่งกันคุมเมนูเดียวกัน คือ
     - mousedown → ปุ่มได้โฟกัส → :focus-within สั่ง display:block เมนูโผล่
     - click     → JS ปลด hidden → :not([hidden]) เข้าเงื่อนไข dialog-pop
                   แอนิเมชันจึงเริ่มใหม่จาก opacity 0 กลายเป็น "กระพริบ"
     - กดปุ่มเดิมซ้ำเพื่อปิด → JS ใส่ hidden กลับ แต่ปุ่มยังมีโฟกัส
                   กฎนี้ฝืนเปิดค้าง เมนูจึงปิดไม่ลง
   app.js ติดคลาส js-account-menu ให้ <html> เมื่อผูก handler สำเร็จ */
html:not(.js-account-menu) .account-menu:focus-within .account-dropdown,
html:not(.js-account-menu) .account-menu:focus-within .account-dropdown[hidden] {
  display: block;
}

@media (max-width: 560px) {
  .account-dropdown {
    right: 0;
    left: auto;
  }
}

/* Executive Dashboard */
/* ==========================================================================
   ย่อส่วนหัวของ Executive Dashboard (การ์ด KPI 4 ใบ + แถวชื่อหน้า/ตัวกรอง)
   สเกลเดียวกับหน้าอื่นที่ย่อไปแล้ว (การ์ด KPI สูงราว 104px, หัวเรื่อง 18-22px)
   ========================================================================== */
.exec-kpi-row,
.exec-filter-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.exec-kpi-card,
.exec-title-card,
.exec-select-card,
.exec-refresh,
.exec-panel,
.exec-score-card,
.exec-wheel,
.exec-recommendations {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 16px 34px rgba(15, 23, 42, .05);
}

.exec-kpi-card {
  min-height: 104px;
  padding: 14px 16px;
}

.exec-icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 10px;
  border-radius: 10px;
  color: #144f9f;
  background: #eaf3ff;
  font-size: 12px;
  font-weight: 900;
}

.exec-kpi-card b {
  display: block;
  color: #0b3975;
  font-size: 16px;
  line-height: 1.35;
}

.exec-kpi-card p,
.exec-title-card p,
.exec-select-card label,
.exec-panel small {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.exec-filter-row {
  grid-template-columns: 1.8fr .48fr .48fr 130px;
  align-items: stretch;
  margin-top: 16px;
}

.exec-title-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
}

.exec-title-card img {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  object-fit: contain;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .08);
}

.exec-title-card h2,
.exec-panel h3,
.exec-score-card h3 {
  margin: 0;
  color: #07346c;
  line-height: 1.25;
}

.exec-title-card h2 {
  font-size: 18px;
}

.exec-select-card {
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 12px 14px;
}

.exec-select-card select {
  border: 0;
  background: transparent;
  color: #092f63;
  font-size: 14px;
  font-weight: 900;
  outline: 0;
}

.exec-refresh {
  display: grid;
  place-items: center;
  padding: 12px;
  color: #fff;
  background: linear-gradient(135deg, #1d5fc4, #139bd0);
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
}

.exec-board {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(300px, .9fr);
  gap: 14px;
}

.exec-panel,
.exec-score-card,
.exec-wheel {
  padding: 16px 18px;
}

/* หัวข้อแผงเป็น flex ที่มีเลขลำดับอยู่ข้างหน้า
   align-items ต้องเป็น start ไม่ใช่ center — หัวข้อยาว ๆ อย่าง
   "ตัวชี้วัดภาระงานและการกรอกข้อมูลซ้ำ" ขึ้นสองบรรทัด ถ้าจัดกึ่งกลาง
   เลขลำดับจะลอยไปอยู่กลางความสูงสองบรรทัด ดูไม่ตรงกับบรรทัดแรกของหัวข้อ */
.exec-panel h3,
.exec-score-card h3 {
  display: flex;
  align-items: start;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 17px;
  line-height: 1.4;
}

.exec-panel h3 span {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  color: #fff;
  background: #1767cf;
  font-size: 12px;
}

.donut-wrap {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  margin-top: 14px;
}

.donut,
.score-ring {
  --a: 0;
  --b: 0;
  position: relative;
  display: grid;
  place-items: center;
  width: 116px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(#2aaa74 calc(var(--a) * 1%), #f8b23a 0 calc((var(--a) + var(--b)) * 1%), #ef5548 0);
}

.donut::after,
.score-ring::after {
  content: "";
  position: absolute;
  inset: 28px;
  border-radius: 50%;
  background: #fff;
}

.donut b,
.donut small,
.score-ring b,
.score-ring span {
  position: relative;
  z-index: 1;
}

.donut b,
.score-ring b {
  color: #17448a;
  font-size: 34px;
  line-height: 1;
}

.donut small,
.score-ring span {
  margin-top: 38px;
  color: var(--muted);
  font-size: 12px;
}

.donut.follow {
  background: conic-gradient(#2aaa74 calc(var(--a) * 1%), #f8b23a 0 calc((var(--a) + var(--b)) * 1%), #ef5548 0);
}

.donut-legend {
  display: grid;
  gap: 8px;
  font-size: 13px;
}

.donut-legend p {
  display: grid;
  grid-template-columns: 11px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.donut-legend i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.green { background: #2aaa74; }
.orange { background: #f8b23a; }
.red { background: #ef5548; }
.amber { background: #ff7a1a; }
.yellow { background: #f4bf16; }

.exec-foot,
.exec-trend {
  display: block;
  margin-top: 12px;
  color: #16457f;
  font-size: 13px;
}

.radar-chart {
  display: block;
  width: min(280px, 100%);
  margin: 4px auto 0;
}

.radar-chart text,
.line-chart text {
  fill: #426184;
  font-size: 11px;
}

.domain-inline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 10px;
  color: #526b8e;
  font-size: 12px;
}

.domain-inline b {
  color: #17448a;
}

.exec-score-card {
  grid-row: span 2;
}

.score-ring {
  --score: 0;
  width: 140px;
  margin: 10px auto 8px;
  background: conic-gradient(#4e32cc calc(var(--score) * 1%), #4f93e5 0 82%, #eaf0f7 0);
}

.score-ring::after {
  inset: 26px;
}

.score-ring b {
  color: #4e32cc;
  font-size: 30px;
}

.stars {
  margin: 4px 0 12px;
  color: #f59e0b;
  font-size: 20px;
  text-align: center;
  letter-spacing: 2px;
}

.exec-score-card .score-list {
  gap: 0;
  margin-bottom: 12px;
  font-size: 13px;
}

.exec-score-card .score-list div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #edf2f7;
}

.line-chart {
  display: block;
  width: 100%;
  min-height: 175px;
  margin-top: 10px;
}

.issue-list {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  font-size: 13px;
}

.issue-list div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px 42px;
  align-items: center;
  gap: 10px;
}

.issue-list em {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf2f7;
}

.issue-list i {
  display: block;
  height: 100%;
  border-radius: inherit;
}

/* .support-grid เดิมเป็น 4 คอลัมน์ในแผงกว้างราว 380px ช่องละ ~85px
   ป้ายกำกับอย่าง "เวลาในการปฏิบัติงาน" จึงตกบรรทัดเป็น 4 บรรทัดอ่านยาก
   เปลี่ยนเป็น 2 คอลัมน์เท่ากับ .data-grid ช่องกว้างขึ้นเท่าตัว ป้ายจบใน 1-2 บรรทัด */
.support-grid,
.data-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.support-grid div,
.data-grid div {
  min-height: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fbff;
}

.support-grid b,
.data-grid b {
  display: block;
  color: #155fc7;
  font-size: 22px;
  line-height: 1.15;
}

.support-grid span,
.data-grid span,
.data-grid small {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}

/* ตำแหน่งข้อความในวงล้อ (.wheel::after, .wheel span, .w1-.w6) ถูกจูนไว้เป็นพิกเซล
   สำหรับวงกว้าง 260px ถ้าไปแก้ width ตรง ๆ ต้องไล่จูนใหม่ทุกตัวและเสี่ยงเพี้ยน
   จึงย่อทั้งวงด้วย transform: scale แทน สัดส่วนภายในคงเดิมเป๊ะ
   แล้วใช้ margin ติดลบดึงที่ว่างที่ scale ทิ้งไว้กลับคืน (260 - 260x0.8 = 52 → ข้างละ 26px) */
.exec-wheel {
  grid-column: span 2;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 10px;
}

.wheel {
  transform: scale(.8);
  margin: -26px;
  position: relative;
  width: 260px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(#1e73be 0 16.66%, #2b85d8 0 33.33%, #5337b8 0 50%, #1fa188 0 66.66%, #23a86f 0 83.33%, #178db0 0);
  box-shadow: inset 0 0 0 28px rgba(255,255,255,.18), 0 18px 46px rgba(30,64,175,.16);
}

.wheel::after {
  content: "";
  position: absolute;
  inset: 78px;
  border-radius: 50%;
  background: #eef8ff;
}

.wheel span,
.wheel b {
  position: absolute;
  z-index: 1;
  color: #fff;
  text-align: center;
  font-weight: 900;
}

.wheel span {
  inset: 99px 0 auto;
  color: #17448a;
  font-size: 24px;
}

.wheel b {
  width: 86px;
  font-size: 12px;
  line-height: 1.35;
}

.w1 { top: 24px; left: 88px; }
.w2 { top: 84px; right: 8px; }
.w3 { right: 28px; bottom: 54px; }
.w4 { bottom: 22px; left: 88px; }
.w5 { left: 15px; bottom: 56px; }
.w6 { top: 82px; left: 8px; }

/* ตารางประวัติในหน้า Teacher 360 มี 4 คอลัมน์สั้น ๆ อยู่ในกล่องกว้างราว 460px
   แต่ .table ตั้ง min-width: 720px ไว้สำหรับตารางใหญ่ ๆ ของหน้าอื่น
   ตารางเล็กนี้จึงถูกบังคับให้กว้างเกินกล่องและเกิดแถบเลื่อนแนวนอน
   คอลัมน์ "แนวโน้ม" ที่อยู่ขวาสุดถูกตัดหายไปนอกจอ */
.t360-history-table {
  min-width: 0;
}

.t360-history-table th,
.t360-history-table td {
  white-space: nowrap;
}

.security-signals {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

/* เดิมเป็น flex แบบหัวข้อซ้าย-ค่าขวา แต่แผงนี้กว้างราว 300px
   ค่าอย่าง "ยังไม่พบใน Audit Log" จึงถูกบีบจนตกบรรทัดกลางคำ
   เปลี่ยนเป็นซ้อนบน-ล่าง หัวข้อตัวหนา ค่าตัวจางอยู่ใต้ อ่านไล่ลงมาได้สะดวกกว่า */
.security-signals li {
  display: grid;
  gap: 2px;
  color: #0f2b52;
  font-size: 13px;
}

.security-signals span {
  color: #334e70;
  font-size: 12.5px;
  line-height: 1.45;
}

.exec-recommendations {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
}

.exec-recommendations div {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfdff;
}

.exec-recommendations b {
  display: block;
  color: #0d4c9e;
  margin-bottom: 6px;
}

.exec-recommendations span {
  color: var(--muted);
}

@media (max-width: 1180px) {
  .exec-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exec-filter-row { grid-template-columns: 1fr 1fr; }
  .exec-board { grid-template-columns: 1fr 1fr; }
  .exec-score-card { grid-row: auto; }
}

@media (max-width: 720px) {
  .exec-kpi-row,
  .exec-filter-row,
  .exec-board,
  .exec-recommendations {
    grid-template-columns: 1fr;
  }

  .exec-title-card {
    align-items: flex-start;
    padding: 18px;
  }

  .exec-title-card h2 {
    font-size: 22px;
  }

  .donut-wrap {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .support-grid,
  .data-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .exec-wheel,
  .exec-structure-image-card {
    grid-column: auto;
  }

  .issue-list div {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .security-signals li {
    display: grid;
  }
}

/* Teacher 360 profile */
.t360-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.t360-head h2 {
  margin: 0;
  color: #082a52;
  font-size: 28px;
}

.t360-head p {
  margin: 8px 0 0;
  color: var(--muted);
}

.t360-picker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 14px 18px;
}

/* label เป็น flex item ที่ยุบตัวได้ตามค่าเริ่มต้น พอช่องเลือกจอง min-width ไว้
   คำว่า "เลือกครู" จึงถูกบีบจนตกเป็นสองบรรทัด — ล็อกไม่ให้ยุบและไม่ให้ตัดคำ */
.t360-picker label {
  flex: 0 0 auto;
  white-space: nowrap;
  color: #334155;
  font-weight: 800;
}

.t360-picker select {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 520px;
  border: 1px solid #cfe0f2;
  border-radius: 12px;
  padding: 10px 12px;
  background: #fff;
  color: #0f2f5f;
  font-weight: 800;
}

.t360-profile {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
  padding: 24px;
}

.t360-avatar {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(135deg, #1d6bdb, #18a8c7);
  font-size: 24px;
  font-weight: 900;
}

.t360-profile h2 {
  margin: 0;
  color: #082a52;
  font-size: 26px;
}

.t360-profile p {
  margin: 8px 0 0;
  color: #637791;
}

.t360-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.t360-badges span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
}

.t360-badges .ok {
  color: #047857;
  background: #dff8ec;
}

.t360-badges .warn {
  color: #b45309;
  background: #fff0d5;
}

.t360-badges .muted {
  color: #64748b;
  background: #edf3fa;
}

.t360-score {
  display: grid;
  place-items: center;
  min-width: 124px;
  min-height: 98px;
  border-radius: 16px;
  background: #eef5ff;
}

.t360-score b {
  color: #155fc7;
  font-size: 30px;
}

.t360-score span {
  color: var(--muted);
  font-size: 12px;
}

.t360-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.t360-panel,
.t360-insight,
.t360-timeline-card,
.t360-history {
  padding: 22px;
}

.t360-panel h3,
.t360-insight h3,
.t360-timeline-card h3,
.t360-history h3 {
  margin: 0 0 18px;
  color: #082a52;
  font-size: 20px;
}

.t360-bars {
  display: grid;
  gap: 16px;
}

.t360-bars div {
  display: grid;
  grid-template-columns: 210px 1fr 52px;
  align-items: center;
  gap: 14px;
}

.t360-bars span {
  color: #0f2b52;
  font-size: 14px;
}

.t360-bars em {
  height: 11px;
  overflow: hidden;
  border-radius: 999px;
  background: #eaf0f7;
}

.t360-bars i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1e63d5, #2fb7a3);
}

.t360-bars b {
  color: #0f2b52;
  text-align: right;
}

.t360-insight {
  background: #f0f7ff;
  border-color: #c9def7;
}

.t360-insight ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  color: #405a79;
}

.t360-insight b {
  color: #173d74;
}

.t360-timeline-card,
.t360-history {
  min-height: 430px;
}

.t360-timeline {
  position: relative;
  display: grid;
  gap: 18px;
  padding-left: 12px;
}

.t360-timeline::before {
  content: "";
  position: absolute;
  left: 30px;
  top: 18px;
  bottom: 22px;
  width: 3px;
  border-radius: 999px;
  background: #dce7f3;
}

.t360-timeline > div {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr 100px;
  align-items: center;
  gap: 16px;
}

.t360-timeline > div > b {
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 3px solid #cbd5e1;
  border-radius: 50%;
  color: #64748b;
  background: #f8fafc;
  font-size: 13px;
}

.t360-timeline .done > b {
  color: #047857;
  border-color: #4ab487;
  background: #e8fbf2;
}

.t360-timeline .current > b {
  color: #075ed0;
  border-color: #1f7ae0;
  background: #eaf3ff;
  box-shadow: 0 0 0 6px #ddecff;
}

.t360-timeline h4 {
  margin: 0;
  color: #17406f;
  font-size: 16px;
}

.t360-timeline p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.t360-timeline time {
  color: #64748b;
  text-align: right;
  font-size: 13px;
}

.t360-history .table {
  min-width: 620px;
}

.t360-feedback-title {
  margin-top: 28px !important;
}

.t360-feedback {
  display: grid;
  gap: 16px;
}

.t360-feedback div {
  position: relative;
  display: grid;
  gap: 4px;
  padding-left: 30px;
}

.t360-feedback div::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 10px;
  bottom: -18px;
  width: 2px;
  background: #dbe7f5;
}

.t360-feedback div:last-child::before {
  bottom: 10px;
}

.t360-feedback span {
  position: absolute;
  left: 2px;
  top: 5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #2375dd;
}

.t360-feedback b {
  color: #17406f;
}

.t360-feedback p {
  margin: 0;
  color: var(--muted);
}

@media print {
  .sidebar,
  .topbar,
  .mobile-menu-toggle,
  .sidebar-backdrop,
  .t360-head .btn,
  .t360-picker {
    display: none !important;
  }

  .app,
  .content {
    display: block !important;
    padding: 0 !important;
  }

  .t360-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  .t360-profile,
  .t360-grid {
    grid-template-columns: 1fr;
  }

  .t360-score {
    justify-self: start;
  }
}

@media (max-width: 620px) {
  .t360-head,
  .t360-picker {
    display: grid;
    align-items: start;
  }

  .t360-head h2 {
    font-size: 23px;
  }

  .t360-picker select,
  .t360-head .btn {
    width: 100%;
  }

  .t360-bars div {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .t360-bars b {
    text-align: left;
  }

  .t360-timeline > div {
    grid-template-columns: 52px 1fr;
  }

  .t360-timeline time {
    grid-column: 2;
    text-align: left;
  }
}

/* Three-committee consolidation */
.cons-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.cons-head h2 {
  margin: 0;
  color: #082a52;
  font-size: 28px;
}

.cons-head p {
  margin: 8px 0 0;
  color: var(--muted);
}

.cons-picker {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding: 16px 20px;
}

.cons-picker label {
  display: block;
  margin-bottom: 6px;
  color: #334155;
  font-weight: 800;
}

.cons-picker select {
  min-width: min(460px, 100%);
  border: 1px solid #cfe0f2;
  border-radius: 12px;
  padding: 10px 12px;
  background: #fff;
  color: #0f2f5f;
  font-weight: 800;
}

.cons-picker p {
  margin: 0;
  color: var(--muted);
}

.cons-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.cons-kpis .card {
  min-height: 138px;
  padding: 22px;
}

.cons-kpis span {
  display: block;
  color: var(--muted);
  margin-bottom: 16px;
}

.cons-kpis b {
  display: block;
  color: #061a3a;
  font-size: 34px;
  line-height: 1;
}

.cons-kpis em {
  display: inline-flex;
  margin-top: 18px;
  padding: 7px 12px;
  border-radius: 999px;
  font-style: normal;
  font-weight: 900;
}

.cons-kpis .ok {
  color: #047857;
  background: #dff8ec;
}

.cons-kpis .warn {
  color: #b45309;
  background: #fff0d5;
}

.cons-table-card {
  padding: 20px;
}

.cons-table {
  min-width: 920px;
}

.cons-table th,
.cons-table td {
  text-align: center;
}

.cons-table th:first-child,
.cons-table td:first-child {
  text-align: left;
}

.cons-table .needs-review {
  background: #fffdf7;
}

.cons-total-row td {
  border-top: 1px solid #cfe0f2;
  font-weight: 900;
}

.cons-alert {
  margin-top: 14px;
  padding: 13px 14px;
  border: 1px solid #f3c56a;
  border-radius: 12px;
  color: #9a5b00;
  background: #fff8e8;
  font-weight: 700;
}

.cons-alert.ok {
  border-color: #a7e4c6;
  color: #047857;
  background: #edfdf5;
}

.cons-committee-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.cons-committee-card {
  padding: 20px;
}

.cons-committee-card h3 {
  margin: 0 0 8px;
  color: #113d74;
  font-size: 18px;
}

.cons-committee-card p {
  margin: 0 0 8px;
  color: #0f2b52;
  font-weight: 800;
}

.cons-committee-card small {
  color: var(--muted);
}

.cons-status {
  margin-top: 16px;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 900;
}

.cons-status.done {
  color: #047857;
  background: #e4f8ef;
}

.cons-status.pending {
  color: #a16207;
  background: #fff2d7;
}

@media (max-width: 1000px) {
  .cons-kpis,
  .cons-committee-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .cons-head,
  .cons-picker {
    display: grid;
  }

  .cons-head h2 {
    font-size: 23px;
  }

  .cons-head .btn,
  .cons-picker select {
    width: 100%;
  }

  .cons-kpis,
  .cons-committee-grid {
    grid-template-columns: 1fr;
  }
}

/* Director follow-up tasks */
.follow-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.follow-head h2 {
  margin: 0;
  color: #082a52;
  font-size: 28px;
}

.follow-head p {
  margin: 8px 0 0;
  color: var(--muted);
}

.follow-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

.follow-kpis .card {
  min-height: 132px;
  padding: 18px;
}

.follow-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  border-radius: 13px;
  color: #144f9f;
  background: #eaf3ff;
  font-size: 13px;
  font-weight: 900;
}

.follow-kpis b {
  display: block;
  color: #0d4c9e;
  font-size: 20px;
}

.follow-kpis p {
  margin: 6px 0 0;
  color: var(--muted);
}

.follow-list-card {
  display: grid;
  gap: 10px;
  padding: 20px;
}

.follow-task {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto minmax(320px, .8fr);
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid #d8e5f2;
  border-radius: 14px;
  background: #fff;
}

.follow-dot {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #eef5ff;
}

.follow-dot::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #0f2b52;
}

.follow-task h3 {
  margin: 0;
  color: #113d74;
  font-size: 17px;
}

.follow-task p {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 13px;
}

.follow-task small {
  display: block;
  margin-top: 6px;
  color: #0f766e;
}

.follow-badge {
  display: inline-grid;
  place-items: center;
  min-width: 76px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  font-weight: 900;
  white-space: nowrap;
}

.follow-badge.danger {
  color: #b91c1c;
  background: #fee2e2;
}

.follow-badge.warn {
  color: #b45309;
  background: #fff0d5;
}

.follow-badge.info {
  color: #155fc7;
  background: #eaf3ff;
}

.follow-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
}

.follow-action input {
  min-width: 0;
  border: 1px solid #cfe0f2;
  border-radius: 10px;
  padding: 10px 12px;
}

.btn.light {
  color: #334155;
  background: #eef3f8;
}

.follow-empty {
  display: grid;
  place-items: center;
  min-height: 120px;
  color: #047857;
  border: 1px dashed #9bd9bb;
  border-radius: 14px;
  background: #f0fff7;
  font-weight: 900;
}

.follow-history {
  margin-top: 18px;
  padding: 20px;
}

.follow-history h3 {
  margin: 0 0 6px;
  color: #082a52;
}

@media (max-width: 1180px) {
  .follow-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .follow-task {
    grid-template-columns: 44px 1fr auto;
  }

  .follow-action {
    grid-column: 2 / -1;
  }
}

@media (max-width: 700px) {
  .follow-head,
  .follow-task,
  .follow-action {
    display: grid;
  }

  .follow-head h2 {
    font-size: 23px;
  }

  .follow-kpis {
    grid-template-columns: 1fr;
  }

  .follow-task {
    grid-template-columns: 1fr;
  }

  .follow-action {
    grid-column: auto;
    grid-template-columns: 1fr;
  }

  .follow-head .btn,
  .follow-action .btn {
    width: 100%;
  }
}

/* Director committee management */
.committee-head {
  margin-bottom: 16px;
}

.committee-head h2 {
  margin: 0;
  color: #082a52;
  font-size: 28px;
}

.committee-head p {
  margin: 8px 0 0;
  color: var(--muted);
}

.committee-form-card {
  padding: 20px;
}

.committee-assign-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.committee-assign-form .field {
  margin: 0;
}

.committee-assign-form select,
.committee-assign-form input[type="date"],
.signature-form select {
  width: 100%;
  min-height: 52px;
  border: 1px solid #cfe0f2;
  border-radius: 12px;
  padding: 0 14px;
  background: #fff;
  color: #0f2f5f;
  font-size: 16px;
}

.committee-actions {
  display: flex;
  align-items: end;
}

.committee-grid {
  display: grid;
  grid-template-columns: .9fr 1.4fr;
  gap: 16px;
  margin-top: 16px;
}

.committee-sign-card,
.committee-list-card,
.committee-assignment-list {
  padding: 20px;
}

.committee-sign-card h3,
.committee-list-card h3,
.committee-assignment-list h3 {
  margin: 0 0 10px;
  color: #082a52;
}

.signature-form {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.pretty-file {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 54px;
  padding: 8px;
  border: 1px dashed #9fc4ef;
  border-radius: 14px;
  background: #f5f9ff;
  cursor: pointer;
}

.pretty-file input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.pretty-file span {
  display: inline-grid;
  place-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  color: #155fc7;
  background: #e6f0ff;
  font-weight: 900;
}

.committee-assignment-list {
  margin-top: 16px;
}

.committee-list-card small {
  color: var(--muted);
}

@media (max-width: 1100px) {
  .committee-grid {
    grid-template-columns: 1fr 1fr;
  }

  .committee-assign-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .committee-assign-form,
  .committee-grid {
    grid-template-columns: 1fr;
  }

  .committee-head h2 {
    font-size: 23px;
  }

  .committee-actions .btn,
  .signature-form .btn {
    width: 100%;
  }
}

/* Director information reports */
.report-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.report-head h2 {
  margin: 0;
  color: #082a52;
  font-size: 28px;
}

.report-head p {
  margin: 8px 0 0;
  color: var(--muted);
}

.report-ai-warning {
  margin-bottom: 16px;
}

.report-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

/* เดิมเป็น grid + align-content: start ทุกแถวจึงอัดชิดขอบบน
   ปุ่ม "สร้างรายงาน" ของแต่ละใบเลยไปหยุดตรงที่เนื้อหาของใบนั้นจบพอดี ได้คนละระดับ
     ใบ 1 มีช่องเลือก + คำอธิบายใต้ช่อง  → ปุ่มต่ำสุด
     ใบ 2 มีช่องเลือกอย่างเดียว          → ปุ่มกลาง
     ใบ 3 ไม่มีช่องเลือกเลย              → ปุ่มลอยขึ้นไปสูงสุด
   เปลี่ยนเป็น flex column แล้วดันปุ่มไปชิดฐานการ์ดด้วย margin-top: auto
   การ์ดในกริดสูงเท่ากันอยู่แล้ว ปุ่มทั้งสามใบจึงอยู่ระดับเดียวกันเสมอ */
.report-create-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 210px;
  padding: 24px;
}

.report-create-card h3 {
  margin: 0;
  color: #082a52;
  font-size: 20px;
}

.report-create-card p {
  margin: 0;
  min-height: 52px;
  color: var(--muted);
  line-height: 1.65;
}

/* margin-top: auto กินที่ว่างที่เหลือทั้งหมดไว้เหนือปุ่ม → ปุ่มไปชิดฐานการ์ด
   align-self: start ใช้แทน justify-self ของเดิม เพราะ justify-self ไม่มีผลใน flex
   (ถ้าปล่อยไว้ ปุ่มจะยืดเต็มความกว้างการ์ด) */
.report-create-card .btn {
  align-self: start;
  margin-top: auto;
}

.report-create-card [aria-disabled="true"] {
  opacity: .72;
  cursor: not-allowed;
}

.report-output {
  margin-top: 18px;
  padding: 24px;
}

.report-output-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.report-output-head h3 {
  margin: 0;
  color: #082a52;
}

.report-text {
  color: #193657;
  font-size: 15px;
  line-height: 1.85;
  white-space: normal;
}

@media print {
  .report-head .pill,
  .report-card-grid,
  .report-output-head .btn {
    display: none !important;
  }
}

@media (max-width: 920px) {
  .report-card-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .report-head,
  .report-output-head {
    display: grid;
    align-items: start;
  }

  .report-head h2 {
    font-size: 23px;
  }

  .report-create-card .btn,
  .report-output-head .btn {
    width: 100%;
  }
}

/* Sidebar account box removed; account actions now live in the topbar. */
.sidebar .userbox {
  display: none !important;
}

.sidebar .nav {
  margin-bottom: 0 !important;
}

/* Teacher overview dashboard */
.teacher-overview-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.teacher-overview-head h2 {
  margin: 0;
  color: #082a52;
  font-size: 28px;
}

.teacher-overview-head p {
  margin: 8px 0 0;
  color: var(--muted);
}

.teacher-hero-card {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  padding: 18px 20px;
}

.teacher-avatar {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #1d6bdb, #18a8c7);
  font-size: 20px;
  font-weight: 900;
}

.teacher-hero-card h2 {
  margin: 0;
  color: #082a52;
  font-size: 23px;
}

.teacher-hero-card p {
  margin: 6px 0 0;
  color: #637791;
}

.teacher-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.teacher-badges span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.teacher-badges .ok {
  color: #047857;
  background: #dff8ec;
}

.teacher-badges .warn {
  color: #b45309;
  background: #fff0d5;
}

.teacher-score-card {
  display: grid;
  place-items: center;
  min-width: 110px;
  min-height: 84px;
  border-radius: 14px;
  background: #eef5ff;
}

.teacher-score-card b {
  color: #155fc7;
  font-size: 27px;
  line-height: 1;
}

.teacher-score-card span {
  color: var(--muted);
  font-size: 12px;
}

.teacher-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.teacher-kpi {
  min-height: 112px;
  padding: 16px 18px;
}

.teacher-kpi span,
.teacher-kpi em {
  display: block;
  color: var(--muted);
  font-style: normal;
}

.teacher-kpi b {
  display: block;
  margin: 12px 0 10px;
  color: #061a3a;
  font-size: 28px;
  line-height: 1;
}

.teacher-kpi em {
  font-size: 13px;
}

.teacher-work-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.teacher-panel {
  padding: 22px;
}

.teacher-panel h3 {
  margin: 0 0 18px;
  color: #082a52;
  font-size: 20px;
}

.teacher-bars {
  display: grid;
  gap: 16px;
}

.teacher-bars div {
  display: grid;
  grid-template-columns: 220px 1fr 52px;
  align-items: center;
  gap: 14px;
}

.teacher-bars span {
  color: #0f2b52;
  font-size: 14px;
}

.teacher-bars em {
  height: 11px;
  overflow: hidden;
  border-radius: 999px;
  background: #eaf0f7;
}

.teacher-bars i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1e63d5, #2fb7a3);
}

.teacher-bars b {
  color: #0f2b52;
  text-align: right;
}

.teacher-action-list {
  display: grid;
  gap: 10px;
}

.teacher-task-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid #d8e5f2;
  border-radius: 14px;
  background: #fff;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.teacher-task-row:hover {
  transform: translateY(-1px);
  border-color: #b9d3f0;
  box-shadow: 0 14px 30px rgba(15, 23, 42, .08);
}

.teacher-task-dot {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #eef5ff;
}

.teacher-task-dot::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #0f2b52;
}

.teacher-task-row b {
  display: block;
  color: #113d74;
  font-size: 16px;
}

.teacher-task-row small {
  display: block;
  margin-top: 5px;
  color: #64748b;
}

.teacher-due {
  display: inline-grid;
  place-items: center;
  min-width: 76px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.teacher-due.danger {
  color: #b91c1c;
  background: #fee2e2;
}

.teacher-due.warn {
  color: #b45309;
  background: #fff0d5;
}

.teacher-due.ok {
  color: #047857;
  background: #dff8ec;
}

.teacher-due.info,
.teacher-due.muted {
  color: #155fc7;
  background: #eaf3ff;
}

.teacher-timeline-card,
.teacher-dev-card {
  min-height: 430px;
}

.teacher-timeline {
  position: relative;
  display: grid;
  gap: 16px;
  padding-left: 10px;
}

.teacher-timeline::before {
  content: "";
  position: absolute;
  left: 30px;
  top: 18px;
  bottom: 22px;
  width: 3px;
  border-radius: 999px;
  background: #dce7f3;
}

.teacher-timeline a {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr 100px;
  align-items: center;
  gap: 16px;
}

.teacher-timeline a > b {
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 3px solid #cbd5e1;
  border-radius: 50%;
  color: #64748b;
  background: #f8fafc;
  font-size: 13px;
}

.teacher-timeline .done > b {
  color: #047857;
  border-color: #4ab487;
  background: #e8fbf2;
}

.teacher-timeline .current > b {
  color: #075ed0;
  border-color: #1f7ae0;
  background: #eaf3ff;
  box-shadow: 0 0 0 6px #ddecff;
}

.teacher-timeline strong {
  display: block;
  color: #17406f;
  font-size: 16px;
}

.teacher-timeline small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}

.teacher-timeline time {
  color: #64748b;
  text-align: right;
  font-size: 13px;
}

.teacher-dev-highlight {
  padding: 18px;
  border: 1px solid #c9def7;
  border-radius: 16px;
  background: #f0f7ff;
}

.teacher-dev-highlight b {
  color: #0d4c9e;
}

.teacher-dev-highlight p {
  margin: 8px 0 0;
  color: #405a79;
  line-height: 1.7;
}

.teacher-feedback {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}

.teacher-feedback h4 {
  margin: 0;
  color: #082a52;
  font-size: 17px;
}

.teacher-feedback div {
  position: relative;
  padding-left: 28px;
}

.teacher-feedback div::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 10px;
  bottom: -16px;
  width: 2px;
  background: #dbe7f5;
}

.teacher-feedback div:last-child::before {
  bottom: 10px;
}

.teacher-feedback div > span {
  position: absolute;
  left: 2px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #2375dd;
}

.teacher-feedback b {
  display: block;
  color: #17406f;
  font-size: 13px;
}

.teacher-feedback p {
  margin: 4px 0 0;
  color: var(--muted);
  line-height: 1.65;
}

@media (max-width: 1080px) {
  .teacher-kpi-grid,
  .teacher-work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .teacher-overview-head,
  .teacher-hero-card,
  .teacher-work-grid {
    grid-template-columns: 1fr;
  }

  .teacher-overview-head {
    display: grid;
    align-items: start;
  }

  .teacher-overview-head h2,
  .teacher-hero-card h2 {
    font-size: 23px;
  }

  .teacher-score-card {
    justify-self: start;
  }

  .teacher-kpi-grid {
    grid-template-columns: 1fr;
  }

  .teacher-bars div {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .teacher-bars b {
    text-align: left;
  }

  .teacher-task-row {
    grid-template-columns: 40px 1fr;
  }

  .teacher-due {
    grid-column: 2;
    justify-self: start;
  }

  .teacher-timeline a {
    grid-template-columns: 52px 1fr;
  }

  .teacher-timeline time {
    grid-column: 2;
    text-align: left;
  }
}

/* Teacher pre-observation D01-D04 */
.tl-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

/* ==========================================================================
   ย่อส่วนหัวของหน้า Timeline (หัวเรื่อง / การ์ดโปรไฟล์ / การ์ด KPI)
   ปรับให้อยู่สเกลเดียวกับหน้า SAW-D05 ที่ย่อไปแล้ว
   (การ์ด KPI สูงราว 104px ตัวเลข 26px หัวเรื่อง 20-22px)
   เพื่อให้ขนาดตัวอักษรทั้งระบบเป็นชุดเดียวกัน
   ========================================================================== */
.tl-page-head h2 {
  margin: 0;
  color: #061a3b;
  font-size: 22px;
  line-height: 1.3;
}

.tl-page-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.tl-hero-card {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  padding: 18px;
}

.tl-avatar {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #0891b2);
  font-size: 20px;
  font-weight: 900;
}

/* .profile-icon-lg ตั้งไว้ 34px สำหรับกรอบ 72px เดิม พอย่อกรอบเหลือ 56px
   ไอคอนจะดูอัดจนเกือบชนขอบ ลดตามให้ได้สัดส่วนเดิม */
.tl-avatar .profile-icon {
  font-size: 26px;
}

.tl-hero-card h2 {
  margin: 0;
  color: #082a52;
  font-size: 20px;
}

.tl-hero-card p {
  margin: 4px 0 10px;
  color: #64748b;
  font-size: 13px;
}

.tl-progress-line {
  height: 8px;
  max-width: 640px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8eef6;
}

.tl-progress-line i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #2fb7a3);
}

/* align-content: center + gap — กล่องนี้เป็นกริดที่มี min-height สูงกว่าเนื้อหา
   ถ้าไม่กำหนด แถวทั้งสองจะยืดเต็มความสูง (ค่าเริ่มต้นคือ stretch) แล้ว
   place-items: center ก็ไปจัดกึ่งกลางของแต่ละแถว ตัวเลขกับคำบรรยายจึงห่างกันเกินจริง
   (อาการเดียวกับ .pre-ring และโดนัทของหน้าผู้อำนวยการ) */
.tl-scorebox {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  min-width: 96px;
  min-height: 72px;
  border-radius: 14px;
  background: #eaf3ff;
}

.tl-scorebox b {
  color: #155fc7;
  font-size: 24px;
  line-height: 1;
}

.tl-scorebox span {
  color: #64748b;
  font-size: 11px;
}

.tl-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.tl-kpis .card {
  min-height: 104px;
  padding: 16px 18px;
}

.tl-kpis span,
.tl-kpis em {
  display: block;
  color: var(--muted);
  font-style: normal;
}

.tl-kpis span {
  font-size: 13px;
}

.tl-kpis b {
  display: block;
  margin: 10px 0;
  color: #061a3b;
  font-size: 26px;
  line-height: 1;
}

.tl-kpis em {
  font-size: 12px;
}

.tl-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
  gap: 18px;
  margin-bottom: 18px;
}

.tl-panel {
  padding: 22px;
}

.tl-panel h3 {
  margin: 0 0 16px;
  color: #082a52;
  font-size: 20px;
}

.tl-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.tl-panel-head h3 {
  margin-bottom: 6px;
}

.tl-panel-head p {
  margin: 0;
  color: var(--muted);
}

.tl-supervision {
  position: relative;
  display: grid;
  gap: 0;
  margin-top: 16px;
}

.tl-supervision::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 24px;
  bottom: 24px;
  width: 3px;
  border-radius: 999px;
  background: #d9e5f2;
}

.tl-step {
  position: relative;
  display: grid;
  grid-template-columns: 46px 1fr auto;
  gap: 14px;
  align-items: center;
  min-height: 76px;
  padding: 0 0 18px;
  color: inherit;
  text-decoration: none;
}

.tl-step.disabled {
  cursor: default;
}

.tl-step > b {
  z-index: 1;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 3px solid #cfd9e8;
  border-radius: 50%;
  color: #7b8aa0;
  background: #f8fafc;
  font-size: 14px;
}

.tl-step.done > b {
  color: #047857;
  border-color: #4ab487;
  background: #e8fbf2;
}

.tl-step.current > b {
  color: #075ed0;
  border-color: #1f7ae0;
  background: #eaf3ff;
  box-shadow: 0 0 0 7px #ddecff;
}

.tl-step strong {
  display: block;
  color: #17406f;
  font-size: 17px;
}

.tl-step small {
  display: block;
  margin-top: 5px;
  color: #64748b;
  line-height: 1.55;
}

.tl-step time {
  color: #64748b;
  text-align: right;
  font-size: 13px;
  white-space: nowrap;
}

.tl-task-list {
  display: grid;
  gap: 10px;
}

.tl-task {
  position: relative;
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 4px 10px;
  padding: 14px;
  border: 1px solid #d5e2f0;
  border-radius: 8px;
  color: inherit;
  background: #fbfdff;
  text-decoration: none;
}

.tl-task span {
  grid-row: span 2;
  align-self: start;
  width: 10px;
  height: 10px;
  margin-top: 6px;
  border-radius: 50%;
  background: #2563eb;
}

.tl-task b {
  color: #113d74;
}

.tl-task small {
  color: #64748b;
  line-height: 1.55;
}

.tl-task.danger span { background: #ef4444; }
.tl-task.warn span { background: #f59e0b; }
.tl-task.ok span { background: #10b981; }
.tl-task.muted span { background: #94a3b8; }

.tl-bars {
  display: grid;
  gap: 16px;
}

.tl-bars div {
  display: grid;
  grid-template-columns: 82px 1fr 58px;
  align-items: center;
  gap: 12px;
}

.tl-bars span {
  color: #17406f;
  font-weight: 800;
}

.tl-bars em {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8eef6;
}

.tl-bars i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #22c1b2);
}

.tl-bars b {
  color: #082a52;
  text-align: right;
}

.tl-facts {
  display: grid;
  gap: 12px;
  margin: 0;
}

.tl-facts div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e2e8f0;
}

.tl-facts div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.tl-facts dt {
  color: #64748b;
}

.tl-facts dd {
  margin: 0;
  color: #082a52;
  font-weight: 900;
  text-align: right;
}

@media (max-width: 1100px) {
  .tl-kpis,
  .tl-main-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .tl-page-head,
  .tl-hero-card,
  .tl-kpis,
  .tl-main-grid {
    display: grid;
    grid-template-columns: 1fr;
  }
  /* ต้องเล็กกว่าค่าเริ่มต้นที่ย่อไปแล้ว (22px / 20px)
     ถ้าปล่อยไว้ที่ 23px เดิม จอแคบจะกลายเป็นตัวใหญ่กว่าจอกว้าง */
  .tl-page-head h2,
  .tl-hero-card h2 {
    font-size: 19px;
  }
  .tl-page-head .btn {
    width: 100%;
  }
  .tl-scorebox {
    justify-self: start;
  }
  .tl-step {
    grid-template-columns: 46px 1fr;
  }
  .tl-step time {
    grid-column: 2;
    text-align: left;
  }
  .tl-bars div {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .tl-bars b {
    text-align: left;
  }
}

/* Teacher development / feedback */
.devfb-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

/* ==========================================================================
   ย่อส่วนหัวของหน้าแผนพัฒนา / Feedback
   สเกลเดียวกับหน้า SAW-D05, Timeline, คลังหลักฐาน และผลนิเทศ ที่ย่อไปแล้ว
   ========================================================================== */
.devfb-head h2 {
  margin: 0;
  color: #061a3b;
  font-size: 22px;
  line-height: 1.3;
}

.devfb-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.devfb-hero {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  padding: 18px;
}

.devfb-avatar {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #0891b2);
  font-size: 20px;
  font-weight: 900;
}

/* .profile-icon-lg ตั้งไว้ 34px สำหรับกรอบ 72px เดิม พอย่อกรอบเหลือ 56px
   ไอคอนจะดูอัดจนเกือบชนขอบ ลดตามให้ได้สัดส่วนเดิม */
.devfb-avatar .profile-icon {
  font-size: 26px;
}

.devfb-hero h2 {
  margin: 0;
  color: #082a52;
  font-size: 20px;
}

.devfb-hero p {
  margin: 4px 0 8px;
  color: #64748b;
  font-size: 13px;
}

.devfb-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.devfb-tags span {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  color: #0b63c7;
  background: #eaf3ff;
  font-size: 12px;
  font-weight: 800;
}

.devfb-focus {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  min-width: 150px;
  min-height: 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: #eaf3ff;
  text-align: center;
}

.devfb-focus b {
  color: #155fc7;
  font-size: 15px;
  line-height: 1.35;
}

.devfb-focus span {
  margin-top: 0;
  color: #64748b;
  font-size: 11px;
}

.devfb-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  margin-bottom: 18px;
}

.devfb-panel,
.devfb-form {
  padding: 22px;
}

.devfb-panel h3,
.devfb-form h3 {
  margin: 0 0 16px;
  color: #082a52;
  font-size: 20px;
}

.devfb-feedback-list,
.devfb-auto-plan {
  display: grid;
  gap: 10px;
}

.devfb-feedback {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 8px 12px;
  padding: 14px;
  border: 1px solid #d5e2f0;
  border-radius: 8px;
  background: #fbfdff;
}

.devfb-feedback span {
  width: 10px;
  height: 10px;
  margin-top: 7px;
  border-radius: 50%;
  background: #2563eb;
}

.devfb-feedback b {
  color: #113d74;
}

.devfb-feedback p {
  margin: 6px 0;
  color: #475569;
  line-height: 1.65;
}

.devfb-feedback small {
  color: #64748b;
}

.devfb-empty {
  padding: 18px;
  border: 1px dashed #bcd3ef;
  border-radius: 8px;
  background: #f5f9ff;
}

.devfb-empty b {
  color: #113d74;
}

.devfb-empty p {
  margin: 8px 0 0;
  color: #64748b;
}

.devfb-auto-plan div {
  position: relative;
  padding: 14px 112px 14px 14px;
  border: 1px solid #d5e2f0;
  border-radius: 8px;
  background: #fff;
}

.devfb-auto-plan div.focus {
  border-color: #95c8ff;
  background: #f1f8ff;
  box-shadow: inset 4px 0 0 #1d6fd7;
}

.devfb-auto-plan h4 {
  margin: 0 0 6px;
  color: #17406f;
  font-size: 16px;
}

.devfb-auto-plan p {
  margin: 0;
  color: #64748b;
  line-height: 1.6;
}

.devfb-auto-plan span {
  position: absolute;
  right: 14px;
  top: 14px;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  color: #0b63c7;
  background: #eaf3ff;
  font-size: 13px;
  font-weight: 900;
}

.devfb-form-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.devfb-form-head h3 {
  margin-bottom: 6px;
}

.devfb-form-head p {
  margin: 0;
  color: #64748b;
}

.devfb-form-head span {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  font-weight: 900;
  white-space: nowrap;
}

.devfb-form-head span.ok {
  color: #047857;
  background: #dff8ec;
}

.devfb-form-head span.draft {
  color: #b45309;
  background: #fff0d5;
}

.devfb-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.devfb-form-grid .wide {
  grid-column: 1 / -1;
}

.devfb-form textarea {
  min-height: 96px;
}

.devfb-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

@media (max-width: 980px) {
  .devfb-grid,
  .devfb-form-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .devfb-head,
  .devfb-hero,
  .devfb-form-head {
    display: grid;
    grid-template-columns: 1fr;
  }
  /* ต้องเล็กกว่าค่าเริ่มต้นที่ย่อไปแล้ว (22px / 20px)
     ถ้าปล่อยไว้ที่ 23px เดิม จอแคบจะกลายเป็นตัวใหญ่กว่าจอกว้าง */
  .devfb-head h2,
  .devfb-hero h2 {
    font-size: 19px;
  }
  .devfb-head .btn,
  .devfb-actions .btn {
    width: 100%;
  }
  .devfb-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .devfb-focus {
    justify-items: start;
    min-width: 0;
    text-align: left;
  }
  .devfb-auto-plan div {
    padding-right: 14px;
  }
  .devfb-auto-plan span {
    position: static;
    margin-top: 10px;
  }
}

.filelib-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
/* ==========================================================================
   ย่อส่วนหัวของหน้าคลังหลักฐาน (หัวเรื่อง / แบนเนอร์ / การ์ด KPI / ตัวกรอง / การ์ดด้าน)
   ใช้สเกลเดียวกับหน้า SAW-D05 และ Timeline ที่ย่อไปแล้ว
   (การ์ด KPI สูงราว 104px ตัวเลข 26px หัวเรื่อง 20-22px ช่องกรอก 42px)
   ========================================================================== */
.filelib-head span {
  display: inline-flex;
  border-radius: 999px;
  background: #eaf3ff;
  color: #0f5fc4;
  font-weight: 800;
  font-size: 12px;
  padding: 5px 11px;
  margin-bottom: 8px;
}
.filelib-head h2 {
  margin: 0 0 4px;
  color: #061b3a;
  font-size: 22px;
  line-height: 1.3;
}
.filelib-head p {
  margin: 0;
  color: #64748b;
  max-width: 820px;
  font-size: 13px;
}
.filelib-head-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.filelib-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  border-radius: 10px;
  padding: 18px 24px;
  color: #fff;
  background: linear-gradient(135deg, #185fbe, #1ca4c9);
  box-shadow: 0 12px 28px rgba(24, 95, 190, 0.16);
  margin-bottom: 14px;
}
.filelib-hero h3 {
  margin: 0 0 5px;
  font-size: 20px;
  line-height: 1.3;
}
.filelib-hero p {
  margin: 0;
  opacity: 0.92;
  font-size: 13px;
}
.filelib-hero strong {
  font-size: 32px;
  line-height: 1;
}
.filelib-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
.filelib-kpis .card {
  min-height: 104px;
  padding: 16px 18px;
}
.filelib-kpis span,
.filelib-kpis em {
  display: block;
  color: #64748b;
  font-style: normal;
}
.filelib-kpis span {
  font-size: 13px;
}
.filelib-kpis b {
  display: block;
  color: #061b3a;
  font-size: 26px;
  line-height: 1;
  margin: 10px 0;
}
.filelib-kpis em {
  width: fit-content;
  border-radius: 999px;
  padding: 5px 10px;
  background: #eaf3ff;
  color: #0f5fc4;
  font-weight: 800;
  font-size: 12px;
}
.filelib-kpis em.ok {
  background: #dcfce7;
  color: #047857;
}
.filelib-kpis em.warn {
  background: #fff1d6;
  color: #b45309;
}
.filelib-filter {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) minmax(160px, 0.7fr) minmax(160px, 0.7fr) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 14px;
  padding: 16px;
  border: 1px solid #dbe7f5;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.94));
  box-shadow: 0 12px 30px rgba(15, 23, 42, .06);
}
.filelib-filter label,
.filelib-filter span {
  display: grid;
  gap: 6px;
}
.filelib-filter label > span {
  color: #1e293b;
  font-weight: 800;
  font-size: 13px;
}
.filelib-filter input,
.filelib-filter select {
  min-height: 42px;
  width: 100%;
  border: 1px solid #cfe0f3;
  border-radius: 8px;
  padding: 10px 12px;
  color: #0b2447;
  background: #fff;
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.filelib-filter input::placeholder {
  color: #94a3b8;
}
.filelib-filter select {
  padding-right: 42px;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #1e3a5f 50%),
    linear-gradient(135deg, #1e3a5f 50%, transparent 50%);
  background-position:
    calc(100% - 21px) 52%,
    calc(100% - 15px) 52%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.filelib-filter input:focus,
.filelib-filter select:focus {
  border-color: #60a5fa;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}
.filelib-filter .btn {
  min-height: 42px;
  color: #fff;
  background: linear-gradient(135deg, #1d4ed8, #0891b2);
  box-shadow: 0 10px 20px rgba(37, 99, 235, .2);
}
.filelib-domains {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.filelib-domains a {
  display: grid;
  gap: 6px;
  color: #0b2447;
  text-decoration: none;
  background: #fff;
  border: 1px solid #d6e2f1;
  border-radius: 12px;
  padding: 12px 14px;
}
.filelib-domains a.active {
  border-color: #1d7ad8;
  box-shadow: inset 4px 0 0 #1d7ad8;
}
.filelib-domains b {
  font-size: 15px;
}
.filelib-domains span {
  color: #64748b;
  font-size: 12px;
}
.filelib-domains i {
  overflow: hidden;
  display: block;
  height: 6px;
  border-radius: 999px;
  background: #edf2f7;
}
.filelib-domains em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1d69d1, #2bb8c8);
}
.filelib-list {
  padding: 20px;
}
.filelib-list-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 16px;
}
.filelib-list-head h3 {
  margin: 0 0 4px;
  color: #061b3a;
  font-size: 22px;
}
.filelib-list-head p {
  margin: 0;
  color: #64748b;
}
.filelib-list-head > span {
  flex: 0 0 auto;
  border-radius: 999px;
  background: #edf6ff;
  color: #0f5fc4;
  font-weight: 800;
  padding: 8px 12px;
}
.filelib-evidence-grid {
  display: grid;
  gap: 12px;
}
.filelib-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.42fr);
  gap: 18px;
  border: 1px solid #d6e2f1;
  border-radius: 16px;
  padding: 16px;
  background: #fff;
}
.filelib-card-main {
  min-width: 0;
}
.filelib-badge,
.filelib-status {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 800;
}
.filelib-badge {
  background: #edf6ff;
  color: #0f5fc4;
}
.filelib-card h4 {
  margin: 12px 0 8px;
  color: #0b2447;
  font-size: 18px;
}
.filelib-card p {
  margin: 0;
  color: #64748b;
}
.filelib-card-side {
  display: grid;
  align-content: start;
  justify-items: end;
  gap: 10px;
}
.filelib-status.ok {
  background: #dcfce7;
  color: #047857;
}
.filelib-status.warn {
  background: #fff1d6;
  color: #b45309;
}
.filelib-file {
  width: 100%;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 12px;
  text-align: right;
}
.filelib-file b,
.filelib-file small {
  display: block;
}
.filelib-file b {
  color: #0b2447;
  overflow-wrap: anywhere;
}
.filelib-file small {
  margin-top: 4px;
  color: #64748b;
}
.filelib-file.muted {
  background: #f8fafc;
  color: #64748b;
}
.filelib-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
  padding: 44px 18px;
  color: #64748b;
}
.filelib-empty b {
  color: #0b2447;
  font-size: 20px;
}
.filelib-empty p {
  margin: 0;
}

.res-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  margin-bottom: 18px;
}
/* ==========================================================================
   ย่อส่วนหัวของหน้าผลนิเทศ (หัวเรื่อง / การ์ดโปรไฟล์ / การ์ด KPI)
   สเกลเดียวกับหน้า SAW-D05, Timeline และคลังหลักฐานที่ย่อไปแล้ว
   ========================================================================== */
.res-head h2 {
  margin: 0 0 4px;
  color: #061b3a;
  font-size: 22px;
  line-height: 1.3;
}
.res-head p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
}
.res-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.res-profile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 18px;
  margin-bottom: 14px;
}
.res-avatar {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, #1d69d1, #22a9c9);
  font-weight: 900;
  font-size: 20px;
}
/* .profile-icon-lg ตั้งไว้ 34px สำหรับกรอบ 78px เดิม พอย่อกรอบเหลือ 56px
   ไอคอนจะดูอัดจนเกือบชนขอบ ลดตามให้ได้สัดส่วนเดิม */
.res-avatar .profile-icon {
  font-size: 26px;
}
.res-profile h3 {
  margin: 0 0 4px;
  color: #061b3a;
  font-size: 20px;
}
.res-profile p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
}
.res-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.res-tags span {
  border-radius: 999px;
  background: #eaf3ff;
  color: #0f5fc4;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 800;
}
.res-tags span.great,
.res-tags span.ok {
  background: #dcfce7;
  color: #047857;
}
.res-tags span.warn {
  background: #fff1d6;
  color: #b45309;
}
.res-tags span.muted {
  background: #eef2f7;
  color: #64748b;
}
.res-scorebox {
  min-width: 108px;
  border-radius: 14px;
  background: #eef6ff;
  color: #0f5fc4;
  text-align: center;
  padding: 14px 16px;
}
.res-scorebox b,
.res-scorebox span {
  display: block;
}
.res-scorebox b {
  font-size: 26px;
  line-height: 1;
}
.res-scorebox span {
  margin-top: 5px;
  color: #64748b;
  font-size: 11px;
}
.res-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
.res-kpis .card {
  min-height: 104px;
  padding: 16px 18px;
}
.res-kpis span,
.res-kpis em {
  display: block;
  color: #64748b;
  font-style: normal;
}
.res-kpis span {
  font-size: 13px;
}
.res-kpis b {
  display: block;
  color: #061b3a;
  font-size: 26px;
  line-height: 1;
  margin: 10px 0;
}
.res-kpis em {
  width: fit-content;
  border-radius: 999px;
  background: #edf6ff;
  color: #0f5fc4;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 800;
}
/* ระยะห่างของกล่องทั้งหน้าให้เท่ากันหมดที่ 16px
   ทั้งช่องไฟระหว่างสองคอลัมน์ (gap) และช่องไฟระหว่างแถว (margin-bottom)
   เดิมเป็น 16 กับ 18 ไม่เท่ากัน และการ์ด Feedback ที่เป็น <section> เดี่ยว ๆ
   ไม่มี margin-bottom เลย ช่องไฟจึงกระโดดไปมาเมื่อไล่อ่านลงมา */
.res-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

/* จับเฉพาะแผงที่วางเดี่ยวเต็มความกว้าง (การ์ด Feedback ล่าสุด)
   ตัวที่อยู่ในกริดเป็น <article> จึงไม่โดน — ถ้าโดนด้วยจะได้ช่องไฟเกินในกริด */
section.res-panel {
  margin-bottom: 16px;
}

.res-panel {
  padding: 18px;
}
.res-panel h3 {
  margin: 0 0 14px;
  color: #06458f;
  font-size: 18px;
}
.res-bars {
  display: grid;
  gap: 14px;
}
.res-bars div {
  display: grid;
  grid-template-columns: minmax(180px, 0.9fr) minmax(160px, 1fr) 48px;
  gap: 12px;
  align-items: center;
}
.res-bars span {
  color: #0b2447;
}
.res-bars i {
  display: block;
  overflow: hidden;
  height: 10px;
  border-radius: 999px;
  background: #edf2f7;
}
.res-bars em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1d69d1, #2bb8c8);
}
.res-bars b {
  text-align: right;
  color: #061b3a;
}
.res-note {
  margin: 16px 0 0;
  color: #64748b;
}
.res-insight {
  background: linear-gradient(180deg, #f8fbff, #ffffff);
  border-color: #bed7f5;
}
.res-insight strong {
  display: block;
  color: #061b3a;
  font-size: 18px;
  margin-bottom: 8px;
}
.res-insight p {
  color: #64748b;
  margin: 0 0 16px;
}
.res-timeline {
  display: grid;
  gap: 12px;
  position: relative;
}
/* ".res-timeline div" ของเดิมเป็น descendant selector จึงไปโดน <div> ชั้นใน
   ที่ห่อ <strong> กับ <span> ด้วย ชั้นในเลยกลายเป็นกริด 56px + 1fr เหมือนแถวนอก
   ชื่อขั้นตอนถูกบีบลงคอลัมน์ 56px "หลักฐานประกอบการนิเทศ" จึงตกเป็น 3 บรรทัด
   แก้เป็น "> div" ให้จับเฉพาะแถวนอก แล้วให้ชั้นในเป็น flex
   ดันชื่อขั้นตอนกับป้ายสถานะไปคนละฝั่งของแถวเดียวกัน
   (สำนวนเดียวกับ .res-submission-list ที่หน้านี้ใช้อยู่แล้ว) */
.res-timeline > div {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}
.res-timeline > div > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.res-timeline b {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 3px solid #cbd5e1;
  color: #64748b;
  background: #f8fafc;
}
.res-timeline .done b {
  border-color: #34d399;
  color: #047857;
  background: #ecfdf5;
}
.res-timeline strong {
  display: block;
  min-width: 0;
  color: #0b2447;
  line-height: 1.4;
}

/* สถานะเป็นป้ายสี — เหลือง = ยังรอ / เขียว = ทำแล้ว
   ทุกป้ายมีข้อความของตัวเองอยู่แล้ว สีจึงเป็นตัวช่วยกวาดตา ไม่ใช่ตัวสื่อความหมายเดียว
   (ใช้ตัวแปรสีสถานะชุดเดียวกับทั้งระบบ) */
.res-timeline span {
  display: block;
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 5px 11px;
  background: var(--st-warn-soft, #f8eee6);
  color: var(--st-warn-ink, #ab4f09);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.res-timeline .done span {
  background: var(--st-good-soft, #e8f6ed);
  color: var(--st-good-ink, #117a38);
}
.res-committee {
  display: grid;
  gap: 10px;
}
.res-committee div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid #dbe7f5;
  border-radius: 14px;
  padding: 12px;
}
.res-committee span {
  grid-row: span 2;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #f59e0b;
}
.res-committee span.ok {
  background: #10b981;
}
.res-committee b {
  color: #0b2447;
}
.res-committee small {
  color: #64748b;
}
.res-section-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.res-section-title h3 {
  margin-bottom: 6px;
}
.res-section-title p {
  margin: 0;
  color: #64748b;
}
.res-feedback {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.res-feedback article {
  border: 1px solid #dbe7f5;
  border-radius: 16px;
  padding: 16px;
  background: #fff;
}
.res-feedback span {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  background: #eaf3ff;
  color: #0f5fc4;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 800;
}
.res-feedback h4 {
  margin: 12px 0 8px;
  color: #0b2447;
}
.res-feedback p {
  color: #475569;
  margin: 0 0 10px;
}
.res-feedback small {
  color: #64748b;
}
/* กล่องว่างของ Feedback เดิม padding 34px ทำให้การ์ดสูงกว่าการ์ดอื่นมาก
   ทั้งที่ข้างในมีข้อความสองบรรทัด ช่องไฟของทั้งหน้าจึงดูไม่สม่ำเสมอ */
.res-empty {
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
  padding: 22px 16px;
  color: #64748b;
}
.res-empty b {
  color: #0b2447;
  font-size: 16px;
}
.res-empty p {
  margin: 0;
}
.res-submission-list {
  display: grid;
  gap: 12px;
}
.res-submission-list div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border: 1px solid #dbe7f5;
  border-radius: 14px;
  padding: 14px;
}
.res-submission-list b {
  color: #0b2447;
}
.res-submission-list span {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 800;
  font-size: 13px;
}
.res-submission-list span.ok {
  background: #dcfce7;
  color: #047857;
}
.res-submission-list span.warn {
  background: #fff1d6;
  color: #b45309;
}

.ctask-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  margin-bottom: 18px;
}
.ctask-head h2 {
  margin: 0 0 8px;
  color: #061b3a;
  font-size: 30px;
}
.ctask-head p {
  margin: 0;
  color: #64748b;
}
.ctask-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}
.ctask-summary .card {
  padding: 22px;
}
.ctask-summary span,
.ctask-summary em {
  display: block;
  color: #64748b;
  font-style: normal;
}
.ctask-summary b {
  display: block;
  margin: 12px 0;
  color: #061b3a;
  font-size: 34px;
  line-height: 1;
}
.ctask-summary em {
  width: fit-content;
  border-radius: 999px;
  background: #edf6ff;
  color: #0f5fc4;
  padding: 6px 10px;
  font-weight: 800;
  font-size: 13px;
}
.ctask-summary em.warn {
  background: #fff1d6;
  color: #b45309;
}
.ctask-summary em.info {
  background: #eaf3ff;
  color: #0f5fc4;
}
.ctask-summary em.ok {
  background: #dcfce7;
  color: #047857;
}
.ctask-combined-grid {
  margin-bottom: 18px;
}
.ctask-followups {
  gap: 10px;
}
.ctask-section-title {
  margin-bottom: 4px;
}
.ctask-section-title h3 {
  margin: 0;
  color: #061b3a;
  font-size: 22px;
}
.ctask-section-title p {
  margin: 6px 0 0;
  color: #64748b;
}
.ctask-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.ctask-card {
  display: grid;
  align-content: start;
  gap: 16px;
  min-height: 246px;
  padding: 22px;
}
.ctask-card h3 {
  margin: 6px 0 0;
  color: #061b3a;
  font-size: 21px;
}
.ctask-card p,
.ctask-card small {
  color: #64748b;
}
.ctask-card p {
  margin: 0;
}
.ctask-card > small {
  display: block;
  margin-top: -8px;
}
.ctask-pill {
  width: fit-content;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 900;
  font-size: 13px;
}
.ctask-pill.warn {
  background: #fff1d6;
  color: #b45309;
}
.ctask-pill.info {
  background: #eaf3ff;
  color: #0f5fc4;
}
.ctask-pill.ok {
  background: #dcfce7;
  color: #047857;
}
.ctask-progress {
  display: grid;
  gap: 8px;
}
.ctask-progress div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.ctask-progress span,
.ctask-progress small {
  color: #64748b;
}
.ctask-progress b {
  color: #0b2447;
}
.ctask-progress i {
  display: block;
  overflow: hidden;
  height: 9px;
  border-radius: 999px;
  background: #edf2f7;
}
.ctask-progress em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1d69d1, #2bb8c8);
}
.ctask-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
  padding: 44px 18px;
  color: #64748b;
}
.ctask-empty b {
  color: #061b3a;
  font-size: 20px;
}
.ctask-empty p {
  margin: 0;
}

.cd05-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.cd05-head h2 {
  margin: 0 0 8px;
  color: #061b3a;
  font-size: 30px;
}
.cd05-head p {
  margin: 0;
  color: #64748b;
}
.cd05-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.cd05-profile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(260px, .34fr);
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  padding: 18px 20px;
}
.cd05-avatar {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #1d69d1, #22a9c9);
  font-weight: 900;
  font-size: 18px;
}
.cd05-kicker {
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}
.cd05-profile h3 {
  margin: 3px 0 6px;
  color: #061b3a;
  font-size: 23px;
}
.cd05-profile p {
  margin: 0;
  color: #64748b;
}
.cd05-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.cd05-tags span {
  border-radius: 999px;
  background: #edf6ff;
  color: #0f5fc4;
  padding: 6px 10px;
  font-weight: 800;
  font-size: 12px;
}
.cd05-tags span.ok {
  background: #dcfce7;
  color: #047857;
}
.cd05-tags span.warn {
  background: #fff1d6;
  color: #b45309;
}
.cd05-teacher-switch {
  display: grid;
  gap: 8px;
}
.cd05-teacher-switch label {
  color: #0b2447;
  font-weight: 800;
}
.cd05-teacher-switch select {
  min-height: 44px;
}
.cd05-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
  padding: 22px 26px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #1d69d1, #1aa0ce);
  box-shadow: 0 18px 38px rgba(37, 99, 235, .16);
}
.cd05-hero h3 {
  margin: 0 0 6px;
  font-size: 24px;
}
.cd05-hero p {
  margin: 0;
  color: rgba(255,255,255,.88);
}
.cd05-hero strong {
  font-size: 44px;
  line-height: 1;
}
.cd05-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.cd05-kpis .card {
  padding: 18px 20px;
}
.cd05-kpis span,
.cd05-kpis em {
  display: block;
  color: #64748b;
  font-style: normal;
}
.cd05-kpis b {
  display: block;
  margin: 10px 0;
  color: #061b3a;
  font-size: 30px;
  line-height: 1;
}
.cd05-kpis em {
  width: fit-content;
  border-radius: 999px;
  background: #edf6ff;
  color: #0f5fc4;
  padding: 6px 10px;
  font-weight: 800;
  font-size: 13px;
}
.cd05-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.cd05-tabs a {
  display: grid;
  gap: 7px;
  min-height: 112px;
  padding: 16px;
  border: 1px solid #d6e2f1;
  border-radius: 16px;
  color: #0b2447;
  background: #fff;
  text-decoration: none;
}
.cd05-tabs a.active {
  color: #fff;
  border-color: #1d69d1;
  background: linear-gradient(135deg, #1d69d1, #1499c6);
}
.cd05-tabs b,
.cd05-tabs span,
.cd05-tabs em {
  display: block;
}
.cd05-tabs span {
  color: #64748b;
  font-size: 13px;
  line-height: 1.45;
}
.cd05-tabs a.active span {
  color: rgba(255,255,255,.86);
}
.cd05-tabs em {
  align-self: end;
  width: fit-content;
  border-radius: 999px;
  padding: 5px 9px;
  color: #0f5fc4;
  background: #edf6ff;
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
}
.cd05-form {
  overflow: hidden;
  padding: 0;
}
.cd05-form-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  border-bottom: 1px solid #dbe7f5;
  background: #eef6ff;
}
.cd05-form-head h3 {
  margin: 0 0 8px;
  color: #06458f;
  font-size: 24px;
}
.cd05-form-head p {
  margin: 0;
  color: #64748b;
}
.cd05-form-head span {
  flex: 0 0 auto;
  border-radius: 999px;
  background: #dbeafe;
  color: #0f5fc4;
  padding: 8px 12px;
  font-weight: 900;
}
.cd05-scale {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 16px 24px;
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
}
.cd05-scale b {
  color: #0b2447;
  margin-right: 4px;
}
.cd05-scale span {
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 800;
}
.cd05-item {
  display: grid;
  grid-template-columns: minmax(280px, .95fr) minmax(280px, 1fr) minmax(260px, .72fr);
  gap: 18px;
  padding: 22px 24px;
  border-bottom: 1px solid #e2e8f0;
}
.cd05-item-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-content: start;
}
.cd05-no {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  color: #0f5fc4;
  background: #eaf3ff;
  font-weight: 900;
}
.cd05-item h4 {
  margin: 0 0 12px;
  color: #061b3a;
  font-size: 18px;
  line-height: 1.55;
}
.cd05-item-state {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 900;
}
.cd05-item-state.ok {
  background: #dcfce7;
  color: #047857;
}
.cd05-item-state.warn {
  background: #fff1d6;
  color: #b45309;
}
.cd05-evidence-box {
  display: grid;
  align-content: start;
  gap: 10px;
}
.cd05-evidence-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #0b2447;
}
.cd05-evidence-head span {
  color: #64748b;
  font-size: 13px;
}
.cd05-muted {
  margin: 0;
  border: 1px dashed #c9d8ea;
  border-radius: 14px;
  color: #64748b;
  background: #f8fbff;
  padding: 14px;
}
.cd05-evidence-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border: 1px solid #dbe7f5;
  border-radius: 14px;
  background: #fff;
  padding: 12px;
}
.cd05-evidence-item > span {
  width: 12px;
  height: 12px;
  margin-top: 6px;
  border-radius: 999px;
  background: #1d69d1;
}
.cd05-evidence-item b,
.cd05-evidence-item a,
.cd05-evidence-item small {
  display: block;
}
.cd05-evidence-item b {
  color: #0b2447;
}
.cd05-evidence-item a {
  margin-top: 5px;
  color: #0f5fc4;
  overflow-wrap: anywhere;
}
.cd05-evidence-item small {
  margin-top: 5px;
  color: #b45309;
}
.cd05-score-box {
  display: grid;
  align-content: start;
  gap: 10px;
}
.cd05-score-box > b,
.cd05-note-label {
  color: #0b2447;
  font-weight: 900;
}
.cd05-score-options {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.cd05-score-options label {
  cursor: pointer;
}
.cd05-score-options input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.cd05-score-options span {
  display: grid;
  place-items: center;
  min-height: 42px;
  border: 1px solid #cfe0f2;
  border-radius: 12px;
  color: #0b2447;
  background: #fff;
  font-weight: 900;
}
.cd05-score-options label.checked span,
.cd05-score-options input:checked + span {
  color: #fff;
  border-color: #1d69d1;
  background: linear-gradient(135deg, #1d69d1, #1597c5);
  box-shadow: 0 10px 22px rgba(37, 99, 235, .18);
}
.cd05-score-box textarea {
  min-height: 96px;
  resize: vertical;
}
.cd05-savebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 18px 24px;
  background: #f8fbff;
}
.cd05-savebar b,
.cd05-savebar span {
  display: block;
}
.cd05-savebar b {
  color: #061b3a;
}
.cd05-savebar span {
  margin-top: 4px;
  color: #64748b;
}
.cd05-signature-panel {
  display: grid;
  gap: 14px;
  margin: 18px 24px 0;
  padding: 18px;
  border: 1px solid #d7e4f4;
  border-radius: 18px;
  background: #f8fbff;
}
.cd05-signature-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.cd05-signature-head h4 {
  margin: 0 0 6px;
  color: #061b3a;
  font-size: 20px;
}
.cd05-signature-head p,
.cd05-signature-actions span,
.cd05-signature-preview span {
  margin: 0;
  color: #64748b;
}
.cd05-signature-status {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 900;
}
.cd05-signature-status.ok {
  color: #047857;
  background: #dcfce7;
}
.cd05-signature-status.ready {
  color: #0f5fc4;
  background: #eaf3ff;
}
.cd05-signature-status.warn {
  color: #b45309;
  background: #fff1d6;
}
.cd05-signature-pad-wrap {
  padding: 10px;
  border: 1px dashed #9fc1e9;
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(219,234,254,.42) 1px, transparent 1px),
    linear-gradient(rgba(219,234,254,.42) 1px, transparent 1px),
    #fff;
  background-size: 28px 28px;
}
.cd05-signature-canvas {
  display: block;
  width: 100%;
  height: 190px;
  border-radius: 12px;
  background: rgba(255,255,255,.9);
  cursor: crosshair;
  touch-action: none;
}
.cd05-signature-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.cd05-signature-preview {
  display: grid;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
}
.cd05-signature-preview img {
  display: block;
  max-width: min(360px, 100%);
  max-height: 110px;
  border: 1px solid #d7e4f4;
  border-radius: 14px;
  background: #fff;
  padding: 10px;
}
.cd05-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 48px 20px;
  text-align: center;
}
.cd05-empty b {
  color: #061b3a;
  font-size: 22px;
}
.cd05-empty p {
  margin: 0;
  color: #64748b;
}

.evv-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.evv-head h2 {
  margin: 0 0 8px;
  color: #061b3a;
  font-size: 30px;
}
.evv-head p {
  margin: 0;
  color: #64748b;
}
.evv-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}
.evv-kpis .card {
  min-height: 178px;
  padding: 22px;
}
.evv-kpis span,
.evv-kpis em {
  display: block;
  color: #64748b;
  font-style: normal;
}
.evv-kpis b {
  display: block;
  margin: 24px 0 16px;
  color: #061b3a;
  font-size: 38px;
  line-height: 1;
}
.evv-kpis em {
  width: fit-content;
  border-radius: 999px;
  background: #edf6ff;
  color: #0f5fc4;
  padding: 7px 11px;
  font-weight: 900;
  font-size: 13px;
}
.evv-kpis em.ok {
  background: #dcfce7;
  color: #047857;
}
.evv-kpis em.warn {
  background: #fff1d6;
  color: #b45309;
}
.evv-kpis em.bad {
  background: #fee2e2;
  color: #b91c1c;
}
.evv-empty {
  padding: 24px;
  color: #64748b;
  font-size: 16px;
}
.evv-empty p {
  margin: 0;
}
.evv-list {
  padding: 20px;
}
.evv-list-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 12px;
}
.evv-list-head h3 {
  margin: 0 0 6px;
  color: #061b3a;
  font-size: 22px;
}
.evv-list-head p {
  margin: 0;
  color: #64748b;
}
.evv-list-head > span {
  border-radius: 999px;
  background: #edf6ff;
  color: #0f5fc4;
  padding: 8px 12px;
  font-weight: 900;
}
.evv-row {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(240px, .34fr) minmax(300px, .42fr);
  gap: 16px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid #e2e8f0;
}
.evv-row:last-child {
  border-bottom: 0;
}
.evv-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
}
.evv-dot {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: #eaf3ff;
  position: relative;
}
.evv-dot::after {
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: 999px;
  background: #0b2447;
}
.evv-dot.ok::after {
  background: #047857;
}
.evv-dot.warn::after {
  background: #b45309;
}
.evv-dot.bad::after {
  background: #b91c1c;
}
.evv-titleline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.evv-titleline b {
  color: #061b3a;
  font-size: 17px;
}
.evv-titleline em {
  border-radius: 999px;
  padding: 6px 10px;
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
}
.evv-titleline em.info {
  color: #0f5fc4;
  background: #edf6ff;
}
.evv-titleline em.ok {
  color: #047857;
  background: #dcfce7;
}
.evv-titleline em.warn {
  color: #b45309;
  background: #fff1d6;
}
.evv-titleline em.bad {
  color: #b91c1c;
  background: #fee2e2;
}
.evv-main h4 {
  margin: 10px 0 6px;
  color: #0b2447;
  font-size: 16px;
  line-height: 1.5;
}
.evv-main p,
.evv-main small {
  display: block;
  margin: 0;
  color: #64748b;
  line-height: 1.55;
}
.evv-main small {
  margin-top: 8px;
}
.evv-file {
  display: grid;
  gap: 6px;
  border: 1px solid #dbe7f5;
  border-radius: 14px;
  padding: 14px;
  background: #f8fbff;
}
.evv-file span {
  color: #64748b;
  font-size: 13px;
}
.evv-file a,
.evv-file b {
  color: #0f5fc4;
  font-weight: 900;
  overflow-wrap: anywhere;
}
.evv-file.missing {
  background: #fff9ed;
  border-color: #fde4b2;
}
.evv-file.missing b {
  color: #b45309;
}
.evv-control {
  display: grid;
  gap: 10px;
}
.evv-control label {
  color: #0b2447;
  font-weight: 900;
}
.evv-control select,
.evv-control textarea {
  width: 100%;
}
.evv-control textarea {
  min-height: 78px;
  resize: vertical;
}
.evv-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.evv-actions small {
  color: #64748b;
}

.cfollow-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.cfollow-head h2 {
  margin: 0 0 8px;
  color: #061b3a;
  font-size: 30px;
}
.cfollow-head p {
  margin: 0;
  color: #64748b;
}
.cfollow-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}
.cfollow-summary .card {
  min-height: 150px;
  padding: 20px;
}
.cfollow-summary span,
.cfollow-summary em {
  display: block;
  color: #64748b;
  font-style: normal;
}
.cfollow-summary b {
  display: block;
  margin: 14px 0 10px;
  color: #061b3a;
  font-size: 28px;
  line-height: 1.2;
}
.cfollow-summary em {
  width: fit-content;
  border-radius: 999px;
  background: #edf6ff;
  color: #0f5fc4;
  padding: 6px 10px;
  font-weight: 900;
  font-size: 13px;
}
.cfollow-summary em.ok {
  background: #dcfce7;
  color: #047857;
}
.cfollow-summary em.warn {
  background: #fff1d6;
  color: #b45309;
}
.cfollow-teacher {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(220px, .5fr) minmax(220px, .5fr);
  gap: 16px;
  margin-bottom: 18px;
  padding: 22px;
  border: 1px solid #d9e6f5;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(15, 61, 103, .06);
}
.cfollow-teacher form,
.cfollow-teacher div {
  display: grid;
  gap: 8px;
  align-content: start;
}
.cfollow-teacher label,
.cfollow-teacher span {
  color: #0b2447;
  font-weight: 900;
}
.cfollow-teacher b {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid #d7e5f4;
  border-radius: 12px;
  color: #061b3a;
  font-size: 18px;
  background: #f8fbff;
}
.cfollow-teacher small,
.master-source {
  color: #64748b;
  font-size: 13px;
}
.cfollow-teacher select {
  width: 100%;
  min-height: 54px;
  padding: 0 46px 0 14px;
  border: 1px solid #cfe0f2;
  border-radius: 12px;
  color: #092b55;
  background:
    linear-gradient(45deg, transparent 50%, #0b2f5f 50%) calc(100% - 21px) 50% / 6px 6px no-repeat,
    linear-gradient(135deg, #0b2f5f 50%, transparent 50%) calc(100% - 16px) 50% / 6px 6px no-repeat,
    #fff;
  box-shadow: 0 8px 20px rgba(15, 61, 103, .04);
  appearance: none;
  -webkit-appearance: none;
}
.cfollow-teacher select:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 4px rgba(96, 165, 250, .18);
  outline: none;
}
.master-source::before {
  content: "เชื่อมข้อมูล";
  display: inline-flex;
  margin-right: 6px;
  border-radius: 999px;
  background: #edf6ff;
  color: #0f5fc4;
  padding: 3px 7px;
  font-weight: 900;
  font-size: 12px;
}
.cfollow-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.cfollow-tabs a {
  border: 1px solid #cbd9eb;
  border-radius: 11px;
  background: #fff;
  color: #355574;
  padding: 11px 14px;
  text-decoration: none;
  font-weight: 900;
}
.cfollow-tabs a.active {
  color: #fff;
  border-color: #155ec7;
  background: linear-gradient(135deg, #155ec7, #168ecf);
  box-shadow: 0 6px 18px rgba(21, 94, 199, .16);
}
.cfollow-panel {
  display: none;
  padding: 0;
  overflow: hidden;
}
.cfollow-panel.active {
  display: block;
}
.cfollow-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  border-bottom: 1px solid #dbe7f5;
  background: #f7faff;
}
.cfollow-panel-head h3 {
  margin: 0 0 6px;
  color: #123f78;
  font-size: 24px;
}
.cfollow-panel-head p {
  margin: 0;
  color: #64748b;
}
.cfollow-form {
  padding: 0 22px 22px;
}
.follow-row-list {
  display: flex;
  flex-direction: column;
}
.follow-row {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid #e2e8f0;
}
.follow-label {
  color: #23476f;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.45;
  padding-top: 10px;
}
.follow-control {
  display: grid;
  gap: 7px;
}
.follow-control input,
.follow-control select,
.follow-control textarea {
  width: 100%;
  border: 1px solid #cfe0f2;
  border-radius: 12px;
  background: #fff;
  color: #0b2447;
  padding: 12px;
}
.follow-control input[readonly] {
  background: #f8fbff;
}
.follow-control textarea {
  min-height: 104px;
  resize: vertical;
}
.cfollow-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 18px;
}
.cfollow-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
  padding: 44px 18px;
}
.cfollow-empty b {
  color: #061b3a;
  font-size: 22px;
}
.cfollow-empty p {
  margin: 0;
  color: #64748b;
}

@media (max-width: 1180px) {
  .evv-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .evv-row {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .evv-head,
  .evv-list-head,
  .evv-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .evv-head h2 {
    font-size: 24px;
  }
  .evv-head .btn,
  .evv-actions .btn {
    width: 100%;
  }
  .evv-kpis {
    grid-template-columns: 1fr;
  }
  .evv-row {
    padding: 14px 0;
  }
  .evv-main {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1050px) {
  .cfollow-summary,
  .cfollow-teacher {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .cfollow-head,
  .cfollow-panel-head,
  .follow-row,
  .cfollow-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .cfollow-head h2,
  .cfollow-panel-head h3 {
    font-size: 24px;
  }
  .cfollow-head .btn,
  .cfollow-actions .btn {
    width: 100%;
  }
  .cfollow-summary,
  .cfollow-teacher {
    grid-template-columns: 1fr;
  }
  .follow-label {
    padding-top: 0;
  }
}

@media (max-width: 1280px) {
  .cd05-item {
    grid-template-columns: 1fr;
  }
  .cd05-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 980px) {
  .cd05-profile,
  .cd05-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cd05-profile {
    align-items: start;
  }
}
@media (max-width: 720px) {
  .cd05-head,
  .cd05-hero,
  .cd05-form-head,
  .cd05-savebar {
    display: grid;
    grid-template-columns: 1fr;
  }
  .cd05-head h2,
  .cd05-hero h3,
  .cd05-form-head h3 {
    font-size: 23px;
  }
  .cd05-actions,
  .cd05-actions .btn,
  .cd05-savebar .btn {
    width: 100%;
  }
  .cd05-signature-panel {
    margin: 14px 14px 0;
    padding: 14px;
  }
  .cd05-signature-head {
    display: grid;
  }
  .cd05-signature-canvas {
    height: 150px;
  }
  .cd05-profile,
  .cd05-kpis,
  .cd05-tabs {
    grid-template-columns: 1fr;
  }
  .cd05-hero strong {
    font-size: 42px;
  }
  .cd05-item {
    padding: 18px 16px;
  }
  .cd05-item-main {
    grid-template-columns: 1fr;
  }
  .cd05-score-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1200px) {
  .ctask-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ctask-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .ctask-head,
  .ctask-progress div {
    display: grid;
    grid-template-columns: 1fr;
  }
  .ctask-head h2 {
    font-size: 24px;
  }
  .ctask-grid,
  .ctask-summary {
    grid-template-columns: 1fr;
  }
  .ctask-card .btn {
    width: 100%;
  }
}

@media (max-width: 1100px) {
  .res-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .res-grid,
  .res-feedback {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .res-head,
  .res-profile {
    display: grid;
    grid-template-columns: 1fr;
  }
  .res-actions {
    justify-content: stretch;
  }
  .res-actions .btn {
    width: 100%;
  }
  /* ต้องเล็กกว่าค่าเริ่มต้นที่ย่อไปแล้ว (22px / 20px)
     ถ้าปล่อยไว้ที่ 24px เดิม จอแคบจะกลายเป็นตัวใหญ่กว่าจอกว้าง */
  .res-head h2,
  .res-profile h3 {
    font-size: 19px;
  }
  .res-scorebox {
    width: 100%;
  }
  .res-kpis {
    grid-template-columns: 1fr;
  }
  .res-bars div {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .res-bars b {
    text-align: left;
  }
  .res-submission-list div {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 1100px) {
  .filelib-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .filelib-domains {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .filelib-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .filelib-head,
  .filelib-hero,
  .filelib-list-head,
  .filelib-card {
    display: grid;
    grid-template-columns: 1fr;
  }
  .filelib-head-actions,
  .filelib-card-side {
    justify-content: stretch;
    justify-items: stretch;
  }
  /* ต้องเล็กกว่าค่าเริ่มต้นที่ย่อไปแล้ว (22px / 20px / 32px)
     ถ้าปล่อยค่าเดิม จอแคบจะกลายเป็นตัวใหญ่กว่าจอกว้าง */
  .filelib-head h2 {
    font-size: 19px;
  }
  .filelib-hero {
    padding: 16px 18px;
  }
  .filelib-hero h3 {
    font-size: 18px;
  }
  .filelib-hero strong {
    font-size: 28px;
  }
  .filelib-kpis,
  .filelib-domains,
  .filelib-filter {
    grid-template-columns: 1fr;
  }
  .filelib-filter .btn,
  .filelib-head-actions .btn,
  .filelib-card-side .btn {
    width: 100%;
  }
  .filelib-file {
    text-align: left;
  }
}

.pre-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.pre-head h2 {
  margin: 0;
  color: #082a52;
  font-size: 28px;
}

.pre-head p {
  margin: 8px 0 0;
  color: var(--muted);
}

.pre-summary {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
  padding: 22px;
}

.pre-summary span {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

.pre-summary b {
  display: block;
  margin-top: 6px;
  color: #082a52;
  font-size: 20px;
}

.pre-summary small {
  display: block;
  margin-top: 6px;
  color: #64748b;
}

/* align-content: center สำคัญมาก — ถ้าไม่ใส่ กริดสูงคงที่ 116px ที่มีลูก 2 ตัว
   จะยืดแถวทั้งสองให้เต็มความสูง (ค่าเริ่มต้นคือ stretch) กลายเป็นแถวละ ~58px
   แล้ว place-items: center ก็ไปจัดกึ่งกลางของ "แต่ละแถว" ตัวเลขกับคำบรรยาย
   จึงถูกดันห่างกันคนละมุม แทนที่จะอยู่ชิดกันตรงกลางวง */
.pre-ring {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: conic-gradient(#1d6bdb var(--p), #eaf0f7 0);
  position: relative;
}

.pre-ring::after {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: inherit;
  background: #fff;
}

.pre-ring b,
.pre-ring span {
  position: relative;
  z-index: 1;
}

.pre-ring b {
  margin: 0;
  color: #155fc7;
  font-size: 24px;
  line-height: 1;
}

.pre-ring span {
  color: var(--muted);
  font-size: 12px;
}

.pre-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.pre-tabs a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 74px;
  padding: 14px;
  border: 1px solid #d8e5f2;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .04);
}

.pre-tabs a.active {
  border-color: #83b9f3;
  box-shadow: 0 0 0 4px #ddecff;
}

.pre-tabs b {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  color: #155fc7;
  background: #eaf3ff;
}

.pre-tabs span {
  color: #0f2b52;
  font-weight: 900;
}

.pre-tabs em {
  padding: 6px 10px;
  border-radius: 999px;
  color: #b45309;
  background: #fff0d5;
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.pre-tabs .done em {
  color: #047857;
  background: #dff8ec;
}

.pre-layout {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.pre-progress {
  position: sticky;
  top: 92px;
  padding: 20px;
}

.pre-progress h3 {
  margin: 0 0 14px;
  color: #082a52;
}

.pre-progress > a {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 13px 0;
  border-bottom: 1px solid #e5edf6;
}

.pre-progress > a span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.pre-progress > a b {
  color: #155fc7;
}

.pre-progress > a small,
.pre-progress > a strong {
  color: #64748b;
  font-size: 13px;
}

.pre-progress > a em,
.pre-form-actions em {
  display: block;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #eaf0f7;
}

.pre-progress > a i,
.pre-form-actions i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1e63d5, #2fb7a3);
}

.pre-next {
  margin-top: 18px;
  padding: 16px;
  border-radius: 16px;
  background: #f0f7ff;
}

.pre-next b {
  color: #0d4c9e;
}

.pre-next p {
  margin: 8px 0 14px;
  color: #405a79;
  line-height: 1.6;
}

.pre-form-stack {
  display: grid;
  gap: 18px;
}

.pre-form-card {
  display: none;
  padding: 22px;
}

.pre-form-card.active {
  display: block;
}

.pre-form-title {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5edf6;
}

.pre-form-title h3 {
  margin: 0;
  color: #082a52;
  font-size: 22px;
}

.pre-form-title p {
  margin: 8px 0 0;
  color: var(--muted);
}

.pre-form-title span {
  align-self: start;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.pre-form-title .ok {
  color: #047857;
  background: #dff8ec;
}

.pre-form-title .warn {
  color: #b45309;
  background: #fff0d5;
}

.pre-master-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.pre-master-grid div {
  padding: 14px;
  border: 1px solid #d8e5f2;
  border-radius: 14px;
  background: #f8fbff;
}

.pre-master-grid span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.pre-master-grid b {
  display: block;
  margin-top: 5px;
  color: #0f2b52;
}

.pre-choice-grid,
.pre-field-grid {
  display: grid;
  gap: 14px;
}

/* SAW-D01 เรียง "ข้อละแถว"
   9 ข้อแรกเป็นคำถามสั้น + ตัวเลือกสถานะการปฏิบัติ เดิมวาง 3 คอลัมน์
   ต้องกวาดสายตาข้ามคอลัมน์และเดาเองว่าช่องเลือกไหนคู่กับหัวข้อไหน
   เปลี่ยนเป็นแถวละข้อ หัวข้อซ้าย ช่องเลือกขวา อ่านไล่ลงมาทีละข้อได้ตรง ๆ */
.pre-choice-grid {
  grid-template-columns: 1fr;
  gap: 12px;
}

/* เฉพาะข้อที่เป็นตัวเลือก — ข้อ 10 เป็นต้นไปเป็น textarea (.pre-field-wide)
   ต้องคงรูปแบบ "หัวข้อบน ช่องกรอกล่าง" ไว้เหมือนเดิม */
.pre-choice-grid > .pre-field:not(.pre-field-wide) {
  display: grid;
  /* ขั้นต่ำ 220px เพราะข้อความยาวสุดในช่องคือ "เลือกสถานะการปฏิบัติ"
     บวกที่ว่างของลูกศร dropdown อีก 42px ถ้าแคบกว่านี้ตัวหนังสือจะโดนตัด */
  grid-template-columns: minmax(0, 1fr) clamp(220px, 28%, 300px);
  align-items: center;
  gap: 8px 18px;
  padding: 12px 16px;
  border: 1px solid #e3edf8;
  border-radius: 12px;
  background: #fbfdff;
}

/* min-height: 42px ของ .pre-field label มีไว้ดันหัวข้อ 1 บรรทัดกับ 2 บรรทัด
   ให้สูงเท่ากันตอนวางเป็นคอลัมน์ พอเป็นแถวละข้อแล้วมันเหลือเป็นช่องว่างเปล่า */
.pre-choice-grid > .pre-field:not(.pre-field-wide) label {
  min-height: 0;
  margin: 0;
}

.pre-field-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pre-field {
  margin: 0;
}

.pre-field label {
  min-height: 42px;
  color: #0f2b52;
  line-height: 1.45;
}

.pre-field select,
.pre-field textarea {
  width: 100%;
  border: 1px solid #cfe0f2;
  border-radius: 12px;
  color: #0f2f5f;
  background: #fff;
}

.pre-field select {
  min-height: 48px;
  padding: 0 12px;
}

.pre-field textarea {
  min-height: 112px;
  padding: 12px;
  resize: vertical;
}

.pre-field-wide {
  grid-column: 1 / -1;
}

.pre-baseline-table {
  display: grid;
  overflow: hidden;
  border: 1px solid #d8e5f2;
  border-radius: 14px;
  background: #fff;
}

.pre-baseline-head,
.pre-baseline-row {
  display: grid;
  grid-template-columns: minmax(170px, .75fr) repeat(3, minmax(170px, 1fr));
  gap: 0;
}

.pre-baseline-head {
  color: #0f2b52;
  background: #f2f7fd;
  font-weight: 900;
}

.pre-baseline-head span,
.pre-baseline-row b,
.pre-baseline-row textarea {
  padding: 12px;
  border-right: 1px solid #d8e5f2;
  border-bottom: 1px solid #d8e5f2;
}

.pre-baseline-head span:last-child,
.pre-baseline-row textarea:last-child {
  border-right: 0;
}

.pre-baseline-row:last-child b,
.pre-baseline-row:last-child textarea {
  border-bottom: 0;
}

.pre-baseline-row b {
  color: #0f2b52;
  line-height: 1.45;
}

.pre-baseline-row textarea {
  min-height: 92px;
  border-top: 0;
  border-left: 0;
  border-radius: 0;
  resize: vertical;
}

.pre-tail-fields {
  margin-top: 16px;
}

.pre-form-actions {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #e5edf6;
}

.pre-form-actions > div {
  display: grid;
  gap: 8px;
}

.pre-form-actions span {
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 1180px) {
  /* .pre-choice-grid ถอดออกจากรายการนี้แล้ว — ตอนนี้เป็นข้อละแถวทุกขนาดจอ */
  .pre-tabs,
  .pre-field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pre-layout {
    grid-template-columns: 1fr;
  }

  .pre-progress {
    position: static;
  }
}

@media (max-width: 720px) {
  .pre-head,
  .pre-summary,
  .pre-tabs,
  .pre-master-grid,
  .pre-choice-grid,
  .pre-field-grid,
  .pre-form-title,
  .pre-form-actions {
    grid-template-columns: 1fr;
  }

  /* จอแคบ วางหัวข้อกับช่องเลือกคู่กันไม่พอ ให้กลับไปซ้อนบน-ล่างภายในข้อเดิม */
  .pre-choice-grid > .pre-field:not(.pre-field-wide) {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .pre-choice-grid > .pre-field:not(.pre-field-wide) label {
    margin-bottom: 2px;
  }

  .pre-head {
    display: grid;
    align-items: start;
  }

  .pre-head h2 {
    font-size: 23px;
  }

  .pre-summary {
    justify-items: start;
  }

  .pre-tabs a {
    grid-template-columns: auto 1fr;
  }

  .pre-tabs em {
    grid-column: 2;
    justify-self: start;
  }

  .pre-form-card {
    padding: 16px;
  }

  .pre-form-title h3 {
    font-size: 20px;
  }

  .pre-form-actions .btn,
  .pre-next .btn,
  .pre-head .btn {
    width: 100%;
  }

  .pre-baseline-head {
    display: none;
  }

  .pre-baseline-row {
    grid-template-columns: 1fr;
    padding: 12px;
    border-bottom: 1px solid #d8e5f2;
  }

  .pre-baseline-row:last-child {
    border-bottom: 0;
  }

  .pre-baseline-row b,
  .pre-baseline-row textarea {
    border: 0;
    padding: 8px 0;
  }

  .pre-baseline-row textarea {
    min-height: 90px;
    margin-top: 8px;
    padding: 12px;
    border: 1px solid #d8e5f2;
    border-radius: 12px;
  }
}

.cnotify-head {
  margin-bottom: 20px;
}

.cnotify-head h2 {
  margin: 0;
  color: #061b3d;
  font-size: 28px;
  font-weight: 900;
}

.cnotify-head p {
  margin: 8px 0 0;
  color: #657a96;
  font-size: 16px;
}

.cnotify-list {
  display: grid;
  gap: 10px;
  padding: 20px;
  border-radius: 18px;
}

.cnotify-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 76px;
  padding: 14px 18px 14px 14px;
  border: 1px solid #d8e5f2;
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.cnotify-row:hover {
  border-color: #b8d4f5;
  box-shadow: 0 16px 36px rgba(31, 93, 153, .10);
  transform: translateY(-1px);
}

.cnotify-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: #0b2c55;
  background: #eef5ff;
}

.cnotify-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cnotify-copy {
  min-width: 0;
}

.cnotify-copy b {
  display: block;
  color: #0b376b;
  font-size: 16px;
  font-weight: 900;
}

.cnotify-copy small {
  display: block;
  margin-top: 4px;
  color: #657a96;
  font-size: 13px;
  line-height: 1.45;
}

.cnotify-badge {
  justify-self: end;
  padding: 9px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.cnotify-badge.due {
  color: #b45309;
  background: #fff0d5;
}

.cnotify-badge.urgent {
  color: #d11f1f;
  background: #ffe8e8;
}

.cnotify-badge.done {
  color: #047857;
  background: #ddf8eb;
}

.cnotify-empty {
  padding: 22px;
  color: #657a96;
  border-radius: 18px;
}

@media (max-width: 720px) {
  .cnotify-head h2 {
    font-size: 24px;
  }

  .cnotify-list {
    padding: 14px;
  }

  .cnotify-row {
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: start;
    padding: 14px;
  }

  .cnotify-badge {
    grid-column: 2;
    justify-self: start;
  }
}


/* ==========================================================================
   Smart Supervision — Dashboard Color System  (v1, 2026-08-19)
   --------------------------------------------------------------------------
   ปรับเฉพาะ "สี" ของแดชบอร์ด 4 บทบาท ไม่แตะ layout / ขนาด / ตำแหน่ง
     - admin/dashboard.php
     - director/dashboard.php
     - committee/tasks.php + committee/notifications.php
     - teacher/dashboard.php

   ชุดสีผ่านการตรวจด้วย validator ของ dataviz แล้วทุกข้อ (light, surface #ffffff)
     categorical 5 สี : #2563eb,#0d9488,#6b21a8,#ea580c,#9d174d
       · all-pairs CVD ΔE 12.3  (เกณฑ์ >= 8)
       · all-pairs normal ΔE 18.1 (เกณฑ์ >= 15)
       · contrast ทุกสี >= 3:1 บนพื้นขาว
     ordinal blue ramp  : #86b6ef→#104281  (monotone L, ΔL >= .06, light end 2.11:1)
     ordinal severity   : #fb923c→#7c2d12  (monotone L, ΔL >= .06, light end 2.26:1)

   หลักการที่ใช้
     1. สี categorical = "ตัวตน" ของหมวด  → ใช้กับ KPI card และคะแนน 5 ด้าน
     2. สี sequential  = "ปริมาณ/ลำดับ"   → ใช้กับ progress bar และ Top-5 ประเด็น
     3. สี status      = "สถานะ" (ดี/เตือน/แย่) เป็นสีสงวน ไม่เอาไปใช้เป็นสีหมวด
     4. ทุกจุดที่ใช้สี มีข้อความกำกับเสมอ — สีไม่เคยเป็นตัวสื่อความหมายเพียงลำพัง
   ========================================================================== */

:root {
  /* --- categorical: ใช้แทน "หมวด/ด้าน" ที่ต่างกัน --- */
  --viz-1: #2563eb;  --viz-1-soft: #e9effd;  --viz-1-ink: #235edf;  /* ฟ้า   */
  --viz-2: #0d9488;  --viz-2-soft: #e7f4f3;  --viz-2-ink: #0a766d;  /* เขียว */
  --viz-3: #6b21a8;  --viz-3-soft: #f0e9f6;  --viz-3-ink: #6b21a8;  /* ม่วง  */
  --viz-4: #ea580c;  --viz-4-soft: #fdeee7;  --viz-4-ink: #bb460a;  /* ส้ม   */
  --viz-5: #9d174d;  --viz-5-soft: #f5e8ed;  --viz-5-ink: #9d174d;  /* ชมพู  */

  /* --- status: สีสงวน ใช้คู่กับข้อความเสมอ --- */
  --st-good: #16a34a;  --st-good-soft: #e8f6ed;  --st-good-ink: #117a38;
  --st-warn: #b45309;  --st-warn-soft: #f8eee6;  --st-warn-ink: #ab4f09;
  --st-bad:  #dc2626;  --st-bad-soft:  #fce9e9;  --st-bad-ink:  #d12424;

  /* --- sequential (ฟ้า) : ใช้กับความคืบหน้า/ลำดับขั้น --- */
  --seq-1: #86b6ef; --seq-2: #5598e7; --seq-3: #2a78d6; --seq-4: #1c5cab; --seq-5: #104281;

  /* --- ordinal severity (ส้ม→แดงเข้ม) : ใช้กับระดับความรุนแรงของประเด็น --- */
  --sev-1: #fb923c; --sev-2: #ea580c; --sev-3: #c2410c; --sev-4: #9a3412; --sev-5: #7c2d12;

  /* --- chart chrome --- */
  --viz-grid: #e5e9f0;
  --viz-axis: #94a3b8;
  --viz-label: #475569;
}

/* ==========================================================================
   1) ระบบ "แถบสีหัวการ์ด" ที่ใช้ร่วมกันทุกบทบาท
   KPI card แต่ละใบได้สีประจำตัว + แถบบนการ์ด เพื่อให้กวาดตาแยกใบได้เร็ว
   (ทุกใบมีข้อความกำกับของตัวเองอยู่แล้ว สีจึงเป็นตัวช่วย ไม่ใช่ตัวสื่อความหมาย)
   ========================================================================== */
.stat-card,
.exec-kpi-card,
.teacher-kpi,
.ctask-summary .card {
  position: relative;
  overflow: hidden;
}

.stat-card::after,
.exec-kpi-card::after,
.teacher-kpi::after,
.ctask-summary .card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  border-radius: 18px 18px 0 0;
  background: var(--kpi-accent, var(--viz-1));
}

.stat-card:nth-child(1),
.exec-kpi-card:nth-child(1),
.teacher-kpi:nth-child(1),
.ctask-summary .card:nth-child(1) { --kpi-accent: var(--viz-1); --kpi-soft: var(--viz-1-soft); --kpi-ink: var(--viz-1-ink); }

.stat-card:nth-child(2),
.exec-kpi-card:nth-child(2),
.teacher-kpi:nth-child(2),
.ctask-summary .card:nth-child(2) { --kpi-accent: var(--viz-2); --kpi-soft: var(--viz-2-soft); --kpi-ink: var(--viz-2-ink); }

.stat-card:nth-child(3),
.exec-kpi-card:nth-child(3),
.teacher-kpi:nth-child(3),
.ctask-summary .card:nth-child(3) { --kpi-accent: var(--viz-3); --kpi-soft: var(--viz-3-soft); --kpi-ink: var(--viz-3-ink); }

.stat-card:nth-child(4),
.exec-kpi-card:nth-child(4),
.teacher-kpi:nth-child(4),
.ctask-summary .card:nth-child(4) { --kpi-accent: var(--viz-4); --kpi-soft: var(--viz-4-soft); --kpi-ink: var(--viz-4-ink); }

.stat-card:nth-child(5),
.exec-kpi-card:nth-child(5),
.teacher-kpi:nth-child(5),
.ctask-summary .card:nth-child(5) { --kpi-accent: var(--viz-5); --kpi-soft: var(--viz-5-soft); --kpi-ink: var(--viz-5-ink); }

/* ==========================================================================
   2) ADMIN DASHBOARD
   ========================================================================== */
.dashboard-hero {
  background: linear-gradient(135deg, #1d4ed8 0%, #4338ca 48%, #6b21a8 100%);
  box-shadow: 0 24px 50px rgba(67, 56, 202, .26);
}
.dashboard-hero p { color: #dbeafe; }
.hero-score span { color: #dbeafe; }

/* ค่าตัวเลขหลักของการ์ดใช้สีประจำการ์ด ให้ตาจับได้ทันทีว่าอ่านใบไหนอยู่ */
.stat-card b { color: var(--kpi-ink, var(--text)); }
.stat-card em,
.stat-card:nth-child(2) em,
.stat-card:nth-child(3) em,
.stat-card:nth-child(4) em {
  color: var(--kpi-ink, var(--viz-1-ink));
  background: var(--kpi-soft, var(--viz-1-soft));
}

/* ความคืบหน้า 5 ขั้น = ลำดับขั้นของกระบวนการเดียว → ไล่เฉดฟ้าเข้มขึ้นตามขั้น */
.progress-list .progress-item:nth-child(1) .bar i { background: var(--seq-1); }
.progress-list .progress-item:nth-child(2) .bar i { background: var(--seq-2); }
.progress-list .progress-item:nth-child(3) .bar i { background: var(--seq-3); }
.progress-list .progress-item:nth-child(4) .bar i { background: var(--seq-4); }
.progress-list .progress-item:nth-child(5) .bar i { background: var(--seq-5); }
.bar { background: var(--viz-grid); }

/* จุดไทม์ไลน์กิจกรรม — ไล่สีตามหมวด */
.activity-list .activity-item:nth-child(1)::before { background: var(--viz-1); box-shadow: 0 0 0 3px var(--viz-1-soft); }
.activity-list .activity-item:nth-child(2)::before { background: var(--viz-2); box-shadow: 0 0 0 3px var(--viz-2-soft); }
.activity-list .activity-item:nth-child(3)::before { background: var(--viz-3); box-shadow: 0 0 0 3px var(--viz-3-soft); }
.activity-list .activity-item:nth-child(4)::before { background: var(--viz-4); box-shadow: 0 0 0 3px var(--viz-4-soft); }

/* คะแนน 5 ด้าน = 5 หมวดที่ต่างกัน → สี categorical + มีชื่อด้านและตัวเลขกำกับทุกแถว */
.score-list .score-item:nth-child(1) .bar i { background: var(--viz-1); }
.score-list .score-item:nth-child(2) .bar i { background: var(--viz-2); }
.score-list .score-item:nth-child(3) .bar i { background: var(--viz-3); }
.score-list .score-item:nth-child(4) .bar i { background: var(--viz-4); }
.score-list .score-item:nth-child(5) .bar i { background: var(--viz-5); }

.score-list .score-item:nth-child(1) b { color: var(--viz-1-ink); }
.score-list .score-item:nth-child(2) b { color: var(--viz-2-ink); }
.score-list .score-item:nth-child(3) b { color: var(--viz-3-ink); }
.score-list .score-item:nth-child(4) b { color: var(--viz-4-ink); }
.score-list .score-item:nth-child(5) b { color: var(--viz-5-ink); }

/* ==========================================================================
   3) DIRECTOR — EXECUTIVE DASHBOARD
   ========================================================================== */
.exec-kpi-card b { color: var(--kpi-ink, var(--viz-1-ink)); }
.exec-icon {
  color: var(--kpi-ink, var(--viz-1-ink));
  background: var(--kpi-soft, var(--viz-1-soft));
}

/* เลขหัวข้อ 1–8 ของแต่ละแผง ใช้สีเดียวกันทั้งหมดโดยตั้งใจ
   ตัวเลขทำหน้าที่แยกแผงอยู่แล้ว ถ้าให้สีต่างกันจะไปชนกับสีของ "ด้านที่ 1–5"
   ทำให้เข้าใจผิดว่าแผงที่ 3 เกี่ยวกับด้านที่ 3 */
.exec-panel h3 span { background: var(--viz-1); }

/* โดนัท = "สถานะ" ไม่ใช่หมวด → ใช้สี status และมี legend เป็นข้อความกำกับครบ */
.donut,
.donut.follow {
  background: conic-gradient(
    var(--st-good) calc(var(--a) * 1%),
    var(--st-warn) 0 calc((var(--a) + var(--b)) * 1%),
    var(--st-bad) 0);
}
.donut b { color: var(--st-good-ink); }
.donut-legend i.green  { background: var(--st-good); }
.donut-legend i.orange { background: var(--st-warn); }
.donut-legend i.red    { background: var(--st-bad); }

/* วงคะแนนรวม = ปริมาณค่าเดียว → ไล่เฉดฟ้าชุดเดียว ไม่ผสมหลายสี */
.score-ring {
  background: conic-gradient(
    var(--viz-1) calc(var(--score) * 1%),
    var(--seq-1) 0 82%,
    var(--viz-grid) 0);
}
.score-ring b { color: var(--viz-1-ink); }
.stars { color: #eab308; }

/* Top-5 ประเด็นพัฒนา = ระดับความรุนแรง → ไล่เฉดส้มเข้มขึ้นตามความรุนแรง
   (เดิม .amber และ .yellow ไม่ถูกประกาศไว้เลย แถบสองอันนั้นจึงมองไม่เห็น) */
.issue-list em { background: var(--viz-grid); }
.issue-list i.green  { background: var(--sev-1); }
.issue-list i.yellow { background: var(--sev-2); }
.issue-list i.amber  { background: var(--sev-3); }
.issue-list i.orange { background: var(--sev-4); }
.issue-list i.red    { background: var(--sev-5); }
.issue-list b { color: var(--viz-4-ink); }

/* การ์ดตัวเลขย่อย — ให้แต่ละใบมีสีของตัวเอง */
.support-grid div:nth-child(1), .data-grid div:nth-child(1) { background: var(--viz-1-soft); border-color: transparent; }
.support-grid div:nth-child(2), .data-grid div:nth-child(2) { background: var(--viz-2-soft); border-color: transparent; }
.support-grid div:nth-child(3), .data-grid div:nth-child(3) { background: var(--viz-3-soft); border-color: transparent; }
.support-grid div:nth-child(4), .data-grid div:nth-child(4) { background: var(--viz-4-soft); border-color: transparent; }
.support-grid div:nth-child(1) b, .data-grid div:nth-child(1) b { color: var(--viz-1-ink); }
.support-grid div:nth-child(2) b, .data-grid div:nth-child(2) b { color: var(--viz-2-ink); }
.support-grid div:nth-child(3) b, .data-grid div:nth-child(3) b { color: var(--viz-3-ink); }
.support-grid div:nth-child(4) b, .data-grid div:nth-child(4) b { color: var(--viz-4-ink); }

.exec-recommendations div:nth-child(1) { background: var(--viz-1-soft); border-color: transparent; }
.exec-recommendations div:nth-child(2) { background: var(--viz-2-soft); border-color: transparent; }
.exec-recommendations div:nth-child(3) { background: var(--viz-3-soft); border-color: transparent; }
.exec-recommendations div:nth-child(1) b { color: var(--viz-1-ink); }
.exec-recommendations div:nth-child(2) b { color: var(--viz-2-ink); }
.exec-recommendations div:nth-child(3) b { color: var(--viz-3-ink); }

/* สัญญาณเตือน — ใส่จุดสีสถานะนำหน้าแต่ละบรรทัด พร้อมข้อความเดิม */
.security-signals li {
  position: relative;
  padding-left: 20px;
}
.security-signals li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--st-good);
}
/* จุดสีต้องมาจาก "สถานะจริง" ของแต่ละสัญญาณ ไม่ใช่ลำดับของบรรทัด
   ของเดิมกำหนดด้วย nth-child บรรทัดแรกจึงเป็นสีเขียวเสมอ ทั้งที่ข้อความ
   อาจขึ้นว่า "ยังไม่พบบันทึกการสำรองข้อมูล" ซึ่งเป็นปัญหา
   และตอนนี้รายการถูกเรียงตามความรุนแรง ลำดับจึงไม่คงที่อยู่แล้ว */
.security-signals li.ok::before   { background: var(--st-good); }
.security-signals li.warn::before { background: var(--st-warn); }
.security-signals li.bad::before  { background: var(--st-bad); }

.signals-summary {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 12.5px;
}
.signals-summary b.ok   { color: var(--st-good-ink); }
.signals-summary b.warn { color: var(--st-warn-ink); }

/* แกน/ตัวอักษรของกราฟให้ถอยหลังไปเป็นสีหมึกรอง ไม่แย่งสายตากับเส้นข้อมูล */
.radar-chart text,
.line-chart text { fill: var(--viz-label); }

.domain-inline span:nth-child(1) b { color: var(--viz-1-ink); }
.domain-inline span:nth-child(2) b { color: var(--viz-2-ink); }
.domain-inline span:nth-child(3) b { color: var(--viz-3-ink); }
.domain-inline span:nth-child(4) b { color: var(--viz-4-ink); }
.domain-inline span:nth-child(5) b { color: var(--viz-5-ink); }

/* ==========================================================================
   4) COMMITTEE — งานที่ได้รับมอบหมาย / งานที่ต้องทำ
   ========================================================================== */
.ctask-summary b { color: var(--kpi-ink, var(--text)); }
.ctask-summary em,
.ctask-summary em.info { background: var(--kpi-soft, var(--viz-1-soft)); color: var(--kpi-ink, var(--viz-1-ink)); }
.ctask-summary em.warn { background: var(--st-warn-soft); color: var(--st-warn-ink); }
.ctask-summary em.ok   { background: var(--st-good-soft); color: var(--st-good-ink); }

/* การ์ดครูแต่ละใบวนสีประจำใบที่ขอบซ้าย ทำให้กวาดตาหาใบที่ต้องการได้เร็ว */
.ctask-grid .ctask-card { border-left: 4px solid var(--viz-1); }
.ctask-grid .ctask-card:nth-child(5n+2) { border-left-color: var(--viz-2); }
.ctask-grid .ctask-card:nth-child(5n+3) { border-left-color: var(--viz-3); }
.ctask-grid .ctask-card:nth-child(5n+4) { border-left-color: var(--viz-4); }
.ctask-grid .ctask-card:nth-child(5n+5) { border-left-color: var(--viz-5); }

.ctask-progress i { background: var(--viz-grid); }
.ctask-progress em { background: var(--viz-1); }
.ctask-pill.info { background: var(--viz-1-soft); color: var(--viz-1-ink); }
.ctask-pill.warn { background: var(--st-warn-soft); color: var(--st-warn-ink); }
.ctask-pill.ok   { background: var(--st-good-soft); color: var(--st-good-ink); }

.cnotify-list .cnotify-row:nth-child(3n+1) .cnotify-icon { background: var(--viz-1-soft); color: var(--viz-1-ink); }
.cnotify-list .cnotify-row:nth-child(3n+2) .cnotify-icon { background: var(--viz-3-soft); color: var(--viz-3-ink); }
.cnotify-list .cnotify-row:nth-child(3n+3) .cnotify-icon { background: var(--viz-2-soft); color: var(--viz-2-ink); }
.cnotify-badge.due    { background: var(--st-warn-soft); color: var(--st-warn-ink); }
.cnotify-badge.urgent { background: var(--st-bad-soft);  color: var(--st-bad-ink); }
.cnotify-badge.done   { background: var(--st-good-soft); color: var(--st-good-ink); }

/* ==========================================================================
   5) TEACHER DASHBOARD
   ========================================================================== */
.teacher-avatar { background: linear-gradient(135deg, var(--viz-1), var(--viz-3)); }
.teacher-score-card { background: var(--viz-1-soft); }
.teacher-score-card b { color: var(--viz-1-ink); }
.teacher-kpi b { color: var(--kpi-ink, var(--text)); }

/* คะแนน 5 ด้าน — สีเดียวกับฝั่ง admin/ผอ. เพื่อให้ "ด้านที่ 3" เป็นสีเดียวกันทุกหน้า */
.teacher-bars em { background: var(--viz-grid); }
.teacher-bars > div:nth-child(1) i { background: var(--viz-1); }
.teacher-bars > div:nth-child(2) i { background: var(--viz-2); }
.teacher-bars > div:nth-child(3) i { background: var(--viz-3); }
.teacher-bars > div:nth-child(4) i { background: var(--viz-4); }
.teacher-bars > div:nth-child(5) i { background: var(--viz-5); }
.teacher-bars > div:nth-child(1) b { color: var(--viz-1-ink); }
.teacher-bars > div:nth-child(2) b { color: var(--viz-2-ink); }
.teacher-bars > div:nth-child(3) b { color: var(--viz-3-ink); }
.teacher-bars > div:nth-child(4) b { color: var(--viz-4-ink); }
.teacher-bars > div:nth-child(5) b { color: var(--viz-5-ink); }

/* รายการงานที่ต้องทำ — จุดนำหน้าใช้สีตามความเร่งด่วนของป้ายในแถวเดียวกัน */
.teacher-action-list .teacher-task-row:nth-child(5n+1) .teacher-task-dot { background: var(--viz-1-soft); }
.teacher-action-list .teacher-task-row:nth-child(5n+1) .teacher-task-dot::after { background: var(--viz-1); }
.teacher-action-list .teacher-task-row:nth-child(5n+2) .teacher-task-dot { background: var(--viz-2-soft); }
.teacher-action-list .teacher-task-row:nth-child(5n+2) .teacher-task-dot::after { background: var(--viz-2); }
.teacher-action-list .teacher-task-row:nth-child(5n+3) .teacher-task-dot { background: var(--viz-3-soft); }
.teacher-action-list .teacher-task-row:nth-child(5n+3) .teacher-task-dot::after { background: var(--viz-3); }
.teacher-action-list .teacher-task-row:nth-child(5n+4) .teacher-task-dot { background: var(--viz-4-soft); }
.teacher-action-list .teacher-task-row:nth-child(5n+4) .teacher-task-dot::after { background: var(--viz-4); }
.teacher-action-list .teacher-task-row:nth-child(5n+5) .teacher-task-dot { background: var(--viz-5-soft); }
.teacher-action-list .teacher-task-row:nth-child(5n+5) .teacher-task-dot::after { background: var(--viz-5); }

.teacher-timeline .done > b    { color: var(--st-good-ink); border-color: var(--st-good); background: var(--st-good-soft); }
.teacher-timeline .current > b { color: var(--viz-1-ink);  border-color: var(--viz-1);  background: var(--viz-1-soft); box-shadow: 0 0 0 6px var(--viz-1-soft); }

.teacher-dev-highlight { border-color: transparent; background: var(--viz-3-soft); }
.teacher-dev-highlight b { color: var(--viz-3-ink); }
.teacher-feedback div > span { background: var(--viz-2); }

/* ==========================================================================
   6) ป้ายสถานะร่วม — ให้ ok / warn / bad / danger เป็นชุดเดียวกันทุกแดชบอร์ด
   ทุกป้ายมีข้อความอยู่ในตัว สีจึงเป็นตัวเสริม ไม่ใช่ตัวสื่อความหมายเดียว
   ========================================================================== */
.teacher-badges .ok,
.teacher-due.ok { color: var(--st-good-ink); background: var(--st-good-soft); }
.teacher-badges .warn,
.teacher-due.warn { color: var(--st-warn-ink); background: var(--st-warn-soft); }
.teacher-due.danger { color: var(--st-bad-ink); background: var(--st-bad-soft); }
.teacher-due.info,
.teacher-due.muted { color: var(--viz-1-ink); background: var(--viz-1-soft); }

/* ==========================================================================
   7) โหมดคอนทราสต์สูง / ปิดสี (forced-colors) — ให้ยังอ่านออกได้
   ========================================================================== */
@media (forced-colors: active) {
  .stat-card::after,
  .exec-kpi-card::after,
  .teacher-kpi::after,
  .ctask-summary .card::after { background: CanvasText; }
  .bar i,
  .teacher-bars i,
  .issue-list i,
  .ctask-progress em { background: Highlight; }
}

/* ==========================================================================
   8) กราฟ SVG ในหน้าผู้อำนวยการ
   คุมสีจาก CSS แทนการแก้ attribute ในไฟล์ PHP (คุณสมบัติ CSS ชนะ presentation attribute)
   ทั้งสองกราฟมีชุดข้อมูลเดียว จึงใช้สีเดียว ไม่ต้องมี legend — หัวข้อกราฟบอกอยู่แล้ว
   ========================================================================== */
.radar-chart polygon:nth-of-type(1),
.radar-chart polygon:nth-of-type(2) { stroke: var(--viz-grid); }
.radar-chart polygon:nth-of-type(3) { fill: rgba(37, 99, 235, .20); stroke: var(--viz-1); }

.line-chart polyline { stroke: var(--viz-2); }
.line-chart circle { fill: var(--viz-2); }

/* ==========================================================================
   9) แก้การอ่านตัวเลขกลางวงโดนัท  (เดิมอ่านไม่ออก)
   ของเดิมใช้ grid + place-items:center แต่ <small> ตั้ง margin-top:38px
   ทำให้ทั้งกองข้อความถูกดันขึ้น ตัวเลขจึงไปคร่อมขอบวง และคำบรรยายไปตกบนวงสี
   แก้เป็น flex column จัดกึ่งกลางจริง + เพิ่มขนาดวงกลมขาวด้านในให้ข้อความมีที่พอ
   ========================================================================== */
.donut,
.score-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
}
/* ปรับตามวงที่ย่อลงแล้ว (โดนัท 140→116px, วงคะแนน 180→140px)
   ความหนาของวงสีคือ inset ถ้าคงค่าเดิมไว้ วงจะดูหนาเทอะทะเมื่อเทียบกับขนาดใหม่ */
.donut::after { inset: 17px; }
.score-ring::after { inset: 21px; }

.donut b { font-size: 26px; }
.score-ring b { font-size: 30px; }
.donut small,
.score-ring span {
  margin-top: 0;
  max-width: 84%;
  font-size: 10.5px;
  line-height: 1.25;
}
.score-ring span { max-width: 80%; font-size: 11px; }

/* ==========================================================================
   10) Top-5 ประเด็นพัฒนา — ใช้สีเดียว
   ความยาวแท่ง + ตัวเลข % บอกปริมาณอยู่แล้ว การไล่ 5 สีไม่ได้เพิ่มข้อมูล
   และคลาส .amber/.yellow ที่โค้ดเดิมส่งมาไม่เคยถูกประกาศ แท่งสองอันจึงหายไปเลย
   ========================================================================== */
.issue-list i,
.issue-list i.green,
.issue-list i.yellow,
.issue-list i.amber,
.issue-list i.orange,
.issue-list i.red { background: var(--viz-4); }

/* ==========================================================================
   11) ผูกสีให้ตรงกับ "สถานะจริง" ของแถว แทนการวนสีไปเรื่อย ๆ
   เดิมจุดนำหน้างานของครูวนสีไปตามลำดับ ทำให้งาน "ด่วน" (ป้ายแดง) มีจุดสีฟ้า
   ตรงนี้ให้จุดและขอบการ์ดอ่านค่าจากป้ายสถานะในแถวเดียวกันด้วย :has()
   ========================================================================== */
.teacher-action-list .teacher-task-row:has(.teacher-due.danger) .teacher-task-dot { background: var(--st-bad-soft); }
.teacher-action-list .teacher-task-row:has(.teacher-due.danger) .teacher-task-dot::after { background: var(--st-bad); }
.teacher-action-list .teacher-task-row:has(.teacher-due.warn) .teacher-task-dot { background: var(--st-warn-soft); }
.teacher-action-list .teacher-task-row:has(.teacher-due.warn) .teacher-task-dot::after { background: var(--st-warn); }
.teacher-action-list .teacher-task-row:has(.teacher-due.ok) .teacher-task-dot { background: var(--st-good-soft); }
.teacher-action-list .teacher-task-row:has(.teacher-due.ok) .teacher-task-dot::after { background: var(--st-good); }
.teacher-action-list .teacher-task-row:has(.teacher-due.info) .teacher-task-dot,
.teacher-action-list .teacher-task-row:has(.teacher-due.muted) .teacher-task-dot { background: var(--viz-1-soft); }
.teacher-action-list .teacher-task-row:has(.teacher-due.info) .teacher-task-dot::after,
.teacher-action-list .teacher-task-row:has(.teacher-due.muted) .teacher-task-dot::after { background: var(--viz-1); }

.ctask-grid .ctask-card:has(.ctask-pill.warn) { border-left-color: var(--st-warn); }
.ctask-grid .ctask-card:has(.ctask-pill.info) { border-left-color: var(--viz-1); }
.ctask-grid .ctask-card:has(.ctask-pill.ok)   { border-left-color: var(--st-good); }
.ctask-card:has(.ctask-pill.ok) .ctask-progress em { background: var(--st-good); }

/* ==========================================================================
   Smart Supervision — เพิ่มเติมจากการแก้ไขรอบที่ 2 (ความถูกต้องของผลประเมิน)
   คลาสที่หน้าใหม่เรียกใช้แต่ยังไม่เคยมีในสไตล์ชีต
   ========================================================================== */

/* ป้ายเตือน "ยังประเมินไม่ครบ" ที่แทรกอยู่เหนือคะแนน
   เดิมมีแค่ .flash.success และ .flash.error */
.flash.warn {
  color: var(--st-warn-ink, #ab4f09);
  background: var(--st-warn-soft, #f8eee6);
  border-color: #f0d9c2;
}

.flash.warn b { color: inherit; }

/* สถานะกรรมการใบที่ 3: เริ่มประเมินแล้วแต่ยังไม่ครบ
   เดิมมีแค่ done / pending ทำให้ "กำลังประเมิน" ไม่มีสีของตัวเอง */
.cons-status.partial {
  color: var(--viz-1-ink, #235edf);
  background: var(--viz-1-soft, #e9effd);
}

/* ตัวเลขกำกับความครบถ้วนในตารางและแถบคะแนน เช่น (6/10) */
.cons-table small.muted,
.t360-bars small.muted {
  margin-left: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

/* หน่วยกำกับในหัวข้อ เช่น "(เต็ม 100)" — ให้ถอยหลังไปเป็นข้อความรอง */
.cons-kpis .card span small,
.cons-table th small,
.cons-total-row td small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

/* คำอธิบายใต้แถบคะแนน 5 ด้านของหน้า Teacher 360 */
.t360-panel > p.muted {
  margin: 14px 0 0;
  font-size: 12px;
}


/* ==========================================================================
   Smart Supervision — เพิ่มเติมจากการแก้ไขรอบที่ 3 (ช่องโหว่และ workflow)
   ========================================================================== */

/* แถบเลือกครู/รอบ ที่เพิ่มเข้ามาในหน้าจัดการกรรมการ และหน้าแผนพัฒนา/PLC
   ยืมรูปแบบมาจาก .cons-picker ที่มีอยู่แล้ว เพื่อให้หน้าตาเป็นชุดเดียวกัน */
.committee-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 18px;
  margin-bottom: 16px;
  padding: 18px 20px;
}

.committee-picker label {
  display: block;
  margin-bottom: 6px;
  color: #334155;
  font-weight: 800;
}

.committee-picker select,
.committee-picker input[type="text"] {
  width: 100%;
  border: 1px solid #cfe0f2;
  border-radius: 12px;
  padding: 10px 12px;
  background: #fff;
  color: #0f2f5f;
  font-weight: 800;
}

.committee-picker input[readonly] {
  background: var(--surface-soft);
  color: #334155;
}

.committee-picker p.muted { margin: 6px 0 0; font-size: 13px; }

/* .committee-picker ตั้งเป็น 2 คอลัมน์เพราะหน้าอื่นใส่ตัวเลือกสองช่อง
   หน้าที่มีช่องเดียว (director/unlock) จะเหลือคอลัมน์ขวาว่างครึ่งการ์ด
   ใส่คลาส single กำกับเพื่อให้ช่องเดียวกว้างพอเหมาะแทนที่จะกินเต็มความกว้าง */
.committee-picker.single {
  grid-template-columns: minmax(0, 560px);
}

@media (max-width: 860px) {
  .committee-picker,
  .committee-picker.single { grid-template-columns: 1fr; }
}

/* ช่องเลือกครู/กลุ่มสาระในการ์ดสร้างรายงาน AI */
.report-create-card .field { display: grid; gap: 0; }
.report-create-card .field label { margin-bottom: 6px; color: #334155; font-weight: 800; }
.report-create-card .field select {
  width: 100%;
  border: 1px solid #cfe0f2;
  border-radius: 12px;
  padding: 10px 12px;
  background: #fff;
  color: #0f2f5f;
  font-weight: 700;
}
.report-create-card .field p.muted { margin: 8px 0 0; min-height: 0; font-size: 12px; }

/* ช่องกรอกแบบอ่านอย่างเดียวในฟอร์มแต่งตั้งกรรมการ */
.committee-assign-form input[readonly] {
  background: var(--surface-soft);
  color: #334155;
}

/* ==========================================================================
   แต่งตั้งกรรมการหลายคนพร้อมกัน (director/committees)
   ========================================================================== */
.committee-bulk-card {
  margin-bottom: 16px;
}

.committee-bulk-card > p.muted {
  margin: 0 0 14px;
  font-size: 13px;
}

/* แถวบน: กรรมการ 3 คน + วันนิเทศ + โหมดจัดการของเดิม
   auto-fit ทำให้ยุบจาก 5 ช่องเหลือ 3/2/1 ช่องเองตามความกว้าง ไม่ต้องเขียน media query */
.bulk-top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.bulk-top label {
  display: block;
  margin-bottom: 6px;
  color: #334155;
  font-weight: 800;
  font-size: 13px;
}

.bulk-top select,
.bulk-top input[type="date"] {
  width: 100%;
  min-height: 42px;
  border: 1px solid #cfe0f2;
  border-radius: 10px;
  padding: 8px 12px;
  background: #fff;
  color: #0f2f5f;
  font-weight: 700;
}

.bulk-teachers {
  padding-top: 14px;
  border-top: 1px dashed #cbd5e1;
}

.bulk-teachers-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.bulk-teachers-head b {
  color: #0b2447;
  font-size: 14px;
}

.bulk-count {
  color: var(--viz-1-ink, #235edf);
}

.bulk-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.bulk-tools input[type="search"] {
  min-width: 220px;
  min-height: 36px;
  border: 1px solid #cfe0f2;
  border-radius: 10px;
  padding: 6px 12px;
  background: #fff;
  color: #0f2f5f;
}

.bulk-tools .btn {
  min-height: 36px;
  padding: 6px 12px;
  font-size: 13px;
}

/* รายชื่อครูแบบติ๊กหลายคน — จำกัดความสูงแล้วให้เลื่อนในกล่องตัวเอง
   ครู 30-40 คนถ้าปล่อยยาวทั้งหน้า ปุ่ม "แต่งตั้ง" จะถูกดันหลุดจอไปไกล */
.bulk-teacher-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
  max-height: 340px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid #e3edf8;
  border-radius: 12px;
  background: #fbfdff;
}

.bulk-teacher {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}

.bulk-teacher:hover {
  border-color: #cfe0f2;
}

/* :has() ให้ทั้งแถวเปลี่ยนสีตามสถานะติ๊ก ไม่ใช่แค่ตัวช่องติ๊กเล็ก ๆ
   กวาดตาดูได้ทันทีว่าเลือกใครไว้บ้าง */
.bulk-teacher:has(input:checked) {
  border-color: var(--viz-1, #2563eb);
  background: var(--viz-1-soft, #e9effd);
}

.bulk-teacher input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  accent-color: var(--viz-1, #2563eb);
}

.bulk-teacher > span {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.bulk-teacher b {
  color: #0b2447;
  font-size: 13.5px;
  line-height: 1.3;
}

.bulk-teacher small {
  color: #64748b;
  font-size: 11.5px;
}

.bulk-teacher em {
  flex: 0 0 auto;
  margin-left: auto;
  font-style: normal;
  font-size: 11px;
}

.committee-bulk-form > p.muted {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
}

.committee-bulk-form .committee-actions {
  margin-top: 12px;
}

@media (max-width: 640px) {
  .bulk-teachers-head,
  .bulk-tools {
    align-items: stretch;
    flex-direction: column;
  }
  .bulk-tools input[type="search"] {
    min-width: 0;
    width: 100%;
  }
}

/* ============================================================
   รอบที่ 4 — ตัวกรอง + แบ่งหน้า หน้าตรวจหลักฐาน
   ============================================================ */
.evv-filters{
  display:flex;flex-wrap:wrap;gap:14px 18px;align-items:flex-end;
  padding:18px 20px;margin-bottom:18px;
  border-top:3px solid var(--role-accent,#2563eb);
}
.evv-filters label{display:flex;flex-direction:column;gap:6px;min-width:150px;flex:1 1 150px}
.evv-filters label span{font-size:.78rem;font-weight:600;color:#475569;letter-spacing:.01em}
.evv-filters select,.evv-filters input[type=search]{
  padding:9px 11px;border:1px solid #cbd5e1;border-radius:10px;
  background:#fff;font-size:.9rem;font-family:inherit;color:#0f172a;
}
.evv-filters select:focus,.evv-filters input[type=search]:focus{
  outline:2px solid var(--role-accent,#2563eb);outline-offset:1px;border-color:transparent;
}
.evv-filters .evv-search{flex:2 1 240px}
.evv-filter-actions{display:flex;gap:8px;flex:0 0 auto}

.evv-pager{
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;
  padding:18px 12px 6px;
}
.evv-pager .evv-page{
  min-width:38px;padding:8px 10px;text-align:center;
  border:1px solid #cbd5e1;border-radius:9px;
  text-decoration:none;color:#334155;font-weight:600;font-size:.88rem;background:#fff;
}
.evv-pager .evv-page:hover{border-color:var(--role-accent,#2563eb);color:var(--role-accent,#2563eb)}
.evv-pager .evv-page.is-now{
  background:var(--role-accent,#2563eb);border-color:var(--role-accent,#2563eb);
  color:#fff;box-shadow:0 2px 8px rgba(37,99,235,.28);
}
.evv-pager .btn.is-off{opacity:.4;pointer-events:none}

@media (max-width:640px){
  .evv-filters{padding:14px}
  .evv-filters label{min-width:100%;flex:1 1 100%}
  .evv-filter-actions{width:100%}
  .evv-filter-actions .btn{flex:1}
}

/* เพิ่มการ์ด "รอตรวจ" เป็นใบที่ 5 — ให้เรียงพอดีแถวเดียวบนจอกว้าง */
.evv-kpis{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.evv-kpis .card{min-height:0}
.evv-kpis b{margin:14px 0 10px}

/* Modern form surfaces shared by committee pages and matching card forms */
.card select,
.card textarea,
.card input:not([type]),
.card input[type="text"],
.card input[type="search"],
.card input[type="email"],
.card input[type="password"],
.card input[type="number"],
.card input[type="date"],
.card input[type="time"],
.card input[type="url"],
.card input[type="tel"],
.cd05-teacher-switch select,
.cd05-score-box textarea,
.evv-control select,
.evv-control textarea,
.evv-filters select,
.evv-filters input[type="search"] {
  width: 100%;
  min-height: 50px;
  border: 1px solid #cfe0f3;
  border-radius: 8px;
  padding: 12px 14px;
  color: #0b2447;
  background-color: #fff;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92);
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.card select,
.cd05-teacher-switch select,
.evv-control select,
.evv-filters select {
  appearance: none;
  padding-right: 42px;
  background-image:
    linear-gradient(45deg, transparent 50%, #1e3a5f 50%),
    linear-gradient(135deg, #1e3a5f 50%, transparent 50%);
  background-position:
    calc(100% - 21px) 52%,
    calc(100% - 15px) 52%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.card textarea,
.cd05-score-box textarea,
.evv-control textarea {
  min-height: 112px;
  resize: vertical;
  line-height: 1.55;
}

.card input::placeholder,
.card textarea::placeholder,
.evv-control textarea::placeholder,
.evv-filters input[type="search"]::placeholder {
  color: #94a3b8;
}

.card select:focus,
.card textarea:focus,
.card input:not([type]):focus,
.card input[type="text"]:focus,
.card input[type="search"]:focus,
.card input[type="email"]:focus,
.card input[type="password"]:focus,
.card input[type="number"]:focus,
.card input[type="date"]:focus,
.card input[type="time"]:focus,
.card input[type="url"]:focus,
.card input[type="tel"]:focus,
.cd05-teacher-switch select:focus,
.cd05-score-box textarea:focus,
.evv-control select:focus,
.evv-control textarea:focus,
.evv-filters select:focus,
.evv-filters input[type="search"]:focus {
  border-color: #60a5fa;
  background-color: #fff;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}

.cd05-teacher-switch,
.evv-control {
  padding: 16px;
  border: 1px solid #dbe7f5;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.94));
}

.evv-filters {
  border-top: 0;
  border: 1px solid #dbe7f5;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.94));
  box-shadow: 0 16px 36px rgba(15, 23, 42, .06);
}

.evv-filters label span,
.evv-control label,
.cd05-teacher-switch label,
.cd05-note-label {
  color: #0b2447;
  font-size: 14px;
  font-weight: 900;
}

/* หน้าปลดล็อกหลักฐาน / เปิดผล (รอบที่ 4) */
.unl-policy{
  align-self:center;padding:8px 14px;border-radius:999px;
  background:#eef2ff;color:#3730a3;font-size:.85rem;font-weight:600;
}
.unl-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:18px 0}
.unl-kpis .card{display:flex;flex-direction:column;gap:4px;padding:16px 18px}
.unl-kpis .card span{font-size:.82rem;color:#64748b}
/* 1.9rem ≈ 30px ใหญ่กว่าการ์ด KPI หน้าอื่นที่ปรับเป็น 26px ไปแล้ว */
.unl-kpis .card b{font-size:26px;line-height:1.1;color:#0f172a}
.unl-kpis .card em{font-style:normal;font-size:.8rem;color:#64748b}
.unl-table td b.warn{color:#b45309}
.unl-form{margin-top:16px;padding-top:16px;border-top:1px dashed #cbd5e1}

/* ==========================================================================
   ระยะห่างในฟอร์มที่เรียงช่องกรอกซ้อนกันตรง ๆ

   .field ไม่มีกฎ margin กลางในสไตล์ชีตนี้เลย ฟอร์มที่เป็น "กริด" อย่าง
   .committee-assign-form (gap 18px) หรือ .signature-form (gap 14px) จึงไม่มีปัญหา
   แต่ฟอร์มที่เรียงเป็นบล็อกธรรมดา — .unl-form กับฟอร์มในหน้า director/development —
   ช่องกรอกจะติดกันหมด และปุ่มบันทึกไปชนขอบช่องกรอกที่อยู่เหนือมันพอดี

   ใช้ตัวเลือกแบบ + (adjacent sibling) เพื่อไม่ให้ช่องแรกมี margin เกินมาด้านบน
   ========================================================================== */
.unl-form > .field + .field,
.stacked-form > .field + .field {
  margin-top: 14px;
}

.unl-form > .field + p.muted,
.stacked-form > .field + p.muted {
  margin-top: 8px;
}

/* ปุ่มต้องมีระยะหายใจจากช่องกรอกหรือคำอธิบายที่อยู่เหนือมันเสมอ
   ผูกไว้เฉพาะสองฟอร์มนี้ ไม่แตะ .committee-actions ที่เป็นกริดไอเทมในฟอร์มอื่น
   ซึ่งถ้าใส่ margin จะไปบวกกับ gap ของกริดแล้วเลื่อนหลุดแนว */
.unl-form > .committee-actions,
.stacked-form > .committee-actions {
  margin-top: 18px;
}

/* ตารางสถานะการล็อกมี 4 คอลัมน์สั้น ๆ แต่อยู่ในการ์ดครึ่งความกว้าง (grid g2)
   .table ตั้ง min-width: 720px ไว้สำหรับตารางใหญ่ของหน้าอื่น ตารางนี้จึงล้น
   จนคอลัมน์ "ยืนยันเมื่อ" ถูกตัดออกนอกจอและมีแถบเลื่อนแนวนอนโผล่มา
   ปลดความกว้างขั้นต่ำ ลด padding ในเซลล์ และให้หัวตารางขึ้นบรรทัดใหม่ได้
   ส่วนข้อมูล (วันที่ เวลา) ห้ามตัดบรรทัด */
.unl-table {
  min-width: 0;
}

.unl-table th,
.unl-table td {
  padding: 9px 10px;
}

.unl-table td {
  white-space: nowrap;
}
.unl-state{list-style:none;margin:0 0 4px;padding:0;display:flex;flex-direction:column;gap:10px}
.unl-state li{display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  padding-bottom:9px;border-bottom:1px solid #eef2f7}
.unl-state li:last-child{border-bottom:0}
.unl-state li span{color:#64748b;font-size:.86rem;flex:0 0 auto}
.unl-state li b{text-align:right}
.unl-state li b.ok{color:#047857}
.unl-state li b.warn{color:#b45309}

/* หน้ายืนยันการลบรอบนิเทศ (รอบที่ 4) */
.round-danger{border-top:3px solid #dc2626}
.round-danger .table{margin:14px 0}
.round-danger .table b.warn{color:#b91c1c}
.round-danger .table b.muted{color:#94a3b8;font-weight:600}
.round-danger-form{margin-top:18px;padding-top:16px;border-top:1px dashed #cbd5e1;max-width:460px}
.inline-form{display:inline-block;margin:0}

/* Sidebar: keep the menu background solid, without gradient. */
.sidebar {
  background: #10233f;
}

/* Shared profile icon used instead of text initials. */
.profile-icon {
  display: block;
  width: 1em;
  height: 1em;
}

.profile-icon-sm {
  font-size: 22px;
}

.profile-icon-lg {
  font-size: 34px;
}

.avatar-badge,
.teacher-avatar,
.t360-avatar,
.tl-avatar,
.devfb-avatar,
.res-avatar {
  color: #fff;
}

.profile-settings-card {
  max-width: 920px;
}

.profile-settings-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.profile-settings-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #1d69d1, #22a9c9);
}

.profile-settings-head h3 {
  margin: 0;
  color: #061b3a;
  font-size: 24px;
}

.profile-settings-head p {
  margin: 6px 0 0;
  color: var(--muted);
}

.profile-settings-form {
  display: grid;
  gap: 18px;
}

.profile-password-panel {
  padding: 18px;
  border: 1px solid #dbe7f5;
  border-radius: 12px;
  background: #f8fbff;
}

.profile-password-panel h3 {
  margin: 0;
  color: #061b3a;
  font-size: 18px;
}

.profile-password-panel p {
  margin: 6px 0 16px;
  color: var(--muted);
}

/* Calm profile avatar treatment across all roles. */
.avatar-badge,
.teacher-avatar,
.t360-avatar,
.tl-avatar,
.devfb-avatar,
.res-avatar,
.profile-settings-icon {
  color: #1d4ed8 !important;
  background: #eaf3ff !important;
  box-shadow: inset 0 0 0 1px #d7e6fb;
}

.check-field {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid #dbe7f5;
  border-radius: 12px;
  background: #f8fbff;
  color: #0f2d52;
  font-weight: 700;
}

.check-field > span {
  color: #64748b;
  font-size: .86rem;
  font-weight: 600;
}

.check-field label {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  cursor: pointer;
}

/* System-wide micro interactions. */
.content > *,
main > .page-head,
main > .hero,
main > .card,
main > .grid,
main > section {
  animation: soft-rise .38s ease both;
}

.content > *:nth-child(2),
main > *:nth-child(2) { animation-delay: .035s; }
.content > *:nth-child(3),
main > *:nth-child(3) { animation-delay: .07s; }
.content > *:nth-child(4),
main > *:nth-child(4) { animation-delay: .105s; }
.content > *:nth-child(5),
main > *:nth-child(5) { animation-delay: .14s; }

.card,
.stat-card,
.teacher-kpi,
.teacher-panel,
.teacher-task-row,
.navitem,
.btn,
.pill,
.table tbody tr,
.account-toggle,
.account-link,
.account-logout,
.modal-card,
.idle-modal,
.notice-modal {
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease,
    background-color .2s ease,
    color .2s ease,
    opacity .2s ease;
}

.card:hover,
.stat-card:hover,
.teacher-kpi:hover,
.teacher-panel:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(15, 23, 42, .10);
}

.teacher-task-row:hover,
.table tbody tr:hover {
  transform: translateY(-1px);
}

.navitem:hover,
.navitem.active {
  transform: translateX(3px);
}

.btn:hover,
.account-toggle:hover,
.account-link:hover,
.account-logout:hover {
  transform: translateY(-1px);
}

.btn:active,
.account-toggle:active,
.account-link:active,
.account-logout:active {
  transform: translateY(0) scale(.985);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .22);
  outline-offset: 3px;
}

.progressbar i,
.progress-line i,
.teacher-bars i,
.tl-progress-line i,
.completion-bar i,
.score-bar i {
  transform-origin: left center;
  animation: bar-grow .58s ease both;
}

.modal-backdrop:not([hidden]),
.idle-modal-backdrop:not([hidden]),
.notice-backdrop:not([hidden]) {
  animation: overlay-fade .18s ease both;
}

.modal-card,
.idle-modal,
.notice-modal,
.account-dropdown:not([hidden]) {
  animation: dialog-pop .2s ease both;
}

@keyframes soft-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bar-grow {
  from { transform: scaleX(.04); }
  to { transform: scaleX(1); }
}

@keyframes overlay-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes dialog-pop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }

  .card:hover,
  .stat-card:hover,
  .teacher-kpi:hover,
  .teacher-panel:hover,
  .teacher-task-row:hover,
  .table tbody tr:hover,
  .navitem:hover,
  .navitem.active,
  .btn:hover,
  .btn:active {
    transform: none;
  }
}

/* ==========================================================================
   DASHBOARD MOTION — ตัวเลขนับขึ้น / แถบวิ่ง / โดนัทกวาด / กราฟลากเส้น
   คู่กับ assets/js/dashboard-motion.js

   กติกาที่ยึดไว้
     1. คลาสที่ใส่ให้ "การ์ด/แถว/กราฟ" ถูกถอดออกเมื่อเล่นจบ จึงไม่มี transform
        ค้างไปทับ :hover ของการ์ด
        (ยกเว้น .ss-bar ที่ตั้งใจคงไว้ เพราะมันกัน keyframe bar-grow ของสไตล์เดิม
         ไม่ให้เล่นซ้ำ และ scaleX(1) ก็เท่ากับไม่แปลงรูปอยู่แล้ว)
     2. ค่าที่เห็นตอน JS ไม่ทำงาน คือค่าจริงเสมอ (คลาส .js-motion บน <html>
        ถูกถอดออกทันทีที่ JS จับสถานะเริ่มต้นได้ และมี timeout กันเหนียวใน head)
     3. prefers-reduced-motion → JS หยุดทำงานตั้งแต่บรรทัดแรก ไม่มีอะไรขยับ
   ========================================================================== */

/* --- ช่วงหัวเลี้ยว: กัน keyframe bar-grow ของเดิมชิงเล่นก่อน JS จะจับได้ --- */
.js-motion .bar > i,
.js-motion .teacher-bars i,
.js-motion .t360-bars i,
.js-motion .issue-list em > i,
.js-motion .ctask-progress > i > em,
.js-motion .progressbar i,
.js-motion .progress-line i,
.js-motion .tl-progress-line i,
.js-motion .completion-bar i,
.js-motion .score-bar i,
.js-motion [data-bar-grow] {
  animation: none !important;
  transform: scaleX(0);
  transform-origin: left center;
}

/* --- 1) ตัวเลขนับขึ้น ---------------------------------------------------
   count_up() ห่อตัวเลขด้วย <span class="count-up"> แล้วเอาไปซ้อนใน <b>/<em>
   ที่มีอยู่เดิม เช่น  <b><span class="count-up">0</span>/4</b>

   ปัญหา: สไตล์ชีตนี้มีกฎแบบ ".บล็อก span { ... }" อยู่หลายสิบจุด เขียนไว้ตั้งแต่
   ตอนที่ <span> ตัวเดียวในบล็อกนั้นคือ "ป้ายกำกับ" กฎพวกนี้เป็น descendant selector
   จึงเผลอไปโดน span ตัวนับที่ซ้อนอยู่ข้างในด้วย และชนะ .count-up (0,1,1 > 0,1,0)
     .teacher-kpi span      display:block      → "0" กับ "/4" ตกคนละบรรทัด (อาการที่เจอ)
     .teacher-score-card span  font-size:12px  → คะแนนรวมหดจาก 27px เหลือ 12px
     .hero-score span       display:block+12px → เลขความพร้อมระบบเล็กและสีจาง
     .score-ring span       font-size:11-12px  → เลขกลางวง SAW Score หดลง
     .teacher-badges span   inline-flex+padding→ ตัวเลขในป้ายมีช่องว่างรอบตัว
     .stat-card / .score-item / .activity-item / .support-grid / .data-grid /
     .ctask-summary span    color:...           → ตัวเลขกลายเป็นสีเทาแทนสีประจำการ์ด

   แก้ที่เดียวจบ: ประกาศตัวนับเป็น "กล่องใส" ที่สืบทอดทุกอย่างจากพ่อ
   ใช้ span.count-up[data-count] = (0,2,1) ซึ่งชนะกฎข้างบนทั้งหมด (ทุกตัวเป็น 0,1,1)
   สำรวจแล้วว่าใน 26 กลุ่มตัวเลือกที่ลงท้ายด้วย span มีเพียง 4 กลุ่มที่จำเพาะกว่านี้
   และทั้งหมดอยู่คนละหน้า (หน้าแรก, .switch, ปุ่มเมนูมือถือ) จึงไม่ชนกัน

   ไม่ใช้ shorthand `font: inherit` เพราะมันรีเซ็ต font-variant-numeric กับ
   font-feature-settings กลับเป็นค่าเริ่มต้น ตัวเลขจะเสียความกว้างเท่ากันทุกหลัก
   -------------------------------------------------------------------------- */
span.count-up[data-count] {
  display: inline-block;
  position: static;
  width: auto;
  min-width: 0;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  text-transform: none;
  vertical-align: baseline;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* จังหวะ "ติ๊ง" เล็ก ๆ ตอนนับถึงค่าจริง — บอกผู้ใช้ว่าตัวเลขนิ่งแล้ว */
.count-up.is-counted {
  animation: count-pop .42s cubic-bezier(.34, 1.56, .64, 1) both;
}

@keyframes count-pop {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.085); }
  100% { transform: scale(1); }
}

/* --- 2) แถบความคืบหน้า -------------------------------------------------- */
.ss-bar {
  animation: none !important;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .95s cubic-bezier(.22, 1, .36, 1);
}

/* เขียนซ้ำแบบจำเพาะกว่า เผื่อคลาส .js-motion ยังไม่ถูกถอดออกด้วยเหตุผลใดก็ตาม */
.ss-bar.is-grown,
.js-motion .ss-bar.is-grown {
  transform: scaleX(1);
}

/* --- 3) โดนัท / วงคะแนน ------------------------------------------------- */
/* กวาดถึงค่าจริงแล้วเรืองแสงจาง ๆ หนึ่งครั้ง
   ปลายทางเขียนเป็น saturate(1) brightness(1) ไม่ใช่ none เพราะ none
   ไม่ใช่ค่าที่ interpolate ได้ เบราว์เซอร์จะกระโดดแทนที่จะไล่ค่า */
.ss-dial.is-dialed {
  animation: dial-settle .85s ease both;
}

@keyframes dial-settle {
  0%   { filter: saturate(1.18) brightness(1.05); }
  100% { filter: saturate(1) brightness(1); }
}

/* --- 4) กราฟ SVG -------------------------------------------------------- */
/* จุดข้อมูลและป้ายกำกับ โผล่ตามหลังเส้นทีละจุด */
.ss-mark {
  opacity: 0;
  transition: opacity .38s ease, transform .38s cubic-bezier(.22, 1, .36, 1);
}

.line-chart circle.ss-mark,
.radar-chart .ss-mark {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(.4);
}

.line-chart text.ss-mark {
  transform-box: fill-box;
  transform-origin: center;
  transform: translateY(5px);
}

/* ตัวเลือกต้องจำเพาะเท่ากับ/มากกว่าสถานะ "ก่อนเล่น" ข้างบน
   ไม่งั้น transform เริ่มต้นชนะ แล้วจุดข้อมูลจะค้างอยู่ที่ scale(.4) ตลอด */
.ss-mark.is-shown,
.line-chart circle.ss-mark.is-shown,
.line-chart text.ss-mark.is-shown,
.radar-chart .ss-mark.is-shown {
  opacity: 1;
  transform: none;
}

/* เรดาร์ — ตารางพื้นหลังจางเข้ามาก่อน แล้วรูปข้อมูลจึงกางออกจากกึ่งกลาง */
.ss-radar-grid {
  opacity: 0;
  transition: opacity .45s ease;
}

.ss-radar-grid.is-shown {
  opacity: 1;
}

.ss-radar {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(.06);
  transition:
    transform .95s cubic-bezier(.3, 1.3, .5, 1),
    opacity .5s ease;
}

.ss-radar.is-grown {
  opacity: 1;
  transform: none;
}

/* --- 5) การ์ด/แถว โผล่ไล่ทีละใบ ----------------------------------------- */
.ss-reveal {
  opacity: 0;
  transform: translateY(14px);
}

.ss-reveal.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity .5s ease,
    transform .58s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--ss-i, 0) * 62ms);
}

/* แสงกวาดผ่านการ์ด KPI หนึ่งครั้งตอนโผล่ — ให้ความรู้สึกว่า "ระบบเพิ่งดึงข้อมูลมา"
   ใช้ ::before เพราะ ::after ถูกใช้เป็นแถบสีหัวการ์ดอยู่แล้ว
   (.stat-card::before ถูกปิดไว้ในสไตล์เดิม บล็อกนี้อยู่ท้ายไฟล์จึงเปิดกลับได้) */
.stat-card.ss-reveal::before,
.exec-kpi-card.ss-reveal::before,
.teacher-kpi.ss-reveal::before,
.ctask-summary .card.ss-reveal::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 38%,
    rgba(255, 255, 255, .72) 50%,
    transparent 62%);
  transform: translateX(-105%);
}

.stat-card.ss-reveal.is-in::before,
.exec-kpi-card.ss-reveal.is-in::before,
.teacher-kpi.ss-reveal.is-in::before,
.ctask-summary .card.ss-reveal.is-in::before {
  animation: kpi-sheen .9s ease-out both;
  animation-delay: calc(var(--ss-i, 0) * 62ms + 160ms);
}

@keyframes kpi-sheen {
  from { transform: translateX(-105%); }
  to   { transform: translateX(105%); }
}

/* --- ผู้ใช้ที่ขอลดการเคลื่อนไหว: ทุกอย่างต้องอยู่ในสถานะ "เล่นจบแล้ว" ทันที --- */
@media (prefers-reduced-motion: reduce) {
  .js-motion .bar > i,
  .js-motion .teacher-bars i,
  .js-motion .t360-bars i,
  .js-motion .issue-list em > i,
  .js-motion .ctask-progress > i > em,
  .js-motion .progressbar i,
  .js-motion .progress-line i,
  .js-motion .tl-progress-line i,
  .js-motion .completion-bar i,
  .js-motion .score-bar i,
  .js-motion [data-bar-grow],
  .ss-bar {
    transform: none;
  }

  .ss-reveal,
  .ss-mark,
  .ss-radar,
  .ss-radar-grid {
    opacity: 1;
    transform: none;
  }

  .stat-card.ss-reveal::before,
  .exec-kpi-card.ss-reveal::before,
  .teacher-kpi.ss-reveal::before,
  .ctask-summary .card.ss-reveal::before {
    display: none;
  }
}

/* ==========================================================================
   ป๊อปอัปที่ซ้อนอยู่ในกล่องซึ่งมีแอนิเมชันขาเข้า

   อาการ: ใน admin/roles.php กด "ตั้งค่าสิทธิ์" แล้วป๊อปอัปกางเต็มแค่โซน
   Permission Matrix ไม่ใช่เต็มจอ

   สาเหตุ: .content > * ทุกใบได้ animation: soft-rise ที่จบด้วย
   transform: translateY(0) และค้างไว้ตลอดเพราะ animation-fill-mode: both
   ค่า transform ที่ไม่ใช่ none — ต่อให้เป็น 0 — ทำให้ element นั้นกลายเป็น
   "containing block" ของลูกที่เป็น position: fixed
   ป๊อปอัปในหน้านั้นอยู่ใน <form class="permission-form"> (ต้องอยู่ในฟอร์ม
   เพราะ checkbox ต้องถูกส่งไปด้วย) inset: 0 จึงวัดจากกรอบฟอร์ม ไม่ใช่ viewport

   วิธีแก้: ถอดแอนิเมชันขาเข้าออกจากกล่องที่มี overlay อยู่ข้างใน
   ไม่ใช้ opacity แทน เพราะแม้ opacity จะไม่สร้าง containing block แต่มันสร้าง
   stacking context ซึ่งจะกดให้ป๊อปอัปไปอยู่ใต้ sidebar (sticky) แทน
   กล่องพวกนี้จึงโผล่มาทันทีโดยไม่มีเอฟเฟกต์ — แลกกับป๊อปอัปที่กางเต็มจอถูกต้อง
   ========================================================================== */
.content > *:has(.modal-backdrop),
main > *:has(.modal-backdrop),
.ss-reveal:has(.modal-backdrop) {
  animation: none;
  opacity: 1;
  transform: none;
}

/* ทางสำรองสำหรับเบราว์เซอร์ที่ยังไม่รองรับ :has()
   ป๊อปอัปที่ต้องซ้อนอยู่ในกล่องแม่ มีแต่กรณี "อยู่ในฟอร์มเพราะ checkbox
   ต้องถูกส่งไปกับฟอร์ม" ฟอร์มระดับหน้าจึงถอดแอนิเมชันออกทั้งหมด */
.content > form,
main > form {
  animation: none;
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   TEACHER DASHBOARD — จัดแถวการ์ด KPI ให้กวาดตาเทียบกันได้

   เดิมทั้ง 4 ใบเรียงเนื้อหาจากบนลงล่างอย่างเดียว พอป้ายกำกับยาวไม่เท่ากัน
   ("D01-D04 ก่อนนิเทศ" กับ "กรรมการประเมินแล้ว") ตัวเลขของแต่ละใบจึงอยู่คนละระดับ
   ยิ่งตอนจอแคบที่ป้ายขึ้นสองบรรทัด ยิ่งเหลื่อมกันหนัก

   แก้เป็น flex column แล้วดัน "ตัวเลข + บรรทัดคำอธิบาย" ไปชิดฐานการ์ด
   ด้วย margin-top:auto ทั้งสองบรรทัดจึงตรงกันทุกใบเสมอ ไม่ว่าป้ายจะกี่บรรทัด
   ========================================================================== */
.teacher-kpi {
  display: flex;
  flex-direction: column;
}

/* margin-top:auto กินสล็อตว่างทั้งหมดไว้เหนือตัวเลข (เดิมเป็น margin-top:12px)
   ส่วน margin-bottom:10px ของกฎเดิมที่บรรทัด 5876 ยังอยู่ตามเดิม */
.teacher-kpi b {
  margin-top: auto;
}

/* ค่าหลักที่มีตัวนับต้องอ่านเป็นก้อนเดียว ห้าม "0" กับ "/4" แยกบรรทัด
   ยืมสำนวนเดียวกับ .progress-item b, .score-item b (บรรทัด 1548) ที่มีอยู่แล้ว

   ใช้ :has(.count-up) เพื่อไม่ให้ไปโดนการ์ด "วันนิเทศ" ที่ค่าเป็นวันที่ไทย
   ("12 ก.ค. 2569" กว้างราว 155px ที่ 28px) การ์ดตั้ง overflow:hidden ไว้
   ถ้าบังคับ nowrap แล้วจอแคบมาก วันที่จะถูกตัดหายแทนที่จะขึ้นบรรทัดใหม่ */
.teacher-kpi b:has(.count-up) {
  white-space: nowrap;
}

/* Keep animated numbers from touching the following Thai text inside compact badges. */
.stat-card em span.count-up[data-count],
.pill span.count-up[data-count],
.workflow-badge span.count-up[data-count],
.follow-badge span.count-up[data-count],
.role-badge span.count-up[data-count] {
  margin-inline-end: .24rem;
  line-height: 1;
  vertical-align: -0.02em;
}

.evidence-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

.evidence-preview-actions.compact {
  margin-top: 4px;
}

.evidence-preview-actions .btn {
  min-height: 38px;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.2;
}

.evidence-file-label {
  margin-top: 8px;
  color: #475569 !important;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.evidence-preview-card {
  width: min(980px, 100%);
  max-height: calc(100dvh - 72px);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.evidence-preview-head {
  margin: 0;
  padding: 18px 20px;
  border-bottom: 1px solid #dbe7f5;
  background: #f8fbff;
}

.evidence-preview-head p {
  margin: 5px 0 0;
  color: #64748b;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.evidence-preview-body {
  display: grid;
  place-items: center;
  flex: 1 1 auto;
  min-height: 0;
  height: min(62vh, 620px);
  padding: 18px;
  overflow: auto;
  background:
    linear-gradient(45deg, rgba(148, 163, 184, .08) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(148, 163, 184, .08) 25%, transparent 25%),
    #f8fafc;
  background-size: 28px 28px;
}

.evidence-preview-frame {
  width: 100%;
  height: 100%;
  min-height: min(58vh, 560px);
  border: 1px solid #dbe7f5;
  border-radius: 12px;
  background: #fff;
}

.evidence-preview-image,
.evidence-preview-media {
  display: block;
  max-width: 100%;
  max-height: 66vh;
  border-radius: 12px;
  box-shadow: 0 16px 42px rgba(15, 23, 42, .16);
  background: #fff;
}

.evidence-preview-audio {
  width: min(620px, 100%);
}

.evidence-preview-unavailable {
  display: grid;
  gap: 8px;
  width: min(560px, 100%);
  padding: 24px;
  border: 1px dashed #bfdbfe;
  border-radius: 16px;
  color: #0b2447;
  text-align: center;
  background: rgba(255, 255, 255, .88);
}

.evidence-preview-unavailable b {
  font-size: 18px;
}

.evidence-preview-unavailable span {
  color: #64748b;
}

.evidence-preview-footer {
  margin: 0;
  flex: 0 0 auto;
  padding: 12px 20px;
  border-top: 1px solid #dbe7f5;
  background: #fff;
  position: sticky;
  bottom: 0;
  z-index: 2;
}

.exec-structure-image-card {
  grid-column: span 2;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 18px;
  overflow: hidden;
}

.exec-structure-image-card img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 560px;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .08);
}

@media (max-width: 680px) {
  .evidence-preview-modal {
    padding: 10px;
  }

  .evidence-preview-card {
    max-height: calc(100dvh - 20px);
  }

  .evidence-preview-body {
    height: 58vh;
    padding: 12px;
  }

  .evidence-preview-frame {
    min-height: 52vh;
  }

  .evidence-preview-actions .btn,
  .evidence-preview-footer .btn {
    flex: 1 1 140px;
  }
}

/* ==========================================================================
   ประเมิน วPA (PA2/ส) — หน้าของกรรมการ  committee/pa.php
   สเกลเดียวกับหน้าอื่นที่ย่อไปแล้ว (หัวเรื่อง 22px, การ์ด padding 18px)
   ========================================================================== */
.pa-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.pa-head h2 { margin: 0 0 4px; color: #061a3b; font-size: 22px; line-height: 1.3; }
.pa-head p  { margin: 0; color: var(--muted); font-size: 13px; }

.pa-empty { display: grid; gap: 6px; padding: 22px; text-align: center; }
.pa-empty b { color: #0b2447; font-size: 16px; }
.pa-empty p { margin: 0; color: var(--muted); font-size: 13px; }

/* ---- รายชื่อครู จัดกลุ่มตามวิทยฐานะ ---- */
.pa-group { margin-bottom: 14px; padding: 18px; }

.pa-group-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.pa-group-head h3 { margin: 0 0 3px; color: #06458f; font-size: 17px; }
.pa-group-head p  { margin: 0; color: var(--muted); font-size: 12.5px; }

.pa-group-count {
  flex: 0 0 auto;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--viz-1-soft, #e9effd);
  color: var(--viz-1-ink, #235edf);
  font-size: 12px;
  font-weight: 800;
}

.pa-teacher-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 8px;
}

.pa-teacher {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border: 1px solid #e3edf8;
  border-radius: 10px;
  background: #fbfdff;
  color: inherit;
  text-decoration: none;
}
.pa-teacher:hover { border-color: var(--viz-1, #2563eb); background: #fff; }

.pa-teacher-main { display: grid; gap: 1px; min-width: 0; flex: 1 1 auto; }
.pa-teacher-main b     { color: #0b2447; font-size: 13.5px; line-height: 1.3; }
.pa-teacher-main small { color: var(--muted); font-size: 11.5px; }

/* ตัวเลขคะแนนใช้ตัวเลขความกว้างคงที่ แถวจึงไม่ขยับตอนคะแนนต่างกัน */
.pa-teacher-score {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-variant-numeric: tabular-nums;
}
.pa-teacher-score b     { color: var(--viz-1-ink, #235edf); font-size: 15px; }
.pa-teacher-score small { color: var(--muted); font-size: 11px; }
.pa-teacher-score .pill { margin-left: 6px; font-size: 11px; }
.pa-teacher > .pill     { flex: 0 0 auto; font-size: 11px; }

/* ---- แบบประเมิน ---- */
.pa-form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding: 16px 18px;
}
.pa-form-head h3 { margin: 0 0 4px; color: #061b3a; font-size: 19px; }
.pa-form-head p  { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

.pa-score-box {
  flex: 0 0 auto;
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 112px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--viz-1-soft, #e9effd);
  text-align: center;
}
.pa-score-box b    { color: var(--viz-1-ink, #235edf); font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; }
.pa-score-box span { color: var(--muted); font-size: 11px; }

.pa-section { margin-bottom: 14px; padding: 18px; }
.pa-section > h3 { margin: 0 0 12px; color: #06458f; font-size: 17px; }
.pa-section > p.muted { margin: 0 0 14px; font-size: 12.5px; line-height: 1.55; }

.pa-max { color: var(--muted); font-size: 12px; font-weight: 600; }

.pa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.pa-workload {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid #e3edf8;
  border-radius: 10px;
  background: #fbfdff;
}
.pa-workload b { color: #0b2447; font-size: 13.5px; }
.pa-workload label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; }

.pa-part-note { margin: 0 0 12px; color: #0b2447; font-size: 13px; }

.pa-domain {
  margin: 18px 0 8px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--viz-1-soft, #e9effd);
  color: #06458f;
  font-size: 15px;
}
.pa-domain:first-of-type { margin-top: 4px; }

/* ตัวชี้วัด 1 ข้อ = ข้อความซ้าย / ช่องให้ระดับขวา
   ให้ระดับอยู่คอลัมน์เดียวกันทุกข้อ กวาดตาลงมาตรวจได้ว่าข้อไหนยังไม่ได้ให้ */
.pa-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  align-items: start;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #eef2f7;
}
.pa-item:last-child { border-bottom: 0; }

.pa-item-text b { display: block; color: #0b2447; font-size: 13.5px; line-height: 1.4; }
.pa-item-text p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.6;
  text-indent: 6px;
}

.pa-item-score { display: grid; gap: 8px; }

.pa-levels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pa-levels label { cursor: pointer; }
.pa-levels input { position: absolute; opacity: 0; pointer-events: none; }
.pa-levels span {
  display: grid;
  place-items: center;
  min-height: 38px;
  border: 1px solid #cfe0f2;
  border-radius: 9px;
  background: #fff;
  color: #0b2447;
  font-weight: 900;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.pa-levels label:hover span { border-color: var(--viz-1, #2563eb); }
.pa-levels input:checked + span {
  border-color: var(--viz-1, #2563eb);
  background: var(--viz-1, #2563eb);
  color: #fff;
}
/* ระดับ 1-2 = ต่ำกว่าที่คาดหวัง ใช้สีเตือนเพื่อให้เห็นชัดตอนทบทวนก่อนส่ง */
.pa-levels label:nth-child(1) input:checked + span,
.pa-levels label:nth-child(2) input:checked + span {
  border-color: var(--st-warn, #b45309);
  background: var(--st-warn, #b45309);
}
.pa-levels input:focus-visible + span { outline: 3px solid rgba(37, 99, 235, .3); outline-offset: 2px; }

.pa-note {
  width: 100%;
  min-height: 38px;
  border: 1px solid #cfe0f3;
  border-radius: 8px;
  padding: 8px 10px;
  color: #0b2447;
  background: #fff;
  font-size: 12.5px;
}

.pa-actions { padding: 16px 18px; }
.pa-actions p.muted { margin: 0 0 12px; font-size: 12.5px; line-height: 1.6; }
.pa-actions b { color: var(--viz-1-ink, #235edf); font-variant-numeric: tabular-nums; }
.pa-actions-btn { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- ส่วนแต่งตั้งกรรมการ วPA ในหน้าจัดการกรรมการ ---- */
.pa-assign-card .bulk-teachers + .bulk-teachers { margin-top: 14px; }
.pa-committee-grid { max-height: 220px; }
.pa-assign-mode { margin-top: 14px; max-width: 300px; }

@media (max-width: 900px) {
  .pa-item { grid-template-columns: 1fr; }
  .pa-item-score { max-width: 320px; }
}
@media (max-width: 640px) {
  .pa-head,
  .pa-form-head { align-items: stretch; flex-direction: column; }
  .pa-teacher-list { grid-template-columns: 1fr; }
}

/* ==========================================================================
   ประเมิน ว23 — ส่วนที่ต่างจากหน้า วPA (ใช้คลาส .pa-* ร่วมกันเป็นหลัก)
   ========================================================================== */
.v23-head-tools {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.v23-period-form {
  display: grid;
  gap: 4px;
}
.v23-period-form label {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
}
.v23-period-form select {
  min-height: 40px;
  border: 1px solid #cfe0f2;
  border-radius: 10px;
  padding: 6px 12px;
  background: #fff;
  color: #0f2f5f;
  font-weight: 700;
}

/* องค์ประกอบที่ 2 ให้ระดับ 1-5 ไม่ใช่ 1-4 เหมือนส่วนอื่น */
.pa-levels.five { grid-template-columns: repeat(5, 1fr); }

/* ระดับ 1-2 ของชุด 5 ระดับคือ "ต่ำกว่าครึ่ง" จึงใช้สีเตือนเหมือนกัน
   แต่ระดับ 3 ของชุดนี้ยังไม่ถึงครึ่ง (40-59.99%) จึงเตือนด้วย */
.pa-levels.five label:nth-child(3) input:checked + span {
  border-color: var(--st-warn, #b45309);
  background: var(--st-warn, #b45309);
}

.pa-score-box em {
  display: block;
  margin-top: 2px;
  color: #0b2447;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.v23-sub {
  margin: 18px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #eef2f7;
  color: #0b2447;
  font-size: 14px;
}

.v23-leave { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* คะแนนที่ครูประเมินตนเองไว้ แสดงคู่กับช่องให้ระดับของผู้ประเมิน
   ตามที่แบบฟอร์มราชการวางสองคอลัมน์ไว้ข้างกัน */
.v23-self-hint {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #eef2f7;
  color: #475569;
  font-size: 11.5px;
}
.v23-self-hint b { color: var(--viz-1-ink, #235edf); }
.v23-self-ok { color: var(--st-ok, #047857); font-weight: 700; }

.v23-legend {
  display: grid;
  gap: 4px;
  margin: 10px 0 0;
  padding: 12px 14px;
  border: 1px solid #e3edf8;
  border-radius: 10px;
  background: #fbfdff;
  list-style: none;
  font-size: 12.5px;
}
.v23-legend b {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-right: 6px;
  border-radius: 6px;
  background: var(--viz-1-soft, #e9effd);
  color: var(--viz-1-ink, #235edf);
  font-size: 11.5px;
}

@media (max-width: 640px) {
  .v23-head-tools { align-items: stretch; flex-direction: column; }
}

/* แถบผลจากผู้บังคับบัญชาในหน้าประเมินตนเองของครู */
.v23-result-flash {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.v23-result-flash a { font-weight: 800; }

/* ==========================================================================
   หลักฐานจากการนิเทศ D05 ที่ดึงมาแสดงใต้ตัวชี้วัด วPA / ว23
   ใช้ <details> ของ HTML เอง ไม่ต้องพึ่ง JS
   ========================================================================== */
.d05-link {
  margin-top: 8px;
  border: 1px solid #dbe9f8;
  border-radius: 9px;
  background: #f7fbff;
  font-size: 12px;
}

.d05-link > summary {
  padding: 7px 11px;
  color: var(--viz-1-ink, #235edf);
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}
.d05-link > summary::-webkit-details-marker { display: none; }
.d05-link > summary::before {
  content: "📎 ";
}
.d05-link > summary::after {
  content: " ▾";
  color: var(--muted);
}
.d05-link[open] > summary::after { content: " ▴"; }
.d05-link > summary:hover { background: #eef5ff; border-radius: 8px; }

/* ไม่มีหลักฐานเลย — แสดงเป็นป้ายเตือน ไม่ซ่อน
   เพราะการ "ไม่มี" หลักฐานก็เป็นข้อมูลที่กรรมการต้องรู้ตอนให้ระดับ */
.d05-link-empty {
  margin-top: 8px;
  padding: 7px 11px;
  border: 1px dashed #e4cfa6;
  border-radius: 9px;
  background: #fffaf0;
  color: #92400e;
  font-size: 11.5px;
  font-weight: 700;
}

.d05-link-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 4px 11px 11px;
  list-style: none;
}
.d05-link-list > li {
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e8f0fa;
}
.d05-link-list > li > b {
  color: var(--viz-1-ink, #235edf);
  font-size: 11.5px;
}

.d05-link-text {
  color: #334155;
  font-size: 11.5px;
  line-height: 1.5;
}

.d05-link-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: #0b2447;
  font-size: 11.5px;
}
.d05-link-item a {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--viz-1-soft, #e9effd);
  color: var(--viz-1-ink, #235edf);
  font-weight: 700;
  text-decoration: none;
}
.d05-link-item a:hover { background: var(--viz-1, #2563eb); color: #fff; }
.d05-link-item em { font-style: normal; font-size: 11px; }

.d05-link-note {
  padding: 5px 8px;
  border-left: 3px solid #cfe0f2;
  color: #475569;
  font-size: 11.5px;
  line-height: 1.5;
}

/* ==========================================================================
   หน้า "หลักฐาน วPA" ฝั่งครู (teacher/pa.php)
   ========================================================================== */
.pa-ev-item {
  padding: 14px 0;
  border-bottom: 1px solid #eef2f7;
}
.pa-ev-item:last-child { border-bottom: 0; }

.pa-ev-head b {
  display: block;
  color: #0b2447;
  font-size: 13.5px;
  line-height: 1.4;
}
.pa-ev-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.6;
  text-indent: 6px;
}

/* รายการหลักฐานที่ครูแนบเอง — ใช้ทั้งหน้าครูและหน้ากรรมการ */
.pa-ev-list {
  display: grid;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.pa-ev-list > li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 11px;
  border: 1px solid #dcefe2;
  border-radius: 9px;
  background: #f5fcf8;
  font-size: 12px;
}
.pa-ev-main { display: grid; gap: 1px; min-width: 0; flex: 1 1 180px; }
.pa-ev-main b { color: #0b2447; font-size: 12.5px; }
.pa-ev-main small { color: var(--muted); font-size: 11.5px; }

.pa-ev-list a {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--st-ok-soft, #ddf8ec);
  color: var(--st-ok, #047857);
  font-weight: 700;
  text-decoration: none;
}
.pa-ev-list a:hover { background: var(--st-ok, #047857); color: #fff; }

.pa-ev-del {
  border: 1px solid #f2c9c9;
  border-radius: 999px;
  padding: 3px 10px;
  background: #fff5f5;
  color: #b91c1c;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}
.pa-ev-del:hover { background: #b91c1c; color: #fff; border-color: #b91c1c; }

/* ฟอร์มแนบหลักฐาน — พับเก็บไว้ ไม่ให้หน้ายาวเกิน (15 ตัวชี้วัด x 1 ฟอร์ม) */
.pa-ev-add { margin-top: 8px; }
.pa-ev-add > summary {
  display: inline-block;
  padding: 5px 12px;
  border: 1px dashed #cfe0f2;
  border-radius: 999px;
  color: var(--viz-1-ink, #235edf);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.pa-ev-add > summary::-webkit-details-marker { display: none; }
.pa-ev-add > summary:hover { background: var(--viz-1-soft, #e9effd); border-style: solid; }

.pa-ev-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  align-items: end;
  margin-top: 10px;
  padding: 13px;
  border: 1px solid #e3edf8;
  border-radius: 11px;
  background: #fbfdff;
}
.pa-ev-form .field { margin: 0; }
.pa-ev-form .btn { grid-column: 1 / -1; justify-self: start; }

/* ---- admin/evaluation_reports.php : ศูนย์พิมพ์รายงานการประเมิน ---- */
.er-toolbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; align-items: end; margin-bottom: 16px; }
.er-toolbar .field { margin: 0; }
.er-table td { vertical-align: top; }
.er-table th:first-child, .er-table td:first-child { min-width: 190px; }
.er-sub { font-size: .86em; margin-top: 2px; }
.er-doc { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; }
.er-doc + .er-doc { border-top: 1px dashed #e2e8f0; }
.er-doc .pill { margin-left: 4px; }
.er-btn { white-space: nowrap; padding: 6px 12px; font-size: .9em; }
td > .er-btn { margin-top: 6px; }
.er-note { margin-top: 12px; font-size: .88em; }

/* ---- teacher/pa.php : หลักฐาน วPA หน้าตาเดียวกับ SAW-D05 ----
   ใช้โครง d05v2-* ทั้งหมด เพิ่มเฉพาะส่วนที่ D05 ไม่มี (คำอธิบายตัวชี้วัด / ฟอร์มแนบต่อข้อ) */
.pa-row { position: relative; margin: 0; scroll-margin-top: 16px; }
.pa-row-default { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.pa-row-max { display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 999px; color: #0b63c7; background: #e6f0ff; font-size: 12px; font-weight: 800; vertical-align: middle; }
.d05v2-indicator > p.pa-row-desc { margin: 0 0 10px; color: #475569; font-size: 13.5px; line-height: 1.65; }
.d05v2-indicator > p.pa-row-source { margin: 0; color: var(--muted); font-size: 12px; }
.pa-row .d05v2-evidence > .d05-link,
.pa-row .d05v2-evidence > .pa-ev-list { margin: 0; }
.pa-add {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #d4e0ee;
  border-radius: 10px;
  background: #f8fbff;
}
.pa-add-title { color: #0f315f; font-size: 14px; }
.pa-add-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.pa-add-grid .field { margin: 0; }
.pa-add-grid label {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
  color: #334155;
  font-size: 13px;
  font-weight: 800;
}
.pa-add-grid input {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid #cfe0f3;
  border-radius: 8px;
  color: #0b2447;
  background: #fff;
}
.pa-add-grid input:focus { outline: none; border-color: #60a5fa; box-shadow: 0 0 0 4px rgba(37, 99, 235, .12); }
.pa-add-opt {
  padding: 1px 8px;
  border-radius: 999px;
  color: #3b6fb0;
  background: #e8f1fc;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}
.d05v2-upload.pa-add-actions { display: flex; padding-left: 0; }
.pa-add-actions .btn { min-height: 38px; }
.pa-add-actions .pretty-file span { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-add-hint { margin: 0; color: var(--muted); font-size: 12px; }

/* ---- teacher/pa.php : ยืนยันการส่งหลักฐาน วPA ---- */
.pa-submit-form { display: inline-flex; margin: 0; }
.pa-submitted {
  display: grid;
  gap: 4px;
  margin: 0 0 12px;
  padding: 12px 16px;
  border: 1px solid #86efac;
  border-left: 5px solid #059669;
  border-radius: 8px;
  color: #065f46;
  background: #ecfdf5;
}
.pa-submitted span { color: #047857; font-size: 13px; line-height: 1.5; }
.pa-submit-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  padding: 16px 20px;
}
.pa-submit-foot > div { display: grid; gap: 3px; }
.pa-submit-foot b { color: #0b3568; }
.pa-submit-foot span { color: var(--muted); font-size: 13px; }
@media (max-width: 760px) {
  .pa-submit-foot { flex-direction: column; align-items: stretch; }
  .pa-submit-form, .pa-submit-form .btn { width: 100%; }
}

/* รายละเอียดไฟล์ในรายการหลักฐาน วPA — ชื่อไฟล์จริง ขนาด วันที่แนบ */
.pa-ev-main .pa-ev-meta { color: #64748b; font-size: 11px; }

/* ---- กล่องลงลายเซ็น (includes/signature.php) — ใช้ร่วมกันทั้ง D05 · วPA · ว23 ---- */
.sigpad { display: grid; gap: 12px; scroll-margin-top: 20px; }
.sigpad-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.sigpad-head h4 { margin: 0 0 3px; color: #0b3568; font-size: 17px; }
.sigpad-head p { margin: 0; color: var(--muted); font-size: 13px; }
.sigpad-status { padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.sigpad-status.ok { color: #047857; background: #ddf8ec; }
.sigpad-status.ready { color: #1d4ed8; background: #dbeafe; }
.sigpad-status.warn { color: #b45309; background: #fff0d6; }
.sigpad-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.sigpad-mode { display: flex; align-items: flex-start; gap: 9px; margin: 0; padding: 11px 13px; border: 1px solid #d4e0ee; border-radius: 10px; background: #fbfdff; cursor: pointer; }
.sigpad-mode.active { border-color: #94c6ff; background: #f3f8ff; }
.sigpad-mode.disabled { opacity: .55; cursor: not-allowed; }
.sigpad-mode input { margin-top: 3px; accent-color: #1d6fd7; }
.sigpad-mode span { display: grid; gap: 2px; }
.sigpad-mode b { color: #0f315f; font-size: 13.5px; }
.sigpad-mode small { color: var(--muted); font-size: 11.5px; }
.sigpad-preview { display: grid; gap: 6px; padding: 12px; border: 1px dashed #bcd4ee; border-radius: 10px; background: #fff; justify-items: start; }
.sigpad-preview span { color: var(--muted); font-size: 12px; }
.sigpad-preview img { max-width: 260px; max-height: 110px; object-fit: contain; mix-blend-mode: multiply; }
.sigpad-draw { display: grid; gap: 10px; }
.sigpad-canvas { width: 100%; max-width: 620px; height: 190px; border: 1px dashed #9fc4ef; border-radius: 12px; background: #fff; touch-action: none; cursor: crosshair; }
.sigpad-canvas:focus { outline: 2px solid #60a5fa; outline-offset: 2px; }
.sigpad-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sigpad-actions span { color: var(--muted); font-size: 12px; }

/* ---- แผง วPA / ว23 บนแดชบอร์ดผู้อำนวยการ ---- */
.exec-mini-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin: 12px 0; }
.exec-mini-kpi > div { padding: 10px 12px; border: 1px solid #dbe7f5; border-radius: 10px; background: #f8fbff; }
.exec-mini-kpi b { display: block; color: #0b3568; font-size: 20px; }
.exec-mini-kpi span { color: var(--muted); font-size: 12px; }
.exec-mini-legend { display: grid; gap: 6px; margin-bottom: 12px; }
.exec-mini-legend p { display: flex; align-items: center; gap: 8px; margin: 0; color: #334155; font-size: 13px; }
.exec-mini-legend i { width: 10px; height: 10px; border-radius: 50%; background: #94a3b8; }
.exec-mini-legend i.green { background: #059669; }
.exec-mini-legend i.orange { background: #f59e0b; }
.exec-mini-legend i.red { background: #dc2626; }
.exec-mini-legend i.blue { background: #2563eb; }
.exec-panel-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.exec-pa2 h3 span, .exec-v23 h3 span { width: auto; min-width: 24px; padding: 0 9px; font-size: 12px; font-weight: 800; }
.exec-kpi-card .exec-icon { min-width: 38px; width: auto; padding: 0 8px; }

/* คอลัมน์ "เฉลี่ย" ในหน้าสรุปผลคะแนน — จัดกึ่งกลางทั้งแนวนอนและแนวตั้ง
   เพราะช่องผู้ประเมินสูงหลายบรรทัด ตัวเลขที่ลอยอยู่บนสุดจะอ่านคู่กันยาก */
.er-table th.er-avg-col { text-align: center; }
.er-table td.er-avg-col { text-align: center; vertical-align: middle; white-space: nowrap; }
.er-table td.er-avg-col b { font-size: 1.15em; color: #0b3568; }

/* admin/users.php — ช่องอันดับ คศ. แสดงผลอย่างเดียว (คำนวณจากวิทยฐานะ) ให้ดูต่างจากช่องที่กรอกได้ */
input[data-salary-rank-view] { background: #f1f5f9; color: #0b3568; font-weight: 700; cursor: default; }
input[data-salary-rank-view]:focus { outline: none; box-shadow: none; border-color: #d1dfef; }

/* ==========================================================================
   admin/users.php — ตารางผู้ใช้งาน (ปรับใหม่)
   - รวม Username/อีเมลไว้ใต้ชื่อ ลดจำนวนคอลัมน์ ตารางจึงไม่แน่นและไม่ตัดบรรทัดมั่ว
   - ป้ายสถานะ วันที่ และปุ่ม ห้ามตัดบรรทัด (เดิม "ใช้งาน" แตกเป็น 2 บรรทัด)
   - ครูกับผู้อำนวยการเดิมใช้สีป้ายเดียวกัน แยกสีให้มองออก
   ========================================================================== */
.role-teacher { color: #047857; background: #d1fae5; }

.user-table { border-collapse: separate; border-spacing: 0; }
.user-table thead th {
  padding: 12px 14px;
  background: #f4f7fb;
  color: #475569;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
  border-bottom: 1px solid #e2e8f0;
}
.user-table thead th:first-child { border-top-left-radius: 10px; }
.user-table thead th:last-child  { border-top-right-radius: 10px; }
.user-table tbody td {
  padding: 13px 14px;
  vertical-align: middle;
  border-bottom: 1px solid #edf2f7;
}
.user-table tbody tr { transition: background .15s ease; }
.user-table tbody tr:hover { background: #f8fbff; }
.user-table tbody tr:has(.user-row-check:checked) { background: #eef5ff; }

.user-table .bulk-col { width: 44px; text-align: center; }

/* ผู้ใช้งาน: วงกลมอักษรย่อ + ชื่อ + @username · อีเมล */
.ut-user { min-width: 240px; }
.ut-person { display: flex; align-items: center; gap: 12px; }
.ut-avatar {
  display: inline-grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 800;
}
.ut-ident { display: grid; gap: 1px; min-width: 0; }
.ut-ident b { color: #0f172a; font-size: 14.5px; line-height: 1.35; }
.ut-ident small {
  color: #64748b;
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 260px;
}
.ut-self {
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #e0e7ff;
  color: #4338ca;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  vertical-align: 1px;
}

/* บทบาท: ป้ายเรียงแนวนอน ขึ้นบรรทัดใหม่ได้ถ้าที่ไม่พอ */
.ut-role { width: 1%; }
.ut-badges { display: flex; flex-wrap: wrap; gap: 5px; max-width: 200px; }
.ut-badges .role-badge { min-height: 22px; padding: 3px 10px; white-space: nowrap; }
.ut-extra { border: 1px dashed #f0b44c; background: #fffbeb; }

.ut-pos { color: #334155; font-size: 13.5px; min-width: 140px; }

/* สถานะ: จุดสี + ข้อความ บรรทัดเดียวเสมอ */
.ut-status { width: 1%; white-space: nowrap; }
.ut-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
}
.ut-state i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ut-state.on  { color: #047857; background: #e7f8ef; }
.ut-state.off { color: #b91c1c; background: #fdecec; }

/* เข้าใช้ล่าสุด: วันที่บรรทัดบน เวลาบรรทัดล่าง (ตั้งใจแยก ไม่ใช่ตัดบรรทัดเพราะที่ไม่พอ) */
.ut-login { width: 1%; white-space: nowrap; }
.ut-login span { display: block; color: #0f172a; font-size: 13.5px; }
.ut-login small { display: block; color: #64748b; font-size: 12px; }

.ut-action { width: 1%; text-align: right; white-space: nowrap; }
.ut-action .btn { min-height: 36px; padding: 7px 16px; }

.ut-empty { padding: 28px !important; text-align: center; }

@media (max-width: 760px) {
  .ut-ident small { max-width: 160px; }
}

/* กลุ่มสาระ (บรรทัดบน) / วิทยฐานะ (บรรทัดล่าง) — แต่ละบรรทัดไม่ตัดกลางคำ */
.ut-pos-main { display: block; color: #0f172a; font-size: 13.5px; white-space: nowrap; }
.ut-pos-rank { display: block; margin-top: 2px; color: #64748b; font-size: 12.5px; white-space: nowrap; }