/* ไฟล์ CSS หลักสำหรับธีม GVGF ที่สร้างจากหน้า Invoice */

:root {
    /* สีเขียวปุ่ม */
    --primary-green: var(--brand, #14a800);
    --secondary-green: #4fff6c;
    
    /* สีขาวพื้นหลัง */
    --background-white: #ffffff;
    
    /* สีเทาพื้นหลัง */
    --background-gray-light: #F5F7FA;
    --background-gray-medium: #f4f4f4;
    --background-gray-header: #f8f8f8;
    --border-light: #e1e1e1;
    --border-lighter: #eee;
    --border-medium: #ddd;
    
    /* สีตัวหนังสือ */
    --text-primary: #333;
    --text-secondary: #666;
    --text-description: #555;
    --text-muted: #777;
    
    /* สีลิงก์ */
    --link-color: #0077C5;
    
    /* สีปุ่มลบ และ ยกเลิก */
    --danger-red: #F44336;
    --danger-dark: #cc0000;
}
/* Override Bootstrap container */
.container, .container-fluid {
  padding: 0;
  margin: 0;
  max-width: 100%;
  width: 100%;
  padding: 0;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Fix for mobile view */
@media (max-width: 768px) {
  body {
      padding-bottom: 50px;
  }
}
/* สไตล์พื้นฐานสำหรับปุ่ม */
.gvgf-btn {
    padding: 8px 16px;
    border-radius: 4px;
    border: none;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.gvgf-btn-primary {
    background-color: var(--primary-green);
    color: white;
}

.gvgf-btn-secondary {
    background-color: var(--background-gray-medium);
    color: var(--text-primary);
}

.gvgf-btn-danger {
    background-color: var(--danger-red);
    color: white;
}

.gvgf-btn-success {
    background-color: var(--primary-green);
    color: white;
}

.gvgf-btn-link {
    background: none;
    color: var(--link-color);
    padding: 0;
    text-decoration: underline;
}

/* สไตล์สำหรับพื้นหลัง */
.gvgf-bg-white {
    background-color: var(--background-white);
}

.gvgf-bg-gray-light {
    background-color: var(--background-gray-light);
}

.gvgf-bg-gray-medium {
    background-color: var(--background-gray-medium);
}

.gvgf-bg-gray-header {
    background-color: var(--background-gray-header);
}

/* สไตล์สำหรับข้อความ */
.gvgf-text-primary {
    color: var(--text-primary);
}

.gvgf-text-secondary {
    color: var(--text-secondary);
}

.gvgf-text-description {
    color: var(--text-description);
}

.gvgf-text-muted {
    color: var(--text-muted);
}

.gvgf-text-danger {
    color: var(--danger-red);
}

.gvgf-text-success {
    color: var(--primary-green);
}

.gvgf-text-link {
    color: var(--link-color);
}

/* สไตล์สำหรับขอบ */
.gvgf-border-light {
    border: 1px solid var(--border-light);
}

.gvgf-border-lighter {
    border: 1px solid var(--border-lighter);
}

.gvgf-border-medium {
    border: 1px solid var(--border-medium);
}

/* สไตล์สำหรับการ์ด */
.gvgf-card {
    background-color: var(--background-white);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

.gvgf-card-header {
    background-color: var(--background-gray-header);
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.gvgf-card-footer {
    background-color: var(--background-gray-header);
    padding: 16px 24px;
    border-top: 1px solid var(--border-light);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* สไตล์สำหรับฟอร์ม */
.gvgf-form-control {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-medium);
    border-radius: 4px;
    font-size: 14px;
}

.gvgf-form-label {
    display: block;
    margin-bottom: 5px;
    font-size: 14px;
    color: var(--text-secondary);
}

.gvgf-form-group {
    margin-bottom: 15px;
} 

/* /////////////////////////////////////////////////////////////////// */
/* text */
.gvgf-text-warning{ color:#f8b500 !important; }
.gvgf-text-white{ color:#ffffff !important; }
.gvgf-text-cbm-01{ color:#f0d9aa !important; }
.gvgf-text-cbm-02{ color:#c4aa79 !important; }
.gvgf-text-cbm-03{ color:#A8B8D8 !important; }
.gvgf-text-pnk{ color:#ffa1d0 !important; }
.gvgf-text-new{ color:#ff667c !important; }
.gvgf-text-ipg{ color:#fbcf33 !important; }
.gvgf-text-dne{ color:#98ec2d !important; }
.gvgf-text-ale{ color:#1e96ff !important; }
.gvgf-text-gdp{ color:#7928CA !important; }
.gvgf-text-pnd{ color:#ff6200 !important; }
.gvgf-text-act{ color:#17ad37 !important; }
.gvgf-text-pmr{ color:#97763a !important; }
.gvgf-text-root{ color:#f8b500 !important; }
.gvgf-text-admin{ color:#4CA1AF !important; }
.gvgf-text-user{ color:#EF629F !important; }
.gvgf-text-chart-01{ color: rgba(255, 99, 132, 0.2) !important; }
.gvgf-text-chart-02{ color: rgba(255, 159, 64, 0.2) !important; }
.gvgf-text-chart-03{ color: rgba(255, 205, 86, 0.2) !important; }
.gvgf-text-chart-04{ color: rgba(75, 192, 192, 0.2) !important; }
.gvgf-text-chart-05{ color: rgba(54, 162, 235, 0.2) !important; }
.gvgf-text-chart-06{ color: rgba(153, 102, 255, 0.2) !important; }
.gvgf-text-chart-07{ color: rgba(122, 255, 162, 0.2) !important; }
.gvgf-text-chart-08{ color: rgba(255, 97, 166, 0.2) !important; }
.gvgf-text-chart-01-solid{ color: rgba(255, 99, 132) !important; }
.gvgf-text-chart-02-solid{ color: rgba(255, 159, 64) !important; }
.gvgf-text-chart-03-solid{ color: rgba(255, 205, 86) !important; }
.gvgf-text-chart-04-solid{ color: rgba(75, 192, 192) !important; }
.gvgf-text-chart-05-solid{ color: rgba(54, 162, 235) !important; }
.gvgf-text-chart-06-solid{ color: rgba(153, 102, 255) !important; }
.gvgf-text-chart-07-solid{ color: rgba(122, 255, 162) !important; }
.gvgf-text-chart-08-solid{ color: rgba(255, 97, 166) !important; }
.gvgf-text-gradient-primary-x1{
    background: linear-gradient(310deg, #7928CA 0%, #FF0080 100%) !important;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.gvgf-text-gradient-info2{
    background: linear-gradient(360deg, #21d4fd 0%, #2152ff 100%) !important;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.gvgf-text-cbm-primary{ color:#1e96ff !important; }
.gvgf-text-dbs1{ color:#182241 !important; }
.gvgf-text-dbs2{ color:#4256A1 !important; }
.gvgf-text-dbs3{ color:#BB9A64 !important; }
.gvgf-text-dbs4{ color:#894D16 !important; }
.gvgf-text-scan{ color:#47e7ce !important; }
/* text */
/* /////////////////////////////////////////////////////////////////// */
/* background */
.gvgf-bg-wh{ background-color:#fff !important; }
.gvgf-bg-cbm-01{ background-color:#f0d9aa !important; }
.gvgf-bg-dbs1{ background-color:#182241 !important; }
.gvgf-bg-dbs2{ background-color:#4256A1 !important; }
.gvgf-bg-dbs3{ background-color:#BB9A64 !important; }
.gvgf-bg-dbs4{ background-color:#894D16 !important; }
.gvgf-bg-pnk{ background-color:#ffa1d0 !important; }
.gvgf-bg-new{ background-color:#ff667c !important; }
.gvgf-bg-ipg{ background-color:#fbcf33 !important; }
.gvgf-bg-dne{ background-color:#98ec2d !important; }
.gvgf-bg-ale{ background-color:#1e96ff !important; }
.gvgf-bg-gdp{ background-color:#7928CA !important; }
.gvgf-bg-pnd{ background-color:#ff6200 !important; }
.gvgf-bg-act{ background-color:#17ad37 !important; }
.gvgf-bg-pmr{ background-color:#97763a !important; }
.gvgf-bg-gradient-primary-4 { background-image: linear-gradient(45deg, #ff60b0 0%, #fa3195 100%) !important; }
.gvgf-bg-gradient-primary-6 { background-image: linear-gradient(45deg, #ff83c1 0%, #fa3195 100%) !important; }
.gvgf-bg-gradient-primary-2 { background-image: linear-gradient(310deg, #d8006c 0%, #ff7cbe 100%) !important; }
.gvgf-bg-gradient-primary-3 { background-image: linear-gradient(310deg, #FF0080 0%, #eb5aa2 100%) !important; }
.gvgf-bg-gradient-primary { background-image: linear-gradient(310deg, #7928CA 0%, #FF0080 100%) !important; }
.gvgf-bg-gradient-primary2 { background-image: linear-gradient(360deg, #FF0080 0%, #7928CA 100%) !important; }
.gvgf-bg-gradient-secondary { background-image: linear-gradient(310deg, #627594 0%, #A8B8D8 100%) !important; }
.gvgf-bg-gradient-success2 { background-image: linear-gradient(360deg, #98ec2d 0%, #17ad37 100%) !important; }
.gvgf-bg-gradient-info { background-image: linear-gradient(310deg, #2152ff 0%, #21d4fd 100%) !important; }
.gvgf-bg-gradient-info2 { background-image: linear-gradient(360deg, #21d4fd 0%, #2152ff 100%) !important; }
.gvgf-bg-gradient-warning { background-image: linear-gradient(310deg, #f53939 0%, #fbcf33 100%) !important; }
.gvgf-bg-gradient-warning2 { background-image: linear-gradient(360deg, #fbcf33 0%, #f53939 100%) !important; }
.gvgf-bg-gradient-danger { background-image: linear-gradient(310deg, #ea0606 0%, #ff667c 100%) !important; }
.gvgf-bg-gradient-danger2 { background-image: linear-gradient(360deg, #ff667c 0%, #ea0606 100%) !important; }
.gvgf-bg-gradient-light { background-image: linear-gradient(310deg, #CED4DA 0%, #EBEFF4 100%) !important; }
.gvgf-bg-gradient-dark { background-image: linear-gradient(310deg, #141727 0%, #3A416F 100%) !important; }
.gvgf-bg-gradient-primary-x-2 { background-image: linear-gradient(360deg, #ffe7bb 0%, #ffdd87 100%) !important; }
.gvgf-bg-gradient-primary-x { background-image: linear-gradient(310deg, #c4aa79 0%, #ffe7bb 100%) !important; }
.gvgf-bg-gradient-primary-y { background-image: linear-gradient(310deg, #c4aa79 0%, #fff371 100%) !important; }
.gvgf-bg-gradient-info-x { background-image: linear-gradient(310deg, #4ea9ff 0%, #21d4fd 100%) !important; }
.gvgf-bg-gradient-root { background-image: linear-gradient(310deg, #ffdd87 0%, #f8b500 50%) !important;}
.gvgf-bg-gradient-admin { background-image: linear-gradient(310deg, #2C3E50 0%, #4CA1AF 50%) !important;}
.gvgf-bg-gradient-user { background-image: linear-gradient(310deg, #ff8ebf 0%, #EF629F 100%) !important;}
.gvgf-bg-chart-01{ background-color: rgba(255, 99, 132, 0.2) !important; }
.gvgf-bg-chart-02{ background-color: rgba(255, 159, 64, 0.2) !important; }
.gvgf-bg-chart-03{ background-color: rgba(255, 205, 86, 0.2) !important; }
.gvgf-bg-chart-04{ background-color: rgba(75, 192, 192, 0.2) !important; }
.gvgf-bg-chart-05{ background-color: rgba(54, 162, 235, 0.2) !important; }
.gvgf-bg-chart-06{ background-color: rgba(153, 102, 255, 0.2) !important; }
.gvgf-bg-chart-07{ background-color: rgba(122, 255, 162, 0.2) !important; }
.gvgf-bg-chart-08{ background-color: rgba(255, 97, 166, 0.2) !important; }
.gvgf-bg-chart-01-solid{ background-color: rgba(255, 99, 132, 1) !important;}
.gvgf-bg-chart-02-solid{ background-color: rgba(255, 159, 64, 1) !important;}
.gvgf-bg-chart-03-solid{ background-color: rgba(255, 205, 86, 1) !important;}
.gvgf-bg-chart-04-solid{ background-color: rgba(75, 192, 192, 1) !important;}
.gvgf-bg-chart-05-solid{ background-color: rgba(54, 162, 235, 1) !important;}
.gvgf-bg-chart-06-solid{ background-color: rgba(153, 102, 255, 1) !important;}
.gvgf-bg-chart-07-solid{ background-color: rgba(122, 255, 162, 1) !important;}
.gvgf-bg-chart-08-solid{ background-color: rgba(255, 97, 166, 1) !important;}
.gvgf-bg-f7f7f7 { background-color: #f7f7f7 !important; }
.gvgf-bg-e7e7e7 { background-color: #e7e7e7 !important; }
.gvgf-bg-gradient-04 { background-image: linear-gradient(310deg, #03dce0  0%, #ffe055 100%) !important; }
.gvgf-bg-gradient-03 { background-image: linear-gradient(310deg, #ff667c  0%, #ff8b51 100%) !important; }
.gvgf-bg-gradient-02 { background-image: linear-gradient(310deg, #ff6200  0%, #ff8b51 100%) !important; }
.gvgf-bg-gradient-01 { 
    background-image: linear-gradient(310deg, #e2e2e2  0%, #ffffff 100%) !important; 
    color: #5b5b5b !important;
}
.gvgf-bg-pattern-game{
    background: url(../images/pattern/pattern-game.png) !important;
    color: #343a40;
    background-size: initial !important;
}
.gvgf-bg-pattern-0{
    background: url(../images/pattern/pattern-0.png) !important;
    color: #343a40;
    background-size: cover !important;
}
/* background */
/* /////////////////////////////////////////////////////////////////// */
/* font */
.fw1{ font-weight: 100; }
.fw2{ font-weight: 200; }
.fw3{ font-weight: 300; }
.fw4{ font-weight: 400; }
.fw5{ font-weight: 500; }
.fw6{ font-weight: 600; }
.fw7{ font-weight: 700; }
.fw8{ font-weight: 800; }
.fw9{ font-weight: 900; }
.fs10{ font-size: 10px !important; }
.fs12{ font-size: 12px !important; }
.fs14{ font-size: 14px !important; }
.fs16{ font-size: 16px !important; }
.fs18{ font-size: 18px !important; }
.fs20{ font-size: 20px !important; }
.fs22{ font-size: 22px !important; }
.fs24{ font-size: 24px !important; }
.fs26{ font-size: 26px !important; }
.fs28{ font-size: 28px !important; }
.fs30{ font-size: 30px !important; }
.fs40{ font-size: 40px !important; }
.fs50{ font-size: 50px !important; }
.fs100{ font-size: 100px !important; }
/* font */

/* pagination */
.active>.page-link {
    background-color: var(--primary-green) !important;
    border-color: var(--primary-green) !important;
    color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button{
    border: none !important;
    padding: 2px !important;
}
.dataTables_wrapper .dataTables_info{
    padding-left: 10px !important;
}
div.dataTables_wrapper div.dataTables_paginate ul.pagination{
    margin-right: 10px !important;
}
.page-link {
    color: var(--primary-green) !important;
}

.swal2-title{
    font-size: 22px !important;
}
.swal2-html-container{
    font-size: 16px !important;
}


/* ===== Org theme (assets/js/theme.js sets html[data-theme-color] only for a custom color) =====
   Bootstrap success buttons are used as brand action buttons (Browse Files, Add Selected, ...).
   Status badges (.bg-success / .text-success) stay green on purpose. */
html[data-theme-color] .btn-success {
    --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-hover); --bs-btn-hover-border-color: var(--brand-hover);
    --bs-btn-active-bg: var(--brand-dark); --bs-btn-active-border-color: var(--brand-dark);
    --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand);
    --bs-btn-focus-shadow-rgb: var(--brand-rgb);
}
html[data-theme-color] .btn-outline-success {
    --bs-btn-color: var(--brand); --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand);
    --bs-btn-active-bg: var(--brand-dark); --bs-btn-active-border-color: var(--brand-dark);
    --bs-btn-disabled-color: var(--brand); --bs-btn-disabled-border-color: var(--brand);
    --bs-btn-focus-shadow-rgb: var(--brand-rgb);
}