/* ==========================================================================
   KASABASE — MODERN EMERALD THEME
   CSS-only override for AdminLTE 2 / Bootstrap 3
   Loaded LAST to override all existing styles
   ========================================================================== */

/* ---------- 1. CSS Custom Properties (Design Tokens) ---------- */
:root {
  --vh-primary: #10b981;
  --vh-primary-dark: #059669;
  --vh-primary-light: #d1fae5;
  --vh-primary-50: #ecfdf5;
  --vh-bg: #f8fafc;
  --vh-card-bg: #ffffff;
  --vh-text: #1e293b;
  --vh-text-secondary: #64748b;
  --vh-text-muted: #94a3b8;
  --vh-border: #e2e8f0;
  --vh-border-light: #f1f5f9;
  --vh-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --vh-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --vh-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --vh-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --vh-radius: 12px;
  --vh-radius-sm: 8px;
  --vh-radius-xs: 6px;
  --vh-transition: 0.2s ease;
  /* Gradients */
  --vh-grad-emerald: linear-gradient(135deg, #10b981, #14b8a6);
  --vh-grad-indigo: linear-gradient(135deg, #6366f1, #818cf8);
  --vh-grad-orange: linear-gradient(135deg, #f97316, #fb923c);
  --vh-grad-rose: linear-gradient(135deg, #f43f5e, #fb7185);
  --vh-grad-sky: linear-gradient(135deg, #0ea5e9, #38bdf8);
}

/* ---------- 2. Global Base ---------- */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  background-color: var(--vh-bg) !important;
  color: var(--vh-text) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--vh-primary-dark);
  transition: color var(--vh-transition);
}

a:hover,
a:focus {
  color: var(--vh-primary);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--vh-text) !important;
  font-weight: 600;
}

.content-wrapper,
.right-side {
  background-color: var(--vh-bg) !important;
}

/* ---------- 3. Sidebar ---------- */
.side-bar {
  background-color: var(--vh-card-bg) !important;
  border-right: 1px solid var(--vh-border) !important;
  box-shadow: var(--vh-shadow-sm);
}

/* Sidebar logo/heading area */
.side-bar>a:first-of-type,
.side-bar .side-bar-heading {
  background: var(--vh-card-bg) !important;
  border-bottom: 1px solid var(--vh-border) !important;
  border-right: none !important;
}

.side-bar .side-bar-heading,
.side-bar>a:first-of-type p {
  color: var(--vh-text) !important;
  font-weight: 700 !important;
}

.side-bar>a:first-of-type .tw-bg-green-400 {
  background-color: var(--vh-primary) !important;
}

/* Sidebar menu items */
.sidebar-menu li>a,
.treeview-menu li>a {
  color: var(--vh-text-secondary) !important;
  border-radius: var(--vh-radius-sm) !important;
  margin: 2px 8px !important;
  padding: 10px 12px !important;
  transition: all var(--vh-transition) !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
}

.sidebar-menu li>a:hover,
.treeview-menu li>a:hover {
  background-color: var(--vh-primary-50) !important;
  color: var(--vh-primary-dark) !important;
}

.sidebar-menu li.active>a,
.sidebar-menu li.active>a:hover {
  background: var(--vh-grad-emerald) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3) !important;
}

.sidebar-menu li.active>a i,
.sidebar-menu li.active>a .fas,
.sidebar-menu li.active>a .fab {
  color: #fff !important;
}

.sidebar-menu li>a>i,
.sidebar-menu li>a>.fas {
  color: var(--vh-text-muted) !important;
  width: 22px !important;
  transition: color var(--vh-transition) !important;
}

.sidebar-menu li>a:hover>i,
.sidebar-menu li>a:hover>.fas {
  color: var(--vh-primary-dark) !important;
}

/* Sidebar treeview arrows */
.sidebar-menu .treeview>a>.pull-right-container>.fa-angle-left,
.sidebar-menu .treeview>a>.pull-right-container>.fa-angle-right,
.sidebar-menu .treeview>a:after {
  color: var(--vh-text-muted) !important;
}

/* Treeview submenu */
.treeview-menu {
  background-color: transparent !important;
  padding-left: 8px !important;
}

.treeview-menu>li>a {
  font-size: 13px !important;
  padding: 8px 12px 8px 20px !important;
}

.treeview-menu>li.active>a {
  color: var(--vh-primary-dark) !important;
  font-weight: 600 !important;
  background-color: var(--vh-primary-50) !important;
}

.treeview-menu a::before {
  color: var(--vh-primary) !important;
}

/* Sidebar section headers */
.sidebar-menu .header {
  color: var(--vh-text-muted) !important;
  text-transform: uppercase;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
  padding: 12px 20px 6px !important;
}

/* ---------- 4. Top Header / Navbar ---------- */
/* Override the dark gradient header with a white header */
.thetop>main>div:first-child,
.tw-bg-gradient-to-r,
[class*="tw-from-"][class*="tw-to-"] {
  background: var(--vh-card-bg) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--vh-border) !important;
}

/* Header buttons — switch from white text on dark bg to dark text on light bg */
.thetop [class*="tw-bg-"][class*="-800"],
.thetop [class*="tw-bg-"][class*="-800"]:hover,
.thetop [class*="tw-bg-"][class*="-700"] {
  background-color: var(--vh-bg) !important;
  color: var(--vh-text) !important;
  border: 1px solid var(--vh-border) !important;
}

.thetop [class*="tw-bg-"][class*="-800"] svg,
.thetop [class*="tw-bg-"][class*="-800"] .tw-text-white {
  color: var(--vh-text-secondary) !important;
  stroke: var(--vh-text-secondary) !important;
}

.thetop [class*="tw-ring-white"] {
  --tw-ring-color: var(--vh-border) !important;
}

.thetop .tw-text-white {
  color: var(--vh-text) !important;
}

/* POS button in header — keep it prominent */
.thetop a[href*="/pos/create"],
.thetop a[href*="/pos/create"]:hover {
  background: var(--vh-grad-emerald) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3) !important;
}

.thetop a[href*="/pos/create"] svg,
.thetop a[href*="/pos/create"] .tw-text-white {
  color: #fff !important;
  stroke: #fff !important;
}

/* Date button in header */
.thetop button.tw-font-mono {
  background-color: var(--vh-primary-50) !important;
  color: var(--vh-primary-dark) !important;
  border: 1px solid var(--vh-primary-light) !important;
  font-family: 'Inter', monospace !important;
}

/* ---------- 5. Dashboard Welcome Banner ---------- */
/* Override the dark gradient welcome area */
.tw-pb-6[class*="tw-bg-gradient"],
div[class*="tw-bg-gradient-to-r"][class*="tw-from-"][class*="tw-pb-6"] {
  background: var(--vh-card-bg) !important;
  background-image: none !important;
}

.tw-pb-6 h1[class*="text-white"],
.tw-pb-6 h1 {
  color: var(--vh-text) !important;
}

/* Dashboard date filter button */
#dashboard_date_filter {
  border: 1px solid var(--vh-border) !important;
  border-radius: var(--vh-radius-sm) !important;
  transition: all var(--vh-transition) !important;
}

#dashboard_date_filter:hover {
  border-color: var(--vh-primary) !important;
  background-color: var(--vh-primary-50) !important;
}

/* ---------- 6. Buttons ---------- */
.btn {
  border-radius: var(--vh-radius-sm) !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  transition: all var(--vh-transition) !important;
  border: none !important;
  letter-spacing: 0.01em;
  padding: 7px 16px !important;
}

.btn-primary,
.btn-primary:focus {
  background: var(--vh-grad-emerald) !important;
  color: #fff !important;
  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.25) !important;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #059669, #0d9488) !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
  transform: translateY(-1px);
}

.btn-success,
.btn-success:focus {
  background: var(--vh-grad-emerald) !important;
  color: #fff !important;
}

.btn-success:hover {
  background: linear-gradient(135deg, #059669, #0d9488) !important;
}

.btn-info,
.btn-info:focus {
  background: var(--vh-grad-sky) !important;
  color: #fff !important;
}

.btn-info:hover {
  background: linear-gradient(135deg, #0284c7, #0ea5e9) !important;
}

.btn-warning,
.btn-warning:focus {
  background: var(--vh-grad-orange) !important;
  color: #fff !important;
}

.btn-warning:hover {
  background: linear-gradient(135deg, #ea580c, #f97316) !important;
}

.btn-danger,
.btn-danger:focus {
  background: var(--vh-grad-rose) !important;
  color: #fff !important;
}

.btn-danger:hover {
  background: linear-gradient(135deg, #e11d48, #f43f5e) !important;
}

.btn-default,
.btn-default:focus {
  background-color: var(--vh-card-bg) !important;
  color: var(--vh-text) !important;
  border: 1px solid var(--vh-border) !important;
}

.btn-default:hover {
  background-color: var(--vh-bg) !important;
  border-color: var(--vh-primary) !important;
  color: var(--vh-primary-dark) !important;
}

.btn-flat {
  border-radius: var(--vh-radius-xs) !important;
}

/* Button groups */
.btn-group>.btn {
  border-radius: 0 !important;
}

.btn-group>.btn:first-child {
  border-radius: var(--vh-radius-sm) 0 0 var(--vh-radius-sm) !important;
}

.btn-group>.btn:last-child {
  border-radius: 0 var(--vh-radius-sm) var(--vh-radius-sm) 0 !important;
}

/* Small / XS buttons */
.btn-xs,
.btn-sm {
  padding: 4px 10px !important;
  font-size: 12px !important;
  border-radius: var(--vh-radius-xs) !important;
}

/* ---------- 7. Form Controls ---------- */
.form-control {
  border: 1px solid var(--vh-border) !important;
  border-radius: var(--vh-radius-sm) !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  color: var(--vh-text) !important;
  background-color: var(--vh-card-bg) !important;
  transition: border-color var(--vh-transition), box-shadow var(--vh-transition) !important;
  height: auto !important;
  min-height: 38px;
}

.form-control:focus {
  border-color: var(--vh-primary) !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
  outline: none !important;
}

.form-control::placeholder {
  color: var(--vh-text-muted) !important;
}

/* Select2 */
.select2-container--default .select2-selection--single {
  border: 1px solid var(--vh-border) !important;
  border-radius: var(--vh-radius-sm) !important;
  height: 38px !important;
  padding: 4px 8px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 28px !important;
  color: var(--vh-text) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 36px !important;
}

.select2-container--default.select2-container--focus .select2-selection,
.select2-container--default.select2-container--open .select2-selection {
  border-color: var(--vh-primary) !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
}

.select2-dropdown {
  border: 1px solid var(--vh-border) !important;
  border-radius: var(--vh-radius-sm) !important;
  box-shadow: var(--vh-shadow-lg) !important;
}

.select2-results__option--highlighted[aria-selected] {
  background-color: var(--vh-primary) !important;
}

.select2-container--default .select2-selection--multiple {
  border: 1px solid var(--vh-border) !important;
  border-radius: var(--vh-radius-sm) !important;
  min-height: 38px !important;
}

/* Input groups */
.input-group-addon {
  border: 1px solid var(--vh-border) !important;
  border-radius: var(--vh-radius-sm) 0 0 var(--vh-radius-sm) !important;
  background-color: var(--vh-bg) !important;
  color: var(--vh-text-secondary) !important;
}

.input-group .form-control:last-child {
  border-radius: 0 var(--vh-radius-sm) var(--vh-radius-sm) 0 !important;
}

.input-group .form-control:first-child {
  border-radius: var(--vh-radius-sm) 0 0 var(--vh-radius-sm) !important;
}

/* Labels */
label {
  color: var(--vh-text) !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  margin-bottom: 4px !important;
}

/* ---------- 8. Cards, Boxes, Panels ---------- */
.box {
  border-radius: var(--vh-radius) !important;
  border: 1px solid var(--vh-border) !important;
  box-shadow: var(--vh-shadow) !important;
  background-color: var(--vh-card-bg) !important;
  margin-bottom: 16px !important;
  overflow: hidden;
}

.box-header {
  border-bottom: 1px solid var(--vh-border-light) !important;
  padding: 16px 20px !important;
}

.box-header .box-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--vh-text) !important;
}

.box-body {
  padding: 16px 20px !important;
}

.box-footer {
  border-top: 1px solid var(--vh-border-light) !important;
  padding: 12px 20px !important;
  background-color: var(--vh-bg) !important;
}

.box-primary {
  border-top: 3px solid var(--vh-primary) !important;
}

.box-success {
  border-top: 3px solid var(--vh-primary) !important;
}

.box-info {
  border-top: 3px solid #0ea5e9 !important;
}

.box-warning {
  border-top: 3px solid #f97316 !important;
}

.box-danger {
  border-top: 3px solid #f43f5e !important;
}

/* .box-header colored backgrounds */
.box-primary>.box-header {
  background-color: var(--vh-card-bg) !important;
  color: var(--vh-text) !important;
}

/* Info boxes */
.info-box {
  border-radius: var(--vh-radius) !important;
  box-shadow: var(--vh-shadow) !important;
  border: 1px solid var(--vh-border) !important;
  min-height: auto !important;
}

.info-box-icon {
  border-radius: var(--vh-radius) 0 0 var(--vh-radius) !important;
}

/* Small boxes (AdminLTE stat boxes) */
.small-box {
  border-radius: var(--vh-radius) !important;
  box-shadow: var(--vh-shadow) !important;
  transition: transform var(--vh-transition), box-shadow var(--vh-transition) !important;
}

.small-box:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--vh-shadow-md) !important;
}

.small-box>.small-box-footer {
  border-radius: 0 0 var(--vh-radius) var(--vh-radius) !important;
}

/* Nav tabs custom */
.nav-tabs-custom {
  border-radius: var(--vh-radius) !important;
  box-shadow: var(--vh-shadow) !important;
  border: 1px solid var(--vh-border) !important;
  overflow: hidden;
}

.nav-tabs-custom>.nav-tabs {
  border-bottom: 1px solid var(--vh-border) !important;
  background-color: var(--vh-bg) !important;
}

.nav-tabs-custom>.nav-tabs>li>a {
  border-radius: 0 !important;
  color: var(--vh-text-secondary) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
}

.nav-tabs-custom>.nav-tabs>li.active>a {
  border-top-color: var(--vh-primary) !important;
  color: var(--vh-primary-dark) !important;
  font-weight: 600 !important;
}

.nav-tabs-custom>.tab-content {
  padding: 16px 20px !important;
}

/* TW stat cards on dashboard */
[class*="tw-rounded-xl"][class*="tw-ring-1"] {
  border-radius: var(--vh-radius) !important;
  border: 1px solid var(--vh-border) !important;
  box-shadow: var(--vh-shadow) !important;
  transition: all var(--vh-transition) !important;
}

[class*="tw-rounded-xl"][class*="tw-ring-1"]:hover {
  box-shadow: var(--vh-shadow-md) !important;
  transform: translateY(-2px);
}

/* ---------- 9. DataTables ---------- */
.table {
  background-color: var(--vh-card-bg) !important;
}

.table>thead>tr>th {
  background-color: var(--vh-bg) !important;
  color: var(--vh-text) !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  border-bottom: 2px solid var(--vh-border) !important;
  padding: 12px 16px !important;
}

.table>tbody>tr>td {
  padding: 12px 16px !important;
  border-top: 1px solid var(--vh-border-light) !important;
  color: var(--vh-text) !important;
  font-size: 13.5px !important;
  vertical-align: middle !important;
}

.table>tbody>tr:hover>td {
  background-color: var(--vh-primary-50) !important;
}

.table-striped>tbody>tr:nth-of-type(odd)>td {
  background-color: var(--vh-bg) !important;
}

.table-striped>tbody>tr:nth-of-type(odd):hover>td {
  background-color: var(--vh-primary-50) !important;
}

/* DataTable wrapper */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--vh-border) !important;
  border-radius: var(--vh-radius-sm) !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
}

.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--vh-primary) !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
  outline: none !important;
}

.dataTables_wrapper .dataTables_info {
  color: var(--vh-text-secondary) !important;
  font-size: 13px !important;
}

/* DataTable pagination - Reset <li> wrappers (Bootstrap mode) */
.dataTables_wrapper .dataTables_paginate .pagination>li.paginate_button {
  border: none !important;
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* Style the inner <a> links inside <li> (Bootstrap mode) */
.dataTables_wrapper .dataTables_paginate .pagination>li>a {
  border-radius: var(--vh-radius-xs) !important;
  border: 1px solid var(--vh-border) !important;
  color: var(--vh-text) !important;
  margin: 0 2px !important;
  padding: 5px 12px !important;
  transition: all var(--vh-transition) !important;
}

.dataTables_wrapper .dataTables_paginate .pagination>li>a:hover {
  background: var(--vh-primary-50) !important;
  border-color: var(--vh-primary) !important;
  color: var(--vh-primary-dark) !important;
}

.dataTables_wrapper .dataTables_paginate .pagination>li.active>a,
.dataTables_wrapper .dataTables_paginate .pagination>li.active>a:hover {
  background: var(--vh-grad-emerald) !important;
  border-color: transparent !important;
  color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .pagination>li.disabled>a,
.dataTables_wrapper .dataTables_paginate .pagination>li.disabled>a:hover {
  color: var(--vh-text-muted) !important;
  background: transparent !important;
  border-color: var(--vh-border-light) !important;
  cursor: default;
}

/* Style direct <a> paginate buttons (non-Bootstrap / simple mode) */
.dataTables_wrapper .dataTables_paginate>a.paginate_button {
  border-radius: var(--vh-radius-xs) !important;
  border: 1px solid var(--vh-border) !important;
  color: var(--vh-text) !important;
  margin: 0 2px !important;
  padding: 5px 12px !important;
  transition: all var(--vh-transition) !important;
  display: inline-block;
  text-decoration: none;
}

.dataTables_wrapper .dataTables_paginate>a.paginate_button:hover {
  background: var(--vh-primary-50) !important;
  border-color: var(--vh-primary) !important;
  color: var(--vh-primary-dark) !important;
}

.dataTables_wrapper .dataTables_paginate>a.paginate_button.current,
.dataTables_wrapper .dataTables_paginate>a.paginate_button.current:hover {
  background: var(--vh-grad-emerald) !important;
  border-color: transparent !important;
  color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate>a.paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate>a.paginate_button.disabled:hover {
  color: var(--vh-text-muted) !important;
  background: transparent !important;
  border-color: var(--vh-border-light) !important;
  cursor: default;
}

/* Style <a> inside <span> container (simple_numbers mode) */
.dataTables_wrapper .dataTables_paginate>span>a.paginate_button {
  border-radius: var(--vh-radius-xs) !important;
  border: 1px solid var(--vh-border) !important;
  color: var(--vh-text) !important;
  margin: 0 2px !important;
  padding: 5px 12px !important;
  transition: all var(--vh-transition) !important;
  display: inline-block;
  text-decoration: none;
}

.dataTables_wrapper .dataTables_paginate>span>a.paginate_button:hover {
  background: var(--vh-primary-50) !important;
  border-color: var(--vh-primary) !important;
  color: var(--vh-primary-dark) !important;
}

.dataTables_wrapper .dataTables_paginate>span>a.paginate_button.current,
.dataTables_wrapper .dataTables_paginate>span>a.paginate_button.current:hover {
  background: var(--vh-grad-emerald) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* Reset the <span> wrapper to prevent it from showing as a box */
.dataTables_wrapper .dataTables_paginate>span {
  border: none !important;
  background: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Hide ellipsis elements */
.dataTables_wrapper .dataTables_paginate .ellipsis {
  border: none !important;
  background: none !important;
  padding: 0 4px !important;
}

/* DataTable buttons (export etc) */
.dt-buttons .btn,
.buttons-html5,
.buttons-print,
.buttons-csv,
.buttons-excel,
.buttons-pdf,
.buttons-copy {
  background-color: var(--vh-card-bg) !important;
  color: var(--vh-text) !important;
  border: 1px solid var(--vh-border) !important;
  border-radius: var(--vh-radius-xs) !important;
  font-size: 12.5px !important;
}

.dt-buttons .btn:hover {
  background-color: var(--vh-primary-50) !important;
  border-color: var(--vh-primary) !important;
  color: var(--vh-primary-dark) !important;
}

/* ---------- 10. Modals ---------- */
.modal-content {
  border-radius: var(--vh-radius) !important;
  border: none !important;
  box-shadow: var(--vh-shadow-lg) !important;
  overflow: hidden;
}

.modal-header {
  background-color: var(--vh-bg) !important;
  border-bottom: 1px solid var(--vh-border) !important;
  padding: 16px 24px !important;
}

.modal-header .modal-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--vh-text) !important;
}

.modal-header .close {
  font-size: 22px !important;
  opacity: 0.5 !important;
  transition: opacity var(--vh-transition) !important;
}

.modal-header .close:hover {
  opacity: 1 !important;
}

.modal-body {
  padding: 24px !important;
}

.modal-footer {
  border-top: 1px solid var(--vh-border) !important;
  padding: 16px 24px !important;
  background-color: var(--vh-bg) !important;
}

.modal-backdrop {
  background-color: rgba(15, 23, 42, 0.5) !important;
}

/* ---------- 11. Calendar (FullCalendar) ---------- */
.fc {
  font-family: 'Inter', sans-serif !important;
}

.fc-toolbar h2 {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--vh-text) !important;
}

.fc-button {
  background: var(--vh-card-bg) !important;
  color: var(--vh-text) !important;
  border: 1px solid var(--vh-border) !important;
  border-radius: var(--vh-radius-sm) !important;
  padding: 6px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: capitalize !important;
  box-shadow: none !important;
  transition: all var(--vh-transition) !important;
}

.fc-button:hover {
  background: var(--vh-primary-50) !important;
  border-color: var(--vh-primary) !important;
  color: var(--vh-primary-dark) !important;
}

.fc-button-active,
.fc-button.fc-state-active {
  background: var(--vh-grad-emerald) !important;
  color: #fff !important;
  border-color: transparent !important;
}

.fc-state-default {
  background: var(--vh-card-bg) !important;
  color: var(--vh-text) !important;
  border: 1px solid var(--vh-border) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.fc-state-active,
.fc-state-down {
  background: var(--vh-grad-emerald) !important;
  color: #fff !important;
  border-color: transparent !important;
}

.fc-state-hover {
  background: var(--vh-primary-50) !important;
  color: var(--vh-primary-dark) !important;
}

.fc-today {
  background-color: var(--vh-primary-50) !important;
}

.fc-event {
  border: none !important;
  border-radius: var(--vh-radius-xs) !important;
  padding: 3px 6px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  background: var(--vh-grad-emerald) !important;
  color: #fff !important;
}

.fc th {
  padding: 10px 0 !important;
  font-weight: 600 !important;
  color: var(--vh-text-secondary) !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  letter-spacing: 0.05em !important;
}

.fc td {
  border-color: var(--vh-border-light) !important;
}

.fc th {
  border-color: var(--vh-border) !important;
}

#calendar table tbody td {
  cursor: pointer;
}

/* ---------- 12. POS Screen ---------- */
/* POS product grid */
.product_box {
  border-radius: var(--vh-radius) !important;
  border: 1px solid var(--vh-border) !important;
  background-color: var(--vh-card-bg) !important;
  box-shadow: var(--vh-shadow-sm) !important;
  transition: all var(--vh-transition) !important;
  padding: 10px !important;
}

.product_box:hover {
  border-color: var(--vh-primary) !important;
  box-shadow: var(--vh-shadow-md) !important;
  transform: translateY(-2px);
}

.product_box .image-container img {
  border-radius: var(--vh-radius-sm) !important;
}

/* POS tab container */
div.pos-tab-container {
  border-radius: var(--vh-radius) !important;
  border: 1px solid var(--vh-border) !important;
  box-shadow: var(--vh-shadow) !important;
}

div.pos-tab-menu div.list-group>a {
  border: none !important;
  border-radius: 0 !important;
  padding: 12px 16px !important;
  color: var(--vh-text-secondary) !important;
  font-weight: 500 !important;
  transition: all var(--vh-transition) !important;
}

div.pos-tab-menu div.list-group>a:hover {
  background-color: var(--vh-primary-50) !important;
  color: var(--vh-primary-dark) !important;
}

div.pos-tab-menu div.list-group>a.active,
div.pos-tab-menu div.list-group>a.active .glyphicon,
div.pos-tab-menu div.list-group>a.active .fa {
  background: var(--vh-grad-emerald) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

/* POS totals */
.pos-total span.number {
  color: var(--vh-primary-dark) !important;
  font-weight: 800 !important;
}

/* POS form actions (bottom bar) */
.pos-form-actions {
  background-color: var(--vh-card-bg) !important;
  border-top: 1px solid var(--vh-border) !important;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06) !important;
}

/* POS express buttons */
.pos-express-btn {
  border-radius: var(--vh-radius-sm) !important;
  transition: all var(--vh-transition) !important;
}

/* ---------- 13. Tabs & Navigation ---------- */
.nav-tabs {
  border-bottom: 2px solid var(--vh-border) !important;
}

.nav-tabs>li>a {
  border-radius: var(--vh-radius-sm) var(--vh-radius-sm) 0 0 !important;
  color: var(--vh-text-secondary) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  padding: 10px 18px !important;
  transition: all var(--vh-transition) !important;
}

.nav-tabs>li>a:hover {
  border-color: transparent transparent var(--vh-primary) !important;
  color: var(--vh-primary-dark) !important;
  background: transparent !important;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
  border-color: transparent transparent var(--vh-primary) !important;
  border-bottom: 3px solid var(--vh-primary) !important;
  color: var(--vh-primary-dark) !important;
  font-weight: 600 !important;
  background: transparent !important;
}

/* Breadcrumbs */
.breadcrumb {
  background-color: transparent !important;
  padding: 8px 0 !important;
  border-radius: 0 !important;
}

.breadcrumb>li {
  font-size: 13px !important;
  color: var(--vh-text-secondary) !important;
}

.breadcrumb>li+li:before {
  color: var(--vh-text-muted) !important;
}

.breadcrumb>.active {
  color: var(--vh-text) !important;
  font-weight: 500 !important;
}

/* ---------- 14. Dropdowns ---------- */
.dropdown-menu {
  border-radius: var(--vh-radius-sm) !important;
  border: 1px solid var(--vh-border) !important;
  box-shadow: var(--vh-shadow-lg) !important;
  padding: 6px !important;
}

.dropdown-menu>li>a {
  padding: 8px 14px !important;
  border-radius: var(--vh-radius-xs) !important;
  color: var(--vh-text-secondary) !important;
  font-size: 13.5px !important;
  transition: all var(--vh-transition) !important;
}

.dropdown-menu>li>a:hover {
  background-color: var(--vh-primary-50) !important;
  color: var(--vh-primary-dark) !important;
}

/* ---------- 15. Badges & Labels ---------- */
.label {
  border-radius: 50px !important;
  padding: 3px 10px !important;
  font-weight: 500 !important;
  font-size: 11.5px !important;
  letter-spacing: 0.02em;
}

.badge {
  border-radius: 50px !important;
  font-weight: 500 !important;
}

.label-success,
.badge-success {
  background-color: var(--vh-primary) !important;
}

.label-primary,
.badge-primary {
  background-color: var(--vh-primary) !important;
}

.label-info,
.badge-info {
  background-color: #0ea5e9 !important;
}

.label-warning,
.badge-warning {
  background-color: #f97316 !important;
}

.label-danger,
.badge-danger {
  background-color: #f43f5e !important;
}

.label-default,
.badge-default {
  background-color: var(--vh-text-muted) !important;
}

/* ---------- 16. Alerts ---------- */
.alert {
  border-radius: var(--vh-radius-sm) !important;
  border: none !important;
  font-size: 14px !important;
}

.alert-success {
  background-color: var(--vh-primary-light) !important;
  color: #065f46 !important;
}

.alert-info {
  background-color: #e0f2fe !important;
  color: #0c4a6e !important;
}

.alert-warning {
  background-color: #fff7ed !important;
  color: #9a3412 !important;
}

.alert-danger {
  background-color: #ffe4e6 !important;
  color: #9f1239 !important;
}

/* ---------- 17. Scrollbar ---------- */
::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

::-webkit-scrollbar-track {
  background: var(--vh-bg) !important;
  border-radius: 3px !important;
}

::-webkit-scrollbar-thumb {
  background-color: var(--vh-text-muted) !important;
  border-radius: 3px !important;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--vh-text-secondary) !important;
}

/* ---------- 18. Toast / Notifications ---------- */
#toast-container>div {
  border-radius: var(--vh-radius-sm) !important;
  box-shadow: var(--vh-shadow-lg) !important;
  opacity: 0.97 !important;
  font-family: 'Inter', sans-serif !important;
}

.toast-success {
  background-color: var(--vh-primary) !important;
}

.toast-info {
  background-color: #0ea5e9 !important;
}

.toast-warning {
  background-color: #f97316 !important;
}

.toast-error {
  background-color: #f43f5e !important;
}

/* ---------- 19. SweetAlert ---------- */
.swal-modal {
  border-radius: var(--vh-radius) !important;
  box-shadow: var(--vh-shadow-lg) !important;
  font-family: 'Inter', sans-serif !important;
}

.swal-button {
  border-radius: var(--vh-radius-sm) !important;
  font-weight: 500 !important;
  padding: 8px 24px !important;
}

.swal-button--confirm {
  background: var(--vh-grad-emerald) !important;
}

.swal-button--cancel {
  background-color: var(--vh-bg) !important;
  color: var(--vh-text) !important;
  border: 1px solid var(--vh-border) !important;
}

/* ---------- 20. Login / Auth Pages ---------- */
.login-page,
.register-page {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 50%, #f0f9ff 100%) !important;
}

.login-box,
.register-box {
  width: 420px;
}

.login-box-body,
.register-box-body {
  border-radius: var(--vh-radius) !important;
  box-shadow: var(--vh-shadow-lg) !important;
  padding: 30px !important;
  border: 1px solid var(--vh-border) !important;
  background-color: var(--vh-card-bg) !important;
}

.login-box-msg,
.register-box-msg {
  color: var(--vh-text) !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  margin-bottom: 16px !important;
}

.login-logo a,
.register-logo a {
  color: var(--vh-text) !important;
  font-weight: 700 !important;
}

/* ---------- 21. Panels ---------- */
.panel {
  border-radius: var(--vh-radius) !important;
  border: 1px solid var(--vh-border) !important;
  box-shadow: var(--vh-shadow) !important;
}

.panel-heading {
  border-radius: var(--vh-radius) var(--vh-radius) 0 0 !important;
  padding: 14px 20px !important;
}

.panel-body {
  padding: 20px !important;
}

.panel-default>.panel-heading {
  background-color: var(--vh-bg) !important;
  border-bottom: 1px solid var(--vh-border) !important;
  color: var(--vh-text) !important;
}

/* ---------- 22. Progress Bars ---------- */
.progress {
  border-radius: 50px !important;
  height: 8px !important;
  background-color: var(--vh-border-light) !important;
  box-shadow: none !important;
  overflow: hidden;
}

.progress-bar {
  border-radius: 50px !important;
  background: var(--vh-grad-emerald) !important;
  box-shadow: none !important;
}

.progress-bar-info {
  background: var(--vh-grad-sky) !important;
}

.progress-bar-warning {
  background: var(--vh-grad-orange) !important;
}

.progress-bar-danger {
  background: var(--vh-grad-rose) !important;
}

/* ---------- 23. Tooltips & Popovers ---------- */
.tooltip-inner {
  border-radius: var(--vh-radius-xs) !important;
  padding: 6px 12px !important;
  font-size: 12.5px !important;
  font-family: 'Inter', sans-serif !important;
  background-color: var(--vh-text) !important;
}

.popover {
  border-radius: var(--vh-radius-sm) !important;
  border: 1px solid var(--vh-border) !important;
  box-shadow: var(--vh-shadow-lg) !important;
  font-family: 'Inter', sans-serif !important;
}

.popover-title {
  border-radius: var(--vh-radius-sm) var(--vh-radius-sm) 0 0 !important;
  background-color: var(--vh-bg) !important;
  border-bottom: 1px solid var(--vh-border) !important;
  font-weight: 600 !important;
}

/* ---------- 24. Pagination ---------- */
.pagination>li>a,
.pagination>li>span {
  color: var(--vh-text) !important;
  border: 1px solid var(--vh-border) !important;
  border-radius: var(--vh-radius-xs) !important;
  margin: 0 2px !important;
  padding: 6px 12px !important;
  transition: all var(--vh-transition) !important;
}

.pagination>li>a:hover {
  background-color: var(--vh-primary-50) !important;
  border-color: var(--vh-primary) !important;
  color: var(--vh-primary-dark) !important;
}

.pagination>.active>a,
.pagination>.active>a:hover,
.pagination>.active>span {
  background: var(--vh-grad-emerald) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* ---------- 25. Wells & Callouts ---------- */
.well {
  border-radius: var(--vh-radius-sm) !important;
  border: 1px solid var(--vh-border) !important;
  background-color: var(--vh-bg) !important;
  box-shadow: none !important;
}

.callout {
  border-radius: 0 var(--vh-radius-sm) var(--vh-radius-sm) 0 !important;
}

/* ---------- 26. Table colored headers ---------- */
.table-pdf thead tr,
.blue-heading,
.blue-header th,
.add-product-price-table th,
.table-th-green th {
  background: var(--vh-grad-emerald) !important;
  color: #fff !important;
}

/* ---------- 27. Scroll-to-top button ---------- */
.scrolltop .scroll {
  background: var(--vh-primary) !important;
  border-radius: var(--vh-radius-sm) !important;
  opacity: 0.8 !important;
  padding: 8px 10px !important;
}

.scrolltop .scroll:hover {
  background: var(--vh-primary-dark) !important;
  opacity: 1 !important;
}

.scrolltop .scroll .fas {
  color: #fff !important;
}

/* ---------- 28. Pace (page loader) ---------- */
.pace .pace-progress {
  background: var(--vh-primary) !important;
}

.pace .pace-activity {
  border-top-color: var(--vh-primary) !important;
  border-left-color: var(--vh-primary) !important;
}

/* ---------- 29. iCheck (checkboxes/radios) ---------- */
/* iCheck uses sprite images — do NOT override background-color or it hides the sprite */
.icheckbox_square-blue.checked {
  border-color: var(--vh-primary) !important;
}

/* ---------- 30. Print — preserve existing styles ---------- */
@media print {
  body {
    background: #fff !important;
    font-family: 'Inter', sans-serif !important;
  }

  /* Don't apply modern theme to print */
  .box,
  .modal-content,
  .table,
  .btn {
    box-shadow: none !important;
    border-radius: 0 !important;
  }
}

/* ---------- 31. Responsive mobile fixes ---------- */
@media (max-width: 767px) {
  .box-body {
    padding: 12px !important;
  }

  .modal-body {
    padding: 16px !important;
  }

  .table>thead>tr>th,
  .table>tbody>tr>td {
    padding: 8px 10px !important;
  }
}

/* ---------- 32. Dark header text fixes ---------- */
/* Ensure dashboard welcome text is dark on white bg */
.tw-text-2xl.tw-text-primary-800,
.tw-text-4xl.tw-text-primary-800,
h1.tw-text-primary-800 {
  color: var(--vh-text) !important;
}

/* Fix notification bell / header icons on white bg */
.no-print[class*="tw-border-b"] {
  background: var(--vh-card-bg) !important;
  background-image: none !important;
}

/* ==========================================================================
   33. DATA DISPLAY PANELS & DETAIL VIEWS
   Modernizes the key-value information display (user profile, contact info,
   bank details, HRM details, etc.)
   ========================================================================== */

/* --- 33a. Tab Content Data Rows --- */
/* The main pattern: <p><strong>Label:</strong> Value</p> inside tab-pane */
.tab-content .tab-pane p,
.tab-content .tab-pane .row p {
  background-color: var(--vh-bg) !important;
  border: 1px solid var(--vh-border-light) !important;
  border-radius: var(--vh-radius-xs) !important;
  padding: 10px 14px !important;
  margin-bottom: 8px !important;
  font-size: 13.5px !important;
  color: var(--vh-text) !important;
  transition: border-color var(--vh-transition) !important;
  line-height: 1.5 !important;
}

.tab-content .tab-pane p:hover {
  border-color: var(--vh-primary-light) !important;
  background-color: var(--vh-primary-50) !important;
}

.tab-content .tab-pane p strong {
  color: var(--vh-text-secondary) !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  display: inline-block !important;
  margin-right: 6px !important;
}

/* --- 33b. Section Headers inside tab content --- */
.tab-content h4,
.tab-pane h4,
.tab-content .tab-pane h4 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--vh-text) !important;
  margin: 20px 0 12px 0 !important;
  padding: 0 0 8px 0 !important;
  border-bottom: 2px solid var(--vh-primary-light) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.tab-content h4::before,
.tab-pane h4::before {
  content: '' !important;
  width: 4px !important;
  height: 18px !important;
  background: var(--vh-grad-emerald) !important;
  border-radius: 2px !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

/* --- 33c. Horizontal Rules (section dividers) --- */
.tab-content hr,
.tab-pane hr {
  border: none !important;
  border-top: 1px solid var(--vh-border) !important;
  margin: 16px 0 !important;
}

/* --- 33d. Address blocks and multi-line info --- */
.tab-content strong+br {
  display: block !important;
  margin-bottom: 4px !important;
}

/* ==========================================================================
   34. PROFILE CARD
   Modernizes the left sidebar profile card with avatar, username, email
   ========================================================================== */

/* Profile image */
.box-profile .profile-user-img {
  border: 3px solid var(--vh-primary-light) !important;
  padding: 3px !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15) !important;
  width: 90px !important;
  height: 90px !important;
  object-fit: cover !important;
}

/* Profile username */
.box-profile .profile-username {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--vh-text) !important;
  margin-top: 12px !important;
  margin-bottom: 4px !important;
}

/* Profile role badge */
.box-profile .text-muted {
  color: var(--vh-text-secondary) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  background-color: var(--vh-bg) !important;
  display: inline-block !important;
  padding: 3px 12px !important;
  border-radius: 50px !important;
  border: 1px solid var(--vh-border) !important;
}

/* Profile list group (username, email, status rows) */
.list-group-unbordered .list-group-item {
  border: none !important;
  border-bottom: 1px solid var(--vh-border-light) !important;
  padding: 12px 4px !important;
  background-color: transparent !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.list-group-unbordered .list-group-item:last-child {
  border-bottom: none !important;
}

.list-group-unbordered .list-group-item b {
  color: var(--vh-text-secondary) !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}

.list-group-unbordered .list-group-item a {
  color: var(--vh-text) !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
}

.list-group-unbordered .list-group-item .label {
  font-size: 11px !important;
}

/* Profile edit button */
.box-profile .tw-dw-btn-primary,
.box-profile .btn-primary {
  width: 100% !important;
  margin-top: 12px !important;
  border-radius: var(--vh-radius-sm) !important;
  background: var(--vh-grad-emerald) !important;
  color: #fff !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
}

/* ==========================================================================
   35. SETTINGS PAGE — VERTICAL TAB NAV
   Modernizes the settings vertical navigation and form content area
   ========================================================================== */

/* Settings vertical nav container */
div.pos-tab-menu {
  background-color: var(--vh-card-bg) !important;
  border-right: 1px solid var(--vh-border) !important;
  padding: 8px !important;
}

/* Vertical nav items */
div.pos-tab-menu .list-group {
  margin-bottom: 0 !important;
}

div.pos-tab-menu .list-group>a.list-group-item {
  border: none !important;
  border-radius: var(--vh-radius-sm) !important;
  margin: 2px 0 !important;
  padding: 10px 16px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--vh-text-secondary) !important;
  background-color: transparent !important;
  transition: all var(--vh-transition) !important;
  text-align: left !important;
}

div.pos-tab-menu .list-group>a.list-group-item:hover {
  background-color: var(--vh-primary-50) !important;
  color: var(--vh-primary-dark) !important;
}

div.pos-tab-menu .list-group>a.list-group-item.active {
  background: var(--vh-grad-emerald) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3) !important;
  font-weight: 600 !important;
}

/* Settings content area */
div.pos-tab {
  padding: 24px !important;
}

/* ==========================================================================
   36. FORM GROUPS & FORM LAYOUT ENHANCEMENTS
   Modernizes form containers in settings and edit pages
   ========================================================================== */

/* Form group spacing */
.form-group {
  margin-bottom: 18px !important;
}

.form-group label {
  color: var(--vh-text) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* Input group addons — modern look */
.input-group-addon {
  background-color: var(--vh-bg) !important;
  border: 1px solid var(--vh-border) !important;
  color: var(--vh-primary-dark) !important;
  font-size: 13px !important;
  min-width: 40px !important;
}

.input-group-addon i,
.input-group-addon .fas,
.input-group-addon .fa,
.input-group-addon .glyphicon {
  color: var(--vh-primary) !important;
}

/* Checkbox & radio inside forms */
.checkbox label,
.radio label {
  font-size: 13.5px !important;
  color: var(--vh-text) !important;
}

/* Help blocks */
.help-block {
  color: var(--vh-text-muted) !important;
  font-size: 12px !important;
  margin-top: 4px !important;
}

/* ==========================================================================
   37. WIDGET COMPONENT ENHANCEMENTS
   Modernizes the tw-rounded-xl widget wrapper used throughout the app
   ========================================================================== */

/* Widget card wrapper */
[class*="tw-rounded-xl"][class*="tw-ring-1"][class*="tw-bg-white"] {
  border-radius: var(--vh-radius) !important;
  border: 1px solid var(--vh-border) !important;
  box-shadow: var(--vh-shadow) !important;
  background-color: var(--vh-card-bg) !important;
  overflow: hidden !important;
}

/* Widget inner padding */
[class*="tw-rounded-xl"][class*="tw-ring-1"] .tw-p-2,
[class*="tw-rounded-xl"][class*="tw-ring-1"] .sm\:tw-p-3 {
  padding: 20px !important;
}

/* Widget box-header inside widget */
[class*="tw-rounded-xl"] .box-header {
  border-bottom: 1px solid var(--vh-border-light) !important;
  padding-bottom: 12px !important;
  margin-bottom: 16px !important;
}

[class*="tw-rounded-xl"] .box-header .box-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--vh-text) !important;
}

/* ==========================================================================
   38. CONTENT HEADER & PAGE TITLES
   ========================================================================== */

/* Page title styling */
.content-header {
  padding: 20px 15px 10px !important;
  background-color: transparent !important;
}

.content-header h1,
.content-header .tw-text-3xl,
.content-header .tw-text-xl {
  font-weight: 700 !important;
  color: var(--vh-text) !important;
}

section.content {
  padding: 8px 15px 20px !important;
}

/* ==========================================================================
   39. DAISY UI BUTTON OVERRIDES
   Modernize DaisyUI buttons used across the app
   ========================================================================== */

.tw-dw-btn {
  border-radius: var(--vh-radius-sm) !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  transition: all var(--vh-transition) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.tw-dw-btn-primary {
  background: var(--vh-grad-emerald) !important;
  border: none !important;
  color: #fff !important;
}

.tw-dw-btn-primary:hover {
  background: linear-gradient(135deg, #059669, #0d9488) !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

.tw-dw-btn-error {
  background: var(--vh-grad-rose) !important;
  border: none !important;
  color: #fff !important;
}

.tw-dw-btn-error:hover {
  background: linear-gradient(135deg, #e11d48, #f43f5e) !important;
  color: #fff !important;
}

/* Outline variants need readable text */
.tw-dw-btn-outline.tw-dw-btn-error {
  background: transparent !important;
  border: 1px solid #f43f5e !important;
  color: #f43f5e !important;
}

.tw-dw-btn-outline.tw-dw-btn-error:hover {
  background: var(--vh-grad-rose) !important;
  border-color: transparent !important;
  color: #fff !important;
}

.tw-dw-btn-outline.tw-dw-btn-warning {
  background: transparent !important;
  border: 1px solid #f59e0b !important;
  color: #d97706 !important;
}

.tw-dw-btn-outline.tw-dw-btn-warning:hover {
  background: linear-gradient(135deg, #f59e0b, #fbbf24) !important;
  border-color: transparent !important;
  color: #fff !important;
}



.tw-dw-btn-sm {
  padding: 6px 14px !important;
  font-size: 12.5px !important;
}

/* ==========================================================================
   40. LIST GROUP (generic)
   ========================================================================== */

.list-group-item {
  border: none !important;
  border-bottom: 1px solid var(--vh-border-light) !important;
  padding: 12px 16px !important;
  color: var(--vh-text) !important;
  background-color: transparent !important;
  transition: background-color var(--vh-transition) !important;
}

.list-group-item:first-child {
  border-radius: var(--vh-radius) var(--vh-radius) 0 0 !important;
}

.list-group-item:last-child {
  border-radius: 0 0 var(--vh-radius) var(--vh-radius) !important;
  border-bottom: none !important;
}

.list-group-item:hover {
  background-color: var(--vh-primary-50) !important;
}

.list-group-item.active,
.list-group-item.active:hover {
  background: var(--vh-grad-emerald) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* ==========================================================================
   41. NAV TABS — JUSTIFIED TABS (User profile page tabs)
   ========================================================================== */

.nav-tabs.nav-justified>li>a {
  border: none !important;
  border-bottom: 3px solid transparent !important;
  margin: 0 !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--vh-text-secondary) !important;
  background-color: var(--vh-bg) !important;
  transition: all var(--vh-transition) !important;
}

.nav-tabs.nav-justified>li>a:hover {
  color: var(--vh-primary-dark) !important;
  background-color: var(--vh-primary-50) !important;
  border-bottom-color: var(--vh-primary) !important;
}

.nav-tabs.nav-justified>li.active>a,
.nav-tabs.nav-justified>li.active>a:hover,
.nav-tabs.nav-justified>li.active>a:focus {
  border: none !important;
  border-bottom: 3px solid var(--vh-primary) !important;
  color: var(--vh-primary-dark) !important;
  background-color: var(--vh-card-bg) !important;
  font-weight: 600 !important;
}

.nav-tabs.nav-justified>li.active>a i,
.nav-tabs.nav-justified>li.active>a .fas {
  color: var(--vh-primary) !important;
}

/* Tab icons */
.nav-tabs>li>a i,
.nav-tabs>li>a .fas,
.nav-tabs>li>a .fa {
  margin-right: 6px !important;
  font-size: 14px !important;
}

/* ==========================================================================
   42. SEARCH SETTINGS BAR (Business Settings search)
   ========================================================================== */

.search_settings_bar,
[class*="search_settings"] {
  margin-bottom: 16px !important;
}

/* ==========================================================================
   43. DaisyUI TAILWIND BADGE / STATUS OVERRIDES
   ========================================================================== */

.tw-dw-badge {
  border-radius: 50px !important;
  padding: 2px 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

/* ==========================================================================
   44. PRODUCT LIST PAGE — Layout & Column Fixes
   ========================================================================== */

/* (2) iCheck checkbox unchecked state — white bg so blue sprite is visible */
.icheckbox_square-blue {
  background-color: #fff !important;
}

/* (3) Shrink product image column */
#product_table th.tw-w-full,
#product_table td:nth-child(2) {
  width: 50px !important;
  max-width: 50px !important;
  min-width: 50px !important;
}

#product_table td:nth-child(2) img {
  width: 40px !important;
  height: 40px !important;
  object-fit: cover !important;
  border-radius: 6px !important;
}

/* (4) Product name column — compact and legible */
#product_table td:nth-child(4) {
  max-width: 180px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  color: var(--vh-text) !important;
}

/* (6) Column visibility dropdown — white bg with readable text + check indicators */
ul.dt-button-collection.dropdown-menu,
div.dt-button-collection {
  background-color: #fff !important;
  border: 1px solid var(--vh-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
  padding: 6px 0 !important;
  min-width: 220px !important;
}

ul.dt-button-collection.dropdown-menu li,
div.dt-button-collection a.dt-button,
div.dt-button-collection button.dt-button {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
}

ul.dt-button-collection.dropdown-menu li a,
ul.dt-button-collection.dropdown-menu li button,
div.dt-button-collection a.dt-button,
div.dt-button-collection button.dt-button {
  color: #334155 !important;
  background: transparent !important;
  padding: 7px 14px 7px 36px !important;
  font-size: 13px !important;
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  border: none !important;
  border-radius: 0 !important;
  position: relative !important;
  transition: background 0.15s !important;
}

/* Checkmark for VISIBLE (active) columns */
ul.dt-button-collection.dropdown-menu li a.dt-button-active::before,
ul.dt-button-collection.dropdown-menu li button.dt-button-active::before,
div.dt-button-collection a.dt-button.dt-button-active::before,
div.dt-button-collection button.dt-button.dt-button-active::before {
  content: '✓' !important;
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #10b981 !important;
}

/* Dot for HIDDEN (inactive) columns */
ul.dt-button-collection.dropdown-menu li a:not(.dt-button-active)::before,
ul.dt-button-collection.dropdown-menu li button:not(.dt-button-active)::before,
div.dt-button-collection a.dt-button:not(.dt-button-active)::before,
div.dt-button-collection button.dt-button:not(.dt-button-active)::before {
  content: '○' !important;
  position: absolute !important;
  left: 13px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 12px !important;
  color: #94a3b8 !important;
}

ul.dt-button-collection.dropdown-menu li a:hover,
ul.dt-button-collection.dropdown-menu li button:hover,
div.dt-button-collection a.dt-button:hover,
div.dt-button-collection button.dt-button:hover {
  background: #f0fdf4 !important;
  color: #065f46 !important;
}

ul.dt-button-collection.dropdown-menu li a.dt-button-active,
ul.dt-button-collection.dropdown-menu li button.dt-button-active,
div.dt-button-collection a.dt-button.dt-button-active,
div.dt-button-collection button.dt-button.dt-button-active {
  background: #f0fdf4 !important;
  color: #065f46 !important;
  font-weight: 600 !important;
}

/* ColVis overlay background */
div.dt-button-background {
  background: rgba(0, 0, 0, 0.25) !important;
}

/* ======== GLOBAL: Filter Popup ======== */
.btn-filter-toggle {
  background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 7px 16px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.25) !important;
}

.btn-filter-toggle:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35) !important;
  transform: translateY(-1px) !important;
}

.filter-popup-dropdown {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  z-index: 1050 !important;
  min-width: 700px !important;
  margin-top: 6px !important;
  background: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid #e5e7eb !important;
  padding: 20px !important;
}

/* ======== GLOBAL: Colorful Column Visibility Button ======== */
.btn-colvis-product,
.btn-colvis-custom {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25) !important;
}

.btn-colvis-product:hover,
.btn-colvis-custom:hover {
  background: linear-gradient(135deg, #059669, #047857) !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35) !important;
  transform: translateY(-1px) !important;
}

/* ======== GLOBAL: ColVis Custom Dropdown ======== */
.colvis-custom-dropdown {
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  z-index: 1050 !important;
  min-width: 220px !important;
  margin-top: 6px !important;
  background: #fff !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid #e5e7eb !important;
  padding: 6px 0 !important;
  max-height: 400px !important;
  overflow-y: auto !important;
}

/* ======== GLOBAL: Toolbar Action Buttons ======== */

/* Bulk action buttons (Delete Selected, Bulk Edit, etc.) */
.btn-bulk-action {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.25) !important;
}

.btn-bulk-action:hover:not(:disabled) {
  background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35) !important;
  transform: translateY(-1px) !important;
}

.btn-bulk-action:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* Add button */
.btn-add-action {
  background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.25) !important;
  text-decoration: none !important;
  display: inline-block !important;
}

.btn-add-action:hover {
  background: linear-gradient(135deg, #4f46e5, #4338ca) !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35) !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* Print button */
.btn-print-action {
  background: linear-gradient(135deg, #64748b, #475569) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  box-shadow: 0 2px 6px rgba(100, 116, 139, 0.25) !important;
}

.btn-print-action:hover {
  background: linear-gradient(135deg, #475569, #334155) !important;
  box-shadow: 0 4px 12px rgba(100, 116, 139, 0.35) !important;
  transform: translateY(-1px) !important;
}

/* Bulk action toolbar layout */
.product-bulk-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Product table hide-footer */
#product_table_wrapper .dataTables_scrollFoot {
  display: none !important;
}

/* (2 supplement) Cancel/neutral button — lighter default look */
.tw-dw-btn-neutral {
  background: #64748b !important;
  color: #fff !important;
}

.tw-dw-btn-neutral:hover {
  background: #475569 !important;
  color: #fff !important;
}

.tw-dw-btn-outline.tw-dw-btn-neutral {
  background: transparent !important;
  border: 1px solid var(--vh-border) !important;
  color: var(--vh-text) !important;
}

.tw-dw-btn-outline.tw-dw-btn-neutral:hover {
  background: var(--vh-bg) !important;
  border-color: var(--vh-primary) !important;
  color: var(--vh-primary-dark) !important;
}

/* ==========================================================================
   45. REPORT PAGE — MODERN TABS & TOOLBAR
   Modernizes old-style Bootstrap nav-tabs and filter bars in report pages
   ========================================================================== */

/* --- 45a. Report Toolbar (filters + actions in one row) --- */
.report-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 14px 18px;
  background: var(--vh-card-bg);
  border: 1px solid var(--vh-border-light);
  border-radius: var(--vh-radius);
  box-shadow: var(--vh-shadow);
}

.report-toolbar .report-filter-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.report-toolbar .report-filter-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--vh-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.report-toolbar .report-filter-select {
  border: 1px solid var(--vh-border) !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  min-width: 180px;
  background: var(--vh-bg) !important;
  color: var(--vh-text) !important;
  transition: border-color var(--vh-transition) !important;
}

.report-toolbar .report-filter-select:focus {
  border-color: var(--vh-primary) !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
}

.report-toolbar .report-spacer {
  flex: 1;
}

/* --- 45b. Report Pill Tabs --- */
.report-pill-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  margin: 0 0 20px 0;
  list-style: none;
  border-bottom: 2px solid var(--vh-border-light);
  padding-bottom: 12px;
}

.report-pill-tabs .report-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--vh-text-secondary);
  background: var(--vh-bg);
  border: 1px solid var(--vh-border-light);
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none !important;
  white-space: nowrap;
}

.report-pill-tabs .report-pill:hover {
  color: var(--vh-primary-dark);
  background: var(--vh-primary-50);
  border-color: var(--vh-primary-light);
  transform: translateY(-1px);
}

.report-pill-tabs .report-pill.active {
  background: var(--vh-grad-emerald);
  color: #fff;
  border-color: transparent;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.report-pill-tabs .report-pill i,
.report-pill-tabs .report-pill .fa {
  font-size: 13px;
}

.report-pill-tabs .report-pill.active i,
.report-pill-tabs .report-pill.active .fa {
  color: #fff;
}

/* --- 45c. Report Summary Card (P&L overview numbers) --- */
.report-summary-card {
  background: var(--vh-card-bg);
  border: 1px solid var(--vh-border-light);
  border-radius: var(--vh-radius);
  box-shadow: var(--vh-shadow);
  padding: 20px 24px;
  margin-bottom: 20px;
}

.report-summary-card h3 {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--vh-text) !important;
  margin: 0 0 4px 0 !important;
}

.report-summary-card h3 .display_currency {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--vh-primary-dark) !important;
}

.report-summary-card .help-block {
  font-size: 11.5px !important;
  color: var(--vh-text-muted) !important;
  margin-bottom: 12px !important;
}

/* Grid layout for opening/closing stock side-by-side */
.report-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .report-summary-grid {
    grid-template-columns: 1fr;
  }

  .report-pill-tabs {
    gap: 4px;
  }

  .report-pill-tabs .report-pill {
    padding: 6px 12px;
    font-size: 12px;
  }

  .report-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
}

/* --- 45d. Report table overrides (inside tabs) --- */
.report-tab-content .table {
  margin-bottom: 0 !important;
}

.report-tab-content .text-muted {
  font-size: 12px !important;
  color: var(--vh-text-muted) !important;
  margin-top: 8px !important;
}

/* ===== 45e. P&L Summary Stat Rows ===== */
.pl-stat-list {
  background: var(--vh-card-bg);
  border: 1px solid var(--vh-border-light);
  border-radius: var(--vh-radius);
  overflow: hidden;
}

.pl-stat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.3px;
  color: var(--vh-text-primary);
  border-bottom: 1px solid var(--vh-border-light);
  background: linear-gradient(135deg, rgba(241, 245, 249, 0.6), rgba(248, 250, 252, 1));
}

.pl-stat-header i {
  font-size: 16px;
}

.pl-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  transition: background 0.15s;
}

.pl-stat-row:nth-child(even) {
  background: rgba(248, 250, 252, 0.6);
}

.pl-stat-row:hover {
  background: rgba(241, 245, 249, 0.8);
}

.pl-stat-row:last-child {
  border-bottom: none;
}

.pl-stat-label {
  font-size: 13px;
  color: var(--vh-text-secondary, #475569);
  font-weight: 500;
  flex: 1;
  min-width: 0;
}

.pl-stat-sub {
  font-size: 11px;
  color: var(--vh-text-muted, #94a3b8);
  font-weight: 400;
}

.pl-stat-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--vh-text-primary, #1e293b);
  text-align: right;
  white-space: nowrap;
  padding-left: 16px;
}

@media (max-width: 767px) {
  .pl-stat-row {
    padding: 10px 14px;
  }

  .pl-stat-label {
    font-size: 12px;
  }

  .pl-stat-value {
    font-size: 13px;
  }
}

/* ===============================================
   46. OMNI CHANNEL MODULE
   =============================================== */

/* -- Toolbar -- */
.oc-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--vh-card-bg);
  border: 1px solid var(--vh-border-light);
  border-radius: var(--vh-radius);
  padding: 14px 20px;
  margin-bottom: 20px;
}

/* -- Channel Cards Grid -- */
.oc-channels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 20px;
}

.oc-channel-card {
  background: var(--vh-card-bg);
  border: 1px solid var(--vh-border-light);
  border-radius: var(--vh-radius);
  padding: 0;
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
}

.oc-channel-card:hover {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.oc-channel-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--vh-border-light);
}

.oc-channel-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.oc-channel-icon.woocommerce {
  background: #f0e8f8;
  color: #7f54b3;
}

.oc-channel-icon.shopify {
  background: #e8f5e9;
  color: #95bf47;
}

.oc-channel-info {
  flex: 1;
}

.oc-channel-info h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--vh-text-primary);
}

.oc-channel-platform {
  font-size: 12px;
  color: var(--vh-text-muted);
}

.oc-channel-card-stats {
  display: flex;
  padding: 14px 20px;
  gap: 20px;
  border-bottom: 1px solid var(--vh-border-light);
}

.oc-stat {
  flex: 1;
  text-align: center;
}

.oc-stat-num {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--vh-text-primary);
}

.oc-stat-label {
  display: block;
  font-size: 11px;
  color: var(--vh-text-muted);
  margin-top: 2px;
}

.oc-channel-card-actions {
  display: flex;
  gap: 8px;
  padding: 14px 20px;
}

.oc-btn-view {
  background: var(--vh-accent);
  color: #fff !important;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

.oc-btn-view:hover {
  opacity: 0.9;
}

.oc-btn-test {
  background: #f1f5f9;
  color: var(--vh-text-secondary) !important;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--vh-border-light);
}

.oc-btn-test:hover {
  background: #e2e8f0;
}

/* -- Empty State -- */
.oc-empty-state {
  text-align: center;
  padding: 60px 20px;
  background: var(--vh-card-bg);
  border: 2px dashed var(--vh-border-light);
  border-radius: var(--vh-radius);
}

.oc-empty-icon {
  margin-bottom: 16px;
  opacity: 0.5;
}

.oc-empty-state h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--vh-text-primary);
  margin-bottom: 8px;
}

.oc-empty-state p {
  color: var(--vh-text-muted);
  font-size: 14px;
  max-width: 400px;
  margin: 0 auto;
}

/* -- Create Form -- */
.oc-create-wrapper {
  max-width: 640px;
  margin: 0 auto;
}

.oc-step-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--vh-text-primary);
  margin-bottom: 14px;
}

.oc-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--vh-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}

.oc-platform-select {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.oc-platform-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 16px;
  background: var(--vh-card-bg);
  border: 2px solid var(--vh-border-light);
  border-radius: var(--vh-radius);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.oc-platform-option:hover {
  border-color: var(--vh-accent);
}

.oc-platform-option.selected {
  border-color: var(--vh-accent);
  box-shadow: 0 0 0 3px rgba(var(--vh-accent-rgb, 59, 130, 246), 0.15);
  background: rgba(var(--vh-accent-rgb, 59, 130, 246), 0.03);
}

.oc-platform-option strong {
  font-size: 14px;
  color: var(--vh-text-primary);
}

.oc-platform-option small {
  font-size: 12px;
  color: var(--vh-text-muted);
}

.oc-creds-form {
  background: var(--vh-card-bg);
  border: 1px solid var(--vh-border-light);
  border-radius: var(--vh-radius);
  padding: 24px;
}

.oc-form-row {
  margin-bottom: 16px;
}

.oc-form-row label {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  display: block;
  color: var(--vh-text-primary);
}

.oc-form-row-half {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.oc-form-row-half label {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  display: block;
  color: var(--vh-text-primary);
}

.oc-checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500 !important;
  cursor: pointer;
}

.oc-form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--vh-border-light);
}

/* -- Detail Page -- */
.oc-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.oc-section-card {
  background: var(--vh-card-bg);
  border: 1px solid var(--vh-border-light);
  border-radius: var(--vh-radius);
  padding: 20px;
  margin-bottom: 16px;
}

.oc-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--vh-text-primary);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.oc-info-rows {
  display: flex;
  flex-direction: column;
}

.oc-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  font-size: 13px;
  color: var(--vh-text-secondary);
}

.oc-info-row:last-child {
  border-bottom: none;
}

/* -- Sync action buttons -- */
.oc-sync-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.oc-sync-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #f8fafc;
  border: 1px solid var(--vh-border-light);
  border-radius: var(--vh-radius);
  padding: 14px 18px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  text-align: left;
  width: 100%;
}

.oc-sync-btn:hover {
  background: #f1f5f9;
  border-color: var(--vh-accent);
}

.oc-sync-btn i {
  font-size: 18px;
  color: var(--vh-accent);
  width: 24px;
  text-align: center;
}

.oc-sync-btn strong {
  display: block;
  font-size: 13px;
  color: var(--vh-text-primary);
}

.oc-sync-btn small {
  display: block;
  font-size: 11px;
  color: var(--vh-text-muted);
  margin-top: 2px;
}

/* -- Sync Logs -- */
.oc-log-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.oc-log-row {
  padding: 12px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.oc-log-row:last-child {
  border-bottom: none;
}

.oc-log-action {
  font-size: 13px;
  font-weight: 600;
  color: var(--vh-text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.oc-log-meta {
  font-size: 12px;
  color: var(--vh-text-muted);
  margin-top: 4px;
  display: flex;
  gap: 12px;
}

.oc-log-time {
  margin-left: auto;
}

.oc-log-error {
  font-size: 11px;
  color: #ef4444;
  background: #fef2f2;
  padding: 6px 10px;
  border-radius: 4px;
  margin-top: 6px;
}

/* -- Responsive -- */
@media (max-width: 767px) {
  .oc-toolbar {
    flex-direction: column;
    gap: 10px;
  }

  .oc-channels-grid {
    grid-template-columns: 1fr;
  }

  .oc-detail-grid {
    grid-template-columns: 1fr;
  }

  .oc-platform-select {
    grid-template-columns: 1fr;
  }

  .oc-form-row-half {
    grid-template-columns: 1fr;
  }
}

/* ===============================================
   47. LISTING MANAGER
   =============================================== */
.lm-matrix-wrapper {
  overflow-x: auto;
  background: var(--vh-card-bg);
  border: 1px solid var(--vh-border-light);
  border-radius: var(--vh-radius);
}

.lm-matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.lm-matrix-table thead th {
  background: #f8fafc;
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  color: var(--vh-text-primary);
  font-size: 12px;
  border-bottom: 2px solid var(--vh-border-light);
  white-space: nowrap;
}

.lm-matrix-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  vertical-align: middle;
}

.lm-matrix-table tbody tr:hover {
  background: rgba(0, 0, 0, 0.015);
}

.lm-col-product {
  min-width: 200px;
}

.lm-col-cost {
  min-width: 80px;
  color: var(--vh-text-muted);
}

.lm-col-channel {
  min-width: 120px;
  text-align: center;
}

.lm-listing-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.lm-cell-price {
  font-size: 12px;
  display: flex;
  gap: 6px;
  align-items: center;
}

.lm-cell-margin {
  font-weight: 700;
  font-size: 11px;
}

.lm-not-listed {
  color: #cbd5e1;
  font-size: 18px;
}

/* ===============================================
   48. PROFIT CALCULATOR
   =============================================== */
.pc-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
}

.pc-search-box {
  position: relative;
}

.pc-search-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--vh-card-bg);
  border: 1px solid var(--vh-border-light);
  border-radius: 0 0 var(--vh-radius) var(--vh-radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  max-height: 300px;
  overflow-y: auto;
}

.pc-search-item {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  transition: background 0.1s;
}

.pc-search-item:hover {
  background: #f1f5f9;
}

.pc-search-item strong {
  display: block;
  font-size: 13px;
  color: var(--vh-text-primary);
}

.pc-search-item small {
  font-size: 11px;
  color: var(--vh-text-muted);
}

.pc-product-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.pc-price-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.pc-price-inputs label {
  font-size: 11px;
  font-weight: 600;
  color: var(--vh-text-muted);
  margin-bottom: 4px;
  display: block;
}

.pc-comparison-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.pc-platform-card {
  background: #f8fafc;
  border: 1px solid var(--vh-border-light);
  border-radius: var(--vh-radius);
  padding: 16px;
  text-align: center;
}

.pc-platform-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--vh-text-primary);
  margin-bottom: 6px;
  text-transform: capitalize;
}

.pc-profit-big {
  font-size: 28px;
  font-weight: 800;
}

.pc-profit-label {
  font-size: 11px;
  color: var(--vh-text-muted);
  margin-bottom: 10px;
}

.pc-platform-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  text-align: left;
}

.pc-platform-stats div {
  display: flex;
  flex-direction: column;
}

.pc-platform-stats span {
  font-size: 10px;
  color: var(--vh-text-muted);
}

.pc-platform-stats strong {
  font-size: 13px;
}

.pc-fee-breakdown {
  margin-top: 10px;
  border-top: 1px dashed var(--vh-border-light);
  padding-top: 8px;
}

.pc-fee-line {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--vh-text-muted);
  padding: 2px 0;
}

.pc-fee-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pc-fee-platform {
  margin-bottom: 12px;
}

.pc-fee-platform-header {
  font-size: 13px;
  font-weight: 700;
  color: var(--vh-text-primary);
  padding: 8px 0;
  border-bottom: 1px solid var(--vh-border-light);
  text-transform: capitalize;
}

.pc-fee-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 12px;
  color: var(--vh-text-secondary);
  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

.pc-fee-value {
  font-weight: 600;
  color: var(--vh-text-primary);
}

/* ===============================================
   49. PRODUCT SCANNER
   =============================================== */
.sc-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 20px;
}

.sc-camera-container {
  background: #000;
  border-radius: var(--vh-radius);
  overflow: hidden;
  margin-bottom: 14px;
  min-height: 120px;
  position: relative;
}

.sc-camera-controls {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.sc-manual-input {
  margin-top: 14px;
}

.sc-history-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sc-history-item {
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  cursor: pointer;
  transition: background 0.1s;
}

.sc-history-item:hover {
  background: rgba(0, 0, 0, 0.02);
}

.sc-history-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--vh-text-primary);
}

.sc-history-meta {
  font-size: 11px;
  color: var(--vh-text-muted);
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
}

.sc-not-found {
  text-align: center;
  padding: 20px;
}

.sc-not-found p {
  color: var(--vh-text-muted);
  margin-top: 8px;
}

.sc-product-result {}

.sc-product-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.sc-stock-badge {
  text-align: center;
  background: #f0f9ff;
  border-radius: 8px;
  padding: 8px 16px;
}

.sc-stock-badge span {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: var(--vh-text-primary);
}

.sc-stock-badge small {
  font-size: 10px;
  color: var(--vh-text-muted);
}

.sc-price-row {
  display: flex;
  gap: 20px;
  margin-bottom: 16px;
}

.sc-price-item {
  flex: 1;
  background: #f8fafc;
  border-radius: 8px;
  padding: 10px 14px;
}

.sc-price-item span {
  display: block;
  font-size: 11px;
  color: var(--vh-text-muted);
}

.sc-price-item strong {
  font-size: 18px;
  font-weight: 700;
  color: var(--vh-text-primary);
}

.sc-platform-profits {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}

.sc-platform-card {
  background: #f8fafc;
  border: 1px solid var(--vh-border-light);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
}

.sc-platform-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--vh-text-primary);
  margin-bottom: 4px;
  text-transform: capitalize;
}

.sc-profit {
  font-size: 22px;
  font-weight: 800;
}

.sc-margin {
  font-size: 11px;
  font-weight: 600;
}

.sc-platform-card small {
  display: block;
  font-size: 10px;
  color: var(--vh-text-muted);
  margin-top: 4px;
}

@media (max-width: 767px) {
  .pc-layout {
    grid-template-columns: 1fr;
  }

  .sc-layout {
    grid-template-columns: 1fr;
  }

  .pc-price-inputs {
    grid-template-columns: 1fr;
  }

  .sc-price-row {
    flex-direction: column;
  }

  .sc-platform-profits {
    grid-template-columns: 1fr 1fr;
  }
}

/* ===============================================
   50. AUTO REPRICER
   =============================================== */
.rp-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 20px;
}

.rp-rule-card {
  background: var(--vh-card-bg);
  border: 1px solid var(--vh-border-light);
  border-radius: var(--vh-radius);
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: box-shadow 0.15s;
}

.rp-rule-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.rp-rule-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.rp-rule-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--vh-text-primary);
  margin-right: 8px;
}

.rp-rule-actions {
  display: flex;
  gap: 4px;
}

.rp-rule-details {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: 11px;
  color: var(--vh-text-muted);
}

.rp-preview {
  margin-top: 12px;
  border-top: 1px dashed var(--vh-border-light);
  padding-top: 10px;
}

.rp-preview-table {
  width: 100%;
  font-size: 12px;
  border-collapse: collapse;
}

.rp-preview-table thead th {
  text-align: left;
  padding: 6px 8px;
  background: #f8fafc;
  font-weight: 600;
  font-size: 11px;
  color: var(--vh-text-muted);
}

.rp-preview-table tbody td {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

.rp-log-item {
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.rp-log-product {
  font-size: 13px;
  font-weight: 600;
  color: var(--vh-text-primary);
}

.rp-log-change {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  margin: 3px 0;
}

.rp-log-item small {
  font-size: 11px;
  color: var(--vh-text-muted);
}

/* ===============================================
   51. ANALYTICS DASHBOARD
   =============================================== */
.an-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}

.an-kpi-card {
  background: var(--vh-card-bg);
  border: 1px solid var(--vh-border-light);
  border-radius: var(--vh-radius);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.an-kpi-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.an-kpi-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--vh-text-primary);
  line-height: 1.1;
}

.an-kpi-value small {
  font-size: 14px;
  font-weight: 600;
  color: var(--vh-text-muted);
}

.an-kpi-label {
  font-size: 11px;
  color: var(--vh-text-muted);
  margin-top: 2px;
}

.an-activity-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.an-activity-card {
  background: var(--vh-card-bg);
  border: 1px solid var(--vh-border-light);
  border-radius: var(--vh-radius);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.an-activity-card strong {
  font-size: 18px;
  font-weight: 800;
  color: var(--vh-text-primary);
}

.an-activity-card span {
  color: var(--vh-text-muted);
}

.an-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.an-channel-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.an-channel-name strong {
  display: block;
  font-size: 14px;
  color: var(--vh-text-primary);
}

.an-channel-name small {
  font-size: 11px;
  color: var(--vh-text-muted);
}

.an-channel-stats {
  display: flex;
  gap: 16px;
  text-align: center;
}

.an-channel-stats div span {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--vh-text-primary);
}

.an-channel-stats div small {
  font-size: 10px;
  color: var(--vh-text-muted);
}

@media (max-width: 767px) {
  .rp-layout {
    grid-template-columns: 1fr;
  }

  .an-kpi-row {
    grid-template-columns: 1fr 1fr;
  }

  .an-activity-row {
    grid-template-columns: 1fr;
  }

  .an-grid {
    grid-template-columns: 1fr;
  }
}