:root {
    --app-blue: #2563eb;
    --app-blue-dark: #1e40af;
    --app-soft: #eff6ff;
    --app-bg: #f5f7fb;
    --app-text: #24324a;
}
* { font-family: 'Sarabun', sans-serif; }
body { background: var(--app-bg); color: var(--app-text); }
.app-navbar { background: linear-gradient(110deg, var(--app-blue-dark), var(--app-blue)); }
.app-sidebar { background: #fff; border-right: 1px solid #e8edf5; }
.app-sidebar .nav-link { color: #526176; border-radius: 12px; padding: .72rem .85rem; display:flex; align-items:center; gap:.7rem; }
.app-sidebar .nav-link:hover { background: #f3f7ff; color: var(--app-blue); }
.app-sidebar .nav-link.active { background: linear-gradient(110deg,#eaf2ff,#f1f6ff); color: var(--app-blue); font-weight: 700; }
.app-sidebar .nav-link.disabled { opacity: .55; }
.sidebar-section-title { color:#94a3b8; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; margin:.6rem .7rem 1rem; }
.card { border:0; border-radius:18px; box-shadow:0 5px 24px rgba(28,47,76,.06); }
.metric-card { min-height:130px; overflow:hidden; position:relative; }
.metric-icon { width:52px; height:52px; display:grid; place-items:center; border-radius:16px; font-size:1.4rem; }
.metric-card::after { content:''; position:absolute; width:90px; height:90px; border-radius:50%; background:rgba(37,99,235,.05); right:-25px; bottom:-35px; }
.table thead th { background:#f6f9ff; color:#4b5d78; font-weight:700; border-bottom:1px solid #e8edf5; white-space:nowrap; }
.table > :not(caption) > * > * { padding:.78rem .75rem; vertical-align:middle; }
.page-title { font-weight:700; letter-spacing:-.02em; }
.btn-primary { background:var(--app-blue); border-color:var(--app-blue); }
.form-control,.form-select { border-radius:11px; border-color:#dce3ee; padding:.65rem .8rem; }
.form-control:focus,.form-select:focus { border-color:#86aefc; box-shadow:0 0 0 .2rem rgba(37,99,235,.12); }
.login-page { min-height:100vh; background: radial-gradient(circle at top left,#dbeafe 0,#eff6ff 28%,#f8fafc 64%,#eef2ff 100%); }
.login-card { max-width:460px; margin:auto; }
.login-logo { width:76px; height:76px; display:grid; place-items:center; border-radius:24px; background:linear-gradient(135deg,var(--app-blue-dark),var(--app-blue)); color:#fff; font-size:2rem; box-shadow:0 12px 28px rgba(37,99,235,.25); }
.badge-soft-primary { background:#eaf2ff; color:#2563eb; }
.badge-soft-success { background:#e9f9ef; color:#15803d; }
@media (max-width:991.98px) { .app-main { width:100%; } }

/* v1.2 - ตารางบันทึกคะแนน */
.score-card { border-radius:18px; }
.score-table-wrap { max-height: calc(100vh - 290px); min-height: 360px; }
.score-table { min-width: 900px; }
.score-table thead th { position: sticky; top: 0; z-index: 5; background: #eef4ff; vertical-align: middle; }
.score-table .sticky-col { position: sticky; z-index: 4; background: #fff; }
.score-table thead .sticky-col { z-index: 7; background:#eef4ff; }
.score-table .col-no { left: 0; width: 72px; min-width: 72px; }
.score-table .col-name { left: 72px; width: 250px; min-width: 250px; box-shadow: 3px 0 5px rgba(30,64,175,.05); }
.score-table .score-head { min-width: 105px; }
.score-table .total-head { min-width: 105px; background:#f8fafc; }
.score-table .weighted-head { min-width: 115px; background:#e8f1ff; color:#1d4ed8; }
.score-table .score-input { min-width:88px; border-radius:8px; padding:.42rem .3rem; }
.score-table .score-input:focus { position:relative; z-index:3; }
.score-table tbody tr:hover td { background:#fbfdff; }
.score-table tbody tr:hover .sticky-col { background:#fbfdff; }
.save-status { font-weight:600; padding:.45rem .8rem; border-radius:999px; background:#fff; box-shadow:0 3px 12px rgba(28,47,76,.06); }
@media (max-width: 767.98px) {
  .score-table .col-name { width:190px; min-width:190px; }
  .score-table-wrap { max-height: calc(100vh - 220px); }
}

/* v1.3 - ประเมิน อ่าน-คิด-เขียน / คุณลักษณะ / สมรรถนะ / กิจกรรม */
.evaluation-tabs .nav-pills { scrollbar-width: thin; }
.evaluation-tabs .nav-link { background:#fff; color:#526176; border:1px solid #e5ebf4; border-radius:999px; font-weight:600; box-shadow:0 3px 12px rgba(28,47,76,.04); }
.evaluation-tabs .nav-link.active { background:var(--app-blue); color:#fff; border-color:var(--app-blue); }
.evaluation-hint { color:#64748b; background:#f8fafc; border:1px solid #e8edf5; border-radius:12px; padding:.65rem .8rem; line-height:1.45; }
.evaluation-card { border-radius:18px; }
.evaluation-table-wrap { max-height:calc(100vh - 300px); min-height:360px; }
.evaluation-table { min-width:980px; }
.evaluation-table thead th { position:sticky; top:0; z-index:5; background:#eef4ff; vertical-align:middle; }
.evaluation-table .sticky-col { position:sticky; z-index:4; background:#fff; }
.evaluation-table thead .sticky-col { z-index:7; background:#eef4ff; }
.evaluation-table .col-no { left:0; width:72px; min-width:72px; }
.evaluation-table .col-name { left:72px; width:250px; min-width:250px; box-shadow:3px 0 5px rgba(30,64,175,.05); }
.evaluation-table .eval-head { min-width:145px; }
.evaluation-table .total-head { min-width:90px; background:#f8fafc; }
.evaluation-table .result-head { min-width:125px; background:#e8f1ff; color:#1d4ed8; }
.evaluation-table .eval-input { min-width:125px; border-radius:8px; }
.evaluation-table tbody tr:hover td { background:#fbfdff; }
.evaluation-table tbody tr:hover .sticky-col { background:#fbfdff; }
.evaluation-table .row-result { min-width:78px; padding:.55em .8em; }
@media (max-width:767.98px) {
    .evaluation-table .col-name { width:190px; min-width:190px; }
    .evaluation-table-wrap { max-height:calc(100vh - 220px); }
}