/* ═══════════════════════════════════════════════════════════════
   ระบบประเมิน SDQ โรงเรียนงำเมืองวิทยาคม — ระบบดีไซน์กลาง
   หลักการ: สีสด แต่สีมี "ความหมาย"
   น้ำเงิน = การกระทำหลัก  |  เขียว/เหลือง/แดง = ระดับผลประเมินเท่านั้น
   ไม่ใช้สีเหล่านี้กับปุ่มทั่วไป เพราะจะทำให้ครูอ่านสีผิดความหมาย
   ═══════════════════════════════════════════════════════════════ */

:root {
    color-scheme: light;

    /* แบรนด์ — น้ำเงินเข้มพอให้ดูน่าเชื่อถือ สดพอให้ไม่ทึบ */
    --brand-700: #1d4ed8;
    --brand-600: #2563eb;
    --brand-500: #3b82f6;
    --brand-100: #dbeafe;
    --brand-50:  #eff6ff;

    --accent-600: #0891b2;   /* ฟ้าคราม สำหรับการกระทำรอง */
    --accent-50:  #ecfeff;

    /* ระดับผลประเมิน SDQ — สงวนไว้สำหรับความหมายนี้เท่านั้น */
    --level-normal:      #059669;
    --level-normal-bg:   #ecfdf5;
    --level-normal-brd:  #a7f3d0;
    --level-risk:        #d97706;
    --level-risk-bg:     #fffbeb;
    --level-risk-brd:    #fde68a;
    --level-problem:     #e11d48;
    --level-problem-bg:  #fff1f2;
    --level-problem-brd: #fecdd3;

    /* กลาง */
    --ink-900: #0f172a;
    --ink-700: #334155;
    --ink-500: #64748b;
    --ink-400: #94a3b8;
    --line:    #e2e8f0;
    --line-strong: #cbd5e1;
    --surface: #ffffff;
    --surface-sunken: #f8fafc;
    --page-bg: #f1f5f9;

    /* ชื่อเดิม คงไว้ไม่ให้หน้าที่อ้างอยู่พัง */
    --primary-color: var(--brand-600);
    --primary-hover: var(--brand-700);
    --primary-light: var(--brand-50);
    --secondary-color: var(--brand-500);
    --secondary-hover: var(--brand-600);
    --success-color: var(--level-normal);
    --success-light: var(--level-normal-bg);
    --danger-color:  var(--level-problem);
    --warning-color: var(--level-risk);
    --background: var(--page-bg);
    --card-bg: var(--surface);
    --text-main: var(--ink-900);
    --text-muted: var(--ink-500);
    --border-color: var(--line);

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --shadow-md: 0 2px 4px rgba(15, 23, 42, .05), 0 8px 16px -8px rgba(15, 23, 42, .12);
    --shadow-lg: 0 4px 8px rgba(15, 23, 42, .05), 0 16px 32px -12px rgba(15, 23, 42, .16);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-full: 9999px;

    --font: 'Prompt', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink-900);
    background: var(--page-bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { line-height: 1.35; margin: 0 0 .5rem; font-weight: 600; color: var(--ink-900); }
h1 { font-size: 1.65rem; } h2 { font-size: 1.3rem; } h3 { font-size: 1.1rem; } h4 { font-size: 1rem; }
p { margin: 0 0 .75rem; }
a { color: var(--brand-600); }

/* ── โฟกัสคีย์บอร์ด: เดิมไม่มีเลย ใช้ Tab แล้วไม่รู้ว่าอยู่ตรงไหน ── */
:focus-visible {
    outline: 3px solid var(--brand-500);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.container { max-width: 1200px; margin: 0 auto; padding: 1.5rem; }
.hidden { display: none !important; }

/* ── การ์ด ── */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.25rem;
    overflow: hidden;
}
.card-header {
    padding: 1.1rem 1.35rem;
    border-bottom: 1px solid var(--line);
    background: var(--surface-sunken);
}
.card-header h2, .card-header h3 { margin: 0; }
.card-body { padding: 1.35rem; }
.section-desc { color: var(--ink-500); font-size: .93rem; margin: .35rem 0 0; }

/* ── ปุ่ม ──
   ลำดับความสำคัญชัดเจน: ทึบ = การกระทำหลัก, อ่อน = รอง, โปร่ง = ทางเลือก
   ปุ่มสีเขียว/ส้ม/ม่วงแบบสุ่มถูกตัดออก เพราะแย่งความหมายของสีระดับผลประเมิน */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 44px;                 /* นิ้วผู้ปกครองบนมือถือกดติดแน่นอน */
    padding: .6rem 1.15rem;
    font-family: var(--font);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s, border-color .15s, box-shadow .15s, transform .06s;
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }

.btn-primary { background: var(--brand-600); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--brand-700); }

.btn-secondary { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-100); }
.btn-secondary:hover { background: var(--brand-100); }

.btn-glass, .btn-outline { background: var(--surface); color: var(--ink-700); border-color: var(--line-strong); }
.btn-glass:hover, .btn-outline:hover { background: var(--surface-sunken); border-color: var(--ink-400); }

.btn-danger { background: var(--level-problem); color: #fff; }
.btn-danger:hover { filter: brightness(.92); }

/* ชื่อเดิมที่หน้าอื่นยังอ้างอยู่ — ปรับให้กลืนกับลำดับใหม่แทนที่จะเป็นสีสุ่ม */
.btn-success { background: var(--level-normal); color: #fff; }
.btn-warning { background: var(--level-risk); color: #fff; }
.btn-cyan    { background: var(--accent-600); color: #fff; }
.btn-purple  { background: var(--brand-700); color: #fff; }
.btn-sm { min-height: 34px; padding: .3rem .7rem; font-size: .85rem; border-radius: var(--radius-sm); }
.btn-full, .btn-block { width: 100%; }

/* ชื่อสีที่กระจายอยู่ตามหน้าต่าง ๆ — จับเข้าลำดับความสำคัญเดียวกัน
   ไม่ให้ปุ่มทั่วไปใช้เขียว/ส้ม/แดง ซึ่งเป็นสีของระดับผลประเมิน */
.btn-blue, .btn-indigo { background: var(--brand-600); color: #fff; box-shadow: var(--shadow-sm); }
.btn-blue:hover, .btn-indigo:hover { background: var(--brand-700); }

.btn-green, .btn-share { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-100); }
.btn-green:hover, .btn-share:hover { background: var(--brand-100); }

.btn-amber { background: var(--surface); color: var(--ink-700); border-color: var(--line-strong); }
.btn-amber:hover { background: var(--surface-sunken); }

.btn-rose { background: var(--level-problem); color: #fff; }
.btn-rose:hover { filter: brightness(.92); }

/* ปุ่มลงมือทำแบบประเมิน — ให้เด่นที่สุดในหน้าของนักเรียน/ผู้ปกครอง */
.btn-gradient-blue { background: var(--brand-600); color: #fff; }
.btn-gradient-blue:hover { background: var(--brand-700); }

/* ── ป้ายระดับผลประเมิน ── */
.level-badge {
    display: inline-block;
    padding: .18rem .6rem;
    border-radius: var(--radius-full);
    font-size: .82rem;
    font-weight: 600;
    border: 1px solid transparent;
    white-space: nowrap;
}
.level-normal  { color: var(--level-normal);  background: var(--level-normal-bg);  border-color: var(--level-normal-brd); }
.level-risk    { color: var(--level-risk);    background: var(--level-risk-bg);    border-color: var(--level-risk-brd); }
.level-problem { color: var(--level-problem); background: var(--level-problem-bg); border-color: var(--level-problem-brd); }
/* ป้ายบอกสถานะงาน ไม่ใช่ระดับผลประเมิน จึงต้องไม่ใช้สีเขียว/เหลือง/แดง */
.badge-todo { color: var(--ink-700); background: var(--surface-sunken); border-color: var(--line-strong); }

/* ── การ์ดตัวเลขสรุป ── */
.stat-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 5px solid var(--ink-400);
    border-radius: var(--radius-md);
    padding: 1.1rem 1.25rem;
}
.stat-card .stat-label { font-size: .9rem; color: var(--ink-500); font-weight: 500; }
.stat-card .stat-value { font-size: 2.1rem; font-weight: 700; line-height: 1.15; margin-top: .15rem; }
.stat-card .stat-sub   { font-size: .82rem; color: var(--ink-400); }
.stat-card.is-normal  { border-left-color: var(--level-normal); }
.stat-card.is-normal  .stat-value { color: var(--level-normal); }
.stat-card.is-risk    { border-left-color: var(--level-risk); }
.stat-card.is-risk    .stat-value { color: var(--level-risk); }
.stat-card.is-problem { border-left-color: var(--level-problem); }
.stat-card.is-problem .stat-value { color: var(--level-problem); }

/* ── ตาราง ── */
.sdq-table, .data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .93rem;
    background: var(--surface);
}
.sdq-table th, .data-table th {
    text-align: left;
    padding: .8rem 1rem;
    font-weight: 600;
    font-size: .87rem;
    color: var(--ink-700);
    background: var(--surface-sunken);
    border-bottom: 2px solid var(--line);
    white-space: nowrap;
}
.sdq-table td, .data-table td {
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}
.sdq-table tbody tr:hover, .data-table tbody tr:hover { background: var(--brand-50); }
.sdq-table td.num, .data-table td.num,
.sdq-table th.num, .data-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── ฟอร์ม ── */
.form-group { margin-bottom: 1.1rem; }
.form-group label { display: block; margin-bottom: .35rem; font-weight: 500; color: var(--ink-700); font-size: .92rem; }
.form-control, input[type="text"], input[type="password"], input[type="number"],
input[type="email"], input[type="date"], input[type="file"], select, textarea {
    width: 100%;
    min-height: 44px;
    padding: .6rem .85rem;
    font-family: var(--font);
    font-size: .95rem;
    color: var(--ink-900);
    background: var(--surface);
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius-md);
    transition: border-color .15s, box-shadow .15s;
}
.form-control:focus,
input:not([type="radio"]):not([type="checkbox"]):focus,
select:focus, textarea:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px var(--brand-100);
}
input[type="radio"]:focus-visible, input[type="checkbox"]:focus-visible {
    outline: 3px solid var(--brand-500);
    outline-offset: 2px;
}
.form-control::placeholder { color: var(--ink-400); }

/* ── เมนูข้าง ── */
.sidebar {
    background: var(--surface);
    border-right: 1px solid var(--line);
}
.nav-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .7rem .95rem;
    margin-bottom: .2rem;
    border-radius: var(--radius-md);
    color: var(--ink-700);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}
.nav-item:hover { background: var(--surface-sunken); color: var(--ink-900); }
.nav-item.active { background: var(--brand-600); color: #fff; font-weight: 600; }

/* ── แบบประเมิน 25 ข้อ ── */
.question-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 1rem 1.15rem;
    margin-bottom: .85rem;
    background: var(--surface);
}
.question-card:hover { border-color: var(--brand-100); background: var(--brand-50); }
.question-header { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: .75rem; }
.question-badge {
    flex: none;
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border-radius: var(--radius-full);
    background: var(--brand-100);
    color: var(--brand-700);
    font-size: .8rem; font-weight: 700;
}
.question-title { font-weight: 500; color: var(--ink-900); }

.radio-group { display: flex; flex-wrap: wrap; gap: .5rem; }
.radio-label {
    flex: 1 1 auto;
    min-width: 150px;
    display: flex; align-items: center; gap: .5rem;
    min-height: 44px;
    padding: .5rem .8rem;
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: .92rem;
    background: var(--surface);
    transition: border-color .15s, background-color .15s;
}
.radio-label:hover { border-color: var(--brand-500); }
.radio-label:has(input:checked) {
    border-color: var(--brand-600);
    background: var(--brand-50);
    color: var(--brand-700);
    font-weight: 600;
}
.radio-label input { accent-color: var(--brand-600); width: 18px; height: 18px; }

.result-box {
    padding: 1rem 1.25rem;
    border-radius: var(--radius-md);
    border-left: 4px solid var(--brand-600);
    background: var(--brand-50);
}

.student-info { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.info-item { display: flex; gap: .4rem; font-size: .92rem; color: var(--ink-500); }
.info-item .value { color: var(--ink-900); font-weight: 600; }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.background-decor { display: none; }   /* วงกลมประดับพื้นหลัง ทำให้รายงานอ่านยาก */

/* ── มือถือ ── */
@media (max-width: 768px) {
    body { font-size: 15px; }
    .container { padding: 1rem; }
    .card-body { padding: 1rem; }
    .radio-group { flex-direction: column; }
    .radio-label { flex: 1 1 auto; }
    .btn { width: 100%; }
    .actions .btn { width: auto; flex: 1 1 140px; }
    .sdq-table, .data-table { font-size: .88rem; }
    .sdq-table th, .sdq-table td, .data-table th, .data-table td { padding: .6rem .7rem; }
}

/* ── งานพิมพ์ A4 — รายงานถูกพิมพ์เก็บเข้าแฟ้มจริง ── */
@media print {
    :root { --page-bg: #fff; }
    body { background: #fff; font-size: 12pt; }
    .no-print, .sidebar, .btn, button, .background-decor { display: none !important; }
    .card { box-shadow: none; border: 1px solid #cbd5e1; break-inside: avoid; }
    .sdq-table, .data-table { font-size: 11pt; }
    .sdq-table tr, .data-table tr { break-inside: avoid; }
    .level-badge, .stat-card, .sdq-table th, .data-table th {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    a[href]::after { content: ""; }   /* ไม่ต้องพ่น URL ต่อท้ายลิงก์ในเอกสารราชการ */
    @page { size: A4; margin: 14mm; }
}

/* ── ลดการเคลื่อนไหวสำหรับผู้ที่ตั้งค่าไว้ ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}