﻿/* ─── Inventory Page Styles ───────────────────────────────────
   Owner: pages/inventory/inventory.css
   Wave 8 / PR-308-C2 (Inventory migration)
   Rule: Shell layout + inventory-specific patterns only.
   Rule: Zero hardcoded colors — all via --mr-* tokens.
   ─────────────────────────────────────────────────────────── */

/* ── Tab bars ───────────────────────────────────────────── */
.inv-tab-bar {
  margin-bottom: var(--mr-space-md);
}

.inv-sub-tab-bar {
  margin-bottom: var(--mr-space-md);
  border-bottom-color: var(--mr-border);
}

/* ── Tab panels ─────────────────────────────────────────── */
.inv-tab-panel {
  padding: var(--mr-space-lg) !important;
}

.inv-sub-panel {
  padding-top: var(--mr-space-md);
}

/* ── Panel header row ───────────────────────────────────── */
.inv-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mr-space-sm);
  margin-bottom: var(--mr-space-lg);
}

.inv-panel-header .mr-page-heading {
  margin: 0;
}

/* ── Add/Edit product form ──────────────────────────────── */
.inv-form {
  border-left: 3px solid var(--mr-primary);
  padding: var(--mr-space-md) var(--mr-space-lg);
  margin-bottom: var(--mr-space-lg);
  background: var(--mr-primary-subtle);
  border-radius: 0 var(--mr-radius-sm) var(--mr-radius-sm) 0;
}

.inv-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--mr-space-sm);
  align-items: end;
}

.inv-form-save-col {
  display: flex;
  align-items: flex-end;
  gap: var(--mr-space-xs);
  padding-bottom: 1px;
}

/* Supplier form sits below the supplier table */
.inv-sup-form {
  margin-top: var(--mr-space-lg);
  padding-top: var(--mr-space-md);
  border-top: 1px solid var(--mr-border);
}

/* ── Search + sort toolbar ──────────────────────────────── */
.inv-toolbar {
  display: flex;
  gap: var(--mr-space-sm);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--mr-space-md);
}

.inv-search {
  flex: 1;
  min-width: 180px;
  height: 40px;
}

.inv-sort {
  min-width: 140px;
  height: 40px;
}

/* ── Product table ──────────────────────────────────────── */
.inv-pagination {
  margin-top: var(--mr-space-sm);
  font-size: 12px;
  color: var(--mr-text-muted);
}

/* ── Empty state ────────────────────────────────────────── */
.inv-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--mr-space-sm);
  padding: var(--mr-space-2xl) var(--mr-space-xl);
  color: var(--mr-text-muted);
  font-size: 13px;
}

.inv-empty span:first-child {
  font-size: 1.5rem;
  opacity: 0.6;
}

/* ── Stock analysis tab ─────────────────────────────────── */
.inv-stock-summary {
  margin: var(--mr-space-sm) 0 var(--mr-space-md);
  display: block;
}

.inv-stock-table-wrap {
  margin-top: var(--mr-space-sm);
}

/* ── Purchase entry: add-item row ───────────────────────── */
.inv-pur-add-row {
  display: flex;
  gap: var(--mr-space-md);
  align-items: flex-end;
  margin: var(--mr-space-md) 0;
}

.inv-qty-wrap {
  width: 100px;
  flex-shrink: 0;
}

/* ── Purchase payment row ───────────────────────────────── */
.inv-pur-payment-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: var(--mr-space-md);
  align-items: end;
  margin: var(--mr-space-md) 0;
}

.inv-pur-due {
  padding-bottom: var(--mr-space-xs);
  white-space: nowrap;
}

/* ── Category add row ───────────────────────────────────── */
.inv-cat-row {
  display: flex;
  gap: var(--mr-space-xs);
  align-items: center;
  margin-bottom: var(--mr-space-xs);
}

.inv-cat-row .mr-input {
  flex: 1;
}

/* ── Generic action row (save/clear buttons) ────────────── */
.inv-action-row {
  display: flex;
  gap: var(--mr-space-sm);
  align-items: center;
  margin: var(--mr-space-md) 0;
}

/* ── Purchase returns ───────────────────────────────────── */
.inv-ret-load-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--mr-space-md);
  align-items: end;
  margin-bottom: var(--mr-space-md);
}

.inv-ret-invoice {
  /* flex:1 already handled by grid */
}

.inv-ret-info {
  margin-bottom: var(--mr-space-md);
  display: block;
}

.inv-ret-totals {
  margin: var(--mr-space-md) 0;
}

/* ── Mobile ─────────────────────────────────────────────── */
@media (max-width: 767px) {
  .inv-form-grid {
    grid-template-columns: 1fr 1fr;
  }

  .inv-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .inv-search,
  .inv-sort {
    width: 100%;
    min-width: unset;
  }

  .inv-pur-payment-row {
    grid-template-columns: 1fr 1fr;
  }

  .inv-pur-due {
    grid-column: 1 / -1;
  }

  .inv-ret-load-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .inv-form-grid {
    grid-template-columns: 1fr;
  }
}
