/*
 * modern.css — UI modernization layer for UltimatePOS
 * Loaded last in css.blade.php so it overrides legacy AdminLTE/Bootstrap styles.
 * Never use this file to change layout structure or remove Bootstrap classes —
 * only visual polish (colors, radius, shadow, spacing, transitions).
 */

/* ─── CSS Custom Properties ─────────────────────────────────────────── */
:root {
  --m-radius:        0.625rem;   /* 10px */
  --m-radius-sm:     0.375rem;   /* 6px */
  --m-radius-lg:     0.875rem;   /* 14px */
  --m-shadow-sm:     0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --m-shadow:        0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -1px rgba(0,0,0,.05);
  --m-shadow-md:     0 10px 15px -3px rgba(0,0,0,.07), 0 4px 6px -2px rgba(0,0,0,.04);
  --m-border:        #e5e7eb;    /* gray-200 */
  --m-border-focus:  #6366f1;
  --m-text:          #111827;    /* gray-900 */
  --m-text-muted:    #6b7280;    /* gray-500 */
  --m-bg:            #f9fafb;    /* gray-50 */
  --m-white:         #ffffff;
  --m-transition:    150ms ease;
}

/* ─── Body & Base Typography ─────────────────────────────────────────── */
body {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  color: var(--m-text);
  background-color: var(--m-bg);
  -webkit-font-smoothing: antialiased;
  /* Prevent Bootstrap .row negative margins (-15px) from causing
     horizontal page overflow. Using hidden on body is safe — the browser
     propagates body overflow to the viewport scroll container, so this
     does NOT create a clipping context that affects position:absolute
     or position:fixed descendants. */
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  color: var(--m-text);
  line-height: 1.35;
}

/* ─── Content Area ───────────────────────────────────────────────────── */
.content-wrapper {
  background-color: var(--m-bg) !important;
}

.content {
  padding: 20px 20px 30px !important;
}

.content-header {
  background: var(--m-white);
  border-bottom: 1px solid var(--m-border);
  padding: 10px 20px !important;
  margin-bottom: 0 !important;
  box-shadow: var(--m-shadow-sm);
}

.content-header h1 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--m-text);
  line-height: 1.4;
  margin: 0;
}

.content-header .breadcrumb {
  background: transparent;
  margin: 0;
  padding: 0;
  font-size: 0.8rem;
  color: var(--m-text-muted);
}

.content-header .breadcrumb li a {
  color: var(--m-text-muted);
  text-decoration: none;
}

.content-header .breadcrumb li a:hover {
  color: var(--m-text);
}

/* ─── Panels / Boxes → Modern Cards ─────────────────────────────────── */
.box,
.panel,
.panel-default {
  background: var(--m-white);
  border: 1px solid var(--m-border) !important;
  border-radius: var(--m-radius) !important;
  box-shadow: var(--m-shadow-sm) !important;
  margin-bottom: 1.25rem;
}

.box-header,
.panel-heading {
  background: var(--m-white) !important;
  border-bottom: 1px solid var(--m-border) !important;
  border-radius: var(--m-radius) var(--m-radius) 0 0 !important;
  padding: 14px 18px !important;
  color: var(--m-text) !important;
}

.box-header .box-title,
.panel-heading .panel-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--m-text);
}

.box-body,
.panel-body {
  padding: 18px !important;
  border-radius: 0 0 var(--m-radius) var(--m-radius);
}

.box-footer,
.panel-footer {
  background: var(--m-bg) !important;
  border-top: 1px solid var(--m-border) !important;
  border-radius: 0 0 var(--m-radius) var(--m-radius) !important;
  padding: 12px 18px !important;
}

/* Info boxes (small stat widgets) */
.info-box {
  background: var(--m-white);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius) !important;
  box-shadow: var(--m-shadow-sm) !important;
  min-height: 72px;
}

.info-box-icon {
  border-radius: var(--m-radius) 0 0 var(--m-radius) !important;
  line-height: 72px;
  font-size: 1.5rem;
}

.small-box {
  border-radius: var(--m-radius) !important;
  box-shadow: var(--m-shadow-sm) !important;
  overflow: hidden;
}

.small-box > .inner {
  padding: 14px 18px !important;
}

.small-box > .small-box-footer {
  font-size: 0.8rem;
  padding: 6px 0 !important;
}

/* ─── Form Controls ──────────────────────────────────────────────────── */
.form-control {
  border: 1px solid #d1d5db !important;
  border-radius: var(--m-radius-sm) !important;
  background-color: var(--m-white) !important;
  color: var(--m-text) !important;
  font-size: 0.875rem !important;
  padding: 7px 12px !important;
  height: auto !important;
  min-height: 36px;
  transition: border-color var(--m-transition), box-shadow var(--m-transition);
  box-shadow: none !important;
}

.form-control:focus {
  border-color: var(--m-border-focus) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.12) !important;
}

.form-control::placeholder {
  color: #9ca3af;
}

.form-group label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 4px;
  display: block;
}

.input-group-addon {
  background-color: var(--m-bg) !important;
  border: 1px solid #d1d5db !important;
  border-radius: var(--m-radius-sm) !important;
  color: var(--m-text-muted);
  font-size: 0.875rem;
  padding: 7px 10px;
}

/* ─── Buttons ────────────────────────────────────────────────────────── */
.btn {
  border-radius: var(--m-radius-sm) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  padding: 7px 14px !important;
  line-height: 1.4 !important;
  border: 1px solid transparent !important;
  transition: background-color var(--m-transition),
              border-color var(--m-transition),
              box-shadow var(--m-transition),
              opacity var(--m-transition) !important;
  cursor: pointer;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background-color: #4f46e5 !important;
  border-color: #4f46e5 !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: #4338ca !important;
  border-color: #4338ca !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.25) !important;
}

.btn-success {
  background-color: #16a34a !important;
  border-color: #16a34a !important;
  color: #fff !important;
}
.btn-success:hover, .btn-success:focus {
  background-color: #15803d !important;
  border-color: #15803d !important;
}

.btn-danger {
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #fff !important;
}
.btn-danger:hover, .btn-danger:focus {
  background-color: #b91c1c !important;
  border-color: #b91c1c !important;
}

.btn-warning {
  background-color: #d97706 !important;
  border-color: #d97706 !important;
  color: #fff !important;
}
.btn-warning:hover, .btn-warning:focus {
  background-color: #b45309 !important;
  border-color: #b45309 !important;
}

.btn-info {
  background-color: #0891b2 !important;
  border-color: #0891b2 !important;
  color: #fff !important;
}
.btn-info:hover, .btn-info:focus {
  background-color: #0e7490 !important;
  border-color: #0e7490 !important;
}

.btn-default {
  background-color: var(--m-white) !important;
  border-color: #d1d5db !important;
  color: #374151 !important;
}
.btn-default:hover, .btn-default:focus {
  background-color: #f3f4f6 !important;
  border-color: #9ca3af !important;
}

.btn-flat {
  box-shadow: none !important;
}

.btn-sm, .btn-xs {
  padding: 4px 10px !important;
  font-size: 0.75rem !important;
}

.btn-lg {
  padding: 10px 20px !important;
  font-size: 0.9375rem !important;
}

.btn-link {
  color: #4f46e5 !important;
  text-decoration: none;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}
.btn-link:hover {
  color: #4338ca !important;
  text-decoration: underline;
}

/* ─── Tables ─────────────────────────────────────────────────────────── */
.table {
  font-size: 0.8375rem;
  color: var(--m-text);
  border-collapse: separate;
  border-spacing: 0;
}

.table > thead > tr > th {
  background-color: #f8fafc !important;
  border-bottom: 2px solid var(--m-border) !important;
  color: #374151;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 12px 16px !important;
  white-space: nowrap !important;
}

/* Ensure padding-right is sufficient for DataTable sorting icons to prevent text overlapping */
.table > thead > tr > th.sorting,
.table > thead > tr > th.sorting_asc,
.table > thead > tr > th.sorting_desc {
  padding-right: 32px !important;
}

.table > tbody > tr > td {
  border-top: 1px solid #f1f5f9 !important;
  padding: 12px 16px !important;
  vertical-align: middle !important;
  color: var(--m-text);
  white-space: nowrap !important; /* Prevent text wrapping and vertical squeezing */
}

.table > tbody > tr:hover > td {
  background-color: #f1f5f9 !important;
}

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

.table-striped > tbody > tr:nth-of-type(odd):hover > td {
  background-color: #f1f5f9 !important;
}

.table-bordered {
  border: 1px solid var(--m-border) !important;
  border-radius: var(--m-radius);
}

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

/* DataTables wrapper & custom scrollbar */
.dataTables_wrapper {
  font-size: 0.8375rem;
  color: var(--m-text);
}

.dataTables_wrapper .dataTables_scroll {
  clear: both;
}

.dataTables_wrapper .dataTables_scrollBody {
  overflow-x: auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Sleek custom scrollbars for DataTables and other scrollable divs */
.dataTables_scrollBody::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.dataTables_scrollBody::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track {
  background: #f8fafc;
  border-radius: 100px;
}

.dataTables_scrollBody::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 100px;
  border: 2px solid #f8fafc;
}

.dataTables_scrollBody::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.dataTables_filter input {
  border: 1px solid #d1d5db !important;
  border-radius: var(--m-radius-sm) !important;
  padding: 5px 10px !important;
  font-size: 0.8125rem !important;
  outline: none;
}

.dataTables_filter input:focus {
  border-color: var(--m-border-focus) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.12) !important;
}

.dataTables_length select {
  border: 1px solid #d1d5db !important;
  border-radius: var(--m-radius-sm) !important;
  padding: 4px 8px !important;
}

.dataTables_paginate .paginate_button {
  border-radius: var(--m-radius-sm) !important;
  border: 1px solid transparent !important;
  padding: 4px 10px !important;
  font-size: 0.8125rem !important;
  color: #374151 !important;
  cursor: pointer;
}

.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
  background: #4f46e5 !important;
  border-color: #4f46e5 !important;
  color: #fff !important;
}

.dataTables_paginate .paginate_button:hover {
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
  color: var(--m-text) !important;
}

/* ─── Premium Print Invoice & Action Buttons ─────────────────────────── */
a.print-invoice, 
button.print-invoice,
.print-invoice {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #fff !important;
  background: linear-gradient(135deg, #4f46e5 0%, #3b82f6 100%) !important;
  border: none !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  box-shadow: 0 2px 4px rgba(79, 70, 229, 0.15) !important;
  transition: all 0.2s ease-in-out !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  height: auto !important;
  line-height: normal !important;
}

a.print-invoice:hover, 
button.print-invoice:hover,
.print-invoice:hover {
  background: linear-gradient(135deg, #4338ca 0%, #2563eb 100%) !important;
  box-shadow: 0 4px 6px rgba(79, 70, 229, 0.25) !important;
  transform: translateY(-1px);
  color: #fff !important;
}

a.print-invoice:active, 
button.print-invoice:active,
.print-invoice:active {
  transform: translateY(0);
}

a.print-invoice i, 
button.print-invoice i,
.print-invoice i {
  font-size: 12px !important;
  margin-right: 0 !important;
}

/* Polish other table action buttons like DaisyUI button overrides */
.table .tw-dw-btn {
  font-family: inherit;
  font-weight: 500;
  border-radius: 6px !important;
  transition: all 0.2s ease-in-out;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.table .tw-dw-btn-xs {
  padding: 4px 8px !important;
  font-size: 11px !important;
  height: auto !important;
  min-height: unset !important;
}

/* Actions button dropdown styling */
.table .tw-dw-btn-info {
  background-color: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
}

.table .tw-dw-btn-info:hover {
  background-color: #e2e8f0 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

/* ─── Modals ─────────────────────────────────────────────────────────── */
.modal-content {
  border: none !important;
  border-radius: var(--m-radius-lg) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.18) !important;
  overflow: hidden;
}

.modal-header {
  background: var(--m-white) !important;
  border-bottom: 1px solid var(--m-border) !important;
  padding: 16px 20px !important;
}

.modal-header .modal-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--m-text);
}

.modal-header .close {
  color: var(--m-text-muted);
  opacity: 0.7;
  font-size: 1.25rem;
  padding: 0;
  margin: 0;
}

.modal-header .close:hover {
  opacity: 1;
  color: var(--m-text);
}

.modal-body {
  padding: 20px !important;
  background: var(--m-white);
}

.modal-footer {
  background: var(--m-bg) !important;
  border-top: 1px solid var(--m-border) !important;
  padding: 14px 20px !important;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* ─── Alerts ─────────────────────────────────────────────────────────── */
.alert {
  border-radius: var(--m-radius-sm) !important;
  border-left-width: 4px !important;
  font-size: 0.875rem;
  padding: 12px 16px !important;
}

.alert-success {
  background-color: #f0fdf4 !important;
  border-color: #16a34a !important;
  color: #14532d !important;
}

.alert-danger, .alert-error {
  background-color: #fef2f2 !important;
  border-color: #dc2626 !important;
  color: #7f1d1d !important;
}

.alert-warning {
  background-color: #fffbeb !important;
  border-color: #d97706 !important;
  color: #78350f !important;
}

.alert-info {
  background-color: #eff6ff !important;
  border-color: #2563eb !important;
  color: #1e3a8a !important;
}

/* ─── Badges & Labels ────────────────────────────────────────────────── */
.badge,
.label {
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  padding: 3px 8px !important;
  border-radius: 9999px !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.label-success, .badge-success { background-color: #16a34a !important; color: #fff !important; }
.label-danger,  .badge-danger  { background-color: #dc2626 !important; color: #fff !important; }
.label-warning, .badge-warning { background-color: #d97706 !important; color: #fff !important; }
.label-info,    .badge-info    { background-color: #0891b2 !important; color: #fff !important; }
.label-primary, .badge-primary { background-color: #4f46e5 !important; color: #fff !important; }
.label-default, .badge-default { background-color: #6b7280 !important; color: #fff !important; }

/* ─── Nav Tabs ───────────────────────────────────────────────────────── */
.nav-tabs {
  border-bottom: 2px solid var(--m-border) !important;
  margin-bottom: 20px;
}

.nav-tabs > li > a {
  border: none !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px !important;
  border-radius: 0 !important;
  font-size: 0.8375rem !important;
  font-weight: 500 !important;
  color: var(--m-text-muted) !important;
  padding: 10px 16px !important;
  transition: color var(--m-transition), border-color var(--m-transition);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
  border-bottom: 2px solid #4f46e5 !important;
  color: #4f46e5 !important;
  background: transparent !important;
}

.nav-tabs > li > a:hover {
  color: var(--m-text) !important;
  background: transparent !important;
  border-bottom-color: #d1d5db !important;
}

.tab-content {
  padding-top: 4px;
}

/* ─── Dropdowns ──────────────────────────────────────────────────────── */
.dropdown-menu {
  border: 1px solid var(--m-border) !important;
  border-radius: var(--m-radius) !important;
  box-shadow: var(--m-shadow-md) !important;
  padding: 6px !important;
  font-size: 0.8375rem;
  min-width: 180px;
}

.dropdown-menu > li > a {
  border-radius: var(--m-radius-sm) !important;
  padding: 7px 12px !important;
  color: #374151 !important;
  transition: background-color var(--m-transition);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background-color: #f3f4f6 !important;
  color: var(--m-text) !important;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover {
  background-color: #ede9fe !important;
  color: #4f46e5 !important;
}

.dropdown-menu .divider {
  margin: 4px 0 !important;
  background-color: var(--m-border) !important;
}

/* ─── Select2 Wrapper Polish ─────────────────────────────────────────── */
.select2-container--default .select2-selection--single {
  border: 1px solid #d1d5db !important;
  border-radius: var(--m-radius-sm) !important;
  height: 36px !important;
  display: flex;
  align-items: center;
  transition: border-color var(--m-transition), box-shadow var(--m-transition);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 36px !important;
  padding-left: 12px !important;
  color: var(--m-text) !important;
  font-size: 0.875rem !important;
}

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

.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--m-border-focus) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.12) !important;
}

.select2-dropdown {
  border: 1px solid #d1d5db !important;
  border-radius: var(--m-radius-sm) !important;
  box-shadow: var(--m-shadow-md) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #ede9fe !important;
  color: #4f46e5 !important;
}

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

/* ─── Sidebar (AdminLTE wrapper) ─────────────────────────────────────── */
.main-sidebar {
  background: #1e1b4b !important;
  box-shadow: 2px 0 8px rgba(0,0,0,.12);
}

.sidebar-menu > li > a {
  color: #c7d2fe !important;
  font-size: 0.8375rem;
  padding: 10px 15px 10px 20px !important;
  transition: background-color var(--m-transition), color var(--m-transition);
}

.sidebar-menu > li.active > a,
.sidebar-menu > li:hover > a {
  color: #fff !important;
  background: rgba(255,255,255,.08) !important;
}

.sidebar-menu > li > a > .fa,
.sidebar-menu > li > a > .glyphicon,
.sidebar-menu > li > a > .ion {
  color: #818cf8 !important;
  width: 20px;
  margin-right: 6px;
}

.sidebar-menu > li.active > a > .fa {
  color: #a5b4fc !important;
}

.sidebar-menu > li > ul.treeview-menu {
  background: rgba(0,0,0,.15) !important;
}

.sidebar-menu > li > ul.treeview-menu > li > a {
  color: #a5b4fc !important;
  font-size: 0.8125rem;
  padding-left: 44px !important;
}

.sidebar-menu > li > ul.treeview-menu > li.active > a,
.sidebar-menu > li > ul.treeview-menu > li > a:hover {
  color: #fff !important;
  background: rgba(255,255,255,.06) !important;
}

.sidebar-menu .header {
  color: #6d7db5 !important;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 16px 20px 6px !important;
}

/* ─── Scrollbar (Webkit) ─────────────────────────────────────────────── */
.main-sidebar ::-webkit-scrollbar { width: 4px; }
.main-sidebar ::-webkit-scrollbar-track { background: transparent; }
.main-sidebar ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }

/* ─── Page wrapper ───────────────────────────────────────────────────── */
.wrapper {
  background: var(--m-bg) !important;
}

/* ─── Callout blocks ─────────────────────────────────────────────────── */
.callout {
  border-radius: var(--m-radius-sm) !important;
  border-left-width: 4px !important;
  padding: 12px 16px !important;
}

/* ─── Well ───────────────────────────────────────────────────────────── */
.well {
  background-color: #f8fafc !important;
  border: 1px solid var(--m-border) !important;
  border-radius: var(--m-radius-sm) !important;
  box-shadow: none !important;
  padding: 14px 18px !important;
}

/* ─── Checkboxes (iCheck) ────────────────────────────────────────────── */
.icheckbox_flat-blue,
.iradio_flat-blue {
  border-radius: 4px !important;
}

/* ─── RTL Support ────────────────────────────────────────────────────── */
[dir="rtl"] .input-group-addon:first-child {
  border-radius: 0 var(--m-radius-sm) var(--m-radius-sm) 0 !important;
}
[dir="rtl"] .input-group-addon:last-child {
  border-radius: var(--m-radius-sm) 0 0 var(--m-radius-sm) !important;
}
[dir="rtl"] .form-control:first-child {
  border-radius: 0 var(--m-radius-sm) var(--m-radius-sm) 0 !important;
}
[dir="rtl"] .modal-footer {
  justify-content: flex-start;
}
[dir="rtl"] .sidebar-menu > li > a {
  padding: 10px 20px 10px 15px !important;
}

/* ─── Utility helpers ────────────────────────────────────────────────── */
.m-card {
  background: var(--m-white);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow-sm);
  padding: 18px;
  margin-bottom: 16px;
}

/* ─── Print: keep receipt/report styling clean ───────────────────────── */
@media print {
  .modern-css-hide { display: none !important; }
  .content-header  { display: none !important; }
  body { background: #fff !important; }
}


/* ══════════════════════════════════════════════════════════════════════
   PHASE 2 — Typography, Spacing & Component Polish
   ══════════════════════════════════════════════════════════════════════ */

/* ─── Filter panel inner layout ─────────────────────────────────────── */
/* The filters component wraps Bootstrap col-md-* rows; give them
   consistent vertical rhythm without breaking the grid. */
.box-body .form-group,
.panel-body .form-group {
  margin-bottom: 14px !important;
}

.box-body .row,
.panel-body .row {
  margin-left: -8px !important;
  margin-right: -8px !important;
}

.box-body [class*="col-"],
.panel-body [class*="col-"] {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

/* ─── box-header / box-title inside components ──────────────────────── */
.box-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--m-border) !important;
  background: transparent !important;
}

.box-header.with-border {
  border-bottom: 1px solid var(--m-border) !important;
}

.box-title {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--m-text) !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

.box-title a {
  color: var(--m-text) !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.box-title a:hover {
  color: #4f46e5 !important;
}

.box-tools {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-left: auto !important;
}

/* ─── Section/content headers (page-level) ──────────────────────────── */
section.content-header {
  padding: 14px 20px 10px !important;
  background: var(--m-white) !important;
  border-bottom: 1px solid var(--m-border) !important;
  margin-bottom: 0 !important;
}

section.content-header h1 {
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  color: var(--m-text) !important;
  margin: 0 0 2px !important;
  line-height: 1.3 !important;
}

section.content-header small {
  font-size: 0.8125rem !important;
  color: var(--m-text-muted) !important;
  font-weight: 400 !important;
}

/* ─── Bootstrap .well (Superadmin detail cards) ──────────────────────── */
.well {
  background: #f9fafb !important;
  border: 1px solid var(--m-border) !important;
  border-radius: var(--m-radius) !important;
  box-shadow: none !important;
  padding: 16px !important;
  margin-bottom: 12px !important;
}

.well strong {
  color: #374151 !important;
  font-size: 0.8125rem !important;
  display: flex;
  align-items: center;
  gap: 6px;
}

.well .text-muted {
  margin-top: 2px !important;
  margin-bottom: 10px !important;
  font-size: 0.875rem !important;
}

/* Catch bare h1 tags in content-header (legacy Superadmin/module views) */
section.content-header h1:not([class]) {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--m-text) !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

section.content-header h1 small {
  font-size: 0.8125rem !important;
  color: var(--m-text-muted) !important;
  font-weight: 400 !important;
  margin-left: 8px;
}

[dir="rtl"] section.content-header h1 small {
  margin-left: 0;
  margin-right: 8px;
}

section.content {
  padding: 20px !important;
  background: var(--m-bg) !important;
}

/* ─── Dashboard contact/support info banner ──────────────────────────── */
.m-support-banner {
  background: #eff6ff;
  border-left: 4px solid #2563eb;
  border-radius: var(--m-radius-sm);
  padding: 12px 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  font-size: 0.8375rem;
  color: #1e3a8a;
  margin-bottom: 16px;
  box-shadow: var(--m-shadow-sm);
}

.m-support-banner a {
  color: #1d4ed8;
  font-weight: 600;
  text-decoration: none;
}

.m-support-banner a:hover {
  text-decoration: underline;
}

.m-support-banner i {
  margin-right: 5px;
}

/* ─── Quick-action link cards (dashboard shortcuts) ─────────────────── */
.m-quick-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: var(--m-white);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  text-decoration: none;
  transition: box-shadow var(--m-transition), border-color var(--m-transition), transform var(--m-transition);
  color: #374151;
}

.m-quick-action:hover {
  box-shadow: var(--m-shadow-md);
  border-color: #c7d2fe;
  transform: translateY(-1px);
  color: var(--m-text);
  text-decoration: none;
}

/* ─── Sidebar: adminltecustom menu rendered output ───────────────────── */
/* The sidebar uses a custom Blade view 'adminltecustom' via Menu::render().
   The rendered HTML uses standard AdminLTE sidebar classes. */
.side-bar {
  background: #ffffff !important;
  border-right: 1px solid var(--m-border) !important;
}

.side-bar .sidebar-menu,
.side-bar nav ul {
  list-style: none;
  padding: 8px 0;
  margin: 0;
}

.side-bar .sidebar-menu > li > a,
.side-bar nav ul li a {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 9px 16px !important;
  font-size: 0.8375rem;
  font-weight: 500;
  color: #374151 !important;
  text-decoration: none;
  border-radius: var(--m-radius-sm);
  margin: 1px 8px;
  transition: background-color var(--m-transition), color var(--m-transition);
}

.side-bar .sidebar-menu > li > a:hover,
.side-bar nav ul li a:hover {
  background-color: #f3f4f6 !important;
  color: #111827 !important;
}

.side-bar .sidebar-menu > li.active > a,
.side-bar nav ul li.active > a {
  background-color: #ede9fe !important;
  color: #4f46e5 !important;
  font-weight: 600 !important;
}

.side-bar .sidebar-menu > li > a > .fa,
.side-bar .sidebar-menu > li > a > .fas,
.side-bar .sidebar-menu > li > a > .far,
.side-bar nav ul li a .fa,
.side-bar nav ul li a .fas {
  width: 18px;
  color: #6b7280;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.side-bar .sidebar-menu > li.active > a > .fa,
.side-bar .sidebar-menu > li.active > a > .fas,
.side-bar nav ul li.active > a .fa,
.side-bar nav ul li.active > a .fas {
  color: #4f46e5 !important;
}

/* Submenu treeview */
.side-bar .sidebar-menu .treeview-menu,
.side-bar nav ul ul {
  background: #f9fafb !important;
  border-left: 2px solid #e0e7ff;
  margin-left: 24px;
  margin-right: 8px;
  border-radius: 0 0 var(--m-radius-sm) var(--m-radius-sm);
}

.side-bar .sidebar-menu .treeview-menu > li > a,
.side-bar nav ul ul li a {
  padding: 7px 12px !important;
  font-size: 0.8125rem !important;
  color: #4b5563 !important;
  margin: 1px 0;
}

.side-bar .sidebar-menu .treeview-menu > li.active > a,
.side-bar nav ul ul li.active > a {
  color: #4f46e5 !important;
  background-color: #ede9fe !important;
}

/* Section headers in sidebar */
.side-bar .sidebar-menu .header,
.side-bar nav ul li.header {
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #9ca3af !important;
  padding: 14px 24px 4px !important;
  list-style: none;
}

/* RTL sidebar */
[dir="rtl"] .side-bar {
  border-right: none !important;
  border-left: 1px solid var(--m-border) !important;
}

[dir="rtl"] .side-bar .sidebar-menu .treeview-menu,
[dir="rtl"] .side-bar nav ul ul {
  border-left: none;
  border-right: 2px solid #e0e7ff;
  margin-left: 8px;
  margin-right: 24px;
}

/* ─── Input group improvements ──────────────────────────────────────── */
.input-group {
  display: flex !important;
}

/* Field segments (text inputs + select2 wrappers) take the remaining space.
   `min-width: 0` is essential: flex items default to `min-width: auto`, which
   refuses to shrink below their content/intrinsic width. select2 sets an inline
   pixel width on its container, so without this the dropdown overflows the
   input-group (and its rounded card) instead of fitting inside it. */
.input-group > .form-control,
.input-group > .select2-container {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  width: auto !important;
}

/* Icon addons and buttons size to their content and never grow/shrink.
   We override the legacy Bootstrap table-cell `width: 1%` to prevent the wrapper
   from squishing and forcing its children to overflow/overlap. */
.input-group > .input-group-addon,
.input-group > .input-group-btn {
  flex: 0 0 auto !important;
  width: auto !important;
}

/* Make button groups inside flex containers flex rows so children align nicely
   and stretch to fill the height. */
.input-group > .input-group-btn {
  display: flex !important;
  align-items: stretch;
}

/* Keep segments visually joined: flatten every internal seam, then round only
   the group's outer corners. Earlier rules force a full border-radius on
   .form-control / .input-group-addon / .btn / select2, which made each segment
   read as a detached pill. */
.input-group > .form-control,
.input-group > .input-group-addon,
.input-group > .input-group-btn > .btn,
.input-group > .select2-container .select2-selection {
  border-radius: 0 !important;
}

.input-group > :first-child,
.input-group > .input-group-btn:first-child > .btn:first-child,
.input-group > .select2-container:first-child .select2-selection {
  border-top-left-radius: var(--m-radius-sm) !important;
  border-bottom-left-radius: var(--m-radius-sm) !important;
}

.input-group > :last-child,
.input-group > .input-group-btn:last-child > .btn:last-child,
.input-group > .select2-container:last-child .select2-selection {
  border-top-right-radius: var(--m-radius-sm) !important;
  border-bottom-right-radius: var(--m-radius-sm) !important;
}

/* Collapse the doubled hairline where two bordered segments meet. Position-based
   (not adjacency) because select2 leaves the original hidden <select> in the DOM
   between the addon and the .select2-container, which breaks `+` selectors.
   display:none segments are removed from flex layout, so the visible segments
   still sit flush and the -1px overlaps their shared border cleanly. */
.input-group > .form-control:not(:first-child),
.input-group > .input-group-addon:not(:first-child),
.input-group > .select2-container:not(:first-child),
.input-group > .input-group-btn:not(:first-child) {
  margin-left: -1px !important;
}

/* Collapse borders between buttons inside input-group-btn */
.input-group-btn > .btn:not(:first-child) {
  margin-left: -1px !important;
}

[dir="rtl"] .input-group > .form-control:not(:first-child),
[dir="rtl"] .input-group > .input-group-addon:not(:first-child),
[dir="rtl"] .input-group > .select2-container:not(:first-child),
[dir="rtl"] .input-group > .input-group-btn:not(:first-child) {
  margin-right: -1px !important;
  margin-left: 0 !important;
}

[dir="rtl"] .input-group-btn > .btn:not(:first-child) {
  margin-right: -1px !important;
  margin-left: 0 !important;
}

/* ─── Date-range picker wrapper ──────────────────────────────────────── */
.daterangepicker {
  border: 1px solid var(--m-border) !important;
  border-radius: var(--m-radius) !important;
  box-shadow: var(--m-shadow-md) !important;
  font-size: 0.8375rem !important;
}

.daterangepicker .drp-buttons .btn {
  border-radius: var(--m-radius-sm) !important;
}

/* ─── Pagination (Bootstrap) ─────────────────────────────────────────── */
.pagination > li > a,
.pagination > li > span {
  border: 1px solid var(--m-border) !important;
  color: #374151 !important;
  padding: 5px 11px !important;
  font-size: 0.8125rem !important;
  transition: background-color var(--m-transition), border-color var(--m-transition);
}

.pagination > li > a:hover {
  background-color: #f3f4f6 !important;
  border-color: #9ca3af !important;
}

.pagination > .active > a,
.pagination > .active > span {
  background-color: #4f46e5 !important;
  border-color: #4f46e5 !important;
  color: #fff !important;
}

.pagination > li:first-child > a,
.pagination > li:first-child > span {
  border-radius: var(--m-radius-sm) 0 0 var(--m-radius-sm) !important;
}

.pagination > li:last-child > a,
.pagination > li:last-child > span {
  border-radius: 0 var(--m-radius-sm) var(--m-radius-sm) 0 !important;
}

/* ─── Tooltip ────────────────────────────────────────────────────────── */
.tooltip-inner {
  background-color: #1f2937 !important;
  border-radius: var(--m-radius-sm) !important;
  font-size: 0.75rem !important;
  padding: 5px 10px !important;
  max-width: 260px !important;
}

.tooltip.top .tooltip-arrow { border-top-color: #1f2937 !important; }
.tooltip.bottom .tooltip-arrow { border-bottom-color: #1f2937 !important; }
.tooltip.left .tooltip-arrow { border-left-color: #1f2937 !important; }
.tooltip.right .tooltip-arrow { border-right-color: #1f2937 !important; }

/* ─── Popover ────────────────────────────────────────────────────────── */
.popover {
  border: 1px solid var(--m-border) !important;
  border-radius: var(--m-radius) !important;
  box-shadow: var(--m-shadow-md) !important;
  font-size: 0.8375rem !important;
}

.popover-title {
  background: #f9fafb !important;
  border-bottom: 1px solid var(--m-border) !important;
  border-radius: var(--m-radius) var(--m-radius) 0 0 !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  padding: 10px 14px !important;
}

/* ─── Loading / Ladda buttons ────────────────────────────────────────── */
.ladda-button[data-style=expand-right] .ladda-spinner {
  right: 10px;
}

/* ─── SweetAlert modal tweaks ────────────────────────────────────────── */
.swal2-popup {
  border-radius: var(--m-radius-lg) !important;
  font-size: 0.9rem !important;
}

.swal2-confirm {
  border-radius: var(--m-radius-sm) !important;
  background-color: #4f46e5 !important;
}

.swal2-cancel {
  border-radius: var(--m-radius-sm) !important;
}

/* ─── iCheck checkboxes / radios ─────────────────────────────────────── */
.icheck-primary > input:first-child + label::before,
.icheck-primary > input:first-child + input[type="hidden"] + label::before {
  border-color: #4f46e5;
}

/* ─── Tag badges inside tables ───────────────────────────────────────── */
.label-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.5;
}

/* ─── Overflow-aware table containers ───────────────────────────────── */
.table-responsive {
  border-radius: var(--m-radius) !important;
  border: 1px solid var(--m-border) !important;
  overflow: hidden;
}

/* ─── Mobile responsive overrides ───────────────────────────────────── */
@media (max-width: 767px) {
  section.content {
    padding: 12px !important;
  }

  .box-body,
  .panel-body {
    padding: 12px !important;
  }

  .modal-dialog {
    margin: 10px !important;
  }

  .modal-content {
    border-radius: var(--m-radius) !important;
  }

  .btn {
    font-size: 0.8125rem !important;
  }
}

/* ─── Transition for collapse panels ────────────────────────────────── */
.panel-collapse {
  transition: height 200ms ease !important;
}

/* ══════════════════════════════════════════════════════════════════════
   PHASE 5–8 — List views, Reports, Settings, Admin UI
   ══════════════════════════════════════════════════════════════════════ */

/* ─── Report filter row wrapper (class added per view when needed) ────── */
.m-filter-row {
  background: #fff;
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow-sm);
  padding: 14px 16px;
  margin-bottom: 16px;
}

/* bg-light-blue input-group-addon (used in several report filter rows) */
.input-group-addon.bg-light-blue,
.input-group-addon.bg-aqua {
  background-color: #eff6ff !important;
  border-color: #d1d5db !important;
  color: #2563eb !important;
}

/* DaisyUI btn classes used in filter rows */
.tw-dw-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 14px !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  border-radius: var(--m-radius-sm) !important;
  cursor: pointer !important;
  border: 1px solid transparent !important;
  transition: background-color var(--m-transition), border-color var(--m-transition) !important;
  text-decoration: none !important;
}

.tw-dw-btn-primary {
  background-color: #4f46e5 !important;
  border-color: #4f46e5 !important;
  color: #fff !important;
}

.tw-dw-btn-primary:hover {
  background-color: #4338ca !important;
  border-color: #4338ca !important;
  color: #fff !important;
}

.tw-dw-btn-sm {
  padding: 5px 10px !important;
  font-size: 0.75rem !important;
}

/* ─── nav-tabs-custom (AdminLTE — used in profit_loss, etc.) ─────────── */
.nav-tabs-custom {
  background: #fff !important;
  border: 1px solid var(--m-border) !important;
  border-radius: var(--m-radius) !important;
  box-shadow: var(--m-shadow-sm) !important;
  margin-bottom: 16px;
}

.nav-tabs-custom > .nav-tabs {
  border-bottom: 2px solid var(--m-border) !important;
  background: #f8fafc !important;
  border-radius: var(--m-radius) var(--m-radius) 0 0 !important;
  padding: 0 12px !important;
  margin: 0 !important;
}

.nav-tabs-custom > .nav-tabs > li > a {
  border: none !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px !important;
  border-radius: 0 !important;
  padding: 10px 14px !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  color: var(--m-text-muted) !important;
  background: transparent !important;
  transition: color var(--m-transition), border-color var(--m-transition);
}

.nav-tabs-custom > .nav-tabs > li.active > a,
.nav-tabs-custom > .nav-tabs > li.active > a:focus,
.nav-tabs-custom > .nav-tabs > li.active > a:hover {
  border-bottom: 2px solid #4f46e5 !important;
  color: #4f46e5 !important;
  background: transparent !important;
}

.nav-tabs-custom > .nav-tabs > li > a:hover {
  color: var(--m-text) !important;
  border-bottom-color: #d1d5db !important;
}

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

/* ─── Bootstrap list-group (business settings tab menu) ─────────────── */
.list-group {
  border-radius: var(--m-radius) !important;
  overflow: hidden;
  border: 1px solid var(--m-border) !important;
  box-shadow: var(--m-shadow-sm);
}

.list-group-item {
  background: #fff !important;
  border: none !important;
  border-bottom: 1px solid var(--m-border) !important;
  padding: 10px 14px !important;
  font-size: 0.8125rem !important;
  color: #374151 !important;
  cursor: pointer;
  transition: background-color var(--m-transition), color var(--m-transition);
}

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

.list-group-item:hover {
  background-color: #f3f4f6 !important;
  color: var(--m-text) !important;
}

.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
  background-color: #ede9fe !important;
  color: #4f46e5 !important;
  font-weight: 600 !important;
  border-left: 3px solid #4f46e5 !important;
}

[dir="rtl"] .list-group-item.active {
  border-left: none !important;
  border-right: 3px solid #4f46e5 !important;
}

/* ─── pos-tab-container layout (business settings) ───────────────────── */
/* The settings page uses a two-column layout:
   left: .pos-tab-menu (list-group nav), right: .pos-tab (content panels) */
.pos-tab-container .box-header {
  display: none !important; /* settings widget has no title, no empty header */
}

.pos-tab-container .box-body {
  padding: 0 !important;
}

.pos-tab-menu {
  padding: 12px !important;
}

.pos-tab {
  padding: 20px !important;
  border-left: 1px solid var(--m-border);
}

[dir="rtl"] .pos-tab {
  border-left: none !important;
  border-right: 1px solid var(--m-border) !important;
}

/* ─── Horizontal forms (.form-horizontal) ───────────────────────────── */
.form-horizontal .control-label {
  color: #374151 !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  padding-top: 8px !important;
}

.help-block {
  color: var(--m-text-muted) !important;
  font-size: 0.775rem !important;
  margin-top: 3px !important;
  line-height: 1.4;
}

.has-error .form-control {
  border-color: #dc2626 !important;
}

.has-error .help-block,
.has-error .control-label {
  color: #dc2626 !important;
}

.has-success .form-control {
  border-color: #16a34a !important;
}

/* ─── Section headings inside settings tabs ──────────────────────────── */
.settings-heading,
.pos-tab h3.box-title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--m-text) !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid var(--m-border) !important;
  margin-bottom: 20px !important;
}

/* ─── Bootstrap progress bars ────────────────────────────────────────── */
.progress {
  background-color: #f1f5f9 !important;
  border-radius: 9999px !important;
  height: 8px !important;
  box-shadow: none !important;
}

.progress-bar {
  border-radius: 9999px !important;
}

.progress-bar-success { background-color: #16a34a !important; }
.progress-bar-danger  { background-color: #dc2626 !important; }
.progress-bar-warning { background-color: #d97706 !important; }
.progress-bar-info    { background-color: #0891b2 !important; }

/* ─── jvectormap / Highcharts containers ─────────────────────────────── */
.jvectormap-container {
  border-radius: var(--m-radius-sm) !important;
  overflow: hidden;
}

/* ─── Image upload / file preview ───────────────────────────────────── */
.dropzone {
  background: #f8fafc !important;
  border: 2px dashed #d1d5db !important;
  border-radius: var(--m-radius) !important;
  transition: border-color var(--m-transition), background-color var(--m-transition);
}

.dropzone:hover {
  border-color: #6366f1 !important;
  background: #f5f3ff !important;
}

.dropzone .dz-message {
  font-size: 0.875rem !important;
  color: var(--m-text-muted) !important;
}

/* ─── TinyMCE toolbar ────────────────────────────────────────────────── */
.tox-tinymce {
  border: 1px solid #d1d5db !important;
  border-radius: var(--m-radius-sm) !important;
}

/* ─── Fullscreen toggle button ───────────────────────────────────────── */
#btn_fullscreen {
  transition: color var(--m-transition);
}

/* ─── DataTable row-level action buttons inside tables ──────────────── */
.table .btn-xs {
  padding: 2px 7px !important;
  font-size: 0.7rem !important;
  border-radius: 4px !important;
}

/* ─── Print section ──────────────────────────────────────────────────── */
.print_section {
  display: none;
}

@media print {
  .print_section {
    display: block !important;
  }
  .no-print {
    display: none !important;
  }
}

/* ─── Module sub-navbars (Superadmin, Zatca, etc.) ───────────────────── */
/* Bootstrap navbar-toggle inside Tailwind nav — ensure consistent sizing */
.navbar-toggle {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 6px 8px;
  cursor: pointer;
}

.navbar-toggle:hover {
  background: #f3f4f6;
}

/* Module nav collapse works at any viewport */
@media (min-width: 768px) {
  #zatca-nav-links,
  #superadmin-nav-links {
    display: block !important;
  }
}

/* ─── Bootstrap .row overflow fix ───────────────────────────────────────────
   Bootstrap .row has margin: 0 -15px which causes content to bleed 15px
   beyond the container on each side. We tighten this to 0/-8px everywhere
   so it stays within card/box padding. The body { overflow-x: hidden } rule
   above prevents any residual bleed from causing a visible horizontal scroll
   or layout shift, without creating a clipping context on any descendant. */

/* Tighten Bootstrap .row margins for all main-content containers
   (box-body/panel-body already set to -8px in the rules above) */
.content-wrapper > .row,
section.content > .row,
.tab-content > .tab-pane > .row,
.box > .box-body > .row,
.widget-container > .row {
  margin-left: -8px !important;
  margin-right: -8px !important;
}

.content-wrapper > .row > [class*="col-"],
section.content > .row > [class*="col-"],
.tab-content > .tab-pane > .row > [class*="col-"] {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

/* ─── Dashboard Sidebar Redesign (Modernized Layer) ─────────────────── */

:root {
  /* Default: Modern Premium Light Sidebar */
  --sidebar-bg: #ffffff;
  --sidebar-text: #4b5563; /* gray-600 */
  --sidebar-text-bright: #111827; /* gray-900 */
  --sidebar-hover-bg: #f3f4f6; /* gray-100 */
  --sidebar-hover-text: #111827;
  --sidebar-active-bg: #004ede; /* Vibrant royal blue */
  --sidebar-active-text: #ffffff;
  --sidebar-border: #f3f4f6; /* very soft border */
  --sidebar-icon: #9ca3af;
  --sidebar-active-icon: #ffffff;
  --sidebar-submenu-line: #e5e7eb;

  /* POS theme tokens - default light */
  --pos-header-bg: #ffffff;
  --pos-header-text: #4b5563;
  --pos-header-text-bright: #1f2937;
  --pos-header-border: #f3f4f6;
  --pos-btn-bg: #ffffff;
  --pos-btn-text: #4b5563;
  --pos-btn-hover-bg: #f9fafb;
  --pos-btn-border: #e5e7eb;
  --pos-payable-color: #15803d;
  --pos-checkout-multipay-bg: #001f3e;
  --pos-checkout-multipay-text: #ffffff;
}

/* Theme Variant: Dark Slate (Modern Dark) */
body.skin-slate {
  --sidebar-bg: #111827; /* deep rich charcoal */
  --sidebar-text: #9ca3af;
  --sidebar-text-bright: #ffffff;
  --sidebar-hover-bg: #1f2937;
  --sidebar-hover-text: #ffffff;
  --sidebar-active-bg: #004ede;
  --sidebar-active-text: #ffffff;
  --sidebar-border: #1f2937;
  --sidebar-icon: #6b7280;
  --sidebar-active-icon: #ffffff;
  --sidebar-submenu-line: #374151;

  /* POS theme tokens - dark slate */
  --pos-header-bg: #111827;
  --pos-header-text: #9ca3af;
  --pos-header-text-bright: #ffffff;
  --pos-header-border: #1f2937;
  --pos-btn-bg: #1f2937;
  --pos-btn-text: #e5e7eb;
  --pos-btn-hover-bg: #374151;
  --pos-btn-border: #374151;
  --pos-payable-color: #34d399;
  --pos-checkout-multipay-bg: #004ede;
  --pos-checkout-multipay-text: #ffffff;
}

/* Theme Variant: Dark Blue (Royal/Primary Blue) */
body.skin-primary,
body.skin-indigo,
body.skin-violet {
  --sidebar-bg: #004ede; /* royal blue */
  --sidebar-text: rgba(255, 255, 255, 0.75);
  --sidebar-text-bright: #ffffff;
  --sidebar-hover-bg: rgba(255, 255, 255, 0.1);
  --sidebar-hover-text: #ffffff;
  --sidebar-active-bg: #ffffff;
  --sidebar-active-text: #004ede;
  --sidebar-border: rgba(255, 255, 255, 0.12);
  --sidebar-icon: rgba(255, 255, 255, 0.7);
  --sidebar-active-icon: #004ede;
  --sidebar-submenu-line: rgba(255, 255, 255, 0.2);

  /* POS theme tokens - royal blue */
  --pos-header-bg: #004ede;
  --pos-header-text: rgba(255, 255, 255, 0.8);
  --pos-header-text-bright: #ffffff;
  --pos-header-border: rgba(255, 255, 255, 0.15);
  --pos-btn-bg: rgba(255, 255, 255, 0.12);
  --pos-btn-text: #ffffff;
  --pos-btn-hover-bg: rgba(255, 255, 255, 0.22);
  --pos-btn-border: rgba(255, 255, 255, 0.18);
  --pos-payable-color: #34d399;
  --pos-checkout-multipay-bg: #ffffff;
  --pos-checkout-multipay-text: #004ede;
}

/* Custom Active Accent overrides for other light skins */
body.skin-purple { --sidebar-active-bg: #7c3aed; }
body.skin-green { --sidebar-active-bg: #16a34a; }
body.skin-red { --sidebar-active-bg: #dc2626; }
body.skin-yellow { --sidebar-active-bg: #ca8a04; }
body.skin-orange { --sidebar-active-bg: #ea580c; }
body.skin-sky { --sidebar-active-bg: #0284c7; }
body.skin-teal { --sidebar-active-bg: #0d9488; }

/* ─── Sidebar Containers ────────────────────────────────────────────── */
.side-bar {
  background-color: var(--sidebar-bg) !important;
  border-right: 1px solid var(--sidebar-border) !important;
  box-shadow: none !important;
  transition: background-color var(--m-transition), border-color var(--m-transition);
}

@media (min-width: 992px) {
  .side-bar {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
  }
  body.sidebar-collapse .side-bar,
  .side-bar.sidebar-collapsed,
  .side-bar.desktop-collapsed {
    display: none !important;
  }
}

@media (max-width: 991.98px) {
  .side-bar {
    display: none !important;
  }
  .side-bar.small-view-side-active {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: auto !important;
    height: 100vh !important;
    width: 16rem !important;
    z-index: 1050 !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3) !important;
  }
  html[dir="rtl"] .side-bar.small-view-side-active {
    left: auto !important;
    right: 0 !important;
  }
}

#side-bar {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  background-color: var(--sidebar-bg) !important;
  border-right: none !important;
  padding: 0.75rem 1rem !important;
  gap: 0.375rem !important;
  overflow-y: auto !important;
}

/* macOS Window Controls */
.sidebar-window-controls {
  background-color: var(--sidebar-bg);
  transition: background-color var(--m-transition);
}

.sidebar-logo-container {
  background-color: var(--sidebar-bg) !important;
  border-right: none !important;
  border-bottom: 1px solid var(--sidebar-border) !important;
  padding: 0.5rem 1rem !important;
  height: 4.5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: background-color var(--m-transition), border-color var(--m-transition);
}

.sidebar-logo-container p {
  color: var(--sidebar-text-bright) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  margin: 0 !important;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ─── Menu Links ────────────────────────────────────────────────────── */
#side-bar .sidebar-link {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 0.625rem 0.875rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--sidebar-text) !important;
  border-radius: var(--m-radius) !important;
  text-decoration: none !important;
  transition: background-color var(--m-transition), color var(--m-transition), transform 0.1s ease;
  white-space: nowrap !important;
  cursor: pointer;
}

#side-bar .sidebar-link:hover {
  background-color: var(--sidebar-hover-bg) !important;
  color: var(--sidebar-hover-text) !important;
}

#side-bar .sidebar-link:active {
  transform: scale(0.98);
}

/* Menu Icons */
#side-bar .sidebar-link i,
#side-bar .sidebar-link svg {
  color: var(--sidebar-icon) !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  font-size: 1.15rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: color var(--m-transition);
  flex-shrink: 0;
}

/* Chevron/SVG Caret indicator */
#side-bar .sidebar-link svg.svg {
  margin-left: auto !important;
  color: var(--sidebar-icon) !important;
  opacity: 0.8;
}

/* Active State for Menu Items */
#side-bar .sidebar-link.active,
#side-bar div.active-child > .sidebar-link {
  background-color: var(--sidebar-active-bg) !important;
  color: var(--sidebar-active-text) !important;
}

#side-bar .sidebar-link.active i,
#side-bar .sidebar-link.active svg,
#side-bar div.active-child > .sidebar-link i,
#side-bar div.active-child > .sidebar-link svg {
  color: var(--sidebar-active-icon) !important;
}

/* ─── Submenu Styling ───────────────────────────────────────────────── */
#side-bar .chiled {
  margin-top: 0.25rem !important;
  margin-bottom: 0.5rem !important;
  padding-left: 2.375rem !important;
  position: relative !important;
}

/* Tree timeline line indicator */
#side-bar .chiled::before {
  content: '' !important;
  position: absolute !important;
  left: 1.375rem !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 1.5px !important;
  background-color: var(--sidebar-submenu-line) !important;
  opacity: 0.7;
}

#side-bar .sidebar-submenu-link {
  display: flex !important;
  align-items: center !important;
  gap: 0.625rem !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  color: var(--sidebar-text) !important;
  text-decoration: none !important;
  transition: background-color var(--m-transition), color var(--m-transition);
  border-radius: var(--m-radius-sm) !important;
  white-space: nowrap !important;
}

#side-bar .sidebar-submenu-link:hover {
  background-color: var(--sidebar-hover-bg) !important;
  color: var(--sidebar-hover-text) !important;
}

#side-bar .sidebar-submenu-link.active {
  color: var(--sidebar-active-bg) !important;
  font-weight: 600 !important;
}

/* Adjust submenu link color for dark background themes */
body.skin-slate #side-bar .sidebar-submenu-link.active,
body.skin-primary #side-bar .sidebar-submenu-link.active,
body.skin-indigo #side-bar .sidebar-submenu-link.active,
body.skin-violet #side-bar .sidebar-submenu-link.active {
  color: #ffffff !important;
}

/* Submenu Icons */
#side-bar .sidebar-submenu-link i,
#side-bar .sidebar-submenu-link svg {
  font-size: 0.95rem !important;
  color: var(--sidebar-icon) !important;
  opacity: 0.7;
}

/* ─── Bottom Alignment & Divider ────────────────────────────────────── */
#side-bar .sidebar-bottom-start {
  margin-top: auto !important;
  padding-top: 1.25rem !important;
  position: relative !important;
}

#side-bar .sidebar-bottom-start::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0.5rem !important;
  right: 0.5rem !important;
  height: 1px !important;
  background-color: var(--sidebar-border) !important;
  display: block !important;
}

/* In case it is inside a dropdown parent block */
#side-bar div.sidebar-bottom-start {
  margin-top: auto !important;
  padding-top: 1.25rem !important;
  position: relative !important;
}

#side-bar div.sidebar-bottom-start::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0.5rem !important;
  right: 0.5rem !important;
  height: 1px !important;
  background-color: var(--sidebar-border) !important;
  display: block !important;
}

/* Custom Scrollbar for Sidebar */
#side-bar::-webkit-scrollbar {
  width: 5px;
}
#side-bar::-webkit-scrollbar-track {
  background: transparent;
}
#side-bar::-webkit-scrollbar-thumb {
  background: var(--sidebar-border);
  border-radius: 10px;
}
#side-bar::-webkit-scrollbar-thumb:hover {
  background: var(--sidebar-icon);
}

/* ─── POS Screen Redesign (Dynamic Theme Integration) ──────────────── */

/* POS Header Bar styling */
.pos-header > div {
  background-color: var(--pos-header-bg) !important;
  border-bottom: 1px solid var(--pos-header-border) !important;
  color: var(--pos-header-text) !important;
  box-shadow: var(--m-shadow) !important;
  transition: background-color var(--m-transition), border-color var(--m-transition), color var(--m-transition);
}

/* POS Header text, icons and labels */
.pos-header strong,
.pos-header p,
.pos-header span,
.pos-header label,
.pos-header div {
  color: var(--pos-header-text-bright) !important;
}

/* POS Header buttons */
.pos-header a,
.pos-header button {
  background-color: var(--pos-btn-bg) !important;
  color: var(--pos-btn-text) !important;
  border: 1px solid var(--pos-btn-border) !important;
  box-shadow: none !important;
  transition: background-color var(--m-transition), color var(--m-transition), border-color var(--m-transition);
}

.pos-header a:hover,
.pos-header button:hover {
  background-color: var(--pos-btn-hover-bg) !important;
  color: var(--pos-btn-text) !important;
}

/* POS Date Badge container override */
.pos-header div.curr_datetime {
  background-color: var(--pos-btn-bg) !important;
  border: 1px solid var(--pos-btn-border) !important;
}

.pos-header div.curr_datetime span,
.pos-header div.curr_datetime i {
  color: var(--pos-btn-text) !important;
}

/* POS Bottom Form Actions bar */
.pos-form-actions {
  background-color: var(--pos-header-bg) !important;
  border-top: 1px solid var(--pos-header-border) !important;
  color: var(--pos-header-text) !important;
  box-shadow: 0 -4px 16px rgba(17, 17, 26, 0.08) !important;
  transition: background-color var(--m-transition), border-color var(--m-transition), color var(--m-transition);
}

/* Text elements inside bottom area */
.pos-form-actions strong,
.pos-form-actions span.text,
.pos-form-actions div.tw-text-black {
  color: var(--pos-header-text-bright) !important;
}

/* Bottom action buttons (Draft, Quotation, Suspend, Credit, Card) */
.pos-form-actions button {
  color: var(--pos-header-text) !important;
  transition: color var(--m-transition), transform 0.1s ease;
}

.pos-form-actions button:hover {
  color: var(--pos-header-text-bright) !important;
}

.pos-form-actions button:active {
  transform: scale(0.96);
}

/* Icons inside the bottom action buttons */
.pos-form-actions button i {
  transition: transform var(--m-transition);
}

.pos-form-actions button:hover i {
  transform: translateY(-2px);
}

/* Payable Total Block */
.pos-total {
  border-left: 2px solid var(--pos-header-border) !important;
  padding-left: 1.5rem !important;
}

.pos-total .number {
  color: var(--pos-payable-color) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  transition: color var(--m-transition);
}

/* Checkout / Pay buttons */
#pos-finalize {
  background-color: var(--pos-checkout-multipay-bg) !important;
  color: var(--pos-checkout-multipay-text) !important;
  border: 1px solid transparent !important;
  font-weight: 700 !important;
  transition: opacity var(--m-transition), transform 0.1s ease;
}

#pos-finalize:hover {
  opacity: 0.9;
}

#pos-finalize:active {
  transform: scale(0.97);
}

/* Express cash and cancel buttons */
.pos-express-finalize[data-pay_method="cash"] {
  background-color: #10b981 !important; /* emerald-500 */
  color: #ffffff !important;
}
.pos-express-finalize[data-pay_method="cash"]:hover {
  background-color: #059669 !important; /* emerald-600 */
}
.pos-express-finalize[data-pay_method="cash"] i {
  color: #ffffff !important;
}

#pos-cancel {
  background-color: #ef4444 !important; /* red-500 */
  color: #ffffff !important;
}
#pos-cancel:hover {
  background-color: #dc2626 !important; /* red-600 */
}
#pos-cancel i {
  color: #ffffff !important;
}

#recent-transactions {
  color: #ffffff !important;
}
#recent-transactions i {
  color: #ffffff !important;
}

/* ─── POS Categories Adaptation ─────────────────────────────────────── */
.category-item div {
  background: var(--pos-btn-bg) !important;
  border-color: var(--pos-btn-border) !important;
  color: var(--pos-btn-text) !important;
  transition: all var(--m-transition);
}

.category-item:hover div {
  background-color: var(--pos-btn-hover-bg) !important;
  border-color: var(--sidebar-active-bg) !important;
}

.category-item-text {
  color: var(--pos-btn-text) !important;
}

.category-item:hover .category-item-text {
  color: var(--pos-header-text-bright) !important;
}

/* Active POS category selection */
.category-active > div {
  border-color: var(--sidebar-active-bg) !important;
  background: var(--sidebar-active-bg) !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.18) !important;
}

.category-active .category-text {
  color: var(--sidebar-active-text) !important;
}

.category-active .category-icon {
  stroke: var(--sidebar-active-text) !important;
  color: var(--sidebar-active-text) !important;
}

/* Card wrappers, categories box, product grid wrapper */
.pos_form,
#product_category_div {
  background-color: var(--pos-header-bg) !important;
  border: 1px solid var(--pos-header-border) !important;
  color: var(--pos-header-text-bright) !important;
  transition: background-color var(--m-transition), border-color var(--m-transition);
}

#product_list_body .product_box {
  background-color: var(--pos-btn-bg) !important;
  border: 1px solid var(--pos-btn-border) !important;
  color: var(--pos-btn-text) !important;
  transition: all var(--m-transition);
}

#product_list_body .product_box:hover {
  border-color: var(--sidebar-active-bg) !important;
  background-color: var(--pos-btn-hover-bg) !important;
  transform: translateY(-1px);
}

/* POS Totals Area Buttons (Cost Price, Edit Discount, Tax, Shipping) */
.pos_form_totals button.tw-dw-btn,
.pos_form_totals .tw-dw-btn-outline {
  background-color: var(--sidebar-active-bg) !important;
  color: var(--sidebar-active-text) !important;
  border: 1px solid transparent !important;
  font-weight: 600 !important;
  opacity: 0.95;
  transition: all var(--m-transition);
}

.pos_form_totals button.tw-dw-btn:hover,
.pos_form_totals .tw-dw-btn-outline:hover {
  opacity: 1;
  background-color: var(--sidebar-active-bg) !important;
  color: var(--sidebar-active-text) !important;
  transform: translateY(-1px);
  box-shadow: var(--m-shadow-sm) !important;
}

.pos_form_totals button.tw-dw-btn i,
.pos_form_totals .tw-dw-btn-outline i {
  color: var(--sidebar-active-text) !important;
}

/* ─── Superadmin & DataTables Responsive Polish ─────────────────────── */
.table-responsive,
.dataTables_wrapper,
.dataTables_scrollBody,
.box-body,
.panel-body {
  overflow: visible !important;
  width: 100% !important;
  margin-bottom: 1rem;
}

@media (max-width: 767.98px) {
  .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

.superadmin-table-container {
  width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  margin-bottom: 1rem;
  border-radius: var(--m-radius);
  border: 1px solid #e2e8f0;
}

/* Dynamically prevent clipping when a dropdown is open inside tables */
.table-responsive:has(.open),
.dataTables_wrapper:has(.open),
.dataTables_scrollBody:has(.open),
.superadmin-table-container:has(.open),
.box-body:has(.open),
.widget:has(.open) {
  overflow: visible !important;
}

/* Force dropdown menu display and high z-index when open */
.btn-group.open > .dropdown-menu,
.dropdown.open > .dropdown-menu,
.open > .dropdown-menu {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 9999 !important;
}

/* Fix dropdown menu position and styling inside tables */
.table .dropdown-menu,
.table-responsive .dropdown-menu,
.superadmin-table-container .dropdown-menu {
  z-index: 9999 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 6px 0 !important;
  min-width: 140px !important;
  background-color: #ffffff !important;
}

.table .dropdown-menu > li > a,
.table-responsive .dropdown-menu > li > a {
  padding: 8px 16px !important;
  font-size: 13px !important;
  color: #334155 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
}

.table .dropdown-menu > li > a:hover,
.table-responsive .dropdown-menu > li > a:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

#superadmin_business_table,
#superadmin_subscription_table {
  min-width: 1600px !important;
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

#superadmin_business_table th,
#superadmin_subscription_table th {
  background-color: #f8fafc !important;
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  border-bottom: 2px solid #cbd5e1 !important;
  border-top: none !important;
  vertical-align: middle !important;
  padding: 12px 14px !important;
  white-space: nowrap !important;
}

#superadmin_business_table td,
#superadmin_subscription_table td {
  vertical-align: middle !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  color: #1e293b !important;
  border-bottom: 1px solid #f1f5f9 !important;
  white-space: nowrap !important;
}

#superadmin_business_table tr:hover td,
#superadmin_subscription_table tr:hover td {
  background-color: #f8fafc !important;
}

/* DataTables Controls & Buttons Polish */
.dataTables_wrapper .dataTables_length select {
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
  font-size: 13px !important;
}

.dataTables_wrapper .dataTables_filter input {
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  padding: 5px 10px !important;
  font-size: 13px !important;
  margin-left: 8px !important;
}

.dataTables_wrapper .dt-buttons {
  margin-bottom: 12px !important;
}

.dataTables_wrapper .dt-button,
.dataTables_wrapper .buttons-csv,
.dataTables_wrapper .buttons-excel,
.dataTables_wrapper .buttons-pdf,
.dataTables_wrapper .buttons-print,
.dataTables_wrapper .buttons-collection {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 5px 12px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
  transition: all 0.15s ease !important;
}

.dataTables_wrapper .dt-button:hover {
  background: #f8fafc !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}

/* Action dropdown and buttons in table */
#superadmin_business_table .btn-group,
#superadmin_business_table .btn-xs,
#superadmin_business_table .btn-sm,
#superadmin_subscription_table .btn-group,
#superadmin_subscription_table .btn-xs,
#superadmin_subscription_table .btn-sm {
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 10px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
}

/* ─── Print Styles Override ─────────────────────────────────────────── */
@media print {
  .no-print,
  .side-bar,
  #side-bar,
  .sidebar-window-controls,
  .sidebar-logo-container {
    display: none !important;
  }
}