/* ============================================================
   NLG SMARTFABX — LOW STOCK SUMMARY   low_stock_summary.css
   Page-specific styles (imports main_inventory.css as base)
   ============================================================ */

/* ── Alert Banner ──────────────────────── */
.alert-banner {
  background: rgba(220,38,38,0.05);
  border: 1px solid rgba(220,38,38,0.2);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
}
.alert-banner .alert-icon { font-size: 1.2rem; }
.alert-banner strong { color: var(--red); }

/* ── Threshold Settings ────────────────── */
.threshold-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-md);
}
.threshold-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.threshold-input {
  padding: 5px 10px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  width: 70px;
  outline: none;
}
.threshold-input:focus { border-color: var(--teal); }

/* ── Low Stock Table specifics ─────────── */
.ls-table { width: 100%; border-collapse: collapse; min-width: 800px; }
.ls-table th {
  background: var(--bg-card);
  color: var(--text-secondary);
  padding: 9px 12px;
  text-align: left;
  font-weight: 600;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  position: sticky;
  top: 0;
  z-index: 2;
}
.ls-table th:hover { color: var(--red); }
.ls-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
  vertical-align: middle;
}
.ls-table tbody tr:hover { background: var(--bg-raised); }
.ls-table tbody tr:nth-child(even) { background: var(--bg-card); }
.ls-table tbody tr:nth-child(even):hover { background: var(--bg-raised); }

/* ── Print ─────────────────────────────── */
@media print {
  .threshold-bar { display: none !important; }
}
.table-container{overflow-x:auto;max-height:calc(100vh - 430px);overflow-y:auto}
.table-container::-webkit-scrollbar{width:5px;height:5px}
.table-container::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:3px}
.ls-table{width:100%;border-collapse:collapse;min-width:800px}
.ls-table th{background:var(--bg-card);color:var(--text-secondary);padding:9px 12px;text-align:left;font-weight:600;font-size:0.68rem;text-transform:uppercase;letter-spacing:0.5px;border-bottom:1px solid var(--border);font-family:var(--font-mono);white-space:nowrap;cursor:pointer;user-select:none}
.ls-table th:hover{color:var(--red)}
.ls-table td{padding:9px 12px;border-bottom:1px solid rgba(45,55,72,0.5);font-size:0.82rem;vertical-align:middle}
.ls-table tbody tr:hover{background:var(--bg-raised)}
.ls-table tbody tr:nth-child(even){background:rgba(28,34,48,0.4)}
.ls-table tbody tr:nth-child(even):hover { background: var(--bg-raised); }

/* ── Print ─────────────────────────────── */
@media print {
  .threshold-bar { display: none !important; }
}