@import url(./login.css);
@import url(./alert.css);
@import url(./main.css);
@import url(./nav.css);
@import url(./model.css);
@import url(./listperson.css);
@import url(./dropdown.css);
@import url(./fulldate.css);

/* ใส่ไว้บนสุดของไฟล์ CSS ของคุณเลยครับ */
*, *::before, *::after {
    box-sizing: border-box;
}
html body{
     margin: 0;
    background-color: #EEF2F6;

    /* background-color: #0f172a; 
    

    background-image: 
        radial-gradient(circle at 15% 50%, rgba(20, 184, 166, 0.4) 0%, transparent 50%),
        radial-gradient(circle at 85% 30%, rgba(139, 92, 246, 0.4) 0%, transparent 50%); */
  background-size: cover;
  background-attachment: fixed;

    width: 100vw;
    height: 100vh;
    font-size: 16px;
    z-index: 0;


        -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

  



        overflow-x: hidden;
        overflow-y: hidden !important;
 
      background-position: center;
  background-repeat: no-repeat;
}

*{
    font-family: 'Sukhumvit';
    color: #000000 !important;
  }
  @font-face {
    font-family: Sukhumvit;
    src: url(./../font/SukhumvitSet-Text.ttf);
  }
  @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
    .container {
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
    }
  }

  ::-webkit-scrollbar {
  width: 8px; /* Mostly for vertical scrollbars */

}
::-webkit-scrollbar-track {
  background: #74b5ff4d; 
}
 ::-webkit-scrollbar-thumb {
  background: #01a2ff; 
  border-radius: 5px;
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(140, 197, 255, 0.462);
    border-radius: 15px;
}


nav{
    background-color: #fff;
    /* width: 100%; */
    display: flex;
    justify-content: space-between;
    align-items: center;

    height: 50px;
    top: 0;
    left: 0;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
    z-index: 1;
}
nav > div:nth-child(n){
    width: 100%;
    height: 100%;
}
nav > div:is(:nth-child(1),:nth-child(3)){
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;

}

nav > div:nth-child(n) > span:nth-child(n){
    width: 100%;
    height: 100%;
}
nav > div:is(:nth-child(1),:nth-child(3)) > span:is(:nth-child(1),:nth-child(3)){
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
}

.center_body{
    width: 100vw;
    height: calc(100vh - 50px);
    overflow-x: hidden;
    overflow-y: auto !important;

    display: flex;
    flex-direction: row;
}
.slideBar {
    flex: 2; /* Equal width for all items */
    text-align: center;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;

}
.main_data{
    flex: 10; /* Equal width for all items */
    padding: 20px;
    text-align: center;
  
    /* 🌟 เพิ่ม 2 บรรทัดนี้ครับ */
    position: relative; /* ตั้งให้เป็นกล่องแม่ใหญ่ */
    overflow: hidden; /* กันเหนียว ไม่ให้การ์ดที่ขยายล้นทะลุกรอบขอบฟ้าออกไป */
}



.auto-grid {
    display: grid;
    /* ท่าไม้ตาย Grid: จัดเรียงอัตโนมัติ กว้างขั้นต่ำ 250px ถ้าที่เหลือให้ยืดเต็มจอ */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 20px;
    padding: 20px;
    width: 100%;
    height: 100%;
    /* ⚠️ สำคัญมาก: ต้องมี relative เพื่อให้กล่องที่ขยายตัว รู้ขอบเขตของตัวเอง */
    /* position: relative;  */
    
    /* เผื่อความสูงให้กล่องแม่เสมอ (เวลาลูกกลายเป็น absolute กล่องแม่จะได้ไม่ยุบ) */
    min-height: 400px; 
}


/* สร้างคลาสนี้เพิ่มใน CSS */

.menu-card-item{

   background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 15px;
    padding: 20px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    
    /* แอนิเมชันตอนขยายและตอนชี้เมาส์ */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

        -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

}
.menu-card-item:hover{
    transform: translateY(-5px);
    box-shadow: 0 10px 15px rgba(0,0,0,0.1);
    border-color: rgb(3, 87, 255);
}

/* กล่องแม่ต้องเป็น relative เพื่อให้กล่องลูกขยายเต็มพื้นที่แม่ได้พอดี */
/* .menu-grid-container {
    position: relative; 

} */

/* เพิ่ม Transition ให้กล่องมีการเคลื่อนไหวที่นุ่มนวล */
.menu-card-item {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* แอนิเมชันแบบสมูท */
}

/* คลาสพระเอก: เมื่อถูกคลิกให้แปลงร่าง */
.menu-card-item.expanded {
    position: absolute !important;
    
    /* 🌟 ให้มันเริ่มจากขอบ Padding ของ main_data */
    top: 20px !important; 
    left: 20px !important; 
    
    /* 🌟 ให้ขนาดมันหักลบ Padding ซ้าย-ขวา (20+20) และ บน-ล่าง (20+20) ออก */
    width: calc(100% - 40px) !important; 
    height: calc(100% - 40px) !important; 
    
    z-index: 100;
    margin: 0;
    border-radius: 10px; /* ลดความมนลงให้ดูเป็นหน้าจอ */
    cursor: default;
    transform: none; 
    background: #f8f9fa; 
}


/* =========================================
   🌟 CSS เสริมสำหรับเมนูย่อย (ขนาดเล็ก)
========================================= */

/* 1. ย่อตาราง Grid ให้ช่องเล็กลง */
.auto-grid.compact-grid {
    /* เปลี่ยนจากขั้นต่ำ 250px เหลือแค่ 150px-180px (ปรับได้ตามชอบ) */
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); 
    gap: 15px; /* ลดช่องว่างระหว่างการ์ด */
    min-height: auto; /* ไม่ต้องจองความสูงเผื่อขยายแล้ว */
}

/* 2. ย่อขนาดตัวการ์ด */
.menu-card-item.compact-card {
    padding: 15px 10px; /* ลดขอบ Padding ลง */
    gap: 8px; /* ลดระยะห่างระหว่างไอคอนกับข้อความ */
    min-height: 100px; /* บังคับความสูงให้เตี้ยลง */
}

/* 3. ย่อขนาดไอคอน SVG ที่อยู่ในการ์ดให้เล็กลงนิดนึง */
.menu-card-item.compact-card svg {
    width: 32px !important; 
    height: 32px !important;
}

/* 4. ย่อขนาดฟอนต์ข้อความ */
.menu-card-item.compact-card div:last-child {
    font-size: 14px; 
    text-align: center;
}





.menu-slide-container{
    padding-left: 10px;
    padding-right: 10px;
        display: flex !important;
    flex-direction: column !important; 
    height: calc(100vh - 80px) !important; /* ความสูงเต็มจอ */
}
.menu-slide-item{

    background: #fff;
    /* 3️⃣ ขอบกระจก: ทำให้ดูมีมิติเหมือนขอบแก้วตัดแสง */
    border: 1px solid rgba(255, 255, 255, 0.097);
    /* 4️⃣ เงาตกกระทบ: ช่วยให้กล่องลอยออกมาจากพื้นหลัง */
    /* box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); */

      padding: 0.5rem 0.5rem;
  text-align: center;
  font-size: 1rem;
 
/* box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px; */
  border-radius: 25px;

  display: flex;
width: 100%;

        -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

}
.menu-slide-item > div:nth-child(2){
    display: flex;
    justify-content: start;
    align-items: center;
    padding-left: 0.5rem;
    width:100%;
    font-size: 18px !important;
}
.menu-slide-item:hover{
    background-color: #338cff;
}

/* 🌟 สไตล์ตอนที่เมนูนั้นถูกเลือก (Active) */
.menu-slide-item.active-menu {
    background-color: rgb(3, 87, 255) !important; /* สีพื้นหลังตอน Active */
    color: #ffffff !important; /* เปลี่ยนตัวหนังสือเป็นสีขาวเพื่อให้ตัดกับพื้นหลัง */
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(3, 87, 255, 0.2);
}

/* 🌟 เปลี่ยนสีไอคอน SVG ข้างในให้เป็นสีขาวตามไปด้วย */
.menu-slide-item.active-menu svg {
    fill: #ffffff !important;
}






/* =========================================
   🌟 CSS สำหรับตารางและ Toolbar
========================================= */
.table-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 15px;
    flex-wrap: wrap;
}

.table-toolbar .filter-group {
    display: flex;
    gap: 10px;
}

.table-toolbar input, .table-toolbar select {
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}

.table-toolbar input:focus, .table-toolbar select:focus {
    border-color: rgb(3, 87, 255);
}

.custom-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.custom-table th {
    background: #f8f9fa;
    padding: 15px;
    text-align: left;
    font-weight: bold;
    color: #333;
    border-bottom: 2px solid #eee;
}

.custom-table td {
    padding: 15px;
    border-bottom: 1px solid #eee;
    color: #555;
    vertical-align: middle;
    font-size: 18px !important;
}

.custom-table tr:hover {
    background: #fdfdfd;
}

/* ป้าย Tag บอกประเภท */
.badge-type {
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    background: #e7f1ff;
    color: rgb(3, 87, 255);
}

/* ปุ่มจัดการ (แก้ไข/ลบ) */
.btn-action {
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    transition: all 0.2s;
}
.btn-edit { background: #ffc107; color: #000; margin-right: 5px; }
.btn-edit:hover { background: #e0a800; }
.btn-delete { background: #ff4d4f; color: #fff; }
.btn-delete:hover { background: #dc3545; }



/* ป้ายสำหรับรูปแบบการเบิก */
.badge-req-type {
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: bold;
    border: 1px solid transparent;
}
.badge-monthly { 
    background: #e6f7ff; 
    color: #1890ff; 
    border-color: #91d5ff; 
}
.badge-general { 
    background: #f6ffed; 
    color: #52c41a; 
    border-color: #b7eb8f; 
}

/* ป้ายบอกสถานะในหน้าประวัติ */
.badge-status {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    border: 1px solid transparent;
    display: inline-block;
    text-align: center;
    min-width: 80px;
}
.status-approved { 
    background: #f6ffed; 
    color: #52c41a; 
    border-color: #b7eb8f; 
}
.status-rejected { 
    background: #fff2f0; 
    color: #ff4d4f; 
    border-color: #ffccc7; 
}

/* ปุ่มดูข้อมูล (สีฟ้า) */
.btn-view { 
    background: #17a2b8; 
    color: #fff; 
    margin-right: 5px; 
}
.btn-view:hover { 
    background: #138496; 
}

/* กล่องแม่ของ Dropdown */
.custom-select-wrapper {
    position: relative;
    width: 100%;
    margin-top: 5px;
}

/* ช่องแสดงผลหลัก (ที่คลิกแล้วจะโชว์ลิสต์) */
.select-trigger {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: white;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ส่วนลิสต์รายการ */
.select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: white;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 6px 6px;
    z-index: 1000;
    display: none; /* ซ่อนไว้ก่อน */
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* ช่องค้นหาข้างใน Dropdown */
.select-search {
    padding: 8px;
    width: calc(100% - 16px);
    border: none;
    border-bottom: 1px solid #eee;
    outline: none;
}

/* รายการแต่ละตัว */
.select-option {
    padding: 10px;
    cursor: pointer;
}
.select-option:hover { background: #f0f0f0; }

#sub-content-area{
    width: 100%;
}

.menu-slide-container > div:nth-child(n) > div:nth-child(1){
    display: flex;
    justify-content: center;
    align-items: center;
}
div[data-id="mng_logout"] {
    margin-top: auto; /* 🌟 พระเอกอยู่ตรงนี้! มันจะดันตัวเองลงไปล่างสุด */
    display: flex;
}
div[data-id="mng_logout"]:hover{
    background-color: rgb(255, 39, 39) !important;
    color: #fff !important;
}

#btnChangeUser_pass{
    display: flex;
    justify-content: center;
    align-items: center;

    padding-bottom: 10px;
}






  @import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600&display=swap');

                .req-mat-wrapper {
                    font-family: 'Prompt', sans-serif;
                    padding: 24px;
                    background: #ffffff;
                    border-radius: 16px;
                    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
                    color: #334155;
                }

                .header-title {
                    color: #0f172a;
                    font-size: 1.4rem;
                    font-weight: 600;
                    margin-bottom: 24px;
                    display: flex;
                    align-items: center;
                    gap: 10px;
                }

                /* --- เมนูย่อย (Sub Menu Cards) --- */
                .compact-grid {
                    display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
                    gap: 16px;
                    margin-bottom: 24px;
                }

                .compact-card {
                    background: #f8fafc;
                    border: 2px solid #e2e8f0;
                    border-radius: 12px;
                    padding: 16px 20px;
                    display: flex;
                    align-items: center;
                    gap: 14px;
                    cursor: pointer;
                    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
                    color: #475569;
                    font-weight: 500;
                }

                .compact-card:hover {
                    background: #ffffff;
                    border-color: #3b82f6;
                    color: #1d4ed8;
                    transform: translateY(-3px);
                    box-shadow: 0 10px 20px rgba(59, 130, 246, 0.1);
                }

                .compact-card svg {
                    fill: currentColor;
                    width: 28px;
                    height: 28px;
                    transition: transform 0.2s;
                }

                .compact-card:hover svg {
                    transform: scale(1.1);
                }

                /* --- Toolbar & Filters --- */
                .table-toolbar {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 20px;
                    flex-wrap: wrap;
                    gap: 15px;
                    background: #f8fafc;
                    padding: 16px;
                    border-radius: 12px;
                }

                .filter-group {
                    display: flex;
                    gap: 12px;
                    flex-wrap: wrap;
                }

                .input-modern {
                    padding: 10px 14px;
                    border: 1px solid #cbd5e1;
                    border-radius: 8px;
                    font-family: 'Prompt', sans-serif;
                    font-size: 0.95rem;
                    color: #334155;
                    outline: none;
                    transition: all 0.2s;
                    background: #ffffff;
                }

                .input-modern:focus {
                    border-color: #3b82f6;
                    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
                }

                /* --- ตารางข้อมูล (Modern Table) --- */
                .custom-table {
                    width: 100%;
                    border-collapse: collapse;
                    font-size: 0.95rem;
                }

                .custom-table th {
                    background: #f1f5f9;
                    color: #475569;
                    font-weight: 600;
                    padding: 14px 16px;
                    text-align: left;
                    border-bottom: 2px solid #e2e8f0;
                    white-space: nowrap;
                }

                .custom-table td {
                    padding: 14px 16px;
                    border-bottom: 1px solid #f1f5f9;
                    color: #334155;
                    vertical-align: middle;
                }

                .custom-table tbody tr {
                    transition: background-color 0.2s;
                }

                .custom-table tbody tr:hover {
                    background-color: #f8fafc;
                }

                /* --- ปุ่ม Action ต่างๆ --- */
                .btn-action {
                    padding: 8px 16px;
                    border: none;
                    border-radius: 6px;
                    font-family: 'Prompt', sans-serif;
                    font-weight: 500;
                    font-size: 0.85rem;
                    cursor: pointer;
                    transition: all 0.2s;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    gap: 6px;
                }

                .btn-primary { background: #eff6ff; color: #2563eb; }
                .btn-primary:hover { background: #dbeafe; }

                .btn-danger { background: #fef2f2; color: #dc2626; }
                .btn-danger:hover { background: #fee2e2; }
                
                .btn-success { background: #f0fdf4; color: #16a34a; }
                .btn-success:hover { background: #dcfce7; }

                /* --- Badge สถานะ --- */
                .badge-status {
                    padding: 6px 12px;
                    border-radius: 20px;
                    font-size: 0.8rem;
                    font-weight: 600;
                    display: inline-block;
                    letter-spacing: 0.3px;
                }