/* =============================================================
   HisaabPOS — DataTables visual overrides
   Applies to every page that uses table.dataTable
   ============================================================= */

/* ── Table container ── */
.dataTables_wrapper,
.pos-widget-card .dataTables_wrapper {
  padding: 0 !important;
}
/* Neutralise Bootstrap .row negative side margins inside the wrapper */
.dataTables_wrapper > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ── Toolbar row (length + buttons + filter) ── */
.pos-widget-card .dataTables_wrapper .row:first-child,
.dataTables_wrapper > .row:first-child {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;      /* keep left + right on ONE line always */
  gap: 0 !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--pos-line) !important;
  margin: 0 !important;
}

/* Left column (Show N + export buttons): stretches, children wrap internally */
.dataTables_wrapper > .row:first-child > [class*="col-sm-"]:first-child,
.dataTables_wrapper > .row:first-child > [class*="col-xs-"]:first-child {
  float: none !important;
  width: auto !important;
  padding: 0 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

/* Right column (Search + action buttons): fixed size, pushed to far right */
.dataTables_wrapper > .row:first-child > [class*="col-sm-"]:last-child,
.dataTables_wrapper > .row:first-child > [class*="col-xs-"]:last-child {
  float: none !important;
  width: auto !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding-left: 14px !important;
}

/* Show N entries */
.dataTables_length {
  padding: 0 !important;
  flex-shrink: 0 !important;
}
.dataTables_length label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  color: var(--pos-ink-3) !important;
  font-weight: 500 !important;
  font-family: var(--pos-font) !important;
  margin: 0 !important;
  white-space: nowrap !important;
}
.dataTables_length select {
  height: 30px !important;
  border: 1px solid var(--pos-line-2) !important;
  border-radius: 7px !important;
  font-size: 12px !important;
  padding: 0 24px 0 8px !important;
  background: var(--pos-surface) !important;
  color: var(--pos-ink-1) !important;
  font-family: var(--pos-font) !important;
  appearance: auto !important;
  box-shadow: none !important;
  outline: none !important;
}
.dataTables_length select:focus {
  border-color: var(--pos-primary) !important;
  box-shadow: 0 0 0 3px var(--pos-primary-soft) !important;
}

/* DataTables export/action buttons */
.dt-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}
/* ── Export / action buttons — exact match to reference design ── */
.dt-button,
.dt-buttons .btn,
.dt-buttons a,
.dt-buttons a.btn,
.dt-buttons .btn-default,
.dt-buttons .btn.btn-default,
.btn.buttons-colvis,
.btn.buttons-copy,
.btn.buttons-excel,
.btn.buttons-pdf,
.btn.buttons-print {
  height: 30px !important;
  padding: 0 12px !important;
  border-radius: 7px !important;
  /* Kill ALL Bootstrap gradient/shadow residue */
  background: #ffffff !important;
  background-image: none !important;
  background-color: #ffffff !important;
  filter: none !important;
  -webkit-filter: none !important;
  border: 1px solid #e4e5ea !important;
  color: #52536b !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  font-family: var(--pos-font) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  -webkit-box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  cursor: pointer !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}
.dt-button:hover,
.dt-buttons .btn:hover,
.dt-buttons a:hover,
.dt-buttons .btn-default:hover {
  background: #f4f5f8 !important;
  background-image: none !important;
  border-color: #d1d3dc !important;
  color: #1e1f2e !important;
  box-shadow: none !important;
  filter: none !important;
}
.dt-button.active,
.dt-button.active:hover {
  background: var(--pos-primary-soft) !important;
  color: var(--pos-primary-ink) !important;
  border-color: transparent !important;
}

/* Kill dark icon backgrounds inside buttons — Bootstrap icon spans */
.dt-button > span,
.dt-buttons .btn > span,
.dt-buttons a > span {
  background: none !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  line-height: inherit !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
/* Shrink glyphicon / fa icons inside buttons */
.dt-button .glyphicon,
.dt-button [class*="fa-"],
.dt-button [class*="icon-"],
.dt-buttons .btn .glyphicon,
.dt-buttons .btn [class*="fa-"] {
  font-size: 11px !important;
  color: inherit !important;
  opacity: 0.75 !important;
  background: none !important;
}

/* Search input */
.dataTables_filter {
  padding: 0 !important;
}
.dataTables_filter label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12px !important;
  color: var(--pos-ink-3) !important;
  font-family: var(--pos-font) !important;
  margin: 0 !important;
}
.dataTables_filter input {
  height: 32px !important;
  width: 200px !important;
  border: 1px solid var(--pos-line-2) !important;
  border-radius: 8px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  font-family: var(--pos-font) !important;
  color: var(--pos-ink-1) !important;
  background: var(--pos-surface) !important;
  box-shadow: none !important;
  outline: none !important;
}
.dataTables_filter input:focus {
  border-color: var(--pos-primary) !important;
  box-shadow: 0 0 0 3px var(--pos-primary-soft) !important;
}

/* ── Table itself ── */
table.dataTable {
  border-collapse: collapse !important;
  width: 100% !important;
  font-family: var(--pos-font) !important;
  margin: 0 !important;
}

/* Header */
table.dataTable thead tr {
  background: var(--pos-surface-2) !important;
}
table.dataTable thead th,
table.dataTable thead td {
  padding: 10px 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--pos-ink-2) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  border-bottom: 1px solid var(--pos-line) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  white-space: nowrap !important;
  background: var(--pos-surface-2) !important;
  font-family: var(--pos-font) !important;
}
table.dataTable thead th:first-child,
table.dataTable thead td:first-child {
  padding-left: 16px !important;
}
/* Sort icons */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
  cursor: pointer;
}
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
  opacity: 0.4;
}
table.dataTable thead .sorting_asc::after  { opacity: 0.9; }
table.dataTable thead .sorting_desc::after { opacity: 0.9; }

/* Body rows */
table.dataTable tbody tr {
  background: var(--pos-surface) !important;
  border-bottom: 1px solid var(--pos-line) !important;
}
table.dataTable tbody tr:last-child {
  border-bottom: none !important;
}
table.dataTable.table-striped tbody tr:nth-child(odd),
table.dataTable.table-striped tbody tr:nth-child(even) {
  background: var(--pos-surface) !important;
}
table.dataTable tbody tr:hover,
table.dataTable tbody tr.odd:hover,
table.dataTable tbody tr.even:hover {
  background: var(--pos-surface-2) !important;
}
table.dataTable tbody td {
  padding: 11px 12px !important;
  font-size: 13px !important;
  color: var(--pos-ink-1) !important;
  border: none !important;
  vertical-align: middle !important;
  font-family: var(--pos-font) !important;
  line-height: 1.4 !important;
}
table.dataTable tbody td:first-child {
  padding-left: 16px !important;
}

/* Remove Bootstrap table-bordered lines between columns */
table.dataTable.table-bordered td,
table.dataTable.table-bordered th {
  border-left: none !important;
  border-right: none !important;
}

/* ── Processing indicator ── */
table.dataTable.processing tbody::after {
  background: rgba(255,255,255,0.7) !important;
}
.dataTables_processing {
  border: 1px solid var(--pos-line) !important;
  border-radius: 10px !important;
  box-shadow: var(--pos-shadow-2) !important;
  padding: 12px 20px !important;
  font-size: 13px !important;
  color: var(--pos-ink-2) !important;
  font-family: var(--pos-font) !important;
}

/* ── Bottom row (info + pagination) ── */
.dataTables_wrapper > .row:last-child,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  padding: 10px 14px !important;
  margin: 0 !important;
}
.dataTables_wrapper > .row:last-child {
  display: flex !important;
  align-items: center !important;
  border-top: 1px solid var(--pos-line) !important;
  gap: 8px !important;
}
/* Override Bootstrap col-sm-* width inside footer row */
.dataTables_wrapper > .row:last-child > [class*="col-sm-"],
.dataTables_wrapper > .row:last-child > [class*="col-xs-"] {
  float: none !important;
  width: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  flex: 0 0 auto !important;
}
.dataTables_wrapper > .row:last-child > [class*="col-sm-"]:last-child {
  margin-left: auto !important;
}

/* Info text */
.dataTables_info {
  font-size: 12px !important;
  color: var(--pos-ink-3) !important;
  font-family: var(--pos-font) !important;
  padding-top: 0 !important;
  white-space: nowrap !important;
}

/* Pagination */
.dataTables_paginate {
  margin-left: auto !important;
  padding-top: 0 !important;
}
.dataTables_paginate .pagination {
  display: flex !important;
  gap: 3px !important;
  margin: 0 !important;
  list-style: none !important;
  padding: 0 !important;
  align-items: center !important;
}
/* Reset Bootstrap's li so it doesn't add block/float layout */
.dataTables_paginate .pagination > li {
  display: flex !important;
  float: none !important;
}
.dataTables_paginate .pagination > li > a,
.dataTables_paginate .pagination > li > span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 32px !important;
  height: 32px !important;
  padding: 0 10px !important;
  border-radius: 7px !important;
  border: 1px solid var(--pos-line) !important;
  background: var(--pos-surface) !important;
  color: var(--pos-ink-2) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  font-family: var(--pos-font) !important;
  cursor: pointer !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background .12s, color .12s, border-color .12s !important;
  white-space: nowrap !important;
}
.dataTables_paginate .pagination > li > a:hover,
.dataTables_paginate .pagination > li:not(.disabled):not(.active) > a:focus {
  background: var(--pos-surface-2) !important;
  border-color: var(--pos-line-2) !important;
  color: var(--pos-ink-1) !important;
}
/* Active / current page */
.dataTables_paginate .pagination > .active > a,
.dataTables_paginate .pagination > .active > span,
.dataTables_paginate .pagination > .active > a:hover,
.dataTables_paginate .pagination > .active > a:focus {
  background: var(--pos-primary) !important;
  border-color: var(--pos-primary) !important;
  color: #fff !important;
  cursor: default !important;
}
/* Disabled Previous / Next */
.dataTables_paginate .pagination > .disabled > a,
.dataTables_paginate .pagination > .disabled > span,
.dataTables_paginate .pagination > .disabled > a:hover,
.dataTables_paginate .pagination > .disabled > a:focus {
  background: var(--pos-surface-3) !important;
  border-color: var(--pos-line) !important;
  color: var(--pos-ink-4) !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

/* ── Actions button in DataTable rows only ── */
table.dataTable .btn-xs.dropdown-toggle,
table.dataTable td .btn-xs,
table.dataTable td .btn-sm {
  height: 28px !important;
  padding: 0 10px !important;
  border-radius: 7px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  font-family: var(--pos-font) !important;
  border: 1px solid oklch(0.85 0.06 275) !important;
  background: var(--pos-primary-soft) !important;
  color: var(--pos-primary-ink) !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}
table.dataTable td .btn-xs:hover,
table.dataTable td .btn-sm:hover {
  background: oklch(0.92 0.05 275) !important;
  border-color: oklch(0.80 0.08 275) !important;
}

/* ── Stock / qty pills ── */
.qty-pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  font-family: var(--pos-font);
  font-variant-numeric: tabular-nums;
}
.qty-pill.good, span.text-success.qty-pill { background: var(--pos-success-soft) !important; color: oklch(0.40 0.13 150) !important; }
.qty-pill.low,  span.text-warning.qty-pill { background: var(--pos-warning-soft) !important; color: oklch(0.42 0.13 75)  !important; }
.qty-pill.out,  span.text-danger.qty-pill  { background: var(--pos-danger-soft)  !important; color: var(--pos-danger)    !important; }

/* ── Checkbox column ── */
table.dataTable td input[type="checkbox"],
table.dataTable th input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--pos-primary);
  cursor: pointer;
}


/* ── Suppress <br> spacer hacks inside tab panes ── */
.tab-pane > br,
.tab-content > .tab-pane > br {
  display: none !important;
}

/* ── Middle row (table container) — must stay block, not flex ── */
.dataTables_wrapper > .row:not(:first-child):not(:last-child) {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}
.dataTables_wrapper > .row:not(:first-child):not(:last-child) > [class*="col-sm-"] {
  float: none !important;
  width: 100% !important;
  padding: 0 !important;
}