/* ============================================
   Custom Styles - Themed with CSS Variables
   ============================================ */

.login {
    height: 1000px;
}
.login form {
    padding-top: 10%;
}
.logo {
    text-align: center;
    padding-bottom: 4%;
}
.input, .select, .select.pickerToggler {
    padding: 0.5rem 0.75rem;
}
.dropDownItem {
    padding: 0.25rem 0.75rem;
    background-color: var(--theme-surface);
    color: var(--theme-text-primary);
}
.dropDownItem:first-child {
    padding-top: 0.5rem;
}
.dropDownItem:last-child {
    padding-bottom: 0.5rem;
}
.dropDownItem:hover {
    background-color: var(--theme-bg-hover);
}
.pickerContent .pickerItem {
    padding: 0.675rem 0.75rem;
}
.pickerHeader .input {
    border-radius: none;
    border: none;
}
.check .checkLabel {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    color: var(--theme-text-primary);
}
.button {
    padding: 0.5rem 0.75rem;
}
select.select,
.select.pickerToggler {
    background-color: var(--theme-input-bg);
    color: var(--theme-text-primary);
}
.select:not(.is-multiple):not(.is-loading)::after {
    border-color: transparent !important;
}
.tedirTimeGroup .group .button.groupItem {
    padding: 0px;
}
.calendarDay, .calendarMonth, .tedirDateControl {
    display: flex;
    justify-content: center;
}
.tedirDateCenter, .tedirDateMonth {
    flex-grow: 1;
}
.tedirDateEnd {
    flex-grow: 0 !important;
}
.detailRecordTab {
    margin: 0px !important;
    padding: 0px !important;
    overflow-x: auto;
    width: 100%;
    z-index: 1;
}
.detailRecordTab .tabs {
    width: 100%;
}
.detailRecordTab .tabs ul {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}
.card.sd-none {
    box-shadow: none !important;
}

.pickerItem {
    background-color: var(--theme-surface);
    color: var(--theme-text-primary);
}

.scrolling-wrapper {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;

}
.scrolling-wrapper .card {
    display: inline-block;
}

.container.is-fluid {
    padding-left: 0;
    padding-right: 0;
}

main .breadcum {
    margin-top: 0px !important;
}
.modal {
    z-index: 6000 !important;
}
.modalHeader, .modalBody, .modalFooter {
    padding: 0.75rem !important;
    background-color: var(--theme-modal-bg);
    color: var(--theme-text-primary);
}
.modalHeader.modalHeaderNoPad {
    padding: 0px !important;
}

.tabs.is-boxed li.is-active a {
    font-weight: bold;
    background-color: var(--theme-bg-selected) !important;
    color: var(--theme-text-primary) !important;
}

.tabs.is-boxed li a {
    background-color: var(--theme-surface);
    color: var(--theme-text-primary);
    border-color: var(--theme-border);
}

.tabs.is-boxed li a:hover {
    background-color: var(--theme-bg-hover);
}

.input {
    border-color: var(--theme-input-border);
    border-width: 1px;
    background-color: var(--theme-input-bg);
    color: var(--theme-text-primary);
}

.input:focus {
    border-color: var(--theme-border-focus);
    box-shadow: 0 0 0 2px rgba(115, 101, 255, 0.2);
}

@media (min-width: 1024px) {
    .modalPrintPreview .modalContent {
        width: 960px;
    }
}

textarea[disabled],
textarea[readonly],
input[disabled],
input[readonly],
select[disabled] {
    background-color: var(--theme-bg-disabled);
    color: var(--theme-text-secondary);
    opacity: 0.6;
    border: 1px solid var(--theme-border);
}

.select.pickerToggler {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.pickerContent .pickerItem {
    padding: 5px 5px 5px !important;
}

.pickerContent .pickerItem:hover {
    background-color: var(--theme-primary);
    color: var(--theme-text-inverse);
}


.check input[type="checkbox"] {
    /* Base Styles aka unchecked */
    font-weight: 300;
    font-size: 16px;
    margin-top: 3px;
    margin-bottom: 3px;
    border-radius: 0px;
}

.check input[type="checkbox"]:not(:checked) {
    /* Explicit Unchecked Styles */
    background-color: var(--theme-input-bg);
}
.check input[type="checkbox"]:disabled {
    /* Explicit Unchecked Styles */
    background-color: var(--theme-bg-disabled);
}
.check input[type="checkbox"]:checked {
    /* Checked Styles */
    font-weight: 900;
    background-color: var(--theme-checkbox-checked);
}

select.select,
.select.pickerToggler,
.input {
    border-width: 1px;
    border-style: solid;
    font-weight: bold;
}

label.label {
    font-weight: normal;
    color: var(--theme-text-primary);
}
.pickerContent .pickerHeader {
    padding: 0px;
    border-bottom: 0px;
    border: 2px dotted var(--theme-primary);
    background-color: var(--theme-surface);
}

.modalContent {
    background-color: var(--theme-modal-bg);
    color: var(--theme-text-primary);
}

button.button {
  background-color: var(--theme-primary);
  border: 1px solid var(--theme-primary);
  color: var(--theme-text-inverse);
}
button.button:hover,
button.button.buttonActive {
  border: 1px solid var(--theme-primary-light);
  background-color: var(--theme-primary-light);
}

.headerActionFocus {
    border-radius: 0px !important;
}

.headerActionFocus.d-flex.justify-between {
    justify-content: normal;
}

.button.is-danger {
    background-color: var(--theme-danger);
    color: var(--theme-text-inverse);
}

.button.is-danger:hover {
    background-color: var(--theme-danger-hover);
}

main .container .bannercontrol {
    border-radius: 0px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    background-color: var(--theme-surface);
    padding-left: 20px;
    padding-right: 20px;
    border-bottom: 1px solid var(--theme-border);
    border-top: 1px solid var(--theme-border);
    margin-bottom: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: right;
}

.productGallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.galleryBox, .productChooserBox {
    width: 128px;
    height: 128px;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--theme-border);
    background-color: var(--theme-surface);
}

.productChooserBox {
    width: 145px;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    pointer-events: none;
}

.thumbnailBox {
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--theme-border);
    border-radius: 0rem;
    background-color: var(--theme-surface);
}

.thumbnailBox img,
.galleryBox img,
.productChooserBox img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    user-select: none;

}

.galleryBox .selectedGalleryBox {
    position: absolute;
    top: 5px;
    right: 25px; /*45px*/
    color: var(--theme-info);
}
.galleryBox .chooseGalleryBox {
    position: absolute;
    top: 5px;
    right: 25px;
    color: var(--theme-info);
}
.galleryBox .destroyGalleryBox {
    position: absolute;
    top: 5px;
    right: 5px;
    color: var(--theme-danger);
}

.addGalleryBox {
    border: 2px dashed var(--theme-border-dark);
    padding: 2.75rem;
    background-color: var(--theme-surface);
}

.column.importantwrapper {
    border: 1px solid var(--theme-border-dark);
    border-radius: 0px;
}

.offCanvasBackdrop {
    background-color: var(--theme-surface-overlay);
}

@media (max-width: 900px) {

    .container.is-fluid .banner {
        margin-left: 0px;
        margin-right: 0px;
    }

    .check input[type="checkbox"] {
        font-size: 30px;
    }

}

.check input[type="checkbox"]{
    border: 1px solid var(--theme-input-border);
}

label.label.d-block {
    font-size: 14px;
}

.calendar {
    width: auto !important;
    background-color: var(--theme-surface);
    color: var(--theme-text-primary);
}

.legend {
    position: relative;
}

.legend .label {
    position: absolute;
    left: 10px;
    top: -13px;
    z-index: 10;
    padding-left: 0.375rem;
    padding-right: 0.375rem;
    background-color: var(--theme-surface);
    border-bottom-left-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 90%;
    color: var(--theme-text-primary);
}

.select, .select.pickerToggler {
    border-color: var(--theme-input-border) !important;
    border-width: 1px !important;
    border-style: solid !important;
}

@ref d-inlineFlex items-center gap-5px fg-primary fg-success fg-info fg-warning fg-danger cursor-pointer;
@ref d-flex justify-between mb-3 gap-0.75rem pointerEvents-none opacity-0.6 filter-grayscale(1) w-180px;
@ref primary-light success-light info-light warning-light danger-light padding-0.5rem_0.75rem color-inherit;
@ref gap-10px w-100pct w-100px ml-2 fg-hex999 fg-hexfff sd-none bd-1px_solid_hexe4e3e6 mb-0px px-1.5rem;
@ref bg-hexfff w-150px flexDirection-column align-center flexGrow-1 mt-2 my-3 bt-2px_dashed_hexe2e2e2;
@ref textAlign-center textAlign-right mnh-450px overflowX-auto d-none flexWrap-wrap zIndex-1 w-60px;
@ref w-300px w-280px bb-1px_solid_hexe2e2e2 p-10px p-0.75rem w-145px p-1.5rem gap-1.5rem mr-1 verticalAlign-middle;
@ref w-250px h-450px mnh-768px px-3rem;
@ref d-grid placeItems-center overflow-auto rd-0px justify-center fs-64px m-1.5rem pt-1.5rem mt-1.5rem;
@ref px-0.75rem pt-0.75rem mxh-450px overflowY-auto justifyContent-flexEnd w-220px fw-bold mb-2 h-100pct;
@use form {
    field: button, group;
}
@use offCanvas;
@use slideX;
@use list;

.mt-0px {
    margin-top: 0px !important;
}

.legend.mt-2 {
    margin-top: 1.5rem !important;
}

.textAlignCenter {
    text-align: center !important;
}
.textAlignRight {
    text-align: right !important;
}
.verticalAlignMiddle {
    vertical-align: middle !important;
}
.banner {
    border: 1px solid var(--theme-border);
    box-shadow: 0px 3px 8px var(--theme-shadow-lg);
    background-color: var(--theme-surface);
}

.notification {
    top: auto;
    right: auto;
    color: var(--theme-text-inverse);
}

.fgInheritImportant {
  color: inherit !important;
}

.mb-0px {
  margin-bottom: 0px !important;
}

.check {
  margin-top: 0.375rem !important;
  margin-bottom: 0.375rem !important;
}

.checkInput {
  border-width: 1px !important;
}

.columnProductInfo {
  background-color: var(--theme-bg-tertiary) !important;
}

@media (max-width: 1200px) {
  .detailRecordResponsive .tableResponsive,
  .lineTableResponsive .tableResponsive {
    overflow-x: visible;
    overflow-y: visible;
  }
}

main .container .banner {
    gap: 0;
    padding: 0;
    margin-bottom: 0;
    border-radius: 3px;
}

main .container .banner.datatable-wrapper {
  padding: 1.5rem !important;
}

aside {
    overflow-y: visible;
}

.redButton {
  background-color: var(--theme-danger) !important;
  border-color: var(--theme-danger) !important;
  color: var(--theme-text-inverse) !important;
}
.redIcon {
  color: var(--theme-danger) !important;
}
.detailRecordResponsive span > .menu-icon.tf-icons {
  zoom: 1.5;
}

.redRow {
  background-color: var(--theme-row-red) !important;
}
.orangeRow {
  background-color: var(--theme-row-orange) !important;
}
.tealRow {
  background-color: var(--theme-row-teal) !important;
}
.greenRow {
    background-color: var(--theme-row-green) !important;
}
.greyRow {
    background-color: var(--theme-row-grey) !important;
}

a {
  --bulma-link-text: var(--theme-text-link) !important;
  color: var(--theme-text-link);
}

a:hover {
  color: var(--theme-text-link-hover);
}

.switch {
  display: inline-flex;
  align-items: center;
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}
.switch .switchInput {
  width: 1.5em;
  height: 1.5em;
  appearance: none;
  background-color: var(--theme-input-bg);
  border: 1px solid var(--theme-border)
}
.switch .switchInput:checked {
  border-color: var(--theme-switch-checked);
  background-color: var(--theme-switch-checked)
}
.switch .switchInput[disabled], .switch .switchInput.disabled {
  border-color: var(--theme-border);
  background-color: var(--theme-bg-disabled);
  pointer-events: none
}
.switch .switchInput:checked[disabled], .switch .switchInput:checked.disabled {
  background-color: var(--theme-text-muted)
}
.switch .switchInput[disabled] ~ .switchLabel, .switch .switchInput.disabled ~ .switchLabel {
  color: var(--theme-text-muted);
  cursor: default
}
.switch .switchLabel {
  display: inline-block;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  color: var(--theme-text-primary);
}
.switch .switchInput {
  width: 2.85em;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
  background-position: left center;
  border-radius: 2em !important;
  transform: scale(1) !important;
  transition: background-position .15s ease-in-out
}
.switch .switchInput:checked {
  background-position: right center;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e")
}

.fg-warning {
  color: var(--theme-warning);
}

.overlay.active {
  margin-left: 250px !important;
}

/* ============================================
   Card Theming
   ============================================ */
.card {
  background-color: var(--theme-surface);
  color: var(--theme-text-primary);
  border-color: var(--theme-border);
}

.card .cardBody,
.card .card-body {
  background-color: var(--theme-surface);
  color: var(--theme-text-primary);
}

/* ============================================
   Table Theming
   ============================================ */
table,
.table {
  background-color: var(--theme-table-bg);
  color: var(--theme-text-primary);
}

table th,
.table th {
  background-color: var(--theme-table-header-bg);
  color: var(--theme-text-primary);
  border-color: var(--theme-table-border);
}

table td,
.table td {
  border-color: var(--theme-table-border);
  color: var(--theme-text-primary);
}

table tr:hover,
.table tr:hover {
  background-color: var(--theme-table-row-hover);
}

/* ============================================
   Dropdown Menu Theming
   ============================================ */
.dropdown-menu,
.dropDown,
.dropDownContent {
  background-color: var(--theme-surface);
  border-color: var(--theme-border);
  box-shadow: 0 4px 6px var(--theme-shadow);
}

.dropdown-item {
  color: var(--theme-text-primary);
}

.dropdown-item:hover {
  background-color: var(--theme-bg-hover);
  color: var(--theme-text-primary);
}

/* ============================================
   Footer Theming
   ============================================ */
.footer,
footer {
  background-color: var(--theme-surface);
  color: var(--theme-text-secondary);
  border-top: 1px solid var(--theme-border);
}

/* ============================================
   Text Color Utilities (Themed)
   ============================================ */
.text-primary,
.fg-primary {
  color: var(--theme-primary) !important;
}

.text-success,
.fg-success {
  color: var(--theme-success) !important;
}

.text-warning,
.fg-warning {
  color: var(--theme-warning) !important;
}

.text-danger,
.fg-danger {
  color: var(--theme-danger) !important;
}

.text-info,
.fg-info {
  color: var(--theme-info) !important;
}

.text-muted {
  color: var(--theme-text-muted) !important;
}

/* ============================================
   Background Color Utilities (Themed)
   ============================================ */
.bg-primary {
  background-color: var(--theme-primary) !important;
}

.bg-success {
  background-color: var(--theme-success) !important;
}

.bg-warning {
  background-color: var(--theme-warning) !important;
}

.bg-danger {
  background-color: var(--theme-danger) !important;
}

.bg-info {
  background-color: var(--theme-info) !important;
}

/* ============================================
   Hero Section Theming
   ============================================ */
.hero {
  background-color: var(--theme-surface);
  color: var(--theme-text-primary);
}

.hero.is-info {
  background-color: var(--theme-info);
  color: var(--theme-text-inverse);
}

.hero.is-primary {
  background-color: var(--theme-primary);
  color: var(--theme-text-inverse);
}

/* ============================================
   Section Theming
   ============================================ */
.section {
  background-color: var(--theme-bg-secondary);
}

/* ============================================
   Breadcrumb Theming
   ============================================ */
.breadcrumb {
  background-color: transparent;
}

.breadcrumb a {
  color: var(--theme-text-link);
}

.breadcrumb li.is-active a {
  color: var(--theme-text-primary);
}