/* Bulk Out of Stock panel — scoped under .bulk-oos.
   theme.css is loaded globally (client/index.html), so var(--rw-*) tokens
   resolve in the billing modal — each token carries a literal fallback matching
   the design system so styling never collapses. */

/* Clip the ui-bootstrap modal shell so the header's rounded corners stay clean. */
.bulk-oos-modal-window .modal-content {
  border-radius: 14px;
  overflow: hidden;
  border: none;
}
.bulk-oos-modal-window .modal-body { padding: 0; }
/* Use the screen: wide dialog, small top/bottom margins. */
.bulk-oos-modal-window .modal-dialog {
  width: 92vw;
  max-width: 1180px;
  margin: 3vh auto;
}

.bulk-oos {
  display: flex;
  flex-direction: column;
  height: 90vh;
  max-height: 90vh;
  font-family: var(--rw-font, inherit);
  color: var(--rw-text, #1F2937);
}

/* ── header ── */
.bulk-oos-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  background: linear-gradient(135deg, var(--rw-primary, #0E52C1) 0%, var(--rw-primary-end, #5B8FFF) 100%);
  color: #fff;
}
.bulk-oos-head-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.bulk-oos-head-titlewrap { flex: 1; min-width: 0; }
.bulk-oos-head-title { margin: 0; font-size: 17px; font-weight: 700; }
.bulk-oos-head-sub { font-size: 12px; opacity: 0.85; }
.bulk-oos-head-count {
  font-size: 13px;
  background: rgba(255, 255, 255, 0.18);
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.bulk-oos-head-count strong { font-size: 15px; }
.bulk-oos-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}
.bulk-oos-close[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ── body ── */
.bulk-oos-body {
  padding: 16px 22px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  background: var(--rw-bg, #F5F6F8);
}

/* ── summary strip ── */
.bulk-oos-summary {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.bulk-oos-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 78px;
  padding: 8px 14px;
  background: var(--rw-white, #fff);
  border: 1px solid var(--rw-border, #E2E5EA);
  border-radius: 10px;
  border-left-width: 3px;
  border-left-color: var(--rw-border, #E2E5EA);
}
.bulk-oos-stat-num { font-size: 20px; font-weight: 700; line-height: 1.1; color: var(--rw-text, #1F2937); }
.bulk-oos-stat-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--rw-text-light, #6B7280);
  margin-top: 2px;
}
.bulk-oos-stat.is-in { border-left-color: #22c55e; }
.bulk-oos-stat.is-in .bulk-oos-stat-num { color: #16a34a; }
.bulk-oos-stat.is-out { border-left-color: #ef4444; }
.bulk-oos-stat.is-out .bulk-oos-stat-num { color: #dc2626; }
.bulk-oos-stat.is-selected { border-left-color: var(--rw-primary, #0E52C1); background: var(--rw-primary-light, #EEF3FF); }
.bulk-oos-stat.is-selected .bulk-oos-stat-num { color: var(--rw-primary, #0E52C1); }
.bulk-oos-summary-spacer { flex: 1; }

/* ── filters ── */
.bulk-oos-filters {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.bulk-oos-search { position: relative; flex: 1 1 200px; }
.bulk-oos-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--rw-text-light, #6B7280);
  font-size: 13px;
}
.bulk-oos-input {
  height: 38px;
  border: 1px solid var(--rw-border, #E2E5EA);
  border-radius: 9px;
  background: var(--rw-white, #fff);
  font-size: 13px;
  box-shadow: none;
  color: var(--rw-text, #1F2937);
}
.bulk-oos-search .bulk-oos-input { padding-left: 34px; }
.bulk-oos-input:focus {
  border-color: var(--rw-primary, #0E52C1);
  box-shadow: 0 0 0 3px var(--rw-shadow-sm, rgba(0, 70, 255, 0.08));
}
/* Category dropdown — a searchable ui-select and the dominant filter: ~2x the
   search's flex so it reads as wider / more prominent than the name search.
   Clicking opens the full category list; the dropdown has its own search box. */
.bulk-oos-catwrap { position: relative; flex: 2 1 340px; min-width: 220px; }
.bulk-oos-catselect { width: 100%; display: block; }
.bulk-oos-catselect .ui-select-toggle,
.bulk-oos-catselect .ui-select-match > .btn {
  min-height: 38px;
  border-radius: 9px;
  border: 1px solid var(--rw-border, #E2E5EA);
  background: var(--rw-white, #fff);
  font-size: 13px;
  color: var(--rw-text, #1F2937);
  box-shadow: none;
  display: flex;
  align-items: center;
}
.bulk-oos-catselect .ui-select-choices { max-height: 260px; overflow-y: auto; }

/* ── toolbar: status chips + bulk-select actions ── */
.bulk-oos-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.bulk-oos-chips { display: flex; align-items: center; flex-wrap: wrap; }
/* rw-btn-chip is the global design-system chip; trim its default bottom margin
   so the row stays tight inside the modal. */
.bulk-oos-chip { margin: 0 6px 0 0; }
.bulk-oos-chip i { margin-right: 4px; font-size: 11px; }
.bulk-oos-toolbar-spacer { flex: 1; }
.bulk-oos-btn-plain {
  height: 34px;
  border-radius: 9px;
  border: 1px solid var(--rw-border, #E2E5EA);
  background: var(--rw-white, #fff);
  font-size: 13px;
  font-weight: 600;
  color: var(--rw-text, #1F2937);
}

/* ── table ── */
.bulk-oos-table-wrap {
  background: var(--rw-white, #fff);
  border: 1px solid var(--rw-border, #E2E5EA);
  border-radius: 12px;
  overflow: hidden;
}
.bulk-oos-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
}
.bulk-oos-th {
  background: var(--rw-surface, #f1f5f9);
  color: var(--rw-text-light, #6B7280);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rw-border, #E2E5EA);
  text-align: left;
}
.bulk-oos-th-check { width: 44px; }
.bulk-oos-th-cat { width: 22%; }
.bulk-oos-th-status { width: 130px; }

.bulk-oos-row { border-bottom: 1px solid #eef1f5; transition: background 0.12s; }
.bulk-oos-row:hover { background: var(--rw-surface, #f8fafc); }
.bulk-oos-row.is-selected { background: var(--rw-primary-light, #EEF3FF); }
/* .item-class-red is the shared OOS class from billing.css; keep this tint subtle
   so it composes rather than overrides. */
.bulk-oos-row.is-oos:not(.is-selected) { background: #fef2f2; }

/* section header rows are not hover/selectable */
.bulk-oos-section-row, .bulk-oos-section-row:hover { background: var(--rw-surface, #f8fafc); }
.bulk-oos-td-section {
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--rw-text-light, #6B7280);
  border-top: 1px solid var(--rw-border, #E2E5EA);
}
.bulk-oos-td-section i { margin-right: 8px; color: var(--rw-primary, #0E52C1); }
.bulk-oos-section-title { vertical-align: middle; }
.bulk-oos-section-count {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--rw-white, #fff);
  border: 1px solid var(--rw-border, #E2E5EA);
  color: var(--rw-text-light, #6B7280);
  font-size: 11px;
}

.bulk-oos-td {
  padding: 11px 14px;
  font-size: 13px;
  vertical-align: middle;
  border-top: none;
}
.bulk-oos-td-name { cursor: pointer; }
.bulk-oos-name { font-weight: 600; color: var(--rw-text, #1F2937); }
.bulk-oos-row.is-oos .bulk-oos-name { color: #dc2626; }
.bulk-oos-num { color: #94a3b8; font-size: 12px; margin-left: 6px; }
.bulk-oos-td-cat { color: var(--rw-text-light, #6B7280); }

.bulk-oos-variant-row { background: #fbfcfe; }
.bulk-oos-variant-row .bulk-oos-td-name { padding-left: 8px; }
.bulk-oos-variant-branch { color: #94a3b8; margin-right: 6px; }
.bulk-oos-addon-row .bulk-oos-td-name { padding-left: 8px; }

.bulk-oos-expand {
  display: inline-block;
  margin-left: 10px;
  border: 1px solid var(--rw-border, #E2E5EA);
  background: var(--rw-white, #fff);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--rw-primary, #0E52C1);
  cursor: pointer;
}

/* ── checkbox ── */
.bulk-oos-check {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  border: 2px solid #94a3b8;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: transparent;
  font-size: 11px;
}
.bulk-oos-check.is-checked {
  background: #0E52C1;
  border-color: #0E52C1;
  color: #fff;
}
.bulk-oos-check.is-partial {
  background: #EEF3FF;
  border-color: #0E52C1;
  color: #0E52C1;
}

/* ── status badges ── */
.bulk-oos-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.bulk-oos-badge.is-in { background: #dcfce7; color: #15803d; }
.bulk-oos-badge.is-out { background: #fee2e2; color: #dc2626; }
.bulk-oos-badge.is-variant { background: #eef1f5; color: #64748b; }

/* ── empty ── */
.bulk-oos-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--rw-text-light, #6B7280);
  background: var(--rw-white, #fff);
  border: 1px solid var(--rw-border, #E2E5EA);
  border-radius: 12px;
}
.bulk-oos-empty i { font-size: 30px; color: #cbd5e1; display: block; margin-bottom: 10px; }
.bulk-oos-empty-text strong { display: block; color: var(--rw-text, #1F2937); margin-bottom: 4px; }
.bulk-oos-empty-text span { font-size: 12px; }
.bulk-oos-empty .bulk-oos-btn-plain { margin-top: 14px; }

/* ── progress ── */
.bulk-oos-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}
.bulk-oos-progress-bar {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: var(--rw-border, #E2E5EA);
  overflow: hidden;
}
.bulk-oos-progress-fill {
  height: 100%;
  background: var(--rw-primary, #0E52C1);
  transition: width 0.2s ease;
}
.bulk-oos-progress-text { font-size: 12px; color: var(--rw-text-light, #6B7280); white-space: nowrap; }

/* ── footer ── */
.bulk-oos-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--rw-border, #E2E5EA);
  background: var(--rw-white, #fff);
  position: sticky;
  bottom: 0;
}
.bulk-oos-foot-meta { font-size: 13px; color: var(--rw-text-light, #6B7280); }
.bulk-oos-foot-spacer { flex: 1; }
.bulk-oos-btn-in, .bulk-oos-btn-out { font-weight: 600; min-width: 150px; }

/* ── pager ── */
.bulk-oos-pager {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 8px 4px 2px;
}
.bulk-oos-pager-info { font-size: 12px; color: var(--rw-text-light, #6B7280); }
.bulk-oos-pager-spacer { flex: 1; }
.bulk-oos-pager-page { font-size: 12px; font-weight: 600; color: var(--rw-text, #1F2937); }
.bulk-oos-pager-btn {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid var(--rw-border, #E2E5EA);
  background: var(--rw-white, #fff);
  color: var(--rw-text, #1F2937);
  font-size: 13px;
  cursor: pointer;
}
.bulk-oos-pager-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.bulk-oos-pager-btn:not([disabled]):hover { border-color: var(--rw-primary, #0E52C1); color: var(--rw-primary, #0E52C1); }