/* :root {
  --primary-color: #2357c9;
  --secondary-color: #45a4ff;

  --primary-color-rgb: rgba(35, 87, 201, 1);
} */
.text-primary-color { color: var(--primary-color) !important; }

.bg-primary-color { background-color: var(--primary-color) !important; }
.bg-secondary-color { background-color: var(--secondary-color) !important; }

.btn-primary-color { border-color: var(--primary-color) !important; background-color: var(--primary-color) !important; }
.btn-primary-color:hover { background-color: var(--secondary-color) !important; }

.btn-outline-primary-color { border-color: var(--primary-color) !important; color: var(--primary-color) !important; }
.btn-outline-primary-color:hover { background-color: var(--primary-color) !important; color: #ffffff !important; }

.form-control:focus { box-shadow: none; border-color: var(--primary-color); }


/* 🌟 นำเข้าฟอนต์ Sarabun น้ำหนัก 300 (Light) */
@font-face {
    font-family: 'Sarabun';
    src: url('../fonts/Sarabun-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* 🌟 นำเข้าฟอนต์ Sarabun น้ำหนัก 400 (Regular) */
@font-face {
    font-family: 'Sarabun';
    src: url('../fonts/Sarabun-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* 🌟 นำเข้าฟอนต์ Sarabun น้ำหนัก 600 (SemiBold) */
@font-face {
    font-family: 'Sarabun';
    src: url('../fonts/Sarabun-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}


/* 🌟 นำเข้าฟอนต์ Noto Sans Thai */
@font-face {
    font-family: 'Noto Sans Thai';
    src: url('../fonts/NotoSansThai-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans Thai';
    src: url('../fonts/NotoSansThai-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* 🟢 ปรับตรงนี้: กำหนดให้ระบบใช้ไฟล์ SemiBold ตัวนี้รองรับทั้งน้ำหนัก 600 และ 700 */
@font-face {
    font-family: 'Noto Sans Thai';
    src: url('../fonts/NotoSansThai-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Noto Sans Thai';
    src: url('../fonts/NotoSansThai-SemiBold.ttf') format('truetype');
    font-weight: 700; /* ดักเบราว์เซอร์เมื่อเรียกหาตัวหนาปกติ */
    font-style: normal;
    font-display: swap;
}

/* นำเข้าตัว Medium เพิ่มเติม */
@font-face {
    font-family: 'Noto Sans Thai';
    src: url('../fonts/NotoSansThai-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* =========================================
   Global Styles
   ========================================= */
body {
    font-family: 'Noto Sans Thai', sans-serif;
    font-size: 0.95rem;

    /* ค่านี้ประมาณความสูงรวมของ 3 แถบ (ปรับเพิ่มลดได้ถ้ายังทับอยู่) */
    padding-top: 136px;

    background: rgb(222,222,222); /* fallback สำหรับ browser เก่า */
    background: linear-gradient(to right, rgba(240,244,248,1), rgba(220,224,228,1), rgba(240,244,248,1));
}

/* ดักให้หัวข้อและตัวหนาทั้งหมดใช้ความหนาระดับ 500 (Medium) ที่จะผอมบางลงและคมชัดขึ้น */
.fw-bold, strong, th, h1, h2, h3, h4, h5, h6 {
    font-weight: 500 !important;
}

::placeholder {
    color: #b0b8c4 !important; /* สีเทาอ่อนลง */
    opacity: 1 !important;
    font-weight: 400 !important;
    font-size: 0.9rem !important;
}

/* 1. สร้าง Class สำหรับส่วนหัวที่ต้องการ Fix */
.fixed-header-group {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1020; /* ให้ลอยอยู่เหนือทุกอย่าง */
    background-color: #fff; /* ใส่พื้นหลังทึบไม่ให้เนื้อหาข้างล่างโผล่ */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* เพิ่มเงาเล็กน้อยให้ดูมีมิติ */
}

/* Animation ให้ป้ายแจ้งเตือนสั่นดุ๊กดิ๊ก */
@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-1px) rotate(-1deg); }
  50% { transform: translateX(1px) rotate(1deg); }
  75% { transform: translateX(-1px) rotate(-1deg); }
  100% { transform: translateX(0); }
}
.shake-animation {
    animation: shake 2.5s infinite; /* สั่นทุกๆ 2.5 วินาที */
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.5);
    font-size: 0.8rem;
}


/* ปรับแต่งให้ดูเหมือน Desktop App */
.app-header {
  background: linear-gradient(to right, #f8f9fa, #ffffff);
    border-bottom: 1px solid #ccc;
    padding: 5px 10px;
}
.app-header .text-gradient {
  font-size: 0.9rem;
  background: -webkit-linear-gradient(#000000, #666666);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.toolbar-btn {
    border: none;
    background: transparent;
    /* background: #f3f6f9; */
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.8rem;
    color: #333;
    margin-right: 6px;
    cursor: pointer;
    transition: 0.2s;
    border-radius: 5px;
}
.toolbar-btn i {
    font-size: 1.5rem;
    margin-bottom: 2px;
    /* background: linear-gradient(135deg, #45a4ff, #2349b9); */
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    /* สั่งให้ตัดพื้นหลังตามรูปทรงของตัวอักษร/ไอคอน */
    -webkit-background-clip: text;
    background-clip: text;

    /* ทำให้สีตัวอักษรโปร่งใส เพื่อให้เห็นพื้นหลังที่เป็น Gradient */
    -webkit-text-fill-color: transparent;
    color: transparent;

    /* แนะนำให้ใส่ display: inline-block เพื่อให้การ render สมบูรณ์ที่สุด */
    display: inline-block;
    transition: 0.5s;
}

.toolbar-btn:hover {
    background-color: #e3e6e9;
    border-radius: 5px;
}

.sub-tab {
    background-color: #f8f9fa;
    border-bottom: 1px solid #ddd;
    padding: 5px 10px;
}
.sub-tab button {
    margin-right: 5px;
    font-size: 0.85rem;
}

.sub-tab .bg-button {
    background-color: none;
    border-bottom: 3px solid var(--secondary-color) !important;
}

/* =========================================
   📱 Responsive สำหรับหน้าจอขนาดเล็ก (มือถือ)
   ========================================= */
@media (max-width: 575.98px) {

    /* 1. แถบเมนูหลัก (ไอคอนใหญ่) */
    .bg-white.border-bottom.d-flex {
        overflow-x: auto; /* เปิดให้ใช้นิ้วปัดเลื่อนซ้ายขวาได้ */
        overflow-y: hidden;
        white-space: nowrap; /* บังคับไม่ให้ปุ่มตกบรรทัด */
        -webkit-overflow-scrolling: touch; /* ให้การปัดบน iOS สมูทขึ้น */
        padding-bottom: 5px !important; /* เผื่อพื้นที่ให้ Scrollbar นิดนึง */
    }

    /* 2. ตัวปุ่มเมนูหลัก */
    .toolbar-btn {
        font-size: 0.7rem; /* ย่อขนาดตัวหนังสือลงจาก 0.8rem */
        margin-right: 6px; /* ลดระยะห่างระหว่างปุ่มลงจาก 15px */
        min-width: 55px; /* ล็อคความกว้างขั้นต่ำไม่ให้ตัวหนังสือบีบกันเกินไป */
    }

    /* 3. ไอคอนในเมนูหลัก */
    .toolbar-btn i {
        font-size: 1rem; /* ย่อขนาดไอคอนลงจาก 1.5rem */
        margin-bottom: 6px;
        transition: 0.5s;
    }

    /* 4. แถบเมนูย่อย (บันทึกข้อมูล, ค้นหา, รายได้-รายจ่าย) */
    .sub-tab {
        overflow-x: auto; /* ให้ปัดซ้ายขวาได้เช่นกัน */
        white-space: nowrap;
        display: flex;
    }

    /* 5. ปุ่มในเมนูย่อย */
    .sub-tab a.btn {
        font-size: 0.75rem; /* ย่อตัวหนังสือลง */
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* ซ่อน Scrollbar ให้ดูสะอาดตา (เฉพาะ Chrome, Safari, Edge) */
    .bg-white.border-bottom.d-flex::-webkit-scrollbar,
    .sub-tab::-webkit-scrollbar {
        height: 0px;
        background: transparent;
    }
}



#modalSearchCustomer thead th {
    border-bottom: 2px solid #edf2f9;
    color: #64748b;
    font-weight: bold;
    font-size: 0.8rem;
    padding: 0.75rem; /* ลดความสูงของหัวตาราง */
    text-transform: uppercase;
}
#modalSearchCustomer td {
    color: #333;
    font-size: 0.8rem;
    vertical-align: middle;
    padding: 0.2rem;
}

/* รูปบัตรประชาชน */
.photo-container { text-align: center; }
/* #photoX { width: 150px; height: 160px; border: 0px dashed #ffffff; object-fit: cover; border-radius: 6px; } */
#photo { border: 0px; height: 90px; width: auto !important; }



/* CSS ตกแต่งเฉพาะ Modal นี้ให้เหมือน Desktop App */
.scroll-area {
    height: 350px; /* ความสูงของรายการ */
    overflow-y: auto;
    border-top: 1px solid #dee2e6;
    background-color: #fff;
}
.list-group-item-action {
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #f0f0f0;
}
/* สีเวลาเลือก (Active) ให้เป็นสีน้ำเงินเข้มตามรูป */
.list-group-item-action.active {
  background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}
.list-group-item-action:hover:not(.active) {
  background-color: #e9ecef;
}

.footer-shadow {
    box-shadow: 0 0 8px rgba(0,0,0,0.2); /* เพิ่มเงาเล็กน้อยให้ดูมีมิติ */
}


/* คลาสสำหรับเน้นแถวที่บันทึกล่าสุด */
.highlight-row {
  background-color: #d1e7dd !important; /* สีเขียวมิ้นต์อ่อนๆ ดูเข้ากับคำว่าสำเร็จ (ถ้าชอบสีเทาเปลี่ยนเป็น #e2e3e5) */
  transition: background-color 2s ease-in-out;
}

/* ให้ td ทุกตัวรองรับการค่อยๆ เปลี่ยนสี */
#customer_table_body td {
    transition: background-color 2s ease-out;
}

/* บังคับเปลี่ยนสี td เมื่อ tr มีคลาส highlight-row */
tr.highlight-row td {
    background-color: #d1e7dd !important; /* สีเขียวมิ้นต์ */
}