html.dark-mode {

  /* ── Background layers ─────────────────────────────────── */
  --bg-app:           #0c0d10;  
  --bg-surface:       #13151a;   
  --bg-elevated:      #1a1d24; 
  --bg-sidebar:       #13151a;
  --bg-input:         #22262f;
  --bg-table-head:    #1a1d24;
  --bg-table-body:    #13151a;
  --bg-hover:         #2d323e;
  --bg-active:        #3e4452;
  --bg-overlay:       #2d323e;
  --bg-deep:          #0c0d10;

  /* ── Text ──────────────────────────────────────────────── */
  --text-primary:     #f1f0ee;
  --text-secondary:   #9ea5b0;
  --text-muted:       #5f6672;
  --text-inverse:     #0c0d10;
  --text-link:         #f1f0ee;
  --text-link-hover:   #f1f0ee;

  /* ── Borders ───────────────────────────────────────────── */
  --border-subtle:    rgba(255, 255, 255, 0.04);
  --border-default:   rgba(255, 255, 255, 0.07);
  --border-strong:    rgba(245, 158, 11,  0.30);

  /* ── Accent (amber/gold) ───────────────────────────────── */
  --accent:           var(--primary-color);
  --accent-hover:     var(--secondary-color);
  --accent-muted:     rgba(245, 158, 11, 0.15);

  /* ── Semantic colors ───────────────────────────────────── */
  --color-success:    #34d399;
  --color-danger:     #f87171;
  --color-warning:    #fbbf24;
  --color-info:       #60a5fa;
  --color-info-hover: #93c5fd;

  /* ── Shadows ───────────────────────────────────────────── */
  --shadow-sm:        0 1px 3px  rgba(0, 0, 0, 0.50);
  --shadow-md:        0 4px 12px rgba(0, 0, 0, 0.65);
  --shadow-lg:        0 8px 32px rgba(0, 0, 0, 0.80);

  color-scheme: dark;
}

html.no-transition,
html.no-transition * {
  transition: none !important;
}
*,
*::before,
*::after {
  transition:
    background-color var(--transition-normal),
    color            var(--transition-fast),
    border-color     var(--transition-fast),
    fill             var(--transition-fast),
    stroke           var(--transition-fast) !important;
}


/* ============================================================
   LAYOUT
   ============================================================ */

html.dark-mode body,
html.dark-mode main,
html.dark-mode .topbar,
html.dark-mode .pos-topbar,
html.dark-mode .grid-container,
html.dark-mode .main-footer {
  background-color: var(--bg-app) !important;
  color: var(--text-primary) !important;
}

html.dark-mode .top {
  border: none;
  background-color: var(--bg-elevated) !important;
}

html.dark-mode .sidebar {
  background-color: var(--bg-sidebar) !important;
  color: var(--text-primary) !important;
}

html.dark-mode [class*="wrapper"] {
  background-color: var(--bg-surface) !important;
  color: var(--text-primary) !important;
}

/* Global text color reset */
html.dark-mode h1, html.dark-mode h2, html.dark-mode h3,
html.dark-mode h4, html.dark-mode h5, html.dark-mode h6,
html.dark-mode p,  html.dark-mode span, html.dark-mode a,
html.dark-mode li, html.dark-mode td,  html.dark-mode th,
html.dark-mode label, html.dark-mode input,
html.dark-mode button, html.dark-mode select,
html.dark-mode textarea {
  color: var(--text-primary) !important;
}

html.dark-mode * {
  border-color: var(--border-default) !important;
}

/* Links */
html.dark-mode a               { color: var(--text-link) !important; }
html.dark-mode a:hover         { color: var(--text-link-hover) !important; }


/* ============================================================
   NAVIGATION & TOPBAR
   ============================================================ */

html.dark-mode .topbar-sub-menu                  { background-color: var(--bg-surface) !important; }
html.dark-mode .topbar-sub-menu .sub-menu-link:hover { background-color: var(--bg-input) !important; }

html.dark-mode .storys-container                       { background-color: var(--bg-surface) !important; }
html.dark-mode .storys-container .sub-menu-item        { padding: 5px 10px; margin: 0 5px; border-radius: var(--radius-sm) !important; text-decoration: none; }
html.dark-mode .storys-container .sub-menu-item.active { background-color: var(--bg-app) !important; }
html.dark-mode .storys-container .sub-menu-item:hover  { background-color: var(--bg-elevated) !important; }

html.dark-mode .horizontal-scroll {
  background-color: var(--bg-surface) !important;
  padding: 10px;
  border-radius: var(--radius-md) !important;
}

html.dark-mode .pos-wrapper .pos-heading         { border-color: var(--border-default) !important; }
html.dark-mode .pos-subheader-mobile {
  background-color: var(--bg-surface) !important;
  border-bottom: 1px solid var(--border-default) !important;
}
html.dark-mode .pos-tab-container {
  background-color: var(--bg-surface) !important;
  border-color: var(--border-default) !important;
}
html.dark-mode .overview-filter                  { border-color: var(--border-default) !important; }


/* ============================================================
   SIDEBAR / DRAWERS
   ============================================================ */

html.dark-mode #category-drawer .drawer-menu,
html.dark-mode .drawer-side,
html.dark-mode #category-drawer .btn.category-back,
html.dark-mode #category-drawer .close-side-bar-category,
html.dark-mode #category-drawer .main-category,
html.dark-mode #category-drawer .product_category button,
html.dark-mode #category-drawer .card-body,
html.dark-mode .sub-category-dropdown,
html.dark-mode .sub-category-dropdown .product_category .card-body,
html.dark-mode .drawer-menu,
html.dark-mode .drawer-menu .product_brand .card-body {
  background-color: var(--bg-surface) !important;
}

html.dark-mode .main-category-div:hover,
html.dark-mode .main-category-div:hover .main-category,
html.dark-mode .main-category:hover,
html.dark-mode #category-drawer .main-category:hover,
html.dark-mode #category-drawer .card-body:hover,
html.dark-mode .drawer-menu .product_brand .card-body:hover {
  background-color: var(--bg-hover) !important;
  color: var(--text-primary) !important;
}


/* ============================================================
   BOXES & CARDS
   ============================================================ */

html.dark-mode .box-header {
  background-color: var(--bg-surface) !important;
  border-color: var(--border-default) !important;
}
html.dark-mode .box-body,
html.dark-mode .box-footer          { background-color: var(--bg-surface) !important; }
html.dark-mode .box,
html.dark-mode .info-box            { border-radius: var(--radius-sm) !important; }

html.dark-mode .info-box {
  background-color: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-sm) !important;
  border-radius: var(--radius-md) !important;
  padding: 10px;
}
html.dark-mode .info-box-icon      { background-color: var(--bg-app) !important; border-radius: var(--radius-md) !important; }
html.dark-mode .info-box-text      { font-size: 0.8rem; }
html.dark-mode .info-box-number    { font-size: 1.2rem; }

html.dark-mode .product_box,
html.dark-mode .product-card {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px;
}
html.dark-mode .product-card .label-success.heading {
  background-color: var(--bg-hover) !important;
  border-radius: var(--radius-sm) !important;
  padding: 1px;
}

html.dark-mode .small-box           { border-radius: var(--radius-md) !important; }
html.dark-mode .small-box a.small-box-footer { background: rgba(0, 0, 0, 0.1) !important; display: block; padding: 10px 0; }
html.dark-mode .small-box a.small-box-footer:hover { background: rgba(0, 0, 0, 0.2) !important; }
html.dark-mode .small-box.bg-aqua,
html.dark-mode .small-box.bg-yellow,
html.dark-mode .small-box.bg-red   { background-color: var(--bg-hover) !important; }

html.dark-mode .card               { border: none; }
html.dark-mode .card-inner,
html.dark-mode .card-back.card-body,
html.dark-mode .card-front.card-body { background-color: var(--bg-surface) !important; }
html.dark-mode .card-back.card-body,
html.dark-mode .card-front.card-body { border: 1px solid var(--border-default) !important; }
html.dark-mode .card-front,
html.dark-mode .card-body,
html.dark-mode .text-center,
html.dark-mode .d-flex             { border: none !important; box-shadow: none !important; }

html.dark-mode .panel.panel-default {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-default) !important;
}
html.dark-mode .panel-heading {
  background-color: var(--bg-elevated) !important;
  border-bottom: 1px solid var(--border-default) !important;
}
html.dark-mode .panel-title a:hover,
html.dark-mode .panel-title a:focus { text-decoration: none; }
html.dark-mode .panel-body         { background-color: var(--bg-surface) !important; }

html.dark-mode .well               { background-color: var(--bg-surface) !important; border-color: var(--border-default) !important; }
html.dark-mode .well.well-sm.bg-light-gray { background-color: var(--bg-elevated) !important; }
html.dark-mode .well .input-group .form-control:focus {
  border-color: var(--text-primary) !important;
  box-shadow: 0 0 5px rgba(245, 248, 250, 0.5) !important;
}

html.dark-mode .setting-option {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-default) !important;
}
html.dark-mode .setting-option:hover { background-color: var(--bg-hover) !important; }

html.dark-mode .pricing-card,
html.dark-mode .notification-template-tags,
html.dark-mode .label-box          { background-color: var(--bg-surface) !important; }

html.dark-mode .quick-data,
html.dark-mode .short-list-item {
  background-color: var(--bg-surface) !important;
  color: var(--text-primary) !important;
}
html.dark-mode .quick-data .item   { border-color: var(--border-default) !important; }
html.dark-mode .short-list-item .heading { border-color: var(--border-default) !important; }

html.dark-mode .graph-card-wrapper .extra-data,
html.dark-mode .graph-card-wrapper .extra-data .item { border-color: var(--border-default) !important; }

html.dark-mode .full-summary {
  background-color: var(--bg-surface) !important;
  padding: 15px;
  border-radius: var(--radius-md) !important;
}

html.dark-mode .kitchen-order-item {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-default) !important;
}
html.dark-mode .box {
    background-color: var(--bg-surface) !important;
    overflow: hidden !important;
}


/* ============================================================
   FORMS
   ============================================================ */

html.dark-mode .form-control,
html.dark-mode input[type="text"],
html.dark-mode select,
html.dark-mode textarea {
  background-color: var(--bg-input) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-primary) !important;
}

html.dark-mode .form-control.input-sm,
html.dark-mode #select_location_id {
  background-color: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-default) !important;
}
html.dark-mode .form-control.input-sm option,
html.dark-mode #select_location_id option,
html.dark-mode .form-group select option:hover,
html.dark-mode .form-group select option:active,
html.dark-mode .form-group select option:checked { background-color: var(--bg-input) !important; }

html.dark-mode .form-box input[type="file"] {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-default) !important;
  padding: 5px;
  border-radius: var(--radius-sm) !important;
}
html.dark-mode .form-box select {
  background-color: var(--bg-input) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
}

html.dark-mode .input-group-addon {
  background-color: var(--bg-surface) !important;
  border-color: var(--border-subtle) !important;
}

html.dark-mode .input-group-btn .btn {
  background-color: var(--bg-elevated) !important;
  border-color: var(--border-subtle) !important;
}
html.dark-mode .input-group-btn .btn .fa-minus { color: var(--color-danger) !important; }
html.dark-mode .input-group-btn .btn .fa-plus  { color: var(--color-success) !important; }

html.dark-mode .discount-form,
html.dark-mode .discount-form input,
html.dark-mode .discount-form select,
html.dark-mode #invoice_discount_type { background-color: var(--bg-surface) !important; }
html.dark-mode .discount-form input,
html.dark-mode .discount-form select  { border: 1px solid var(--border-default) !important; color: var(--text-primary) !important; }
html.dark-mode .item .discount-form   { border-color: var(--border-subtle) !important; }

html.dark-mode .subject-form,
html.dark-mode #ui-id-1 {
  background-color: var(--bg-input) !important;
  border: 1px solid var(--border-default) !important;
}
html.dark-mode .ui-menu-item          { background-color: var(--bg-input) !important; padding: 10px; cursor: pointer; }
html.dark-mode .ui-menu-item:hover    { background-color: var(--bg-hover) !important; }

html.dark-mode .pos-form-actions      { background-color: var(--bg-surface) !important; }
html.dark-mode .search-product,
html.dark-mode .quantity-btn,
html.dark-mode .button-container,
html.dark-mode .button-container-small { background-color: var(--bg-surface) !important; }

/* Setting inputs */
html.dark-mode .setting-three-grid .form-box { margin-bottom: 15px; }
html.dark-mode .setting-three-grid input {
  background-color: var(--bg-input) !important;
  border: 1px solid var(--border-default) !important;
  padding: 10px;
  width: 100%;
  border-radius: var(--radius-sm) !important;
}

/* Option divs */
html.dark-mode .col-sm-4 .form-group .option-div {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--bg-app) !important;
  border-radius: var(--radius-sm) !important;
}
html.dark-mode .col-sm-4 .form-group .option-div .icon { color: var(--text-primary) !important; }
html.dark-mode .col-sm-4 .form-group .option-div.active { border-color: var(--border-default) !important; }

html.dark-mode .pos-tab-content {
  background-color: var(--bg-surface) !important;
  padding: 20px;
  border-radius: var(--radius-md) !important;
}
html.dark-mode .pos-tab-content .form-control        { background-color: var(--bg-input) !important; border: 1px solid var(--border-default) !important; }
html.dark-mode .pos-tab-content .form-control:focus  { border-color: var(--border-default) !important; box-shadow: none; }
html.dark-mode .pos-tab-content .option-div          { background-color: var(--bg-surface) !important; color: var(--text-primary) !important; border: 1px solid var(--border-default) !important; }
html.dark-mode .pos-tab-content .option-div.active   { background-color: var(--bg-hover) !important; color: var(--text-primary) !important; }
html.dark-mode .pos-tab-content hr                   { border-top: 1px solid var(--border-default) !important; }

html.dark-mode #accordion                            { background-color: var(--bg-surface) !important; }
html.dark-mode .box-title                            { font-size: 16px; }


/* ============================================================
   iCHECK CUSTOM CHECKBOX
   ============================================================ */

html.dark-mode .icheckbox_square-blue {
  background-color: var(--bg-hover) !important;
  border-color: var(--border-default) !important;
  position: relative;
}
html.dark-mode .icheckbox_square-blue .iCheck-helper  { background: var(--border-strong) !important; border-color: var(--border-strong) !important; }
html.dark-mode .icheckbox_square-blue.checked         { background-color: var(--bg-hover) !important; border-color: var(--border-default) !important; }
html.dark-mode .icheckbox_square-blue.checked .iCheck-helper { background-color: var(--bg-hover) !important; }
html.dark-mode .icheckbox_square-blue.checked::after {
  content: "\2713";
  color: var(--text-primary) !important;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) !important;
  font-size: 16px;
}


/* ============================================================
   DARK MODE TOGGLE SWITCH
   ============================================================ */

.form-check-input { display: none; }

.form-check-label {
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  width: 60px;
  height: 34px;
  background-color: #ccc;
  border-radius: 34px;
  transition: background-color 0.3s;
}
.form-check-label::before {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 30px; height: 30px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.3s;
}
.toggle-icon                { position: absolute; font-size: 18px; transition: opacity 0.3s; }
.sun-icon                   { left: 4px; color: #f39c12; }
.moon-icon                  { right: 5px; color: #3498db; opacity: 0; }

.form-check-input:checked + .form-check-label               { background-color: #111; }
.form-check-input:checked + .form-check-label::before       { transform: translateX(26px) !important; }
.form-check-input:checked + .form-check-label .sun-icon     { opacity: 0; }
.form-check-input:checked + .form-check-label .moon-icon    { opacity: 1; }

@media (max-width: 768px) {
  .form-check-label         { width: 40px; height: 20px; }
  .form-check-label::before { width: 18px; height: 18px; top: 1px; left: 1px; }
  .toggle-icon              { font-size: 12px; }
  .form-check-input:checked + .form-check-label::before { transform: translateX(20px) !important; }
  .dark-mode-button         { margin-top: 8px; }
  .sun-icon                 { left: 1.75px; }
  .moon-icon                { right: 2px; }
}


/* ============================================================
   BUTTONS
   ============================================================ */

html.dark-mode .btn.btn-primary,
html.dark-mode .new-user .btn-modal,
html.dark-mode button.primary-btn,
html.dark-mode button.add-user-modal,
html.dark-mode .new-user .add-user-modal-btn,
html.dark-mode input.btn-success,
html.dark-mode .btn-warning,
html.dark-mode .invoice-btn,
html.dark-mode a.pos                    { background-color: var(--accent) !important; border: none; }

html.dark-mode .btn.btn-primary:hover,
html.dark-mode .new-user .btn-modal:hover,
html.dark-mode button.primary-btn:hover,
html.dark-mode button.add-user-modal:hover,
html.dark-mode .new-user .add-user-modal-btn:hover,
html.dark-mode input.btn-success:hover,
html.dark-mode .invoice-btn:hover,
html.dark-mode a.pos:hover              { background-color: var(--primary-color) !important; }

html.dark-mode .btn.bg-navy            { background-color: var(--bg-app) !important; border: 1px solid var(--bg-app) !important; }
html.dark-mode .btn.bg-navy:hover      { background-color: var(--bg-input) !important; }

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

html.dark-mode .btn.small-box-footer   { background-color: var(--bg-hover) !important; border: 1px solid var(--border-default) !important; }
html.dark-mode .btn.small-box-footer:hover,
html.dark-mode .btn.small-box-footer:focus,
html.dark-mode .btn.small-box-footer:active { background-color: var(--bg-input) !important; border: 1px solid var(--border-default) !important; }
html.dark-mode .btn.small-box-footer.bg-yellow { background-color: #ffd700; }
html.dark-mode .btn.small-box-footer.bg-red    { background-color: #dc143c; }
html.dark-mode .btn.small-box-footer.bg-blue,
html.dark-mode .btn.small-box-footer.bg-green  { background-color: var(--bg-hover) !important; }

html.dark-mode .modal-footer .btn-default,
html.dark-mode .footer-btn .btn-default,
html.dark-mode .pull-right button.btn-success {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-sm) !important;
  border-color: #1f2937 !important;
}
html.dark-mode .modal-footer .btn-default:hover,
html.dark-mode .footer-btn .btn-default:hover,
html.dark-mode .pull-right button.btn-success:hover {
  border: 1px solid var(--bg-hover) !important;
  color: var(--primary-color) !important;
}

html.dark-mode .modal-footer .btn  { background-color: var(--bg-input) !important; border: none; }
html.dark-mode .modal-footer .btn:hover { background-color: var(--bg-hover) !important; }

html.dark-mode .pos-tab-content .btn-success,
html.dark-mode .pos-tab-content .input-group-btn .btn {
  background-color: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-default) !important;
}
html.dark-mode .pos-tab-content .btn-success:hover,
html.dark-mode .pos-tab-content .input-group-btn .btn:hover {
  background-color: var(--bg-hover) !important;
}

html.dark-mode .dt-buttons .btn            { background-color: var(--bg-surface) !important; border-color: var(--border-default) !important; }
html.dark-mode .dt-buttons .btn:focus,
html.dark-mode .dt-buttons .btn:active     { background-color: var(--bg-hover) !important; }

html.dark-mode .dataTable .btn-group .btn  { background-color: var(--bg-surface) !important; border: 1px solid var(--bg-app) !important; }
html.dark-mode .dataTable .btn-group .btn:hover { background-color: var(--bg-input) !important; }
html.dark-mode .dataTable .btn-group .btn:focus,
html.dark-mode .dataTable .btn-group .btn:active { background-color: var(--bg-hover) !important; }

html.dark-mode .filter .btn                { background-color: var(--bg-hover) !important; }
html.dark-mode .filter .btn:hover          { background-color: var(--bg-hover) !important; }

html.dark-mode .filter .add-user-modal-btn {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-default) !important;
}
html.dark-mode .filter .add-user-modal-btn:hover { background-color: var(--bg-hover) !important; }

html.dark-mode .filter .filter-modal-btn   { background-color: var(--bg-surface) !important; }

html.dark-mode #refresh_orders             { background-color: var(--bg-app) !important; }
html.dark-mode #refresh_orders:hover       { background-color: var(--primary-color) !important; }

html.dark-mode #hide_suggestion_btn        { background-color: var(--accent) !important; }
html.dark-mode .flip-btn                   { color: var(--text-primary) !important; }

html.dark-mode .button-box button {
  background-color: var(--bg-hover) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-sm) !important;
}
html.dark-mode .button-box button svg path { fill: var(--text-primary) !important; }
html.dark-mode .button-box button:hover    { background-color: #5c6bc0; border-color: #5c6bc0; }

html.dark-mode .accordionTitle {
  background-color: var(--bg-hover) !important;
  border: 1px solid var(--bg-surface) !important;
  border-radius: var(--radius-md) !important;
}
html.dark-mode .accordionTitle h2          { margin: 0; }
html.dark-mode .accordionTitle.is-open     { background-color: var(--bg-hover) !important; }

html.dark-mode .report-print,
html.dark-mode #stock_adjustment_date_filter {
  background-color: var(--bg-surface) !important;
  border: none;
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
  border-radius: var(--radius-md) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

html.dark-mode #print_ledger_pdf,
html.dark-mode #send_ledger            { background-color: var(--bg-surface) !important; }

html.dark-mode #create_ledger_pdf      { background-color: var(--bg-hover) !important; color: var(--text-primary) !important; border: none; }
html.dark-mode #create_ledger_pdf:hover { background-color: var(--bg-input) !important; }

html.dark-mode #dashboard_date_filter  { background-color: var(--bg-app) !important; }


/* ============================================================
   IMAGE INVERT (icons in dark mode)
   ============================================================ */

html.dark-mode .topbar-sub-menu .sub-menu-link img,
html.dark-mode #language_dropdown img,
html.dark-mode .filter-modal-btn img,
html.dark-mode #dashboard_date_filter img,
html.dark-mode .options .item img,
html.dark-mode .new-user img,
html.dark-mode .dt-buttons .btn img,
html.dark-mode .export-icon,
html.dark-mode .dropdown-toggle,
html.dark-mode .dataTable .btn-group .btn img,
html.dark-mode .discount-btn img,
html.dark-mode .right-section img,
html.dark-mode .filter img,
html.dark-mode .accordionTitle svg,
html.dark-mode .filter .search img,
html.dark-mode .edit_variation_button,
html.dark-mode .edit_category_button,
html.dark-mode .edit_brand_button,
html.dark-mode .edit_tax_rate_button,
html.dark-mode .view_payment,
html.dark-mode #menuBtn,
html.dark-mode #toggle-sidebar,
html.dark-mode .view-button,
html.dark-mode .edit_role_button,
html.dark-mode .btn-primary img,
html.dark-mode #print_ledger_pdf img,
html.dark-mode #send_ledger img,
html.dark-mode .btn-modal img,
html.dark-mode .pos-subheader-mobile .pull-right img,
html.dark-mode .invoice-btn img,
html.dark-mode .copy-btn img,
html.dark-mode .invoice-options-btn-wrapper img,
html.dark-mode .bill-to-option img,
html.dark-mode .pos:hover img            { filter: invert(100%) !important; }

html.dark-mode .icon {
    color: white !important;
}


/* ============================================================
   DROPDOWNS & MODALS
   ============================================================ */

html.dark-mode .dropdown-menu              { background-color: var(--bg-hover) !important; border: 1px solid var(--border-subtle) !important; }
html.dark-mode .dropdown-menu li a         { background-color: var(--bg-hover) !important; }
html.dark-mode .dropdown-menu li a:hover,
html.dark-mode .dropdown-menu li a:focus   { background-color: var(--bg-surface) !important; }
html.dark-mode .dropdown-menu .divider     { background-color: var(--bg-hover) !important; border-top: 1px solid var(--border-default) !important; }

html.dark-mode .modal-content { background-color: var(--bg-surface) !important; border: 1px solid var(--border-subtle) !important; }
html.dark-mode .modal-header  { border-bottom: 1px solid var(--border-subtle) !important; }
html.dark-mode .modal-body    { background-color: var(--bg-surface) !important; }
html.dark-mode .modal-footer  { background-color: var(--bg-surface) !important; border-top: 1px solid var(--border-subtle) !important; }
html.dark-mode .modal-body a  { color: var(--text-link) !important; }
html.dark-mode .modal-body a:hover,
html.dark-mode .modal-footer a:hover { color: var(--text-link-hover) !important; }
html.dark-mode .bg-max-tr     { background-color: var(--bg-app) !important; }


/* ============================================================
   POPOVERS
   ============================================================ */

html.dark-mode .popover {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-default) !important;
}
html.dark-mode .popover-title  { background-color: var(--bg-input) !important; border-bottom: 1px solid var(--border-default) !important; }
html.dark-mode .popover-content { background-color: var(--bg-surface) !important; }
html.dark-mode .popover .arrow { border-bottom-color: var(--border-default) !important; }
html.dark-mode .popover .btn-primary { background-color: var(--bg-input) !important; border-color: var(--border-default) !important; }


/* ============================================================
   SELECT2
   ============================================================ */

html.dark-mode .select2-container--default .select2-selection--single,
html.dark-mode .select2-selection {
  background-color: var(--bg-input) !important;
  border: 1px solid var(--border-default) !important;
}
html.dark-mode .select2-container--default .select2-selection--single .select2-selection__arrow b,
html.dark-mode .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--text-primary) transparent transparent transparent;
}
html.dark-mode .select2-dropdown,
html.dark-mode .select2-container--open .select2-dropdown { background-color: var(--bg-input) !important; border: 1px solid var(--border-default) !important; }
html.dark-mode .select2-search--dropdown .select2-search__field,
html.dark-mode .select2-container--open .select2-search--dropdown .select2-search__field {
  background-color: var(--bg-input) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-primary) !important;
}
html.dark-mode .select2-container--open .select2-search--dropdown { background-color: var(--bg-input) !important; border-bottom: 1px solid var(--border-default) !important; }
html.dark-mode .select2-results__options,
html.dark-mode .select2-results__option,
html.dark-mode .select2-container--open .select2-results__options,
html.dark-mode .select2-container--open .select2-results__option { background-color: var(--bg-input) !important; }
html.dark-mode .select2-results__option--highlighted,
html.dark-mode .select2-container--open .select2-results__option--highlighted { background-color: var(--bg-hover) !important; color: var(--text-primary) !important; }
html.dark-mode .select2-container--open .select2-results__option--selected { background-color: var(--bg-input) !important; }
html.dark-mode .select2-container--open .select2-selection__clear:hover { color: var(--text-primary) !important; }
html.dark-mode .select2-search__field                { background-color: transparent; }
html.dark-mode .select2-selection__choice {
  background-color: var(--bg-hover) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-sm) !important;
  margin: 4px 7px 7px 0;
  padding: 3px 5px;
  font-size: 18px;
}
html.dark-mode .select2-selection__choice__remove:hover { color: #d9534f; }


/* ============================================================
   DATATABLES & PAGINATION
   ============================================================ */

html.dark-mode .dataTables_scrollHead,
html.dark-mode .dataTables_scrollHeadInner  { background-color: var(--bg-surface) !important; color: var(--text-primary) !important; }
html.dark-mode .dataTables_scroll,
html.dark-mode .dataTables_scrollHead,
html.dark-mode .dataTables_scrollBody,
html.dark-mode .dataTables_scrollFoot       { background-color: var(--bg-surface) !important; border: none; }
html.dark-mode .dataTables_scrollHeadInner,
html.dark-mode .dataTables_scrollFootInner  { background-color: var(--bg-surface) !important; }
html.dark-mode .dataTables_scrollHeadInner thead th { background-color: var(--bg-surface) !important; color: var(--text-primary) !important; }

html.dark-mode .dataTable thead th,
html.dark-mode .dataTable tfoot th,
html.dark-mode .dataTable tbody td {
  background-color: var(--bg-surface) !important;
  border-top: 1px solid var(--border-subtle) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}
html.dark-mode .dataTable tbody tr:hover { background-color: var(--bg-surface) !important; }
html.dark-mode .footer-total            { background-color: var(--bg-surface) !important; }

html.dark-mode .pagination               { background-color: var(--bg-surface) !important; }
html.dark-mode .pagination li a          { background-color: var(--bg-input) !important; border-color: var(--border-default) !important; }
html.dark-mode .pagination li.active a   { background-color: var(--bg-hover) !important; }
html.dark-mode .pagination li.disabled a { color: #666; background-color: var(--bg-surface) !important; border-color: var(--border-default) !important; }
html.dark-mode .pagination li a:hover    { background-color: var(--border-strong) !important; }


/* ============================================================
   TABLES
   ============================================================ */

html.dark-mode table,
html.dark-mode .table-bordered,
html.dark-mode .max-table,
html.dark-mode .table-border-center-col,
html.dark-mode .report-table,
html.dark-mode .crm-table,
html.dark-mode .pos_form_totals table,
html.dark-mode .table-condensed,
html.dark-mode .pos-product-table,
html.dark-mode .bg-max .general-table,
html.dark-mode .table-striped,
html.dark-mode .general-table,
html.dark-mode .table.bg-gray {
  border-top: none;
  background-color: var(--bg-table-body) !important;
  border: 1px solid var(--border-default) !important;
  border-collapse: collapse;
}

html.dark-mode .table > tbody > tr > td,
html.dark-mode .table > tbody > tr > th,
html.dark-mode .table > tfoot > tr > td,
html.dark-mode .table > tfoot > tr > th,
html.dark-mode .table > thead > tr > td,
html.dark-mode .table > thead > tr > th { border-top: none !important; }

html.dark-mode .table-bordered > tbody > tr > td,
html.dark-mode .table-bordered > tbody > tr > th,
html.dark-mode .table-bordered > tfoot > tr > td,
html.dark-mode .table-bordered > tfoot > tr > th,
html.dark-mode .table-bordered > thead > tr > td,
html.dark-mode .table-bordered > thead > tr > th { border: 1px solid var(--border-default) !important; }

/* thead / tfoot */
html.dark-mode table thead,   html.dark-mode table tfoot,
html.dark-mode .table-bordered thead, html.dark-mode .table-bordered tfoot,
html.dark-mode .max-table thead, html.dark-mode .max-table tfoot,
html.dark-mode .report-table thead, html.dark-mode .report-table tfoot,
html.dark-mode .crm-table thead, html.dark-mode .crm-table tfoot,
html.dark-mode .pos_form_totals table thead, html.dark-mode .pos_form_totals table tfoot,
html.dark-mode .table-condensed thead, html.dark-mode .table-condensed tfoot,
html.dark-mode .pos-product-table thead, html.dark-mode .pos-product-table tfoot,
html.dark-mode .bg-max .general-table thead, html.dark-mode .bg-max .general-table tfoot,
html.dark-mode .table-striped thead, html.dark-mode .table-striped tfoot,
html.dark-mode .general-table thead, html.dark-mode .general-table tfoot,
html.dark-mode .table.bg-gray thead, html.dark-mode .table.bg-gray tfoot { background-color: var(--bg-table-head) !important; }

/* thead th */
html.dark-mode table thead th,
html.dark-mode .table-bordered thead th,
html.dark-mode .max-table thead th,
html.dark-mode .report-table thead th,
html.dark-mode .crm-table thead th,
html.dark-mode .pos_form_totals table thead th,
html.dark-mode .table-condensed thead th,
html.dark-mode .pos-product-table thead th,
html.dark-mode .bg-max .general-table thead th,
html.dark-mode .table-striped thead th,
html.dark-mode .general-table thead th,
html.dark-mode .table.bg-gray thead th,
html.dark-mode .crm-table thead th,
html.dark-mode .crm-table tbody th { background-color: var(--bg-table-head) !important; border: 1px solid var(--border-default) !important; }

/* tbody rows */
html.dark-mode table tbody tr,
html.dark-mode .table-bordered tbody tr,
html.dark-mode .max-table tbody tr,
html.dark-mode .report-table tbody tr,
html.dark-mode .crm-table tbody tr,
html.dark-mode .pos_form_totals table tbody tr,
html.dark-mode .table-condensed tbody tr,
html.dark-mode .pos-product-table tbody tr,
html.dark-mode .bg-max .general-table tbody tr,
html.dark-mode .table-striped tbody tr,
html.dark-mode .general-table tbody tr,
html.dark-mode .table.bg-gray tbody tr {
  border: 1px solid var(--border-default) !important;
  border-bottom: 1px solid var(--border-default) !important;
  background-color: var(--bg-table-body) !important;
}

/* tbody th */
html.dark-mode table tbody th { border: 1px solid var(--bg-table-body) !important; background-color: var(--bg-hover) !important; }

/* POS totals */
html.dark-mode .pos_form_totals .table,
html.dark-mode .pos_form_totals .table tbody tr td { background-color: var(--bg-surface) !important; }
html.dark-mode .pos_form_totals .table tbody tr td b { color: var(--text-primary) !important; }
html.dark-mode .table-condensed th,
html.dark-mode .table-condensed td { border-color: var(--bg-surface) !important; }
html.dark-mode .pos-product-table th,
html.dark-mode .pos-product-table td,
html.dark-mode .pos-product-table thead th { background-color: var(--bg-surface) !important; border: none !important; }
html.dark-mode .pos-wrapper .pos-content .pos-table .pos-product-table thead tr { background-color: var(--bg-surface) !important; }

/* Semantic row colors */
html.dark-mode .table-condensed .danger td,
html.dark-mode .table-condensed .danger th  { background-color: var(--color-danger) !important; }
html.dark-mode .table-condensed .success td,
html.dark-mode .table-condensed .success th { background-color: var(--color-success) !important; }
html.dark-mode .table .bg-green th          { background-color: var(--bg-hover) !important; }
html.dark-mode .success th                  { background-color: var(--bg-hover) !important; }
html.dark-mode .bg-gray                     { background-color: var(--bg-elevated) !important; }
html.dark-mode .bg-max-tr                   { background-color: var(--bg-app) !important; }
html.dark-mode .danger                      { background-color: var(--color-danger) !important; }

/* Report status badge colors */
html.dark-mode .report-card-wrapper .report-table td span.login        { color: #1E3A8A !important; }
html.dark-mode .report-card-wrapper .report-table td span.verified     { color: #166534 !important; }
html.dark-mode .report-card-wrapper .report-table td span.email-sent   { color: #854D0E !important; }
html.dark-mode .report-card-wrapper .report-table td span.payment-edited { color: #9CA3AF !important; }
html.dark-mode .report-card-wrapper .report-table td span.logout       { color: #B91C1C !important; }

html.dark-mode .report-table th { font-weight: bold; }
html.dark-mode .report-table th,
html.dark-mode .report-table tr { background-color: var(--bg-surface) !important; border-color: var(--border-default) !important; }
html.dark-mode .report-table tr { border-bottom: 1px solid var(--border-default) !important; }

html.dark-mode .report-card-wrapper .sales-report-stats .item,
html.dark-mode .report-card-wrapper .report-head-flex .profit-analytics .profit-item { border-color: var(--border-default) !important; }
html.dark-mode .profit-item,
html.dark-mode .overall { background-color: var(--bg-elevated) !important; border-color: var(--border-default) !important; }

html.dark-mode .footer-total-div,
html.dark-mode .total-item,
html.dark-mode .custom-footer { background-color: var(--bg-hover) !important; }

html.dark-mode .overview-filter .filter .search  { border-color: var(--bg-surface) !important; }

/* Filter search inputs */
html.dark-mode .filter .search                   { background-color: var(--bg-input) !important; }
html.dark-mode .filter .search input[type="text"] { background-color: var(--bg-input) !important; }

/* Variation images */
html.dark-mode .variation_images {
  background-color: var(--bg-input) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-primary) !important;
}

/* Product card image block */
html.dark-mode .product-card .product-image {
  background-size: cover;
  background-position: center;
  height: 200px;
  border-radius: var(--radius-sm) !important;
}

/* Clearfix */
html.dark-mode .pos-tab-content .clearfix { clear: both; }

/* Status badges */
html.dark-mode .status { color: #000000 !important; }
html.dark-mode .bg-green,
html.dark-mode .badge.bg-green   { background-color: var(--bg-hover) !important; }
html.dark-mode .bg-aqua          { background-color: var(--bg-hover) !important; }


/* ============================================================
   NAVIGATION TABS & LIST GROUPS
   ============================================================ */

html.dark-mode .nav-tabs-custom              { background-color: var(--bg-surface) !important; }
html.dark-mode .nav-tabs-custom .nav-tabs li.active a,
html.dark-mode .nav-tabs-custom .nav-tabs li a:hover { background-color: var(--bg-hover) !important; margin-bottom: 5px; }
html.dark-mode .nav-tabs-custom .nav-tabs li a { background-color: var(--bg-surface) !important; }
html.dark-mode .nav-tabs-custom .tab-content { background-color: var(--bg-surface) !important; }
html.dark-mode .nav-tabs > li.active > a,
html.dark-mode .nav-tabs > li > a:hover      { background-color: var(--bg-hover) !important; }
html.dark-mode .tab-content                  { background-color: var(--bg-surface) !important; }

html.dark-mode .pos-tab-menu .list-group-item.active {
  background-color: var(--bg-hover) !important;
  border-color: var(--border-default) !important;
}
html.dark-mode .pos-tab-content,
html.dark-mode .list-group,
html.dark-mode .list-group-item {
  background-color: var(--bg-surface) !important;
  border-color: var(--border-default) !important;
}
html.dark-mode .list-group { border-radius: var(--radius-pill) !important; }
html.dark-mode .list-group-item.text-center.active {
  background-color: var(--bg-hover) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-default) !important;
}

html.dark-mode .list-group-unbordered .list-group-item { background-color: var(--bg-surface) !important; border: none; padding: 10px 15px; margin-bottom: 5px; }
html.dark-mode .list-group-unbordered .list-group-item .pull-right { color: var(--text-primary) !important; }
html.dark-mode .list-group-unbordered .list-group-item .label-success { background-color: var(--bg-hover) !important; }


/* ============================================================
   MISC COMPONENTS
   ============================================================ */

html.dark-mode .label                { background-color: var(--bg-input) !important; }
html.dark-mode mark                  { background-color: var(--bg-hover) !important; }
html.dark-mode code                  { background-color: var(--bg-hover) !important; }
html.dark-mode .notification-list    { background-color: var(--bg-surface) !important; }

html.dark-mode .invoice-options-box,
html.dark-mode .invoice-container-preview,
html.dark-mode .invoice-link-box,
html.dark-mode .invoice-status-final,
html.dark-mode .paid                 { background-color: var(--bg-surface) !important; }

html.dark-mode .add-invoice-heading  { background-color: var(--bg-surface) !important; padding: 10px; font-size: 18px; font-weight: bold; }
html.dark-mode .payment_row label    { background-color: var(--bg-surface) !important; }

html.dark-mode #additional_expenses_div .table-condensed { background-color: var(--bg-surface) !important; }

html.dark-mode #close-btn path       { stroke: var(--text-primary) !important; }
html.dark-mode .heading path         { stroke: var(--text-primary) !important; }

html.dark-mode pre#result-text,
html.dark-mode pre#progress-text,
html.dark-mode .progress             { background: var(--bg-hover) !important; }

/* Receipt always light regardless of theme */
html.dark-mode .receipt,
html.dark-mode .receipt *            { background-color: #ffffff !important; color: #000000 !important; }


/* ============================================================
   SWAL (SWEET ALERT)
   ============================================================ */

html.dark-mode .swal-modal            { background-color: var(--bg-surface) !important; }
html.dark-mode .swal-button--cancel,
html.dark-mode .swal-button--confirm  { background-color: var(--bg-elevated) !important; }
html.dark-mode .swal-button--cancel:hover,
html.dark-mode .swal-button--confirm:hover { background-color: var(--bg-hover) !important; }
html.dark-mode .swal-icon--info       { border-color: var(--text-primary) !important; }


/* ============================================================
   DATE / RANGE PICKERS
   ============================================================ */

html.dark-mode .daterangepicker,
html.dark-mode .daterangepicker .drp-calendar,
html.dark-mode .daterangepicker .ranges ul li { background-color: var(--bg-surface) !important; }
html.dark-mode .daterangepicker .drp-buttons .cancelBtn,
html.dark-mode .daterangepicker .drp-buttons .applyBtn  { background-color: var(--bg-hover) !important; }
html.dark-mode .daterangepicker .drp-buttons            { border-color: var(--border-default) !important; }
html.dark-mode .daterangepicker .drp-calendar.left .calendar-table,
html.dark-mode .daterangepicker .drp-calendar.right .calendar-table,
html.dark-mode .daterangepicker.show-ranges.ltr .drp-calendar.left { border-color: var(--border-default) !important; }
html.dark-mode .daterangepicker.opensright:before       { border-color: var(--border-default) !important; }

html.dark-mode .calendar-table                          { background-color: var(--bg-surface) !important; }
html.dark-mode .calendar-table td                       { background-color: var(--bg-surface) !important; }
html.dark-mode .calendar-table td.today,
html.dark-mode .calendar-table td.active,
html.dark-mode .calendar-table td.start-date,
html.dark-mode .calendar-table td.end-date              { background-color: var(--bg-hover) !important; }
html.dark-mode .calendar-table td.active,
html.dark-mode .calendar-table td.start-date,
html.dark-mode .calendar-table td.end-date,
html.dark-mode .calendar-table td.in-range              { background-color: var(--bg-app) !important; }
html.dark-mode .calendar-table td.off,
html.dark-mode .calendar-table td.ends                  { background-color: var(--bg-hover) !important; }
html.dark-mode .calendar-table td:hover                 { background-color: var(--bg-input) !important; }

html.dark-mode .datepicker table tr td span.focused,
html.dark-mode .datepicker table tr td span:hover       { background: var(--bg-input) !important; }

html.dark-mode .ranges ul li:hover    { background-color: var(--bg-input) !important; }
html.dark-mode .ranges ul li.active   { background-color: var(--bg-input) !important; }

html.dark-mode #dashboard_date_filter img              { filter: invert(100%) !important; }


/* ============================================================
   DROPZONE (FILE UPLOAD)
   ============================================================ */

html.dark-mode #shipping_documents_dropzone {
  background-color: var(--bg-surface) !important;
  border: 2px dashed var(--border-strong) !important;
}
html.dark-mode #shipping_documents_dropzone .dz-preview .dz-details     { background-color: var(--bg-input) !important; }
html.dark-mode #shipping_documents_dropzone .dz-preview .dz-progress    { background: var(--bg-hover) !important; }
html.dark-mode #shipping_documents_dropzone .dz-preview .dz-progress .dz-upload { background: var(--border-strong) !important; }
html.dark-mode #shipping_documents_dropzone .dz-preview .dz-error-message { color: #ff6b6b; }


/* ============================================================
   FULLCALENDAR
   ============================================================ */

html.dark-mode .fc,
html.dark-mode .fc-view-container,
html.dark-mode .fc-widget-content,
html.dark-mode .fc-list-empty-wrap2,
html.dark-mode .fc-scroller         { background-color: var(--bg-surface) !important; }
html.dark-mode .fc-scroller         { border: none; }
html.dark-mode .fc-day-header       { background-color: var(--bg-elevated) !important; border: none; }
html.dark-mode .fc-day,
html.dark-mode .fc-day-top          { background-color: var(--bg-surface) !important; border: 1px solid var(--bg-hover) !important; }
html.dark-mode .fc-today            { background-color: var(--bg-hover) !important; }
html.dark-mode .fc-day:hover,
html.dark-mode .fc-day-top:hover    { background-color: var(--bg-input) !important; }
html.dark-mode .fc-list-heading     { background-color: var(--bg-elevated) !important; }
html.dark-mode .fc-list-item        { background-color: var(--bg-surface) !important; }
html.dark-mode .fc-list-item:hover  { background-color: var(--bg-input) !important; }

html.dark-mode .fc-button,
html.dark-mode .fc-prev-button,
html.dark-mode .fc-next-button      { background-color: var(--bg-elevated) !important; color: var(--text-primary) !important; border: none !important; box-shadow: none !important; }
html.dark-mode .fc-button:hover,
html.dark-mode .fc-prev-button:hover,
html.dark-mode .fc-next-button:hover { background-color: var(--bg-hover) !important; color: var(--text-primary) !important; }
html.dark-mode .fc-button.fc-state-active { background-color: var(--bg-hover) !important; }
html.dark-mode .fc-center h2        { color: var(--text-primary) !important; }


/* ============================================================
   HIGHCHARTS
   ============================================================ */

html.dark-mode .highcharts-container { background-color: var(--bg-surface) !important; color: var(--text-primary) !important; }
html.dark-mode .highcharts-background { fill: var(--bg-surface) !important; }

html.dark-mode .highcharts-axis-labels text,
html.dark-mode .highcharts-axis-title text,
html.dark-mode .highcharts-title,
html.dark-mode .highcharts-subtitle,
html.dark-mode .highcharts-legend-item text { fill: var(--text-primary) !important; }

html.dark-mode .highcharts-grid-line  { stroke: var(--border-default) !important; }
html.dark-mode .highcharts-plot-border { stroke: var(--border-default) !important; }
html.dark-mode .highcharts-tooltip    { background-color: var(--bg-hover) !important; color: var(--text-primary) !important; }

html.dark-mode .highcharts-contextbutton { fill: var(--bg-surface) !important; }
html.dark-mode .highcharts-contextbutton .highcharts-button-box { fill: var(--bg-surface) !important; stroke: none !important; stroke-width: 1 !important; }
html.dark-mode .highcharts-contextbutton .highcharts-button-symbol { stroke: var(--text-primary) !important; }
html.dark-mode .highcharts-contextbutton text { color: var(--text-primary) !important; fill: var(--text-primary) !important; }
html.dark-mode .highcharts-contextbutton:hover .highcharts-button-box { fill: var(--bg-hover) !important; }
html.dark-mode .highcharts-button-symbol { stroke: var(--text-primary) !important; }

html.dark-mode .highcharts-contextmenu {
  background-color: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-default) !important;
  box-shadow: 3px 3px 10px var(--bg-app) !important;
}
html.dark-mode .highcharts-contextmenu .highcharts-menu { background-color: var(--bg-elevated) !important; padding: 5px 0 !important; }
html.dark-mode .highcharts-contextmenu .highcharts-menu-item { color: var(--text-primary) !important; background: none !important; padding: 0.5em 1em !important; transition: background 250ms ease, color 250ms ease !important; }
html.dark-mode .highcharts-contextmenu .highcharts-menu-item:hover { background-color: var(--bg-hover) !important; }
html.dark-mode .highcharts-contextmenu hr { border-top: 1px solid var(--border-default) !important; margin: 0 !important; }

html.dark-mode #csldxeowqfybpamgujvhktniz_loader svg path,
html.dark-mode #csldxeowqfybpamgujvhktniz_loader svg circle { stroke: var(--text-primary) !important; fill: var(--text-primary) !important; }


/* ============================================================
   TINYMCE EDITOR
   ============================================================ */

html.dark-mode .tox,
html.dark-mode .tox .tox-sidebar-wrap,
html.dark-mode .tox .tox-sidebar__slider,
html.dark-mode .tox .tox-sidebar__pane-container,
html.dark-mode .tox .tox-edit-area__iframe,
html.dark-mode .tox-collection__group,
html.dark-mode .tox-collection__item,
html.dark-mode .tox-toolbar-overlord,
html.dark-mode .tox-toolbar__primary,
html.dark-mode .tox-toolbar__group       { background-color: var(--bg-surface) !important; }

html.dark-mode .tox .tox-menubar,
html.dark-mode .tox .tox-toolbar__group,
html.dark-mode .tox .tox-editor-header,
html.dark-mode .tox .tox-statusbar,
html.dark-mode .tox .tox-anchorbar,
html.dark-mode .tox .tox-toolbar-overlord,
html.dark-mode .tox .tox-toolbar__primary { background-color: var(--bg-input) !important; border-color: var(--border-default) !important; }

html.dark-mode .tox .tox-statusbar__path,
html.dark-mode .tox .tox-statusbar__wordcount,
html.dark-mode .tox .tox-statusbar__branding a { color: var(--text-muted) !important; }

html.dark-mode .tox .tox-throbber                { background-color: var(--bg-hover) !important; }
html.dark-mode .tox-collection__item--active     { background-color: var(--bg-hover) !important; color: var(--text-primary) !important; }
html.dark-mode .tox-collection__item:hover       { background-color: var(--bg-input) !important; }
html.dark-mode .tox-icon .tox-tbtn__icon-wrap svg,
html.dark-mode .tox-toolbar__group button .tox-icon svg,
html.dark-mode .tox .tox-tbtn svg,
html.dark-mode .tox-split-button .tox-icon tox-tbtn__icon-wrap svg path,
html.dark-mode .tox-split-button .tox-split-button__chevron svg path { fill: var(--text-primary) !important; }

html.dark-mode .tox-toolbar__group button { border: 1px solid var(--border-default) !important; }
html.dark-mode .tox-toolbar__group button:hover,
html.dark-mode .tox-tbtn:hover,
html.dark-mode .tox .tox-mbtn__select-label:hover,
html.dark-mode .tox .tox-mbtn:hover,
html.dark-mode .tox .tox-mbtn:hover:not(:disabled):not(.tox-mbtn--active),
html.dark-mode .tox .tox-mbtn--active,
html.dark-mode .tox .tox-tbtn--enabled,
html.dark-mode .tox .tox-tbtn--enabled:hover,
html.dark-mode .tox .tox-dialog,
html.dark-mode .tox .tox-dialog__header,
html.dark-mode .tox .tox-dialog__footer,
html.dark-mode .tox .tox-button--secondary,
html.dark-mode .tox .tox-collection--list .tox-collection__item--active,
html.dark-mode .tox .tox-button[disabled],
html.dark-mode .tox .tox-tbtn:focus,
html.dark-mode .tox .tox-selectfield select, 
html.dark-mode .tox .tox-collection--toolbar .tox-collection__item--active { background-color: var(--bg-surface) !important; }
html.dark-mode .tox-toolbar__group button.tox-tbtn--disabled { background-color: var(--bg-elevated) !important; color: #6c757d; border: 1px solid var(--border-default) !important; }
html.dark-mode .tox-toolbar__group button.tox-tbtn--disabled .tox-icon svg { fill: #6c757d; }
html.dark-mode .tox .tox-collection__item-label,
html.dark-mode .tox .tox-collection__item-icon svg,
html.dark-mode .tox .tox-collection__item-accessory,
html.dark-mode .tox .tox-textfield,
html.dark-mode .tox .tox-dialog__title,
html.dark-mode .tox .tox-dialog__body-nav-item,
html.dark-mode .tox .tox-collection__item-icon { color: var(--text-link) !important; }
html.dark-mode .tox .tox-dialog--width-lg {width:800px !important;}
html.dark-mode .mce-content-body {background-color: #13151a !important;}
html.dark-mode .tox .tox-button--naked .tox-icon svg { fill: white !important; }
html.dark-mode .tox .tox-collection__item-caret svg { fill: white !important; }
html.dark-mode .tox .tox-selectfield select, .tox .tox-textarea, .tox .tox-textfield, .tox .tox-toolbar-textfield, .tox .tox-form__group--stretched .tox-textarea {background-color:var(--bg-input) !important;}
html.dark-mode .tox .tox-notification--info
html.dark-mode .tox .tox-dialog__body-nav-item--active {color: var(--bg-active) !important;}


html.dark-mode .tox-split-button { border: 1px solid var(--border-default) !important; padding: 5px; border-radius: var(--radius-sm) !important; }
html.dark-mode .tox-split-button:hover { background-color: var(--bg-input) !important; }
/*renew custom page */
html.dark-mode .value-badge{color:#000!important;}

/*custom menu*/
html.dark-mode .list-group-item { background: none !important;}
html.dark-mode .row-item { background: var(--bg-hover) !important; border-color: var(--border-subtle) !important; }
html.dark-mode .row-item:hover { background: var(--bg-overlay) !important;}

/*running order modal pos*/
html.dark-mode .sidebar-tabs{background: var(--bg-hover) !important;}
html.dark-mode .sidebar-header{background: var(--bg-hover) !important;}

html.dark-mode .running-orders-sidebar{background: var(--bg-hover) !important;}
 html.dark-mode .btn-info{background: var(--bg-hover) !important;}
 html.dark-mode .btn-default-submit{background: var(--bg-hover) !important;}
 html.dark-mode .secondary-color-icon {color: var(--text-link) !important;}
 html.dark-mode 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{color: var(--text-link) !important;background-color: var(--bg-hover) !important;}
 html.dark-mode div.pos-tab-menu div.list-group>a.active:after{border-left: 10px solid var(--bg-hover) !important;}
 
html.dark-mode body.sidebar-mini.sidebar-collapse .toogle-sidebar-submenu:hover > .side-submenu {background-color: var(--bg-sidebar) !important;}

html.dark-mode .pos-inline-charges{background: var(--bg-hover) !important;}
html.dark-mode .charge-item img{filter: invert(100%);}
html.dark-mode .selected_modifiers .modifier-item{background: var(--bg-hover) !important;}
html.dark-mode .total-item b{text-shadow: none !important;color: var(--text-link) !important;}

html.dark-mode .dark-mode-btn:hover {background: rgba(99, 102, 241, 0.22) !important;}
html.dark-mode .dark-mode-btn {background: rgba(99, 102, 241, 0.1) !important;border-color: rgba(99, 102, 241, 0.3) !important;}

html.dark-mode .side-submenu {background:var(--bg-sidebar) !important;}
html.dark-mode .side-submenu .nav-link.active {background: color-mix(in srgb,var(--primary-color) 60%,white 40%) !important;border-radius: 10px 0px 0px 10px;border-right: 4px solid #ffffff;}

html.dark-mode nav.horizontal-menu-wrapper .nav-link:hover {background: var(--primary-color);}
html.dark-mode .text-info{color: var(--text-link) !important;}
html.dark-mode .tox .tox-edit-area__iframe {background: var(--bg-hover) !important;}

@media (max-width: 768px) {
    .form-check-label {
        width: 40px;
        height: 20px;
    }

    .form-check-label::before {
        width: 18px;
        height: 18px;
        top: 1px;
        left: 1px;
    }

    .toggle-icon {
        font-size: 12px;
    }

    .form-check-input:checked + .form-check-label::before {
        transform: translateX(20px) !important;
    }

    .dark-mode-button {
        margin-top: 8px;
    }
    .sun-icon {
        left: 1.75px;
    }

    .moon-icon {
        right: 2px;
    }
}