/* ============================================================
   VIGORBOOKS — Inventory Management Page (inventory.css)
   Extends sales.css. New classes are prefixed inv-
   Accent: Emerald Green (#10B981)
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   HERO — emerald accent override
   ──────────────────────────────────────────────────────────── */
.inv-hero .gradient-orb-1 {
    background: radial-gradient(circle, rgba(16,185,129,0.15) 0%, transparent 70%);
}

.inv-hero .gradient-orb-2 {
    background: radial-gradient(circle, rgba(6,182,212,0.1) 0%, transparent 70%);
}

/* Hero card badge — emerald */
.sm-pipeline-badge.inv-badge--emerald {
    background: rgba(16,185,129,0.12);
    color: #059669;
    border: 1px solid rgba(16,185,129,0.3);
}

/* Hero pipeline bars — emerald / amber / rose */
.sm-pipe-bar.inv-bar--emerald {
    background: linear-gradient(90deg, #10B981, #34D399);
}

.sm-pipe-bar.inv-bar--amber {
    background: linear-gradient(90deg, #F59E0B, #FBBF24);
}

.sm-pipe-bar.inv-bar--rose {
    background: linear-gradient(90deg, #F43F5E, #FB7185);
}

/* Pipe counts */
.sm-pipe-count.inv-count--amber { color: #D97706; font-weight: 700; }
.sm-pipe-count.inv-count--rose  { color: #E11D48; font-weight: 700; }

/* KPI value — emerald gradient text */
.sm-kpi-val.inv-kpi--emerald {
    background: linear-gradient(135deg, #10B981, #059669);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Float card icon wrap */
.sm-float-icon-wrap {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ────────────────────────────────────────────────────────────
   STATS STRIP — emerald top-accent
   ──────────────────────────────────────────────────────────── */
.inv-stats-accent .sm-stat-card {
    border-top: 3px solid rgba(16,185,129,0.3);
}

/* ────────────────────────────────────────────────────────────
   MODULES GRID — 4 cards, 2x2 on tablet
   ──────────────────────────────────────────────────────────── */
.inv-modules-grid {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1100px) {
    .inv-modules-grid { grid-template-columns: repeat(2, 1fr); }
}

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

/* ────────────────────────────────────────────────────────────
   MOCK TABLE — item name + SKU sub-label
   ──────────────────────────────────────────────────────────── */
.sm-mock-item-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.2;
}

.sm-mock-item-sku {
    font-size: 10.5px;
    color: var(--color-text-tertiary);
    margin-top: 1px;
}

/* Meta row inside mockup */
.sm-mock-meta-row {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 12px;
}

.sm-mock-meta-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.sm-mock-meta-lbl {
    font-size: 10px;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.sm-mock-meta-val {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-text-primary);
}

/* Status chips */
.sm-status-chip {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
    letter-spacing: 0.03em;
}

.sm-status--green  { background: rgba(16,185,129,0.1);  color: #059669; }
.sm-status--amber  { background: rgba(245,158,11,0.12); color: #D97706; }
.sm-status--rose   { background: rgba(244,63,94,0.1);   color: #E11D48; }
.sm-status--indigo { background: rgba(91,95,199,0.1);   color: #5B5FC7; }

/* Emerald issue button */
.inv-mock-btn--emerald {
    background: rgba(16,185,129,0.12);
    color: #059669;
    border: 1px solid rgba(16,185,129,0.3);
    font-size: 11.5px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 6px;
    cursor: default;
    font-family: inherit;
}

/* ────────────────────────────────────────────────────────────
   WAREHOUSE GRID (inside adjustment mockup)
   ──────────────────────────────────────────────────────────── */
.inv-wh-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
}

.inv-wh-card {
    border: 1px solid;
    border-radius: 8px;
    padding: 8px 10px;
    text-align: center;
    background: var(--color-background);
}

.inv-wh-name {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 2px;
}

.inv-wh-items {
    font-size: 10px;
    color: var(--color-text-tertiary);
    margin-bottom: 2px;
}

.inv-wh-val {
    font-size: 11.5px;
    font-weight: 700;
    font-family: 'Space Grotesk', sans-serif;
    color: var(--color-text-primary);
}

/* ────────────────────────────────────────────────────────────
   SECTION BADGES — emerald tint for inv sections
   ──────────────────────────────────────────────────────────── */
.inv-workflow-section .section-badge,
.inv-integrations-section .section-badge {
    background: rgba(16,185,129,0.1);
    color: #065F46;
    border: 1px solid rgba(16,185,129,0.25);
}

[data-theme="dark"] .inv-workflow-section .section-badge,
[data-theme="dark"] .inv-integrations-section .section-badge {
    color: #34D399;
    border-color: rgba(16,185,129,0.35);
}

/* ────────────────────────────────────────────────────────────
   ZIGZAG WORKFLOW — 4-step alternating left/right
   ──────────────────────────────────────────────────────────── */
.inv-zigzag {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 900px;
    margin: 0 auto;
}

/* Central vertical line */
.inv-zigzag::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 27px;
    bottom: 27px;
    width: 2px;
    background: linear-gradient(
        to bottom,
        rgba(16,185,129,0.4),
        rgba(91,95,199,0.35),
        rgba(245,158,11,0.35),
        rgba(244,63,94,0.3)
    );
    transform: translateX(-50%);
    border-radius: 2px;
}

.inv-zz-row {
    display: grid;
    grid-template-columns: 1fr 64px 1fr;
    gap: 32px;
    align-items: flex-start;
    padding: 0 0 56px;
}

.inv-zz-row:last-child {
    padding-bottom: 0;
}

/* Center column — icon + connecting line */
.inv-zz-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 8px;
    position: relative;
    z-index: 1;
}

.inv-zz-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    background: var(--color-surface);
    box-shadow: 0 0 0 6px var(--color-background);
}

.inv-zz-line {
    width: 2px;
    flex: 1;
    min-height: 40px;
    background: transparent; /* line handled by ::before on parent */
}

/* Content panel */
.inv-zz-content {
    padding-top: 10px;
    visibility: hidden; /* empty sides hidden */
}

.inv-zz-content--active {
    visibility: visible;
}

.inv-zz-empty {
    /* placeholder for zigzag alignment */
}

.inv-zz-step-num {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 9px;
}

.inv-zz-title {
    font-size: 20px;
    font-weight: 700;
    font-family: 'Space Grotesk', sans-serif;
    color: var(--color-text-primary);
    margin: 0 0 8px;
}

.inv-zz-desc {
    font-size: 14.5px;
    color: var(--color-text-secondary);
    line-height: 1.65;
    margin: 0 0 14px;
}

.inv-zz-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.inv-zz-chips span {
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 11px;
    border-radius: 20px;
    background: rgba(16,185,129,0.07);
    color: #065F46;
    border: 1px solid rgba(16,185,129,0.2);
}

[data-theme="dark"] .inv-zz-chips span {
    background: rgba(16,185,129,0.12);
    color: #6EE7B7;
    border-color: rgba(16,185,129,0.3);
}

[data-theme="dark"] .inv-zz-icon {
    background: var(--color-surface) !important;
}

/* Responsive zigzag — collapses to vertical on mobile */
@media (max-width: 768px) {
    .inv-zigzag::before { display: none; }

    .inv-zz-row {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 16px;
        padding-bottom: 36px;
    }

    .inv-zz-empty { display: none; }

    .inv-zz-content {
        visibility: visible;
        order: 2;
        flex: 1;
    }

    .inv-zz-center {
        order: 1;
        flex-direction: column;
        align-items: center;
        flex-shrink: 0;
    }

    .inv-zz-icon {
        width: 44px;
        height: 44px;
        box-shadow: none;
    }

    .inv-zz-title { font-size: 17px; }
}

/* ────────────────────────────────────────────────────────────
   LINE CHART (Inventory Reports section)
   ──────────────────────────────────────────────────────────── */
.inv-line-chart-wrap {
    display: flex;
    gap: 6px;
    padding: 10px 14px 0;
    height: 120px;
}

.inv-lc-labels-y {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 18px;
    flex-shrink: 0;
}

.inv-lc-labels-y span {
    font-size: 9px;
    color: var(--color-text-tertiary);
    text-align: right;
    line-height: 1;
}

.inv-lc-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.inv-line-chart-svg {
    flex: 1;
    width: 100%;
    display: block;
    overflow: visible;
}

.inv-lc-labels-x {
    display: flex;
    justify-content: space-between;
    padding-top: 4px;
}

.inv-lc-labels-x span {
    font-size: 9px;
    color: var(--color-text-tertiary);
    text-align: center;
}

/* ────────────────────────────────────────────────────────────
   SCROLL MARGIN — all inventory section IDs
   ──────────────────────────────────────────────────────────── */
#products,
#stock-in,
#stock-out,
#adjustments,
#how-it-works,
#inv-reports {
    scroll-margin-top: 130px;
}

/* ────────────────────────────────────────────────────────────
   DARK THEME OVERRIDES
   ──────────────────────────────────────────────────────────── */
[data-theme="dark"] .sm-pipeline-badge.inv-badge--emerald {
    background: rgba(16,185,129,0.15);
    border-color: rgba(16,185,129,0.35);
    color: #34D399;
}

[data-theme="dark"] .inv-wh-card {
    background: var(--color-surface);
}

[data-theme="dark"] .sm-status--green  { background: rgba(16,185,129,0.15); }
[data-theme="dark"] .sm-status--amber  { background: rgba(245,158,11,0.15); }
[data-theme="dark"] .sm-status--rose   { background: rgba(244,63,94,0.15); }

/* ────────────────────────────────────────────────────────────
   MOCKUP CLASS SHIMS — inventory-specific wrappers
   ──────────────────────────────────────────────────────────── */

/* Toolbar row: search + tag filters side by side */
.sm-mock-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.sm-mock-toolbar .sm-mock-search {
    flex: 1;
    margin-bottom: 0;
    min-width: 120px;
}

/* Table wrapper */
.sm-mock-table {
    overflow-x: auto;
    margin-bottom: 4px;
}

.sm-mock-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.sm-mock-table table th {
    background: var(--bg-section);
    color: var(--color-text-muted);
    font-weight: 600;
    font-size: 11px;
    text-align: left;
    padding: 7px 8px;
    letter-spacing: 0.3px;
}

.sm-mock-table table td {
    padding: 7px 8px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: 12px;
    vertical-align: middle;
}

.sm-mock-table table tr:last-child td {
    border-bottom: none;
}

/* Meta row: supplier, ref, warehouse etc */
.sm-mock-meta-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding: 8px 0 10px;
    border-bottom: 1px solid var(--color-border);
}

.sm-mock-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sm-mock-meta-lbl {
    font-size: 10px;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
}

.sm-mock-meta-val {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-text-primary);
}

/* Totals block */
.sm-mock-totals {
    margin-top: 8px;
}

.sm-tot-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    padding: 4px 0;
    color: var(--color-text-secondary);
    gap: 12px;
}

/* ────────────────────────────────────────────────────────────
   DARK MODE for mock table
   ──────────────────────────────────────────────────────────── */
[data-theme="dark"] .sm-mock-table table th {
    background: var(--color-surface);
}