/* ============================================================
   KORA Inventory Management System
   style.css -- Custom CSS, no framework, no CDN
   Phase 2 update: added .nav-section-label sidebar divider
   ============================================================ */

/* ---- Reset & base ----------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: #f4f6f8;
    color: #1a1a2e;
    line-height: 1.5;
}
a { color: #2d6a4f; text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-weight: 600; }

/* ---- Site header ------------------------------------------ */
.site-header {
    background: #1a1a2e;
    color: #fff;
    padding: 0 1.5rem;
    height: 52px;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.header-inner {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.site-logo { font-size: 1.1rem; font-weight: 700; color: #c8a45d; letter-spacing: .04em; }
.site-user { font-size: .85rem; color: #aaa; }
.site-user a { color: #c8a45d; }

/* ---- Layout ----------------------------------------------- */
.layout { display: flex; min-height: calc(100vh - 52px - 36px); }

/* ---- Sidebar ---------------------------------------------- */
.sidebar {
    width: 190px;
    min-width: 190px;
    background: #22304a;
    padding: 1.25rem 0;
}
.sidebar ul { list-style: none; }
.sidebar li a {
    display: block;
    padding: .55rem 1.25rem;
    color: #b8c6d8;
    font-size: .88rem;
    transition: background .15s;
}
.sidebar li a:hover { background: #1a2540; color: #fff; text-decoration: none; }
.sidebar li.active a { background: #2d6a4f; color: #fff; font-weight: 600; }
/* Section label in sidebar (not a link) */
.sidebar li.nav-section-label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #4a6080;
    padding: .9rem 1.25rem .3rem;
    pointer-events: none;
}

/* ---- Main content ----------------------------------------- */
.content { flex: 1; padding: 1.75rem 2rem; min-width: 0; }
.page-title { font-size: 1.4rem; color: #1a1a2e; margin-bottom: 1.25rem; }

/* ---- Cards ------------------------------------------------ */
.card {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

/* ---- Flash messages --------------------------------------- */
.flash {
    padding: .75rem 1rem;
    border-radius: 5px;
    margin-bottom: 1.25rem;
    font-size: .9rem;
}
.flash-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.flash-error   { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.flash-info    { background: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }

/* ---- Forms ------------------------------------------------ */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem 1.5rem;
}
.form-group { display: flex; flex-direction: column; gap: .3rem; }
.form-group label { font-size: .85rem; font-weight: 600; color: #444; }
.form-group input,
.form-group select,
.form-group textarea {
    padding: .45rem .7rem;
    border: 1px solid #ccd0d9;
    border-radius: 4px;
    font-size: .9rem;
    background: #fff;
    width: 100%;
    transition: border-color .15s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #2d6a4f;
    box-shadow: 0 0 0 2px rgba(45,106,79,.15);
}
.form-group input[readonly],
.form-group input[disabled] {
    background: #f0f2f5;
    color: #888;
    cursor: not-allowed;
}
.form-group textarea { min-height: 80px; resize: vertical; }
.form-note { font-size: .8rem; color: #888; margin-top: .1rem; }
.required::after { content: ' *'; color: #c0392b; }
.form-actions {
    margin-top: 1.25rem;
    display: flex;
    gap: .75rem;
    align-items: center;
    flex-wrap: wrap;
}

/* ---- Buttons ---------------------------------------------- */
.btn {
    display: inline-block;
    padding: .45rem 1.1rem;
    border: none;
    border-radius: 4px;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: opacity .15s;
    text-decoration: none;
    line-height: 1.4;
}
.btn:hover { opacity: .85; text-decoration: none; }
.btn-primary   { background: #2d6a4f; color: #fff; }
.btn-secondary { background: #5a6a7a; color: #fff; }
.btn-danger    { background: #c0392b; color: #fff; }
.btn-sm        { padding: .28rem .7rem; font-size: .82rem; }
.btn-link      { background: none; color: #2d6a4f; font-weight: 400; padding: 0; }

/* ---- "Buscar en Hacienda" gold outline button (visual-only) -------- */
/*
  Used by the "Buscar en Hacienda" button in customers_form.php's fiscal
  profile section (btn-buscar-hacienda). Transparent/white background,
  KÖRA gold border and text -- reuses the same gold hex already used
  elsewhere in this stylesheet (.site-logo, .site-user a: #c8a45d), since
  this file has no CSS custom property for it yet. Compound selector
  (.btn.btn-outline-gold) so this reliably beats .btn-secondary's
  background/color rule regardless of source order -- needed because the
  earlier single-class version of this rule was still losing to
  .btn-secondary in practice. No logic/ids/behavior changed.
*/
.btn.btn-outline-gold {
    background: #fff;
    border: 2px solid #c8a45d;
    color: #c8a45d;
}

/* ---- Data tables ------------------------------------------ */
.table-wrapper { overflow-x: auto; }
table.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}
table.data-table th,
table.data-table td {
    padding: .55rem .85rem;
    text-align: left;
    border-bottom: 1px solid #e8ecf0;
    white-space: nowrap;
}
table.data-table th {
    background: #f0f4f8;
    font-weight: 700;
    color: #333;
}
table.data-table tr:hover td { background: #f8fafc; }
table.data-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data-table th.num { text-align: right; }
table.data-table td.text-center,
table.data-table th.text-center { text-align: center; }

/* ---- Badges ----------------------------------------------- */
.badge {
    display: inline-block;
    padding: .18rem .55rem;
    border-radius: 20px;
    font-size: .77rem;
    font-weight: 700;
}
.badge-active        { background: #d4edda; color: #155724; }
.badge-inactive      { background: #e9ecef; color: #6c757d; }
.badge-transfer-in   { background: #cce5ff; color: #004085; }
.badge-transfer-out  { background: #e2d9f3; color: #4a235a; }

/* ---- Search autocomplete ---------------------------------- */
.search-autocomplete {
    position: relative;
    display: inline-block;
}
.search-autocomplete-input {
    width: 220px;
}
.search-autocomplete-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 100%;
    max-width: 340px;
    max-height: 260px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #ccd0d9;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
    z-index: 200;
}
.search-autocomplete-menu.open { display: block; }
.search-autocomplete-option {
    display: block;
    width: 100%;
    padding: .48rem .85rem;
    background: none;
    border: none;
    border-bottom: 1px solid #f0f2f5;
    font-size: .86rem;
    color: #1a1a2e;
    text-align: left;
    cursor: pointer;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-autocomplete-option:last-child { border-bottom: none; }
.search-autocomplete-option:hover,
.search-autocomplete-option:focus {
    background: #f0f8f4;
    color: #2d6a4f;
    outline: none;
}
.search-autocomplete-empty {
    padding: .48rem .85rem;
    font-size: .84rem;
    color: #888;
    font-style: italic;
}
@media (max-width: 700px) {
    .search-autocomplete-input { width: 100%; }
    .search-autocomplete { width: 100%; }
    .search-autocomplete-option { padding: .65rem .85rem; min-height: 44px; }
}

/* ---- Stock alert section (dashboard) ---------------------- */
.stock-alert-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: .75rem;
    margin-bottom: 1.5rem;
}
.stock-alert-card {
    border-radius: 6px;
    padding: .85rem 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.07);
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.stock-alert-card-out {
    background: #fde8e8;
    border-left: 4px solid #c0392b;
}
.stock-alert-card-low {
    background: #fff3cd;
    border-left: 4px solid #e67e22;
}
.stock-alert-title {
    font-size: .92rem;
    font-weight: 700;
    color: #1a1a2e;
}
.stock-alert-meta {
    font-size: .8rem;
    color: #555;
}
.stock-alert-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .2rem;
}

/* ---- Stock traffic-light row highlight -------------------- */
.product-row-out td { background: #fde8e8 !important; border-left: 3px solid #c0392b; }
.product-row-low td { background: #fff3cd !important; border-left: 3px solid #e67e22; }
.product-row-ok  td { background: #eaf7ef !important; border-left: 3px solid #2d6a4f; }

/* ---- Stock status badges ---------------------------------- */
.stock-badge {
    display: inline-block;
    padding: .1rem .4rem;
    border-radius: 10px;
    font-size: .72rem;
    font-weight: 700;
    vertical-align: middle;
    margin-left: .25rem;
    white-space: nowrap;
}
.stock-badge-out { background: #f5c6cb; color: #721c24; }
.stock-badge-low { background: #ffeaa7; color: #7d5a00; }
.stock-badge-ok  { background: #d1f2dc; color: #1b5e20; }

/* ---- Toolbar ---------------------------------------------- */
.toolbar {
    display: flex;
    gap: .75rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.toolbar input[type="search"],
.toolbar select {
    padding: .4rem .7rem;
    border: 1px solid #ccd0d9;
    border-radius: 4px;
    font-size: .88rem;
    background: #fff;
}
.toolbar input[type="search"] { width: 220px; }

/* ---- Pagination ------------------------------------------- */
.pagination { margin-top: 1rem; font-size: .88rem; }
.pagination a,
.pagination span {
    display: inline-block;
    padding: .28rem .62rem;
    margin: 0 .1rem;
    border: 1px solid #ccd0d9;
    border-radius: 4px;
}
.pagination a:hover { background: #f0f4f8; text-decoration: none; }
.pagination span.current { background: #2d6a4f; color: #fff; border-color: #2d6a4f; }

/* ---- Dashboard KPI cards ---------------------------------- */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.kpi-card {
    background: #fff;
    border-radius: 6px;
    padding: 1.1rem 1.25rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    border-left: 4px solid #2d6a4f;
}
.kpi-card.warn { border-left-color: #e67e22; }
.kpi-label { font-size: .78rem; color: #888; text-transform: uppercase; letter-spacing: .04em; }
.kpi-value { font-size: 1.5rem; font-weight: 700; color: #1a1a2e; margin-top: .2rem; }
.kpi-value-sm { font-size: 1.1rem; }
.kpi-sub { font-size: .78rem; color: #888; margin-top: .3rem; }
.kpi-sub a { color: #2d6a4f; }
/* Section labels between KPI groups */
.kpi-section-label {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #888;
    margin: 1rem 0 .4rem;
}
.kpi-section-label:first-child { margin-top: 0; }

/* ---- Report card grid ------------------------------------- */
.report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: .65rem;
    margin-bottom: 1.25rem;
}
.report-card {
    display: block;
    background: #fff;
    border: 2px solid #e0e6ed;
    border-radius: 6px;
    padding: .75rem 1rem;
    text-decoration: none;
    color: #1a1a2e;
    transition: border-color .15s, box-shadow .15s;
    cursor: pointer;
}
.report-card:hover {
    border-color: #2d6a4f;
    box-shadow: 0 2px 8px rgba(45,106,79,.12);
    text-decoration: none;
    color: #1a1a2e;
}
.report-card.active {
    border-color: #2d6a4f;
    background: #f0f8f4;
    box-shadow: 0 2px 8px rgba(45,106,79,.15);
}
.report-card-title {
    font-size: .88rem;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.3;
}
.report-card.active .report-card-title { color: #2d6a4f; }
.report-card-subtitle {
    font-size: .75rem;
    color: #888;
    margin-top: .2rem;
    line-height: 1.3;
}

/* ---- Quantity shortcut buttons ---------------------------- */
.qty-shortcuts {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 3px;
    margin-top: .4rem;
    width: 100%;
}
.qty-btn {
    padding: .22rem 0;
    font-size: .78rem;
    font-weight: 600;
    background: #f0f2f5;
    border: 1px solid #ccd0d9;
    border-radius: 3px;
    cursor: pointer;
    color: #333;
    line-height: 1.4;
    text-align: center;
    transition: background .1s, border-color .1s, color .1s;
    min-width: 0;
}
.qty-btn:hover {
    background: #e2e8f0;
    border-color: #2d6a4f;
    color: #2d6a4f;
}
.qty-btn.active {
    background: #2d6a4f;
    border-color: #2d6a4f;
    color: #fff;
}
@media (max-width: 500px) {
    .qty-shortcuts {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* ---- Report filter form ----------------------------------- */
.report-filter-card { padding: 1rem 1.5rem; margin-bottom: 1.25rem; }
.report-filter-group {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.report-filter-group label {
    font-size: .8rem;
    font-weight: 600;
    color: #555;
}
.report-filter-group select,
.report-filter-group input[type="date"] {
    padding: .38rem .65rem;
    border: 1px solid #ccd0d9;
    border-radius: 4px;
    font-size: .88rem;
    background: #fff;
    min-width: 160px;
}

/* ---- Login page ------------------------------------------- */
.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a2e;
}
.login-box {
    background: #fff;
    border-radius: 8px;
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 4px 24px rgba(0,0,0,.3);
}
.login-box h1 { color: #2d6a4f; font-size: 1.5rem; margin-bottom: .25rem; }
.login-box .subtitle { color: #888; font-size: .85rem; margin-bottom: 1.5rem; }
.login-box .form-group { margin-bottom: 1rem; }
.login-box .btn { width: 100%; padding: .65rem; font-size: 1rem; margin-top: .75rem; }

/* ---- Site footer ------------------------------------------ */
.site-footer {
    background: #1a1a2e;
    color: #555;
    font-size: .78rem;
    text-align: center;
    padding: .6rem;
    height: 36px;
}

/* ---- Responsive ------------------------------------------- */

/* === MOBILE HEADER HAMBURGER BUTTON === */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: .35rem .5rem;
    color: #c8a45d;
    font-size: 1.4rem;
    line-height: 1;
    flex-shrink: 0;
    border-radius: 4px;
    transition: background .15s;
}
.mobile-menu-btn:hover { background: rgba(255,255,255,.08); }

/* Sidebar overlay backdrop */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 149;
}
.sidebar-overlay.open { display: block; }

/* === TABLE-TO-CARDS on mobile === */
/* Opt-in: add class .table-cards to a .table-wrapper to get card behaviour */

/* === STICKY BOTTOM ACTION BAR === */
.sticky-action-bar {
    display: none; /* hidden on desktop */
}

@media (max-width: 767px) {

    /* ---- Off-canvas sidebar -------------------------------- */
    .mobile-menu-btn { display: flex; align-items: center; }

    .site-header {
        padding: 0 1rem;
    }
    .site-user {
        font-size: .78rem;
    }

    .layout { flex-direction: column; }

    .sidebar {
        position: fixed;
        top: 52px;
        left: 0;
        width: min(260px, 82vw);
        height: calc(100vh - 52px);
        min-width: unset;
        z-index: 150;
        overflow-y: auto;
        transform: translateX(-105%);
        transition: transform .22s cubic-bezier(.4,0,.2,1);
        box-shadow: 3px 0 16px rgba(0,0,0,.35);
    }
    .sidebar.open {
        transform: translateX(0);
    }
    .sidebar ul { display: block; }
    .sidebar li a { padding: .7rem 1.25rem; font-size: .92rem; }
    .sidebar li.nav-section-label {
        display: block;
        padding-top: 1rem;
    }

    /* ---- Main content -------------------------------------- */
    .content {
        padding: .85rem .9rem;
        /* no margin-left needed — sidebar is fixed overlay */
    }
    .page-title { font-size: 1.2rem; margin-bottom: 1rem; }

    /* ---- Cards --------------------------------------------- */
    .card { padding: 1rem; }

    /* ---- Forms --------------------------------------------- */
    .form-grid { grid-template-columns: 1fr; }
    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: .6rem .75rem;
        font-size: 1rem;         /* prevents iOS auto-zoom (<16px triggers zoom) */
        min-height: 44px;
    }
    .form-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .form-actions .btn {
        width: 100%;
        text-align: center;
        padding: .65rem 1rem;
        font-size: .95rem;
        min-height: 44px;
    }

    /* ---- Toolbar ------------------------------------------- */
    .toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: .5rem;
    }
    .toolbar input[type="search"],
    .toolbar select,
    .toolbar .btn {
        width: 100%;
        font-size: 1rem;
        min-height: 44px;
    }
    .toolbar input[type="search"] { width: 100%; }

    /* ---- Buttons ------------------------------------------- */
    .btn {
        min-height: 40px;
        font-size: .92rem;
    }
    .btn-sm {
        min-height: 34px;
        font-size: .82rem;
        padding: .3rem .75rem;
    }

    /* ---- Tables: horizontal scroll (default) --------------- */
    .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table.data-table th,
    table.data-table td {
        white-space: normal;  /* allow wrapping on mobile */
        padding: .45rem .6rem;
        font-size: .83rem;
    }

    /* ---- Card-style tables (opt-in via .table-cards) ------- */
    /* Usage: wrap table.data-table with <div class="table-wrapper table-cards"> */
    .table-cards table.data-table,
    .table-cards thead { display: none; }
    .table-cards > table,
    .table-cards table.data-table { display: block; }
    .table-cards tbody,
    .table-cards tr,
    .table-cards td { display: block; }
    .table-cards tr {
        border: 1px solid #e0e6ed;
        border-radius: 7px;
        margin-bottom: .65rem;
        padding: .6rem .75rem;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0,0,0,.06);
        position: relative;
    }
    .table-cards td {
        border: none;
        padding: .22rem 0;
        font-size: .88rem;
        display: flex;
        gap: .4rem;
        align-items: baseline;
        line-height: 1.4;
    }
    .table-cards td::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: .75rem;
        color: #888;
        text-transform: uppercase;
        letter-spacing: .04em;
        white-space: nowrap;
        min-width: 80px;
        flex-shrink: 0;
    }
    /* Suppress label on cells that shouldn't have one */
    .table-cards td.no-label::before { display: none; }
    .table-cards td.no-label { padding: .45rem 0 .2rem; }
    /* Row color classes preserved */
    .table-cards .product-row-out { background: #fde8e8 !important; border-left: 3px solid #c0392b; }
    .table-cards .product-row-low { background: #fff3cd !important; border-left: 3px solid #e67e22; }
    .table-cards .product-row-ok  { background: #eaf7ef !important; border-left: 3px solid #2d6a4f; }
    /* tfoot in card mode */
    .table-cards tfoot { display: block; border-top: 2px solid #e0e6ed; margin-top: .5rem; padding-top: .5rem; }
    .table-cards tfoot tr { box-shadow: none; border: none; margin-bottom: .2rem; padding: .1rem 0; }
    .table-cards tfoot td {
        display: flex;
        justify-content: space-between;
        font-size: .9rem;
        padding: .18rem 0;
    }
    .table-cards tfoot td::before { display: none; }

    /* ---- KPI / report grids -------------------------------- */
    .kpi-grid { grid-template-columns: 1fr 1fr; gap: .6rem; }
    .kpi-card { padding: .75rem .9rem; }
    .kpi-value { font-size: 1.25rem; }
    .stock-alert-grid { grid-template-columns: 1fr; }
    .report-grid { grid-template-columns: 1fr 1fr; gap: .5rem; }

    /* ---- Pagination ---------------------------------------- */
    .pagination { font-size: .82rem; }
    .pagination a,
    .pagination span { padding: .35rem .55rem; margin: 0 .05rem; }

    /* ---- Sticky bottom action bar (opt-in) ----------------- */
    /* Activate by adding class .has-sticky-bar to <main> or nearest wrapper  */
    /* Then put primary action(s) in <div class="sticky-action-bar">          */
    .sticky-action-bar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        border-top: 1px solid #dde2e8;
        padding: .65rem .9rem calc(.65rem + env(safe-area-inset-bottom));
        gap: .6rem;
        z-index: 120;
        box-shadow: 0 -2px 12px rgba(0,0,0,.1);
    }
    .sticky-action-bar .btn {
        flex: 1;
        text-align: center;
        min-height: 46px;
        font-size: .95rem;
    }
    /* Add bottom padding to content when sticky bar is present */
    .has-sticky-bar {
        padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
    }

    /* ---- Alegra invoice page specific ---------------------- */
    /* Collapsible payload JSON section */
    .alegra-payload-toggle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
    }
    .alegra-payload-toggle .toggle-icon {
        font-size: 1rem;
        transition: transform .2s;
    }
    .alegra-payload-collapsed .toggle-icon {
        transform: rotate(-90deg);
    }
    .alegra-payload-body {
        transition: max-height .25s ease, opacity .2s ease;
    }
    .alegra-payload-collapsed .alegra-payload-body {
        /* JS handles display:none toggling for collapsed state */
    }

    /* Summary tables: make label/value readable without horizontal scroll */
    .order-summary-table td:first-child,
    .order-summary-table th:first-child {
        font-size: .78rem;
        color: #888;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .03em;
        width: 38%;
    }

    /* Pre-block (JSON payload) */
    pre {
        font-size: .73rem !important;
        padding: .85rem !important;
    }
}

@media (max-width: 400px) {
    .kpi-grid { grid-template-columns: 1fr; }
    .report-grid { grid-template-columns: 1fr; }
    .site-user { display: none; } /* hide user info on very small screens */
}

/* ---- Print ------------------------------------------------ */
/*
   NOTE: To get clean printed output, disable browser header/footer
   in the print dialog: Chrome > More settings > uncheck Headers and footers.
   The @page rule below sets margins; browser-injected text cannot be removed by CSS.
*/
@media print {
    @page { margin: 0.5in; }
    /* Hide navigation, controls, and interactive elements */
    .sidebar,
    .site-header,
    .site-footer,
    .toolbar,
    .pagination,
    .form-actions,
    .flash,
    .print-hide,
    .btn-danger,
    .btn-primary,
    .btn-secondary,
    .btn-outline-gold,
    .btn-link,
    .report-grid,
    .report-filter-card,
    nav {
        display: none !important;
    }

    /* Full-width layout without sidebar */
    body {
        background: #fff;
        color: #000;
        font-size: 11pt;
        font-family: Georgia, 'Times New Roman', serif;
    }
    .layout {
        display: block;
    }
    .content {
        padding: 0;
        margin: 0;
    }
    .page-title {
        font-size: 14pt;
        font-weight: bold;
        margin-bottom: .5rem;
        border-bottom: 2pt solid #000;
        padding-bottom: .3rem;
    }

    /* Cards: remove shadow, keep border */
    .card {
        box-shadow: none;
        border: 1pt solid #ccc;
        margin-bottom: .75rem;
        padding: .6rem .8rem;
        break-inside: avoid;
    }

    /* Tables */
    table.data-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 9pt;
    }
    table.data-table th,
    table.data-table td {
        border: 0.5pt solid #999;
        padding: .25rem .4rem;
        text-align: left;
        white-space: normal;
    }
    table.data-table th {
        background: #e8e8e8 !important;
        font-weight: bold;
    }
    table.data-table tr:hover td {
        background: none;
    }
    table.data-table td.num,
    table.data-table th.num {
        text-align: right;
    }

    /* Stock row colors: keep in print */
    .product-row-out td {
        background: #fde8e8 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .product-row-low td {
        background: #fff3cd !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .product-row-ok td {
        background: #eaf7ef !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Badges: show text, minimal styling */
    .badge {
        border: 0.5pt solid #999;
        padding: .1rem .3rem;
        border-radius: 3pt;
        font-size: 8pt;
    }
    .badge-active   { background: #d4edda !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .badge-inactive { background: #e9ecef !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

    /* KPI grid: smaller, 3-column for print */
    .kpi-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: .4rem;
    }
    .kpi-card {
        box-shadow: none;
        border: 0.5pt solid #ccc;
        padding: .4rem .6rem;
    }
    .kpi-value { font-size: 12pt; }
    .kpi-value-sm { font-size: 10pt; }
    .kpi-section-label {
        font-size: 8pt;
        margin: .5rem 0 .2rem;
    }

    /* Table wrapper: no overflow clip */
    .table-wrapper {
        overflow: visible;
    }

    /* Avoid page breaks inside order header cards */
    .card, tr {
        break-inside: avoid;
    }

    /* Print header: show app name */
    .print-header {
        display: block !important;
        font-size: 10pt;
        color: #555;
        margin-bottom: .5rem;
    }

    /* Print branding block */
    .print-brand {
        display: block !important;
        border-bottom: 2pt solid #000;
        padding-bottom: .4rem;
        margin-bottom: .75rem;
    }
    .print-brand-name {
        font-size: 18pt;
        font-weight: bold;
        letter-spacing: .04em;
        color: #000;
    }
    .print-brand-doc {
        font-size: 12pt;
        color: #333;
        margin-top: .1rem;
    }
    .print-brand-sub {
        font-size: 8pt;
        color: #888;
        margin-top: .1rem;
    }

    /* Compact order summary table in print */
    .print-summary-wrap {
        max-width: 380pt;
    }
    .print-summary-wrap table.data-table th { white-space: nowrap; }
}