/* ==========================================================================
   TSPI Clinic theme (Bootstrap 5 overrides)
   หลักการ: อ่านง่ายสำหรับผู้สูงอายุ — ตัวหนังสือ 17px, ปุ่มสูง ≥ 48px, คอนทราสต์สูง, ภาษาไทยก่อน
   โหลดหลัง bootstrap.min.css และสไตล์ในหน้า เพื่อให้ทุกหน้าเปลี่ยนตามชุดเดียวกัน
   ========================================================================== */

@font-face { font-family: 'Sarabun'; src: url('../fonts/Sarabun-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Sarabun'; src: url('../fonts/Sarabun-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Sarabun'; src: url('../fonts/Sarabun-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Sarabun'; src: url('../fonts/Sarabun-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }

:root {
    /* แบรนด์ */
    --tspi-green-900: #14532D;
    --tspi-green-700: #1E7A3C;
    --tspi-green-600: #2E7D32;
    --tspi-green-100: #DCFCE7;
    --tspi-green-50:  #F0FDF4;
    --tspi-ink:       #0F172A;
    --tspi-muted:     #475569;
    --tspi-line:      #E2E8F0;
    --tspi-surface:   #FFFFFF;
    --tspi-canvas:    #F7FAF8;
    --tspi-danger:    #B91C1C;

    --tspi-radius:    14px;
    --tspi-radius-lg: 22px;
    --tspi-shadow:    0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .06);

    /* Bootstrap variables */
    --bs-primary: var(--tspi-green-600);
    --bs-primary-rgb: 46, 125, 50;
    --bs-success: var(--tspi-green-600);
    --bs-success-rgb: 46, 125, 50;
    --bs-body-font-family: 'Sarabun', 'Noto Sans Thai', system-ui, sans-serif;
    --bs-body-font-size: 1.0625rem;      /* 17px */
    --bs-body-line-height: 1.65;
    --bs-body-color: var(--tspi-ink);
    --bs-body-bg: var(--tspi-canvas);
    --bs-secondary-color: var(--tspi-muted);
    --bs-border-color: var(--tspi-line);
    --bs-border-radius: var(--tspi-radius);
    --bs-border-radius-lg: var(--tspi-radius-lg);
    --bs-link-color: var(--tspi-green-700);
    --bs-link-hover-color: var(--tspi-green-900);
    --bs-focus-ring-color: rgba(46, 125, 50, .35);
}

html { font-size: 100%; }
body {
    font-family: var(--bs-body-font-family) !important;
    font-size: var(--bs-body-font-size);
    line-height: var(--bs-body-line-height);
    color: var(--bs-body-color);
    background: var(--bs-body-bg);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--bs-body-font-family) !important;
    color: var(--tspi-ink);
    font-weight: 700;
    line-height: 1.3;
}
small, .small { font-size: .9rem; }
.text-muted { color: var(--tspi-muted) !important; }

/* ---------- ปุ่ม: สูงอย่างน้อย 48px กดง่าย ---------- */
.btn {
    font-family: var(--bs-body-font-family);
    font-weight: 600;
    border-radius: 12px;
    min-height: 44px;
    padding: .55rem 1.15rem;
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
}
.btn-lg { min-height: 52px; font-size: 1.125rem; padding: .7rem 1.5rem; border-radius: 14px; }
.btn-sm { min-height: 36px; padding: .35rem .8rem; font-size: .95rem; }
.btn-primary, .btn-success {
    --bs-btn-bg: var(--tspi-green-600); --bs-btn-border-color: var(--tspi-green-600);
    --bs-btn-hover-bg: var(--tspi-green-700); --bs-btn-hover-border-color: var(--tspi-green-700);
    --bs-btn-active-bg: var(--tspi-green-900); --bs-btn-active-border-color: var(--tspi-green-900);
    --bs-btn-disabled-bg: #94A3B8; --bs-btn-disabled-border-color: #94A3B8;
}
.btn-outline-primary, .btn-outline-success {
    --bs-btn-color: var(--tspi-green-700); --bs-btn-border-color: var(--tspi-green-600);
    --bs-btn-hover-bg: var(--tspi-green-600); --bs-btn-hover-border-color: var(--tspi-green-600); --bs-btn-hover-color: #fff;
}
.text-primary, .text-success { color: var(--tspi-green-700) !important; }
.bg-primary, .bg-success { background-color: var(--tspi-green-600) !important; }

/* ---------- การ์ดและฟอร์ม ---------- */
.card { border: 1px solid var(--tspi-line); border-radius: var(--tspi-radius-lg); box-shadow: var(--tspi-shadow); }
.form-control, .form-select { min-height: 48px; font-size: 1.0625rem; border-radius: 12px; border-color: #CBD5E1; }
.form-control:focus, .form-select:focus { border-color: var(--tspi-green-600); box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }
.form-label { font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; }
}