/* Theme CSS กลางของระบบ
   สีธีมจริงมาจาก theme_vars.php (อ่านค่าที่บันทึกในหน้าตั้งค่าระบบจากฐานข้อมูล) จึงไม่หายเมื่อ git pull
   บล็อกด้านล่างเป็นค่าสำรองเท่านั้น ใช้ :where() ให้ความสำคัญต่ำกว่า :root จาก theme_vars.php เสมอ */
@import url("theme_vars.php");

:where(:root) {
    --earthy-bg: #ffffff;
    --earthy-primary: #2563eb;
    --earthy-primary-hover: #1d4ed8;
    --earthy-secondary: #0284c7;
    --earthy-secondary-hover: #0369a1;
    --earthy-text: #1e293b;
    --earthy-text-muted: #64748b;
    --earthy-border: #cbd5e1;
    --earthy-card-bg: #ffffff;
    --earthy-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
    --earthy-primary-rgb: 37, 99, 235;
    --earthy-secondary-rgb: 2, 132, 199;
    --theme-clock-bg: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%);
    --theme-clock-shadow: 0 8px 25px rgba(37, 99, 235, 0.35);
    --theme-qc-leave: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    --theme-qc-assembly: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    --theme-qc-late: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
    --theme-qc-student: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
}

/* ==========================================================================
   Design tokens (ไม่ใช้ :root เพราะ applySystemTheme() เขียนทับทุกบล็อก :root)
   ========================================================================== */
html {
    --app-font: 'Sarabun', 'Prompt', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --app-radius-sm: 8px;
    --app-radius: 12px;
    --app-radius-lg: 16px;
    /* สีบอกสถานะ — คงความหมายเดิม ไม่ผูกกับสีธีม */
    --app-success: #15803d;
    --app-success-bg: #dcfce7;
    --app-danger: #b91c1c;
    --app-danger-bg: #fee2e2;
    --app-warning: #b45309;
    --app-warning-bg: #fef3c7;
    --app-info: #0369a1;
    --app-info-bg: #e0f2fe;
    --app-focus-ring: 0 0 0 3px rgba(var(--earthy-primary-rgb), 0.35);
    -webkit-text-size-adjust: 100%;
}

/* ---------- Base ---------- */
html body {
    font-family: var(--app-font);
    background-color: var(--earthy-bg);
    color: var(--earthy-text);
    line-height: 1.6; /* ภาษาไทยต้องการระยะบรรทัดเผื่อสระบน/ล่าง */
}
h1, h2, h3, h4, h5, h6, .text-dark { color: var(--earthy-text) !important; }
.text-muted, .text-secondary { color: var(--earthy-text-muted) !important; }
.text-primary { color: var(--earthy-primary) !important; }

/* ตัวหนังสือภาษาไทยขั้นต่ำที่อ่านได้บนมือถือ */
small, .small { font-size: max(0.8125rem, 12px); }
.badge { font-size: max(0.75em, 11.5px); font-weight: 600; letter-spacing: 0.01em; }
.form-text { font-size: max(0.8125rem, 12px); }

a { color: var(--earthy-primary); }
a:hover { color: var(--earthy-primary-hover); }

/* โฟกัสที่มองเห็นได้สำหรับคีย์บอร์ด */
:focus-visible {
    outline: 2px solid var(--earthy-primary);
    outline-offset: 2px;
}

/* ---------- Semantic colors: ไม่ทับสีแดง/เขียว/เหลือง ด้วยสีธีมอีกต่อไป ---------- */
.text-success { color: var(--app-success) !important; }
.text-danger  { color: var(--app-danger) !important; }
.text-warning { color: var(--app-warning) !important; }
.text-info    { color: var(--app-info) !important; }

.bg-light { background-color: var(--earthy-bg) !important; }
.bg-primary { background-color: var(--earthy-primary) !important; color: #fff !important; }

/* ---------- Buttons ---------- */
.btn { border-radius: var(--app-radius-sm); font-weight: 500; }
.btn-primary {
    background-color: var(--earthy-primary) !important;
    border-color: var(--earthy-primary) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(var(--earthy-primary-rgb), 0.25) !important;
}
.btn-primary:hover, .btn-primary:focus-visible {
    background-color: var(--earthy-primary-hover) !important;
    border-color: var(--earthy-primary-hover) !important;
}
.btn-outline-primary {
    color: var(--earthy-primary) !important;
    border-color: var(--earthy-primary) !important;
}
.btn-outline-primary:hover {
    background-color: var(--earthy-primary) !important;
    color: #fff !important;
}
.btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: var(--app-focus-ring) !important;
}
/* ปุ่มบนจอสัมผัสต้องกดง่าย */
@media (pointer: coarse) {
    .btn:not(.btn-sm):not(.btn-action) { min-height: 44px; }
    .form-control, .form-select { min-height: 44px; }
}

/* ---------- Cards & Containers ---------- */
.card, .card-box {
    --bs-card-border-radius: var(--app-radius-lg);
    --bs-card-inner-border-radius: calc(var(--app-radius-lg) - 1px);
    background-color: var(--earthy-card-bg) !important;
    border: 1px solid var(--earthy-border) !important;
    border-radius: var(--app-radius-lg) !important;
    box-shadow: var(--earthy-shadow) !important;
}
/* ลูกชิ้นแรก/ชิ้นสุดท้ายที่มีพื้นหลัง (header, footer, ตาราง, list-group ฯลฯ) ต้องโค้งตามการ์ด
   ไม่งั้นจะทับเส้นขอบตรงมุมทำให้เส้นขอบมุมล่างซ้าย/ขวาหายไป */
.card > :first-child, .card-box > :first-child {
    border-top-left-radius: calc(var(--app-radius-lg) - 1px);
    border-top-right-radius: calc(var(--app-radius-lg) - 1px);
}
.card > :last-child, .card-box > :last-child {
    border-bottom-left-radius: calc(var(--app-radius-lg) - 1px);
    border-bottom-right-radius: calc(var(--app-radius-lg) - 1px);
}
.card > .card-body.p-0:last-child, .card > .table-responsive:last-child, .card > .list-group:last-child,
.card > .card-body.p-0:last-child > .table-responsive:last-child, .card > .card-body.p-0:last-child > .list-group:last-child,
.card > .table:last-child, .card > .card-body.p-0:last-child > .table:last-child {
    overflow: hidden;
    border-bottom-left-radius: calc(var(--app-radius-lg) - 1px);
    border-bottom-right-radius: calc(var(--app-radius-lg) - 1px);
}
.card > .card-body.p-0:last-child > .table-responsive:last-child { overflow-x: auto; }
.card-header {
    background-color: transparent !important;
    border-bottom: 1px solid var(--earthy-border) !important;
}
.card-footer {
    border-top: 1px solid var(--earthy-border) !important;
}
.card-header:first-child { border-radius: calc(var(--app-radius-lg) - 1px) calc(var(--app-radius-lg) - 1px) 0 0 !important; }
.card-footer:last-child { border-radius: 0 0 calc(var(--app-radius-lg) - 1px) calc(var(--app-radius-lg) - 1px) !important; }

/* ---------- Sidebar (dashboard.php) ---------- */
#sidebar {
    background-color: var(--earthy-card-bg) !important;
    border-right: 1px solid var(--earthy-border) !important;
}
.sidebar-header {
    background-color: rgba(var(--earthy-primary-rgb), 0.06) !important;
    border-bottom: 1px solid var(--earthy-border) !important;
}
#sidebar .nav-link { color: var(--earthy-text) !important; }
#sidebar .nav-link:hover, #sidebar .nav-link.active,
#sidebar ul li ul .nav-link:hover, #sidebar ul li ul .nav-link.active {
    background-color: rgba(var(--earthy-primary-rgb), 0.10) !important;
    color: var(--earthy-primary) !important;
}
#sidebar .nav-link:hover i, #sidebar .nav-link.active i { color: var(--earthy-primary) !important; }

/* ---------- Top Nav ---------- */
#top-nav {
    background-color: var(--earthy-card-bg) !important;
    border-bottom: 1px solid var(--earthy-border) !important;
}

/* ---------- Tables ---------- */
.table th {
    background-color: rgba(var(--earthy-primary-rgb), 0.04) !important;
    color: var(--earthy-text) !important;
    border-bottom: 2px solid var(--earthy-border) !important;
    font-weight: 600;
}
.table td { border-color: var(--earthy-border) !important; color: var(--earthy-text); }
/* ตารางกว้างเลื่อนแนวนอนได้ในกล่อง แทนการล้นจอ */
.table-scroll, .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Modals ---------- */
.modal-content {
    border-radius: var(--app-radius-lg) !important;
    border: none !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12) !important;
}
.modal-header { border-bottom: 1px solid var(--earthy-border) !important; }
.modal-footer { border-top: 1px solid var(--earthy-border) !important; }

/* ---------- Badges: primary ตามธีม ส่วนสีสถานะคงความหมาย ---------- */
.badge.bg-primary { background-color: var(--earthy-primary) !important; }

/* ---------- Form Controls ---------- */
.form-control, .form-select {
    border-color: var(--earthy-border) !important;
    border-radius: 10px !important;
    background-color: #fff !important;
}
.form-control:focus, .form-select:focus { border-color: var(--earthy-primary) !important; }
.form-check-input:checked {
    background-color: var(--earthy-primary);
    border-color: var(--earthy-primary);
}

/* ---------- Pastel stat boxes: คืนสีบอกสถานะ (เขียว/แดง/เหลือง/ฟ้า) ---------- */
.bg-pastel-green  { background-color: var(--app-success-bg) !important; color: var(--app-success) !important; }
.bg-pastel-red    { background-color: var(--app-danger-bg) !important;  color: var(--app-danger) !important; }
.bg-pastel-yellow { background-color: var(--app-warning-bg) !important; color: var(--app-warning) !important; }
.bg-pastel-blue   { background-color: var(--app-info-bg) !important;    color: var(--app-info) !important; }
.bg-pastel-green h3  { color: var(--app-success) !important; }
.bg-pastel-red h3    { color: var(--app-danger) !important; }
.bg-pastel-yellow h3 { color: var(--app-warning) !important; }
.bg-pastel-blue h3   { color: var(--app-info) !important; }

/* ---------- Clock Card ---------- */
.clock-card {
    background: var(--theme-clock-bg, linear-gradient(135deg, var(--earthy-primary) 0%, var(--earthy-primary-hover) 100%)) !important;
    box-shadow: var(--theme-clock-shadow, 0 8px 25px rgba(var(--earthy-primary-rgb), 0.35)) !important;
}
.clock-card h1, .clock-card p, .clock-card span, .clock-card i { color: #ffffff !important; }
.clock-card .status-badge {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.2) !important;
}

/* ---------- Quick Access Cards ---------- */
.qc-leave { background: var(--theme-qc-leave, linear-gradient(135deg, var(--earthy-secondary) 0%, var(--earthy-secondary-hover) 100%)) !important; color: #fff !important; }
.qc-assembly { background: var(--theme-qc-assembly, linear-gradient(135deg, var(--earthy-primary) 0%, var(--earthy-primary-hover) 100%)) !important; color: #fff !important; }
.qc-late { background: var(--theme-qc-late, linear-gradient(135deg, var(--earthy-secondary) 0%, var(--earthy-primary) 100%)) !important; color: #fff !important; }
.qc-student { background: var(--theme-qc-student, linear-gradient(135deg, var(--earthy-primary) 0%, var(--earthy-secondary) 100%)) !important; color: #fff !important; }

/* ---------- ลายเซ็น: ตัวเลือกใช้ลายเซ็นที่บันทึกไว้ / ไม่ลงนาม ---------- */
.sig-choice { display: flex; flex-wrap: wrap; gap: 8px; }
.sig-choice .btn-check + .btn { border-radius: 999px; }
.sig-preview {
    border: 1px dashed var(--earthy-border);
    border-radius: var(--app-radius);
    background: #fff;
    padding: 8px;
    text-align: center;
}
.sig-preview img { max-height: 70px; max-width: 90%; object-fit: contain; }

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

/* ---------- พิมพ์ ---------- */
@media print {
    #sidebar, #top-nav, .no-print { display: none !important; }
    .card, .card-box { box-shadow: none !important; }
}

/* iOS ซูมอัตโนมัติเมื่อช่องกรอกเล็กกว่า 16px — ใช้แทนการปิดซูมทั้งหน้า (user-scalable=no) */
@media (pointer: coarse) {
    input.form-control, select.form-select, textarea.form-control { font-size: 16px; }
}