/* ============================================================
   D-SYSTEM - Design System (ไฟล์กลาง ใช้ร่วมกันทุกหน้า)
   โหลด "ก่อน" student.css / admin.css เสมอ
   ============================================================ */

:root {
    /* พาเลตต์หลักของแบรนด์ (ชุดเดียวกันทั้งเว็บ) */
    --ds-primary: #3a8fd9;
    --ds-primary-dark: #2e72ae;
    --ds-secondary: #00b4d8;
    --ds-accent: #2563eb;
    --ds-sky: #0ea5e9;

    /* สีสถานะ (ปรับให้ทันสมัยและคอนทราสต์ผ่านมาตรฐาน) */
    --ds-success: #16a34a;
    --ds-warning: #d97706;
    --ds-danger: #dc2626;
    --ds-info: #0284c7;

    /* โทนกลาง */
    --ds-dark: #1a1a2e;
    --ds-bg: #f4f6f9;
    --ds-surface: #ffffff;
    --ds-text: #1f2937;
    --ds-muted: #6c757d;
    --ds-border: #e5e9f0;

    /* รูปแบบ */
    --ds-radius: 16px;
    --ds-radius-sm: 10px;
    --ds-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    --ds-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);

    /* ฟอนต์มาตรฐานทั้งเว็บ */
    --ds-font-body: 'Sarabun', 'Noto Sans Thai', -apple-system, 'Segoe UI', Tahoma, sans-serif;
    --ds-font-head: 'Prompt', 'Sarabun', 'Noto Sans Thai', -apple-system, 'Segoe UI', Tahoma, sans-serif;
}

/* ---------- ตัวอักษร: ใช้ Sarabun ทั้งเว็บ หัวข้อใช้ Prompt ---------- */
body {
    font-family: var(--ds-font-body);
    color: var(--ds-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.navbar-brand,
.login-logo h1 {
    font-family: var(--ds-font-head);
}

/* ---------- โลโก้แบรนด์ (ใช้ไอคอนเดียวกันทั้งเว็บ: bi-mortarboard-fill) ---------- */
.navbar-brand .bi-mortarboard-fill,
.login-logo .bi-mortarboard-fill {
    color: var(--ds-secondary);
}

/* ---------- สีเสริม: เหลืองที่อ่านได้บนพื้นขาว ---------- */
.text-warning-dark {
    color: var(--ds-warning) !important;
}

/* ---------- ตารางบนมือถือ: เลื่อนแนวนอนแทนการบีบอัด ---------- */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

.table-responsive > .table {
    min-width: 620px;
    margin-bottom: 0;
}

.table th {
    white-space: nowrap;
}

/* ---------- ปุ่มหลักของแบรนด์ ---------- */
.btn-primary {
    --bs-btn-bg: var(--ds-primary);
    --bs-btn-border-color: var(--ds-primary);
    --bs-btn-hover-bg: var(--ds-primary-dark);
    --bs-btn-hover-border-color: var(--ds-primary-dark);
    --bs-btn-active-bg: var(--ds-primary-dark);
    --bs-btn-active-border-color: var(--ds-primary-dark);
}

.btn-outline-primary {
    --bs-btn-color: var(--ds-primary);
    --bs-btn-border-color: var(--ds-primary);
    --bs-btn-hover-bg: var(--ds-primary);
    --bs-btn-hover-border-color: var(--ds-primary);
    --bs-btn-active-bg: var(--ds-primary-dark);
    --bs-btn-active-border-color: var(--ds-primary-dark);
}

/* ---------- ลิงก์สีแบรนด์ ---------- */
a {
    color: var(--ds-primary);
}

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

/* ---------- โฟกัสที่มองเห็นชัด (Accessibility) ---------- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    outline: 3px solid rgba(58, 143, 217, 0.45);
    outline-offset: 2px;
}

/* ---------- ส่วนที่เลือก (selection) ---------- */
::selection {
    background: rgba(58, 143, 217, 0.25);
}

/* ---------- การ์ดมาตรฐาน (เฉพาะหน้าที่ไม่ได้กำหนดเอง) ---------- */
.card {
    border-radius: var(--ds-radius);
}

/* ---------- ปรับจอเล็ก ---------- */
@media (max-width: 768px) {
    .table-responsive > .table {
        min-width: 560px;
    }

    body {
        font-size: 0.95rem;
    }
}