@font-face {
    font-family: 'GeistFont';
    src: url('../fonts/geist/GeistVF.woff') format('woff');
}

:root {
    --tblr-font-sans-serif: 'GeistFont';
}

.navbar-nav {
    font-weight: 500;
}

/* Navbar lateral - item activo (current) */
.nav-link.current::before {
    content: '';
    position: absolute;
    inset: 0.05rem 0.5rem;
    background: #f76707;
    border-radius: 0.3rem;
    z-index: 0;
}

/* Dark mode - naranja con opacidad y borde */
[data-bs-theme='dark'] .nav-link.current::before {
    background: rgba(255, 146, 43, 0.15);
    border: 1px solid #ff922b;
    border-radius: 6px;
}

/* Hover effect con ::before - tonos oscuros */
/* Excluir div.nav-link (subtítulos) del efecto hover */
[data-bs-theme='dark'] a.nav-link:hover::before,
[data-bs-theme='dark'] a.nav-link:focus::before {
    content: '';
    position: absolute;
    inset: 0.05rem 0.5rem;
    background: #2d2d2d;
    border: 1px solid #3a3a3a;
    border-radius: 6px;
    z-index: 0;
}

/* Evitar duplicar el efecto en nav-link activos durante hover */
[data-bs-theme='dark'] a.nav-link.current:hover::before,
[data-bs-theme='dark'] a.nav-link.current:focus::before {
    background: rgba(255, 146, 43, 0.15);
    border: 1px solid #ff922b;
}

.current * {
    color: white !important;
}

.nav-link > * {
    position: relative;
    z-index: 1;
}

.progressbg {
    padding: 0.15rem 0.5rem !important;
}
/*tbody > tr:hover {
    background-color: #f5f5f5;
}*/

tr:hover {
    cursor: pointer;
}

.btn-transparent {
    background-color: transparent;
    border-color: transparent;
    padding-top: 7px;
    padding-bottom: 7px;
    cursor: pointer;
    border: none;
    box-shadow: none;
}
.btn-transparent:hover {
    background-color: #f5f5f5;
    padding-top: 7px;
    padding-bottom: 7px;
    cursor: pointer;
    border: none;
}

/*First child of container*/

#selected-images {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px; /* Espacio entre los elementos */
    width: 100%; /* Ocupa el 100% del ancho */
}

.img-added-dpz,
.add-file-element {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    position: relative;
    aspect-ratio: 1; /* Mantiene la proporción cuadrada */
}

.img-added-dpz img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    background-color: #f5f5f5;
}

.dz-preview {
    display: none;
}

#selected-images .img-added-dpz:nth-child(1) {
    grid-column: span 2;
    grid-row: span 2;
}

.file-item {
    width: 100px;
    height: 100px;
    object-fit: contain;
    background-color: #fff;
    border-radius: 10px;
    border: 1px #c3c3c3 solid;
}

.add-file-element {
    background-color: #f5f5f5;
    border-radius: 10px;
    border: 1px #c3c3c3 dashed;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.select-categories-item:hover {
    background-color: #e3e2e2;
    cursor: pointer;
}

.selected-category {
    background-color: #e9e9e9;
}
#product-category-ts-dropdown > .selected.active {
    background-color: #f8f8f8;
}

#product-category-ts-dropdown > .active {
    background-color: #f8f8f8;
}

#product-category-ts-dropdown > .selected {
    background-color: #e3e2e2;
}

.dp-header-categories:hover {
    background-color: #f5f5f5;
    cursor: pointer;
}

.horizontal-divider {
    width: 1px;
    height: 1.5rem;
    background-color: lightgray;
}

.card-header-tabs .nav-link.active {
    background-color: transparent !important;
    border-width: 0 0 2px 0 !important;
    border-bottom-color: black;
}

.card-header-tabs .nav-link:hover {
    background-color: transparent !important;
    border-width: 0 0 2px 0 !important;
    border-bottom-color: rgb(176, 176, 176);
}

.card-header-tabs {
    background-color: transparent;
    font-weight: 500;
}

.link-button {
    background-color: transparent;
    border: none;
    color: #007bff;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 3.5px;
}

.form-control,
.form-select {
    padding: 0.25rem 0.75rem !important;
}

.link-button:hover .link-text {
    text-decoration: underline;
}
.link-button i {
    font-size: 19px;
}

.dropzone-60 {
    height: 60px;
    border: 1px #c3c3c3 dashed;
    width: 60px;
}

.dropzone-60:hover {
    background-color: #bfbfbf;
    cursor: pointer;
}

.dropzone-50 {
    height: 50px;
    border: 1px #c3c3c3 dashed;
    width: 50px;
}

.dropzone-50:hover {
    background-color: #bfbfbf;
    cursor: pointer;
}

.dropzone-40 {
    height: 40px;
    border: 1px #c3c3c3 dashed;
    width: 40px;
}

.dropzone-40:hover {
    background-color: #bfbfbf;
    cursor: pointer;
}

.dropzone-30 {
    height: 30px;
    border: 1px #c3c3c3 dashed;
    width: 30px;
}

.dropzone-30:hover {
    background-color: #bfbfbf;
    cursor: pointer;
}

.dropzone-20 {
    height: 20px;
    border: 1px #c3c3c3 dashed;
    width: 20px;
}

.dropzone-20:hover {
    background-color: #bfbfbf;
    cursor: pointer;
}

.pac-icon {
    display: none;
}

.pac-item {
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}
.pac-item:hover {
    border: 0;
    background-color: #f1f2f4;
}

.pac-item-selected {
    background-color: #f1f2f4;
}

.pac-container {
    border-radius: 10px;
    padding: 5px 10px;
    margin-top: 5px;
}
.iti {
    width: 100%;
}

/* Border on bottom for small screens (sm) */
.border-bottom-sm {
    border-bottom: var(--tblr-border-width) solid var(--tblr-border-color); /* Border bottom for small screens */
}

@media (min-width: 768px) {
    .border-bottom-sm {
        border-bottom: 0; /* Remove bottom border for md and larger */
    }
}

/* Border on bottom for medium screens (md) */
.border-bottom-md {
    border-bottom: 0; /* No border on small screens */
}

@media (min-width: 768px) {
    .border-bottom-md {
        border-bottom: var(--tblr-border-width) solid var(--tblr-border-color); /* Border bottom for medium screens and larger */
    }
}

/* Border on right (end) for small screens (sm) */
.border-end-sm {
    border-right: var(--tblr-border-width) solid var(--tblr-border-color); /* Border right for small screens */
}

@media (min-width: 768px) {
    .border-end-sm {
        border-right: 0; /* Remove right border for md and larger */
    }
}

/* Border on right (end) for medium screens (md) */
.border-end-md {
    border-right: 0; /* No border on small screens */
}

@media (min-width: 768px) {
    .border-end-md {
        border-right: var(--tblr-border-width) solid var(--tblr-border-color); /* Border right for medium screens and larger */
    }
}

.dropdown-toggle:after {
    margin-top: -0.3em !important;
}

.ts-control {
    padding: 0.25rem 0.75rem !important;
}

.ts-wrapper {
    min-height: 0 !important;
}

div.dts div.dt-scroll-body,
div.dts div.dataTables_scrollBody {
    background: none !important;
}

td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lb-outerContainer {
    border-radius: 1rem !important;
    overflow: hidden;
}

.lb-image {
    border: 0 !important;
}

div.dts div.dt-scroll-body table,
div.dts div.dataTables_scrollBody table {
    background-color: transparent !important;
}

.sys-notification:hover {
    background-color: #efefef;
}

ul.new-tabs[data-bs-toggle='tabs'] .nav-link {
    position: relative; /* anchor ::before */
    z-index: 0; /* create a stacking context for safe layering */
    color: var(--bs-secondary-color); /* default (inactive) text color */
}

/* Ensure icons inherit text color */
ul.new-tabs[data-bs-toggle='tabs'] .nav-link i,
ul.new-tabs[data-bs-toggle='tabs'] .nav-link svg {
    color: currentColor;
    fill: currentColor;
}

/* Active tab: readable text color */
ul.new-tabs[data-bs-toggle='tabs'] .nav-link.active {
    color: white !important; /* visible on light bg */
    background-color: transparent; /* neutralize Bootstrap */
    border: none !important;
    box-shadow: none;
}

/* Soft highlight background behind content */
ul.new-tabs[data-bs-toggle='tabs'] .nav-link.active::before {
    content: '';
    position: absolute;
    inset: 0rem 0.2rem; /* “padding” del fondo */
    background: #f76707;
    border-radius: 0.4rem;
    z-index: -1; /* keep it BEHIND the text/icons */
}
/* Dark mode - naranja con opacidad y borde */
[data-bs-theme='dark'] ul.new-tabs[data-bs-toggle='tabs'] .nav-link.active::before {
    background: rgba(255, 146, 43, 0.15);
    border: 1px solid #ff922b;
}

/* Dark mode hover - solo en el before */
[data-bs-theme='dark'] ul.new-tabs[data-bs-toggle='tabs'] .nav-link:hover::before {
    content: '';
    position: absolute;
    inset: 0rem 0.2rem;
    background: rgba(255, 146, 43, 0.08);
    border: 1px solid rgba(255, 146, 43, 0.3);
    border-radius: 0.4rem;
    z-index: -1;
}

/* Optional: keep the same readable color on hover/focus of active tab */
ul.new-tabs[data-bs-toggle='tabs'] .nav-link:hover,
ul.new-tabs[data-bs-toggle='tabs'] .nav-link:focus {
    border: none !important;
}

ul.new-tabs[data-bs-toggle='tabs'] .nav-link.active:hover,
ul.new-tabs[data-bs-toggle='tabs'] .nav-link.active:focus {
    color: white !important;
    border: none !important;
}

ul.new-tabs[data-bs-toggle='tabs'] .nav-link {
    border: none !important;
}

/* ================================
   Vertical Tabs (flex-column) Styles
   ================================ */

/* Remove ::before pseudo-element from ALL vertical tabs */
ul.nav-tabs.flex-column .nav-link::before,
ul.new-tabs.flex-column .nav-link::before {
    content: none !important;
    display: none !important;
}

/* Base styles for vertical tabs */
.nav-tabs.flex-column .nav-link {
    background-color: transparent;
    border: none !important;
    border-radius: var(--tblr-border-radius-lg);
    transition: background-color 0.15s ease-in-out;
}

/* Light mode hover */
body[data-bs-theme='light'] .nav-tabs.flex-column .nav-link:hover {
    background-color: rgba(var(--tblr-primary-rgb), 0.05);
}

/* Light mode active */
body[data-bs-theme='light'] .nav-tabs.flex-column .nav-link.active {
    background-color: rgba(var(--tblr-primary-rgb), 0.1);
    color: var(--tblr-primary);
}

/* Dark mode styles */
body[data-bs-theme='dark'] .nav-tabs.flex-column .nav-link {
    background-color: transparent;
    color: var(--tblr-body-color);
}

/* Dark mode hover */
body[data-bs-theme='dark'] .nav-tabs.flex-column .nav-link:hover {
    background-color: rgba(var(--tblr-primary-rgb), 0.08);
}

/* Dark mode active */
body[data-bs-theme='dark'] .nav-tabs.flex-column .nav-link.active {
    background-color: rgba(var(--tblr-primary-rgb), 0.15);
    border: 1px solid var(--tblr-primary) !important;
    color: var(--tblr-primary);
}

/* Dark mode active hover */
body[data-bs-theme='dark'] .nav-tabs.flex-column .nav-link.active:hover {
    background-color: rgba(var(--tblr-primary-rgb), 0.2);
}

/* ================================
   Vertical Tabs with new-tabs class (Orange Theme)
   ================================ */

/* Override vertical tabs with new-tabs class to use orange theme matching horizontal tabs */

/* Ensure icons inherit text color in vertical tabs */
ul.new-tabs.flex-column .nav-link i,
ul.new-tabs.flex-column .nav-link svg {
    color: currentColor !important;
    fill: currentColor !important;
}

/* Default text color for inactive tabs */
ul.new-tabs.flex-column .nav-link {
    color: var(--bs-secondary-color);
}

/* Light mode hover for new-tabs vertical */
body[data-bs-theme='light'] ul.new-tabs.flex-column .nav-link:hover {
    background-color: rgba(247, 103, 7, 0.05) !important;
}

/* Light mode active for new-tabs vertical - WHITE TEXT ON ORANGE BACKGROUND */
body[data-bs-theme='light'] ul.new-tabs.flex-column .nav-link.active {
    background-color: #f76707 !important;
    color: white !important;
    border-color: #f76707 !important;
}

/* Light mode active - ensure all children are white */
body[data-bs-theme='light'] ul.new-tabs.flex-column .nav-link.active i,
body[data-bs-theme='light'] ul.new-tabs.flex-column .nav-link.active svg,
body[data-bs-theme='light'] ul.new-tabs.flex-column .nav-link.active * {
    color: white !important;
}

/* Light mode active hover - keep white text */
body[data-bs-theme='light'] ul.new-tabs.flex-column .nav-link.active:hover,
body[data-bs-theme='light'] ul.new-tabs.flex-column .nav-link.active:focus {
    color: white !important;
    background-color: #f76707 !important;
}

/* Dark mode hover for new-tabs vertical */
body[data-bs-theme='dark'] ul.new-tabs.flex-column .nav-link:hover {
    background-color: rgba(255, 146, 43, 0.08) !important;
    border: 1px solid rgba(255, 146, 43, 0.3) !important;
}

/* Dark mode active for new-tabs vertical */
body[data-bs-theme='dark'] ul.new-tabs.flex-column .nav-link.active {
    background-color: rgba(255, 146, 43, 0.15) !important;
    border: 1px solid #ff922b !important;
    color: white !important;
}

/* Dark mode active - ensure all children are orange */
body[data-bs-theme='dark'] ul.new-tabs.flex-column .nav-link.active i,
body[data-bs-theme='dark'] ul.new-tabs.flex-column .nav-link.active svg,
body[data-bs-theme='dark'] ul.new-tabs.flex-column .nav-link.active * {
    color: white !important;
}

/* Dark mode active hover for new-tabs vertical */
body[data-bs-theme='dark'] ul.new-tabs.flex-column .nav-link.active:hover {
    background-color: rgba(255, 146, 43, 0.2) !important;
}

/* ================================
   Tom Select Dark Theme Compatibility
   ================================ */

/* Dark theme for Tom Select - matching Tabler dark theme colors */
[data-bs-theme='dark'] .ts-wrapper .ts-control,
html.theme-dark .ts-wrapper .ts-control {
    background-color: var(--tblr-bg-surface-dark, #1d2023);
    border-color: var(--tblr-border-color-dark, #313539);
    color: var(--tblr-body-color, #ffffff);
}

[data-bs-theme='dark'] .ts-wrapper .ts-control input,
html.theme-dark .ts-wrapper .ts-control input {
    color: var(--tblr-body-color, #ffffff);
}

[data-bs-theme='dark'] .ts-wrapper .ts-control input::placeholder,
html.theme-dark .ts-wrapper .ts-control input::placeholder {
    color: var(--tblr-secondary-color, #a0a6ad);
}

/* Dropdown in dark mode */
[data-bs-theme='dark'] .ts-dropdown,
html.theme-dark .ts-dropdown {
    background-color: var(--tblr-bg-surface-dark, #1d2023);
    border-color: var(--tblr-border-color-dark, #313539);
    color: var(--tblr-body-color, #ffffff);
}

[data-bs-theme='dark'] .ts-dropdown .ts-dropdown-content,
html.theme-dark .ts-dropdown .ts-dropdown-content {
    background-color: var(--tblr-bg-surface-dark, #1d2023);
}

/* Dropdown options hover/active states */
[data-bs-theme='dark'] .ts-dropdown .option,
html.theme-dark .ts-dropdown .option {
    color: var(--tblr-body-color, #ffffff);
}

[data-bs-theme='dark'] .ts-dropdown .option:hover,
[data-bs-theme='dark'] .ts-dropdown .option.active,
html.theme-dark .ts-dropdown .option:hover,
html.theme-dark .ts-dropdown .option.active {
    background-color: var(--tblr-bg-surface-tertiary, #313539);
    color: var(--tblr-body-color, #ffffff);
}

[data-bs-theme='dark'] .ts-dropdown .option.selected,
html.theme-dark .ts-dropdown .option.selected {
    background-color: var(--tblr-primary, #206bc4);
    color: #ffffff;
}

/* Items/tags in dark mode */
[data-bs-theme='dark'] .ts-wrapper.multi .ts-control > div,
html.theme-dark .ts-wrapper.multi .ts-control > div {
    background-color: var(--tblr-primary, #206bc4);
    border-color: var(--tblr-primary, #206bc4);
    color: #ffffff;
}

[data-bs-theme='dark'] .ts-wrapper.multi .ts-control > div .remove,
html.theme-dark .ts-wrapper.multi .ts-control > div .remove {
    color: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.2);
}

[data-bs-theme='dark'] .ts-wrapper.multi .ts-control > div .remove:hover,
html.theme-dark .ts-wrapper.multi .ts-control > div .remove:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
}

/* Disabled state in dark mode */
[data-bs-theme='dark'] .ts-wrapper.disabled .ts-control,
html.theme-dark .ts-wrapper.disabled .ts-control {
    background-color: var(--tblr-bg-surface-secondary, #26292c);
    opacity: 0.6;
}

/* Focus state in dark mode */
[data-bs-theme='dark'] .ts-wrapper.focus .ts-control,
html.theme-dark .ts-wrapper.focus .ts-control {
    border-color: var(--tblr-primary, #206bc4);
    box-shadow: 0 0 0 0.25rem rgba(32, 107, 196, 0.25);
}

/* Optgroup headers in dark mode */
[data-bs-theme='dark'] .ts-dropdown .optgroup-header,
html.theme-dark .ts-dropdown .optgroup-header {
    background-color: var(--tblr-bg-surface-secondary, #26292c);
    color: var(--tblr-secondary-color, #a0a6ad);
}

/* No results message in dark mode */
[data-bs-theme='dark'] .ts-dropdown .no-results,
html.theme-dark .ts-dropdown .no-results {
    color: var(--tblr-secondary-color, #a0a6ad);
}

/* Single select caret/arrow in dark mode */
[data-bs-theme='dark'] .ts-wrapper.single .ts-control:after,
html.theme-dark .ts-wrapper.single .ts-control:after {
    border-color: var(--tblr-secondary-color, #a0a6ad) transparent transparent transparent;
}

[data-bs-theme='dark'] .ts-wrapper.single.dropdown-active .ts-control:after,
html.theme-dark .ts-wrapper.single.dropdown-active .ts-control:after {
    border-color: transparent transparent var(--tblr-secondary-color, #a0a6ad) transparent;
}

/* ================================
   Google Maps Dark Theme Compatibility
   ================================ */

/* Dark mode for embedded Google Maps iframes - matching Tabler dark palette */
[data-bs-theme='dark'] iframe[src*='google.com/maps'],
html.theme-dark iframe[src*='google.com/maps'] {
    filter: invert(92%) hue-rotate(180deg) brightness(0.9) contrast(0.95);
    border-radius: inherit;
}

/* Fix for controls and text that shouldn't be inverted */
[data-bs-theme='dark'] iframe[src*='google.com/maps'] img,
html.theme-dark iframe[src*='google.com/maps'] img {
    filter: invert(100%) hue-rotate(180deg) brightness(1.1);
}

/* Dark mode container for Google Maps API - using Tabler dark colors */
[data-bs-theme='dark'] #map-canvas,
[data-bs-theme='dark'] #map-edit,
[data-bs-theme='dark'] #map_order,
[data-bs-theme='dark'] [id*='map'],
html.theme-dark #map-canvas,
html.theme-dark #map-edit,
html.theme-dark #map_order,
html.theme-dark [id*='map'] {
    background-color: #040a11; /* Tabler dark body bg */
}

/* Google Maps UI elements dark mode adjustments - subtle matching Tabler */
[data-bs-theme='dark'] .gm-style,
html.theme-dark .gm-style {
    filter: brightness(0.8) contrast(1.15) saturate(0.95);
}

/* Google Maps controls background - matching Tabler surface colors */
[data-bs-theme='dark'] .gm-style button,
[data-bs-theme='dark'] .gm-style-mtc,
html.theme-dark .gm-style button,
html.theme-dark .gm-style-mtc {
    background-color: #182433 !important; /* Tabler secondary bg */
    border-color: #1f2e41 !important; /* Tabler border color */
    color: #fcfdfe !important; /* Tabler body color */
}

/* Google Maps info window dark mode - matching Tabler palette */
[data-bs-theme='dark'] .gm-style .gm-style-iw-c,
[data-bs-theme='dark'] .gm-style .gm-style-iw-d,
html.theme-dark .gm-style .gm-style-iw-c,
html.theme-dark .gm-style .gm-style-iw-d {
    background-color: #182433 !important; /* Tabler secondary bg */
    color: #fcfdfe !important; /* Tabler body color */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.4) !important;
}

/* Info window pointer/arrow - matching Tabler */
[data-bs-theme='dark'] .gm-style .gm-style-iw-tc::after,
html.theme-dark .gm-style .gm-style-iw-tc::after {
    background: linear-gradient(45deg, #182433 50%, rgba(0, 0, 0, 0) 51%, rgba(0, 0, 0, 0) 100%) !important;
}

/* Google Maps zoom/street view controls - dark theme */
[data-bs-theme='dark'] .gm-bundled-control,
[data-bs-theme='dark'] .gm-svpc,
html.theme-dark .gm-bundled-control,
html.theme-dark .gm-svpc {
    background-color: #0e1722 !important; /* Tabler tertiary bg */
    border: 1px solid #1f2e41 !important; /* Tabler border color */
}

/* Map type controls text - dark theme */
[data-bs-theme='dark'] .gm-style-mtc label,
[data-bs-theme='dark'] .gm-style-mtc span,
html.theme-dark .gm-style-mtc label,
html.theme-dark .gm-style-mtc span {
    color: #fcfdfe !important; /* Tabler body color */
}

/* ============================================ */
/* Flatpickr Dark Mode - Tabler Palette */
/* ============================================ */

/* Light mode styles */
[data-bs-theme='light'] .flatpickr-calendar {
    background-color: #ffffff;
    border: 1px solid #dadcde;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

[data-bs-theme='light'] .flatpickr-months {
    background-color: #ffffff;
}

[data-bs-theme='light'] .flatpickr-current-month {
    color: #1e293b;
}

[data-bs-theme='light'] .flatpickr-current-month .flatpickr-monthDropdown-months {
    background-color: #ffffff;
    color: #1e293b;
}

[data-bs-theme='light'] .flatpickr-weekday {
    color: #626976;
}

[data-bs-theme='light'] .flatpickr-day {
    color: #1e293b;
}

[data-bs-theme='light'] .flatpickr-day:hover {
    background-color: #f1f5f9;
    border-color: #f1f5f9;
}

[data-bs-theme='light'] .flatpickr-day.today {
    background-color: #206bc4;
    color: #ffffff;
    border-color: #206bc4;
}

[data-bs-theme='light'] .flatpickr-day.today:hover {
    background-color: #1a5aa6;
    border-color: #1a5aa6;
}

[data-bs-theme='light'] .flatpickr-day.selected,
[data-bs-theme='light'] .flatpickr-day.startRange,
[data-bs-theme='light'] .flatpickr-day.endRange {
    background-color: #206bc4;
    color: #ffffff;
    border-color: #206bc4;
}

[data-bs-theme='light'] .flatpickr-day.selected:hover,
[data-bs-theme='light'] .flatpickr-day.startRange:hover,
[data-bs-theme='light'] .flatpickr-day.endRange:hover {
    background-color: #1a5aa6;
    border-color: #1a5aa6;
}

[data-bs-theme='light'] .flatpickr-day.inRange {
    background-color: rgba(32, 107, 196, 0.08);
    border-color: transparent;
}

[data-bs-theme='light'] .flatpickr-day.inRange:hover {
    background-color: rgba(32, 107, 196, 0.15);
    border-color: rgba(32, 107, 196, 0.2);
}

[data-bs-theme='light'] .flatpickr-day.disabled {
    color: #b8bcc1;
}

[data-bs-theme='light'] .flatpickr-time {
    background-color: #ffffff;
    border-top: 1px solid #dadcde;
}

[data-bs-theme='light'] .flatpickr-time input {
    color: #1e293b;
}

[data-bs-theme='light'] .flatpickr-time .flatpickr-am-pm {
    color: #1e293b;
}

[data-bs-theme='light'] .flatpickr-prev-month:hover svg,
[data-bs-theme='light'] .flatpickr-next-month:hover svg {
    fill: #206bc4;
}

/* Dark mode styles */
[data-bs-theme='dark'] .flatpickr-calendar {
    background-color: #1d2939;
    border: 1px solid #2d3b4e;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
}

[data-bs-theme='dark'] .flatpickr-months {
    background-color: #1d2939;
}

[data-bs-theme='dark'] .flatpickr-current-month {
    color: #f8fafc;
}

[data-bs-theme='dark'] .flatpickr-current-month .flatpickr-monthDropdown-months {
    background-color: #1d2939;
    color: #f8fafc;
    border-color: #2d3b4e;
}

[data-bs-theme='dark'] .flatpickr-current-month .flatpickr-monthDropdown-months:hover {
    background-color: #2d3b4e;
}

[data-bs-theme='dark'] .flatpickr-current-month input.cur-year {
    color: #f8fafc;
}

[data-bs-theme='dark'] .flatpickr-weekday {
    color: #cbd5e1;
}

[data-bs-theme='dark'] .flatpickr-day {
    color: #f8fafc;
}

[data-bs-theme='dark'] .flatpickr-day:hover {
    background-color: #2d3b4e;
    border-color: #2d3b4e;
}

[data-bs-theme='dark'] .flatpickr-day.today {
    background-color: #4299e1;
    color: #ffffff;
    border-color: #4299e1;
}

[data-bs-theme='dark'] .flatpickr-day.today:hover {
    background-color: #3182ce;
    border-color: #3182ce;
}

[data-bs-theme='dark'] .flatpickr-day.selected,
[data-bs-theme='dark'] .flatpickr-day.startRange,
[data-bs-theme='dark'] .flatpickr-day.endRange {
    background-color: #4299e1;
    color: #ffffff;
    border-color: #4299e1;
}

[data-bs-theme='dark'] .flatpickr-day.selected:hover,
[data-bs-theme='dark'] .flatpickr-day.startRange:hover,
[data-bs-theme='dark'] .flatpickr-day.endRange:hover {
    background-color: #3182ce;
    border-color: #3182ce;
}

[data-bs-theme='dark'] .flatpickr-day.inRange {
    background-color: rgba(66, 153, 225, 0.12);
    border-color: transparent;
}

[data-bs-theme='dark'] .flatpickr-day.inRange:hover {
    background-color: rgba(66, 153, 225, 0.2);
    border-color: rgba(66, 153, 225, 0.3);
}

[data-bs-theme='dark'] .flatpickr-day.disabled {
    color: #475569;
}

[data-bs-theme='dark'] .flatpickr-time {
    background-color: #1d2939;
    border-top: 1px solid #2d3b4e;
}

[data-bs-theme='dark'] .flatpickr-time input {
    color: #f8fafc;
    background-color: #1d2939;
}

[data-bs-theme='dark'] .flatpickr-time input:hover {
    background-color: #2d3b4e;
}

[data-bs-theme='dark'] .flatpickr-time .flatpickr-am-pm {
    color: #f8fafc;
}

[data-bs-theme='dark'] .flatpickr-time .flatpickr-am-pm:hover {
    background-color: #2d3b4e;
}

[data-bs-theme='dark'] .flatpickr-prev-month svg,
[data-bs-theme='dark'] .flatpickr-next-month svg {
    fill: #cbd5e1;
}

[data-bs-theme='dark'] .flatpickr-prev-month:hover svg,
[data-bs-theme='dark'] .flatpickr-next-month:hover svg {
    fill: #4299e1;
}

[data-bs-theme='dark'] .numInputWrapper span.arrowUp:after {
    border-bottom-color: #f8fafc;
}

[data-bs-theme='dark'] .numInputWrapper span.arrowDown:after {
    border-top-color: #f8fafc;
}

/* Common styles for both themes */
.flatpickr-calendar {
    z-index: 9999 !important;
}

.flatpickr-day {
    border-radius: 0.375rem;
}

.flatpickr-weekdaycontainer {
    padding: 0;
}

/* Alert styles - Dark mode support */
body[data-bs-theme='dark'] .card {
    background-color: var(--tblr-bg-surface-dark);
}

body[data-bs-theme='dark'] .bg-success-lt {
    background-color: rgba(var(--tblr-success-rgb), 0.1) !important;
}

body[data-bs-theme='dark'] .bg-blue-lt {
    background-color: rgba(var(--tblr-primary-rgb), 0.1) !important;
}

body[data-bs-theme='dark'] .bg-primary-lt {
    background-color: rgba(var(--tblr-primary-rgb), 0.1) !important;
}

body[data-bs-theme='dark'] .bg-warning-lt {
    background-color: rgba(var(--tblr-warning-rgb), 0.1) !important;
}

body[data-bs-theme='dark'] .border {
    border-color: var(--tblr-border-color-translucent) !important;
}

body[data-bs-theme='dark'] .alert-danger {
    background-color: rgba(var(--tblr-danger-rgb), 0.1) !important;
    border-color: rgba(var(--tblr-danger-rgb), 0.2) !important;
    color: var(--tblr-danger) !important;
}

body[data-bs-theme='dark'] .alert-success {
    background-color: rgba(var(--tblr-success-rgb), 0.1) !important;
    border-color: rgba(var(--tblr-success-rgb), 0.2) !important;
    color: var(--tblr-success) !important;
}

body[data-bs-theme='dark'] .alert-info {
    background-color: rgba(var(--tblr-info-rgb), 0.1) !important;
    border-color: rgba(var(--tblr-info-rgb), 0.2) !important;
    color: var(--tblr-info) !important;
}

body[data-bs-theme='dark'] .alert-warning {
    background-color: rgba(var(--tblr-warning-rgb), 0.1) !important;
    border-color: rgba(var(--tblr-warning-rgb), 0.2) !important;
    color: var(--tblr-warning) !important;
}

body[data-bs-theme='dark'] .alert-primary {
    background-color: rgba(var(--tblr-primary-rgb), 0.1) !important;
    border-color: rgba(var(--tblr-primary-rgb), 0.2) !important;
    color: var(--tblr-primary) !important;
}

/* Text colors in alerts for dark mode */
body[data-bs-theme='dark'] .alert .text-success {
    color: var(--tblr-success) !important;
}

body[data-bs-theme='dark'] .alert .text-warning {
    color: var(--tblr-warning) !important;
}

body[data-bs-theme='dark'] .alert .text-blue {
    color: var(--tblr-info) !important;
}

body[data-bs-theme='dark'] .alert .text-muted {
    color: var(--tblr-secondary) !important;
}