/* =============================================================
   HisaabPOS — Design Tokens + Global UI
   Loaded globally via layouts/partials/css.blade.php
   ============================================================= */

/* ── Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ── Design tokens ── */
:root {
  --pos-primary:       oklch(0.52 0.19 275);
  --pos-primary-h:     oklch(0.46 0.20 275);
  --pos-primary-soft:  oklch(0.96 0.03 275);
  --pos-primary-ink:   oklch(0.32 0.15 275);

  --pos-bg:            oklch(0.985 0.003 90);
  --pos-surface:       #ffffff;
  --pos-surface-2:     oklch(0.975 0.004 90);
  --pos-surface-3:     oklch(0.96 0.005 90);

  --pos-ink-1:         oklch(0.20 0.01 270);
  --pos-ink-2:         oklch(0.40 0.01 270);
  --pos-ink-3:         oklch(0.58 0.01 270);
  --pos-ink-4:         oklch(0.75 0.008 270);

  --pos-line:          oklch(0.92 0.005 270);
  --pos-line-2:        oklch(0.88 0.006 270);

  --pos-success:       oklch(0.62 0.16 150);
  --pos-success-soft:  oklch(0.96 0.04 150);
  --pos-danger:        oklch(0.60 0.20 25);
  --pos-danger-soft:   oklch(0.96 0.04 25);
  --pos-warning:       oklch(0.74 0.15 75);
  --pos-warning-soft:  oklch(0.97 0.05 75);

  --pos-shadow-1:      0 1px 0 rgba(16,18,30,.04), 0 1px 2px rgba(16,18,30,.06);
  --pos-shadow-2:      0 4px 12px rgba(16,18,30,.06), 0 1px 2px rgba(16,18,30,.04);

  --pos-radius:        10px;
  --pos-radius-lg:     14px;

  --pos-font:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --pos-mono:          'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
}

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

/* ── Page heading (content-header) ── */
.content-header {
  padding: 18px 24px 10px !important;
  background: transparent !important;
}
.content-header h1 {
  font-family: var(--pos-font) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--pos-ink-1) !important;
  line-height: 1.2 !important;
}
.content-header h1 small {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--pos-ink-3) !important;
  letter-spacing: 0 !important;
  margin-left: 8px !important;
}

/* ── Main content padding ── */
.content {
  padding: 0 24px 24px !important;
}

/* ── Filters card (pos-filters-card) ── */
.pos-filters-card {
  background: var(--pos-surface);
  border: 1px solid var(--pos-line) !important;
  border-radius: var(--pos-radius-lg) !important;
  box-shadow: none !important;
  margin-bottom: 14px !important;
  overflow: hidden;
}

/* Header row — always visible */
.pos-filters-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s;
}
.pos-filters-header.collapsed {
  border-bottom-color: transparent;
}
.pos-filters-header:not(.collapsed) {
  border-bottom-color: var(--pos-line);
}
.pos-filters-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--pos-primary-ink);
  font-family: var(--pos-font);
}
.pos-filters-icon {
  color: var(--pos-primary);
  display: flex;
  align-items: center;
}
.pos-filters-chevron {
  margin-left: auto;
  color: var(--pos-ink-4);
  display: flex;
  align-items: center;
  transition: transform .2s;
}
.pos-filters-header:not(.collapsed) .pos-filters-chevron {
  transform: rotate(180deg);
}

/* Body — flex-wrap row of filter groups */
.pos-filters-body {
  padding: 14px 16px 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: flex-end;
}

/* Override Bootstrap grid inside filter body */
.pos-filters-body .col-md-1,
.pos-filters-body .col-md-2,
.pos-filters-body .col-md-3,
.pos-filters-body .col-md-4,
.pos-filters-body .col-md-5,
.pos-filters-body .col-md-6,
.pos-filters-body [class*="col-md-"] {
  float: none !important;
  width: auto !important;
  min-width: 160px !important;
  max-width: 220px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  flex: 0 0 auto;
}

.pos-filters-body .form-group {
  margin-bottom: 8px !important;
}

/* Filter labels */
.pos-filters-body label,
.pos-filters-body .control-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--pos-ink-3) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  margin-bottom: 5px !important;
  display: block !important;
  font-family: var(--pos-font) !important;
}

/* ── Select2 in filters ── */
.pos-filters-body .select2-container--default .select2-selection--single {
  height: 36px !important;
  border: 1px solid var(--pos-line-2) !important;
  border-radius: 8px !important;
  background: var(--pos-surface) !important;
  display: flex !important;
  align-items: center !important;
  font-size: 13px !important;
  font-family: var(--pos-font) !important;
}
.pos-filters-body .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 36px !important;
  padding-left: 12px !important;
  padding-right: 30px !important;
  color: var(--pos-ink-2) !important;
  font-size: 13px !important;
  font-family: var(--pos-font) !important;
}
.pos-filters-body .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 34px !important;
  right: 8px !important;
}
.pos-filters-body .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--pos-primary) !important;
  box-shadow: 0 0 0 3px var(--pos-primary-soft) !important;
}

/* ── Select2 dropdown panel ── */
.select2-dropdown {
  border: 1px solid var(--pos-line-2) !important;
  border-radius: 10px !important;
  box-shadow: var(--pos-shadow-2) !important;
  overflow: hidden !important;
  font-family: var(--pos-font) !important;
}
.select2-results__option {
  padding: 8px 12px !important;
  font-size: 13px !important;
  color: var(--pos-ink-2) !important;
  font-family: var(--pos-font) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--pos-primary-soft) !important;
  color: var(--pos-primary-ink) !important;
}
.select2-container--default .select2-results__option[aria-selected=true] {
  background: var(--pos-primary-soft) !important;
  color: var(--pos-primary-ink) !important;
}
.select2-search--dropdown .select2-search__field {
  border: 1px solid var(--pos-line-2) !important;
  border-radius: 7px !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
  font-family: var(--pos-font) !important;
  outline: none !important;
}
.select2-search--dropdown .select2-search__field:focus {
  border-color: var(--pos-primary) !important;
  box-shadow: 0 0 0 3px var(--pos-primary-soft) !important;
}

/* ── Nav tabs (All Products / Stock Report etc.) ── */
.nav-tabs-custom {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
}
.nav-tabs-custom > .nav-tabs {
  background: transparent !important;
  border-bottom: 1px solid var(--pos-line) !important;
  margin-bottom: 14px !important;
  display: flex !important;
  gap: 2px !important;
}
.nav-tabs-custom > .nav-tabs > li > a {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  color: var(--pos-ink-3) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 10px 16px !important;
  margin-bottom: -1px !important;
  font-family: var(--pos-font) !important;
  transition: color .12s, border-color .12s !important;
}
.nav-tabs-custom > .nav-tabs > li > a:hover {
  color: var(--pos-ink-1) !important;
  background: transparent !important;
}
.nav-tabs-custom > .nav-tabs > li.active > a,
.nav-tabs-custom > .nav-tabs > li.active > a:focus,
.nav-tabs-custom > .nav-tabs > li.active > a:hover {
  border-bottom: 2px solid var(--pos-primary) !important;
  color: var(--pos-primary-ink) !important;
  font-weight: 700 !important;
  background: transparent !important;
}
.nav-tabs-custom > .nav-tabs > li > a i {
  margin-right: 6px;
  font-size: 12px;
}
/* Action buttons placed inside nav-tabs header (right side) */
.nav-tabs-custom > .nav-tabs > li.nav-tab-actions {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 0 !important;
  float: none !important;
}
.nav-tabs-custom > .nav-tabs > li.nav-tab-actions > a.tw-dw-btn {
  background: var(--pos-primary) !important;
  background-image: none !important;
  border-radius: 8px !important;
  height: 32px !important;
  padding: 0 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  border: none !important;
  border-bottom: none !important;
  margin-bottom: 0 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  line-height: 1 !important;
}
.nav-tabs-custom > .nav-tabs > li.nav-tab-actions > a.tw-dw-btn:hover {
  background: var(--pos-primary-h) !important;
  background-image: none !important;
  color: #fff !important;
}
.nav-tabs-custom > .nav-tabs > li.nav-tab-actions > a.tw-dw-btn svg {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
}
.nav-tabs-custom > .tab-content {
  padding: 0 !important;
  background: transparent !important;
}

/* ── Primary action buttons (Add Product, Download Excel etc.) ── */
/* Broad match: any gradient tw-dw-btn anywhere on the page */
.tw-dw-btn.tw-bg-gradient-to-r,
.tw-dw-btn[class*="tw-from-"],
a.tw-dw-btn.pull-right,
button.tw-dw-btn.pull-right {
  background: var(--pos-primary) !important;
  background-image: none !important;
  border-radius: 8px !important;
  height: 32px !important;
  padding: 0 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  border: none !important;
  box-shadow: none !important;
  letter-spacing: 0 !important;
  font-family: var(--pos-font) !important;
  color: #fff !important;
  text-shadow: none !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.tw-dw-btn.tw-bg-gradient-to-r:hover,
.tw-dw-btn[class*="tw-from-"]:hover,
a.tw-dw-btn.pull-right:hover,
button.tw-dw-btn.pull-right:hover {
  background: var(--pos-primary-h) !important;
  background-image: none !important;
  filter: none !important;
  color: #fff !important;
}
.tw-dw-btn.tw-bg-gradient-to-r svg,
.tw-dw-btn[class*="tw-from-"] svg,
a.tw-dw-btn.pull-right svg,
button.tw-dw-btn.pull-right svg {
  width: 14px !important;
  height: 14px !important;
}

/* ── Action buttons above DataTable ──
   Hide until the global init.dt handler moves them into the toolbar.
   Once moved they are no longer direct children of their container,
   so this rule stops matching and they become visible automatically.
*/
/* Match only the DataTable action-button signature (`pull-right` is the
   marker class the global init.dt handler strips when relocating them). */
.tab-pane > a.tw-dw-btn.pull-right,
.tab-pane > button.tw-dw-btn.pull-right,
.col-md-12 > a.tw-dw-btn.pull-right,
.col-md-12 > button.tw-dw-btn.pull-right,
.col-sm-12 > a.tw-dw-btn.pull-right,
.col-sm-12 > button.tw-dw-btn.pull-right {
  display: none !important;
}
/* Do not hide buttons/links inside forms even if they match the relocation selector */
form .tab-pane > a.tw-dw-btn.pull-right,
form .tab-pane > button.tw-dw-btn.pull-right,
form .col-md-12 > a.tw-dw-btn.pull-right,
form .col-md-12 > button.tw-dw-btn.pull-right,
form .col-sm-12 > a.tw-dw-btn.pull-right,
form .col-sm-12 > button.tw-dw-btn.pull-right {
  display: inline-flex !important;
}
/* Clear floats so DataTable starts below if buttons haven't been moved yet */
.tab-pane::after {
  content: '';
  display: table;
  clear: both;
}

/* ── Invoice/receipt print protection ── */
/* Ensure Bootstrap col-md-* columns float correctly inside the receipt section
   when printing (A4 print width can fall below Bootstrap's 992px breakpoint,
   which would stack columns vertically and break the two-column invoice layout). */
@media print {
  #receipt_section [class*="col-md-"],
  #receipt_section [class*="col-sm-"],
  #receipt_section [class*="col-xs-"] {
    float: left !important;
  }
  #receipt_section .col-md-6,
  #receipt_section .col-sm-6,
  #receipt_section .width-50 {
    width: 50% !important;
  }
  #receipt_section .col-md-4,
  #receipt_section .col-sm-4 {
    width: 33.33% !important;
  }
  #receipt_section .col-md-8,
  #receipt_section .col-sm-8 {
    width: 66.66% !important;
  }
  #receipt_section .col-md-12,
  #receipt_section .col-sm-12,
  #receipt_section .col-xs-12 {
    width: 100% !important;
  }
}