/* ───────────────────────────────────────────────────────────────────────
   Stockman theme — modern ERP look (soft surfaces, violet accent, sidebar).
   Loaded after Bootstrap + treact.css so it overrides them.
   ─────────────────────────────────────────────────────────────────────── */

:root {
    --accent: #6d5dfc;
    --accent-strong: #5b4be0;
    --accent-soft: #f1efff;
    --accent-grad: linear-gradient(135deg, #6d5dfc 0%, #9b6dff 100%);
    --bg: #eef1f7;
    --surface: #ffffff;
    --ink: #2b2d42;
    --muted: #7a8194;
    --line: #ecedf3;
    --radius: 14px;
    --radius-sm: 9px;
    --shadow: 0 6px 24px rgba(35, 38, 80, .07);
    --shadow-sm: 0 2px 8px rgba(35, 38, 80, .06);
    --sidebar-w: 220px;
}

/* Dark mode — override the design tokens; Bootstrap components follow data-bs-theme="dark". */
[data-bs-theme="dark"] {
    color-scheme: dark;
    --bg: #0f1117;
    --surface: #1a1d26;
    --ink: #e7e9f0;
    --muted: #99a0b0;
    --line: #2b303c;
    --accent-soft: rgba(109, 93, 252, .22);
    --shadow: 0 6px 24px rgba(0, 0, 0, .5);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, .45);
}

/* Global scale (rem-based, so spacing scales too) + typography */
html { font-size: 80%; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--ink);
    margin: 0;
}

/* ── Layout: fixed left sidebar + main column with sticky topbar ────────── */
.app-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w);
    background: var(--surface); border-right: 1px solid var(--line);
    display: flex; flex-direction: column; z-index: 1040; overflow-y: auto;
}
.app-main { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }
.app-topbar {
    position: sticky; top: 0; z-index: 1030; height: 3.5rem;
    background: var(--surface); border-bottom: 1px solid var(--line);
    display: flex; align-items: center; gap: .9rem; padding: 0 1.4rem;
}
.app-topbar .page-title { font-weight: 700; font-size: 1.05rem; }
.topbar-sep { width: 1px; height: 1.5rem; background: var(--line); }
.topbar-page-actions { display: flex; align-items: center; gap: .5rem; }
.app-topbar .topbar-actions { margin-left: auto; } /* pin lang/logout to the right */
.main-container {
    flex: 1; padding: 1.5rem 1.4rem;
    /* Per-page accent wash: colour at the top fading to transparent (var set inline). */
    background: linear-gradient(180deg,
        rgba(var(--page-accent-rgb, 109, 93, 252), .16),
        rgba(var(--page-accent-rgb, 109, 93, 252), 0) 340px);
}
/* Ultrawide: stop the content (and its tables) stretching forever. Widen the side
   padding instead of capping the box, so the per-page background wash stays full
   width while the content is centred at ~1700px (≈ content width at 1920px → no jump). */
@media (min-width: 1920px) {
    .main-container {
        padding-left: max(1.4rem, calc((100% - 1700px) / 2));
        padding-right: max(1.4rem, calc((100% - 1700px) / 2));
    }
}

/* Brand */
.sidebar-brand {
    display: flex; align-items: center; gap: .55rem; text-decoration: none;
    color: var(--ink); font-weight: 700; font-size: 1.15rem; padding: 1rem 1.2rem 1.1rem;
}
.sidebar-brand img { height: 30px; max-width: 150px; object-fit: contain; }

/* Sidebar nav */
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: .25rem .6rem; }
.sidebar-bottom { margin-top: auto; padding-bottom: 1rem; }
.sidebar-nav .nav-link {
    display: flex; align-items: center; gap: .7rem; padding: .55rem .8rem;
    color: var(--muted); border-radius: 10px; font-weight: 500; text-decoration: none;
    white-space: nowrap; transition: background .15s, color .15s;
}
/* Each item carries its page accent via --item-rgb (set inline); default violet. */
.sidebar-nav .nav-link { --item-rgb: 109, 93, 252; }
.sidebar-nav .nav-link i { width: 1.2rem; text-align: center; font-size: 1rem; color: rgb(var(--item-rgb)); }
.sidebar-nav .nav-link:hover { background: rgba(var(--item-rgb), .12); color: rgb(var(--item-rgb)); }
.sidebar-nav .nav-link.active {
    background: linear-gradient(135deg, rgb(var(--item-rgb)), rgba(var(--item-rgb), .65));
    color: #fff; box-shadow: var(--shadow-sm);
}
.sidebar-nav .nav-link.active i { color: #fff; }

/* Topbar actions */
.topbar-actions { display: flex; align-items: center; gap: 1.1rem; }
.lang-switch a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: .85rem; padding: 0 .15rem; }
.lang-switch a.active { color: var(--accent); }
.topbar-logout { color: var(--muted); font-size: 1.05rem; text-decoration: none; }
.topbar-logout:hover { color: var(--accent); }
.topbar-theme { color: var(--muted); font-size: 1.05rem; text-decoration: none; }
.topbar-theme:hover { color: var(--accent); }

/* ── Components ─────────────────────────────────────────────────────────── */
.card { border: none; border-radius: var(--radius); box-shadow: var(--shadow); background: var(--surface); }
.card-header {
    background: transparent; border-bottom: 1px solid var(--line);
    padding: 1rem 1.25rem; font-weight: 600;
}
.card-header h3, .card-header h4, .card-header h5 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.card-body { padding: 1.1rem 1.25rem; }

.btn { border-radius: var(--radius-sm); font-weight: 500; }
.btn-primary {
    --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent);
    --bs-btn-hover-bg: var(--accent-strong); --bs-btn-hover-border-color: var(--accent-strong);
    --bs-btn-active-bg: var(--accent-strong); --bs-btn-active-border-color: var(--accent-strong);
    --bs-btn-disabled-bg: var(--accent); --bs-btn-disabled-border-color: var(--accent);
    /* Keep a (transparent) border so the height matches bordered buttons like .btn-secondary */
    border: var(--bs-btn-border-width, 1px) solid transparent;
    background-image: var(--accent-grad);
}
.btn-primary:hover, .btn-primary:focus { background-image: linear-gradient(135deg, #5f4ef0, #8f5cff); }
.btn-orange { --bs-btn-color: #fff; --bs-btn-bg: #fd7e14; --bs-btn-border-color: #fd7e14; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #e8690b; --bs-btn-hover-border-color: #e8690b; --bs-btn-active-bg: #e8690b; --bs-btn-active-border-color: #e8690b; }
.btn-outline-secondary { --bs-btn-color: var(--muted); --bs-btn-border-color: #d9dce6; --bs-btn-hover-bg: var(--accent-soft); --bs-btn-hover-color: var(--accent); --bs-btn-hover-border-color: var(--accent); }

/* Forms */
.form-control, .form-select { border-radius: var(--radius-sm); border-color: #e3e6ee; }
.form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 .2rem rgba(109, 93, 252, .15); }

/* Autocomplete dropdown */
.ac-wrap { position: relative; }
.ac-results {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 1050;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm); box-shadow: var(--shadow);
    max-height: 280px; overflow-y: auto;
}
.ac-results:empty { display: none; }
.ac-item { padding: .45rem .7rem; cursor: pointer; border-bottom: 1px solid var(--line); }
.ac-item:last-child { border-bottom: none; }
.ac-item:hover { background: var(--accent-soft); }
.ac-item .ac-ref { font-weight: 600; }
.ac-item .ac-desg { color: var(--muted); }
.ac-empty { padding: .5rem .7rem; color: var(--muted); font-style: italic; }

/* Lucide field icons in modal form labels */
.form-label .lucide { width: 15px; height: 15px; vertical-align: -2px; margin-right: .4rem; color: var(--muted); }

/* Product image preview (edit modal) */
.prod-img-preview { width: 128px; height: 128px; object-fit: contain; border: 1px solid var(--line); border-radius: 10px; background: #fff; }

/* Clickable product reference (hover = magnifier, click = edit modal) */
.product-ref { cursor: pointer; text-decoration: underline dotted transparent; text-underline-offset: 3px; }
.product-ref:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* Inactive (soft-deleted) products in the catalog list */
.prod-inactive > td { opacity: .55; }
.prod-inactive .col-edit, .prod-inactive .col-delete { opacity: 1; }
.prod-inactive .prod-thumb { filter: grayscale(1); }

/* Product thumbnail (list tables) */
.col-thumb { width: 1%; }
.prod-thumb { width: 38px; height: 38px; object-fit: contain; border: 1px solid var(--line); border-radius: 8px; background: #fff; vertical-align: middle; }
.prod-thumb--empty { display: inline-flex; align-items: center; justify-content: center; color: #c4c9d4; }

/* Inventory: subtle barcode hint under the reference */
.inv-barcode-hint { display: flex; align-items: center; gap: .25rem; font-size: .72rem; color: var(--muted); margin-top: .1rem; font-variant-numeric: tabular-nums; }
.inv-barcode-hint .lucide { width: 12px; height: 12px; }

/* Withdrawal builder: keep the input fields a tidy column (not full-width stretched);
   the draft table below stays full width. */
.sortie-fields { max-width: 720px; }
.sortie-qty { width: 150px; flex: none; }

/* Inventory barcode scan box */
.inv-scan {
    background: linear-gradient(135deg, rgba(99,102,241,.10), rgba(99,102,241,0));
    border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem;
}
.inv-scan .form-control { max-width: 460px; }
.inv-scan .fa-barcode { color: rgb(99,102,241); }
.inv-scan-feedback:empty { display: none; } /* no gap until a scan populates it */

/* Quantity spinner — hide the native number arrows (our ± buttons replace them) */
.qty-spin input::-webkit-outer-spin-button,
.qty-spin input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-spin input { -moz-appearance: textfield; appearance: textfield; }

/* Tables */
.table {
    font-feature-settings: "tnum"; margin-bottom: 0;
    /* No zebra striping (the table-striped class is removed) — flat rows with a
       subtle bottom border; hover + semantic warning/danger colours stay. */
    --bs-table-hover-bg: var(--accent-soft); --bs-border-color: var(--line);
}
.table > :not(caption) > * > * { padding: .6rem .8rem; }
.table thead th {
    color: var(--muted); font-weight: 600; font-size: .78rem;
    text-transform: uppercase; letter-spacing: .02em; border-bottom: 1px solid var(--line);
}

/* Pagination */
.pagination {
    --bs-pagination-color: var(--muted); --bs-pagination-bg: var(--surface);
    --bs-pagination-border-color: var(--line); --bs-pagination-hover-color: var(--accent);
    --bs-pagination-hover-bg: var(--accent-soft); --bs-pagination-hover-border-color: var(--line);
    --bs-pagination-active-bg: var(--accent); --bs-pagination-active-border-color: var(--accent);
}
.page-link { border-radius: 8px !important; margin: 0 2px; }

/* treact modal — rounded, gradient header */
.treact-modal { border-radius: var(--radius) !important; overflow: hidden; }
.treact-modal-header { background: var(--accent-grad); border-bottom: none; padding: .85rem 1.1rem; }
.treact-modal-title { color: #fff; font-weight: 700; }
.treact-modal-header .treact-modal-close { color: #fff; }
.treact-modal-header .treact-modal-close:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.treact-modal-body { padding: 1.1rem 1.2rem; }
/* Product/Stock edit tabs inside the modal */
.edit-tabs { border-bottom: 1px solid var(--line); gap: .2rem; }
.edit-tabs .nav-link { color: var(--muted); border: none; border-bottom: 2px solid transparent; border-radius: 0; padding: .45rem .9rem; font-weight: 600; }
.edit-tabs .nav-link:hover { color: var(--accent); border-bottom-color: var(--accent-soft); }
.edit-tabs .nav-link.active { color: var(--accent); background: transparent; border-bottom-color: var(--accent); }
/* Dark mode: the framework hardcodes .treact-modal{background:#fff}; theme it.
   (Bootstrap form/table contents already follow data-bs-theme on <html>.) */
[data-bs-theme="dark"] .treact-modal { background: var(--surface); color: var(--ink); }
/* The stock-lifecycle modal holds a wide 9-column ledger — give it more room. */
#lifecycleModal .treact-modal { width: 1100px; max-width: 96%; }

/* ── Home dashboard ──────────────────────────────────────────────────────── */
.home-logo-wrap { text-align: center; margin-bottom: 1.25rem; }
.home-logo { width: 220px; max-width: 70%; height: auto; background: #fff; border-radius: var(--radius); padding: .6rem 1.1rem; box-shadow: var(--shadow); }
.home-hero {
    background: var(--accent-grad); color: #fff; border-radius: var(--radius);
    padding: 1.6rem 1.8rem; box-shadow: var(--shadow); margin-bottom: 1.4rem;
    display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1rem;
}
.home-hero h2 { margin: 0; font-weight: 700; }
.home-hero .home-sub { opacity: .9; margin-top: .15rem; }
.home-hero .home-date { opacity: .85; font-weight: 600; }

.home-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; margin-bottom: 1.6rem; }
.home-stat {
    display: flex; align-items: center; gap: .9rem; text-decoration: none; color: var(--ink);
    background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.1rem;
    transition: transform .12s, box-shadow .12s;
}
.home-stat:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(35, 38, 80, .13); }
.home-stat .hs-icon {
    width: 46px; height: 46px; flex: none; border-radius: 12px; color: #fff; font-size: 1.2rem;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgb(var(--hs-rgb)), rgba(var(--hs-rgb), .6));
}
.home-stat .hs-num { font-size: 1.6rem; font-weight: 700; line-height: 1; }
.home-stat .hs-label { font-size: .8rem; color: var(--muted); }

.home-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; max-width: 920px; margin: 0 auto; }
.home-tile {
    display: flex; flex-direction: column; align-items: center; gap: .7rem; text-decoration: none; color: var(--ink);
    background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem 1rem;
    transition: transform .12s, box-shadow .12s;
}
.home-tile:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(35, 38, 80, .15); }
.home-tile .ht-icon {
    width: 62px; height: 62px; border-radius: 50%; color: #fff; font-size: 1.5rem;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgb(var(--ht-rgb)), rgba(var(--ht-rgb), .6));
}
.home-tile .ht-label { font-weight: 600; text-align: center; font-size: .9rem; }

/* Lifecycle summary stat cards — modern gradient tiles */
.lc-stat {
    height: 100%; border-radius: 12px; padding: .6rem .85rem; color: #fff;
    box-shadow: 0 4px 14px rgba(35, 38, 80, .12); text-align: left;
}
.lc-stat .lc-label { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; opacity: .9; }
.lc-stat .lc-value { font-size: 1.15rem; font-weight: 700; line-height: 1.25; margin-top: .1rem; }
.lc-stat--primary { background: linear-gradient(135deg, #6d5dfc, #9b6dff); }
.lc-stat--in      { background: linear-gradient(135deg, #16a34a, #4ade80); }
.lc-stat--out     { background: linear-gradient(135deg, #e11d48, #fb7185); }
.lc-stat--info    { background: linear-gradient(135deg, #0ea5e9, #38bdf8); }
.lc-stat--value   { background: linear-gradient(135deg, #d97706, #f59e0b); }

/* ── Responsive: collapse sidebar to icons on narrow screens (no JS) ─────── */
@media (max-width: 820px) {
    :root { --sidebar-w: 62px; }
    .sidebar-brand { justify-content: center; padding-left: 0; padding-right: 0; }
    .sidebar-brand span, .sidebar-nav .nav-link span { display: none; }
    .sidebar-nav .nav-link { justify-content: center; }
}

/* ── Functional styles (kept from the inline block) ─────────────────────── */
/* Action columns: narrow, edit far left / delete far right (misclick guard) */
.col-edit, .col-delete { width: 1%; white-space: nowrap; }
.col-delete { text-align: right; }

/* Footer "Cancel" buttons reuse .treact-modal-close for instant close, but must
   look like normal Bootstrap buttons (the header X has no .btn class). */
.treact-modal-close.btn {
    width: auto; height: auto; display: inline-block;
    font-size: var(--bs-btn-font-size); line-height: var(--bs-btn-line-height);
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
    border-radius: var(--bs-btn-border-radius);
    background-color: var(--bs-btn-bg); color: var(--bs-btn-color);
}
.treact-modal-close.btn:hover {
    background-color: var(--bs-btn-hover-bg); border-color: var(--bs-btn-hover-border-color); color: var(--bs-btn-hover-color);
}

/* Hover "magnifier" (evolved tooltip) */
#magnifier {
    position: fixed; display: none; z-index: 11000; pointer-events: none; width: 260px;
    background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(35, 38, 80, .22); padding: .7rem .8rem; font-size: .8rem;
}
.mag-img { display: block; width: 110px; height: 110px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 8px; margin: 0 auto .5rem; }
.mag-title { font-weight: 600; margin-bottom: .25rem; }
.mag-sub { margin-bottom: .4rem; }
.mag-tbl { width: 100%; }
.mag-tbl .mag-k { color: var(--muted); padding-right: .6rem; white-space: nowrap; }
.mag-tbl .mag-v { text-align: right; font-variant-numeric: tabular-nums; }

/* Coloured label pill (colour derived from the text, white-on-dark) */
.name-pill {
    display: inline-block; color: #fff; font-size: .78rem; font-weight: 500; line-height: 1.4;
    padding: .12rem .6rem; border-radius: 10px; white-space: nowrap;
}

/* treact toast container */
#toaster {
    position: fixed; bottom: 0; right: 20px; z-index: 10001;
    display: flex; flex-direction: column-reverse; max-width: 350px;
}