/*
 * VSTracker Admin — Custom Bootstrap Theme
 *
 * Adopted from EPOSSERVER's eposserver.css so the two systems read as one
 * family. Same Bootstrap-5-CSS-variable approach, same IPOS brand palette,
 * same dark sidebar / blue card header treatment.
 *
 * Loaded AFTER bootstrap.min.css so these override the defaults.
 *
 * VSTracker-specific sections at the end — the run entry grid, reconciliation
 * states and stock variance grading — have no EPOSSERVER equivalent and are
 * kept together so they are easy to find.
 *
 * Bootstrap 5 CSS variables: https://getbootstrap.com/docs/5.3/customize/css-variables/
 */

:root {
    /* ========================================
     * PRIMARY COLORS — the IPOS brand palette, unchanged from EPOSSERVER.
     * These tokens drive Bootstrap's utilities (btn-*, bg-*, text-*, badge,
     * alert, progress, focus rings) so every page picks them up without
     * per-page edits.
     *
     *   --bs-primary   → Royal blue (#3B82F6)   primary action / nav
     *   --bs-success   → Clover green (#16A34A) confirm / save / balanced
     *   --bs-info      → Amethyst (#7C3AED)     management / settings
     *   --bs-warning   → Marigold (#E67E22)     warnings that do not block
     *   --bs-danger    → Crimson (#DC2626)      destructive / blocking
     *   --bs-secondary → neutral gray           low-key cancel
     * ======================================== */
    --bs-primary: #3B82F6;
    --bs-primary-rgb: 59, 130, 246;

    --bs-secondary: #6c757d;
    --bs-secondary-rgb: 108, 117, 125;

    --bs-success: #16A34A;
    --bs-success-rgb: 22, 163, 74;

    --bs-info: #7C3AED;
    --bs-info-rgb: 124, 58, 237;

    --bs-warning: #E67E22;
    --bs-warning-rgb: 230, 126, 34;

    --bs-danger: #DC2626;
    --bs-danger-rgb: 220, 38, 38;

    --bs-light: #f8f9fa;
    --bs-light-rgb: 248, 249, 250;

    --bs-dark: #212529;
    --bs-dark-rgb: 33, 37, 41;

    /* ========================================
     * BODY DEFAULTS
     * ======================================== */
    --bs-body-bg: #f8f9fa;
    --bs-body-color: #212529;
    --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;

    --bs-link-color: var(--bs-primary);
    --bs-link-hover-color: #2563EB;

    --bs-border-radius: 0.375rem;
    --bs-border-radius-sm: 0.25rem;
    --bs-border-radius-lg: 0.5rem;
    --bs-border-radius-xl: 1rem;
    --bs-border-radius-pill: 50rem;

    /* ========================================
     * VSTRACKER THEME VARIABLES
     * ======================================== */
    --vst-sidebar-bg: #212529;
    --vst-sidebar-color: #adb5bd;
    --vst-sidebar-hover-bg: #343a40;
    --vst-sidebar-hover-color: #fff;
    --vst-sidebar-active-bg: var(--bs-primary);
    --vst-sidebar-active-color: #fff;
    --vst-sidebar-heading-color: #8a9199;

    --vst-header-bg: #212529;
    --vst-header-color: #fff;

    --vst-card-cap-bg: #6BA6F9;
    --vst-card-cap-border: #3B82F6;

    --vst-footer-bg: transparent;
    --vst-footer-color: #6c757d;

    /* Ink used inside cards for labels and section headings. */
    --vst-ink: #2c3e50;
}

/* ========================================
 * BUTTONS — the IPOS palette on standard Bootstrap classes
 * ======================================== */

.btn-primary {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: #3B82F6;
    --bs-btn-border-color: #3B82F6;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #2563EB;
    --bs-btn-hover-border-color: #2563EB;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #2563EB;
    --bs-btn-active-border-color: #2563EB;
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: #3B82F6;
    --bs-btn-disabled-border-color: #3B82F6;
}

.btn-success {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: #16A34A;
    --bs-btn-border-color: #16A34A;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #15803D;
    --bs-btn-hover-border-color: #15803D;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #15803D;
    --bs-btn-active-border-color: #15803D;
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: #16A34A;
    --bs-btn-disabled-border-color: #16A34A;
}

.btn-info {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: #7C3AED;
    --bs-btn-border-color: #7C3AED;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #6D28D9;
    --bs-btn-hover-border-color: #6D28D9;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #6D28D9;
    --bs-btn-active-border-color: #6D28D9;
}

.btn-warning {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: #E67E22;
    --bs-btn-border-color: #E67E22;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #CA6F1E;
    --bs-btn-hover-border-color: #CA6F1E;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #CA6F1E;
    --bs-btn-active-border-color: #CA6F1E;
}

.btn-danger {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: #DC2626;
    --bs-btn-border-color: #DC2626;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #B91C1C;
    --bs-btn-hover-border-color: #B91C1C;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #B91C1C;
    --bs-btn-active-border-color: #B91C1C;
}

.btn-outline-primary {
    --bs-btn-color: #3B82F6;
    --bs-btn-border-color: #3B82F6;
    --bs-btn-hover-bg: #3B82F6;
    --bs-btn-hover-border-color: #3B82F6;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-active-bg: #2563EB;
    --bs-btn-active-border-color: #2563EB;
}

.btn-outline-success {
    --bs-btn-color: #16A34A;
    --bs-btn-border-color: #16A34A;
    --bs-btn-hover-bg: #16A34A;
    --bs-btn-hover-border-color: #16A34A;
    --bs-btn-hover-color: #FFFFFF;
}

.btn-outline-danger {
    --bs-btn-color: #DC2626;
    --bs-btn-border-color: #DC2626;
    --bs-btn-hover-bg: #DC2626;
    --bs-btn-hover-border-color: #DC2626;
    --bs-btn-hover-color: #FFFFFF;
}

/* Outline buttons — Bootstrap's default border disappears on a white card.
 * Keep the shape discernible at rest. */
.btn-outline-secondary,
.btn-outline-primary,
.btn-outline-danger,
.btn-outline-dark {
    border-width: 1px;
}

.btn-outline-secondary {
    border-color: #6c757d;
    color: #495057;
}

.btn-outline-secondary:hover {
    background-color: #6c757d;
    color: #fff;
}

/* ========================================
 * CARDS
 * A white card on a white body is invisible. Softened Royal Blue headers
 * (#6BA6F9) and a light shadow give every panel an edge — which matters most
 * on the run entry screen, where four panels share one page.
 * ======================================== */

.card {
    --bs-card-border-radius: var(--bs-border-radius-lg);
    --bs-card-border-color: #d8dde3;
    --bs-card-border-width: 1px;
    --bs-card-cap-bg: var(--vst-card-cap-bg);
    --bs-card-cap-color: #FFFFFF;
    --bs-card-cap-padding-y: 0.75rem;
    --bs-card-cap-padding-x: 1rem;
    --bs-card-box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.08);
    box-shadow: var(--bs-card-box-shadow);
}

.card-header {
    font-weight: 600;
    color: #FFFFFF;
    background-color: var(--vst-card-cap-bg);
    border-bottom: 1px solid var(--vst-card-cap-border);
}

.card-header .h5,
.card-header h5,
.card-header h6 {
    color: #FFFFFF;
    font-weight: 600;
    margin-bottom: 0;
}

.card-header .text-muted,
.card-header small {
    color: rgba(255, 255, 255, 0.85) !important;
}

.card-header a { color: #FFFFFF; }

.card-body h6 {
    color: var(--vst-ink);
    font-weight: 600;
    margin-bottom: 0.75rem;
}

/* ========================================
 * FORM CONTROLS
 * ======================================== */

.form-control,
.form-select {
    border-color: var(--vst-ink);
}

.form-control:focus,
.form-select:focus {
    border-color: #3B82F6;
    box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25);
}

.form-control[readonly],
.form-control:disabled,
.form-select:disabled {
    background-color: #eef1f4;
    border-color: #b9c2cc;
    color: #57606a;
}

.form-label {
    font-weight: 500;
    color: var(--vst-ink);
    margin-bottom: 0.35rem;
}

.form-check-input {
    width: 1.15em;
    height: 1.15em;
    border: 1px solid #6c757d;
}

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

.form-check-label { color: var(--vst-ink); }

/* ========================================
 * LAYOUT — sidebar, header, footer
 * ======================================== */

.sidebar {
    min-height: 100vh;
    background: var(--vst-sidebar-bg);
}

.sidebar .nav-link {
    color: var(--vst-sidebar-color);
    font-size: .9rem;
    padding: .55rem 1rem;
    border-radius: 0;
    transition: all .2s ease-in-out;
}

.sidebar .nav-link:hover {
    color: var(--vst-sidebar-hover-color);
    background: var(--vst-sidebar-hover-bg);
}

.sidebar .nav-link.active {
    color: var(--vst-sidebar-active-color);
    background: var(--vst-sidebar-active-bg);
    font-weight: 500;
}

.sidebar .nav-link i {
    width: 1.2rem;
    margin-right: .5rem;
}

/* Group headings — "Daily", "Money", "Masters", "Reports".
 * text-muted is unreadable on the dark sidebar, so this overrides it. */
.sidebar .sidebar-heading {
    color: var(--vst-sidebar-heading-color) !important;
    font-size: .7rem;
    letter-spacing: .08em;
    margin-bottom: .25rem;
    cursor: default;
    pointer-events: none;
}

.navbar-dark {
    background: var(--vst-header-bg) !important;
}

.content-wrapper { min-height: 100vh; }

footer {
    background: var(--vst-footer-bg);
    color: var(--vst-footer-color);
}

/* ========================================
 * LOGIN PAGE
 * ======================================== */

.login-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
}

/* ========================================
 * IPOS BRAND PALETTE BUTTONS
 * Available where a Bootstrap semantic does not fit.
 * ======================================== */

.btn-clover   { background-color: #16A34A; border-color: #16A34A; color: #FFFFFF; }
.btn-clover:hover, .btn-clover:focus, .btn-clover:active   { background-color: #15803D; border-color: #15803D; color: #FFFFFF; }
.btn-crimson  { background-color: #DC2626; border-color: #DC2626; color: #FFFFFF; }
.btn-crimson:hover, .btn-crimson:focus, .btn-crimson:active { background-color: #B91C1C; border-color: #B91C1C; color: #FFFFFF; }
.btn-magenta  { background-color: #DB2777; border-color: #DB2777; color: #FFFFFF; }
.btn-magenta:hover, .btn-magenta:focus, .btn-magenta:active { background-color: #BE185D; border-color: #BE185D; color: #FFFFFF; }
.btn-royal    { background-color: #3B82F6; border-color: #3B82F6; color: #FFFFFF; }
.btn-royal:hover, .btn-royal:focus, .btn-royal:active     { background-color: #2563EB; border-color: #2563EB; color: #FFFFFF; }
.btn-amethyst { background-color: #7C3AED; border-color: #7C3AED; color: #FFFFFF; }
.btn-amethyst:hover, .btn-amethyst:focus, .btn-amethyst:active { background-color: #6D28D9; border-color: #6D28D9; color: #FFFFFF; }
.btn-marigold { background-color: #E67E22; border-color: #E67E22; color: #FFFFFF; }
.btn-marigold:hover, .btn-marigold:focus, .btn-marigold:active { background-color: #CA6F1E; border-color: #CA6F1E; color: #FFFFFF; }

/* ========================================
 * TABLES
 * ======================================== */

.table > :not(caption) > * > * { padding: .5rem .6rem; }

.table thead th {
    font-weight: 600;
    color: var(--vst-ink);
    background-color: #eef2f6;
    border-bottom: 2px solid #d8dde3;
    white-space: nowrap;
}

.table-hover > tbody > tr:hover > * { background-color: #f2f7ff; }

/* Numbers align on the decimal point everywhere. */
.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ========================================
 * VSTRACKER-SPECIFIC — no EPOSSERVER equivalent
 * ======================================== */

/* --- Run entry grid ------------------------------------------------------
 * Dense, keyboard-first, keyed from paper all day. The global form-control
 * border is deliberately toned down here: sixty cells with a heavy 2c3e50
 * border reads as a wall of boxes and slows scanning. */

.entry-grid { font-size: .875rem; }

.entry-grid td,
.entry-grid th { padding: .25rem .4rem; vertical-align: middle; }

.entry-grid input,
.entry-grid select {
    text-align: right;
    padding: .15rem .35rem;
    border: 1px solid #c4ccd6;
    border-radius: var(--bs-border-radius-sm);
    font-size: .875rem;
}

.entry-grid select { text-align: left; }

.entry-grid input:focus,
.entry-grid select:focus {
    border-color: #3B82F6;
    box-shadow: 0 0 0 .2rem rgba(59, 130, 246, .2);
    outline: 0;
}

.entry-grid .qty-input { width: 5rem; }

/* Computed cells are never editable — make that obvious without a border. */
.entry-grid .computed {
    background-color: #f4f6f9;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--vst-ink);
}

/* The rate column is display-only by design. Nothing on this screen may
 * accept a price (spec D2) — the styling should say so. */
.entry-grid .rate-cell {
    background-color: #f4f6f9;
    color: #57606a;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* Striping and the focused row (FIX-08). The stripe is the same tint the
 * computed cells already use, so even rows read as one quiet band; the
 * focused row takes the primary blue at low alpha, matching the input focus
 * ring, and is how the operator finds their place after looking down at the
 * paper. Both come BEFORE the save-state rules below and at the same
 * specificity (0,2,3), so a failed row looks failed whether odd or even. */
.entry-grid tbody tr:nth-child(even) > td { background-color: #f4f6f9; }
.entry-grid tbody tr:focus-within     > td { background-color: rgba(59, 130, 246, .08); }

/* Row save state, driven by run-entry.js */
.entry-grid tr.row-dirty  > td:first-child { box-shadow: inset 3px 0 0 var(--bs-warning); }
.entry-grid tr.row-saved  > td:first-child { box-shadow: inset 3px 0 0 var(--bs-success); }
.entry-grid tr.row-error  > td:first-child { box-shadow: inset 3px 0 0 var(--bs-danger); }
.entry-grid tbody tr.row-error > td { background-color: #fdf1f1; }

/* The Load panel (FIX-09): five figure columns in the sticky side column.
 * Without an explicit input width the table lays out on the inputs' intrinsic
 * size, overflows the card and squeezes every input to a couple of digits. */
#loadPanel td,
#loadPanel th { padding: .25rem .2rem; }
#loadPanel .load-input { width: 3rem; padding: .15rem .25rem; }

.entry-grid tfoot td {
    font-weight: 600;
    background-color: #eef2f6;
    border-top: 2px solid #d8dde3;
}

/* --- Reconciliation ------------------------------------------------------ */

.recon-balanced {
    color: #16A34A;
    font-weight: 600;
}

.recon-unbalanced {
    color: #DC2626;
    font-weight: 600;
}

/* The load panel follows the operator down a long grid. */
.load-panel {
    position: sticky;
    top: 4.5rem;
}

/* Blocking reasons and warnings sit under the load panel. */
#blockingReasons ul,
#warnings ul { margin-bottom: 0; }

/* --- Status badges ------------------------------------------------------- */

.badge-draft {
    background-color: #6c757d;
    color: #fff;
}

.badge-posted {
    background-color: #16A34A;
    color: #fff;
}

/* --- Stock variance grading ----------------------------------------------
 * Graded by magnitude, not by mere non-zeroness. A variance of 1 on 180 units
 * is noise; 40 is an event. */

.variance-none  { color: #6c757d; }
.variance-minor { color: #E67E22; }
.variance-major { color: #DC2626; font-weight: 600; }

/* "Last counted" — between counts, stock on hand is calculated, not known. */
.stale-count { color: #E67E22; }

/* --- Charts --------------------------------------------------------------
 * Categorical slots 1-3 of the validated palette. Validated against the white
 * card surface: lightness band, chroma floor, CVD separation (worst adjacent
 * dE 9.2 deutan) and normal-vision floor (dE 27.6) all pass. The aqua slot is
 * below 3:1 contrast, which the data table beneath every chart discharges.
 * Do NOT substitute these by eye — re-run the validator. */

.viz-root {
    --surface-1: #ffffff;
    --series-1:  #2a78d6;   /* blue   */
    --series-2:  #eb6834;   /* orange */
    --series-3:  #1baf7a;   /* aqua   */
}

/* --- Table-cell colour classes --------------------------------------------
 * Bootstrap paints every cell with `.table > :not(caption) > * > *`
 * (specificity 0,1,1), which outranks a lone class like .recon-unbalanced
 * (0,1,0). Without these the graded colours never actually show inside a
 * table - the delta, variance and cash-variance cells stayed black. */
.table > :not(caption) > * > .recon-balanced   { color: #16A34A; }
.table > :not(caption) > * > .recon-unbalanced { color: #DC2626; }
.table > :not(caption) > * > .variance-none    { color: #6c757d; }
.table > :not(caption) > * > .variance-minor   { color: #E67E22; }
.table > :not(caption) > * > .variance-major   { color: #DC2626; }
.table > :not(caption) > * > .variance-zero    { color: #16A34A; }
.table > :not(caption) > * > .variance-noise   { color: #6c757d; }
.table > :not(caption) > * > .variance-warn    { color: #E67E22; }
.table > :not(caption) > * > .variance-bad     { color: #DC2626; }
.table > :not(caption) > * > .stale-count      { color: #E67E22; }
.table > :not(caption) > * > .cash-short       { color: #DC2626; }
.table > :not(caption) > * > .cash-over        { color: #E67E22; }

/* --- Carried over from Steps 9-12 (built after this theme was drafted) ---- */

/* Daily stock sheet (Step 9): the same graded-by-magnitude idea as the
 * report, on the palette. zero = balanced, noise = within 2 units or 2 %,
 * warn = within 10 %, bad = an event. */
.stock-grid            { font-size: .875rem; }
.stock-grid td, .stock-grid th { padding: .3rem .5rem; vertical-align: middle; }
.stock-grid .qty-input { width: 6.5rem; display: inline-block; }
.stock-grid .computed  { background-color: #f4f6f9; font-variant-numeric: tabular-nums; color: var(--vst-ink); }
.variance-zero    { color: #16A34A; }
.variance-noise   { color: #6c757d; }
.variance-warn    { color: #E67E22; font-weight: 600; }
.variance-bad     { color: #DC2626; font-weight: 700; }
.variance-nonzero { font-weight: 600; }

/* Debtors (Step 11): days since last payment, graded. Over 30 deserves
 * attention, over 60 more. */
.age-30 td   { background-color: #fdf3e6; }
.age-60 td   { background-color: #fbe9e7; }
.ledger-grid { font-size: .9rem; }

/* Reports (Step 12) */
.report-grid   { font-size: .85rem; }
.chart-surface { background-color: #ffffff; }
.cash-short    { color: #DC2626; font-weight: 600; }
.cash-over     { color: #E67E22; font-weight: 600; }

/* ========================================
 * PRINT — statements, reports
 * ======================================== */

@media print {
    nav, header, .sidebar, #sidebarMenu,
    .btn, .no-print, .navbar, .collapse {
        display: none !important;
    }

    main.content-wrapper,
    .col-md-9, .col-lg-10 {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    body { background: #fff !important; color: #000 !important; font-size: 11pt; }

    .card {
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        page-break-inside: avoid;
    }

    /* Blue-on-white headers cost ink and print poorly. */
    .card-header {
        background: #fff !important;
        color: #000 !important;
        border-bottom: 1px solid #999 !important;
    }

    .table { font-size: 10pt; }
    .table thead th { background: #fff !important; }
    tr { page-break-inside: avoid; }
    canvas { max-height: 320px !important; }
}