/* POS SIMPLICITY - Tabler Bridge & Soothing Light Theme */

:root,
[data-bs-theme="light"],
body {
  /* Soothing Clean Light Palette (No yellow/cream, easy on the eyes) */
  --tblr-font-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --tblr-body-bg: #f8fafc;                    /* Soothing soft off-white canvas (Slate-50) */
  --tblr-body-bg-rgb: 248, 250, 252;
  --tblr-body-color: #1e293b;                 /* Deep readable slate text (Slate-800) */
  --tblr-body-color-rgb: 30, 41, 59;
  --tblr-emphasis-color: #0f172a;             /* Heading emphasis (Slate-900) */
  --tblr-bg-surface: #ffffff;                 /* Pure crisp white card/modal surface */
  --tblr-bg-surface-secondary: #f8fafc;       /* Clean secondary surface (headers, tables) */
  --tblr-bg-surface-tertiary: #f1f5f9;        /* Soft neutral table stripe (Slate-100) */
  --tblr-bg-forms: #ffffff;                   /* Form inputs */
  
  /* Crisp Hairline Borders */
  --tblr-border-color: #e2e8f0;               /* Clean slate border (Slate-200) */
  --tblr-border-color-translucent: rgba(0, 0, 0, 0.07);
  --tblr-border-radius: 4px;
  --tblr-border-radius-lg: 8px;

  /* Typography Colors */
  --tblr-secondary: #64748b;                  /* Soothing slate muted text */
  --tblr-secondary-color: #64748b;
  --tblr-secondary-color-rgb: 100, 116, 139;
  --tblr-secondary-bg: #f1f5f9;
  --tblr-tertiary-color: #94a3b8;
  --tblr-heading-color: #0f172a;

  /* Fresh Primary & Accents */
  --tblr-primary: #206bc4;                    /* Tabler signature clear blue */
  --tblr-primary-rgb: 32, 107, 196;
  --tblr-primary-fg: #ffffff;
  --tblr-link-color: #206bc4;
  --tblr-link-hover-color: #1a569d;
  --tblr-success: #2fb344;
  --tblr-success-rgb: 47, 179, 68;
  --tblr-warning: #f76707;
  --tblr-warning-rgb: 247, 103, 7;
  --tblr-danger: #d63939;
  --tblr-danger-rgb: 214, 57, 57;

  /* Clean Soft Shadows */
  --tblr-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  --tblr-box-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --tblr-box-shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.06), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  --tblr-box-shadow-input: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --tblr-box-shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.03);
}

body {
  background-color: var(--tblr-body-bg) !important;
  color: var(--tblr-body-color) !important;
  font-feature-settings: "cv03", "cv04", "cv11";
}

.page {
  background-color: var(--tblr-body-bg) !important;
}

/* Crisp Clean Navbar */
.navbar {
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--tblr-border-color, #e2e8f0) !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.03) !important;
}

.navbar .nav-link {
  color: var(--tblr-body-color, #1e293b) !important;
  font-weight: 500;
}

.navbar .nav-link:hover {
  color: var(--tblr-primary, #206bc4) !important;
}

.navbar .nav-item.active > .nav-link {
  color: var(--tblr-primary, #206bc4) !important;
  font-weight: 600;
}

/* Clean Footer */
footer.footer {
  background-color: var(--tblr-bg-surface, #ffffff) !important;
  border-top: 1px solid var(--tblr-border-color, #e2e8f0) !important;
  color: var(--tblr-secondary, #64748b) !important;
}

/* Navbar Brand & Icons */
.navbar-brand-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: linear-gradient(135deg, #206bc4 0%, #0ca678 100%);
  color: #fff;
  font-size: 18px;
  margin-right: 10px;
  box-shadow: 0 2px 8px rgba(32, 107, 196, 0.3);
}

/* User Avatar */
.nav-avatar-img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--tblr-border-color);
}

/* Legacy Box -> Modern Tabler Card Bridge */
.content-wrapper {
  padding-bottom: 2rem;
  min-height: calc(100vh - 140px);
}

.content-header {
  padding: 1.25rem 0 1rem 0;
  margin-bottom: 1rem;
}

.content-header h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--tblr-body-color);
  margin-bottom: 0.25rem;
}

.content-header h1 small {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--tblr-secondary);
}

.content-header .breadcrumb {
  background: transparent;
  padding: 0;
  margin-bottom: 0;
  font-size: 0.8125rem;
}

.box {
  background: var(--tblr-bg-surface, #ffffff);
  border: 1px solid var(--tblr-border-color, #e6e7e9);
  border-radius: var(--tblr-border-radius, 4px);
  box-shadow: var(--tblr-box-shadow-card, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
  margin-bottom: 1.5rem;
  transition: box-shadow 0.2s ease;
}

.box-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--tblr-border-color, #e6e7e9);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.box-header .box-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  color: var(--tblr-body-color);
}

.box-body {
  padding: 1.25rem;
}

.box-footer {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--tblr-border-color, #e6e7e9);
  background: var(--tblr-bg-surface-secondary, rgba(0, 0, 0, 0.02));
}

/* Box Color Variants */
.box.box-primary { border-top: 3px solid #206bc4; }
.box.box-success { border-top: 3px solid #2fb344; }
.box.box-danger  { border-top: 3px solid #d63939; }
.box.box-warning { border-top: 3px solid #f76707; }
.box.box-info    { border-top: 3px solid #4299e1; }

/* DataTables in Tabler Theme & Layout Spacing Fix */
.dataTables_wrapper {
  padding: 0;
  width: 100%;
  clear: both;
}

/* Top Toolbar: Length (Show entries) and Filter (Search) */
.dataTables_wrapper > .row:first-child,
.dataTables_wrapper .dataTables_header {
  padding: 1.1rem 1.25rem 0.9rem 1.25rem !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  align-items: center;
  border-bottom: 1px solid var(--tblr-border-color, #e6e7e9);
  background: var(--tblr-bg-surface, #ffffff);
}

/* Fallback for unwrapped length & filter */
.dataTables_wrapper > .dataTables_length:not(.col-*) {
  padding: 1.1rem 1.25rem 0.9rem 1.25rem !important;
  float: left;
}

.dataTables_wrapper > .dataTables_filter:not(.col-*) {
  padding: 1.1rem 1.25rem 0.9rem 1.25rem !important;
  float: right;
  text-align: right;
}

.dataTables_wrapper .dataTables_length {
  margin: 0;
}

.dataTables_wrapper .dataTables_length label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--tblr-secondary, #6c7a91);
  margin-bottom: 0;
}

.dataTables_wrapper .dataTables_length select {
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 1px solid var(--tblr-border-color, #e2e8f0);
  border-radius: var(--tblr-border-radius, 4px);
  padding: 0.35rem 2rem 0.35rem 0.75rem !important;
  background-color: var(--tblr-bg-surface, #ffffff) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.6rem center !important;
  background-size: 12px 8px !important;
  color: var(--tblr-body-color, #1e293b);
  font-size: 0.875rem;
  cursor: pointer;
  line-height: 1.4;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.dataTables_wrapper .dataTables_filter {
  margin: 0;
  text-align: right;
}

.dataTables_wrapper .dataTables_filter label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--tblr-secondary, #6c7a91);
  margin-bottom: 0;
  justify-content: flex-end;
}

.dataTables_wrapper .dataTables_filter input {
  display: inline-block;
  width: auto;
  min-width: 220px;
  padding: 0.35rem 0.75rem;
  font-size: 0.875rem;
  border: 1px solid var(--tblr-border-color, #dce1e7);
  border-radius: var(--tblr-border-radius, 4px);
  background-color: var(--tblr-bg-surface, #ffffff);
  color: var(--tblr-body-color, #1e293b);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--tblr-primary, #206bc4);
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(32, 107, 196, 0.25);
}

/* Middle Row: Table Container */
.dataTables_wrapper > .row:nth-child(2) {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.dataTables_wrapper > .row:nth-child(2) > [class*="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.dataTables_wrapper table.dataTable {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-collapse: collapse !important;
  width: 100% !important;
}

/* Bottom Toolbar: Info (Showing 1 to X) & Pagination */
.dataTables_wrapper > .row:last-child,
.dataTables_wrapper .dataTables_footer {
  padding: 0.85rem 1.25rem !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  align-items: center;
  border-top: 1px solid var(--tblr-border-color, #e6e7e9);
  background: var(--tblr-bg-surface, #ffffff);
}

/* Fallback for unwrapped info & pagination */
.dataTables_wrapper > .dataTables_info:not(.col-*) {
  padding: 0.85rem 1.25rem !important;
  float: left;
}

.dataTables_wrapper > .dataTables_paginate:not(.col-*) {
  padding: 0.85rem 1.25rem !important;
  float: right;
  text-align: right;
}

.dataTables_wrapper .dataTables_info {
  font-size: 0.875rem;
  color: var(--tblr-secondary, #6c7a91);
  margin: 0;
  padding: 0;
}

.dataTables_wrapper .dataTables_paginate {
  margin: 0;
  padding: 0;
  text-align: right;
}

.dataTables_wrapper .dataTables_paginate .pagination {
  margin: 0;
  justify-content: flex-end;
  gap: 3px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0.25rem 0.6rem !important;
  margin: 0 2px !important;
  border-radius: var(--tblr-border-radius, 4px) !important;
  border: 1px solid var(--tblr-border-color, #dce1e7) !important;
  background: var(--tblr-bg-surface, #ffffff) !important;
  color: var(--tblr-body-color, #1e293b) !important;
  font-size: 0.875rem;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--tblr-bg-surface-secondary, #f1f5f9) !important;
  color: var(--tblr-primary, #206bc4) !important;
  border-color: var(--tblr-primary, #206bc4) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--tblr-primary, #206bc4) !important;
  color: #ffffff !important;
  border-color: var(--tblr-primary, #206bc4) !important;
  font-weight: 600;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--tblr-bg-surface, #ffffff) !important;
  color: var(--tblr-secondary, #6c7a91) !important;
  border-color: var(--tblr-border-color, #dce1e7) !important;
}

/* Ensure sticky toolbar when inside table-responsive */
.table-responsive > .dataTables_wrapper > .row:first-child,
.table-responsive > .dataTables_wrapper > .row:last-child {
  position: sticky;
  left: 0;
  width: 100%;
}

@media (max-width: 575.98px) {
  .dataTables_wrapper > .row:first-child {
    gap: 0.75rem;
  }
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter {
    float: none !important;
    text-align: left !important;
    width: 100% !important;
  }
  .dataTables_wrapper .dataTables_filter label {
    justify-content: flex-start !important;
    width: 100% !important;
  }
  .dataTables_wrapper .dataTables_filter input {
    width: 100% !important;
    min-width: 0 !important;
  }
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    float: none !important;
    text-align: center !important;
    width: 100% !important;
  }
  .dataTables_wrapper .dataTables_paginate .pagination {
    justify-content: center !important;
    margin-top: 0.5rem !important;
  }
}


/* Modals Polish */
.modal-content {
  border: 1px solid var(--tblr-border-color, #e2e8f0) !important;
  border-radius: var(--tblr-border-radius-lg, 8px) !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
  background-color: var(--tblr-bg-surface, #ffffff) !important;
  color: var(--tblr-body-color, #1e293b) !important;
  overflow: hidden;
}

.modal-header {
  border-bottom: 1px solid var(--tblr-border-color, #e2e8f0) !important;
  padding: 1.15rem 1.5rem !important;
  background-color: var(--tblr-bg-surface, #ffffff) !important;
}

.modal-body {
  background-color: var(--tblr-bg-surface, #ffffff) !important;
  color: var(--tblr-body-color, #1e293b) !important;
}

.modal-footer {
  border-top: 1px solid var(--tblr-border-color, #e2e8f0) !important;
  padding: 0.9rem 1.5rem !important;
  background-color: var(--tblr-bg-surface-secondary, #f8fafc) !important;
}

/* Modals Table & DataTables */
.modal-body .table,
.modal-body .dataTable {
  background-color: var(--tblr-bg-surface, #ffffff) !important;
}

.modal-body .card {
  background-color: var(--tblr-bg-surface, #ffffff) !important;
  border-color: var(--tblr-border-color, #e2e8f0) !important;
}

.modal-header .close {
  background: transparent;
  border: 0;
  font-size: 1.5rem;
  line-height: 1;
  opacity: 0.5;
  cursor: pointer;
  color: var(--tblr-body-color);
}
.modal-header .close:hover {
  opacity: 1;
}

/* Bootstrap 3 Grid Compatibility Helpers */
.col-lg-offset-1, .col-md-offset-1 { margin-left: 8.33333333%; }
.col-lg-offset-2, .col-md-offset-2 { margin-left: 16.66666667%; }
.col-lg-offset-3, .col-md-offset-3 { margin-left: 25%; }
.col-lg-offset-4, .col-md-offset-4 { margin-left: 33.33333333%; }
.col-xs-offset-8 { margin-left: 66.66666667%; }

.pull-right { float: right !important; }
.pull-left { float: left !important; }

/* Content wrapper container */
.content-wrapper {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding: 1.25rem 1rem 2rem 1rem;
}

/* ==========================================================================
   Table Action Buttons & Badges / Banners ("di dalam table")
   ========================================================================== */

/* Enlarge all buttons inside tables */
.table td .btn,
.table td .btn-group .btn,
.table td .btn-list .btn,
.dataTable td .btn,
.dataTable td .btn-group .btn,
.dataTable td .btn-list .btn {
  padding: 0.42rem 0.75rem !important;
  font-size: 0.875rem !important;
  font-weight: 500;
  line-height: 1.4 !important;
  border-radius: 6px !important;
  min-width: 36px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  transition: all 0.15s ease-in-out;
}

/* Enlarge button icons inside tables */
.table td .btn i,
.table td .btn [class^="ti-"],
.dataTable td .btn i,
.dataTable td .btn [class^="ti-"] {
  font-size: 1.15rem !important;
  vertical-align: middle;
}

.table td .btn:hover,
.dataTable td .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
}

/* Button groups in tables */
.table td .btn-group,
.dataTable td .btn-group {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.table td .btn-group > .btn:first-child,
.dataTable td .btn-group > .btn:first-child {
  border-top-left-radius: 6px !important;
  border-bottom-left-radius: 6px !important;
}

.table td .btn-group > .btn:last-child,
.dataTable td .btn-group > .btn:last-child {
  border-top-right-radius: 6px !important;
  border-bottom-right-radius: 6px !important;
}

/* Badges & Chips inside Tables ("banner di dalam tablenya") */
.table td .badge,
.dataTable td .badge,
.table th .badge,
.dataTable th .badge {
  font-size: 0.8125rem !important; /* ~13px */
  font-weight: 600 !important;
  padding: 0.42rem 0.8rem !important;
  border-radius: 6px !important;
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  line-height: 1.35 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.table td .badge i,
.dataTable td .badge i {
  font-size: 0.95rem !important;
}

/* Code tags inside table (Invoice Number, Product Code, Barcode) */
.table td code,
.dataTable td code {
  font-size: 0.875rem !important;
  padding: 0.25rem 0.55rem !important;
  border-radius: 5px !important;
  font-weight: 600;
  background: var(--tblr-bg-surface-secondary, #f1f5f9);
  color: var(--tblr-primary, #206bc4);
  border: 1px solid var(--tblr-border-color, #e2e8f0);
}

/* Table cells vertical alignment & comfortable spacing */
.table > tbody > tr > td,
.dataTable > tbody > tr > td {
  padding-top: 0.85rem !important;
  padding-bottom: 0.85rem !important;
  vertical-align: middle !important;
}

/* ==========================================================================
   Dashboard Stat Banners & Cards ("banner di index")
   ========================================================================== */
.stat-card {
  border-radius: 8px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

.stat-card-avatar {
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  border-radius: 10px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.stat-card-avatar i {
  font-size: 1.75rem !important;
}

.stat-card-value {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

.stat-card-title {
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--tblr-secondary, #64748b);
  margin-bottom: 0.35rem;
}

/* Mini stat count cards (Section 3) */
.stat-mini-card {
  border-radius: 8px !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.stat-mini-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06) !important;
}

.stat-mini-avatar {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 50% !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.6rem;
}

.stat-mini-avatar i {
  font-size: 1.4rem !important;
}

.stat-mini-value {
  font-size: 1.85rem !important;
  font-weight: 800 !important;
  line-height: 1.1;
  letter-spacing: -0.5px;
}

/* Hero POS Banner in Cashier Dashboard */
.hero-pos-banner {
  border-radius: 12px !important;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(32, 107, 196, 0.22) !important;
}

.hero-pos-banner::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -10%;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}

/* ==========================================================================
   Litepicker Tabler UI Theme Overrides
   ========================================================================== */
:root {
  --litepicker-container-months-color-bg: var(--tblr-bg-surface, #ffffff);
  --litepicker-container-months-box-shadow-color: rgba(0, 0, 0, 0.12);
  --litepicker-footer-color-bg: var(--tblr-bg-surface-secondary, #f8fafc);
  --litepicker-footer-box-shadow-color: var(--tblr-border-color, #e2e8f0);
  --litepicker-month-header-color: var(--tblr-body-color, #1e293b);
  --litepicker-button-prev-month-color: var(--tblr-secondary, #6c7a91);
  --litepicker-button-next-month-color: var(--tblr-secondary, #6c7a91);
  --litepicker-button-prev-month-color-hover: var(--tblr-primary, #206bc4);
  --litepicker-button-next-month-color-hover: var(--tblr-primary, #206bc4);
  --litepicker-month-weekday-color: var(--tblr-secondary, #6c7a91);
  --litepicker-day-color: var(--tblr-body-color, #1e293b);
  --litepicker-day-color-hover: var(--tblr-primary, #206bc4);
  --litepicker-is-today-color: var(--tblr-primary, #206bc4);
  --litepicker-is-in-range-color: rgba(32, 107, 196, 0.12);
  --litepicker-is-start-color: #ffffff;
  --litepicker-is-start-color-bg: var(--tblr-primary, #206bc4);
  --litepicker-is-end-color: #ffffff;
  --litepicker-is-end-color-bg: var(--tblr-primary, #206bc4);
  --litepicker-button-apply-color: #ffffff;
  --litepicker-button-apply-color-bg: var(--tblr-primary, #206bc4);
}

.litepicker {
  font-family: var(--tblr-font-sans-serif, 'Inter', -apple-system, sans-serif) !important;
  font-size: 0.85rem !important;
  z-index: 99999 !important;
}

.litepicker .container__months {
  background-color: var(--tblr-bg-surface, #ffffff) !important;
  border: 1px solid var(--tblr-border-color, #dce1e7) !important;
  border-radius: var(--tblr-border-radius-lg, 10px) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16) !important;
  padding: 8px !important;
}

.litepicker .container__months .month-item-header {
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  color: var(--tblr-body-color, #1e293b) !important;
  padding: 10px 8px !important;
}

.litepicker .container__months .month-item-header .button-previous-month,
.litepicker .container__months .month-item-header .button-next-month {
  border-radius: 6px !important;
  padding: 4px 8px !important;
  color: var(--tblr-secondary, #6c7a91) !important;
  transition: all 0.15s ease;
  cursor: pointer;
}

.litepicker .container__months .month-item-header .button-previous-month:hover,
.litepicker .container__months .month-item-header .button-next-month:hover {
  background-color: var(--tblr-bg-surface-secondary, #f1f5f9) !important;
  color: var(--tblr-primary, #206bc4) !important;
}

.litepicker .container__months .month-item-weekdays-row > div {
  color: var(--tblr-secondary, #6c7a91) !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  padding: 6px 0 !important;
}

.litepicker .container__days .day-item {
  color: var(--tblr-body-color, #1e293b) !important;
  border-radius: 6px !important;
  transition: all 0.15s ease !important;
  font-weight: 500 !important;
  cursor: pointer;
}

.litepicker .container__days .day-item:hover {
  background-color: var(--tblr-bg-surface-secondary, #f1f5f9) !important;
  color: var(--tblr-primary, #206bc4) !important;
  box-shadow: none !important;
}

.litepicker .container__days .day-item.is-today {
  color: var(--tblr-primary, #206bc4) !important;
  font-weight: 700 !important;
  background-color: rgba(32, 107, 196, 0.08) !important;
}

.litepicker .container__days .day-item.is-start-date,
.litepicker .container__days .day-item.is-end-date {
  background-color: var(--tblr-primary, #206bc4) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

.litepicker .container__days .day-item.is-in-range {
  background-color: rgba(32, 107, 196, 0.12) !important;
  color: var(--tblr-primary, #206bc4) !important;
  border-radius: 0 !important;
}

.litepicker .container__footer {
  background-color: var(--tblr-bg-surface-secondary, #f8fafc) !important;
  border-top: 1px solid var(--tblr-border-color, #dce1e7) !important;
  padding: 8px 12px !important;
  border-radius: 0 0 10px 10px !important;
}

.litepicker .container__footer .button-apply {
  background-color: var(--tblr-primary, #206bc4) !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  padding: 5px 14px !important;
  font-weight: 600 !important;
  cursor: pointer;
}

/* Litepicker Soothing Theme */
.litepicker .container__months {
  background-color: var(--tblr-bg-surface, #ffffff) !important;
  border: 1px solid var(--tblr-border-color, #e2e8f0) !important;
  border-radius: var(--tblr-border-radius-lg, 8px) !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08) !important;
  padding: 8px !important;
}

.litepicker .container__days .day-item.is-in-range {
  background-color: rgba(32, 107, 196, 0.1) !important;
  color: var(--tblr-primary, #206bc4) !important;
  border-radius: 0 !important;
}

.litepicker .container__footer {
  background-color: var(--tblr-bg-surface-secondary, #f8fafc) !important;
  border-top: 1px solid var(--tblr-border-color, #e2e8f0) !important;
  padding: 8px 12px !important;
  border-radius: 0 0 8px 8px !important;
}

.litepicker .container__footer .button-apply {
  background-color: var(--tblr-primary, #206bc4) !important;
  color: #ffffff !important;
  border-radius: 4px !important;
  padding: 5px 14px !important;
  font-weight: 600 !important;
  cursor: pointer;
}

/* ==========================================================================
   Modern Soothing Dropdown & Select Enhancements
   ========================================================================== */

/* 1. Sleek Bootstrap / Tabler Dropdown Menus */
.dropdown-menu {
  border: 1px solid var(--tblr-border-color, #e2e8f0) !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04) !important;
  padding: 0.45rem !important;
  background-color: var(--tblr-bg-surface, #ffffff) !important;
  animation: dropdownFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  transform-origin: top left;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.dropdown-item {
  border-radius: 4px !important;
  padding: 0.5rem 0.85rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--tblr-body-color, #1e293b) !important;
  transition: all 0.15s ease-in-out !important;
  display: flex !important;
  align-items: center !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: rgba(32, 107, 196, 0.08) !important;
  color: var(--tblr-primary, #206bc4) !important;
  transform: translateX(2px);
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--tblr-primary, #206bc4) !important;
  color: #ffffff !important;
  transform: none !important;
}

.dropdown-header {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tblr-secondary, #64748b) !important;
  padding: 0.4rem 0.85rem 0.25rem !important;
}

.dropdown-divider {
  margin: 0.35rem 0 !important;
  border-top: 1px solid var(--tblr-border-color, #e2e8f0) !important;
  opacity: 1 !important;
}

/* Modern Animated Chevron on .dropdown-toggle */
.dropdown-toggle::after {
  display: inline-block;
  vertical-align: 0.15em;
  margin-left: 0.45em;
  border: none !important;
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor !important;
  border-bottom: 2px solid currentColor !important;
  transform: rotate(45deg);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.dropdown-toggle[aria-expanded="true"]::after {
  transform: rotate(-135deg);
}

/* 2. Modern Native Form Select Styling (With Smooth SVG Chevron) */
/* 2. Unified Input & Select Sizing (Guarantees Perfect Alignment Across All Fields) */
.form-control,
.form-select,
.ts-wrapper .ts-control {
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  font-size: 0.875rem !important;
  line-height: 1.4285714286 !important;
  border-radius: var(--tblr-border-radius, 4px) !important;
  border: 1px solid var(--tblr-border-color, #e2e8f0) !important;
  background-color: var(--tblr-bg-surface, #ffffff) !important;
  color: var(--tblr-body-color, #1e293b) !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

.form-control {
  padding: 0.45rem 0.75rem !important;
}

.form-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 14px 10px !important;
  padding: 0.45rem 2.25rem 0.45rem 0.75rem !important;
  cursor: pointer;
  margin: 0 !important;
  vertical-align: middle !important;
}

.form-control:focus,
.form-select:focus {
  border-color: #80aad3 !important;
  box-shadow: 0 0 0 0.25rem rgba(32, 107, 196, 0.18) !important;
  outline: 0 !important;
}

/* Ensure Input Groups NEVER wrap or push dropdowns onto a new line */
.input-group,
.input-group-flat {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
}

.input-group > .input-group-text {
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.45rem 0.75rem !important;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
}

.input-group > .form-control,
.input-group > .form-select,
.input-group > .ts-wrapper {
  position: relative !important;
  flex: 1 1 auto !important;
  width: 1% !important;
  min-width: 0 !important;
  margin-bottom: 0 !important;
}

/* Standalone fields not in input-group take full 100% width of their column */
:not(.input-group) > .form-control,
:not(.input-group) > .form-select,
:not(.input-group) > .ts-wrapper,
[class*="col-"] > .form-select,
[class*="col-"] > .ts-wrapper {
  width: 100% !important;
  display: block !important;
}

/* 3. Tom Select (Combobox) Tabler Overrides - Perfectly Aligned with Textboxes */
.ts-wrapper {
  max-width: 100% !important;
  position: relative !important;
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ts-wrapper.form-select {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ts-wrapper .ts-control {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  padding: 0.45rem 2.25rem 0.45rem 0.75rem !important;
  font-family: var(--tblr-font-sans-serif) !important;
  box-shadow: var(--tblr-box-shadow-input) !important;
  cursor: pointer !important;
}

.ts-wrapper.single .ts-control {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 14px 10px !important;
}

.ts-wrapper.focus .ts-control {
  border-color: #80aad3 !important;
  box-shadow: 0 0 0 0.25rem rgba(32, 107, 196, 0.18) !important;
  outline: 0 !important;
}

.ts-dropdown {
  border: 1px solid var(--tblr-border-color, #e2e8f0) !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04) !important;
  background-color: var(--tblr-bg-surface, #ffffff) !important;
  padding: 0.35rem !important;
  margin-top: 4px !important;
  z-index: 1060 !important;
  font-size: 0.875rem !important;
  animation: dropdownFadeIn 0.16s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ts-dropdown .option {
  border-radius: 4px !important;
  padding: 0.5rem 0.75rem !important;
  color: var(--tblr-body-color, #1e293b) !important;
  font-weight: 500 !important;
  cursor: pointer;
  transition: all 0.12s ease !important;
}

.ts-dropdown .option:hover,
.ts-dropdown .option.active {
  background-color: rgba(32, 107, 196, 0.08) !important;
  color: var(--tblr-primary, #206bc4) !important;
}

.ts-dropdown .option.selected {
  background-color: var(--tblr-primary, #206bc4) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* Combobox & Select in Input Groups (E.g. Sales Create, Login) */
.input-group > :first-child:not(:last-child) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.input-group > :last-child:not(:first-child),
.input-group > .ts-wrapper:not(:first-child) .ts-control {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.input-group > .ts-wrapper:not(:last-child) .ts-control {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Seamless Flat Input Groups */
.input-group-flat > .input-group-text {
  border-right: 0 !important;
  background-color: var(--tblr-bg-surface, #ffffff) !important;
  color: var(--tblr-secondary, #64748b) !important;
}

.input-group-flat > .form-control,
.input-group-flat > .form-select,
.input-group-flat > .ts-wrapper .ts-control {
  border-left: 0 !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  background-color: var(--tblr-bg-surface, #ffffff) !important;
  box-shadow: none !important;
}

.input-group-flat:focus-within {
  box-shadow: 0 0 0 0.25rem rgba(32, 107, 196, 0.18) !important;
  border-color: #80aad3 !important;
  border-radius: var(--tblr-border-radius, 4px) !important;
}

.input-group-flat:focus-within .input-group-text,
.input-group-flat:focus-within .form-control,
.input-group-flat:focus-within .form-select,
.input-group-flat:focus-within .ts-control {
  border-color: #80aad3 !important;
}