/* POS in Bangladesh modern UI compatibility layer for Bootstrap 3/AdminLTE. */
:root {
  --wl-primary: #059669;
  --wl-primary-hover: #047857;
  --wl-primary-soft: #ecfdf5;
  --wl-ink: #0f172a;
  --wl-sidebar: #111827;
  --wl-sidebar-hover: #1f2937;
  --wl-page: #f8fafc;
  --wl-surface: #ffffff;
  --wl-surface-muted: #f1f5f9;
  --wl-border: #e2e8f0;
  --wl-text: #1e293b;
  --wl-muted: #64748b;
  --wl-info: #2563eb;
  --wl-warning: #d97706;
  --wl-danger: #e11d48;
  --wl-radius: 12px;
  --wl-radius-sm: 8px;
  --wl-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.05);
  --wl-focus: 0 0 0 3px rgba(5,150,105,.18);
}

html, body { background: var(--wl-page); }
body {
  color: var(--wl-text);
  font-family: Inter, "Noto Sans Bengali", "Hind Siliguri", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
}
a { color: var(--wl-primary); }
a:hover, a:focus { color: var(--wl-primary-hover); }
:focus-visible { outline: 2px solid var(--wl-primary); outline-offset: 2px; }

/* Application shell */
.main-header .navbar,
.skin-blue-light .main-header .navbar,
.skin-blue .main-header .navbar {
  background: rgba(255,255,255,.98) !important;
  border-bottom: 1px solid var(--wl-border);
  box-shadow: 0 1px 3px rgba(15,23,42,.04);
}
.main-header .logo,
.skin-blue-light .main-header .logo,
.skin-blue .main-header .logo {
  background: #fff !important;
  color: var(--wl-ink) !important;
  border: 0 !important;
  border-right: 1px solid var(--wl-border) !important;
  border-bottom: 1px solid var(--wl-border) !important;
  font-weight: 700;
  letter-spacing: -.01em;
}
.main-header .navbar > .sidebar-toggle,
.main-header .navbar .nav > li > a,
.main-header .navbar-custom-menu .navbar-nav > li > a { color: var(--wl-text) !important; }
.main-header .navbar > .sidebar-toggle:hover,
.main-header .navbar .nav > li > a:hover { background: var(--wl-surface-muted) !important; color: var(--wl-ink) !important; }
.main-sidebar, .left-side {
  background: #f8fafc !important;
  border-right: 1px solid var(--wl-border);
  box-shadow: 4px 0 18px rgba(15,23,42,.035);
}
.sidebar { padding: 12px 8px 24px; }
.sidebar .logo {
  background: transparent !important;
  color: var(--wl-ink) !important;
  font-weight: 700;
  margin-bottom: 8px;
  text-align: left;
}
.sidebar-menu > li > a {
  align-items: center;
  background: #fff !important;
  border: 1px solid var(--wl-border) !important;
  border-radius: 11px;
  box-shadow: 0 1px 2px rgba(15,23,42,.025);
  color: #334155 !important;
  display: flex;
  margin: 6px 4px;
  min-height: 46px;
  padding: 10px 12px;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease, transform .15s ease;
}
.sidebar-menu > li > a:hover,
.sidebar-menu > li.active > a,
.sidebar-menu > li.menu-open > a {
  background: var(--wl-primary-soft) !important;
  border-color: #a7f3d0 !important;
  box-shadow: 0 4px 12px rgba(5,150,105,.08) !important;
  color: #065f46 !important;
  transform: translateY(-1px);
}
.sidebar-menu > li.active > a { box-shadow: inset 3px 0 0 var(--wl-primary), 0 4px 12px rgba(5,150,105,.08) !important; }
.sidebar-menu > li > a > i,
.sidebar-menu > li > a > .fa,
.sidebar-menu > li > a > .fas,
.sidebar-menu > li > a > .far,
.sidebar-menu > li > a > .fab {
  align-items: center;
  background: #f0fdf9;
  border: 1px solid #d1fae5;
  border-radius: 8px;
  color: var(--wl-primary) !important;
  display: inline-flex;
  flex: 0 0 30px;
  height: 30px;
  justify-content: center;
  margin-right: 10px;
  text-align: center;
  width: 30px;
}
.sidebar-menu > li > a > span:not(.pull-right-container) { flex: 1 1 auto; }
.sidebar-menu > li > a .pull-right-container,
.sidebar-menu > li > a > .pull-right { color: #94a3b8; margin-left: auto; }
.sidebar-menu .treeview-menu {
  background: transparent !important;
  margin: 2px 4px 8px 16px;
  padding: 3px 0 3px 12px;
  position: relative;
}
.sidebar-menu .treeview-menu::before {
  background: #dbe5e1;
  border-radius: 4px;
  bottom: 8px;
  content: "";
  left: 0;
  position: absolute;
  top: 8px;
  width: 2px;
}
.sidebar-menu .treeview-menu > li > a {
  align-items: center;
  background: transparent !important;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #475569 !important;
  display: flex;
  font-size: 13px !important;
  margin: 3px 0;
  min-height: 38px;
  padding: 8px 10px !important;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.sidebar-menu .treeview-menu > li.active > a,
.sidebar-menu .treeview-menu > li > a:hover {
  background: #fff !important;
  border-color: var(--wl-border);
  color: #065f46 !important;
  box-shadow: 0 2px 8px rgba(15,23,42,.04);
}
.sidebar-menu .treeview-menu > li.active > a {
  background: var(--wl-primary-soft) !important;
  border-color: #d1fae5;
  color: #047857 !important;
  font-weight: 650;
}
.sidebar-menu .treeview-menu > li > a > i,
.sidebar-menu .treeview-menu > li > a > .fa,
.sidebar-menu .treeview-menu > li > a > .fas {
  color: #10b981 !important;
  font-size: 11px;
  margin-right: 8px;
  width: 15px;
}
.sidebar-menu li.header {
  background: transparent !important;
  color: #94a3b8 !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 18px 12px 6px;
  text-transform: uppercase;
}
.sidebar-menu .treeview-menu .treeview-menu {
  margin-left: 10px;
  padding-left: 10px;
}
.treeview-menu a::before { content: none !important; }
.content-wrapper { background: var(--wl-page) !important; }

/* Page hierarchy */
.content-header { padding: 24px 24px 10px; }
.content-header > h1 { color: var(--wl-ink); font-size: 24px; font-weight: 700; letter-spacing: -.025em; }
.content-header > h1 > small { color: var(--wl-muted); font-size: 14px; margin-left: 6px; }
.content { padding: 14px 24px 28px; }

/* Dashboard heading and date control share a single aligned row. */
.dashboard-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.dashboard-header-row > h1 { margin: 0; }
.dashboard-date-filter { flex: 0 0 auto; }
.dashboard-location-filter { margin-bottom: 16px; }

@media (max-width: 767px) {
  .dashboard-header-row { align-items: flex-start; flex-direction: column; }
  .dashboard-date-filter { width: 100%; }
  .dashboard-date-filter .btn { width: 100%; }
}
/* Cards */
.box, .info-box, .nav-tabs-custom, .modal-content, .dropdown-menu {
  background: var(--wl-surface);
  border: 1px solid var(--wl-border) !important;
  border-radius: var(--wl-radius) !important;
  box-shadow: var(--wl-shadow) !important;
}
.box { overflow: visible; }
.box-header { padding: 16px 18px; border-bottom: 1px solid var(--wl-border); }
.box-header .box-title { color: var(--wl-ink); font-size: 16px; font-weight: 700; }
.box-body { padding: 18px; }
.box.box-primary, .box.box-info, .box.box-warning, .box.box-success, .box.box-danger { border-top: 1px solid var(--wl-border) !important; }
.info-box { min-height: 112px; overflow: hidden; }
.info-box-icon { width: 72px; background: var(--wl-primary-soft) !important; }
.info-box-icon,
.info-box-icon > i,
.info-box-icon > .fa,
.info-box-icon > .fas,
.info-box-icon > .far,
.info-box-icon > .fab {
  color:#fff !important;
  text-shadow:0 1px 2px rgba(15,23,42,.22);
}
.info-box-content { margin-left: 72px; padding: 18px 14px; }
.info-box-text { color: var(--wl-muted); font-size: 12px; font-weight: 700; letter-spacing: .045em; text-transform: uppercase; }
.info-box-number { color: var(--wl-ink); font-size: 24px; line-height: 1.3; }

/* Buttons */
.btn {
  min-height: 38px;
  border-radius: var(--wl-radius-sm) !important;
  border-width: 1px;
  font-weight: 600;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:focus { box-shadow: var(--wl-focus); }
.btn-primary, .btn-success { background: var(--wl-primary) !important; border-color: var(--wl-primary) !important; color: #fff !important; }
.btn-primary:hover, .btn-success:hover { background: var(--wl-primary-hover) !important; border-color: var(--wl-primary-hover) !important; }
.btn-info { background: var(--wl-info) !important; border-color: var(--wl-info) !important; }
.btn-warning { background: var(--wl-warning) !important; border-color: var(--wl-warning) !important; }
.btn-danger { background: var(--wl-danger) !important; border-color: var(--wl-danger) !important; }
.btn-default { background: #fff; border-color: #cbd5e1; color: var(--wl-text); }
.btn-default:hover { background: var(--wl-surface-muted); border-color: #94a3b8; }
.btn-flat { border-radius: var(--wl-radius-sm) !important; }
.main-header .btn { min-width: 38px; }
.btn-xs { min-height: 22px; padding: 2px 8px; font-size: 11px; line-height: 1.6; }
.btn-sm { min-height: 30px; }

/* Forms */
.form-group label { color: #334155; font-size: 13px; font-weight: 600; margin-bottom: 7px; }
.form-control,
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
  min-height: 42px;
  background: #fff;
  border: 1px solid #cbd5e1 !important;
  border-radius: var(--wl-radius-sm) !important;
  box-shadow: none;
  color: var(--wl-text);
}
.form-control { padding: 9px 12px; }
.form-control:focus,
.select2-container--focus .select2-selection { border-color: var(--wl-primary) !important; box-shadow: var(--wl-focus) !important; }
.input-group-addon { background: var(--wl-surface-muted); border-color: #cbd5e1; color: var(--wl-muted); }
.search-input-group { display: flex; gap: 8px; }
.search-input-group .form-control { border-radius: var(--wl-radius-sm) !important; }
.search-input-group .input-group-btn { display: flex; width: auto; }
.search-input-group .input-group-btn > .btn { border-radius: var(--wl-radius-sm) !important; margin-left: 0; }
.help-block { color: var(--wl-muted); font-size: 12px; }
.has-error .form-control { border-color: var(--wl-danger) !important; }
.has-error .help-block { color: var(--wl-danger); }

/* Tables */
.table-responsive { border: 0; }
.table { color: var(--wl-text); }
.table > thead > tr > th {
  background: #f8fafc;
  border-bottom: 1px solid var(--wl-border) !important;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .025em;
  padding: 12px 10px;
  text-transform: uppercase;
  white-space: nowrap;
}
.table > tbody > tr > td { border-top: 1px solid #edf2f7; padding: 12px 10px; vertical-align: middle; }
.table-striped > tbody > tr:nth-of-type(odd) { background: #fbfdff; }
.table-hover > tbody > tr:hover, .table > tbody > tr:hover { background: var(--wl-primary-soft); }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select { border: 1px solid #cbd5e1; border-radius: 7px; padding: 6px 9px; }
.dataTables_wrapper .dt-buttons {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  float: none !important;
  margin: 0;
  vertical-align: middle;
}
.dataTables_wrapper .dt-buttons > .btn,
.dataTables_wrapper .dt-buttons .dt-button {
  min-height: 38px;
  margin: 0 !important;
  padding: 8px 12px;
  float: none !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: var(--wl-radius-sm) !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.04) !important;
  color: #334155 !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  text-shadow: none !important;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.dataTables_wrapper .dt-buttons > .btn:hover,
.dataTables_wrapper .dt-buttons > .btn:focus,
.dataTables_wrapper .dt-buttons .dt-button:hover,
.dataTables_wrapper .dt-buttons .dt-button:focus {
  border-color: var(--wl-primary) !important;
  background: var(--wl-primary-soft) !important;
  box-shadow: 0 4px 10px rgba(5,150,105,.12) !important;
  color: var(--wl-primary-hover) !important;
  outline: 0;
  transform: translateY(-1px);
}
.dataTables_wrapper .dt-buttons > .btn:active,
.dataTables_wrapper .dt-buttons .dt-button:active {
  box-shadow: none !important;
  transform: translateY(0);
}
.dataTables_wrapper .dt-buttons > .btn.disabled,
.dataTables_wrapper .dt-buttons > .btn.disabled:hover,
.dataTables_wrapper .dt-buttons .dt-button.disabled,
.dataTables_wrapper .dt-buttons .dt-button.disabled:hover {
  border-color: var(--wl-border) !important;
  background: var(--wl-surface-muted) !important;
  box-shadow: none !important;
  color: #94a3b8 !important;
  cursor: not-allowed;
  transform: none;
}
.dataTables_wrapper .dt-buttons > .btn > i,
.dataTables_wrapper .dt-buttons .dt-button > i { margin-right: 4px; }
.dataTables_wrapper .dt-buttons .buttons-csv > i { color: #059669; }
.dataTables_wrapper .dt-buttons .buttons-excel > i { color: #16a34a; }
.dataTables_wrapper .dt-buttons .buttons-print > i { color: #2563eb; }
.dataTables_wrapper .dt-buttons .buttons-pdf > i { color: #dc2626; }
.dataTables_wrapper .dt-buttons .buttons-colvis > i { color: #64748b; }
.pagination > li > a, .pagination > li > span { border-color: var(--wl-border); color: var(--wl-text); }
.pagination > .active > a, .pagination > .active > span { background: var(--wl-primary); border-color: var(--wl-primary); }

/* Product list stock report: keep the tab panel and its wide report table aligned. */
.product-list-tabs > .tab-content { padding: 18px; }
.product-list-tabs #product_stock_report { min-width: 0; }
.product-list-tabs .stock-report-panel {
  margin: 0;
  overflow: hidden;
  border-color: var(--wl-border) !important;
  box-shadow: none !important;
}
.product-list-tabs .stock-report-panel > .box-body { padding: 0; }
.stock-report-scroll-hint {
  align-items: center;
  background: #eef7f8;
  border-bottom: 1px solid var(--wl-border);
  color: var(--wl-text);
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  gap: 8px;
  justify-content: flex-end;
  min-height: 42px;
  padding: 8px 14px;
}
.stock-report-page-size { align-items: center; display: inline-flex; gap: 7px; margin-right: auto; }
.stock-report-page-size > span { color: #667085; font-weight: 600; }
.stock-report-page-size select { height: 30px; min-width: 72px; padding: 4px 24px 4px 8px; }
.stock-report-scroll-hint > span:first-child { color: var(--wl-primary); font-weight: 600; }
.stock-report-scroll-hint-help { color: #667085; }
.stock-report-scroll-controls { display: inline-flex; gap: 4px; margin-left: 4px; }
.stock-report-scroll-control { min-width: 28px; }
.stock-report-search { align-items: center; display: inline-flex; margin-left: 4px; position: relative; }
.stock-report-search .fa { color: #667085; left: 9px; position: absolute; }
.stock-report-search input { height: 30px; min-width: 190px; padding-left: 27px; }
.stock-report-table-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.stock-report-table-scroll > div { min-width: max-content; }
.stock-report-table-scroll .table { margin-bottom: 0; }
.stock-report-table-scroll .table > thead > tr > th,
.stock-report-table-scroll .table > tbody > tr > td,
.stock-report-table-scroll .table > tfoot > tr > td { white-space: nowrap; }
.stock-report-pagination {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 14px 18px 18px;
}
.stock-report-pagination-summary { color: #667085; font-size: 13px; }
.stock-report-pagination .pagination { margin: 0; }
@media (max-width: 767px) {
  .stock-report-scroll-hint { align-items: flex-start; flex-direction: column; }
  .stock-report-scroll-controls { margin-left: 0; }
}

/* Status and dialogs */
.label-success, .bg-green { background-color: var(--wl-primary) !important; }
.label-warning, .bg-yellow { background-color: var(--wl-warning) !important; }
.label-danger, .bg-red { background-color: var(--wl-danger) !important; }
.label-info, .bg-aqua, .bg-blue { background-color: var(--wl-info) !important; }
.label { border-radius: 999px; font-weight: 600; padding: 5px 9px; }
.shipping-status-link { display: inline-block; text-decoration: none; line-height: 1.6; }
.shipping-status-link:hover, .shipping-status-link:focus { text-decoration: none; }
.shipping-status-date { display: block; margin-top: 3px; color: var(--wl-muted); font-size: 11px; font-weight: 500; }
.total-amount-value { display: block; font-weight: 600; color: var(--wl-ink); }
.total-amount-view-btn { display: inline-block; margin-top: 4px; min-height: 25px; }
.modal-header { border-bottom: 1px solid var(--wl-border); padding: 18px 20px; }
.modal-title { color: var(--wl-ink); font-weight: 700; }
.modal-body { padding: 20px; }
.modal-footer { background: #f8fafc; border-top: 1px solid var(--wl-border); border-radius: 0 0 var(--wl-radius) var(--wl-radius); padding: 14px 20px; }
.alert { border: 1px solid transparent; border-radius: var(--wl-radius-sm); }

/* POS */
body.lockscreen { background: var(--wl-page); }
.pos-form-actions {
  background: rgba(255,255,255,.96) !important;
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--wl-border);
  box-shadow: 0 -8px 24px rgba(15,23,42,.08);
}
.pos-total span.number { color: var(--wl-ink); }
#search_product { font-size: 16px; }
#product_list_body .product_box { border-color: var(--wl-border); border-radius: 10px; transition: transform .15s ease, box-shadow .15s ease; }
#product_list_body .product_box:hover { box-shadow: var(--wl-shadow); transform: translateY(-1px); }

@media (max-width: 991px) {
  .content-header { padding: 18px 16px 8px; }
  .content { padding: 10px 16px 24px; }
  .content-header > h1 { font-size: 21px; }
  .box-body { padding: 14px; }
}
@media (max-width: 767px) {
  .main-header .logo { background: #fff !important; color: var(--wl-ink) !important; }
  .main-header .navbar { background: #fff !important; }
  .btn { min-height: 30px; }
  .dataTables_wrapper .dt-buttons { justify-content: center; width: 100%; }
  .form-control, .select2-container .select2-selection--single { min-height: 44px; }
  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pos-form-actions { bottom: 0; position: sticky !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Reference-inspired shell: restrained teal, readable navigation hierarchy. */
:root { --wl-sidebar:#164f63; --wl-sidebar-deep:#103f50; --wl-sidebar-line:rgba(211,239,242,.14); --wl-sidebar-text:#d9edf1; --wl-page:#edf6f8; --wl-primary:#22778a; --wl-primary-hover:#175c6d; --wl-primary-soft:#e1f2f1; }
.main-sidebar,.left-side { background:var(--wl-sidebar)!important; border-right:0!important; }
.main-sidebar .sidebar { background:transparent!important; padding-left:10px; padding-right:10px; }
.main-sidebar .sidebar>.logo { color:#fff!important; padding-left:13px; }
.sidebar-menu>li>a { background:transparent!important; border:1px solid transparent!important; border-radius:8px!important; box-shadow:none!important; color:var(--wl-sidebar-text)!important; margin:3px 0!important; min-height:42px; padding:8px 11px!important; transform:none!important; }
.sidebar-menu>li>a>i,.sidebar-menu>li>a>.fa,.sidebar-menu>li>a>.fas,.sidebar-menu>li>a>.far { background:rgba(222,246,245,.1)!important; border:0!important; color:#a9dde0!important; flex:0 0 27px!important; height:27px!important; margin-right:8px!important; width:27px!important; }
.sidebar-menu>li>a:hover,.sidebar-menu>li.menu-open>a { background:rgba(255,255,255,.09)!important; border-color:rgba(255,255,255,.1)!important; color:#fff!important; }
.sidebar-menu>li.active>a { background:#f3fbfb!important; border-color:#f3fbfb!important; box-shadow:0 5px 14px rgba(7,41,51,.17)!important; color:#164f63!important; }
.sidebar-menu>li.active>a>i { background:#dff2ef!important; color:#1e7887!important; }
.sidebar-menu>li>a .pull-right-container { color:#9fc7d0!important; }
.sidebar-menu>li.active>a .pull-right-container { color:#4b7883!important; }
.sidebar-menu .treeview-menu { background:var(--wl-sidebar-deep)!important; border:1px solid var(--wl-sidebar-line)!important; border-radius:8px!important; margin:4px 0 8px!important; padding:6px!important; }
.sidebar-menu .treeview-menu::before { display:none!important; }
.sidebar-menu .treeview-menu>li>a { background:transparent!important; border:0!important; border-radius:6px!important; color:#bcd8de!important; font-size:12px!important; margin:1px 0!important; min-height:34px!important; padding:7px 9px 7px 17px!important; }
.sidebar-menu .treeview-menu>li>a::before { background:#6fa6b2; border-radius:50%; content:""!important; flex:0 0 4px; height:4px; margin-right:10px; width:4px; }
.sidebar-menu .treeview-menu>li>a:hover { background:rgba(255,255,255,.075)!important; color:#fff!important; }
.sidebar-menu .treeview-menu>li.active>a { background:rgba(130,211,210,.14)!important; color:#fff!important; font-weight:600; }
.sidebar-menu .treeview-menu>li.active>a::before { background:#8ee0da; box-shadow:0 0 0 3px rgba(142,224,218,.12); }
.content-wrapper { background:var(--wl-page)!important; }
.content-header-custom { background:transparent!important; color:#173f4a!important; }
.content-header-custom h1 { color:#173f4a!important; }
.content-custom { background:transparent!important; }
.info-box,.box { border-color:#d4e4e7!important; }

/* Win against legacy saved-theme selectors. */
body.skin-blue-light .wrapper .main-sidebar,
body.skin-blue .wrapper .main-sidebar,
body[class*="skin-"] .wrapper .main-sidebar { background:#164f63!important; }
body[class*="skin-"] .main-sidebar .sidebar-menu>li>a { background:transparent!important; border-color:transparent!important; color:#d9edf1!important; }
body[class*="skin-"] .main-sidebar .sidebar-menu>li>a:hover,
body[class*="skin-"] .main-sidebar .sidebar-menu>li.menu-open>a { background:rgba(255,255,255,.09)!important; border-color:rgba(255,255,255,.1)!important; color:#fff!important; }
body[class*="skin-"] .main-sidebar .sidebar-menu>li.active>a { background:#f3fbfb!important; border-color:#f3fbfb!important; color:#164f63!important; }
body[class*="skin-"] .main-sidebar .sidebar-menu .treeview-menu { background:#103f50!important; padding:6px!important; }
body[class*="skin-"] .main-sidebar .sidebar-menu .treeview-menu>li>a { color:#c7e0e5!important; }
body[class*="skin-"] .main-sidebar .sidebar-menu .treeview-menu>li>a:hover,
body[class*="skin-"] .main-sidebar .sidebar-menu .treeview-menu>li.active>a { background:rgba(255,255,255,.09)!important; color:#fff!important; }
body[class*="skin-"] .content-wrapper .content-header.content-header-custom { background:transparent!important; padding:20px 15px 12px!important; }
body[class*="skin-"] .content-wrapper .content-header.content-header-custom h1 { color:#173f4a!important; }
body[class*="skin-"] .content-wrapper .content.content-custom { background:transparent!important; margin-top:0!important; }
/* Header date: keep the current business date distinct from the action buttons. */
.header-date-chip {
  align-items:center;
  background:#fff;
  border:1px solid #c8dadd;
  border-radius:8px;
  color:#234e59;
  display:inline-flex;
  font-size:13px;
  font-weight:700;
  gap:7px;
  height:38px;
  margin:6px 8px;
  padding:0 12px;
  white-space:nowrap;
}
.header-date-chip > i { color:#22778a; font-size:14px; }

/* Keep each sidebar icon centered inside AdminLTE's 50px collapsed rail. */
@media (min-width:768px) {
  .sidebar-mini.sidebar-collapse .main-sidebar .sidebar {
    padding-left:5px !important;
    padding-right:5px !important;
  }
  .sidebar-mini.sidebar-collapse .main-sidebar .sidebar-menu,
  .sidebar-mini.sidebar-collapse .main-sidebar .sidebar-menu > li {
    width:40px !important;
  }
  .sidebar-mini.sidebar-collapse .main-sidebar .sidebar-menu > li > a {
    align-items:center;
    box-sizing:border-box;
    justify-content:center;
    margin:5px 0 !important;
    min-height:40px !important;
    padding:4px !important;
    width:40px !important;
  }
  .sidebar-mini.sidebar-collapse .main-sidebar .sidebar-menu > li > a > i,
  .sidebar-mini.sidebar-collapse .main-sidebar .sidebar-menu > li > a > .fa,
  .sidebar-mini.sidebar-collapse .main-sidebar .sidebar-menu > li > a > .fas,
  .sidebar-mini.sidebar-collapse .main-sidebar .sidebar-menu > li > a > .far,
  .sidebar-mini.sidebar-collapse .main-sidebar .sidebar-menu > li > a > .fab {
    margin:0 !important;
  }
}

/* Collapsed tree menus are one continuous, high-contrast flyout. */
@media (min-width:768px) {
  body.sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .main-sidebar .sidebar-menu > li:hover > a > span:not(.pull-right) {
    align-items:center;
    background:#164f63 !important;
    border:1px solid rgba(211,239,242,.2);
    border-bottom:0 !important;
    border-radius:8px 8px 0 0;
    box-shadow:0 8px 20px rgba(7,41,51,.2);
    color:#fff !important;
    display:flex !important;
    height:40px;
    left:50px !important;
    margin-left:0 !important;
    padding:0 13px !important;
    top:0 !important;
    width:180px !important;
    z-index:1000;
  }
  body.sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .main-sidebar .sidebar-menu > li.treeview:hover > .treeview-menu {
    background:#103f50 !important;
    border:1px solid rgba(211,239,242,.2) !important;
    border-top:0 !important;
    border-radius:0 0 8px 8px !important;
    box-shadow:0 8px 20px rgba(7,41,51,.2);
    display:block !important;
    left:50px !important;
    margin:0 !important;
    padding:6px !important;
    position:absolute !important;
    top:40px !important;
    width:180px !important;
    z-index:999;
  }
}
/* Sidebar parent menu -> main content card grid. */
.wl-menu-hub { min-height:calc(100vh - 51px); padding:28px 30px 48px; position:relative; z-index:20; }
body.wl-menu-hub-open .content-wrapper > .content-header,
body.wl-menu-hub-open .content-wrapper > .content { display:none!important; }
.wl-menu-hub__head { align-items:flex-start; border-bottom:1px solid #dbe7ea; display:flex; justify-content:space-between; margin-bottom:26px; padding-bottom:18px; }
.wl-menu-hub__head h1 { color:#193c46; font-size:25px; font-weight:700; letter-spacing:-.025em; margin:0 0 5px; }
.wl-menu-hub__head p { color:#789097; font-size:13px; margin:0; }
.wl-menu-hub__meta { align-items:center; color:#70878e; display:flex; font-size:12px; gap:12px; padding-top:3px; }
.wl-menu-hub__close { align-items:center; background:#fff; border:1px solid #d4e3e6; border-radius:8px; color:#698189; display:inline-flex; font-size:21px; height:32px; justify-content:center; line-height:1; padding:0; width:32px; }
.wl-menu-hub__close:hover { background:#f6fafb; color:#234f5a; }
.wl-menu-hub__grid { display:grid; gap:14px; grid-template-columns:repeat(4,minmax(0,1fr)); }
.wl-menu-card { align-items:center; background:#fff; border:1px solid #d7e3e6; border-radius:12px; box-shadow:0 3px 10px rgba(24,73,87,.05); color:#263f47!important; display:flex; min-height:72px; padding:12px 15px; text-decoration:none!important; transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease; }
.wl-menu-card:hover,.wl-menu-card:focus { border-color:#8fc9ca; box-shadow:0 8px 20px rgba(24,73,87,.10); color:#164f63!important; transform:translateY(-2px); }
.wl-menu-card__icon { align-items:center; background:#eff9f7; border:1px solid #ddf0ed; border-radius:9px; color:#218173; display:inline-flex; flex:0 0 40px; font-size:16px; height:40px; justify-content:center; margin-right:13px; }
.wl-menu-card__label { font-size:13px; font-weight:600; line-height:1.3; }
.wl-menu-card__arrow { color:#a3b8bd; font-size:10px; margin-left:auto; opacity:0; transform:translateX(-3px); transition:opacity .16s ease,transform .16s ease; }
.wl-menu-card:hover .wl-menu-card__arrow { opacity:1; transform:translateX(0); }
@media (max-width:1199px) { .wl-menu-hub__grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:991px) { .wl-menu-hub { padding:24px 20px 40px; } .wl-menu-hub__grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:767px) { .wl-menu-hub { min-height:calc(100vh - 50px); padding:20px 15px 32px; } .wl-menu-hub__head h1 { font-size:21px; } .wl-menu-hub__grid { grid-template-columns:1fr; } .wl-menu-card { min-height:66px; } }
body.wl-menu-hub-open .main-sidebar .sidebar-menu>li.active:not(.wl-hub-selected)>a { background:transparent!important; border-color:transparent!important; box-shadow:none!important; color:#d9edf1!important; }
body[class*="skin-"] .main-sidebar .sidebar-menu>li.wl-hub-selected>a { background:#f3fbfb!important; border-color:#f3fbfb!important; box-shadow:0 5px 14px rgba(7,41,51,.17)!important; color:#164f63!important; }
body[class*="skin-"] .main-sidebar .sidebar-menu>li.wl-hub-selected>a>i { background:#dff2ef!important; color:#1e7887!important; }

/* Responsive navigation contrast */
@media (max-width: 991px) {
  .main-header .navbar > .sidebar-toggle {
    align-items: center;
    background: #f1f5f9 !important;
    border-right: 1px solid #cbd5e1;
    color: #0f172a !important;
    display: flex;
    font-size: 20px;
    height: 50px;
    justify-content: center;
    text-decoration: none;
  }
  .main-header .navbar > .sidebar-toggle:hover,
  .main-header .navbar > .sidebar-toggle:focus {
    background: #e2e8f0 !important;
    color: #047857 !important;
  }
  .main-header .navbar .nav > li > a,
  .main-header .navbar-custom-menu .navbar-nav > li > a {
    color: #0f172a !important;
  }
}

/* Use the compact, off-canvas shell on tablets as well as phones. */
@media (min-width: 768px) and (max-width: 991px) {
  body.sidebar-mini .main-header .logo { display: none; }
  body.sidebar-mini .main-header .navbar,
  body.sidebar-mini .content-wrapper,
  body.sidebar-mini .main-footer { margin-left: 0 !important; }
  body.sidebar-mini .main-sidebar {
    box-shadow: 8px 0 24px rgba(7, 41, 51, .2);
    transform: translateX(-230px) !important;
    transition: transform .25s ease;
    z-index: 1040;
  }
  body.sidebar-mini.sidebar-collapse .main-header .navbar,
  body.sidebar-mini.sidebar-collapse .content-wrapper,
  body.sidebar-mini.sidebar-collapse .main-footer { margin-left: 0 !important; }
  body.sidebar-mini.sidebar-collapse .main-sidebar {
    transform: translateX(0) !important;
    width: 230px !important;
  }
  body.sidebar-mini.sidebar-collapse .main-sidebar .sidebar,
  body.sidebar-mini.sidebar-collapse .main-sidebar .sidebar-menu,
  body.sidebar-mini.sidebar-collapse .main-sidebar .sidebar-menu > li { width: auto !important; }
  body.sidebar-mini.sidebar-collapse .main-sidebar .sidebar-menu > li > a {
    justify-content: flex-start;
    padding: 8px 11px !important;
    width: auto !important;
  }
  body.sidebar-mini.sidebar-collapse .main-sidebar .sidebar-menu > li > a > i,
  body.sidebar-mini.sidebar-collapse .main-sidebar .sidebar-menu > li > a > .fa,
  body.sidebar-mini.sidebar-collapse .main-sidebar .sidebar-menu > li > a > .fas,
  body.sidebar-mini.sidebar-collapse .main-sidebar .sidebar-menu > li > a > .far,
  body.sidebar-mini.sidebar-collapse .main-sidebar .sidebar-menu > li > a > .fab { margin-right: 8px !important; }
  body.sidebar-mini.sidebar-collapse .main-sidebar .sidebar-menu > li > a > span:not(.pull-right-container) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: inherit !important;
    display: inline !important;
    height: auto !important;
    left: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    width: auto !important;
  }
  body.sidebar-mini.sidebar-collapse .main-sidebar .sidebar-menu > li.treeview > .treeview-menu,
  body.sidebar-mini.sidebar-collapse .main-sidebar .sidebar-menu > li.treeview:hover > .treeview-menu {
    display: none !important;
    left: auto !important;
    margin: 4px 0 8px !important;
    position: static !important;
    top: auto !important;
    width: auto !important;
  }
  body.sidebar-mini.sidebar-collapse .main-sidebar .sidebar-menu > li.treeview.menu-open > .treeview-menu { display: block !important; }
}

/* Keep all icon/button input groups visually joined without changing Select2 layout. */
.input-group > .input-group-addon:first-child,
.input-group > .input-group-btn:first-child > .btn { border-radius:6px 0 0 6px!important; }
.input-group > .input-group-addon:last-child,
.input-group > .input-group-btn:last-child > .btn { border-radius:0 6px 6px 0!important; }
.input-group > .form-control:not(:first-child),
.input-group > .select2-container:not(:first-child) .select2-selection { border-top-left-radius:0!important; border-bottom-left-radius:0!important; }
.input-group > .form-control:not(:last-child),
.input-group > .select2-container:not(:last-child) .select2-selection { border-top-right-radius:0!important; border-bottom-right-radius:0!important; }
.input-group:not(.input-group-sm) > .input-group-addon { min-width:38px; padding:0 11px; vertical-align:middle; }
.input-group:not(.input-group-sm) > .input-group-btn > .btn { min-height:42px; }

/* POS terminal: compact sale-date and customer summary panels. */
#add_pos_sell_form .pos-terminal-date-card, #add_pos_sell_form .pos-terminal-customer-card { margin-bottom:12px; padding:14px; border:1px solid #dce8e2; border-radius:14px; background:linear-gradient(145deg,#ffffff 0%,#f5fbf7 100%); box-shadow:0 6px 18px rgba(34,83,57,.07); }
#add_pos_sell_form .pos-terminal-date-card .form-group, #add_pos_sell_form .pos-terminal-customer-card .form-group { margin-bottom:0; }
#add_pos_sell_form .pos-terminal-date-card label { display:block; margin-bottom:8px; color:#527063; font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
#add_pos_sell_form .pos-terminal-date-card .input-group-addon, #add_pos_sell_form .pos-terminal-customer-select .input-group-addon { background:#eaf6ee; border-color:#c8dfd0; color:#23734d; }
#add_pos_sell_form .pos-terminal-customer-select { margin-bottom:10px; }
#add_pos_sell_form .pos-terminal-customer-due:not(.hide) { display:block; width:max-content; margin:0 0 10px; padding:5px 9px; border:1px solid #f4d1d1; border-radius:999px; background:#fff7f7; font-size:12px; }
#add_pos_sell_form .pos-terminal-customer-card .row strong { display:block; margin-bottom:4px; color:#527063; font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }

/* POS product browser: responsive, touch-friendly product cards. */
#product_list_body, #featured_products_box { display:flex; flex-wrap:wrap; margin:-6px; }
#product_list_body .product_list, #featured_products_box .product_list { float:none; flex:1 1 170px; width:auto; max-width:none; padding:6px; }
#product_list_body .product_box, #featured_products_box .product_box { display:flex; flex-direction:column; height:100%; min-height:174px; margin:0; overflow:hidden; border:1px solid #dce7e1; border-radius:14px; background:#fff; box-shadow:0 3px 10px rgba(27,73,48,.07); color:#254334; transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
#product_list_body .product_box_inner, #featured_products_box .product_box_inner { height:108px; overflow:hidden; border-bottom:1px solid #edf2ef; background:radial-gradient(circle at 50% 38%,#ffffff 0,#f1f8f4 72%); }
#product_list_body .product_box .image-container, #featured_products_box .product_box .image-container { height:108px; background-position:center!important; background-repeat:no-repeat!important; background-size:contain!important; transition:transform .2s ease; }
#product_list_body .product_box .text_div, #featured_products_box .product_box .text_div { min-height:64px; margin:0; padding:10px 11px 12px; text-align:left; }
#product_list_body .product_box .text, #featured_products_box .product_box .text { display:-webkit-box; overflow:hidden; color:#244334; font-size:12px; font-weight:700; line-height:1.35; text-overflow:ellipsis; -webkit-box-orient:vertical; -webkit-line-clamp:2; max-height:33px; }
#product_list_body .product_box .text-muted, #featured_products_box .product_box .text-muted { display:inline-block; margin-top:3px; color:#75877c!important; font-size:11px; line-height:1.25; }
#product_list_body .product_box:hover, #featured_products_box .product_box:hover { border-color:#54a878; box-shadow:0 10px 22px rgba(27,101,62,.16); transform:translateY(-3px); }
#product_list_body .product_box:hover .image-container, #featured_products_box .product_box:hover .image-container { transform:scale(1.04); }
#product_list_body .product_box .image-container:hover, #featured_products_box .product_box .image-container:hover { transform:scale(1.04); }
#product_list_body .product_box:active, #featured_products_box .product_box:active { transform:translateY(-1px) scale(.985); }

/* Desktop POS workspace splitter. The saved width is restored per browser. */
.pos-workspace-resizer { display:none; }
@media (min-width:992px) { #add_pos_sell_form .pos-workspace { --pos-cart-width:58.333%; display:flex; flex-wrap:nowrap; align-items:stretch; } #add_pos_sell_form .pos-workspace-cart { float:none; flex:0 0 calc(var(--pos-cart-width) - 7px); width:calc(var(--pos-cart-width) - 7px)!important; max-width:calc(var(--pos-cart-width) - 7px)!important; } #add_pos_sell_form .pos-workspace-products { float:none; flex:1 1 0; width:auto!important; max-width:none!important; min-width:340px; } #add_pos_sell_form .pos-workspace-resizer { position:relative; display:block; flex:0 0 14px; cursor:col-resize; touch-action:none; } #add_pos_sell_form .pos-workspace-resizer:before { position:absolute; top:42%; left:4px; width:6px; height:56px; border-radius:8px; background:radial-gradient(circle,#8bb59a 1.4px,transparent 1.7px) 0 0/6px 8px; content:""; opacity:.65; transition:background .18s ease,opacity .18s ease; } #add_pos_sell_form .pos-workspace-resizer:hover:before, #add_pos_sell_form .pos-workspace.is-resizing .pos-workspace-resizer:before { background-color:#e3f4e8; opacity:1; } #add_pos_sell_form .pos-workspace.is-resizing { cursor:col-resize; user-select:none; } }
@media (max-width:767px) { #product_list_body .product_list, #featured_products_box .product_list { flex-basis:132px; } #product_list_body .product_box, #featured_products_box .product_box { min-height:156px; } #product_list_body .product_box_inner, #product_list_body .product_box .image-container, #featured_products_box .product_box_inner, #featured_products_box .product_box .image-container { height:88px; } }
@media (max-width:767px) { #add_pos_sell_form .pos-workspace-products, #add_pos_sell_form .pos-workspace-resizer { display:none!important; } }

/* Compact POS sale lines: quantity and unit remain clear without wasting row height. */
#pos_table .product_row > td { padding-top:9px; padding-bottom:9px; vertical-align:middle; }
#pos_table .pos-line-quantity-controls { display:flex; align-items:center; gap:7px; min-width:0; }
#pos_table .pos-line-quantity-controls .input-number { flex:1 1 0; min-width:0; }
#pos_table .pos-line-quantity-controls .sub_unit, #pos_table .pos-line-unit-label { flex:0 0 96px; width:96px; min-width:0; }
#pos_table .pos-line-unit-label { display:inline-flex; align-items:center; justify-content:center; height:38px; padding:0 8px; overflow:hidden; border:1px solid #d8e5de; border-radius:7px; background:#f4faf6; color:#517064; font-size:12px; font-weight:700; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
#pos_table .pos-line-quantity-controls .form-control, #pos_table .pos-line-quantity-controls .input-group-btn > .btn { height:38px!important; min-height:38px!important; }
#pos_table .pos-line-quantity-controls .input-group-btn > .btn { min-width:32px; padding:6px 8px; }
#pos_table .pos-line-quantity-controls .pos_quantity { padding-left:8px; padding-right:8px; font-size:13px; text-align:center; }
#pos_table .pos-line-quantity-controls .sub_unit { padding:6px 24px 6px 8px; border-color:#cfded6; border-radius:7px; background-color:#fff; color:#335a48; font-size:12px; font-weight:600; }
@media (max-width:767px) { #pos_table .product_row > td { padding-top:7px; padding-bottom:7px; } #pos_table .pos-line-quantity-controls { flex-wrap:wrap; gap:5px; } #pos_table .pos-line-quantity-controls .input-number { flex-basis:100%; } #pos_table .pos-line-quantity-controls .sub_unit, #pos_table .pos-line-unit-label { flex-basis:100%; width:100%; } }
@media (max-width:767px) { #pos_table .pos-line-quantity-controls { display:block; width:100%; } #pos_table .pos-line-quantity-controls .input-number { display:flex!important; width:100%!important; min-width:0; flex:none; } #pos_table .pos-line-quantity-controls .input-number .input-group-btn { display:block!important; flex:0 0 26px; width:26px; } #pos_table .pos-line-quantity-controls .input-number .input-group-btn > .btn { width:26px; min-width:26px; height:34px!important; min-height:34px!important; padding:4px 2px; } #pos_table .pos-line-quantity-controls .pos_quantity { display:block; flex:1 1 auto; width:1px!important; min-width:28px; height:34px!important; min-height:34px!important; padding:4px 3px; font-size:12px; } #pos_table .pos-line-quantity-controls .sub_unit, #pos_table .pos-line-unit-label { display:block; width:100%!important; height:32px!important; min-height:32px!important; margin-top:5px; } }
@media (max-width:767px) { #pos_table .pos-line-quantity-controls .input-number { display:grid!important; grid-template-columns:26px minmax(34px,1fr) 26px; width:100%!important; overflow:visible; } #pos_table .pos-line-quantity-controls .input-number .input-group-btn { display:block!important; flex:none!important; width:auto!important; min-width:0!important; } #pos_table .pos-line-quantity-controls .input-number .input-group-btn > .btn { display:block; width:100%!important; min-width:0!important; overflow:visible; } #pos_table .pos-line-quantity-controls .pos_quantity { width:100%!important; min-width:0!important; overflow:visible; text-overflow:clip; white-space:nowrap; } }
@media (min-width:768px) and (max-width:1199px) { #pos_table .pos-line-quantity-controls { flex-wrap:wrap; gap:5px; } #pos_table .pos-line-quantity-controls .input-number { flex:1 1 100%; width:100%; min-width:84px; } #pos_table .pos-line-quantity-controls .sub_unit, #pos_table .pos-line-unit-label { flex:1 1 100%; width:100%; height:32px!important; min-height:32px!important; margin-top:0; } }

/* Dense POS order header: date, customer and product lookup remain visible in one working row. */
#add_pos_sell_form .pos-workspace-cart .box-body { position:relative; }
#add_pos_sell_form .pos-terminal-date-card { float:left; width:196px; margin:0 10px 8px 0; padding:8px; border-radius:10px; box-shadow:0 2px 8px rgba(34,83,57,.045); }
#add_pos_sell_form .pos-terminal-date-card label { margin-bottom:4px; font-size:10px; line-height:1.2; }
#add_pos_sell_form .pos-terminal-date-card .input-group { height:38px; }
#add_pos_sell_form .pos-terminal-date-card .form-control { height:38px; min-height:38px; font-size:12px; }
#add_pos_sell_form .pos-terminal-primary-row { width:auto; margin:0 0 8px 206px; }
#add_pos_sell_form .pos-terminal-primary-row > .pos-terminal-customer-card,
#add_pos_sell_form .pos-terminal-primary-row > .col-md-8 { min-height:64px; margin:0; padding:8px; border:1px solid #dce8e2; border-radius:10px; background:#fff; box-shadow:0 2px 8px rgba(34,83,57,.045); }
#add_pos_sell_form .pos-terminal-primary-row > .pos-terminal-customer-card { width:42%; }
#add_pos_sell_form .pos-terminal-primary-row > .col-md-8 { width:58%; }
#add_pos_sell_form .pos-terminal-primary-row .form-group { margin:0; }
#add_pos_sell_form .pos-terminal-primary-row .input-group { height:38px; }
#add_pos_sell_form .pos-terminal-primary-row .form-control,
#add_pos_sell_form .pos-terminal-primary-row .input-group-btn > .btn { height:38px; min-height:38px; }
#add_pos_sell_form .pos-terminal-primary-row .pos-terminal-customer-select { margin-bottom:4px; }
#add_pos_sell_form .pos-terminal-primary-row .pos-terminal-customer-due:not(.hide) { display:inline-block; width:auto; margin:0 5px 0 0; padding:2px 6px; font-size:10px; line-height:1.25; vertical-align:middle; }
#add_pos_sell_form .pos-terminal-primary-row .pos-terminal-customer-card .row { display:inline; margin:0; }
#add_pos_sell_form .pos-terminal-primary-row .pos-terminal-customer-card .row > .col-sm-12 { display:inline; padding:0; color:#718077; font-size:11px; white-space:nowrap; }
#add_pos_sell_form .pos-terminal-primary-row .pos-terminal-customer-card .row strong { display:inline; margin:0 3px 0 0; color:#527063; font-size:10px; letter-spacing:.04em; }
#add_pos_sell_form .pos-terminal-primary-row #billing_address_div { display:inline; }
#add_pos_sell_form .pos-terminal-options-row { clear:both; display:flex; flex-wrap:wrap; gap:8px; margin:0 0 2px; }
#add_pos_sell_form .pos-terminal-options-row > [class*="col-"] { float:none; flex:1 1 210px; width:auto; padding:0; }
#add_pos_sell_form .pos-terminal-options-row .form-group { margin-bottom:8px; }
@media (max-width:1199px) {
  #add_pos_sell_form .pos-terminal-date-card { float:none; width:100%; margin:0 0 8px; }
  #add_pos_sell_form .pos-terminal-primary-row { margin-left:0; }
}
@media (max-width:767px) {
  #add_pos_sell_form .pos-terminal-primary-row > .pos-terminal-customer-card,
  #add_pos_sell_form .pos-terminal-primary-row > .col-md-8 { width:100%; margin-bottom:8px; }
  #add_pos_sell_form .pos-terminal-primary-row .pos-terminal-customer-card .row > .col-sm-12 { display:block; overflow:hidden; text-overflow:ellipsis; }
  #add_pos_sell_form .pos-terminal-options-row > [class*="col-"] { flex-basis:100%; }
}
#add_pos_sell_form .pos-terminal-primary-row .pos-terminal-customer-card .row > .col-sm-12 { float:none; }
#add_pos_sell_form .pos-terminal-primary-row #billing_address_div { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#add_pos_sell_form .pos-terminal-address-separator { color:#a0ada6; }
/* POS sale date lives in the global header, keeping the sales workspace focused. */
.header-date-chip.pos-header-sale-date { gap:6px; padding:0 9px; }
.pos-header-sale-date__label { color:#527063; font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
#pos_header_transaction_date { width:132px; min-height:0; height:28px; padding:0; border:0; background:transparent; color:#234e59; font:inherit; font-weight:700; outline:0; }
#pos_header_transaction_date:focus { box-shadow:none; }@media (max-width:767px) {
  .header-date-chip.pos-header-sale-date { display:inline-flex; height:36px; margin:7px 5px; }
  .header-date-chip.pos-header-sale-date .pos-header-sale-date__label { display:none; }
  #pos_header_transaction_date { width:122px; font-size:12px; }
}
/* POS priority order: customer, selling price and status first; product lookup follows them. */
#add_pos_sell_form .pos-terminal-primary-row > .pos-terminal-customer-card { width:42%; }
#add_pos_sell_form .pos-terminal-primary-row > .pos-terminal-price-field { width:33%; }
#add_pos_sell_form .pos-terminal-primary-row > .pos-terminal-status-field { width:25%; }
#add_pos_sell_form .pos-terminal-primary-row > .pos-terminal-price-field,
#add_pos_sell_form .pos-terminal-primary-row > .pos-terminal-status-field { min-height:64px; margin:0; padding:8px; border:1px solid #dce8e2; border-radius:10px; background:#fff; box-shadow:0 2px 8px rgba(34,83,57,.045); }
#add_pos_sell_form .pos-terminal-search-row { clear:both; margin:0 0 8px; }
#add_pos_sell_form .pos-terminal-search-row > .col-sm-12 { padding:8px; border:1px solid #c8dfd0; border-radius:10px; background:#fff; box-shadow:0 2px 8px rgba(34,83,57,.045); }
#add_pos_sell_form .pos-terminal-search-row .form-group,
#add_pos_sell_form .pos-terminal-search-row .input-group { margin:0; }
#add_pos_sell_form .pos-terminal-search-row .form-control,
#add_pos_sell_form .pos-terminal-search-row .input-group-btn > .btn { height:42px; min-height:42px; }
#add_pos_sell_form .pos-terminal-search-row #search_product { font-size:15px; }
@media (max-width:767px) {
  #add_pos_sell_form .pos-terminal-primary-row > .pos-terminal-customer-card,
  #add_pos_sell_form .pos-terminal-primary-row > .pos-terminal-price-field,
  #add_pos_sell_form .pos-terminal-primary-row > .pos-terminal-status-field { width:100%; margin-bottom:8px; }
}
/* Tablet POS: avoid desktop-sized micro-controls and empty workspace. */
@media (min-width:768px) and (max-width:991px) {
  #add_pos_sell_form .pos-terminal-primary-row { display:flex; flex-wrap:wrap; margin-left:0; }
  #add_pos_sell_form .pos-terminal-primary-row > .pos-terminal-customer-card { width:100%; margin-bottom:8px; }
  #add_pos_sell_form .pos-terminal-primary-row > .pos-terminal-price-field,
  #add_pos_sell_form .pos-terminal-primary-row > .pos-terminal-status-field { width:50%; min-height:58px; }
  #add_pos_sell_form .pos-terminal-primary-row > .pos-terminal-price-field { border-radius:10px 0 0 10px; }
  #add_pos_sell_form .pos-terminal-primary-row > .pos-terminal-status-field { border-left:0; border-radius:0 10px 10px 0; }
  #add_pos_sell_form .pos-terminal-search-row { margin-top:2px; }
  #add_pos_sell_form .pos-terminal-options-row > [class*="col-"] { flex:1 1 calc(50% - 4px); }
}

/* Unified list tables: a shared compact toolbar and horizontal navigation for every DataTable. */
.unified-list-table { min-width: 0; }
.unified-list-table-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 58px;
  padding: 8px 14px;
  background: #eef7f8;
  border: 1px solid var(--wl-border);
  border-bottom: 0;
  color: var(--wl-text);
}
.unified-list-table-toolbar .dataTables_length,
.unified-list-table-toolbar .dataTables_filter { float: none !important; margin: 0 !important; }
.unified-list-table-toolbar .dataTables_length { margin-right: auto !important; }
.unified-list-table-toolbar .dataTables_length label,
.unified-list-table-toolbar .dataTables_filter label { align-items: center; display: inline-flex; gap: 7px; margin: 0; color: #667085; font-weight: 600; }
.unified-list-table-toolbar .dataTables_length select { display: inline-block; width: auto; min-width: 70px; height: 30px; padding: 4px 24px 4px 8px; }
.unified-list-table-toolbar .dataTables_filter input { width: 190px; height: 30px; margin-left: 0 !important; padding-left: 28px; border-color: #cddce0; border-radius: 6px; }
/* The scroll hint only earns its space when the table overflows and actually has rows to scroll. */
.unified-list-table-scroll-hint,
.unified-list-table-scroll-help,
.unified-list-table-scroll-controls { display: none; }
.unified-list-table-toolbar.is-empty { display: none; }
.unified-list-table-toolbar.has-horizontal-overflow .unified-list-table-scroll-hint { display: inline; color: var(--wl-primary); font-size: 13px; font-weight: 600; white-space: nowrap; }
.unified-list-table-toolbar.has-horizontal-overflow .unified-list-table-scroll-help { display: inline; color: #667085; font-size: 13px; white-space: nowrap; }
.unified-list-table-toolbar.has-horizontal-overflow .unified-list-table-scroll-controls { display: inline-flex; gap: 4px; }
.unified-list-table-scroll-control { min-width: 28px; }
.unified-list-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.unified-list-scroll > .table { margin-bottom: 0; }
.unified-list-table table.dataTable, .unified-list-table table.ajax_view { min-width: max-content; }
/* DataTables sizes its own tables when scrollX is enabled - forcing max-content there desyncs the
   cloned header/footer from the body columns. */
.unified-list-table .dataTables_scrollHead table,
.unified-list-table .dataTables_scrollFoot table,
.unified-list-table .dataTables_scrollBody table { min-width: 0; }
.unified-list-scroll > .table > thead > tr > th,
.unified-list-scroll > .table > tbody > tr > td,
.unified-list-scroll > .table > tfoot > tr > td,
.unified-list-table table.dataTable > thead > tr > th,
.unified-list-table table.dataTable > tbody > tr > td,
.unified-list-table table.dataTable > tfoot > tr > td,
.unified-list-table table.ajax_view > thead > tr > th,
.unified-list-table table.ajax_view > tbody > tr > td,
.unified-list-table table.ajax_view > tfoot > tr > td { white-space: nowrap; }
.unified-list-table .dataTables_scrollBody { -webkit-overflow-scrolling: touch; }
.unified-list-table .dataTables_info,
.unified-list-table .dataTables_paginate { margin-top: 12px; }
@media (max-width: 767px) {
  .unified-list-table-toolbar { align-items: flex-start; flex-direction: column; }
  .unified-list-table-toolbar .dataTables_length { margin-right: 0 !important; }
  .unified-list-table-toolbar.has-horizontal-overflow .unified-list-table-scroll-hint,
  .unified-list-table-toolbar.has-horizontal-overflow .unified-list-table-scroll-help { white-space: normal; }
  .unified-list-table-toolbar .dataTables_filter input { width: 100%; }
}

/* POS terminal color system: saturated accent per header field, one size for every action button. */
#add_pos_sell_form .pos-terminal-date-card,
#add_pos_sell_form .pos-terminal-primary-row > .pos-terminal-customer-card,
#add_pos_sell_form .pos-terminal-primary-row > .pos-terminal-price-field,
#add_pos_sell_form .pos-terminal-primary-row > .pos-terminal-status-field,
#add_pos_sell_form .pos-terminal-search-row > .col-sm-12 { position:relative; overflow:hidden; border-width:1px!important; }
#add_pos_sell_form .pos-terminal-date-card:before,
#add_pos_sell_form .pos-terminal-primary-row > .pos-terminal-customer-card:before,
#add_pos_sell_form .pos-terminal-primary-row > .pos-terminal-price-field:before,
#add_pos_sell_form .pos-terminal-primary-row > .pos-terminal-status-field:before,
#add_pos_sell_form .pos-terminal-search-row > .col-sm-12:before { position:absolute; top:0; bottom:0; left:0; width:4px; content:""; }

/* Sale date: amber */
#add_pos_sell_form .pos-terminal-date-card { border-color:#d69412!important; background:linear-gradient(145deg,#fdf0cf 0%,#fbe3a6 100%)!important; box-shadow:0 3px 10px rgba(146,94,6,.18)!important; }
#add_pos_sell_form .pos-terminal-date-card:before { background:#b45309; }
#add_pos_sell_form .pos-terminal-date-card label { color:#7c4a03!important; }
#add_pos_sell_form .pos-terminal-date-card .input-group-addon { background:#b45309!important; border-color:#b45309!important; color:#fff!important; }
#add_pos_sell_form .pos-terminal-date-card .input-group-addon i { color:#fff!important; }
#add_pos_sell_form .pos-terminal-date-card .form-control { background:#fffaef!important; border-color:#d69412!important; color:#6d3f04!important; font-weight:700; }
.header-date-chip.pos-header-sale-date { border-color:#d69412!important; background:linear-gradient(145deg,#fdf0cf 0%,#fbe3a6 100%)!important; }
.header-date-chip.pos-header-sale-date > i { color:#b45309!important; }
.pos-header-sale-date__label { color:#7c4a03!important; }
#pos_header_transaction_date { background:transparent!important; color:#6d3f04!important; font-weight:700; }

/* Customer: blue */
#add_pos_sell_form .pos-terminal-primary-row > .pos-terminal-customer-card { border-color:#3b74e8!important; background:linear-gradient(145deg,#dfeafe 0%,#c4d9fd 100%)!important; box-shadow:0 3px 10px rgba(22,48,122,.16)!important; }
#add_pos_sell_form .pos-terminal-primary-row > .pos-terminal-customer-card:before { background:#1d4ed8; }
#add_pos_sell_form .pos-terminal-customer-select .input-group-addon { background:#1d4ed8!important; border-color:#1d4ed8!important; color:#fff!important; }
#add_pos_sell_form .pos-terminal-customer-select .input-group-addon i { color:#fff!important; }
#add_pos_sell_form .pos-terminal-customer-card .form-control,
#add_pos_sell_form .pos-terminal-customer-card .select2-container .select2-selection { background:#ffffff!important; border-color:#3b74e8!important; color:#16307a!important; font-weight:600; }
#add_pos_sell_form .pos-terminal-customer-card .select2-container .select2-selection__rendered { color:#16307a!important; }
#add_pos_sell_form .pos-terminal-customer-card .row strong { color:#1d4ed8!important; }
#add_pos_sell_form .pos-terminal-customer-card .row > .col-sm-12 { color:#2b4f93!important; }
#add_pos_sell_form .pos-terminal-customer-card .add_new_customer { background:#1d4ed8!important; border-color:#1d4ed8!important; }
#add_pos_sell_form .pos-terminal-customer-card .add_new_customer i { color:#fff!important; }
#add_pos_sell_form .pos-terminal-customer-due:not(.hide) { border-color:#e11d48!important; background:#ffe2e8!important; color:#9f1239!important; font-weight:700; }

/* Selling price group: emerald */
#add_pos_sell_form .pos-terminal-primary-row > .pos-terminal-price-field { border-color:#0d9b6c!important; background:linear-gradient(145deg,#d6f6e7 0%,#b4ecd3 100%)!important; box-shadow:0 3px 10px rgba(6,78,59,.16)!important; }
#add_pos_sell_form .pos-terminal-primary-row > .pos-terminal-price-field:before { background:#047857; }
#add_pos_sell_form .pos-terminal-price-field .input-group-addon { background:#047857!important; border-color:#047857!important; color:#fff!important; }
#add_pos_sell_form .pos-terminal-price-field .input-group-addon i,
#add_pos_sell_form .pos-terminal-price-field .input-group-addon .fas { color:#fff!important; }
#add_pos_sell_form .pos-terminal-price-field .form-control,
#add_pos_sell_form .pos-terminal-price-field .select2-container .select2-selection { background:#ffffff!important; border-color:#0d9b6c!important; color:#064e3b!important; font-weight:600; }
#add_pos_sell_form .pos-terminal-price-field .select2-container .select2-selection__rendered { color:#064e3b!important; }

/* Order status: violet */
#add_pos_sell_form .pos-terminal-primary-row > .pos-terminal-status-field { border-color:#7c3aed!important; background:linear-gradient(145deg,#e7dcfd 0%,#d3c0fa 100%)!important; box-shadow:0 3px 10px rgba(67,36,160,.16)!important; }
#add_pos_sell_form .pos-terminal-primary-row > .pos-terminal-status-field:before { background:#6d28d9; }
#add_pos_sell_form .pos-terminal-status-field .form-control,
#add_pos_sell_form .pos-terminal-status-field .select2-container .select2-selection { background:#ffffff!important; border-color:#7c3aed!important; color:#4324a0!important; font-weight:700; }
#add_pos_sell_form .pos-terminal-status-field .select2-container .select2-selection__rendered { color:#4324a0!important; }

/* Product lookup: cyan */
#add_pos_sell_form .pos-terminal-search-row > .col-sm-12 { border-color:#0e90b3!important; background:linear-gradient(145deg,#d3effa 0%,#aee0f0 100%)!important; box-shadow:0 3px 10px rgba(10,74,92,.16)!important; }
#add_pos_sell_form .pos-terminal-search-row > .col-sm-12:before { background:#0e7490; }
#add_pos_sell_form .pos-terminal-search-row #search_product { background:#ffffff!important; border-color:#0e90b3!important; color:#083f4f!important; font-weight:600; }
#add_pos_sell_form .pos-terminal-search-row #search_product::placeholder { color:#4d8598!important; }
#add_pos_sell_form .pos-terminal-search-row .btn.bg-white { background:#0e7490!important; border-color:#0e7490!important; color:#fff!important; }
#add_pos_sell_form .pos-terminal-search-row .btn.bg-white i { color:#fff!important; }

/* Secondary option row */
#add_pos_sell_form .pos-terminal-options-row .form-control,
#add_pos_sell_form .pos-terminal-options-row .select2-container .select2-selection { background:#eef2f7!important; border-color:#93a5bb!important; color:#243b53!important; font-weight:600; }

/* Product browser filters: each dropdown keeps its own identity.
   Scoped to #product_category_div so the shared category_id/sub_category_id/child_category_id
   ids used by the product add/edit forms keep the plain form styling. */
#product_category_div #category_id + .select2-container .select2-selection,
#product_category_div #sub_category_id + .select2-container .select2-selection,
#product_category_div #child_category_id + .select2-container .select2-selection,
#search_product2 { border-width:1px!important; font-weight:700; }
#product_category_div #category_id + .select2-container .select2-selection { background:#dfe3fd!important; border-color:#4f46e5!important; }
#product_category_div #category_id + .select2-container .select2-selection__rendered { color:#312294!important; }
#product_category_div #category_id + .select2-container .select2-selection__arrow b { border-top-color:#4f46e5!important; }
#product_category_div #sub_category_id + .select2-container .select2-selection { background:#fcdde6!important; border-color:#be123c!important; }
#product_category_div #sub_category_id + .select2-container .select2-selection__rendered { color:#8d0f32!important; }
#product_category_div #sub_category_id + .select2-container .select2-selection__arrow b { border-top-color:#be123c!important; }
#product_category_div #child_category_id + .select2-container .select2-selection { background:#cdeee9!important; border-color:#0f766e!important; }
#product_category_div #child_category_id + .select2-container .select2-selection__rendered { color:#0b4f49!important; }
#product_category_div #child_category_id + .select2-container .select2-selection__arrow b { border-top-color:#0f766e!important; }
#search_product2 { background:#fde6d4!important; border-color:#c2410c!important; color:#8a2f08!important; }
#search_product2::placeholder { color:#b3733f!important; }

/* Bottom action bar: a single button size, deep solid fills, an always-readable payable total. */
@media (min-width:768px) {
  .pos-form-actions > .col-md-12 { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
  .pos-form-actions > .col-md-12 > .btn,
  .pos-form-actions > .col-md-12 > .pos-total { margin:0!important; float:none!important; }
  .pos-form-actions > .col-md-12 > .btn.pull-right { margin-left:auto!important; }
}
.pos-form-actions { background:linear-gradient(180deg,#e6eef1 0%,#d2e0e5 100%)!important; border-top:1px solid #b6c9d1!important; }
.pos-form-actions .btn,
.pos-form-actions .btn.btn-xs {
  height:42px;
  min-height:42px;
  padding:0 16px;
  border:0;
  border-radius:10px;
  box-shadow:0 3px 8px rgba(15,23,42,.22);
  color:#fff!important;
  font-size:13px;
  font-weight:700;
  line-height:42px;
  text-shadow:0 1px 1px rgba(0,0,0,.18);
  white-space:nowrap;
}
.pos-form-actions .btn > i { margin-right:6px; color:inherit!important; }
.pos-form-actions #pos-draft { background:#0369a1!important; }
.pos-form-actions #pos-quotation { background:#b45309!important; }
.pos-form-actions #pos-pre_order { background:#1d4ed8!important; }
.pos-form-actions .pos-express-finalize[data-pay_method="suspend"] { background:#be185d!important; }
.pos-form-actions #pos-finalize { background:#1e3a8a!important; }
.pos-form-actions .pos-express-finalize[data-pay_method="cash"] { background:#047857!important; }
.pos-form-actions #pos-cancel,
.pos-form-actions #pos-delete { background:#b91c1c!important; }
.pos-form-actions #recent-transactions { background:#6d28d9!important; }
.pos-form-actions .btn:hover,
.pos-form-actions .btn:focus { box-shadow:0 6px 14px rgba(15,23,42,.3); filter:brightness(1.1); }
.pos-form-actions .btn:active { transform:translateY(1px); }
.pos-form-actions .pos-total,
.pos-form-actions .bg-navy.pos-total {
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  height:42px;
  padding:0 18px;
  border-radius:10px;
  background:linear-gradient(135deg,#0b5f59 0%,#07403c 100%)!important;
  box-shadow:0 3px 10px rgba(8,63,59,.4);
  text-align:left;
}
.pos-form-actions .pos-total span.text {
  display:block;
  width:auto;
  color:#8ee0da!important;
  font-size:10px;
  font-weight:800;
  letter-spacing:.07em;
  line-height:1.1;
  text-transform:uppercase;
}
.pos-form-actions .pos-total span.number {
  display:block;
  color:#ffffff!important;
  font-size:19px;
  font-weight:800;
  line-height:1.2;
}
@media (max-width:767px) {
  .pos-form-actions .btn,
  .pos-form-actions .btn.btn-xs { margin-bottom:6px!important; }
  .pos-form-actions #total_payable { color:#0b5f59!important; }
}

/* ==========================================================================
   Header command bar — brand block, action rail, utility cluster.
   Loaded last so it settles the AdminLTE/skin defaults for the top bar.
   ========================================================================== */
:root {
  --wl-header-h: 58px;
  --wl-header-line: #dbe9ec;
  --wl-header-ink: #1d4e5b;
  --wl-header-ink-soft: #6d8a92;
  --wl-header-tint: #f1f7f9;
  --wl-header-tint-strong: #e3f0f3;
}

/* --- Shell height -------------------------------------------------------- */
@media (min-width: 768px) {
  .main-header .logo { height: var(--wl-header-h); line-height: var(--wl-header-h); }
  .main-header .navbar { min-height: var(--wl-header-h); }
  .main-sidebar, .left-side { padding-top: var(--wl-header-h); }
}

/* --- Brand block: carries the sidebar colour up over the logo ------------ */
.main-header .logo,
body[class*="skin-"] .main-header .logo,
.skin-blue .main-header .logo,
.skin-blue-light .main-header .logo {
  background: linear-gradient(135deg, #1b5d74 0%, #103f50 100%) !important;
  border: 0 !important;
  color: #fff !important;
  font-family: inherit;
  font-weight: 600;
  overflow: hidden;
  padding: 0 14px;
  text-align: left;
}
.main-header .logo:hover,
.main-header .logo:focus,
body[class*="skin-"] .main-header .logo:hover {
  background: linear-gradient(135deg, #1f6b85 0%, #12495c 100%) !important;
  color: #fff !important;
}
.main-header .logo .logo-lg { align-items: center; display: flex; gap: 10px; height: 100%; }
.main-header .logo .logo-mini { align-items: center; height: 100%; justify-content: center; }
.sidebar-mini.sidebar-collapse .main-header .logo > .logo-mini {
  display: flex;
  margin: 0 -15px;
}
.sidebar-mini.sidebar-collapse .main-header .logo { padding: 0; }
.main-header .logo .brand-mark {
  align-items: center;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 9px;
  color: #fff;
  display: inline-flex;
  flex: 0 0 32px;
  font-size: 15px;
  font-weight: 800;
  height: 32px;
  justify-content: center;
  letter-spacing: 0;
  line-height: 1;
  width: 32px;
}
/*
 * The business logo when one is uploaded.
 *
 * Sized by max-height/max-width with height:auto, NOT by a fixed height. vendor.css
 * puts padding:4px on .main-header .logo img and the theme sets box-sizing:border-box,
 * so a fixed height silently loses 8px to padding - a 42px box rendered the picture at
 * 34px and the wordmark came out unreadably small. Zero the padding and let the image
 * take the largest size the 58px bar allows.
 *
 * The selector carries img so it outranks vendor.css's `.main-header .logo .logo-lg img`
 * rather than relying on load order.
 */
/*
 * A brand block carrying an uploaded logo goes light.
 *
 * Business logos are drawn for white stationery - a red-and-green mark on the dark
 * teal gradient turns muddy and its darker strokes vanish into the background. The
 * initial-letter fallback keeps the dark gradient, which is where white type belongs.
 * The inset shadow on the right edge separates the block from the navbar so the
 * colour change reads as part of the design rather than a gap.
 */
.main-header .logo.has-brand-logo,
.main-header .logo.has-brand-logo:hover,
.main-header .logo.has-brand-logo:focus,
body[class*="skin-"] .main-header .logo.has-brand-logo,
body[class*="skin-"] .main-header .logo.has-brand-logo:hover,
.skin-blue .main-header .logo.has-brand-logo,
.skin-blue-light .main-header .logo.has-brand-logo {
  background: #ffffff !important;
  box-shadow: inset -1px 0 0 rgba(15, 63, 80, .14);
}

/* Centre the mark in the block: with no name text beside it, flushing it left just
   leaves a bay of empty white on the right. */
.main-header .logo.has-brand-logo .logo-lg { justify-content: center; gap: 8px; }

/* The status dot was tuned for a dark block; on white it needs a deeper green. */
.main-header .logo.has-brand-logo #online_indicator {
  color: #16a34a !important;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, .16);
}

.main-header .logo .logo-lg img.brand-logo {
  flex: 0 0 auto;
  width: auto;
  height: auto;
  max-width: 196px;
  max-height: 52px;
  padding: 0;
  margin: 0;
  object-fit: contain;
  object-position: center;
}

/* Collapsed sidebar: only the mark fits, so keep it small and centred. */
.main-header .logo .logo-mini img.brand-logo--mini {
  width: auto;
  height: auto;
  max-width: 42px;
  max-height: 34px;
  padding: 0;
  margin: 0 auto;
  object-fit: contain;
  object-position: center;
}

.main-header .logo .brand-name {
  flex: 1 1 auto;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.main-header .logo #online_indicator {
  box-shadow: 0 0 0 3px rgba(74,222,128,.22);
  color: #4ade80 !important;
  flex: 0 0 auto;
  font-size: 7px;
  border-radius: 50%;
}

/* --- Navbar surface ------------------------------------------------------ */
.main-header .navbar,
body[class*="skin-"] .main-header .navbar,
.skin-blue .main-header .navbar,
.skin-blue-light .main-header .navbar {
  background: #fff !important;
  border-bottom: 1px solid var(--wl-header-line) !important;
  box-shadow: 0 1px 2px rgba(16,63,80,.05);
}

/* --- Sidebar toggle ------------------------------------------------------ */
.main-header .navbar > .sidebar-toggle {
  align-items: center;
  background: transparent !important;
  border: 0 !important;
  border-radius: 10px;
  color: #2a5a67 !important;
  display: flex;
  float: left;
  height: 38px;
  justify-content: center;
  margin: 10px 4px 10px 10px;
  padding: 0 !important;
  transition: background .15s ease, color .15s ease;
  width: 38px;
}
.main-header .navbar > .sidebar-toggle:hover,
.main-header .navbar > .sidebar-toggle:focus {
  background: var(--wl-header-tint-strong) !important;
  color: #175c6d !important;
}
.sidebar-toggle-bars { display: flex; flex-direction: column; gap: 4px; width: 18px; }
.sidebar-toggle-bars > span {
  background: currentColor;
  border-radius: 2px;
  display: block;
  height: 2px;
  transition: width .2s ease;
  width: 100%;
}
.sidebar-toggle-bars > span:nth-child(2) { width: 68%; }
.main-header .navbar > .sidebar-toggle:hover .sidebar-toggle-bars > span:nth-child(2) { width: 100%; }

/* --- The rail: one flex row, no AdminLTE floats ------------------------- */
.main-header .navbar-custom-menu.header-rail {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  padding-right: 8px;
}
.main-header .header-rail > .btn-group,
.main-header .header-rail > .btn,
.main-header .header-rail > a.btn,
.main-header .header-rail > .header-date-chip,
.main-header .header-rail > .header-lang-switch,
.main-header .header-rail > .nav.navbar-nav {
  float: none !important;
  margin: 0 !important;
}
.main-header .header-rail > .nav.navbar-nav { align-items: center; display: flex; gap: 4px; }
.main-header .header-rail > .nav.navbar-nav > li { float: none; }
.main-header .header-rail .btn-group > .btn { float: none !important; }

/* --- Secondary icon actions --------------------------------------------- */
.main-header .header-rail .btn.header-action,
.main-header .header-rail .btn.clock_in_btn,
.main-header .header-rail .btn.clock_out_btn {
  align-items: center;
  background: var(--wl-header-tint) !important;
  border: 1px solid var(--wl-header-line) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  color: #22778a !important;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 15px;
  height: 38px;
  justify-content: center;
  line-height: 1;
  margin: 0 !important;
  min-height: 38px;
  min-width: 38px;
  padding: 0 !important;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
  width: 38px;
}
.main-header .header-rail .btn.header-action:hover,
.main-header .header-rail .btn.header-action:focus,
.main-header .header-rail .btn-group.open > .btn.header-action {
  background: #22778a !important;
  border-color: #22778a !important;
  box-shadow: 0 4px 12px rgba(23,92,109,.22) !important;
  color: #fff !important;
}
.main-header .header-rail .btn.header-action:active { transform: translateY(1px); }
.main-header .header-rail .btn.header-action > i,
.main-header .header-rail .btn.header-action > strong { font-size: inherit; line-height: 1; }

.main-header .header-rail .btn.header-action--danger {
  background: #fdf1f3 !important;
  border-color: #f6d9de !important;
  color: #d1495b !important;
}
.main-header .header-rail .btn.header-action--danger:hover,
.main-header .header-rail .btn.header-action--danger:focus {
  background: #d1495b !important;
  border-color: #d1495b !important;
  box-shadow: 0 4px 12px rgba(209,73,91,.24) !important;
  color: #fff !important;
}

/* Clock in / out keep their own semantics inside the rail. */
.main-header .header-rail .btn.clock_in_btn { background: #eef4fe !important; border-color: #d6e4fb !important; color: #2f63c7 !important; }
.main-header .header-rail .btn.clock_in_btn:hover { background: #2f63c7 !important; border-color: #2f63c7 !important; color: #fff !important; }
.main-header .header-rail .btn.clock_out_btn { background: #fff6e6 !important; border-color: #fbe4bc !important; color: #b4700c !important; }
.main-header .header-rail .btn.clock_out_btn:hover { background: #b4700c !important; border-color: #b4700c !important; color: #fff !important; }

/* --- Primary call to action --------------------------------------------- */
.main-header .header-rail .btn.header-cta {
  align-items: center;
  background: linear-gradient(135deg, #22778a 0%, #175c6d 100%) !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 12px rgba(23,92,109,.26) !important;
  color: #fff !important;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  gap: 8px;
  height: 38px;
  justify-content: center;
  line-height: 1;
  margin: 0 2px !important;
  min-height: 38px;
  padding: 0 16px !important;
  transition: box-shadow .15s ease, filter .15s ease, transform .1s ease;
  white-space: nowrap;
}
.main-header .header-rail .btn.header-cta:hover,
.main-header .header-rail .btn.header-cta:focus {
  box-shadow: 0 6px 18px rgba(23,92,109,.34) !important;
  color: #fff !important;
  filter: brightness(1.07);
}
.main-header .header-rail .btn.header-cta:active { transform: translateY(1px); }
.main-header .header-rail .btn.header-cta > i { font-size: 14px; }

/* --- Date chip ----------------------------------------------------------- */
.main-header .header-rail .header-date-chip {
  align-items: center;
  background: #fff;
  border: 1px solid var(--wl-header-line);
  border-radius: 10px;
  color: var(--wl-header-ink);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  gap: 8px;
  height: 38px;
  padding: 0 13px;
  white-space: nowrap;
}
.main-header .header-rail .header-date-chip > i { color: #4f97a6; font-size: 13px; }

/* --- Language toggle (EN / বাংলা) ---------------------------------------- */
.main-header .header-rail .header-lang-switch {
  align-items: center;
  background: var(--wl-header-tint);
  border: 1px solid var(--wl-header-line);
  border-radius: 10px;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 2px;
  height: 38px;
  padding: 3px;
  white-space: nowrap;
}
.main-header .header-rail .header-lang-switch__option {
  align-items: center;
  border-radius: 8px;
  color: #2a5a67 !important;
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  height: 30px;
  justify-content: center;
  line-height: 1;
  min-width: 38px;
  padding: 0 9px;
  text-decoration: none !important;
  transition: background .15s ease, color .15s ease;
}
.main-header .header-rail .header-lang-switch__option:hover,
.main-header .header-rail .header-lang-switch__option:focus {
  background: #fff;
  color: #175c6d !important;
}
.main-header .header-rail .header-lang-switch__option.is-active {
  background: linear-gradient(135deg, #22778a 0%, #175c6d 100%);
  box-shadow: 0 2px 6px rgba(23, 92, 109, .24);
  color: #fff !important;
}

/* --- Divider between actions and the utility cluster --------------------- */
.header-rail-divider {
  background: #e2edef;
  display: block;
  flex: 0 0 1px;
  height: 26px;
  margin: 0 4px;
  width: 1px;
}

/* --- Notifications ------------------------------------------------------- */
.main-header .header-rail .navbar-nav > .notifications-menu > .header-bell {
  align-items: center;
  background: transparent !important;
  border-radius: 10px;
  color: #2a5a67 !important;
  display: flex;
  font-size: 16px;
  height: 38px;
  justify-content: center;
  padding: 0 !important;
  position: relative;
  transition: background .15s ease, color .15s ease;
  width: 38px;
}
.main-header .header-rail .navbar-nav > .notifications-menu > .header-bell:hover,
.main-header .header-rail .navbar-nav > .notifications-menu > .header-bell:focus,
.main-header .header-rail .navbar-nav > .notifications-menu.open > .header-bell {
  background: var(--wl-header-tint-strong) !important;
  color: #175c6d !important;
}
.main-header .header-rail .header-bell > .notifications_count {
  align-items: center;
  background: #e5484d !important;
  border: 2px solid #fff;
  border-radius: 999px;
  color: #fff !important;
  display: flex;
  font-size: 10px;
  font-weight: 700;
  height: 19px;
  justify-content: center;
  left: auto;
  line-height: 1;
  min-width: 19px;
  padding: 0 4px;
  position: absolute;
  right: 2px;
  text-shadow: none;
  top: 2px;
}
.main-header .header-rail .header-bell > .notifications_count:empty { display: none; }

/* --- Account menu -------------------------------------------------------- */
.main-header .header-rail .navbar-nav > .user-menu > .account-menu-toggle {
  align-items: center;
  background: var(--wl-header-tint) !important;
  border: 1px solid var(--wl-header-line) !important;
  border-radius: 999px;
  color: var(--wl-header-ink) !important;
  display: flex !important;
  gap: 9px;
  height: 42px;
  margin-left: 2px;
  min-height: 0;
  padding: 0 11px 0 4px !important;
  transition: background .15s ease, border-color .15s ease;
}
.main-header .header-rail .navbar-nav > .user-menu > .account-menu-toggle:hover,
.main-header .header-rail .navbar-nav > .user-menu > .account-menu-toggle:focus,
.main-header .header-rail .navbar-nav > .user-menu.open > .account-menu-toggle {
  background: var(--wl-header-tint-strong) !important;
  border-color: #c4dde2 !important;
  color: var(--wl-header-ink) !important;
}
.account-avatar, .account-summary-avatar {
  align-items: center;
  background: linear-gradient(135deg, #2a8ba0 0%, #145364 100%);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  justify-content: center;
  letter-spacing: .03em;
  overflow: hidden;
}
.account-avatar { height: 34px; width: 34px; }
.account-avatar img { height: 100%; object-fit: cover; width: 100%; }
.account-menu-meta { display: flex; flex-direction: column; line-height: 1.2; max-width: 150px; min-width: 0; text-align: left; }
.account-menu-name {
  color: var(--wl-header-ink);
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-menu-role {
  color: var(--wl-header-ink-soft);
  font-size: 11px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: capitalize;
  white-space: nowrap;
}
.account-menu-caret { color: #7fa3ac; font-size: 10px; margin-left: 1px; }

/* --- Header dropdown surfaces -------------------------------------------- */
.main-header .header-rail .dropdown-menu {
  border: 1px solid var(--wl-header-line);
  border-radius: 12px;
  box-shadow: 0 18px 38px rgba(16,63,80,.16);
  margin-top: 8px;
  padding: 0;
}
.main-header .header-rail .header-action-menu,
.main-header .navbar-nav > .user-menu > .account-dropdown { padding: 7px; }
.main-header .navbar-nav > .user-menu > .account-dropdown {
  background: #fff;
  border: 1px solid var(--wl-header-line);
  border-radius: 12px;
  box-shadow: 0 18px 38px rgba(16,63,80,.16);
  margin-top: 8px;
  overflow: hidden;
  width: 290px;
}
.header-action-menu > li > a {
  align-items: center;
  border-radius: 8px;
  color: #2b4e58 !important;
  display: flex;
  font-size: 13px;
  font-weight: 600;
  gap: 10px;
  padding: 10px 11px;
}
.header-action-menu > li > a:hover,
.header-action-menu > li > a:focus { background: var(--wl-header-tint-strong); color: #175c6d !important; }
.header-action-menu > li > a > i { color: #5d97a4; font-size: 14px; text-align: center; width: 16px; }

.account-dropdown .account-summary { align-items: center; display: flex; gap: 12px; padding: 11px 10px 14px; }
.account-dropdown .account-summary > .account-summary-avatar { display: inline-flex; font-size: 15px; height: 42px; width: 42px; }
.account-summary > div { min-width: 0; }
.account-summary > div > strong { color: #17414d; display: block; font-size: 14px; font-weight: 700; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-summary > div > span { color: var(--wl-header-ink-soft); display: block; font-size: 12px; margin-top: 2px; text-transform: capitalize; }
.account-menu-divider { background: #e6eff1; height: 1px; margin: 0 4px 6px; }
.account-dropdown > li > .account-menu-link {
  align-items: center;
  border-radius: 8px;
  color: #3a5a63 !important;
  display: flex;
  font-size: 13px;
  font-weight: 600;
  gap: 11px;
  padding: 11px 12px;
}
.account-dropdown > li > .account-menu-link:hover,
.account-dropdown > li > .account-menu-link:focus { background: var(--wl-header-tint-strong); color: #175c6d !important; }
.account-menu-link > i:first-child { color: #5d97a4; font-size: 15px; text-align: center; width: 18px; }
.account-menu-link:hover > i:first-child { color: #1d7488; }
.account-menu-arrow { color: #9db6bc; font-size: 11px; margin-left: auto; }
.account-dropdown > li > .account-signout { color: #b04a4a !important; margin-top: 3px; }
.account-dropdown > li > .account-signout:hover { background: #fdf2f2; color: #8e3737 !important; }
.account-dropdown > li > .account-signout > i:first-child { color: #c06060; }
.account-dropdown > li > .account-signout:hover > i:first-child { color: #8e3737; }

/* --- Tablet: the brand block folds away with the off-canvas sidebar ------ */
@media (min-width: 768px) and (max-width: 991px) {
  .main-header .navbar > .sidebar-toggle {
    background: var(--wl-header-tint) !important;
    border: 1px solid var(--wl-header-line) !important;
    color: #1d4e5b !important;
  }
  .main-header .header-rail .btn.header-cta > span { display: none; }
  .main-header .header-rail .btn.header-cta { padding: 0 12px !important; }
}

/* --- Phones: single scrollable rail, avatar collapses to the circle ------ */
@media (max-width: 767px) {
  .main-header .logo,
  body[class*="skin-"] .main-header .logo {
    align-items: center;
    display: flex !important;
    height: 50px;
    line-height: 1;
    padding: 0 12px;
  }
  .main-header .navbar { min-height: 50px; }
  .main-header .navbar > .sidebar-toggle {
    background: var(--wl-header-tint) !important;
    border: 1px solid var(--wl-header-line) !important;
    color: #1d4e5b !important;
    height: 34px;
    margin: 8px 4px 8px 8px;
    width: 34px;
  }
  /* Wrap rather than scroll: an overflow container would clip the dropdowns. */
  .main-header .navbar-custom-menu.header-rail {
    display: flex !important;
    float: none !important;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: flex-end;
    padding: 4px 8px;
  }
  .main-header .header-rail .btn.header-action,
  .main-header .header-rail .btn.clock_in_btn,
  .main-header .header-rail .btn.clock_out_btn {
    font-size: 14px;
    height: 34px;
    min-height: 34px;
    min-width: 34px;
    width: 34px;
  }
  .main-header .header-rail .btn.header-cta {
    font-size: 12px;
    height: 34px;
    min-height: 34px;
    padding: 0 12px !important;
  }
  .main-header .header-rail .btn.header-cta > span { display: none; }
  .main-header .header-rail .header-lang-switch { height: 34px; padding: 2px; }
  .main-header .header-rail .header-lang-switch__option { font-size: 11px; height: 28px; min-width: 32px; padding: 0 7px; }
  .main-header .header-rail .navbar-nav > .notifications-menu > .header-bell { height: 34px; width: 34px; }
  .main-header .header-rail .navbar-nav > .user-menu > .account-menu-toggle {
    height: 36px;
    justify-content: center;
    padding: 0 3px !important;
  }
  .account-avatar { height: 30px; width: 30px; }
  .main-header .navbar-nav > .user-menu > .account-dropdown { left: auto; right: 5px; width: 278px; }
}

/* ------------------------------------------------- business logo preview ---
 * Settings > Business. A file input reports a file NAME only, so without this the
 * operator cannot tell whether a logo is already saved, nor whether the file they
 * just picked is the right image. The box always occupies the same space, so the
 * form does not jump when a picture appears in it.
 */
.logo-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 84px;
  margin-top: 8px;
  padding: 8px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
}

.logo-preview__img {
  max-width: 100%;
  max-height: 68px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.logo-preview__empty {
  color: #94a3b8;
  font-size: 12.5px;
}

.logo-preview__empty i { margin-right: 5px; }

/* Sub-menu icons: every child entry carries its own icon instead of a generic bullet. */
.sidebar-menu .treeview-menu > li > a::before { content:none!important; display:none!important; }
.sidebar-menu .treeview-menu > li > a { padding:7px 9px!important; }
.sidebar-menu .treeview-menu > li > a > i,
.sidebar-menu .treeview-menu > li > a > .fa,
.sidebar-menu .treeview-menu > li > a > .fas,
.sidebar-menu .treeview-menu > li > a > .far {
  align-items:center;
  background:rgba(222,246,245,.08)!important;
  border:0!important;
  border-radius:6px!important;
  color:#9fd3da!important;
  display:inline-flex!important;
  flex:0 0 22px!important;
  font-size:11px!important;
  height:22px!important;
  justify-content:center;
  margin-right:9px!important;
  width:22px!important;
}
.sidebar-menu .treeview-menu > li > a:hover > i,
.sidebar-menu .treeview-menu > li > a:hover > .fa,
.sidebar-menu .treeview-menu > li > a:hover > .fas,
.sidebar-menu .treeview-menu > li > a:hover > .far { background:rgba(255,255,255,.14)!important; color:#fff!important; }
.sidebar-menu .treeview-menu > li.active > a > i,
.sidebar-menu .treeview-menu > li.active > a > .fa,
.sidebar-menu .treeview-menu > li.active > a > .fas,
.sidebar-menu .treeview-menu > li.active > a > .far { background:rgba(142,224,218,.2)!important; color:#8ee0da!important; }

/* Page header: icon, parent section, title - the same anchor the section hub gives. */
.content-wrapper > .content-header:not(.content-header-custom) {
  background:transparent!important;
  border-bottom:1px solid #dbe7ea;
  margin:0 24px;
  padding:24px 0 18px!important;
}
.wl-page-head { align-items:center; display:flex; gap:14px; }
.wl-page-head__icon {
  align-items:center;
  background:#eff9f7;
  border:1px solid #ddf0ed;
  border-radius:10px;
  color:#218173;
  display:inline-flex;
  flex:0 0 44px;
  font-size:18px;
  height:44px;
  justify-content:center;
}
.wl-page-head__text { min-width:0; }
.wl-page-head__eyebrow {
  color:#7f979d;
  display:block;
  font-size:11px;
  font-weight:700;
  letter-spacing:.09em;
  line-height:1.3;
  margin-bottom:3px;
  text-transform:uppercase;
}
.content-wrapper > .content-header:not(.content-header-custom) > h1,
.wl-page-head__text > h1 {
  color:#193c46!important;
  display:block;
  font-size:25px;
  font-weight:700;
  letter-spacing:-.025em;
  line-height:1.2;
  margin:0;
}
.content-wrapper > .content-header:not(.content-header-custom) > h1 > small,
.wl-page-head__text > h1 > small {
  color:#789097;
  display:block;
  font-size:13px;
  font-weight:400;
  letter-spacing:0;
  line-height:1.5;
  margin:5px 0 0;
}

@media (max-width: 991px) {
  .content-wrapper > .content-header:not(.content-header-custom) { margin:0 16px; padding:18px 0 14px!important; }
  .wl-page-head { gap:11px; }
  .wl-page-head__icon { flex:0 0 36px; font-size:15px; height:36px; }
  .content-wrapper > .content-header:not(.content-header-custom) > h1,
  .wl-page-head__text > h1 { font-size:21px; }
}