/* =====================================================================
   ระบบบันทึกผลการเรียน — ธีม "กล่องดินสอสี"
   แนวคิด: ทุกวิชา/ระดับชั้นมีสีประจำตัว (crayon color) ปรากฏซ้ำทุกหน้า
   Font: Mali (หัวข้อ/ปุ่ม) + Sarabun (เนื้อหา/ตาราง)
   ===================================================================== */

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

:root {
    /* กระดาษ / ตัวอักษร */
    --paper:        #FFFDF7;
    --paper-alt:     #FFF7E8;
    --ink:           #2D2A4A;
    --ink-soft:      #6B6690;
    --border:        #F0E6D2;

    /* ชุดสีดินสอสี */
    --sky:           #29ABE2;  --sky-light:       #E3F5FF;
    --sunshine:      #F5A623;  --sunshine-light:  #FFF6DA;
    --coral:         #FF6B6B;  --coral-light:     #FFE8E8;
    --mint:          #159E92;  --mint-light:      #E1FBF7;
    --grape:         #9B5DE5;  --grape-light:     #F3E8FF;
    --bubblegum:     #E0529C;  --bubblegum-light: #FFE3F1;

    --success:       #159E92;
    --error:         #E0526B;
    --warning:       #C97F00;

    --radius:        18px;
    --radius-sm:     12px;
    --shadow-soft:   0 4px 14px rgba(45, 42, 74, 0.08);
    --shadow-pop:    0 6px 0 rgba(45, 42, 74, 0.12);

    font-family: 'Sarabun', sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background:
        radial-gradient(circle at 8% 12%, var(--sky-light) 0%, transparent 40%),
        radial-gradient(circle at 95% 8%, var(--sunshine-light) 0%, transparent 35%),
        radial-gradient(circle at 90% 90%, var(--grape-light) 0%, transparent 40%),
        var(--paper);
    background-attachment: fixed;
    color: var(--ink);
}

/* ริบบิ้นสายรุ้งบนสุดของทุกหน้า — ลายเซ็นของธีมนี้ */
body::before {
    content: "";
    display: block;
    height: 6px;
    width: 100%;
    background: linear-gradient(90deg, var(--sky), var(--mint), var(--sunshine), var(--coral), var(--grape));
}

a { color: var(--sky); text-decoration: none; font-weight: 600; }
a:hover { color: var(--grape); text-decoration: underline; }

h1, h2, h3 { font-family: 'Mali', 'Sarabun', sans-serif; font-weight: 700; color: var(--ink); }
h1 { font-size: 1.7rem; margin-bottom: 4px; }
h3 { font-size: 1.15rem; margin-top: 26px; }

/* ---------- Topbar ---------- */
.topbar {
    display: flex; align-items: center; justify-content: space-between;
    background: #fff; border-bottom: 3px solid var(--border);
    padding: 12px 24px; flex-wrap: wrap; gap: 10px;
}
.topbar-brand {
    font-family: 'Mali', sans-serif; font-weight: 700; font-size: 1.25rem;
    color: var(--ink); display: flex; align-items: center; gap: 8px;
}
.topbar-brand .emoji { font-size: 1.5rem; }
.topbar-nav { display: flex; gap: 8px; flex-wrap: wrap; }
.topbar-nav a {
    color: var(--ink); font-weight: 600; font-size: 0.88rem;
    padding: 7px 14px; border-radius: 999px; background: var(--paper-alt);
    border: 2px solid transparent; transition: all .15s ease;
}
.topbar-nav a:hover {
    text-decoration: none; background: var(--sky-light);
    border-color: var(--sky); color: var(--ink); transform: translateY(-1px);
}
.topbar-user { display: flex; align-items: center; gap: 12px; font-size: 0.88rem; font-weight: 600; }
.btn-logout {
    color: var(--coral) !important; background: var(--coral-light);
    padding: 6px 14px; border-radius: 999px; font-weight: 700;
}
.btn-logout:hover { background: var(--coral); color: #fff !important; }

.container { max-width: 1200px; margin: 24px auto; padding: 0 18px; }
.muted { color: var(--ink-soft); }
.small { font-size: 0.85rem; }
.center { text-align: center; }
.text-left { text-align: left !important; }

/* ---------- Cards (dashboard) ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; margin-top: 18px; }
.card {
    background: #fff; border-radius: var(--radius); padding: 18px;
    box-shadow: var(--shadow-soft); margin-bottom: 14px;
    border-top: 6px solid var(--sky);
    position: relative; overflow: hidden;
}
.card h3 { margin-top: 0; }
.card-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

/* แถบสีดินสอสี ผูกกับ subject/grade — ใส่ class crayon-0..5 จาก PHP */
.crayon-0 { border-top-color: var(--sky) !important; }
.crayon-1 { border-top-color: var(--coral) !important; }
.crayon-2 { border-top-color: var(--sunshine) !important; }
.crayon-3 { border-top-color: var(--grape) !important; }
.crayon-4 { border-top-color: var(--mint) !important; }
.crayon-5 { border-top-color: var(--bubblegum) !important; }

.badge {
    display: inline-block; padding: 3px 11px; border-radius: 999px;
    font-size: 0.78rem; font-weight: 700;
}
.badge-0 { background: var(--sky-light); color: #1178a3; }
.badge-1 { background: var(--coral-light); color: #c23e3e; }
.badge-2 { background: var(--sunshine-light); color: var(--warning); }
.badge-3 { background: var(--grape-light); color: #6c34ad; }
.badge-4 { background: var(--mint-light); color: var(--mint); }
.badge-5 { background: var(--bubblegum-light); color: var(--bubblegum); }

/* ---------- Buttons ---------- */
.btn {
    display: inline-block; padding: 9px 18px; border-radius: 999px; border: none;
    background: #fff; color: var(--ink); cursor: pointer; font-weight: 700;
    font-size: 0.9rem; text-decoration: none; box-shadow: var(--shadow-pop);
    border: 2px solid var(--border);
    transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(1px); box-shadow: 0 2px 0 rgba(45,42,74,0.12); }
.btn-primary { background: var(--sky); color: #fff; border-color: var(--sky); box-shadow: 0 6px 0 #1a86b3; }
.btn-primary:hover { background: #1e9bd1; }
.btn-sm { padding: 6px 13px; font-size: 0.8rem; box-shadow: 0 4px 0 rgba(45,42,74,0.12); }
.btn-xs { padding: 4px 10px; font-size: 0.76rem; box-shadow: 0 3px 0 rgba(45,42,74,0.1); }

/* ---------- Alerts ---------- */
.alert { padding: 12px 16px; border-radius: var(--radius-sm); margin: 12px 0; font-size: 0.9rem; font-weight: 600; }
.alert-success { background: var(--mint-light); color: #0d7269; border: 2px solid var(--mint); }
.alert-error { background: var(--coral-light); color: #b53f3f; border: 2px solid var(--coral); }
.alert-warning { background: var(--sunshine-light); color: var(--warning); border: 2px solid var(--sunshine); }

/* ---------- Login ---------- */
.login-box {
    max-width: 380px; margin: 70px auto; background: #fff;
    padding: 32px; border-radius: 24px; box-shadow: var(--shadow-soft);
    border: 3px solid var(--sky-light); text-align: center; position: relative;
}
.login-box::before {
    content: "✏️ 📏 🖍️"; display: block; font-size: 1.4rem; letter-spacing: 10px;
    margin-bottom: 6px;
}
.login-box h1 { margin-bottom: 2px; }
.login-box form { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; text-align: left; }
.login-box label { display: flex; flex-direction: column; gap: 5px; font-size: 0.9rem; font-weight: 600; }
.login-box button { margin-top: 6px; }

/* ---------- Forms ---------- */
.form-box, .form-box-inline {
    background: #fff; border-radius: var(--radius); padding: 18px;
    box-shadow: var(--shadow-soft);
}
.form-box { display: flex; flex-direction: column; gap: 13px; max-width: 480px; }
.form-box-inline { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; margin-bottom: 16px; }
.form-box-inline label, .form-box label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; font-weight: 600; }

input, select, textarea {
    padding: 8px 12px; border: 2px solid var(--border); border-radius: var(--radius-sm);
    font-size: 0.9rem; font-family: 'Sarabun', sans-serif; background: var(--paper);
    transition: border-color .12s ease;
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px var(--sky-light);
}

.filter-bar {
    display: flex; gap: 18px; flex-wrap: wrap; margin: 16px 0;
    background: #fff; padding: 14px 18px; border-radius: var(--radius); box-shadow: var(--shadow-soft);
}
.filter-bar label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; font-weight: 600; }

/* ---------- Tables ---------- */
.table-scroll { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.data-table { width: 100%; border-collapse: collapse; background: #fff; font-size: 0.87rem; }
.data-table th, .data-table td { border: 1px solid var(--border); padding: 8px 10px; text-align: center; white-space: nowrap; }
.data-table thead th { background: var(--sky-light); color: var(--ink); font-family: 'Mali', sans-serif; font-weight: 700; }
.data-table tbody tr:nth-child(even) { background: #FFFCF5; }
.data-table tbody tr:hover { background: var(--sunshine-light); }
.total-row td { background: var(--grape-light) !important; font-weight: 700; }

.score-table input[type=number] { width: 58px; text-align: center; border-radius: 8px; }
.score-table thead th small { color: var(--ink-soft); font-weight: 500; }

.inline-edit { display: inline-flex; align-items: center; gap: 4px; margin: 2px 6px 2px 0; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 700px) { .two-col { grid-template-columns: 1fr; } }

.site-footer {
    text-align: center; color: var(--ink-soft); font-size: 0.82rem; padding: 34px 0 18px;
    font-family: 'Mali', sans-serif;
}

/* ---------- Report card (printable) ---------- */
.report-sheet {
    background: #fff; border-radius: var(--radius); padding: 28px; margin-top: 18px;
    box-shadow: var(--shadow-soft); border-top: 8px solid var(--grape);
}
.sign-row { display: flex; justify-content: space-between; margin-top: 44px; font-size: 0.9rem; }

@media print {
    body::before { display: none; }
    body { background: #fff; }
    .topbar, .no-print, .site-footer, .filter-bar { display: none !important; }
    .container { margin: 0; max-width: 100%; }
    .report-sheet { border: none; box-shadow: none; padding: 0; }
}

/* Focus visibility for accessibility */
a:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible {
    outline: 3px solid var(--grape); outline-offset: 2px;
}