/* ============================================================
   Inventory Page — specific styles
   Depends on base.css being loaded first.
   ============================================================ */

/* ── Search highlight ───────────────────────────────────────── */
.search-hl {
  background: #fef08a;
  border-radius: 2px;
  padding: 0 1px;
}

/* ── Table Section ──────────────────────────────────────────── */
.table-section {
  padding: 20px 24px 120px; /* bottom pad for float bar */
}

/* ── Column Widths ──────────────────────────────────────────── */
.col-check { width: 46px; }
.col-img   { width: 56px; text-align: center; }
.col-num   { width: 110px; }
.col-desc  { min-width: 200px; }
.col-notes { min-width: 160px; }
.col-inv   { width: 110px; text-align: center; }
.col-inv .type-tags { display: inline-flex; flex-direction: column; gap: 3px; align-items: center; }
.col-whse  { width: 84px; text-align: center; font-variant-numeric: tabular-nums; }
.col-whse .whse-qty  { display: block; }
.col-whse .whse-date { display: block; font-size: 10px; line-height: 1.2; color: var(--color-text-faint); margin-top: 2px; }
.col-act   { width: 140px; }

/* ── Item Number cell ───────────────────────────────────────── */
.cell-item-num {
  font-family: monospace;
  font-weight: 600;
  font-size: 13px;
}

/* ── Notes cell ─────────────────────────────────────────────── */
.cell-notes {
  color: var(--color-text-muted);
  font-size: 13px;
}

/* ── Action Button Group ────────────────────────────────────── */
.action-btns { display: flex; gap: 6px; }

/* ── Selection checkboxes — bigger hit target ───────────────── */
.col-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

/* ── Zebra Striping ─────────────────────────────────────────── */
.table-section tbody tr:nth-child(even):not(.state-row) td {
  background: #f4f6f9;
}
.table-section tbody tr:nth-child(even):not(.state-row):hover td {
  background: #eaedf2;
}

/* ── Selected Row Highlight ─────────────────────────────────── */
tbody tr.selected td { background: var(--color-primary-light) !important; }

/* ── Ticket Picker (in modal) ───────────────────────────────── */
.ticket-pick-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 360px;
  overflow-y: auto;
}

.ticket-pick-item {
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.ticket-pick-item:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.ticket-pick-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text);
  margin-bottom: 3px;
}

.ticket-pick-meta {
  font-size: 12px;
  color: var(--color-text-muted);
}

/* ── Empty picker state ─────────────────────────────────────── */
.picker-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--color-text-muted);
}
.picker-empty .state-icon { font-size: 28px; margin-bottom: 10px; }

/* ── Mobile: Card Layout ────────────────────────────────────── */
@media (max-width: 900px) {
  .table-section { padding: 12px 12px 100px; }

  /* Collapse table structure to block */
  .table-section table,
  .table-section tbody { display: block; }
  .table-section table thead { display: none; }

  /* State row stays centered */
  .table-section tbody tr.state-row { display: block; text-align: center; }
  .table-section tbody tr.state-row td {
    display: block;
    border: none;
    background: transparent !important;
    padding: 40px 20px;
  }

  /* Each item row becomes a card */
  .table-section tbody tr:not(.state-row) {
    display: grid;
    grid-template-columns: 28px 48px 1fr auto;
    column-gap: 8px;
    row-gap: 4px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: 8px;
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
  }

  /* Reset all td styles from the table layout */
  .table-section tbody tr:not(.state-row) td {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    width: auto !important;
    min-width: 0 !important;
    text-align: left !important;
  }

  /* Disable table row hover on cards */
  .table-section tbody tr:not(.state-row):hover td { background: transparent !important; }

  /* Selected card: highlight the row, not each td */
  .table-section tbody tr.selected {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
  }

  /* Grid placement — 4 columns: [check][img][content][type] */
  .col-check {
    grid-column: 1;
    grid-row: 1 / 6;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .col-img   {
    grid-column: 2;
    grid-row: 1 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .col-num   { grid-column: 3; grid-row: 1; align-self: center; }
  .col-inv   { grid-column: 4; grid-row: 1; align-self: center; text-align: right; }
  .col-desc  { grid-column: 3 / 5; grid-row: 2; font-size: 14px; }
  .col-notes { grid-column: 3 / 5; grid-row: 3; }
  .col-act   { grid-column: 4; grid-row: 4; align-self: center; }
  .col-act .action-btns { justify-content: flex-end; }
  .col-whse  {
    grid-column: 3 / 5;
    grid-row: 5;
    align-self: center;
    text-align: left;
  }
  .col-whse::before {
    content: "Whse Qty: ";
    color: var(--color-text-faint);
    font-weight: 400;
  }

  .item-thumb, .no-thumb { width: 36px; height: 36px; }

  /* FAB replaces the controls-bar create button */
  .fab-trigger { display: none; }
}