/*!
 * Cash Cloud — modern list tables / tabs / buttons
 * Loaded as a separate stylesheet to bypass stale app.css cache.
 * Visual only. Excludes: #pos_table, .table-pdf, .table-slim, print.
 */
 :root {
  --cc-table-header-bg: #F5F8FC;
  --cc-table-header-text: #0F2A5F;
  --cc-table-border: #E8EEF5;
  --cc-table-border-soft: #E5ECF3;
  --cc-table-row-alt: #FAFCFE;
  --cc-table-row-hover: #F2FAFC;
  --cc-table-text: #24324a;
}

/* ===== Tables ===== */
html body .content-wrapper table.table:not(#pos_table):not(.table-pdf):not(.table-slim),
html body .modal table.table:not(#pos_table):not(.table-pdf):not(.table-slim),
html body .dataTables_wrapper table.table:not(#pos_table):not(.table-pdf):not(.table-slim),
html body .dataTables_scrollHead table.table:not(#pos_table),
html body .dataTables_scrollBody table.table:not(#pos_table) {
  background-color: #fff !important;
  color: var(--cc-table-text) !important;
  font-size: 13px !important;
  margin-bottom: 0 !important;
}

/*
 * Pixel-perfect thead ↔ tbody column alignment (system-wide).
 *
 * Root cause (confirmed): DataTables uses box-sizing:content-box AND
 * sortable headers get extra horizontal padding (28–30px) while body cells
 * stay at 12px. Same style="width" then yields different OUTER widths →
 * progressive header/body drift (worse with scrollX/scrollY dual tables).
 *
 * Fix: identical padding on th+td; sort icons via absolute :after (no extra pad);
 * border-box safety; preserve scrollHeadInner scrollbar gutter. No JS.
 * Excludes: #pos_table, .table-pdf, .table-slim, POS lockscreen.
 */
html body:not(.lockscreen) .content-wrapper table.table:not(#pos_table):not(.table-pdf):not(.table-slim),
html body:not(.lockscreen) .modal table.table:not(#pos_table):not(.table-pdf):not(.table-slim),
html body:not(.lockscreen) .dataTables_wrapper table.table:not(#pos_table),
html body:not(.lockscreen) .dataTables_wrapper table.dataTable:not(#pos_table),
html body:not(.lockscreen) .dataTables_scrollHead table.table:not(#pos_table),
html body:not(.lockscreen) .dataTables_scrollHead table.dataTable:not(#pos_table),
html body:not(.lockscreen) .dataTables_scrollBody table.table:not(#pos_table),
html body:not(.lockscreen) .dataTables_scrollBody table.dataTable:not(#pos_table),
html body:not(.lockscreen) table.dataTable:not(#pos_table) {
  max-width: none !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

html body:not(.lockscreen) .content-wrapper table.table:not(#pos_table):not(.table-pdf):not(.table-slim) > thead > tr > th,
html body:not(.lockscreen) .content-wrapper table.table:not(#pos_table):not(.table-pdf):not(.table-slim) > tbody > tr > td,
html body:not(.lockscreen) .content-wrapper table.table:not(#pos_table):not(.table-pdf):not(.table-slim) > tfoot > tr > td,
html body:not(.lockscreen) .modal table.table:not(#pos_table):not(.table-pdf):not(.table-slim) > thead > tr > th,
html body:not(.lockscreen) .modal table.table:not(#pos_table):not(.table-pdf):not(.table-slim) > tbody > tr > td,
html body:not(.lockscreen) .dataTables_wrapper table.table:not(#pos_table) > thead > tr > th,
html body:not(.lockscreen) .dataTables_wrapper table.table:not(#pos_table) > tbody > tr > td,
html body:not(.lockscreen) .dataTables_wrapper table.table:not(#pos_table) > tfoot > tr > td,
html body:not(.lockscreen) .dataTables_wrapper table.dataTable:not(#pos_table) > thead > tr > th,
html body:not(.lockscreen) .dataTables_wrapper table.dataTable:not(#pos_table) > thead > tr > td,
html body:not(.lockscreen) .dataTables_wrapper table.dataTable:not(#pos_table) > tbody > tr > td,
html body:not(.lockscreen) .dataTables_scrollHead table:not(#pos_table) > thead > tr > th,
html body:not(.lockscreen) .dataTables_scrollHead table:not(#pos_table) > thead > tr > td,
html body:not(.lockscreen) .dataTables_scrollBody table:not(#pos_table) > thead > tr > th,
html body:not(.lockscreen) .dataTables_scrollBody table:not(#pos_table) > thead > tr > td,
html body:not(.lockscreen) .dataTables_scrollBody table:not(#pos_table) > tbody > tr > td,
html body:not(.lockscreen) table.dataTable:not(#pos_table) > thead > tr > th,
html body:not(.lockscreen) table.dataTable:not(#pos_table) > thead > tr > td,
html body:not(.lockscreen) table.dataTable:not(#pos_table) > tbody > tr > td {
  -webkit-box-sizing: border-box !important;
  box-sizing: border-box !important;
  /* Identical L/R padding on header AND body — critical for column edges */
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* Sortable headers: SAME padding as td (override DT padding-right:30px + our old 28px) */
html body:not(.lockscreen) table.dataTable thead > tr > th.sorting,
html body:not(.lockscreen) table.dataTable thead > tr > th.sorting_asc,
html body:not(.lockscreen) table.dataTable thead > tr > th.sorting_desc,
html body:not(.lockscreen) table.dataTable thead > tr > th.sorting_asc_disabled,
html body:not(.lockscreen) table.dataTable thead > tr > th.sorting_desc_disabled,
html body:not(.lockscreen) table.dataTable thead > tr > td.sorting,
html body:not(.lockscreen) table.dataTable thead > tr > td.sorting_asc,
html body:not(.lockscreen) table.dataTable thead > tr > td.sorting_desc,
html body:not(.lockscreen) .dataTables_wrapper table.dataTable thead > tr > th.sorting,
html body:not(.lockscreen) .dataTables_wrapper table.dataTable thead > tr > th.sorting_asc,
html body:not(.lockscreen) .dataTables_wrapper table.dataTable thead > tr > th.sorting_desc,
html body:not(.lockscreen) .dataTables_scrollHeadInner table thead > tr > th.sorting,
html body:not(.lockscreen) .dataTables_scrollHeadInner table thead > tr > th.sorting_asc,
html body:not(.lockscreen) .dataTables_scrollHeadInner table thead > tr > th.sorting_desc,
html body:not(.lockscreen) .dataTables_scrollHead table thead > tr > th.sorting,
html body:not(.lockscreen) .dataTables_scrollHead table thead > tr > th.sorting_asc,
html body:not(.lockscreen) .dataTables_scrollHead table thead > tr > th.sorting_desc {
  padding: 8px 12px !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  background-image: none !important; /* kill sprites that needed extra pad */
  position: relative !important;
}

/* Sort icons via absolute :after — does not change cell outer width */
html body:not(.lockscreen) table.dataTable thead > tr > th.sorting:after,
html body:not(.lockscreen) table.dataTable thead > tr > th.sorting_asc:after,
html body:not(.lockscreen) table.dataTable thead > tr > th.sorting_desc:after,
html body:not(.lockscreen) table.dataTable thead > tr > th.sorting_asc_disabled:after,
html body:not(.lockscreen) table.dataTable thead > tr > th.sorting_desc_disabled:after,
html body:not(.lockscreen) .dataTables_scrollHead table thead > tr > th.sorting:after,
html body:not(.lockscreen) .dataTables_scrollHead table thead > tr > th.sorting_asc:after,
html body:not(.lockscreen) .dataTables_scrollHead table thead > tr > th.sorting_desc:after {
  position: absolute !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  display: block !important;
  font-family: "Glyphicons Halflings", "Font Awesome 5 Free", sans-serif !important;
  font-size: 10px !important;
  line-height: 1 !important;
  opacity: 0.45 !important;
  pointer-events: none !important;
  right: 4px !important;
  left: auto !important;
}
html[dir="rtl"] body:not(.lockscreen) table.dataTable thead > tr > th.sorting:after,
html[dir="rtl"] body:not(.lockscreen) table.dataTable thead > tr > th.sorting_asc:after,
html[dir="rtl"] body:not(.lockscreen) table.dataTable thead > tr > th.sorting_desc:after,
html[dir="rtl"] body:not(.lockscreen) .dataTables_scrollHead table thead > tr > th.sorting:after,
html[dir="rtl"] body:not(.lockscreen) .dataTables_scrollHead table thead > tr > th.sorting_asc:after,
html[dir="rtl"] body:not(.lockscreen) .dataTables_scrollHead table thead > tr > th.sorting_desc:after {
  left: 4px !important;
  right: auto !important;
}
html body:not(.lockscreen) table.dataTable thead > tr > th.sorting:after {
  content: "\e150" !important;
  opacity: 0.25 !important;
}
html body:not(.lockscreen) table.dataTable thead > tr > th.sorting_asc:after {
  content: "\e155" !important;
  opacity: 0.55 !important;
}
html body:not(.lockscreen) table.dataTable thead > tr > th.sorting_desc:after {
  content: "\e156" !important;
  opacity: 0.55 !important;
}

/* Scroll clones: never kill DT scrollbar gutter on scrollHeadInner */
html body:not(.lockscreen) .dataTables_scroll {
  clear: both;
}
html body:not(.lockscreen) .dataTables_scrollHead {
  overflow: hidden !important;
}
html body:not(.lockscreen) .dataTables_scrollHeadInner {
  box-sizing: content-box !important;
}
html body:not(.lockscreen) .dataTables_scrollHeadInner > table,
html body:not(.lockscreen) .dataTables_scrollBody > table,
html body:not(.lockscreen) .dataTables_scrollFootInner > table {
  margin: 0 !important;
  max-width: none !important;
}
html body:not(.lockscreen) .dataTables_scrollBody {
  overflow-x: auto !important;
  overflow-y: auto !important;
}

/* scrollX: let table grow beyond viewport when many columns are visible */
html body:not(.lockscreen) .dataTables_scrollHead table:not(#pos_table),
html body:not(.lockscreen) .dataTables_scrollBody table:not(#pos_table),
html body:not(.lockscreen) .dataTables_scrollFoot table:not(#pos_table) {
  min-width: 100% !important;
  max-width: none !important;
}
html body:not(.lockscreen) .dataTables_scrollBody table:not(#pos_table) > tbody > tr > td,
html body:not(.lockscreen) .dataTables_scrollHead table:not(#pos_table) > thead > tr > th,
html body:not(.lockscreen) .dataTables_scrollFoot table:not(#pos_table) > tfoot > tr > th,
html body:not(.lockscreen) .dataTables_scrollFoot table:not(#pos_table) > tfoot > tr > td {
  white-space: nowrap !important;
}

html body .content-wrapper table.table:not(#pos_table):not(.table-pdf):not(.table-slim) > thead > tr > th,
html body .modal table.table:not(#pos_table):not(.table-pdf):not(.table-slim) > thead > tr > th,
html body .dataTables_wrapper table.table:not(#pos_table) > thead > tr > th,
html body .dataTables_scrollHead table.table:not(#pos_table) > thead > tr > th,
html body table.dataTable:not(#pos_table) > thead > tr > th {
  background-color: #F5F8FC !important;
  color: #0F2A5F !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 1px solid #DDE7F1 !important;
  vertical-align: middle !important;
  white-space: nowrap;
  box-shadow: none !important;
}
/* Non-sortable: normal padding, no sort sprite */
html body .content-wrapper table.table:not(#pos_table) > thead > tr > th:not(.sorting):not(.sorting_asc):not(.sorting_desc):not(.sorting_disabled),
html body .dataTables_wrapper table.table:not(#pos_table) > thead > tr > th:not(.sorting):not(.sorting_asc):not(.sorting_desc):not(.sorting_disabled),
html body .dataTables_scrollHead table.table:not(#pos_table) > thead > tr > th:not(.sorting):not(.sorting_asc):not(.sorting_desc):not(.sorting_disabled),
html body table.dataTable:not(#pos_table) > thead > tr > th:not(.sorting):not(.sorting_asc):not(.sorting_desc):not(.sorting_disabled) {
  padding: 10px 12px !important;
  background-image: none !important;
}

html body .content-wrapper table.table:not(#pos_table):not(.table-pdf):not(.table-slim) > tbody > tr > td,
html body .content-wrapper table.table:not(#pos_table):not(.table-pdf):not(.table-slim) > tfoot > tr > td,
html body .modal table.table:not(#pos_table):not(.table-pdf):not(.table-slim) > tbody > tr > td,
html body .dataTables_wrapper table.table:not(#pos_table) > tbody > tr > td,
html body .dataTables_scrollBody table.table:not(#pos_table) > tbody > tr > td,
html body table.dataTable:not(#pos_table) > tbody > tr > td {
  padding: 8px 12px !important;
  vertical-align: middle !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 1px solid #E8EEF5 !important;
  background-color: #fff !important;
  color: #24324a !important;
}

html body .content-wrapper table.table-striped:not(#pos_table):not(.table-pdf):not(.table-slim) > tbody > tr:nth-of-type(odd) > td,
html body .dataTables_wrapper table.table-striped:not(#pos_table) > tbody > tr:nth-of-type(odd) > td,
html body table.dataTable.table-striped:not(#pos_table) > tbody > tr:nth-of-type(odd) > td {
  background-color: #FAFCFE !important;
}

html body .content-wrapper table.table:not(#pos_table):not(.table-pdf):not(.table-slim) > tbody > tr:hover > td,
html body .dataTables_wrapper table.table:not(#pos_table) > tbody > tr:hover > td,
html body table.dataTable:not(#pos_table) > tbody > tr:hover > td {
  background-color: #F2FAFC !important;
}

html body .content-wrapper table.table-bordered:not(#pos_table):not(.table-pdf):not(.table-slim),
html body .modal table.table-bordered:not(#pos_table):not(.table-pdf):not(.table-slim),
html body .dataTables_wrapper table.table-bordered:not(#pos_table) {
  border: 1px solid #E5ECF3 !important;
}

html body .content-wrapper table.table-bordered:not(#pos_table):not(.table-pdf):not(.table-slim) > thead > tr > th,
html body .content-wrapper table.table-bordered:not(#pos_table):not(.table-pdf):not(.table-slim) > tbody > tr > td,
html body .content-wrapper table.table-bordered:not(#pos_table):not(.table-pdf):not(.table-slim) > tfoot > tr > td,
html body .dataTables_wrapper table.table-bordered:not(#pos_table) > thead > tr > th,
html body .dataTables_wrapper table.table-bordered:not(#pos_table) > tbody > tr > td {
  border-left: 0 !important;
  border-right: 0 !important;
  border-color: #E8EEF5 !important;
}

html body table.dataTable:not(#pos_table) tbody > tr.selected > td,
html body table.dataTable:not(#pos_table) tbody > tr.selected:hover > td {
  background-color: #DBE4F0 !important;
}

html body .blue-header th {
  background-color: #2563EB !important;
  color: #fff !important;
}
html body .table-th-green th,
html body .add-product-price-table th {
  background: #d7efff !important;
  background-color: #d7efff !important;
  background-image: none !important;
  color: #27445d !important;
}
html body .table-th-green th .fa,
html body .table-th-green th .fa-info-circle,
html body .add-product-price-table th .fa,
html body .add-product-price-table th .fa-info-circle {
  color: #3b82f6 !important;
}

/* Selling-price cell highlight — brand identity (replaces neon green inset) */
html body .add-product-price-table td.cc-price-sell-cell {
  box-shadow: inset 0 0 0 2px rgba(var(--cc-primary-rgb, 37, 99, 235), 0.45) !important;
}

/*
 * Sort header styling (colors only).
 * Padding + icons handled above in alignment block — do NOT reintroduce extra L/R pad.
 */
html body table.dataTable thead > tr > th.sorting,
html body table.dataTable thead > tr > th.sorting_asc,
html body table.dataTable thead > tr > th.sorting_desc,
html body table.dataTable thead > tr > td.sorting,
html body table.dataTable thead > tr > td.sorting_asc,
html body table.dataTable thead > tr > td.sorting_desc,
html body .dataTables_wrapper table.dataTable thead > tr > th.sorting,
html body .dataTables_wrapper table.dataTable thead > tr > th.sorting_asc,
html body .dataTables_wrapper table.dataTable thead > tr > th.sorting_desc,
html body .dataTables_scrollHeadInner table thead > tr > th.sorting,
html body .dataTables_scrollHeadInner table thead > tr > th.sorting_asc,
html body .dataTables_scrollHeadInner table thead > tr > th.sorting_desc,
html body .dataTables_scrollHead table thead > tr > th.sorting,
html body .dataTables_scrollHead table thead > tr > th.sorting_asc,
html body .dataTables_scrollHead table thead > tr > th.sorting_desc {
  color: #0F2A5F !important;
  background-color: #F5F8FC !important;
  background-image: none !important;
  background-repeat: no-repeat !important;
}

/* Legacy sprite position rules — no-op now that sprites are disabled */
html[dir="rtl"] body table.dataTable thead > tr > th.sorting,
html[dir="rtl"] body table.dataTable thead > tr > th.sorting_asc,
html[dir="rtl"] body table.dataTable thead > tr > th.sorting_desc,
html[dir="rtl"] body .dataTables_wrapper table.dataTable thead > tr > th.sorting,
html[dir="rtl"] body .dataTables_wrapper table.dataTable thead > tr > th.sorting_asc,
html[dir="rtl"] body .dataTables_wrapper table.dataTable thead > tr > th.sorting_desc,
html[dir="rtl"] body .dataTables_scrollHead table thead > tr > th.sorting,
html[dir="rtl"] body .dataTables_scrollHead table thead > tr > th.sorting_asc,
html[dir="rtl"] body .dataTables_scrollHead table thead > tr > th.sorting_desc,
html[dir="rtl"] body .dataTables_scrollHeadInner table thead > tr > th.sorting,
html[dir="rtl"] body .dataTables_scrollHeadInner table thead > tr > th.sorting_asc,
html[dir="rtl"] body .dataTables_scrollHeadInner table thead > tr > th.sorting_desc {
  background-image: none !important;
}

/*
 * scrollY clone-header gap fix:
 * DataTables measures column widths from text inside .dataTables_sizing in the
 * hidden scrollBody thead. Do NOT set font-size:0 / visibility:hidden on those
 * cells — that collapses measured widths → table fits viewport (broken scrollX)
 * and thead↔tbody drift. Collapse vertical space only; keep readable font size
 * for measurement. Never touch #pos_table / POS.
 */
html body .dataTables_scrollBody table.table:not(#pos_table) > thead > tr > th,
html body .dataTables_scrollBody table.dataTable:not(#pos_table) > thead > tr > th,
html body .dataTables_scrollBody table.table:not(#pos_table) > thead > tr > td,
html body .dataTables_scrollBody table.dataTable:not(#pos_table) > thead > tr > td {
  height: 0 !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  border: none !important;
  border-width: 0 !important;
  line-height: 0 !important;
  /* keep real font-size for width math — critical for scrollX */
  overflow: hidden !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: transparent !important;
  box-sizing: border-box !important;
}
html body .dataTables_scrollBody table.table:not(#pos_table) > thead .dataTables_sizing,
html body .dataTables_scrollBody table.dataTable:not(#pos_table) > thead .dataTables_sizing {
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  /* visible to layout engine for width; clipped by height:0 */
  visibility: visible !important;
  color: transparent !important;
  line-height: normal !important;
  font-size: 13px !important;
  white-space: nowrap !important;
}
html body .dataTables_scrollBody table.table:not(#pos_table) > thead input,
html body .dataTables_scrollBody table.dataTable:not(#pos_table) > thead input {
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}

/* LTR: sprites disabled — :after icons handle sort affordance */
html[dir="ltr"] body table.dataTable thead > tr > th.sorting,
html[dir="ltr"] body table.dataTable thead > tr > th.sorting_asc,
html[dir="ltr"] body table.dataTable thead > tr > th.sorting_desc,
html[dir="ltr"] body .dataTables_wrapper table.dataTable thead > tr > th.sorting,
html[dir="ltr"] body .dataTables_wrapper table.dataTable thead > tr > th.sorting_asc,
html[dir="ltr"] body .dataTables_wrapper table.dataTable thead > tr > th.sorting_desc,
html[dir="ltr"] body .dataTables_scrollHead table thead > tr > th.sorting,
html[dir="ltr"] body .dataTables_scrollHead table thead > tr > th.sorting_asc,
html[dir="ltr"] body .dataTables_scrollHead table thead > tr > th.sorting_desc {
  background-image: none !important;
}

/* ===== Tabs — pill style + gradient underline (reference) ===== */
html body .content-wrapper .nav-tabs-custom {
  background: #fff !important;
  border-radius: 12px !important;
  border: 1px solid #E8EEF5 !important;
  box-shadow: none !important;
  margin-bottom: 16px;
  overflow: hidden;
}
html body .nav-tabs-custom > .nav-tabs {
  background: #F5F7FA !important;
  border-bottom: 1px solid #E8EEF5 !important;
  margin: 0 !important;
  padding: 10px 12px 8px !important;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
html body .nav-tabs-custom > .nav-tabs > li {
  float: none !important;
  margin: 0 !important;
  border: 0 !important;
  position: relative;
}
html body .nav-tabs-custom > .nav-tabs > li > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #1E3A5F !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 9999px !important;
  margin: 0 !important;
  padding: 9px 18px !important;
  line-height: 1.3 !important;
  box-shadow: none !important;
  transition: background-color .15s ease, color .15s ease;
}
html body .nav-tabs-custom > .nav-tabs > li > a > .fa,
html body .nav-tabs-custom > .nav-tabs > li > a > .fas,
html body .nav-tabs-custom > .nav-tabs > li > a > .far,
html body .nav-tabs-custom > .nav-tabs > li > a > i {
  color: #1E3A5F !important;
  margin: 0 !important;
  font-size: 14px !important;
}
html body .nav-tabs-custom > .nav-tabs > li > a:hover {
  background: rgba(255, 255, 255, 0.72) !important;
  color: #0F2A5F !important;
  border: 0 !important;
}
html body .nav-tabs-custom > .nav-tabs > li.active > a,
html body .nav-tabs-custom > .nav-tabs > li.active > a:hover,
html body .nav-tabs-custom > .nav-tabs > li.active > a:focus {
  background: #fff !important;
  color: #1E3A5F !important;
  border: 0 !important;
  border-radius: 9999px !important;
  box-shadow: 0 1px 3px rgba(15, 42, 95, 0.06) !important;
}
html body .nav-tabs-custom > .nav-tabs > li.active > a > .fa,
html body .nav-tabs-custom > .nav-tabs > li.active > a > .fas,
html body .nav-tabs-custom > .nav-tabs > li.active > a > .far,
html body .nav-tabs-custom > .nav-tabs > li.active > a > i {
  color: #1E3A5F !important;
}
/* Gradient underline under active pill — skip bookings module tabs */
html body .nav-tabs-custom:not(.bm-tabs) > .nav-tabs > li.active::after {
  content: "";
  display: block;
  height: 3px;
  width: calc(100% - 16px);
  margin: 4px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #38BDF8 0%, #2563EB 55%, #1D4ED8 100%);
}
html body .nav-tabs-custom > .tab-content {
  background: #fff !important;
  padding: 12px 14px 16px !important;
  border-radius: 0 0 12px 12px;
}

/* ===== Buttons ===== */
html body .content-wrapper .btn:not(.pos-express-btn),
html body .nav-tabs-custom .btn,
html body .box .btn {
  border-radius: 8px !important;
}

html body .content-wrapper a.tw-dw-btn.tw-rounded-full,
html body .nav-tabs-custom a.tw-dw-btn.tw-rounded-full,
html body .content-wrapper a.tw-dw-btn.tw-bg-gradient-to-r,
html body .nav-tabs-custom a.tw-dw-btn.tw-bg-gradient-to-r {
  border-radius: 9999px !important;
  min-height: 36px !important;
  height: 36px !important;
  padding: 5px 14px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  box-shadow: 0 1px 5px rgba(37, 99, 235, 0.18) !important;
  border: none !important;
  color: #fff !important;
  vertical-align: middle !important;
  margin-inline-start: 0 !important;
}
html body .content-wrapper a.tw-dw-btn.tw-rounded-full svg,
html body .nav-tabs-custom a.tw-dw-btn.tw-rounded-full svg,
html body .content-wrapper a.tw-dw-btn.tw-bg-gradient-to-r svg,
html body .nav-tabs-custom a.tw-dw-btn.tw-bg-gradient-to-r svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0;
}

/* Align Add button with box title — prevent overlap
   Layout uses #scrollable-container / .cc-app-content (not .content-wrapper) */
html body #scrollable-container .box-header,
html body .cc-app-content .box-header,
html body .content-wrapper .box-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 48px;
  padding: 10px 12px !important;
  position: relative !important;
  overflow: visible !important;
}
html body #scrollable-container .box-header:has(.box-tools),
html body #scrollable-container .box-header:has(a.tw-dw-btn),
html body .cc-app-content .box-header:has(.box-tools),
html body .cc-app-content .box-header:has(a.tw-dw-btn) {
  /* flex-start = visual right in RTL (before JS moves button beside عرض) */
  justify-content: flex-start !important;
}
html body #scrollable-container .box-header.cc-box-header-empty,
html body .cc-app-content .box-header.cc-box-header-empty {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}
/* Toolbar: Add + عرض + exports + search — one aligned row (no overlap hacks) */
html body:not(.lockscreen) #scrollable-container .dataTables_wrapper .dataTables_length.cc-length-with-add,
html body:not(.lockscreen) .cc-app-content .dataTables_wrapper .dataTables_length.cc-length-with-add {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  float: none !important;
  position: relative !important;
  z-index: 5 !important;
  vertical-align: middle !important;
  max-width: 100% !important;
}
html body:not(.lockscreen) #scrollable-container .dataTables_wrapper .dataTables_length .box-tools,
html body:not(.lockscreen) .cc-app-content .dataTables_wrapper .dataTables_length .box-tools {
  float: none !important;
  position: relative !important;
  z-index: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
}
html body:not(.lockscreen) #scrollable-container .dataTables_wrapper .dataTables_length.cc-length-with-add > label,
html body:not(.lockscreen) .cc-app-content .dataTables_wrapper .dataTables_length.cc-length-with-add > label {
  position: relative !important;
  flex: 0 0 auto !important;
  width: auto !important;
  margin: 0 !important;
  z-index: 6 !important;
}
html body:not(.lockscreen) #scrollable-container .dataTables_wrapper .dt-buttons,
html body:not(.lockscreen) #scrollable-container div.dt-buttons,
html body:not(.lockscreen) .cc-app-content .dataTables_wrapper .dt-buttons,
html body:not(.lockscreen) .cc-app-content div.dt-buttons {
  position: relative !important;
  left: 0 !important;
  margin: 0 !important;
  margin-inline-start: 10px !important;
  z-index: 1 !important;
  vertical-align: middle !important;
}

/* Desktop: one toolbar row — Add | عرض | exports ........ بحث */
@media (min-width: 992px) {
  html body:not(.lockscreen) #scrollable-container .dataTables_wrapper > .row:first-child,
  html body:not(.lockscreen) .cc-app-content .dataTables_wrapper > .row:first-child {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px 14px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
  html body:not(.lockscreen) #scrollable-container .dataTables_wrapper > .row:first-child > [class*="col-"],
  html body:not(.lockscreen) .cc-app-content .dataTables_wrapper > .row:first-child > [class*="col-"] {
    display: contents !important;
  }
  html body:not(.lockscreen) #scrollable-container .dataTables_wrapper .dataTables_length.cc-length-with-add,
  html body:not(.lockscreen) .cc-app-content .dataTables_wrapper .dataTables_length.cc-length-with-add {
    display: inline-flex !important;
    order: 1 !important;
  }
  html body:not(.lockscreen) #scrollable-container .dataTables_wrapper .dt-buttons,
  html body:not(.lockscreen) #scrollable-container div.dt-buttons,
  html body:not(.lockscreen) .cc-app-content .dataTables_wrapper .dt-buttons,
  html body:not(.lockscreen) .cc-app-content div.dt-buttons {
    order: 2 !important;
    left: 0 !important;
    margin: 0 !important;
    margin-inline-start: 4px !important;
  }
  html body:not(.lockscreen) #scrollable-container .dataTables_wrapper .dataTables_filter,
  html body:not(.lockscreen) .cc-app-content .dataTables_wrapper .dataTables_filter {
    order: 3 !important;
    float: none !important;
    margin: 0 !important;
    margin-inline-start: auto !important;
  }

  /* Browser zoom ≥ 100%: move "عرض" to its own bottom-right row */
  html.cc-dt-zoom-ge100 body:not(.lockscreen) #scrollable-container .dataTables_wrapper > .row:first-child,
  html.cc-dt-zoom-ge100 body:not(.lockscreen) .cc-app-content .dataTables_wrapper > .row:first-child {
    flex-wrap: wrap !important;
  }
  html.cc-dt-zoom-ge100 body:not(.lockscreen) #scrollable-container .dataTables_wrapper .dataTables_length.cc-length-with-add,
  html.cc-dt-zoom-ge100 body:not(.lockscreen) .cc-app-content .dataTables_wrapper .dataTables_length.cc-length-with-add {
    display: contents !important;
  }
  html.cc-dt-zoom-ge100 body:not(.lockscreen) #scrollable-container .dataTables_wrapper .dataTables_length .box-tools,
  html.cc-dt-zoom-ge100 body:not(.lockscreen) .cc-app-content .dataTables_wrapper .dataTables_length .box-tools {
    order: 1 !important;
  }
  html.cc-dt-zoom-ge100 body:not(.lockscreen) #scrollable-container .dataTables_wrapper .dt-buttons,
  html.cc-dt-zoom-ge100 body:not(.lockscreen) #scrollable-container div.dt-buttons,
  html.cc-dt-zoom-ge100 body:not(.lockscreen) .cc-app-content .dataTables_wrapper .dt-buttons,
  html.cc-dt-zoom-ge100 body:not(.lockscreen) .cc-app-content div.dt-buttons {
    order: 2 !important;
  }
  html.cc-dt-zoom-ge100 body:not(.lockscreen) #scrollable-container .dataTables_wrapper .dataTables_filter,
  html.cc-dt-zoom-ge100 body:not(.lockscreen) .cc-app-content .dataTables_wrapper .dataTables_filter {
    order: 3 !important;
  }
  html.cc-dt-zoom-ge100 body:not(.lockscreen) #scrollable-container .dataTables_wrapper .dataTables_length.cc-length-with-add > label,
  html.cc-dt-zoom-ge100 body:not(.lockscreen) .cc-app-content .dataTables_wrapper .dataTables_length.cc-length-with-add > label {
    order: 10 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 8px 0 0 !important;
    justify-content: flex-start !important;
  }
}

/* Mobile/tablet: Add + length; export buttons = icon row (labels hidden) */
@media (max-width: 991px) {
  html body #scrollable-container .dataTables_wrapper .dataTables_length.cc-length-with-add,
  html body .cc-app-content .dataTables_wrapper .dataTables_length.cc-length-with-add {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    margin: 0 0 14px 0 !important;
    float: none !important;
  }
  html[dir="rtl"] body #scrollable-container .dataTables_wrapper .dataTables_length.cc-length-with-add,
  html[dir="rtl"] body .cc-app-content .dataTables_wrapper .dataTables_length.cc-length-with-add,
  html[lang="ar"] body #scrollable-container .dataTables_wrapper .dataTables_length.cc-length-with-add,
  html[lang="ar"] body .cc-app-content .dataTables_wrapper .dataTables_length.cc-length-with-add {
    direction: rtl !important;
  }
  html body #scrollable-container .dataTables_wrapper .dataTables_length .box-tools,
  html body .cc-app-content .dataTables_wrapper .dataTables_length .box-tools {
    margin-inline-end: 0 !important;
    order: 0 !important;
    width: auto !important;
    flex: 0 0 auto !important;
  }
  html body #scrollable-container .dataTables_wrapper .dataTables_length .box-tools a.tw-dw-btn,
  html body .cc-app-content .dataTables_wrapper .dataTables_length .box-tools a.tw-dw-btn {
    width: auto !important;
    justify-content: center !important;
    margin: 0 !important;
  }
  html body #scrollable-container .dataTables_wrapper .dataTables_length.cc-length-with-add > label,
  html body .cc-app-content .dataTables_wrapper .dataTables_length.cc-length-with-add > label {
    order: 0 !important;
    width: auto !important;
    margin: 0 !important;
    margin-inline-start: 0 !important;
    justify-content: flex-start !important;
    flex: 0 1 auto !important;
  }
  html body:not(.lockscreen) #scrollable-container .dataTables_wrapper .dt-buttons,
  html body:not(.lockscreen) #scrollable-container div.dt-buttons,
  html body:not(.lockscreen) .cc-app-content .dataTables_wrapper .dt-buttons,
  html body:not(.lockscreen) .cc-app-content div.dt-buttons,
  html body #scrollable-container .dataTables_wrapper .dt-buttons,
  html body #scrollable-container div.dt-buttons,
  html body .cc-app-content .dataTables_wrapper .dt-buttons,
  html body .cc-app-content div.dt-buttons,
  html body div.dt-buttons,
  html body .dataTables_wrapper .dt-buttons {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    grid-template-columns: none !important;
    left: 0 !important;
    right: auto !important;
    margin: 6px auto 10px auto !important;
    margin-inline: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    float: none !important;
    padding: 0 !important;
    overflow-x: auto !important;
    box-sizing: border-box !important;
  }
  html body:not(.lockscreen) #scrollable-container .dataTables_wrapper .dt-buttons .dt-button,
  html body:not(.lockscreen) #scrollable-container .dataTables_wrapper .dt-buttons .btn,
  html body:not(.lockscreen) #scrollable-container div.dt-buttons .dt-button,
  html body:not(.lockscreen) .cc-app-content .dataTables_wrapper .dt-buttons .dt-button,
  html body:not(.lockscreen) .cc-app-content .dataTables_wrapper .dt-buttons .btn,
  html body:not(.lockscreen) .cc-app-content div.dt-buttons .dt-button,
  html body #scrollable-container .dataTables_wrapper .dt-buttons .dt-button,
  html body #scrollable-container .dataTables_wrapper .dt-buttons .btn,
  html body #scrollable-container div.dt-buttons .dt-button,
  html body .cc-app-content .dataTables_wrapper .dt-buttons .dt-button,
  html body .cc-app-content .dataTables_wrapper .dt-buttons .btn,
  html body .cc-app-content div.dt-buttons .dt-button,
  html body div.dt-buttons .dt-button,
  html body div.dt-buttons a.dt-button,
  html body div.dt-buttons button.dt-button,
  html body .dataTables_wrapper .dt-buttons .btn,
  html body .dataTables_wrapper .dt-buttons a.btn,
  html body .dataTables_wrapper .dt-buttons button.btn {
    flex: 0 0 auto !important;
    width: 40px !important;
    max-width: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    gap: 0 !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  html body #scrollable-container .dataTables_wrapper .dt-buttons .dt-button .fa,
  html body #scrollable-container .dataTables_wrapper .dt-buttons .btn .fa,
  html body #scrollable-container .dataTables_wrapper .dt-buttons .dt-button i,
  html body .cc-app-content .dataTables_wrapper .dt-buttons .dt-button .fa,
  html body .cc-app-content .dataTables_wrapper .dt-buttons .btn i {
    font-size: 16px !important;
    line-height: 1 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }
  html body #scrollable-container a.tw-dw-btn.tw-from-indigo-600,
  html body #scrollable-container a.tw-dw-btn.tw-to-blue-500,
  html body #scrollable-container a.tw-dw-btn[href*="/create"],
  html body .cc-app-content a.tw-dw-btn.tw-from-indigo-600,
  html body .cc-app-content a.tw-dw-btn.tw-to-blue-500,
  html body .cc-app-content a.tw-dw-btn[href*="/create"] {
    min-height: 38px !important;
    height: 38px !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
  }
  html body #scrollable-container .dataTables_wrapper > .row,
  html body .cc-app-content .dataTables_wrapper > .row {
    /* Bootstrap .row uses -15px side margins; with col padding removed this overflows the card */
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  html body #scrollable-container .dataTables_wrapper > .row > [class*="col-"],
  html body .cc-app-content .dataTables_wrapper > .row > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    display: block !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
  /* Scroll only .cc-dt-xscroll / scrollBody — not the whole wrapper (no gray bar under pagination) */
  html body #scrollable-container .dataTables_wrapper,
  html body .cc-app-content .dataTables_wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    box-sizing: border-box !important;
  }
  html body #scrollable-container .table-responsive:not(:has(#purchase_entry_table)):not(.cc-labels-products-wrap):not(.cc-labels-info-wrap),
  html body .cc-app-content .table-responsive:not(:has(#purchase_entry_table)):not(.cc-labels-products-wrap):not(.cc-labels-info-wrap) {
    overflow-x: visible !important;
    overflow-y: visible !important;
    border: 0 !important;
    max-width: 100% !important;
  }
  html body #scrollable-container .cc-purchase-page .cc-purchase-products-card .table-responsive,
  html body .cc-app-content .cc-purchase-page .cc-purchase-products-card .table-responsive {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  html body #scrollable-container .cc-labels-products-wrap,
  html body .cc-app-content .cc-labels-products-wrap {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  html body #scrollable-container .cc-dt-xscroll,
  html body .cc-app-content .cc-dt-xscroll,
  html body #scrollable-container .dataTables_scrollBody,
  html body .cc-app-content .dataTables_scrollBody {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
    max-width: 100% !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  html body #scrollable-container .cc-dt-xscroll::-webkit-scrollbar,
  html body .cc-app-content .cc-dt-xscroll::-webkit-scrollbar,
  html body #scrollable-container .dataTables_scrollBody::-webkit-scrollbar,
  html body .cc-app-content .dataTables_scrollBody::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }
  html body #scrollable-container .dataTables_wrapper .dataTables_length,
  html body .cc-app-content .dataTables_wrapper .dataTables_length {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: start !important;
    margin-bottom: 8px !important;
    box-sizing: border-box !important;
  }
}
html body #scrollable-container .dataTables_wrapper .dataTables_length.cc-length-with-add > label,
html body .cc-app-content .dataTables_wrapper .dataTables_length.cc-length-with-add > label {
  position: relative !important;
  left: auto !important;
  z-index: 6 !important;
  margin: 0 !important;
}
html body #scrollable-container .dataTables_wrapper .dataTables_length select,
html body .cc-app-content .dataTables_wrapper .dataTables_length select {
  position: relative !important;
  z-index: 7 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}
html body #scrollable-container .dataTables_wrapper .dataTables_length .box-tools .pull-right,
html body #scrollable-container .dataTables_wrapper .dataTables_length .box-tools a.tw-dw-btn,
html body .cc-app-content .dataTables_wrapper .dataTables_length .box-tools .pull-right,
html body .cc-app-content .dataTables_wrapper .dataTables_length .box-tools a.tw-dw-btn {
  float: none !important;
  position: static !important;
  margin: 0 !important;
  pointer-events: auto !important;
}
html body #scrollable-container .box-header::before,
html body #scrollable-container .box-header::after,
html body .cc-app-content .box-header::before,
html body .cc-app-content .box-header::after,
html body .content-wrapper .box-header::before,
html body .content-wrapper .box-header::after {
  content: none !important;
  display: none !important;
}
/* Hide redundant title next to Add button (all list widgets) */
html body #scrollable-container .box-header:has(.box-tools) .box-title,
html body #scrollable-container .box-header:has(a.tw-dw-btn) .box-title,
html body .cc-app-content .box-header:has(.box-tools) .box-title,
html body .cc-app-content .box-header:has(a.tw-dw-btn) .box-title,
html body .content-wrapper .box-header:has(.box-tools) .box-title,
html body .content-wrapper .box-header:has(a.tw-dw-btn) .box-title {
  display: none !important;
}
html body #scrollable-container .box-header .box-title,
html body .cc-app-content .box-header .box-title,
html body .content-wrapper .box-header .box-title {
  float: none !important;
  position: static !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 36px !important;
  color: #1F2937 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}
html body #scrollable-container .box-header .box-tools,
html body .cc-app-content .box-header .box-tools,
html body .content-wrapper .box-header .box-tools {
  float: none !important;
  position: static !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
}
html body #scrollable-container .box-header .box-tools .pull-right,
html body #scrollable-container .box-header .box-tools .pull-left,
html body #scrollable-container .box-header .box-tools a.tw-dw-btn,
html body .cc-app-content .box-header .box-tools .pull-right,
html body .cc-app-content .box-header .box-tools a.tw-dw-btn,
html body .content-wrapper .box-header .box-tools .pull-right,
html body .content-wrapper .box-header .box-tools .pull-left,
html body .content-wrapper .box-header .box-tools a.tw-dw-btn {
  float: none !important;
  position: static !important;
  margin: 0 !important;
}

/* Add — blue → green (reference gradient) + pill edges + slightly larger */
html body #scrollable-container a.tw-dw-btn.tw-from-indigo-600,
html body #scrollable-container a.tw-dw-btn.tw-to-blue-500,
html body #scrollable-container a.tw-dw-btn[href*="/create"],
html body #scrollable-container a.tw-dw-btn[href$="/create"],
html body .cc-app-content a.tw-dw-btn.tw-from-indigo-600,
html body .cc-app-content a.tw-dw-btn.tw-to-blue-500,
html body .cc-app-content a.tw-dw-btn[href*="/create"],
html body .cc-app-content a.tw-dw-btn[href$="/create"],
html body .content-wrapper a.tw-dw-btn.tw-from-indigo-600,
html body .nav-tabs-custom a.tw-dw-btn.tw-from-indigo-600,
html body .content-wrapper a.tw-dw-btn.tw-to-blue-500,
html body .nav-tabs-custom a.tw-dw-btn.tw-to-blue-500,
html body .content-wrapper a.tw-dw-btn[href*="/create"],
html body .nav-tabs-custom a.tw-dw-btn[href*="/create"],
html body .content-wrapper a.tw-dw-btn[href$="/create"],
html body .nav-tabs-custom a.tw-dw-btn[href$="/create"] {
  background: linear-gradient(90deg, #2B58FB 0%, #14B8A6 48%, #22C55E 100%) !important;
  background-color: #2B58FB !important;
  background-image: linear-gradient(90deg, #2B58FB 0%, #14B8A6 48%, #22C55E 100%) !important;
  border: none !important;
  border-radius: 10px !important; /* soft rounded corners like Add-ons reference (not full pill) */
  color: #fff !important;
  min-height: 42px !important;
  height: 42px !important;
  padding: 8px 22px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  box-shadow: 0 4px 14px rgba(43, 88, 251, 0.28) !important;
}
html body #scrollable-container a.tw-dw-btn.tw-from-indigo-600 svg,
html body #scrollable-container a.tw-dw-btn.tw-to-blue-500 svg,
html body #scrollable-container a.tw-dw-btn[href*="/create"] svg,
html body .cc-app-content a.tw-dw-btn.tw-from-indigo-600 svg,
html body .cc-app-content a.tw-dw-btn.tw-to-blue-500 svg,
html body .cc-app-content a.tw-dw-btn[href*="/create"] svg {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0;
}
html body #scrollable-container a.tw-dw-btn.tw-from-indigo-600:hover,
html body #scrollable-container a.tw-dw-btn[href*="/create"]:hover,
html body .cc-app-content a.tw-dw-btn.tw-from-indigo-600:hover,
html body .cc-app-content a.tw-dw-btn[href*="/create"]:hover,
html body .content-wrapper a.tw-dw-btn.tw-from-indigo-600:hover,
html body .nav-tabs-custom a.tw-dw-btn.tw-from-indigo-600:hover,
html body .content-wrapper a.tw-dw-btn[href*="/create"]:hover,
html body .nav-tabs-custom a.tw-dw-btn[href*="/create"]:hover {
  background: linear-gradient(90deg, #1D4ED8 0%, #0D9488 48%, #16A34A 100%) !important;
  background-image: linear-gradient(90deg, #1D4ED8 0%, #0D9488 48%, #16A34A 100%) !important;
  color: #fff !important;
  box-shadow: 0 5px 16px rgba(43, 88, 251, 0.36) !important;
}
/* Override Tailwind tw-rounded-full (9999px) — soft corners like reference */
html body #scrollable-container a.tw-dw-btn.tw-rounded-full.tw-from-indigo-600,
html body #scrollable-container a.tw-dw-btn.tw-rounded-full.tw-to-blue-500,
html body #scrollable-container a.tw-dw-btn.tw-rounded-full.tw-bg-gradient-to-r,
html body #scrollable-container a.tw-dw-btn.tw-rounded-full[href*="/create"],
html body .cc-app-content a.tw-dw-btn.tw-rounded-full.tw-from-indigo-600,
html body .cc-app-content a.tw-dw-btn.tw-rounded-full.tw-to-blue-500,
html body .cc-app-content a.tw-dw-btn.tw-rounded-full.tw-bg-gradient-to-r,
html body .cc-app-content a.tw-dw-btn.tw-rounded-full[href*="/create"],
html body a.tw-dw-btn.tw-rounded-full.tw-from-indigo-600,
html body a.tw-dw-btn.tw-rounded-full.tw-to-blue-500,
html body a.tw-dw-btn.tw-rounded-full.tw-bg-gradient-to-r {
  border-radius: 10px !important;
}

/* Download Excel — royal blue gradient (reference) */
html body a.tw-dw-btn[href*="download-excel"],
html body a.tw-dw-btn[href*="excel"],
html body a.tw-dw-btn[href*="Excel"],
html body .content-wrapper a.tw-dw-btn[href*="export"],
html body .nav-tabs-custom a.tw-dw-btn[href*="download-excel"],
html body .nav-tabs-custom a.tw-dw-btn[href*="excel"] {
  background: linear-gradient(90deg, #3B82F6 0%, #2563EB 55%, #1D4ED8 100%) !important;
  background-color: #2563EB !important;
  background-image: linear-gradient(90deg, #3B82F6 0%, #2563EB 55%, #1D4ED8 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.28) !important;
}
html body a.tw-dw-btn[href*="download-excel"]:hover,
html body a.tw-dw-btn[href*="excel"]:hover,
html body .nav-tabs-custom a.tw-dw-btn[href*="download-excel"]:hover,
html body .nav-tabs-custom a.tw-dw-btn[href*="excel"]:hover {
  background: linear-gradient(90deg, #2563EB 0%, #1D4ED8 55%, #1E40AF 100%) !important;
  background-image: linear-gradient(90deg, #2563EB 0%, #1D4ED8 55%, #1E40AF 100%) !important;
  color: #fff !important;
}

html body .content-wrapper .btn-default,
html body .nav-tabs-custom .btn-default,
html body .box .btn-default {
  background-color: #fff !important;
  border: 1px solid #E5ECF3 !important;
  color: #334155 !important;
  box-shadow: none !important;
}

/* ===== DataTables export / print / columns — soft white pills ===== */
html body div.dt-buttons,
html body .dataTables_wrapper .dt-buttons {
  display: inline-flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px !important;
  float: none !important;
  margin: 0 0 12px 0 !important;
}

html body div.dt-buttons .dt-button,
html body div.dt-buttons a.dt-button,
html body div.dt-buttons button.dt-button,
html body .dataTables_wrapper .dt-buttons .btn,
html body .dataTables_wrapper .dt-buttons a.btn,
html body .dataTables_wrapper .dt-buttons button.btn,
html body .dataTables_wrapper a.btn.buttons-csv,
html body .dataTables_wrapper a.btn.buttons-excel,
html body .dataTables_wrapper a.btn.buttons-print,
html body .dataTables_wrapper a.btn.buttons-collection,
html body .dataTables_wrapper a.btn.buttons-colvis,
html body .dataTables_wrapper .btn-default.buttons-csv,
html body .dataTables_wrapper .btn-default.buttons-excel,
html body .dataTables_wrapper .btn-default.buttons-print,
html body .dataTables_wrapper .btn-default.buttons-collection,
html body .dataTables_wrapper .btn-default.buttons-colvis,
html body .dataTables_wrapper .buttons-html5,
html body .dataTables_wrapper .buttons-print,
html body .dataTables_wrapper .buttons-collection {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: #fff !important;
  background-image: none !important;
  border: 1px solid #E5E7EB !important;
  color: #334155 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  padding: 8px 16px !important;
  margin: 0 !important;
  min-height: 38px !important;
  height: 38px !important;
  text-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
}

html body div.dt-buttons .dt-button:hover,
html body div.dt-buttons a.dt-button:hover,
html body .dataTables_wrapper .dt-buttons .btn:hover,
html body .dataTables_wrapper a.btn.buttons-csv:hover,
html body .dataTables_wrapper a.btn.buttons-excel:hover,
html body .dataTables_wrapper a.btn.buttons-print:hover,
html body .dataTables_wrapper a.btn.buttons-collection:hover,
html body .dataTables_wrapper a.btn.buttons-colvis:hover,
html body .dataTables_wrapper .buttons-html5:hover,
html body .dataTables_wrapper .buttons-print:hover {
  background: #F8FAFC !important;
  background-image: none !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08) !important;
}

html body div.dt-buttons .dt-button:focus,
html body .dataTables_wrapper .dt-buttons .btn:focus,
html body .dataTables_wrapper a.btn.buttons-csv:focus,
html body .dataTables_wrapper a.btn.buttons-excel:focus,
html body .dataTables_wrapper a.btn.buttons-print:focus,
html body .dataTables_wrapper a.btn.buttons-collection:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12), 0 1px 3px rgba(15, 23, 42, 0.06) !important;
}

html body div.dt-buttons .dt-button .fa,
html body div.dt-buttons .dt-button .fas,
html body div.dt-buttons .dt-button .far,
html body div.dt-buttons .dt-button i,
html body div.dt-buttons .dt-button svg,
html body .dataTables_wrapper .dt-buttons .btn .fa,
html body .dataTables_wrapper .dt-buttons .btn .fas,
html body .dataTables_wrapper .dt-buttons .btn i,
html body .dataTables_wrapper .dt-buttons .btn svg,
html body .dataTables_wrapper a.btn.buttons-csv .fa,
html body .dataTables_wrapper a.btn.buttons-excel .fa,
html body .dataTables_wrapper a.btn.buttons-print .fa,
html body .dataTables_wrapper a.btn.buttons-collection .fa,
html body .dataTables_wrapper a.btn.buttons-colvis .fa {
  color: #475569 !important;
  fill: currentColor !important;
  margin: 0 !important;
  font-size: 14px !important;
}

/* Colored icons — target FA icon classes (works even if button class differs) */
html body div.dt-buttons .fa-file-csv,
html body div.dt-buttons .fas.fa-file-csv,
html body div.dt-buttons i.fa-file-csv,
html body .dataTables_wrapper .dt-buttons .fa-file-csv,
html body .dataTables_wrapper .buttons-csv i,
html body .dataTables_wrapper .buttons-csv svg,
html body .dataTables_wrapper .buttons-csv .fa,
html body .dataTables_wrapper .buttons-csv .fas,
html body div.dt-buttons .buttons-csv i,
html body div.dt-buttons .buttons-csv svg,
html body div.dt-buttons a.buttons-csv i,
html body div.dt-buttons button.buttons-csv i {
  color: #2563EB !important;
  fill: #2563EB !important;
}
html body div.dt-buttons .fa-file-excel,
html body div.dt-buttons .fas.fa-file-excel,
html body div.dt-buttons i.fa-file-excel,
html body .dataTables_wrapper .dt-buttons .fa-file-excel,
html body .dataTables_wrapper .buttons-excel i,
html body .dataTables_wrapper .buttons-excel svg,
html body .dataTables_wrapper .buttons-excel .fa,
html body .dataTables_wrapper .buttons-excel .fas,
html body div.dt-buttons .buttons-excel i,
html body div.dt-buttons .buttons-excel svg,
html body div.dt-buttons a.buttons-excel i,
html body div.dt-buttons button.buttons-excel i {
  color: #16A34A !important;
  fill: #16A34A !important;
}
html body div.dt-buttons .fa-print,
html body div.dt-buttons i.fa-print,
html body .dataTables_wrapper .buttons-print i,
html body .dataTables_wrapper .buttons-print svg,
html body .dataTables_wrapper .buttons-print .fa {
  color: #475569 !important;
  fill: #475569 !important;
}
html body div.dt-buttons .fa-columns,
html body div.dt-buttons i.fa-columns,
html body .dataTables_wrapper .buttons-collection i,
html body .dataTables_wrapper .buttons-colvis i,
html body .dataTables_wrapper .buttons-collection svg,
html body .dataTables_wrapper .buttons-colvis .fa {
  color: #64748B !important;
  fill: #64748B !important;
}
html body div.dt-buttons .fa-file-pdf,
html body div.dt-buttons i.fa-file-pdf,
html body .dataTables_wrapper .buttons-pdf i,
html body .dataTables_wrapper .buttons-pdf .fa {
  color: #DC2626 !important;
  fill: #DC2626 !important;
}

/* ===== Column visibility dropdown — classic Bootstrap (old system) ===== */
html body div.dt-button-collection,
html body ul.dt-button-collection,
html body .dt-button-collection {
  background: #fff !important;
  background-image: none !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  border-radius: 4px !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175) !important;
  padding: 5px 0 !important;
  min-width: 160px !important;
  max-height: none !important;
  overflow: visible !important;
  z-index: 2002 !important;
}

html body ul.dt-button-collection > li,
html body .dt-button-collection > li {
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  list-style: none !important;
}

html body .dt-button-collection .dt-button,
html body .dt-button-collection a.dt-button,
html body .dt-button-collection button.dt-button,
html body .dt-button-collection .buttons-columnVisibility,
html body .dt-button-collection .tw-dw-btn,
html body .dt-button-collection a.tw-dw-btn,
html body ul.dt-button-collection > li > a,
html body ul.dt-button-collection > li > a.dt-button {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 3px 20px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  color: #333 !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.42857143 !important;
  text-align: start !important;
  text-shadow: none !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  height: auto !important;
  min-height: 0 !important;
  opacity: 1 !important;
  filter: none !important;
  cursor: pointer !important;
}

html body .dt-button-collection .dt-button:before,
html body .dt-button-collection .dt-button:after,
html body .dt-button-collection a.dt-button:before,
html body .dt-button-collection a.dt-button:after,
html body .dt-button-collection button.dt-button:before,
html body .dt-button-collection button.dt-button:after,
html body .dt-button-collection .buttons-columnVisibility:before,
html body .dt-button-collection .buttons-columnVisibility:after,
html body .dt-button-collection .tw-dw-btn:before,
html body .dt-button-collection .tw-dw-btn:after,
html body ul.dt-button-collection > li > a:before,
html body ul.dt-button-collection > li > a:after {
  content: none !important;
  display: none !important;
}

html body .dt-button-collection .dt-button:hover,
html body .dt-button-collection a.dt-button:hover,
html body .dt-button-collection .buttons-columnVisibility:hover,
html body .dt-button-collection .tw-dw-btn:hover,
html body ul.dt-button-collection > li > a:hover {
  background: #f5f5f5 !important;
  background-image: none !important;
  color: #262626 !important;
}

html body .dt-button-collection .dt-button.active,
html body .dt-button-collection a.dt-button.active,
html body .dt-button-collection .buttons-columnVisibility.active,
html body .dt-button-collection .tw-dw-btn.active,
html body ul.dt-button-collection > li.active > a,
html body ul.dt-button-collection > li.active > a:hover,
html body ul.dt-button-collection > li.active > a:focus {
  background: #337ab7 !important;
  background-image: none !important;
  color: #fff !important;
  font-weight: 400 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  outline: 0 !important;
}

/* DaisyUI outline buttons must not force icon color */
html body div.dt-buttons .tw-dw-btn-outline .fa-file-csv,
html body div.dt-buttons .tw-dw-btn.tw-dw-btn-outline .fa-file-csv {
  color: #2563EB !important;
}
html body div.dt-buttons .tw-dw-btn-outline .fa-file-excel,
html body div.dt-buttons .tw-dw-btn.tw-dw-btn-outline .fa-file-excel {
  color: #16A34A !important;
}

html[dir="ltr"] body div.dt-buttons .dt-button .fa,
html[dir="ltr"] body .dataTables_wrapper .dt-buttons .btn .fa,
html[dir="ltr"] body .dataTables_wrapper a.btn.buttons-csv .fa,
html[dir="ltr"] body .dataTables_wrapper a.btn.buttons-excel .fa,
html[dir="ltr"] body .dataTables_wrapper a.btn.buttons-print .fa,
html[dir="ltr"] body .dataTables_wrapper a.btn.buttons-collection .fa {
  margin: 0 !important;
}

/* ===== Length select + Search field (clear modern look) ===== */
html body .dataTables_wrapper .dataTables_length {
  margin-bottom: 10px !important;
}
html body .dataTables_wrapper .dataTables_length label {
  font-weight: 600 !important;
  color: #475569 !important;
  font-size: 13px !important;
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  margin: 0 !important;
}
html body .dataTables_wrapper .dataTables_length select {
  display: inline-block !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 8px !important;
  padding: 4px 6px !important;
  min-height: 32px !important;
  height: 32px !important;
  line-height: 1.35 !important;
  box-shadow: none !important;
  background-color: #fff !important;
  background-image: none !important;
  color: #111827 !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  vertical-align: middle !important;
  text-indent: 0 !important;
  text-align: center !important;
  overflow: visible !important;
  field-sizing: content;
  -webkit-appearance: menulist !important;
  -moz-appearance: menulist !important;
  appearance: menulist !important;
}

html body .dataTables_wrapper .dataTables_filter {
  margin-bottom: 10px !important;
  float: left !important; /* RTL pages: search sits on the visual left */
}
html[dir="ltr"] body .dataTables_wrapper .dataTables_filter {
  float: right !important;
}
html body .dataTables_wrapper .dataTables_filter label {
  font-weight: 600 !important;
  color: #64748B !important;
  font-size: 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px;
  margin: 0 !important;
  position: relative;
}
html body .dataTables_wrapper .dataTables_filter input,
html body .dataTables_wrapper .dataTables_filter input[type="search"],
html body .dataTables_wrapper .dataTables_filter input[type="text"] {
  width: 260px !important;
  max-width: 100% !important;
  min-height: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 8px 16px 8px 40px !important; /* room for search icon (LTR pad left) */
  border: 1.5px solid #D1D5DB !important;
  border-radius: 10px !important;
  background: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='m14 14 3 3'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 12px center !important;
  background-size: 16px 16px !important;
  color: #0F172A !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none !important;
  appearance: none !important;
}
/* RTL: icon on the right side of the input */
html[dir="rtl"] body .dataTables_wrapper .dataTables_filter input,
html[dir="rtl"] body .dataTables_wrapper .dataTables_filter input[type="search"],
html[dir="rtl"] body .dataTables_wrapper .dataTables_filter input[type="text"] {
  padding: 8px 40px 8px 16px !important;
  background-position: calc(100% - 12px) center !important;
}
html body .dataTables_wrapper .dataTables_filter input::placeholder {
  color: #94A3B8 !important;
  opacity: 1 !important;
  font-weight: 500 !important;
}
html body .dataTables_wrapper .dataTables_filter input:hover {
  border-color: #94A3B8 !important;
}
html body .dataTables_wrapper .dataTables_filter input:focus {
  border-color: #2563EB !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
  outline: none !important;
  background-color: #fff !important;
}
@media (max-width: 767px) {
  html body .dataTables_wrapper .dataTables_filter,
  html[dir="ltr"] body .dataTables_wrapper .dataTables_filter {
    float: none !important;
    width: 100% !important;
    text-align: start !important;
  }
  html body .dataTables_wrapper .dataTables_filter label {
    width: 100% !important;
  }
  html body .dataTables_wrapper .dataTables_filter input,
  html body .dataTables_wrapper .dataTables_filter input[type="search"],
  html body .dataTables_wrapper .dataTables_filter input[type="text"] {
    width: 100% !important;
  }

  /* DT export icons — single row (phone). Full rule also in max-width 991 below. */
}

html body .content-wrapper table.table:not(#pos_table) .btn-group > .btn-info,
html body .content-wrapper table.table:not(#pos_table) .btn-group > .btn-primary,
html body .content-wrapper table.table:not(#pos_table) td .btn-info.dropdown-toggle,
html body .content-wrapper table.table:not(#pos_table) td .btn-xs.btn-info,
html body .content-wrapper table.table:not(#pos_table) td .btn-xs.btn-primary {
  background: #fff !important;
  background-image: none !important;
  border: 1px solid #7DD3D6 !important;
  color: #0EA5A8 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
}

html body .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: #2563EB !important;
  background-image: none !important;
  border-color: #2563EB !important;
  color: #fff !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

/* DataTables desktop toolbar: compact controls.
   Mobile rules (<= 991px) remain unchanged. */
@media (min-width: 992px) {
  html body:not(.lockscreen) .dataTables_wrapper .dt-buttons,
  html body:not(.lockscreen) div.dt-buttons {
    gap: 6px !important;
    left: 0 !important;
  }

  html body:not(.lockscreen) .dataTables_wrapper .dt-buttons > .dt-button,
  html body:not(.lockscreen) .dataTables_wrapper .dt-buttons > .btn,
  html body:not(.lockscreen) div.dt-buttons > .dt-button,
  html body:not(.lockscreen) div.dt-buttons > .btn {
    min-height: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 6px 12px !important;
    border-radius: 9px !important;
    font-size: 12.5px !important;
  }

  html body:not(.lockscreen) .dataTables_wrapper .dataTables_length label {
    gap: 6px !important;
  }

  html body:not(.lockscreen) .dataTables_wrapper .dataTables_length select {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 30px !important;
    height: 30px !important;
    padding: 3px 4px !important;
    font-size: 12px !important;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  html body:not(.lockscreen) .dataTables_wrapper .dt-buttons,
  html body:not(.lockscreen) div.dt-buttons {
    gap: 4px !important;
    left: 0 !important;
  }

  html body:not(.lockscreen) .dataTables_wrapper .dt-buttons > .dt-button,
  html body:not(.lockscreen) .dataTables_wrapper .dt-buttons > .btn,
  html body:not(.lockscreen) div.dt-buttons > .dt-button,
  html body:not(.lockscreen) div.dt-buttons > .btn {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
}

/* =========================================================
   Unified DataTables toolbar — anti-overlap (layout only)
   Applies to admin tables; skipped on POS (.lockscreen)
   ========================================================= */
html body:not(.lockscreen) #scrollable-container .dataTables_wrapper > .row:first-child,
html body:not(.lockscreen) .cc-app-content .dataTables_wrapper > .row:first-child {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  align-content: flex-start !important;
  gap: 10px 12px !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html body:not(.lockscreen) #scrollable-container .dataTables_wrapper > .row:first-child > [class*="col-"],
html body:not(.lockscreen) .cc-app-content .dataTables_wrapper > .row:first-child > [class*="col-"] {
  float: none !important;
  width: auto !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  display: contents !important;
}

html body:not(.lockscreen) #scrollable-container .dataTables_wrapper .dataTables_length,
html body:not(.lockscreen) #scrollable-container .dataTables_wrapper .dataTables_length.cc-length-with-add,
html body:not(.lockscreen) .cc-app-content .dataTables_wrapper .dataTables_length,
html body:not(.lockscreen) .cc-app-content .dataTables_wrapper .dataTables_length.cc-length-with-add {
  float: none !important;
  clear: none !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  display: inline-flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px 10px !important;
  flex: 0 1 auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  z-index: 2 !important;
  isolation: isolate !important;
}

html body:not(.lockscreen) #scrollable-container .dataTables_wrapper .dataTables_length > label,
html body:not(.lockscreen) .cc-app-content .dataTables_wrapper .dataTables_length > label {
  float: none !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  margin: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  z-index: 2 !important;
}

html body:not(.lockscreen) #scrollable-container .dataTables_wrapper .dt-buttons,
html body:not(.lockscreen) #scrollable-container div.dt-buttons,
html body:not(.lockscreen) .cc-app-content .dataTables_wrapper .dt-buttons,
html body:not(.lockscreen) .cc-app-content div.dt-buttons,
html body:not(.lockscreen) div.dt-buttons {
  float: none !important;
  clear: none !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  display: inline-flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 1 260px !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  z-index: 1 !important;
}

html body:not(.lockscreen) #scrollable-container .dataTables_wrapper .dataTables_filter,
html body:not(.lockscreen) .cc-app-content .dataTables_wrapper .dataTables_filter {
  float: none !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  margin: 0 !important;
  margin-inline-start: auto !important;
  flex: 0 1 auto !important;
  max-width: 100% !important;
  z-index: 1 !important;
}

html body:not(.lockscreen) #scrollable-container .dataTables_wrapper .dataTables_filter label,
html body:not(.lockscreen) .cc-app-content .dataTables_wrapper .dataTables_filter label {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

/* =========================================================
   Mobile + tablet ONLY: DataTables export as icon row
   Desktop (>=992px) keeps labels — do not change.
   ========================================================= */
@media (max-width: 991px) {
  html body:not(.lockscreen) div.dt-buttons,
  html body:not(.lockscreen) .dataTables_wrapper .dt-buttons,
  html body:not(.lockscreen) #scrollable-container .dataTables_wrapper .dt-buttons,
  html body:not(.lockscreen) #scrollable-container div.dt-buttons,
  html body:not(.lockscreen) .cc-app-content .dataTables_wrapper .dt-buttons,
  html body:not(.lockscreen) .cc-app-content div.dt-buttons {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    grid-template-columns: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 6px auto 10px auto !important;
    margin-inline: auto !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    padding: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  html body:not(.lockscreen) div.dt-buttons .dt-button,
  html body:not(.lockscreen) div.dt-buttons a.dt-button,
  html body:not(.lockscreen) div.dt-buttons button.dt-button,
  html body:not(.lockscreen) .dataTables_wrapper .dt-buttons .btn,
  html body:not(.lockscreen) .dataTables_wrapper .dt-buttons a.btn,
  html body:not(.lockscreen) .dataTables_wrapper .dt-buttons button.btn,
  html body:not(.lockscreen) .dataTables_wrapper a.btn.buttons-csv,
  html body:not(.lockscreen) .dataTables_wrapper a.btn.buttons-excel,
  html body:not(.lockscreen) .dataTables_wrapper a.btn.buttons-print,
  html body:not(.lockscreen) .dataTables_wrapper a.btn.buttons-pdf,
  html body:not(.lockscreen) .dataTables_wrapper a.btn.buttons-collection,
  html body:not(.lockscreen) .dataTables_wrapper a.btn.buttons-colvis,
  html body:not(.lockscreen) .dataTables_wrapper .btn-default.buttons-csv,
  html body:not(.lockscreen) .dataTables_wrapper .btn-default.buttons-excel,
  html body:not(.lockscreen) .dataTables_wrapper .btn-default.buttons-print,
  html body:not(.lockscreen) .dataTables_wrapper .btn-default.buttons-colvis,
  html body:not(.lockscreen) .dataTables_wrapper .buttons-html5,
  html body:not(.lockscreen) .dataTables_wrapper .buttons-print,
  html body:not(.lockscreen) .dataTables_wrapper .buttons-collection,
  html body:not(.lockscreen) div.dt-buttons > .tw-dw-btn,
  html body:not(.lockscreen) div.dt-buttons > a.tw-dw-btn,
  html body:not(.lockscreen) div.dt-buttons > button.tw-dw-btn {
    flex: 0 0 auto !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    border-radius: 10px !important;
    font-size: 0 !important;
    line-height: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    justify-content: center !important;
    align-items: center !important;
  }

  html body:not(.lockscreen) div.dt-buttons .dt-button .fa,
  html body:not(.lockscreen) div.dt-buttons .dt-button .fas,
  html body:not(.lockscreen) div.dt-buttons .dt-button .far,
  html body:not(.lockscreen) div.dt-buttons .dt-button i,
  html body:not(.lockscreen) div.dt-buttons .dt-button svg,
  html body:not(.lockscreen) .dataTables_wrapper .dt-buttons .btn .fa,
  html body:not(.lockscreen) .dataTables_wrapper .dt-buttons .btn .fas,
  html body:not(.lockscreen) .dataTables_wrapper .dt-buttons .btn i,
  html body:not(.lockscreen) .dataTables_wrapper .dt-buttons .btn svg,
  html body:not(.lockscreen) .dataTables_wrapper a.btn.buttons-csv i,
  html body:not(.lockscreen) .dataTables_wrapper a.btn.buttons-excel i,
  html body:not(.lockscreen) .dataTables_wrapper a.btn.buttons-print i,
  html body:not(.lockscreen) .dataTables_wrapper a.btn.buttons-pdf i,
  html body:not(.lockscreen) .dataTables_wrapper a.btn.buttons-collection i,
  html body:not(.lockscreen) .dataTables_wrapper a.btn.buttons-colvis i,
  html body:not(.lockscreen) div.dt-buttons > .tw-dw-btn i,
  html body:not(.lockscreen) div.dt-buttons > a.tw-dw-btn i {
    font-size: 16px !important;
    line-height: 1 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
  }
}

/* Table action dropdown (ÎíÇÑÇÊ): blue icons + spacing — RTL-safe */
html body:not(.lockscreen) .content-wrapper table.table:not(#pos_table) .dropdown-menu,
html body:not(.lockscreen) .dataTables_wrapper table.table:not(#pos_table) .dropdown-menu,
html body:not(.lockscreen) .dataTables_scrollBody .dropdown-menu {
  min-width: 190px !important;
  padding: 6px 0 !important;
  border: 1px solid #d7e6ec !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 22px rgba(15, 42, 95, .12) !important;
}
html body:not(.lockscreen) .content-wrapper table.table:not(#pos_table) .dropdown-menu > li > a,
html body:not(.lockscreen) .dataTables_wrapper table.table:not(#pos_table) .dropdown-menu > li > a,
html body:not(.lockscreen) .dataTables_scrollBody .dropdown-menu > li > a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 14px !important;
  color: #1f3b57 !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}
html body:not(.lockscreen) .content-wrapper table.table:not(#pos_table) .dropdown-menu > li > a > .fa,
html body:not(.lockscreen) .content-wrapper table.table:not(#pos_table) .dropdown-menu > li > a > .fas,
html body:not(.lockscreen) .content-wrapper table.table:not(#pos_table) .dropdown-menu > li > a > .far,
html body:not(.lockscreen) .content-wrapper table.table:not(#pos_table) .dropdown-menu > li > a > .fab,
html body:not(.lockscreen) .dataTables_wrapper table.table:not(#pos_table) .dropdown-menu > li > a > .fa,
html body:not(.lockscreen) .dataTables_wrapper table.table:not(#pos_table) .dropdown-menu > li > a > .fas,
html body:not(.lockscreen) .dataTables_wrapper table.table:not(#pos_table) .dropdown-menu > li > a > .far,
html body:not(.lockscreen) .dataTables_scrollBody .dropdown-menu > li > a > .fa,
html body:not(.lockscreen) .dataTables_scrollBody .dropdown-menu > li > a > .fas,
html body:not(.lockscreen) .dataTables_scrollBody .dropdown-menu > li > a > .far,
html body:not(.lockscreen) .dropdown-menu > li > a > .fa,
html body:not(.lockscreen) .dropdown-menu > li > a > .fas,
html body:not(.lockscreen) .dropdown-menu > li > a > .far {
  color: #0EA5A8 !important;
  margin: 0 !important;
  margin-inline-end: 0 !important;
  margin-inline-start: 0 !important;
  width: 1.15em !important;
  flex: 0 0 auto !important;
  text-align: center !important;
  font-size: 14px !important;
}
html body:not(.lockscreen) .content-wrapper table.table:not(#pos_table) .dropdown-menu > li > a:hover,
html body:not(.lockscreen) .dataTables_wrapper table.table:not(#pos_table) .dropdown-menu > li > a:hover,
html body:not(.lockscreen) .dataTables_scrollBody .dropdown-menu > li > a:hover {
  background: #eef9f9 !important;
  color: #0b7f82 !important;
}
html body:not(.lockscreen) .content-wrapper table.table:not(#pos_table) .dropdown-menu > li > a:hover > .fa,
html body:not(.lockscreen) .content-wrapper table.table:not(#pos_table) .dropdown-menu > li > a:hover > .fas,
html body:not(.lockscreen) .dataTables_wrapper table.table:not(#pos_table) .dropdown-menu > li > a:hover > .fas {
  color: #0b7f82 !important;
}