/* --- Variables --- */
:root {
    --tg-card-background: #fdfdfd;
    --tg-white: white;
    --tg-primary: rgb(57, 133, 141);

    --tg-primary-100: #eef9fa;
    --tg-primary-200: #ceedf0;
    --tg-primary-300: #aedfe2;
    --tg-primary-400: #81c9cf;
    --tg-primary-500: #109ca7;
    --tg-primary-600: #216969;
    --tg-primary-700: #1a5057;
    --tg-primary-800: #1d4146;
    --tg-primary-900: #152f33;



    --tg-grey-50:  #f2f2f2;
  --tg-grey-100: #eeeded;
  --tg-grey-200: #c7c7c7;
  --tg-grey-300: #cccbcb;
  --tg-grey-400: #8c8c8c;
  --tg-grey-500: #737373;
  --tg-grey-600: #595959;
  --tg-grey-700: #404040;
  --tg-grey-800: #262626;
  --tg-grey-900: #1a1a1a;
  --tg-grey-950: #0d0d0d;

    --tg-sky: #36c5df; /* base */

  --tg-sky-100: #eef7f8;
  --tg-sky-200: #d1e6eb;
  --tg-sky-300: #b3d7e6;
  --tg-sky-400: #8fcde6; /* ตามที่ให้มา */
  --tg-sky-500: #74bcd8; /* ตามที่ให้มา */
  --tg-sky-600: #36c5df; /* เท่ากับ --tg-sky */
  --tg-sky-700: #1db2cd;
  --tg-sky-800: #1397ae;
  --tg-sky-900: #0b7a8e;


  --tg-secondary: #6c757d;
  --tg-accent: #f5b041;
  --tg-blue:rgb(108, 181, 240);


    --tg-orange: #f38c16;
    --tg-grey: rgb(207, 207, 207);

/* font-family: 'Inter', sans-serif; */
    --font-primary: 'Anuphan', 'Inter', sans-serif;
    --font-display: 'Inter', sans-serif;

    --tg-text-color: rgb(5, 3, 21);
    --text-color: rgb(46, 41, 41);

    --border-color: rgb(141, 141, 146);
    --border-color-light: rgb(203, 213, 225);

    --font-12: 12px;
    --font-14: 14px;
}


/* --- p-* (Padding ทุกด้าน: บน ขวา ล่าง ซ้าย) --- */
.p-1 { padding: 0.25rem; } /* ~4px  */
.p-2 { padding: 0.5rem; }  /* ~8px  */
.p-3 { padding: 1rem; }    /* ~16px */
.p-4 { padding: 1.5rem; }  /* ~24px */
.p-5 { padding: 3rem; }    /* ~48px */

/* --- px-* (Padding แกน X: ซ้ายและขวา) --- */
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-2 { padding-left: 0.5rem;  padding-right: 0.5rem; }
.px-3 { padding-left: 1rem;    padding-right: 1rem; }
.px-4 { padding-left: 1.5rem;  padding-right: 1.5rem; }
.px-5 { padding-left: 3rem;    padding-right: 3rem; }

/* --- py-* (Padding แกน Y: บนและล่าง) --- */
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem;  padding-bottom: 0.5rem; }
.py-3 { padding-top: 1rem;    padding-bottom: 1rem; }
.py-4 { padding-top: 1.5rem;  padding-bottom: 1.5rem; }
.py-5 { padding-top: 3rem;    padding-bottom: 3rem; }

/* =========================================
   Directional Padding (pt, pb, pl, pr)
   ========================================= */

/* --- pt-* (Padding Top: ด้านบน) --- */
.pt-0 { padding-top: 0; }
.pt-1 { padding-top: 0.25rem; }
.pt-2 { padding-top: 0.5rem; }
.pt-3 { padding-top: 1rem; }
.pt-4 { padding-top: 1.5rem; }
.pt-5 { padding-top: 3rem; }

/* --- pb-* (Padding Bottom: ด้านล่าง) --- */
.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: 0.25rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-3 { padding-bottom: 1rem; }
.pb-4 { padding-bottom: 1.5rem; }
.pb-5 { padding-bottom: 3rem; }

/* --- pl-* (Padding Left: ด้านซ้าย) --- */
.pl-0 { padding-left: 0; }
.pl-1 { padding-left: 0.25rem; }
.pl-2 { padding-left: 0.5rem; }
.pl-3 { padding-left: 1rem; }
.pl-4 { padding-left: 1.5rem; }
.pl-5 { padding-left: 3rem; }

/* --- pr-* (Padding Right: ด้านขวา) --- */
.pr-0 { padding-right: 0; }
.pr-1 { padding-right: 0.25rem; }
.pr-2 { padding-right: 0.5rem; }
.pr-3 { padding-right: 1rem; }
.pr-4 { padding-right: 1.5rem; }
.pr-5 { padding-right: 3rem; }



/* =========================================
   Margin Utility Classes (Scale 1-5)
   ========================================= */

/* --- m-* (Margin ทุกด้าน: บน ขวา ล่าง ซ้าย) --- */
.m-0 { margin: 0; }
.m-1 { margin: 0.25rem; } /* ~4px  */
.m-2 { margin: 0.5rem; }  /* ~8px  */
.m-3 { margin: 1rem; }    /* ~16px */
.m-4 { margin: 1.5rem; }  /* ~24px */
.m-5 { margin: 3rem; }    /* ~48px */

/* --- mx-* (Margin แกน X: ซ้ายและขวา) --- */
.mx-0 { margin-left: 0; margin-right: 0; }
.mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; }
.mx-2 { margin-left: 0.5rem;  margin-right: 0.5rem; }
.mx-3 { margin-left: 1rem;    margin-right: 1rem; }
.mx-4 { margin-left: 1.5rem;  margin-right: 1.5rem; }
.mx-5 { margin-left: 3rem;    margin-right: 3rem; }
.mx-auto { margin-left: auto; margin-right: auto; } /* ⭐️ ตัวเก่งสำหรับจัดกึ่งกลางหน้าจอ */

/* --- my-* (Margin แกน Y: บนและล่าง) --- */
.my-0 { margin-top: 0; margin-bottom: 0; }
.my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.my-2 { margin-top: 0.5rem;  margin-bottom: 0.5rem; }
.my-3 { margin-top: 1rem;    margin-bottom: 1rem; }
.my-4 { margin-top: 1.5rem;  margin-bottom: 1.5rem; }
.my-5 { margin-top: 3rem;    margin-bottom: 3rem; }

/* --- mt-* (Margin Top: ด้านบน) --- */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }

/* --- mb-* (Margin Bottom: ด้านล่าง) --- */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 3rem; }

/* --- ml-* (Margin Left: ด้านซ้าย) --- */
.ml-0 { margin-left: 0; }
.ml-1 { margin-left: 0.25rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-3 { margin-left: 1rem; }
.ml-4 { margin-left: 1.5rem; }
.ml-5 { margin-left: 3rem; }
.ml-auto { margin-left: auto; } /* ⭐️ ดันเนื้อหาไปชิดขวา */

/* --- mr-* (Margin Right: ด้านขวา) --- */
.mr-0 { margin-right: 0; }
.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }
.mr-3 { margin-right: 1rem; }
.mr-4 { margin-right: 1.5rem; }
.mr-5 { margin-right: 3rem; }
.mr-auto { margin-right: auto; } /* ⭐️ ดันเนื้อหาไปชิดซ้าย */

.gap-1 { gap: 0.25rem; } /* 4px */
.gap-2 { gap: 0.5rem; }  /* 8px */
.gap-3 { gap: 0.75rem; } /* 12px */
.gap-4 { gap: 1rem; }    /* 16px */
.gap-5 { gap: 1.25rem; } /* 20px */
.gap-6 { gap: 1.5rem; }  /* 24px */


.add-items-wrapper,.file-group-items {
    display:flex;
    gap:0.25rem;
}
.flex-bt {
    display:flex;
    justify-content: center;
    align-items: center;
    gap:0.25rem;
}
html {
    box-sizing: border-box;
}

p, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;

}

p,div,span,label,li,section,h1,h2,h3,h4,h5,h6{
    margin:0 ;
    
}

* {
    box-sizing: border-box;
}


.wrap-table {
    overflow-x:auto;
}



body {
    line-height: 1.7;
    background-color: #f4f7f6;
    position: relative !important;
    margin:0;
    font-family: var(--font-primary);
    color: var(--tg-grey-700);
    height: 100vh;
    overflow-y: auto;
    /* padding:1rem; */
}

@media (max-width: 500px) {
    body {
        padding:0px;
    }
}

body::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        min-height: 100%;
        width: 100%;
        z-index: -1;

        background-image: url('/image/backgrounds/bg-wave.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        opacity: 0.1;
        overflow-y: auto;
        }

small {
    color: #80858d;
    font-size: 10px;
}

span,label,li,select option,select,div,p{
    font-size: 12px;
    text-transform: capitalize;
    color: inherit;
}

b{
    font-weight: bold !important;
    color: inherit;
}


h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    font-weight: 600;
    color: inherit;
}
h1 { font-size: 18px; }
h2 { font-size: 16px; }
h3 { font-size: 14px;color: var(--tg-grey-700) !important;}
h4 { font-size: 14px;text-transform: capitalize; color: var(--text-color); }

.fs-1 {
    font-size: 18px !important;
}
.fs-2 {
    font-size: 16px !important;
}
.fs-3 {
    font-size: 14px !important;
}
.fs-4 {
    font-size: 12px !important;
}
.fs-5 {
    font-size: 10px !important;
}
.fs-6 {
    font-size: 8px !important;
}


.header-page-center {
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--tg-primary);
    margin-bottom: 5px;
}

.text-start-top {
    text-align: start !important;
    vertical-align: top !important;
}
.btn-delete:hover {
  color: red !important;

}
.btn-edit:hover,.btn-edit:hover i {
  color: #f5b041 !important;

}
/* checkbox pill */
.tg-pill-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    padding:3px 10px;
    border-radius: 25px;
    border: 1px solid var(--border-color);
    cursor: pointer;
    width: max-content;
    background-color: rgb(204, 206, 207);
    user-select: none;
     color: white;
     white-space: nowrap;
}
.tg-pill-checkbox div {
    white-space: nowrap;
}
.tg-pill-checkbox:has(input:checked) {
    background: linear-gradient(40deg,rgb(78, 179, 154),rgb(53, 179, 116));
}

.tg-pill-checkbox input[type="checkbox"] ,.tg-pill-checkbox input[type="radio"]{
    display: none;
}
/*end checkbox pill */
.cl-primary {
    color:var(--tg-primary);
}

.hidden {
    display: none;
}

.header {
    color:var(--tg-primary-800);
    text-transform: uppercase;
}

.t-primary {
    color:var(--tg-primary)
}

.t-grey {
    color:var(--tg-grey-600)
}

.t-link {
    color:var(--tg-blue);
    cursor:pointer;
}
.t-link:active {
  scale:o
}

.box-title {
    border-radius: 15px;
    padding:3px 10px;
    width: max-content;
}


.tg-title {
    color:var(--tg-primary);
}

#number_sort {
    color:var(--tg-white);
    background:var(--tg-primary-500);
    padding:3px 10px !important;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;

}
/* --- Main Layout --- */
.page-container {
    display: grid;
    gap:10px;
}
.page-container > section ,.page-container .section , .content .tg-box-container{
    padding:10px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
    background: linear-gradient(rgb(253, 255, 255),rgb(253, 255, 255));
    border-radius: 10px;
    overflow: visible;
    width: 100%;

    background-color: rgba(255, 255, 255, 0.6); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px); 
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
}

.gradient {
    background-image: linear-gradient(to bottom, rgba(188, 204, 202, 0.53) 10%, rgba(3, 61, 83, 0.59)) !important;
}
.gradient-dark {
    background-image: linear-gradient(to bottom, rgba(58, 61, 61, 0.822) 10%, rgba(9, 73, 75, 0.685)) !important;
}

.bg-header-tag {
    background-color: rgba(255, 255, 255, 0.6); 
    background-image: linear-gradient(to bottom, rgba(120, 141, 141, 0.548) 10%, rgba(103, 127, 128, 0.493)) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px); 
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(114, 122, 122, 0.253);
    padding: 0.3rem;
    margin-bottom: 0.5rem;
    border-radius: 0.5rem;
}
@media (max-width: 500px) {
    .page-container > section ,.page-container .section , .content .tg-box-container{
        box-shadow: none;
    }
}

.white-box {
    background: white;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}
@media (max-width: 500px) {
    .white-box {
        box-shadow: none;
    }
}

.tg-box-container-svg {
    background: white;
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
    position: relative;
    overflow: hidden;
}

.tg-box-container-svg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='0' y1='1' y2='0' gradientTransform='rotate(140,0.5,0.5)'%3E%3Cstop offset='0' stop-color='%230FF'/%3E%3Cstop offset='1' stop-color='%23CF6'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' x2='0' y1='0' y2='1' gradientTransform='rotate(137,0.5,0.5)'%3E%3Cstop offset='0' stop-color='%236FFFC9'/%3E%3Cstop offset='1' stop-color='%236CFFD4'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='%23FFF' fill-opacity='0' stroke-miterlimit='10'%3E%3Cg stroke='url(%23a)' stroke-width='11.219999999999999'%3E%3Cpath transform='translate(-142.8 10.799999999999999) rotate(0.9000000000000004 1409 581) scale(0.9412780000000001)' d='M1409 581 1450.35 511 1490 581z'/%3E%3Ccircle stroke-width='3.74' transform='translate(-163.5 105) rotate(12 800 450) scale(1.0133729999999999)' cx='500' cy='100' r='40'/%3E%3Cpath transform='translate(32.099999999999994 -139.5) rotate(100.5 401 736) scale(1.0133729999999999)' d='M400.86 735.5h-83.73c0-23.12 18.74-41.87 41.87-41.87S400.86 712.38 400.86 735.5z'/%3E%3C/g%3E%3Cg stroke='url(%23b)' stroke-width='3.4'%3E%3Cpath transform='translate(630 -3) rotate(0.75 150 345) scale(0.970426)' d='M149.8 345.2 118.4 389.8 149.8 434.4 181.2 389.8z'/%3E%3Crect stroke-width='7.48' transform='translate(-205.5 -282) rotate(97.19999999999999 1089 759)' x='1039' y='709' width='100' height='100'/%3E%3Cpath transform='translate(-411.6 116.4) rotate(16.200000000000003 1400 132) scale(0.805)' d='M1426.8 132.4 1405.7 168.8 1363.7 168.8 1342.7 132.4 1363.7 96 1405.7 96z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
    background-size: cover;
    opacity: 0.4;
    z-index: 0;
}

@keyframes backgroundMove {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 0% 100%;
    }
}

.tg-box-container-svg:hover::before {
    opacity: 0.8;
    transform: scale(1.5);
    transition: all 0.3s ease;
    background-color: var(--tg-sky-2000);
    animation: backgroundMove 3s linear infinite;
}

@keyframes tg-btn-hover {
    from {
        background: linear-gradient( 170deg ,rgb(20, 149, 172),rgb(7, 172, 175));
    }
    to {
        background: linear-gradient( 170deg ,rgb(172, 20, 139),rgb(10, 7, 175));
    }
}

/* modal setting */
.d-none {
display: none;
}
.tg-image-preview-container {
    position: relative;
    display: inline-block;
    padding:10px ;
    margin:7px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#preview-image {
    max-width: 300px;
    border: 1px solid #ccc;
    padding: 5px;
    border-radius: 8px;
}

#imageUploader {
    border:var(--tg-grey-300) 1px solid;
    border-radius:5px;
    width:100%;
    min-height:200px;
    margin:auto;
    background: white;
}


.details-box-upload {
    flex-direction:column;
    gap:15px;
}
.img-bank {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--tg-grey-500);
}
.img-bank img {
    width: 15px;
    height: 15px;
    object-fit: contain;
    border-radius: 5px;
}

.img-bank-text {
    display: flex;
    align-items: center;
    gap: 5px;
}

.img-bank-text img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    border-radius: 5px;
    margin-right: 5px;
}
.img-upload-box {
    min-width:100%;
    font-size:1.5rem;
    font-weight:600;
    border-radius:5px 5px 0px 0px;
    padding:7px;
    cursor:pointer;
}

.img-upload-box:hover {
     background: rgb(199, 250, 237);
     color:var(--tg-primary);
}
.img-up {
    position: relative;
}
.img-up img {
    max-height:180px;
}
.img-up #remove-image-btn {
    position:absolute;
    top:5px;
    right:5px;
    opacity:0.5;
    background:red;
    height:25px;
    width:25px;
    border-radius:5px;
}
.img-up #remove-image-btn i {
    font-size:20px;
    color:whtie !important;
    font-weight:600;
}
.img-up:hover #remove-image-btn {
    opacity:1;
}

.tg-svg-background {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}


.similar-names {
    border: 1px solid #fde68a;
    background-color: #fffbeb;
    border-radius: 6px;
    padding: 0.75rem;
    margin-bottom: 1rem;
}
.similar-names p { margin: 0.5rem 0; }
.similar-ok { color: #16a34a; }
.similar-warn { color: #dc3545; }
.tg-image-preview {
    width: 60px; height: 60px;
    object-fit: contain;
    border: 1px solid #dee2e6;
    padding: 5px;
    border-radius: 6px;
}
.tg-sm-text-grey {
    color: #6c757d;
}


        /* ////modal setting */
.box {
    width: 1000px;
    height: auto;
}

.main-container {
    width: 100%;
    height: 45rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 3px 30px rgba(0, 0, 0, 0.5);
    background:white;
}

.img-container {
    width: 50%;
    height: 100%;
    padding: 4rem 1rem;
    animation: slide-down 0.5s ease;
}

.img-container img {
    width: 100%;
    height: 100%;
}

.form-container {
    width: 60%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: slide-up 0.1s ease;
    position:relative;
}

.login-text {
    position:absolute;
    top:15px;
    right:20px;
    border-radius:5px;
    padding:4px 15px;
    color:var(--tg-secondary);
    font-weight: var(--font-weight-semibold);
}



/* Grid Containers */
.grid-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0.5rem;
}

.grid-container-10 {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 0.5rem;
}

/* Column Spans */
.col-span-1 { grid-column: span 1; }
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }
.col-span-5 { grid-column: span 5; }
.col-span-6 { grid-column: span 6; }
.col-span-7 { grid-column: span 7; }
.col-span-8 { grid-column: span 8; }
.col-span-9 { grid-column: span 9; }
.col-span-10 { grid-column: span 10; }
.col-span-11 { grid-column: span 11; }
.col-span-12 { grid-column: span 12; }

@media (max-width: 500px) {
    .col-span-1, .col-span-2, .col-span-3, .col-span-4, .col-span-5,
    .col-span-6, .col-span-7, .col-span-8, .col-span-9, .col-span-10,
    .col-span-11, .col-span-12 {
        grid-column: span 12;
    }
}

/* Grid Utility Classes */
.tg-grid-autofit-100px,
.tg-grid-autofit-200px,
.tg-grid-autofit-500px {
    display: grid;
    gap: 1rem;
    width: 100%;
}

.tg-grid-autofit-100px {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

.tg-grid-autofit-200px {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.tg-grid-autofit-500px {
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
}

.tg-grid-10 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.tg-grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }
.tg-grid-9 { display: grid; grid-template-columns: repeat(9, 1fr); gap: 1rem; }
.tg-grid-8 { display: grid; grid-template-columns: repeat(8, 1fr); gap: 1rem; }
.tg-grid-7 { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 1rem; width: 100%; }
.tg-grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
.tg-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.tg-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.tg-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.tg-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }

.text-tg-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    width: 100%;
}

.text-tg-grid-2 :nth-child(1) { display: flex; justify-content: end; }
.text-tg-grid-2 :nth-child(2) { display: flex; justify-content: start; }

.d-flex-2 { display: flex; }
.d-flex-2 > div { flex-grow: 1; }

/* Responsive Grid Styles */
@media (max-width: 1000px) {
    .tg-grid-10 { grid-template-columns: repeat(3, 1fr); }
    .tg-grid-9 { grid-template-columns: repeat(3, 1fr); }
    .tg-grid-8 { grid-template-columns: repeat(4, 1fr); }
    .tg-grid-7 { grid-template-columns: repeat(12, 1fr); }
    .tg-grid-7 > :nth-child(1),
    .tg-grid-7 > :nth-child(2),
    .tg-grid-7 > :nth-child(3) { grid-column: span 4; }
    .tg-grid-7 > :nth-child(4),
    .tg-grid-7 > :nth-child(5),
    .tg-grid-7 > :nth-child(6),
    .tg-grid-7 > :nth-child(7) { grid-column: span 3; }
    .tg-grid-5 { display: flex; flex-wrap: wrap; width: 100%; }
    .tg-grid-6 { grid-template-columns: repeat(3, auto); }
    .tg-grid-4 { grid-template-columns: repeat(2, auto); }
}

@media (max-width: 720px) {
    .tg-grid-10 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 500px) {
    .d-flex-2 { display: grid; grid-template-columns: 1fr; }
    .tg-grid-10, .tg-grid-9, .tg-grid-8, .tg-grid-7, .tg-grid-6,
    .tg-grid-5, .tg-grid-4, .tg-grid-3, .tg-grid-2 {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 1rem;
    }
    .tg-grid-7 > :nth-child(4),
    .tg-grid-7 > :nth-child(5),
    .tg-grid-7 > :nth-child(6),
    .tg-grid-7 > :nth-child(7) { grid-column: span 4; }
}

@media (min-width: 720px) and (max-width: 1000px) {
    .tg-grid-10-none10 > :nth-child(10) { display: none; }
}

/* Flex Utility Classes */
.flex-start { display: flex; gap: 10px; align-items: center; }
.flex-start-end { display: flex; gap: 10px; align-items: end; }

.flex-end {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 10px;
}
.flex-end-column {
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: end;
    gap:0px;
}

.d-flex-sm-column {
            display: flex;
            justify-content: space-between;
            align-items: end;
            gap: 10px;
            margin-bottom: 10px;
        }

        @media (max-width: 500px) {
            .tg-grid-3 {
                display: flex;
                flex-direction: column;
            }
            .d-flex-sm-column {
                flex-direction: column;
            }
        }

.center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.d-flex {
    display: flex;
    gap:0.25rem;
}

.d-grid {
    display:grid;
    gap:0.25rem;
}

.align-top {
    align-items: top !important;
    border: 1px solid red;
}

.flex-between {
    display: flex;
    justify-content: space-between;
}

.flex-between-bottom {
    display: flex;
    justify-content: space-between;
    align-items: end !important;
    gap: 10px;
    height:max-content;
}
.action-button {
    display:flex;
    gap:3px;
}




@media (max-width: 500px) {
    .flex-start {
        flex-direction: column;
    }
}

/* --- Animations & Responsive --- */
@keyframes slide-down {
    0% { transform: translateY(50%);opacity: 1; }
    100% { transform: translateY(500%);opacity: 0; }
}

@keyframes slide-up {
    0% { transform: translateY(100%); }
    100% { transform: translateY(0); }
}

@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}




@media screen and (max-width: 500px) {
    .img-container {
        display: none;
    }
    .tg-form-control.tg-lg {
        min-width: 100%;
    }
    .main-container {
        box-shadow:none;
        background:var(--tg-white);
    }
}


.border-dash {
    border: 1px dashed var(--tg-primary);
}

.border-top-dashed {
    border-top: 1px dashed var(--tg-grey-300);
}
.border-bottom-dashed {
    border-bottom:1px dashed var(--tg-grey-300)
}
.border-bottom {
    border-bottom: 1px solid var(--tg-grey-300);
}

/* สำหรับ Firefox */
.scroll-style-sm {
    scrollbar-width: thin;
    scrollbar-color: var(--tg-grey-400) ;
    overflow-y: auto;
}

/* สำหรับ Chrome, Safari, Edge และเบราว์เซอร์ที่ใช้ WebKit */
.scroll-style-sm::-webkit-scrollbar {
    width: 3px;
}

.scroll-style-sm::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.scroll-style-sm::-webkit-scrollbar-thumb {
    background: #6e0505;
    border-radius: 4px;
    height: 30px;
}

.scroll-style-sm::-webkit-scrollbar-thumb:hover {
    background: #555;
}



.wrap-card-summary{
    display: flex;
    flex-wrap: wrap;
    gap:5px;
    margin-bottom: 10px;
}

@media (max-width: 768px) {
    .wrap-card-summary {
        display:grid;
        grid-template-columns:repeat(3,1fr);
    }
}

@media (max-width: 500px) {
    .wrap-card-summary {
        grid-template-columns:1fr;
        background-color: rgba(226, 241, 243, 0.377);
        border-radius: 5px;
        gap:0px;
        padding:7px;
        flex-direction: column;
    }
    .card-summary {
        padding:1px 10px !important;
        background: transparent !important;
        padding-left: 25px !important;
    }
    .card-summary i {
        position: absolute;
        top: 50%;
        left: 5px !important;
        color: var(--tg-primary-500) !important;;
        display: inline;
        font-size: 20px !important;
    }
   
    .wrap-card-summary .card-summary {
        border-radius: 0px;
    }
   
    .card-summary > div {
        display: flex !important;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: baseline;
        width: 100%;
        
        padding:5px 9px;
        
    }
    .wrap-card-summary .card-summary:nth-last-child(1) {
        border-bottom:none;
    }
   
    .card-summary > div > * {
        font-size: 15px !important;
        color:var(--tg-grey-600)  !important;
    }
}

@media (max-width: 400px) {
    .wrap-card-summary {
        grid-template-columns:1fr;
    }
}


.header-table-center {
    font-size: var(--font-14);
    font-weight: 600;
    color: var(--text-color);
    text-transform: uppercase;
    padding:0 0.5rem;
    width: 100%;
    text-align: center;
    width:max-content;
    margin:0 auto;
}
.header-table-start {
    font-size: var(--font-14);
    margin-bottom: 5px;
    font-weight: 600;
    text-transform: uppercase;
    width: 100%;
    text-align: start;
    width:max-content;
    margin-bottom: 3px;
}

#logModal tbody tr:nth-child(even){
    background: var(--tg-grey-50);
}

table {
    width: 100%;
    border-collapse: collapse;
    overflow-x:auto;
    background: var(--tg-white);
    user-select:none;
    border-radius: 7px;
    user-select: none;
}
table tr ,table thead{
    user-select: none;
}

table.border-none {
    border:none !important;
}
table.border {
    border: 1px solid var(--tg-grey-200) !important;
}
table thead tr:nth-child(1) {
    border: 1px solid var(--tg-grey-200);
    user-select: none;
    border:none;
    border-bottom: 2px solid var(--tg-primary-400) !important;
    border-radius: 7px 7px 0 0;
}
table.hover tbody tr:hover td {
    background: rgb(237, 252, 252);
}

table td , table th{
    padding: 0.25rem 0.5rem;
    vertical-align: middle;
    text-align: center;
    white-space: nowrap;
    font-weight: 500;
    font-size: var(--font-12);
    color: var(--text-color);
    background: var(--tg-white) ;
    min-width:max-content;
    user-select: text;
}
table td * {
    font-size: var(--font-12);
    line-height: 1.5;
}
table th {
    padding: 5px 3px;
    text-transform: uppercase ;
    background:rgb(233, 237, 240);
    color: rgb(15, 16, 17);
    background-color: #a8d6e6;
    opacity: 1;
    background-image:  repeating-radial-gradient( circle at 0 0, #dee2e491 2px, #d7e3e9 6px ), repeating-linear-gradient( #cbd7db7a, #c1d2d6 );
}




table.boder thead th {
    border:1px solid var(--tg-grey-300);
}
table th * {
    text-transform: uppercase;
    color: var(--text-color);
}

table.border-bottom tbody tr:nth-last-child(1) td {
    border-bottom:1px solid var(--tg-grey-200);
}


td img {
    margin-right: 0.25rem;
    border-radius: 0.375rem;
    width:20px;
    height:20px;
    vertical-align: middle;
}
td button {
    background: var(--tg-primary);
    color:white;
    border:1px solid var(--tg-sky-800);
    border-radius: 5px;
    padding: 0px 5px;
    min-width: 30px;
    height: 25px;
    cursor: pointer;
    font-size: 12px;
    box-shadow:none;
    &:hover {
        border: 1px solid var(--tg-primary);
        background: var(--tg-primary);
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
        color: white;
    }
}
tbody tr td:nth-child(1) .dt::before {
    content:"⯅";
    color:rgb(150, 150, 142);
} 
tbody tr.dt-hasChild.dtr-expanded td:nth-child(1) .dt::before {
    content:"⯆";
    color:grey;
}
.tg-modal-backdrop table thead th, .tg-modal-backdrop table tbody td,.tg-modal-backdrop table tbody td * {
 font-size: 11px;
}
.tg-modal-backdrop table tbody td small {
    font-size: 10px;
}
.tg-modal-backdrop td .date-time div {
    font-size: 9px;
}
/* table thead tr:nth-child(1) th:nth-child(1) {
    border-radius: 5px 0px 0px 0px !important;

}
table thead tr:nth-child(1) th:nth-last-child(1) {
    border-radius: 0px 5px 0px 0px !important;
} */

td button[disabled] {
    background: var(--tg-grey-200);
    border: 1px solid var(--tg-grey-300) !important;
    color: var(--tg-grey-600) !important;
    cursor: not-allowed !important;
}

td.number {
    text-align: right;
    padding-right: 5px;
}

table.column-border-dashed {
    border:1px solid var(--tg-grey-300);
}



table.tb-border-bottom {
    border-bottom: 1px solid var(--tg-grey-100);
}


#logModal table tbody tr:nth-child(even) td {
    background:rgba(252, 252, 252, 0.247);
}
#logModal table tbody tr td  * {
    line-height: 1.5;
}
#logModal table tbody tr td  * > * {
    line-height: 1.4;
}

#logModal nav {
    margin-bottom: 10px;
}
#logModal nav button {
    box-shadow: none;
    border:rgb(235, 235, 235) 1px solid;
}
.column-border-dashed td {
    border-left: 1px dashed var(--tg-grey-100) !important;
}

.row-subtotal td {
    text-align: right;
    font-weight: 600;
    color:var(--text-color);
    border-bottom: 1px solid var(--tg-grey-100);
}
.row-subtotal:hover td {
    background: rgb(248, 241, 200);
}

.row-grand-total td {
    font-weight: 600;
    color:var(--text-color);
    border-top:1px solid var(--tg-grey-200);
    min-width: 110px;
    text-align: right;
    padding:0.5rem;
    text-transform: uppercase;
    background: var(--tg-grey-50);
}

.row-total td{
    border-top:1px dashed var(--tg-grey-200);
    text-align: right;
    padding: 7px 5px;
}

.row-date td{
    text-align: start;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    /* border-top:1px solid var(--tg-grey-200); */
}

.footer-total td {
    text-align: right;
    color:var(--text-color);
}
.footer-total tr:nth-last-child(1) td {
   font-weight: 600 ;
}
.footer-total tr:nth-last-child(1) td:nth-last-child(1){
    border-top:1px solid var(--tg-grey-200);
    border-bottom:3px double var(--tg-grey-200);
    min-width: 110px;
}

.td-number {
    text-align: right;
    min-width: 100px;
    background:rgb(236, 238, 240);
    padding-right: 8px;
}



.d-status-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.d-status-table-header .group-bt {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}


@media (max-width: 768px) {
    .d-status-table-header {
        display: grid;
        grid-template-columns: 1fr;
    }
    .d-status-table-header .group-bt {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

/* DataTables styles have been moved to datatable.css */
table .child td{
    border-top:var(--tg-grey-200) 1px dashed;
    border-bottom:var(--tg-grey-200) 1px dashed;
    background: rgba(245, 245, 245, 0.425);
}

table .child ul {
    list-style-type: none;
    padding-left: 0;
    
}

table .child ul > li {
    margin-bottom: 1px;
    padding: 2px 5px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap:10px;
}



table .child ul > li > span:nth-child(1) {
    color: rgb(82, 82, 82);
    min-width:100px;
    text-align:end;
    display: flex;
    align-items: center;
    justify-content: end;
    border-radius: 5px;
}


table .child ul > li > span:nth-child(1)::after {
    content: ":";
    margin:auto 5px;
    float: right;
}

table .child ul > li > span:nth-child(2) {
    display:flex;
    align-items: center;
    flex-wrap: wrap;
}


.w-maxcontent {
    max-width: max-content !important;
}

/* DataTables Footer Styles */
.datatable-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.5rem;
    flex-wrap: wrap;
    gap: 1rem;
    border-top: 1px solid rgb(235, 235, 235);
}

@media (max-width: 500px) {
    .datatable-footer {
        flex-direction: column;
        align-items: center;
    }
}
/* DataTables Pagination Styles */
.dt-paging nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3px;
}

.dt-paging-button.first,
.dt-paging-button.previous,
.dt-paging-button.next,
.dt-paging-button.last,
.dt-paging-button  {
    min-width: 25px;
    height: 25px;
    padding: 0 8px;
    border: 1px solid var(--tg-white);
    background: white;
    color: rgb(54, 60, 65);
    cursor: pointer;
    border-radius: 4px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: rgba(14, 63, 126, 0.06) 0px 0px 0px 1px, rgba(42, 51, 70, 0.03) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 2px 2px -1px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.03) 0px 5px 5px -2.5px, rgba(42, 51, 70, 0.03) 0px 10px 10px -5px, rgba(42, 51, 70, 0.03) 0px 24px 24px -8px;
    box-shadow: none;
    border:rgb(209, 208, 208) 1px solid;
}

.dt-paging-button:not(.disabled):hover {
    background: var(--tg-white);
    border-color: var(--tg-secondary);
    color: var(--tg-primary);
    border:1px solid var(--tg-primary-400);
}

.dt-paging-button.current{
    background:  var(--tg-grey-600);
    border-color: var(--tg-grey-600);
    color: #ffffff;
    font-weight: bold;
    cursor: default;
    font-weight: 500;
}


.dt-paging-button.current:hover {
    background:  var(--tg-primary-900);
    color: white;
}


.dt-paging-button.disabled{
    background-color: rgb(219, 214, 214) !important;
    box-shadow: none;
    color: #4e4d4d;
    border-color: #757474;
    cursor: not-allowed;
    opacity: 0.4;
    border:none;
}

.dt-paging-button i {
    font-size: 0.7rem !important;
    font-weight: 600;
}




button:not(table button) {
    border:none;
    white-space: nowrap;
    padding: 5px 10px;
    border-radius: 5px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 12px;
    height: max-content;
    &:active {
        scale: 0.95;
    }
}
button  {
    display:flex;
    justify-content: center;
    align-items: center;
    gap:2px;
    background:var(--tg-primary-800);
    color:white;
    border:1px solid var(--tg-sky);
    /* box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px; */
    min-height: 28px;
    text-transform: capitalize;
    &:hover {
        background: var(--tg-primary-500);
        color: white;
    }
}
button:active {
    scale: 0.98;
}

.h-30 {
    height: 30px !important;
}

.h-35 {
    height: 35px;
}

.h-29 {
    height: 29px !important;
}

.bt-clear {
    background:white;
    color:var(--text-color);
    border:1px solid var(--border-color);
    &:hover {
        background: var(--tg-grey-100);
        color:var(--text-color);
        border:1px solid var(--border-color);
    }
}

.bt-log {
    background: var(--tg-grey-50);
    border-color: var(--tg-grey-300);
    color: var(--tg-grey-700);
    &:hover {
        background: var(--tg-primary-200);
        border-color: var(--tg-grey-300);
        color: var(--tg-grey-700);
    }
}
.bg-grey {
    background: var(--tg-grey-500);
    color: white;
    &:hover {
        background: linear-gradient(to top,var(--tg-grey-800),var(--tg-grey-500)) ;
        color: white;
    }
}

.bg-green {
    background: rgb(27, 134, 27);
    color:white;
    border:1px solid var(--tg-green);
    &:hover {
        background: linear-gradient(to top,rgb(21, 128, 21),rgb(64, 156, 64));
    }
}

.bg-sky {
    background: rgb(3, 99, 116);
    color:white;
    border:1px solid var(--tg-sky);
    &:hover {
        background: linear-gradient(to top,rgb(54, 197, 223),rgb(100, 206, 223));
    }
}

.bg-green-light {
    background:rgb(224, 250, 224);
    color:rgb(21, 128, 21);
}
.bg-warning-light {
    background:rgb(247, 246, 245);
    color:rgb(235, 161, 2);
}


.text-green {
    color:rgb(21, 128, 21) !important;
}
.text-danger {
    color:rgb(212, 62, 62);
}
.text-blue {
    color:rgb(108, 181, 240);
}

.bg-danger {
    background: linear-gradient(25deg,rgb(212, 62, 62),rgb(218, 63, 63));
    color:white;
    border:1px solid var(--tg-danger);
    &:hover {
        background: linear-gradient(to top,rgb(212, 62, 62),rgb(238, 104, 104));
    }
}

.bg-danger-light {
    background:rgb(255, 240, 240);
    color:rgb(212, 62, 62);
}

.primary-outline {
    background:var(--tg-whtie);
    color:var(--tg-primary);
    border:1px rgb(20, 149, 172) solid;
    box-shadow: none;
}
.primary-outline:hover {
    background:var(--tg-primary-100);
    color:var(--tg-primary-700);
    border:1px var(--tg-primary-400) solid;
}

.bg-primary {
    background:var(--tg-primary);
    color:white;
    border:1px var(--tg-primary) solid;
}
.bg-primary:hover {
    background:var(--tg-primary-500);
    color:white;
    border:1px var(--tg-primary-400) solid;
}

.bg-yellow {
    background:rgb(238, 203, 5);
    color:white;
}



/* view Document Badge */
.view-document-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.2rem 0.8rem;
    border-radius: 999px;
    color:var(--tg-grey-700);
    background: linear-gradient(180deg, #f6f8fb 0%, #eef2f7 100%);
    border: 1px solid #e2e8f0;
    cursor: pointer;
    user-select: none;
    position: relative;
    transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.view-document-badge:hover {
    background: linear-gradient(180deg, #fefefe 0%, #f4f7fb 100%);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
    transform: translateY(-1px);
    color:var(--tg-blue);
}
.view-document-badge:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}
.view-document-badge .label {
    font-size: var(--fs-xsm);
    letter-spacing: 0.01em;
}
.view-document-badge .bi-file-earmark-text {
    color:var(--tg-grey-700);
}
.view-document-badge .chevron {
    color: #94a3b8;
    font-size: 0.9em;
}
.view-document-badge[disabled] {
    background: transparent;
    border: none;
    cursor: not-allowed;
}
.view-document-badge[disabled]:hover {
    transform:translateY(0);
    box-shadow: none;
}
.view-document-badge[disabled] span {
    color: var(--tg-primary);
}
.view-document-badge[disabled] .bi-file-earmark-text {
    color: var(--tg-grey-600);
    display: none;
}
.view-document-badge[disabled] .chevron {
    color: var(--tg-grey-600);
    display: none;
}


/* timeline */
.timeline-container {
    position: relative;
    padding: 2rem 0;
}
.timeline-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 140px;
    height: 100%;
    width: 2px;
    background-color: var(--tg-grey-300);
}

.timeline-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    margin-bottom: 2rem;
}

.timeline-time {
    position: absolute;
    left: 0;
    width: 120px;
    text-align: right;
    color: var(--tg-grey-600);
    display: flex;
    flex-direction: column;
    padding-top: 5px;
    height: 28px;
}

.timeline-icon {
    position: absolute;
    left: 140px;
    top: 7px;
    width: 16px;
    height: 16px;
    background-color: var(--tg-grey-100);
    border: 3px solid var(--tg-grey-500);
    border-radius: 50%;
    transform: translateX(-50%); /* จัดให้อยู่กึ่งกลางเส้น */
    z-index: 1;
}

.timeline-content {
    background-color: var(--tg-primary-100);
    border-radius: 8px;
    padding: 1.25rem;
    margin-left: 175px; /* ระยะห่างจากเส้นกลาง */
    width: 100%;
    max-width: 600px;
    position: relative;
}


.timeline-content .content-header {
    margin-bottom: 0.3rem;
}
.timeline-content .user {
    font-weight: 600;
    color: var(--tg-primary);
    margin-right: 0.5rem;
}
.timeline-content .action {
    font-weight: 500;
}
.timeline-content .content-body p {
    margin:0;
    color: var(--tg-grey-600);
    word-break: break-all;
}
.timeline-content .content-body p strong {
    color: var(--tg-primary);
    font-weight: 500;
}
.timeline-content.warning {
    background-color: rgb(245, 235, 209);
}
.timeline-content.warning .user {
    color: rgb(92, 77, 21);
}

.timeline-content.warning .content-body p strong {
    color: rgb(92, 77, 21);
}


/* input multiple file */
.multi-file-upload-component .file-upload-area {
    border: 2px dashed #d1d5db;
    border-radius: 12px;
    padding:1rem 2rem;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    background: #fafafa;
    margin-bottom: 1rem;
}

.multi-file-upload-component .file-upload-area:hover {
    border-color: #667eea;
    background: #f8fafc;
}

.multi-file-upload-component .upload-placeholder {
    color: #6b7280;
}

.multi-file-upload-component .upload-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #9ca3af;
}

.multi-file-upload-component .upload-placeholder h6 {
    margin: 0 0 0.5rem 0;
    color: #374151;
    font-weight: 600;
}

.multi-file-upload-component .upload-placeholder p {
    margin: 0 0 0.5rem 0;
    color: #6b7280;
}

.multi-file-upload-component .browse-link {
    color: #667eea;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}



.multi-file-upload-component .file-list {
    margin-bottom: 1rem;
}

.multi-file-upload-component .file-list h6 {
    margin-bottom: 1rem;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.multi-file-upload-component .file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:0.3rem 0.75rem;
    background: white;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    width:max-content;
    position:relative;
}

.multi-file-upload-component .file-item .file-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.multi-file-upload-component .file-item .file-info i {
    font-size: 1rem;
    color: #667eea;
}

.multi-file-upload-component .file-name {
    font-weight: 500;
    color: #374151;
    font-size:0.8rem;
}

.multi-file-upload-component .file-size {
    font-size: 0.6rem;
    color: #6b7280;
}

.multi-file-upload-component .file-item .remove-file {
    background: #ef4444;
    color: white;
    border: none;
    border-radius:100%;
    width:20px;
    height:20px;
    cursor: pointer;
    font-size: 0.75rem;
    transition: all 0.2s ease;
    position:absolute;
    right:-5px;
    top:-5px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.multi-file-upload-component .file-item:has(.remove-file:hover) {
   border:1px dashed red;
}


/* --- Dropdown Styles --- */
.dropdown {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dropdown-menu {
    position: absolute;
    z-index: 1000;
    display: none;
    min-width: 10rem;
    padding: 0.5rem 0;
    margin: 0;
    font-size: var(--fs-md);
    color: var(--tg-text);
    text-align: left;
    list-style: none;
    background-color: var(--tg-white);
    background-clip: padding-box;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.dropdown-menu.show {
    display: block;
}

.dropdown-menu-end {
    right: 0;
    left: auto;
}

.dropdown-item, .dropdown-menu > li {
    display: block;
    width: 100%;
    padding: 0.25rem 1rem;
    clear: both;
    font-weight: var(--font-weight-regular);
    color: var(--tg-grey-700);
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
    padding:5px 10px;
    user-select: none;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-menu > li:hover,
.dropdown-menu > li:focus {
    color: var(--tg-primary-700);
    background-color: var(--tg-sky-200);
}
.dropdown-menu > li .dropdown-item {
    padding:5px 10px;
    background-color: transparent;
}

.dropdown-menu  a {
    text-decoration: none;
    color: var(--tg-grey-700);
}

.dropdown-item.active,
.dropdown-item:active {
    color: var(--tg-white);
    background-color: var(--tg-primary);
}

.dropdown-divider {
    height: 0;
    margin: 0.5rem 0;
    overflow: hidden;
    border-top: 1px solid var(--border-color);
}

.dropdown .dropdown-item {
    background-color: transparent;
    font-weight: 500 !important;
    font-size: 12px !important;
}
.date-dropdown-toggle-select:hover i {
    scale: 1.1;
}

/* switcher-container */
.view-switcher {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    border:red 1px solid;
}
.wrap-tab {
    background: var(--tg-grey-100);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
}
.switcher-btn {
    padding: 0.3rem 1rem;
    color: var(--tg-primary);
    cursor: pointer;
    font-size: 14px;
    background-color: var(--tg-grey-300);
    border: 1px solid var(--tg-grey-300);
    background: var(--tg-white);
    display:flex;
    align-items: center;
    justify-content: center;
    gap:0.1rem;
    text-transform: uppercase;
    select: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;

}
.switcher-btn:hover {
    background-color: #fafdff;
    color:var(--tg-primary-900)
}
.switcher-btn:active {
    scale: 0.95;
}
.switcher-btn.active {
    background-color: var(--tg-primary);
    color: #fff;
    border-color: rgba(39, 152, 156, 0.671);
    background: linear-gradient(to top, var(--tg-primary), var(--tg-primary-500));
}
.view-panel {
    display: none;
    padding-top: 0.3rem;
    padding: 0px;
}
.view-panel.active {
    display: block;
    animation: slideInFromRight 0.4s ease-out forwards;
}
.switcher-btn.bt-sm {
    padding: 0.2rem 0.5rem;
    font-size: 0.8rem;
}

.switcher-btn.cancel {
    color: red;
    border: 1px solid red;
}
.switcher-btn.cancel.active {
    color: white;
    background: red;
}

.switcher-btn.success {
    color: green;
    border: 1px solid green;
}
.switcher-btn.success.active {
    color: white;
    background: green;
}

.switcher-btn.on-progress {
    color: var(--tg-primary);
    border: 1px solid var(--tg-grey-300);
}
.switcher-btn.on-progress.active {
    background: linear-gradient(to top, var(--tg-primary), var(--tg-primary-500));
    color: white;
    border: 1px solid var(--tg-primary);
}

.wrab-btn-tab-light  {
    /* border:1px solid var(--tg-grey-300);
    background:white; */
}
.wrab-btn-tab-light .switcher-btn {
    border:1px solid var(--tg-grey-300);
    height: 33px;
    font-size: 13px;
    text-transform: uppercase;
    border:none;
    background:transparent;
}
.wrab-btn-tab-light .switcher-btn.active {
    background:transparent;
    color:var(--tg-primary-700);
    background:var(--tg-primary-100);
}
.wrab-btn-tab-light .switcher-btn:hover {
    color:var(--tg-primary-700);
}

.input-with-icon {
    display: grid;
    grid-template-columns:1fr auto ;
    gap: 0.2rem;
    border: 1px solid var(--tg-grey-200);
    border-radius: 5px;
    background: var(--tg-white);
    padding:0px;

}
.input-with-icon input {
    border:none;
    border-radius: 5px;
    padding: 0.5rem;
    text-align: center;
    width:100%;
}



.input-with-icon input[type="number"]::-webkit-inner-spin-button,
.input-with-icon input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.input-with-icon .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--tg-grey-100);
    border-radius: 0 5px 5px 0;
    padding: 0.5rem;
    max-width:max-content;
}

.input-with-icon > span {
    background-color: var(--tg-grey-100);
    border-radius: 0 5px 5px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width:30px;
}


.input-with-icon input {
    border-color:red;
}
.tg-form-group:has(input[disabled]) .input-with-icon  {
    background-color: var(--tg-grey-100);
    cursor: not-allowed !important;
}

.tg-form-group:has(input[disabled]) .input-with-icon input {
    background-color: var(--tg-grey-100);
}


.date {
    color:rgb(92, 107, 112);
    font-size:11px;
    padding: 0.1rem 0.5rem;
    border-radius: 0.3rem;
}
.date-sm {
    color:rgb(92, 107, 112);
    font-size:9px;
    padding: 0.1rem 0.5rem;
    border-radius: 0.3rem;
}
.date-grid{
    display:grid;
    gap:0px;
}
.date-grid > *{
    color:rgb(92, 107, 112);
    font-size:9px;
    padding: 0.1rem 0.5rem;
    border-radius: 0.3rem;
}
.date-time > div{
    font-size:9px;
    border-radius: 0.3rem;
    padding: 0.1rem 0.5rem;
    width: max-content;
    text-align: center;
    margin: 0 auto;
    color:var(--tg-grey-500);
    line-height: 0.9;
}

.ID-number {
    font-weight: 600;
    color: var(--tg-sky-500);
}

.bt-default {
    border:none;
    padding:0.35rem 0.5rem;
    border-radius: 0.3rem;
    background:linear-gradient(135deg,var(--tg-sky-500), var(--tg-sky-700));
    color:white;
}



.amount {
    min-width: 110px !important;
    text-align: right !important;
}

.heigt-light {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.3rem;
    padding: 0.28rem 0.5rem;
    background:var(--tg-sky-100);
}
.heigt-light i {
    color: var(--tg-grey-500);
}
.text-highlight {
    color: var(--tg-primary);
    font-weight: 600;
}
.card-summary {
    border: 1px solidvar(--tg-primary-200);
    border-radius: 0.7rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 0.5rem;
    position: relative;
    min-width: 150px;
    overflow: hidden;
    background: var(--tg-primary-100);
    cursor: pointer;
}
.card-summary > i {
    position: absolute;
    top: 50%;
    left: -1.5rem;
    transform: translateY(-50%);
    font-size: 3.5rem;
    transition: all 0.3s ease;
    opacity: 0.7;
    color:white;
    &:hover {
        left: 0rem;
        opacity: 1;
        background: linear-gradient(120deg, var(--tg-sky), var(--tg-primary-300));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        left: -5px;
    }

}
.card-summary > div{
    display:grid;
    gap: 0rem;
}
.card-summary > div > .count {
    font-size: 1.7rem;
    margin:0px;
    line-height: 1;
    padding:0px;
    font-weight: 600;
    color:var(--tg-primary);
    text-align: end;
}
.card-summary > div > .label {
    font-size: 0.7rem;
    text-align: end;
    color: #6b7280;
}

/* Stat Card Styles */
.stat-card {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.75rem;
    transition: all 0.2s ease-in-out;
    flex: 1;
    position: relative;
    cursor: pointer;
    max-width: 200px;
    height: 80px;
    background: linear-gradient(60deg, var(--tg-primary-100), var(--tg-primary-100));
    border: 1px solid var(--tg-primary-200);
    color: var(--tg-primary);
    overflow: hidden;
}

.stat-card:active {
    transform: scale(0.95);
}

.stat-card.active {
    background: linear-gradient(120deg, var(--tg-primary-700), var(--tg-primary-600));
    color: var(--tg-white);
}

.stat-card-icon {
    font-size: 3.6rem;
    color: white;
    padding: 10px;
    border-radius: 50%;
    position: absolute;
    left: -25px;
    transition: all 0.3s ease;
    z-index: 0;
}

.stat-card:hover .stat-card-icon {
    background: linear-gradient(120deg, var(--tg-sky), var(--tg-primary-300));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    left: -5px;
}

.stat-card.active .stat-card-icon {
    color: white;
}

.stat-card-content {
    display: flex;
    flex-direction: column-reverse;
    line-height: 1.2;
    justify-content: flex-end;
    align-items: flex-end;
    text-align: right;
    position: relative;
}

.stat-card-label {
    font-size: 0.9rem;
    font-weight: 500;
    margin-top: 0.25rem;
}

.stat-card-count {
    font-size: 1.5rem;
    font-weight: bold;
    min-width: 120px;
    text-align: end;
}

@media (max-width: 768px) {
    .stat-card {
        max-width: 150px;
        height: 70px;
        padding: 0.25rem 0.75rem;
    }
    .stat-card-icon {
        font-size: 2rem;
        padding: 8px;
    }
    .stat-card-count {
        font-size: 1.25rem;
        min-width: 100px;
    }
    .stat-card-label {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .stat-card {
        max-width: 120px;
        height: 60px;
        padding: 0.25rem 0.5rem;
    }
    .stat-card-icon {
        font-size: 1.5rem;
        padding: 6px;
    }
    .stat-card-count {
        font-size: 1rem;
        min-width: 80px;
    }
    .stat-card-label {
        font-size: 0.75rem;
    }
}

.stat-card.danger {
    background: rgb(245, 213, 213);
    color: rgb(220, 53, 69);
    border: 1px solid rgb(236, 196, 201);
}

.stat-card.danger:hover .stat-card-icon {
    background: linear-gradient(120deg, rgb(231, 40, 59), rgb(236, 196, 201));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    left: -5px;
}

.card-summary.active {
    background: linear-gradient(120deg, var(--tg-sky), var(--tg-primary-300));
    color: white;
}

.dropdown-item {
    color: black;
    padding: 10px 20px;
    text-decoration: none;
    display: block;
    text-align: left;
    transition: background-color 0.2s;
    border: none;
}
.dropdown-item:hover {
    background-color: var(--tg-primary-100);
    color: black;
}
.dropdown-item.active {
    color: var(--tg-sky);
    background-color: white;
}



/* confirm dialog */

.bt-link {
    user-select: none;
    cursor: pointer;
    font-size: 1.2rem;
}
.bt-link:hover {
    color: var(--tg-primary);
}
.bt-link:active {
    scale: 0.95;
}



.confirm-btn-confirm:hover {
    opacity: 0.9;
}


.box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.br-2 {
    border-radius: 5px;
}

 /* Loading Overlay */
 .loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(2px);
}
 .loading-overlay.large {
    background-color: rgba(237, 245, 245, 0.829);
 }

.loading-overlay.hidden {
    display: none;
}

.loading-spinner {
    display:flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
}

.loading-spinner .spinner-border {
    width: 3rem;
    height: 3rem;
    border-width: 0.3em;
}

.loading-spinner p {
    margin-top: 1rem;
    color: var(--tg-primary);
    font-weight: 500;
}
.loading-overlay.large .loading-spinner {
     width: 17rem;
     height: 17rem;
}
.spinner {
  width:100px;
  height:100px;
  border:7px solid #ddd;
  filter: blur(1px);
  border-top:7px solid #01484b;
  border-radius:50%;
  animation: spin 1s linear infinite;
}

.loading-overlay.large .spinner {
    width: 8rem;
    height: 8rem;
    border-width: 0.3em;
    border-width: 15;
}
.loading-overlay.large p {
    font-size: 20px;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Prevent non-interactive elements from showing focus outline */
/* div:focus,
div:focus-visible,
span:focus,
span:focus-visible,
p:focus,
p:focus-visible,
section:focus,
section:focus-visible,
article:focus,
article:focus-visible,
header:focus,
header:focus-visible,
footer:focus,
footer:focus-visible,
nav:focus,
nav:focus-visible,
li:focus,
li:focus-visible,
ul:focus,
ul:focus-visible,
ol:focus,
ol:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
} */

/* Prevent focus on non-interactive elements */
/* div:not(button):not(a):not(input):not(select):not(textarea):not([tabindex]):not([contenteditable]),
span:not(button):not(a):not(input):not(select):not(textarea):not([tabindex]):not([contenteditable]),
p:not(button):not(a):not(input):not(select):not(textarea):not([tabindex]):not([contenteditable]) {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
} */

* >:has(input[type="checkbox"]) label ,button ,.dropdown-toggle-btn{
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

input.border-none {
    border: none;
}


.bg-tomato {
    background-color: #ff6347 !important;
    color: #fff !important;
    border-color: #ff6347 !important;
}

.text-tomato {
    color: #ff6347 !important;
}

button > i {
    color: inherit;
}

.bg-light {
    background: linear-gradient(to top, rgb(230, 240, 240),rgb(247, 250, 249));
}

.align-items-end {
    align-items: end !important;
}
.bg-light-badge {
    background:var(--tg-primary-100) !important;
    color:var(--tg-primary-700) !important;
    border:1px solid var(--tg-primary) !important;
    padding:2px 3px;
    font-size:0.6rem !important;
}

.tg-text-primary {
    color: var(--tg-primary-500) !important;
}

.bg-white {
    background-color: var(--tg-white);
    color: #000 !important;
}

.bg-white:hover {
    background-color: var(--tg-grey-100);
    color: #000 !important;
}

.bg-grey-light {
    background-color: var(--tg-grey-100);
    color: #3d3c3c !important;
}
.bg-grey-light:hover {
    background-color: var(--tg-grey-200);
    color: #000 !important;
}
.bg-sky {
    background: #13afb4 !important;
    color: #fff !important;
    border-color: #13afb4 !important;
}
.bg-sky:hover {
    background:#056568 ;
}
.bg-sky-light {
    background-color: var(--tg-sky-100);
    color: #000;
    border: 1px solid var(--tg-sky-200);
}
.bg-sky-light:hover {
    background-color: var(--tg-sky-200);
    color: #000;
}
.bg-sky-light:active {
    background-color: var(--tg-sky-300);
    color: #000;
}

.bg-white-bd {
    background-color: var(--tg-white);
    border: 1px solid var(--tg-grey-300);
    color: var(--tg-grey-700);
}


.sm-card {
    display: grid;
    gap: 0px;
    align-items: center;
    padding: 3px 5px;
    border-radius: 8px;
    margin: 3px;
}

.grid-col-auto-1fr {
    display: grid;
    grid-template-columns: auto 1fr;
}

.sm-card * {
    font-size: 12px !important;
}
.text-primary-dark {
    color: var(--tg-primary-700) !important;
}
.text-red {
    color: rgb(138, 2, 2) !important ;
}
.bg-red {
    background: rgb(138, 2, 2) !important ;;
}
.bold {
    font-weight: 600;
}

.normal {
    font-weight: 500 !important;
}

.border-1 {
    border: 1px solid var(--tg-grey-300);
}

.rounded-1 {
    border-radius: 5px !important;
}

.uppercase {
    text-transform: uppercase !important;
}

.relative {
    position: relative;
}

.absolute-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.border-bottom {
    border-bottom: 1px solid var(--border-color) !important;
}
.border-top {
    border-top: 1px solid var(--border-color) !important;
}
.border-bottom-double {
    border-bottom: 3px double var(--border-color);
}




.row-child {
    background: var(--tg-sky-100);
}
.overflow-x-auto {
    overflow-x: auto !important;
}

.nowrap {
    white-space: nowrap !important;
}


.wrap-content-col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.header-table {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.header-table h4 {
    padding:0px;
    line-height: 1;
    color:var(--tg-grey-600)
}

@media (max-width: 1200px) {
    .wrap-content-col {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
}


@media (max-width: 520px) {
    .header-table {
        flex-direction: column;
        gap:0px;
        justify-content: start;
        align-items: start;
    }
    
    .tg-box-container.tg-split-left , .tg-box-container.tg-split-right {
        padding:2px;
    }
    
    .header-table h4 {
        font-size: 0.85rem;
        font-weight: 500;
    }
   
}
.filter-box-color {
    padding: 5px 10px;
    border-radius: 7px;
    background:  rgb(240, 250, 249);
    border: 1px solid rgba(16, 146, 146, 0.4);
    color:  var(--tg-primary-600);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
}
.filter-box-color select {
    border:none;
}


.tg-sm-card2 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 0px;
    background-color:var(--tg-primary-100);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    min-width: 165px;
    /* box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; */
}
.tg-sm-card2 .icon {
    font-size: 3rem;
    position: absolute;
    top: 50%;
    left: -20px;
    transform: translateY(-50%);
    color:var(--tg-primary);
    opacity: 0.3;
}
.tg-sm-card2 .info {
    display: flex;
    flex-direction: column;
    color:whtie;

}
.tg-sm-card2 .info h3 {
    font-size: 12px;
    font-weight: 400;
    text-align: center;
    margin: 0;
}
.tg-sm-card2 .info p {
    font-size: 20px;
    font-weight: 400;
    text-align: center;
    margin: 0;
}
    @media (min-width: 1200px) {
        .tg-sm-card2 {
            min-width:200px;
        }
    }

    .header-between {
        display:flex;
        justify-content:space-between;
        align-items: center;

    }
    .header-sub {
        text-align:center;
    }

    @media (max-width:600px) {
        .header-between {
            flex-direction:column;
            gap:5px;
        }
        .header-between h2,.header-between > div {
            margin:auto;
        }
        .header-sub {
            font-size : 0.75rem;
            text-align:start;
        }
    }

    @media (max-width:400px) {
        .header-sub {
            font-size : 0.7rem;
            line-height:1.4;
        }
    }

    .wrap-tab-dark {
        background-color:var(--tg-primary-800);
        border-radius:7px;
        padding:7px 10px;
        margin-bottom:7px;
        border-radius:7px;
        display:flex;
        gap:3px;
        flex-wrap:wrap;
    }
    .wrap-tab-dark .switcher-btn{
            white-space:nowrap;
        }

    @media(max-width:800px) {
        .wrap-tab-dark .switcher-btn{
            flex-basis:140px; 
        }
    }

    @media(max-width:600px) {
        .wrap-tab-dark .switcher-btn{
            flex: 1 1 0%; 
        }
    }