/* =========================================
   1. Variables & Global Reset
   ========================================= */
:root {
    /* Color Palette - Mint & Pastel Theme */
    --primary-color: #152977;       /* เขียวมิ้นท์ (Main Theme) */
    --primary-hover: #1A3490;       /* Navy เข้ม (Hover) */
    --primary-menu: #fff; 
    --secondary-color: #ffc107;     /* เหลือง (Highlight) */
    --bg-light: #edf4fc;            /* พื้นหลังหน้าเว็บ (ฟ้าอ่อน) */
    --bg-white: #ffffff;            /* พื้นหลัง Card */
    
    /* Text Colors (ปรับใหม่ตามที่ระบุ) */
    --text-body: #6a6161;           /* สีเนื้อหาหลัก Body */
    --text-heading: #666666;        /* สีหัวข้อ H1-H6 */
    --text-muted: #9e9e9e;          /* สีข้อความรอง (จางลงเล็กน้อย) */
    
    /* Shapes & Shadows */
    --card-radius: 20px;            
    --input-radius: 12px;           
    --sidebar-width: 16rem;
    --shadow-soft: 0 5px 20px rgba(0,0,0,0.05); 
    --shadow-login: 0 10px 30px rgba(0,0,0,0.08);
}

body {
    font-family: "Kanit", sans-serif;
    font-weight: 300;
    font-style: normal;
    background-color: var(--bg-light);
    color: var(--text-body); /* ใช้สี #6a6161 */
    overflow-x: hidden;
    
}

/* กำหนดสีหัวข้อทั้งหมด (h1 - h6) */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--text-heading) !important; /* ใช้สี #666666 */
    font-weight: 300 !important;
}

a {
    text-decoration: none;
    color: var( --text-body) !important ;
}
/* NOTE: bg-primary override below — do not redefine here */
.logo-icon{
    color: var(--primary-color) !important;
}
.text-primary {
    color: var(--primary-color) !important;
}
.dropdown-item.active{
      background-color: var(--primary-color) !important;
    color: var( --text-body) !important;
}
.btn-outline-primary {
    --bs-btn-color: var( --text-body) !important;
    --bs-btn-border-color: var(--primary-color) !important;
    --bs-btn-hover-color: var(--primary-menu) !important;
    --bs-btn-hover-bg: var( --primary-color) !important;
    --bs-btn-hover-border-color: var( --primary-color) !important;
    --bs-btn-focus-shadow-rgb: 38, 198, 218;

    --bs-gradient: none;
}
.active>.page-link{
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-menu) !important;
}
.bg-primary {
    background-color: var(--primary-color) !important;
    color: var( --primary-menu) !important;
}
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected, .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
    color: #fff !important;
    background-color: var(--primary-color) !important;
}

/* =========================================
   2. Login Page Styles
   ========================================= */
body.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.login-card {
    width: 100%;
    max-width: 420px;
    padding: 2.5rem;
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-login);
    background: var(--bg-white);
    border: none;
}

.brand-logo {
    text-align: center;
    margin-bottom: 30px;
    color: var(--primary-color);
    font-weight: 700;
    font-size: 28px;
    letter-spacing: 1px;
}

/* =========================================
   3. Dashboard Layout & Sidebar
   ========================================= */
#wrapper {
    display: flex;
    width: 100%;
    position: relative;
    overflow-x: clip; /* ต้องใช้ clip ไม่ใช่ hidden — hidden สร้าง scrolling context ทำให้ position:sticky ไม่ทำงาน */
}

/* ตั้งค่า Sidebar ปกติ */
#sidebar-wrapper {
    width: var(--sidebar-width);
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0; 
    z-index: 1050; /* อยู่ชั้นบนสุด */
    background: var(--primary-color);
    transition: all 0.3s ease; /* Effect การเลื่อน */
    overflow-y: auto; /* สำคัญ! ให้ Sidebar เลื่อนขึ้นลงได้ถ้าเมนูยาว */
    box-shadow: 4px 0 10px rgba(0,0,0,0.05);
    color: var(--primary-menu);
    border: ;var(--primary-color);
}

#sidebar-wrapper .list-group, .list-group-item, .list-group-item.active{
    color: var(--primary-menu) !important;
    border-color: var(--primary-color) !important;
}
/* Content ปกติ */
#page-content-wrapper {
    width: 100%;
    margin-left: var(--sidebar-width);
    padding: 0;
    transition: all 0.3s ease;
    min-height: 100vh;
}

@media (max-width: 768px) {
    
    /* ปกติในมือถือ: ซ่อน Sidebar ไปทางซ้าย (-16rem) */
    #sidebar-wrapper {
        left: calc(-1 * var(--sidebar-width));
    }
    
    /* ปกติในมือถือ: เนื้อหาเต็มจอ */
    #page-content-wrapper {
        margin-left: 0;
    }

    /* --- เมื่อกดปุ่ม 3 ขีด (Javascript จะเติม class 'toggled') --- */
    
    /* 1. เลื่อน Sidebar กลับเข้ามาที่ 0 */
    #wrapper.toggled #sidebar-wrapper {
        left: 0;
        box-shadow: 5px 0 15px rgba(0,0,0,0.3);
    }

    /* 2. สร้างฉากหลังสีดำจางๆ (Overlay) */
    #wrapper.toggled::after {
        content: "";
        position: fixed;
        top: 0; 
        left: 0; 
        width: 100vw; 
        height: 100vh;
        background: rgba(0,0,0,0.5); /* ดำโปร่งแสง */
        z-index: 1040; /* อยู่หลัง Sidebar แต่อยู่หน้า Content */
        backdrop-filter: blur(2px); /* เบลอฉากหลัง */
    }
    
    /* 3. ล็อกไม่ให้เลื่อนหน้าจอหลักขณะเปิดเมนู */
    body.menu-open {
        overflow: hidden;
    }
}

#sidebar-wrapper .list-group-item:hover,
#sidebar-wrapper .list-group-item.active {
    background: rgba(255,255,255,0.25);
    color: white;
}

#sidebar-wrapper .list-group-item i {
    margin-right: 12px;
    font-size: 1.3rem;
}

#page-content-wrapper {
    width: 100%;
    transition: margin .25s ease-out;
}

/* =========================================
   4. Topbar & Navigation
   ========================================= */
.topbar {
    background: var(--bg-white);
    padding: 1rem 2rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    margin-bottom: 2rem;
    border-radius: 0 0 var(--card-radius) var(--card-radius);
}

/* =========================================
   5. Cards & Widgets
   ========================================= */
.container-fluid {
    padding: 0 2rem 2rem 2rem;
}

.card {
    border: none;
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-soft);
    background: var(--bg-white);
    margin-bottom: 25px;
    transition: transform 0.3s ease;
}

.card:hover {
    transform: translateY(-3px);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid #f0f2f5;
    font-weight: 700;
    padding: 1.25rem 1.5rem;
    font-size: 1.1rem;
    color: var(--text-heading); /* ใช้สีหัวข้อ */
}

.card-body {
    padding: 1.5rem;
}

/* Stat Cards */
.stat-card {
    text-align: center;
    padding: 1.5rem 1rem !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.stat-card h3 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 5px;
}

.stat-card p {
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 0;
    font-size: 0.9rem;
}

/* =========================================
   6. Forms & Inputs
   ========================================= */
.form-control, 
.form-select {
    border-radius: var(--input-radius);
    border: 1px solid #eceff1;
    padding: 0.6rem 1rem;
    background-color: #f9fbfc;
    color: var(--text-body); /* ใช้สีเนื้อหา */
    font-size: 0.95rem;
}

.form-control:focus, 
.form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(38, 198, 218, 0.15);
    background-color: #fff;
}

.btn-primary {
    background-color: var(--primary-color)!important;
    border: none;
    border-radius: var(--input-radius);
    padding: 0.6rem 1.5rem;
    font-weight: 600;
    transition: all 0.3s;
    color: var(--primary-menu)!important;
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    transform: translateY(-1px);
}

.btn-light {
    background-color: #f8f9fa;
    border: 1px solid #eceff1;
    color: var(--primary-color);
}
.btn-success
{
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-menu) !important;
}
.btn-outline-secondary {
    --bs-btn-color: var( --text-body) !important;
    --bs-btn-border-color: var(--primary-menu) !important;
    --bs-btn-hover-color: var(--text-body) !important;
    --bs-btn-hover-bg: var( --primary-menu) !important;
    --bs-btn-hover-border-color: var( --primary-color) !important;
    --bs-btn-focus-shadow-rgb: 108, 117, 125;

    --bs-gradient: none;
}
/* =========================================
   7. Tables
   ========================================= */
.table thead th {
    border-top: none;
    border-bottom: 2px solid #f0f2f5;
    color: var(--text-heading); /* ใช้สีหัวข้อ */
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    background-color: #fcfcfc;
}

.table tbody td {
    vertical-align: middle;
    border-bottom: 1px solid #f0f2f5;
    padding: 1rem 0.75rem;
    color: var(--text-body); /* ใช้สีเนื้อหา */
}

.table-hover tbody tr:hover {
    background-color: rgba(38, 198, 218, 0.05);
}

.badge {
    border-radius: 8px;
    padding: 6px 12px;
    font-weight: 600;
    font-size: 0.8rem;
}

/* =========================================
   8. FullCalendar Style
   ========================================= */
.fc .fc-toolbar-title {
    color: var(--text-heading);
}

.fc-daygrid-day-number {
    color: var(--text-body);
    text-decoration: none;
}

.kanit-thin {
  font-family: "Kanit", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.kanit-extralight {
  font-family: "Kanit", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.kanit-light {
  font-family: "Kanit", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.kanit-regular {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.kanit-medium {
  font-family: "Kanit", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.kanit-semibold {
  font-family: "Kanit", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.kanit-bold {
  font-family: "Kanit", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.kanit-extrabold {
  font-family: "Kanit", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.kanit-black {
  font-family: "Kanit", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.kanit-thin-italic {
  font-family: "Kanit", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.kanit-extralight-italic {
  font-family: "Kanit", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.kanit-light-italic {
  font-family: "Kanit", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.kanit-regular-italic {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.kanit-medium-italic {
  font-family: "Kanit", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.kanit-semibold-italic {
  font-family: "Kanit", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.kanit-bold-italic {
  font-family: "Kanit", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.kanit-extrabold-italic {
  font-family: "Kanit", sans-serif;
  font-weight: 800;
  font-style: italic;
}

.kanit-black-italic {
  font-family: "Kanit", sans-serif;
  font-weight: 900;
  font-style: italic;
}




/* === Layout Logic === */
#wrapper {
    display: flex;
    width: 100%;
    position: relative;
    transition: all 0.3s ease;
}

#sidebar-wrapper {
    width: var(--sidebar-width);
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0; /* Desktop: Show by default */
    z-index: 1050;
    background: var(--primary-color);
    transition: all 0.3s ease;
    overflow-y: auto;
    box-shadow: 4px 0 10px rgba(0,0,0,0.05);
}

#page-content-wrapper {
    width: 100%;
    margin-left: var(--sidebar-width); /* Desktop: Push content */
    padding: 0;
    transition: all 0.3s ease;
    min-height: 100vh;
}

/* === Mobile Responsiveness (Screen < 768px) === */
@media (max-width: 768px) {
    /* ซ่อน Sidebar ไปทางซ้าย */
    #sidebar-wrapper {
        left: calc(-1 * var(--sidebar-width));
    }
    
    /* Content เต็มจอ */
    #page-content-wrapper {
        margin-left: 0;
    }

    /* เมื่อกดเปิดเมนู (Class 'toggled' จะถูกเติมด้วย JS) */
    #wrapper.toggled #sidebar-wrapper {
        left: 0;
        box-shadow: 5px 0 15px rgba(0,0,0,0.2);
    }

    /* Overlay (ฉากหลังดำจางๆ) */
    #wrapper.toggled::after {
        content: "";
        position: fixed;
        top: 0; 
        left: 0; 
        width: 100vw; 
        height: 100vh;
        background: rgba(0,0,0,0.4);
        z-index: 1040; /* อยู่หลัง Sidebar แต่อยู่หน้า Content */
        backdrop-filter: blur(2px);
    }
    
    /* ป้องกันการเลื่อนหน้าจอหลัง Overlay */
    body.menu-open {
        overflow: hidden;
    }
}

/* =========================================
   MOBILE & TABLET RESPONSIVE IMPROVEMENTS
   ========================================= */

/* --- Sidebar Backdrop (Real Element) — mobile only --- */
#sidebar-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
    z-index: 1045; /* อยู่ระหว่าง sidebar (1050) กับ content */
}
/* แสดง backdrop เฉพาะ Mobile เมื่อเปิด Sidebar (.toggled จาก topbar.php) */
@media (max-width: 768px) {
    #wrapper.toggled #sidebar-backdrop {
        display: block;
    }
}

/* --- DataTables & Tables: Horizontal Scroll on Small Screens --- */
.dataTables_wrapper,
.dataTables_scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

/* --- Tablet (992px and below) --- */
@media (max-width: 991.98px) {
    .container-fluid {
        padding: 0 1rem 1.5rem 1rem;
    }
    .stat-card {
        margin-bottom: 1rem;
    }
    /* ปิด hover lift effect บน Touch screens */
    .card:hover {
        transform: none;
        box-shadow: var(--shadow-soft);
    }
}

/* --- Mobile (768px and below) --- */
@media (max-width: 767.98px) {
    /* Container padding แคบลงบน Mobile */
    .container-fluid {
        padding: 0 0.75rem 1rem 0.75rem;
    }

    /* Topbar page title: แสดงบน mobile ด้วย (ขนาดเล็กลง) */
    .main-navbar h5.m-0 {
        font-size: 0.95rem !important;
    }

    /* Card: reset shadow ไม่ให้ดูหนักบน mobile */
    .card {
        border-radius: 14px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }
    .card:hover {
        transform: none;
    }

    /* Form inputs: full-width ป้องกัน overflow */
    .form-control,
    .form-select,
    .input-group {
        max-width: 100%;
    }

    /* Stat cards: ลด padding บน mobile */
    .stat-card {
        padding: 1rem !important;
    }
    .stat-card h3 {
        font-size: 1.5rem;
    }

    /* FullCalendar: ลด padding ปุ่มบน mobile */
    .fc .fc-toolbar {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .fc .fc-toolbar-title {
        font-size: 1rem;
    }

    /* DataTable: ลด font ให้อ่านได้บน mobile */
    .dataTables_filter input,
    .dataTables_length select {
        font-size: 0.85rem;
    }
    .table thead th,
    .table tbody td {
        font-size: 0.82rem;
        padding: 0.65rem 0.5rem;
        white-space: nowrap; /* ป้องกัน text wrap ใน cell — ให้ scroll แทน */
    }

    /* Modal: full width บน mobile */
    .modal-dialog {
        margin: 0.5rem;
    }

    /* Badge ใน topbar */
    .mobile-project-badge {
        max-width: 120px;
        font-size: 0.7rem;
    }
}

/* =========================================
   9. MOBILE FONT & BUTTON SIZE SYSTEM
   — ปรับ font + ปุ่ม ให้เหมาะ mobile ทั้งระบบ
   ========================================= */

/* ── Tablet + Mobile: touch-friendly button height ── */
@media (max-width: 991.98px) {
    /* ทุกปุ่ม (ยกเว้น close/link) ต้องมี touch target ≥ 44px */
    .btn:not(.btn-sm):not(.btn-close):not(.btn-link):not(.sidebar-toggle-btn-top) {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.3rem;
    }
    /* ปุ่ม sm: อย่างน้อย 36px */
    .btn-sm {
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
    }
    /* Input + Select: touch target ≥ 44px
       ใช้ !important เพื่อชนะ page-level CSS ที่ set height: Xpx (height overrides min-height ถ้าไม่มี !important) */
    .form-control:not(textarea),
    .form-select {
        min-height: 44px !important;
        height: auto !important;
    }
    /* ยกเว้น: hidden inputs + file inputs ที่ไม่ต้องการ touch target */
    input[type="hidden"],
    input[type="file"] {
        min-height: unset !important;
        height: auto !important;
    }
}

/* ── Mobile (≤ 767px): Font Scale + Button System ── */
@media (max-width: 767.98px) {

    /* Body font */
    body { font-size: 0.9rem; }

    /* Headings — ลดขนาดลงให้เหมาะ mobile */
    h3, .h3 { font-size: 1.2rem !important; }
    h4, .h4 { font-size: 1.05rem !important; }
    h5, .h5 { font-size: 0.95rem !important; }
    h6, .h6 { font-size: 0.88rem !important; }

    /* Card header */
    .card-header {
        font-size: 0.92rem !important;
        padding: 0.85rem 1rem;
    }

    /* Card body: ลด padding */
    .card-body {
        padding: 1rem 1rem;
    }

    /* Form labels */
    .form-label {
        font-size: 0.85rem;
        margin-bottom: 0.2rem;
    }
    .form-text { font-size: 0.78rem; }

    /* Input / Select */
    .form-control,
    .form-select {
        font-size: 0.875rem;
        padding: 0.5rem 0.85rem;
    }
    textarea.form-control { min-height: unset !important; }
    .input-group-text {
        font-size: 0.875rem;
        min-height: 44px;
    }

    /* ── Button Normal ── */
    .btn:not(.btn-sm):not(.btn-close):not(.btn-link):not(.sidebar-toggle-btn-top) {
        min-height: 44px;
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }

    /* ── Button SM ── */
    .btn-sm {
        min-height: 36px;
        padding: 0.3rem 0.65rem;
        font-size: 0.8rem;
    }

    /* ปุ่มใน td/th ของ table — เล็กกว่านิดหน่อยแต่ยังกดได้ */
    td .btn-sm, th .btn-sm {
        min-height: 32px;
        padding: 0.2rem 0.5rem;
        font-size: 0.78rem;
    }

    /* ── Badge ── */
    .badge {
        font-size: 0.72rem !important;
        padding: 4px 9px;
    }

    /* ── Modal footer: ปุ่ม flex wrap ── */
    .modal-footer {
        flex-wrap: wrap;
        gap: 0.4rem;
        padding: 0.75rem 1rem;
    }
    .modal-footer .btn:not(.btn-close) {
        flex: 1 1 auto;
        min-width: 90px;
    }

    /* ── Dropdown items: touch zone ── */
    .dropdown-item {
        padding: 0.55rem 1rem;
        font-size: 0.875rem;
    }

    /* ── Nav tabs / pills ── */
    .nav-tabs .nav-link,
    .nav-pills .nav-link {
        font-size: 0.82rem;
        padding: 0.45rem 0.7rem;
    }

    /* ── List group items ── */
    .list-group-item {
        font-size: 0.875rem;
        padding: 0.6rem 0.9rem;
    }

    /* ── Small text ── */
    small, .small { font-size: 0.78rem; }
    .text-muted    { font-size: 0.83rem; }

    /* ── Select2 touch height + full width ── */
    .select2-container {
        width: 100% !important;
    }
    .select2-container .select2-selection--single {
        height: 44px !important;
        font-size: 0.9rem !important;
    }
    .select2-container--bootstrap-5 .select2-selection--single
    .select2-selection__rendered {
        line-height: 44px !important;
        padding-left: 0.75rem;
        font-size: 0.9rem !important;
    }
    .select2-container--bootstrap-5 .select2-selection--single
    .select2-selection__arrow {
        height: 44px !important;
    }
    /* Dropdown list: full width + readable font */
    .select2-dropdown {
        font-size: 0.9rem !important;
        min-width: 100% !important;
    }
    .select2-results__option {
        padding: 0.55rem 0.85rem !important;
        font-size: 0.9rem !important;
        min-height: 40px;
        display: flex;
        align-items: center;
    }
    /* Native form-select-sm → ขนาดปกติบน mobile */
    .form-select-sm {
        height: 44px !important;
        font-size: 0.875rem !important;
        padding: 0.5rem 0.85rem !important;
    }
    /* form-control-sm → ขนาดปกติบน mobile */
    .form-control-sm {
        height: 44px !important;
        font-size: 0.875rem !important;
        padding: 0.5rem 0.85rem !important;
    }

    /* ── SweetAlert2 mobile ── */
    .swal2-popup {
        font-size: 0.9rem !important;
        padding: 1.5rem !important;
    }
    .swal2-title { font-size: 1.1rem !important; }
    .swal2-confirm, .swal2-cancel, .swal2-deny {
        min-height: 44px !important;
        font-size: 0.875rem !important;
        padding: 0.5rem 1.25rem !important;
    }
}

/* ══════════════════════════════════════════════════════
   GLOBAL: Modal + Card Form selects — ขนาดปกติทุก device
   ครอบ .modal, .card, .offcanvas, div.row form fields
   ====================================================== */
.modal .form-select,
.modal .form-select-sm,
.modal .form-control,
.modal .form-control-sm,
.offcanvas .form-select,
.offcanvas .form-select-sm {
    font-size: 0.9rem;
    min-height: 38px;
    height: auto;
}

/* ══════════════════════════════════════════════════════
   DataTables — Length select + Filter input ทุก breakpoint
   ====================================================== */
.dataTables_length select {
    display: inline-block;
    width: auto !important;
    min-width: 75px;
    padding-right: 2rem !important;
}
.dataTables_filter input {
    display: inline-block;
    width: auto;
}
@media (max-width: 767.98px) {
    .dataTables_length select {
        height: 44px !important;
        font-size: 0.9rem !important;
        min-width: 80px;
        padding: 0.5rem 2rem 0.5rem 0.75rem !important;
    }
    .dataTables_filter input {
        height: 44px !important;
        font-size: 0.9rem !important;
    }
    .dataTables_length label,
    .dataTables_filter label {
        font-size: 0.85rem;
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: nowrap;
    }
}

/* ── Extra-Small phones (≤ 575px): ปรับเพิ่มอีก ── */
@media (max-width: 575.98px) {

    body { font-size: 0.875rem; }

    h3, .h3 { font-size: 1.1rem !important; }
    h4, .h4 { font-size: 1rem !important; }
    h5, .h5 { font-size: 0.9rem !important; }

    .card-header {
        font-size: 0.88rem !important;
        padding: 0.7rem 0.85rem;
    }
    .card-body { padding: 0.85rem; }

    /* Stat card numbers */
    .stat-card h3 { font-size: 1.3rem; }
    .stat-card p  { font-size: 0.8rem; }

    /* ปุ่ม primary/secondary ขนาด full-width ใน footer/action area */
    .mobile-btn-full .btn,
    .action-footer .btn {
        width: 100%;
        margin-bottom: 0.4rem;
    }

    /* DataTable search + length: full width */
    .dataTables_filter { width: 100%; margin-top: 0.4rem; }
    .dataTables_filter input { width: 100% !important; }
    .dataTables_length label { font-size: 0.8rem; }

    /* Form control extra-small */
    .form-control, .form-select { font-size: 0.85rem; }

    /* Tab scrollable horizontal */
    .nav-tabs, .nav-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .nav-tabs::-webkit-scrollbar,
    .nav-pills::-webkit-scrollbar { display: none; }
    .nav-tabs .nav-link,
    .nav-pills .nav-link {
        white-space: nowrap;
        font-size: 0.8rem;
        padding: 0.4rem 0.65rem;
    }
}
/* ============================================================================
   [UI-CONTRAST FIX 2026-06] พื้นเข้ม -> ตัวอักษรขาว (รวมศูนย์จุดเดียว ไม่แตะ PHP)
   แก้ปัญหา global rule h1-h6{color:#666!important} + soft-badge ที่ตัวอักษรกลืนพื้น
   หลักการ: คงพื้นสีเดิม เปลี่ยนเฉพาะ "ตัวอักษร" เป็นขาว
   ============================================================================ */

/* (1) Modal header สีเข้ม -> หัวข้อ/ไอคอน ขาว ; header พื้นอ่อน (#f0f5ff,#fff8e1) ไม่ถูกแตะ */
.modal-header .modal-title { color: inherit !important; }
.modal-header[style*="#12215c" i],
.modal-header[style*="#152977" i],
.modal-header[style*="#1e3a5f" i],
.modal-header[style*="#1d4ed8" i],
.modal-header[style*="#1565c0" i],
.modal-header[style*="#0d1a4a" i],
.modal-header[style*="var(--primary-color)" i],
.modal-header[style*="linear-gradient" i],
.modal-header.bg-primary,
.modal-header.bg-dark {
    color: #fff !important;
}
.modal-header[style*="#12215c" i] .btn-close,
.modal-header[style*="#152977" i] .btn-close,
.modal-header[style*="#1e3a5f" i] .btn-close,
.modal-header[style*="#1d4ed8" i] .btn-close,
.modal-header[style*="#1565c0" i] .btn-close,
.modal-header[style*="linear-gradient" i] .btn-close,
.modal-header.bg-primary .btn-close,
.modal-header.bg-dark .btn-close { filter: invert(1) grayscale(1) brightness(2); }

/* (2) หัวตาราง Performance Report (พื้นเขียว/navy) -> ขาว */
.sticky-header, .sticky-header *,
.ytd-hdr, .ytd-hdr * { color: #fff !important; }

/* (3) Dropdown item ที่ active (พื้น navy) -> ขาว */
.dropdown-item.active,
.dropdown-item.active * { color: #fff !important; }

/* (4) Badge พื้นสีเข้มที่ตัวอักษรสีเดียวกับพื้น (soft-badge render เป็น solid) -> ขาว
       เฉพาะสีเข้ม (success/danger/primary/secondary/dark) — ไม่แตะ warning/info/light */
.badge.bg-success.text-success,
.badge.bg-danger.text-danger,
.badge.bg-primary.text-primary,
.badge.bg-secondary.text-secondary,
.badge.bg-dark.text-dark { color: #fff !important; }

/* ════════════════════════════════════════════════════════════════
   [MOBILE-TOOLBAR] Global Responsive Fix — ไม่กระทบ Desktop
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {

    /* ── 1. Page Header Toolbar: เพิ่ม flex-wrap อัตโนมัติ ──
       ครอบ patterns: d-flex justify-content-between ที่มี mb-3/mb-4
       (page headers มักมี margin-bottom, list items ไม่มี) */
    .d-flex.justify-content-between.mb-3,
    .d-flex.justify-content-between.mb-4,
    .d-flex.align-items-center.justify-content-between.mb-3,
    .d-flex.align-items-center.justify-content-between.mb-4,
    /* page_header pattern: layout_shell.php ห่อด้วย div.mb-3 */
    .mb-3 > .d-flex.justify-content-between,
    .mb-3 > .d-flex.align-items-center.justify-content-between {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    /* ── 2. Right-side control bar: form ใน toolbar ให้ shrink ได้ ── */
    .d-flex.gap-2 > form.d-flex,
    .d-flex.gap-3 > form.d-flex,
    .d-flex.gap-2 > form {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
    .d-flex.gap-2 > form .input-group,
    .d-flex.gap-3 > form .input-group {
        flex-wrap: nowrap !important;
    }
    .d-flex.gap-2 > form .form-control,
    .d-flex.gap-3 > form .form-control {
        min-width: 0 !important;
    }

    /* ── 3. AfterSale & Filter Bar: override inline width ──
       selects ที่มี style="width:150px" — ให้ flexible แทน */
    .filter-bar .form-select {
        width: auto !important;
        min-width: 120px !important;
        max-width: 160px !important;
        flex: 1 1 auto !important;
    }

    /* ── 4. Card header search input: w-25 → flexible ── */
    .card-header .w-25.form-control,
    .card-header .w-25.form-control-sm {
        width: auto !important;
        min-width: 120px !important;
        flex: 1 1 auto !important;
    }

    /* ── 5. customer_list.php: override inline max-width ── */
    #searchInput.form-control {
        max-width: none !important;
        flex: 1 1 auto !important;
        min-width: 120px !important;
    }

    /* ── 6. Table: horizontal scroll ป้องกัน overflow ── */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }
}

/* ── Extra Small (≤575px): controls right side ขยายเต็ม row ── */
/* NOTE: ต้องใช้ .mb-3/.mb-4 เป็น scope เพื่อไม่ให้ตัว navbar topbar โดน */
@media (max-width: 575.98px) {

    /* Right-side controls group ใต้ title ขยาย full width
       — scoped to page-header toolbars only (mb-3/mb-4 parent) */
    .d-flex.justify-content-between.mb-3 > .d-flex.gap-2:last-child,
    .d-flex.justify-content-between.mb-3 > .d-flex.gap-3:last-child,
    .d-flex.justify-content-between.mb-4 > .d-flex.gap-2:last-child,
    .d-flex.justify-content-between.mb-4 > .d-flex.gap-3:last-child,
    .d-flex.align-items-center.justify-content-between.mb-3 > .d-flex.gap-2:last-child,
    .d-flex.align-items-center.justify-content-between.mb-3 > .d-flex.gap-3:last-child,
    .d-flex.align-items-center.justify-content-between.mb-4 > .d-flex.gap-2:last-child,
    .d-flex.align-items-center.justify-content-between.mb-4 > .d-flex.gap-3:last-child,
    .mb-3 > .d-flex.justify-content-between > .d-flex.gap-2:last-child,
    .mb-3 > .d-flex.justify-content-between > .d-flex.gap-3:last-child,
    .mb-4 > .d-flex.justify-content-between > .d-flex.gap-2:last-child,
    .mb-4 > .d-flex.justify-content-between > .d-flex.gap-3:last-child {
        width: 100% !important;
    }

    /* Form ใน controls: flex-grow เต็ม */
    .d-flex.justify-content-between.mb-3 > .d-flex.gap-2:last-child > form,
    .d-flex.justify-content-between.mb-4 > .d-flex.gap-2:last-child > form,
    .d-flex.align-items-center.justify-content-between.mb-3 > .d-flex.gap-2:last-child > form,
    .d-flex.align-items-center.justify-content-between.mb-4 > .d-flex.gap-2:last-child > form,
    .mb-3 > .d-flex.justify-content-between > .d-flex.gap-2:last-child > form,
    .mb-4 > .d-flex.justify-content-between > .d-flex.gap-2:last-child > form {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    /* filter-bar selects: full row */
    .filter-bar.flex-wrap {
        gap: 0.4rem !important;
    }
    .filter-bar.flex-wrap .form-select {
        flex: 1 1 calc(50% - 0.2rem) !important;
        max-width: none !important;
    }
}

/* ── Select2 Mobile Touch Target (global) ─────────────────────────────────── */
@media (max-width: 991.98px) {
    .select2-container .select2-selection--single {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
    }
    .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
        line-height: 44px !important;
    }
    .select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow {
        height: 44px !important;
    }
}