/**
 * Stock Admin UI - Shared CSS
 *
 * Custom properties and component styles for the stock admin pages
 * (stale goods dashboard, stock overview, product stock card, staleness rule form).
 *
 * Extracted from: .planning/sketches/beowulf-stock-admin-redesign/mockup-bootstrap.html
 */

/* ============================================
   Custom Properties
   ============================================ */

:root {
    --bw-accent: #00d4aa;
    --bw-blue: #4a90ff;
    --bw-red: #ff4757;
    --bw-orange: #ff8c42;
    --bw-yellow: #ffd43b;
    --bw-green: #22c55e;
    --bw-purple: #a855f7;
    --bw-text-muted: #5a5a72;
    --bw-mono: 'JetBrains Mono', monospace;
}

/* ============================================
   Metric Cards
   ============================================ */

.metric-card {
    position: relative;
    overflow: hidden;
}

.metric-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.metric-card.accent-red::before {
    background: var(--bw-red);
}

.metric-card.accent-orange::before {
    background: var(--bw-orange);
}

.metric-card.accent-blue::before {
    background: var(--bw-blue);
}

.metric-card.accent-green::before {
    background: var(--bw-green);
}

.metric-label {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--bw-text-muted);
}

.metric-value {
    font-family: var(--bw-mono);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
}

.metric-detail {
    font-size: 12px;
    color: var(--bw-text-muted);
}

/* ============================================
   Aging Badges
   ============================================ */

.aging-badge {
    font-family: var(--bw-mono);
    font-size: 11.5px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 20px;
}

.aging-t1 {
    background: rgba(74, 144, 255, 0.12);
    color: var(--bw-blue);
}

.aging-t2 {
    background: rgba(255, 212, 59, 0.12);
    color: var(--bw-yellow);
}

.aging-t3 {
    background: rgba(255, 140, 66, 0.12);
    color: var(--bw-orange);
}

.aging-t4 {
    background: rgba(255, 71, 87, 0.12);
    color: var(--bw-red);
}

/* ============================================
   Filters
   ============================================ */

.filter-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--bw-text-muted);
    margin-bottom: 4px;
}

.form-select-sm.bw-filter {
    background-color: var(--bs-card-bg);
    border-color: var(--bs-border-color);
    font-size: 13px;
    min-width: 130px;
}

/* ============================================
   Table Overrides
   ============================================ */

.table-bw {
    font-size: 13px;
    --bs-table-bg: transparent;
}

.table-bw thead th {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--bw-text-muted);
    border-bottom-color: var(--bs-border-color);
    background: var(--bs-secondary-bg);
    white-space: nowrap;
    padding: 10px 14px;
}

.table-bw tbody td {
    border-bottom-color: rgba(37, 37, 53, 0.6);
    padding: 10px 14px;
    vertical-align: middle;
}

.table-bw tbody tr:hover {
    background: rgba(30, 30, 45, 0.5);
}

/* ============================================
   Utility Classes
   ============================================ */

.mono {
    font-family: var(--bw-mono);
}

/* ============================================
   Product Link & Code
   ============================================ */

.product-link {
    color: var(--bw-blue);
    text-decoration: none;
    font-weight: 500;
}

.product-link:hover {
    text-decoration: underline;
    color: var(--bw-blue);
}

.product-code {
    color: var(--bw-text-muted);
    font-family: var(--bw-mono);
    font-size: 11.5px;
}

/* ============================================
   Status Badges
   ============================================ */

.badge-applied {
    background: rgba(255, 71, 87, 0.12);
    color: var(--bw-red);
    font-weight: 600;
}

.badge-pending {
    background: rgba(255, 212, 59, 0.12);
    color: var(--bw-yellow);
    font-weight: 600;
}

.badge-dismissed {
    background: rgba(90, 90, 114, 0.15);
    color: var(--bw-text-muted);
    font-weight: 600;
}

/* ============================================
   Discount Display
   ============================================ */

.price-old {
    text-decoration: line-through;
    color: var(--bw-text-muted);
    font-size: 12px;
}

.price-arrow {
    color: var(--bw-text-muted);
    font-size: 10px;
}

.price-new {
    color: var(--bw-red);
    font-weight: 600;
}

.discount-pct {
    font-family: var(--bw-mono);
    font-weight: 600;
    color: var(--bw-red);
}

/* ============================================
   Quantity Bars
   ============================================ */

.qty-bar-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.qty-bar {
    width: 50px;
    height: 5px;
    background: #252535;
    border-radius: 3px;
    overflow: hidden;
    display: inline-block;
}

.qty-bar-fill {
    height: 100%;
    border-radius: 3px;
}

.fill-high {
    background: var(--bw-green);
}

.fill-med {
    background: var(--bw-yellow);
}

.fill-low {
    background: var(--bw-orange);
}

.fill-crit {
    background: var(--bw-red);
}

.qty-zero {
    color: var(--bw-text-muted);
}

/* ============================================
   Batch Bar
   ============================================ */

.batch-bar {
    background: rgba(74, 144, 255, 0.06);
    border-bottom: 1px solid var(--bs-border-color);
    padding: 8px 14px;
    font-size: 13px;
}

.batch-count {
    font-family: var(--bw-mono);
    color: var(--bw-blue);
    font-weight: 600;
}

/* ============================================
   Warehouse Quantity Cards
   ============================================ */

.wh-card {
    text-align: center;
    padding: 18px;
}

.wh-card .wh-label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--bw-text-muted);
    margin-bottom: 4px;
}

.wh-card .wh-value {
    font-family: var(--bw-mono);
    font-size: 28px;
    font-weight: 700;
}

.wh-card.wh-total {
    border-color: var(--bw-blue) !important;
    background: rgba(74, 144, 255, 0.04);
}

.wh-card.wh-total .wh-value {
    color: var(--bw-blue);
}

/* ============================================
   Spark Chart
   ============================================ */

.spark-chart {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 56px;
}

.spark-chart .bar {
    flex: 1;
    border-radius: 2px 2px 0 0;
    min-width: 4px;
    transition: opacity 0.15s;
}

.spark-chart .bar:hover {
    opacity: 0.75;
}

.chart-dates {
    font-family: var(--bw-mono);
    font-size: 10px;
    color: var(--bw-text-muted);
}

/* ============================================
   History Table
   ============================================ */

.history-table {
    font-size: 12.5px;
}

.history-table th {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--bw-text-muted);
    font-weight: 600;
}

.change-up {
    color: var(--bw-green);
}

.change-down {
    color: var(--bw-red);
}

.change-none {
    color: var(--bw-text-muted);
}

/* ============================================
   Range Selector
   ============================================ */

.range-sel .btn {
    font-family: var(--bw-mono);
    font-size: 12px;
    padding: 4px 14px;
}

/* ============================================
   Tier Rows (Staleness Rule Form)
   ============================================ */

.tier-row {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    padding: 10px 12px;
    transition: border-color 0.15s;
}

.tier-row:hover {
    border-color: #3a3a55;
}

.tier-row input {
    background: var(--bs-card-bg);
    border-color: var(--bs-border-color);
    font-family: var(--bw-mono);
}

.add-tier {
    border: 1px dashed var(--bs-border-color);
    background: transparent;
    color: var(--bw-text-muted);
    width: 100%;
    padding: 10px;
    border-radius: 6px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
}

.add-tier:hover {
    border-color: var(--bw-blue);
    color: var(--bw-blue);
}

/* ============================================
   Discount Preview
   ============================================ */

.discount-preview {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    padding: 14px 16px;
}

.discount-preview .dp-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--bw-text-muted);
    font-weight: 600;
    margin-bottom: 6px;
}

/* ============================================
   Toggle Switch Override
   ============================================ */

.form-check-input:checked {
    background-color: var(--bw-green);
    border-color: var(--bw-green);
}

/* ============================================
   Specificity Dots
   ============================================ */

.spec-dots {
    display: inline-flex;
    gap: 3px;
}

.spec-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.spec-dot.filled {
    background: var(--bw-accent);
}

.spec-dot.empty {
    background: #252535;
}

/* ============================================
   Form Hint
   ============================================ */

.form-hint {
    font-size: 11px;
    color: var(--bw-text-muted);
    margin-top: 3px;
}

/* ============================================
   Sorted Column & Total Column
   ============================================ */

th.sorted {
    color: var(--bw-accent) !important;
}

.col-total {
    background: rgba(74, 144, 255, 0.04);
    font-weight: 600;
}