@font-face { font-family: myFirstFont; src: url(BarmenoBQ-Regular.otf); }

/* Compensates for the sticky nav bar (~51px tall) when jumping to a
   #item-N anchor (e.g. after saving a row's quantity) - without this,
   the target row would land flush at the top of the page, hidden
   underneath the nav bar rather than actually visible. */
html { scroll-padding-top: 60px; }

/* Floating "toast" for success/error messages - used on pages (like
   Inventory) that can redirect back to somewhere other than the top
   of the page, where a normal in-flow alert banner would end up out
   of view. Fixed positioning keeps it visible regardless of scroll
   position; it auto-dismisses itself after a few seconds via JS. */
.flash-toast {
    position: fixed; top: 60px; left: 50%; transform: translateX(-50%);
    z-index: 2000; min-width: 280px; max-width: 90vw; text-align: center;
    box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}

body { font-size: 14px; font-family: var(--body-font-family, sans-serif); font-weight: var(--body-font-weight, normal); }
h1, h2, h3, h4 { font-family: var(--heading-font-family, 'myFirstFont'); font-weight: var(--heading-font-weight, normal); color: var(--brand-primary); }
a { color: var(--brand-primary); }
a:hover, a:focus { color: var(--brand-secondary); }

/* The nav bar's toggle button + brand link need a properly
   controlled row so a long site name shrinks/truncates instead of
   pushing the toggle button onto its own line. Bootstrap's default
   float-based layout doesn't give us that control reliably, so this
   takes over navbar-header explicitly on mobile (where the toggle
   button is actually visible) and leaves desktop's normal layout
   alone, since there's no toggle button competing for space there.
   !important throughout this block because Bootstrap's own rules for
   these same elements live at identical specificity - without it,
   the winner comes down to stylesheet load order/version quirks
   rather than being guaranteed. */
@media (max-width: 767px) {
    .navbar-header {
        display: flex !important; align-items: center !important; float: none !important; width: 100% !important;
    }
    /* The toggle button comes BEFORE the brand link in the HTML, so
       without an explicit order, flex lays them out left-to-right in
       that DOM order - putting the hamburger menu on the left instead
       of its usual place on the right. order swaps the visual
       position without touching the markup. */
    .navbar-toggle {
        flex-shrink: 0 !important; float: none !important; order: 2 !important;
        margin: 8px 0 !important;
    }
    .navbar-brand {
        float: none !important; flex: 1 1 auto !important; min-width: 0 !important;
        margin-left: 0 !important; order: 1 !important;
    }
    /* Fixed (not JS-measured) size, plus a hard cap in viewport units -
       both guaranteed to work with zero dependency on any container
       correctly resolving its width through the float/flex layout
       above, which has proven unreliable to measure from JS. Text
       that's still too long at this size truncates with "..." rather
       than pushing the toggle button out of the row. */
    .navbar-brand-text { max-width: 50vw !important; font-size: 14px !important; }
}
.navbar-brand, .navbar-brand:hover {
    color: #fff !important; font-family: var(--heading-font-family, 'myFirstFont');
    display: flex; align-items: center; overflow: hidden;
}
.navbar-brand-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; max-width: 300px; }
.navbar-logo { height: 30px; max-width: 40px; width: auto; object-fit: contain; margin-right: 8px; border-radius: 4px; flex-shrink: 0; }
.navbar-inverse {
    background-color: var(--brand-primary); border-color: var(--brand-secondary);
    position: sticky; top: 0; z-index: 1030; margin-bottom: 0;
}
.navbar-inverse .navbar-nav > li > a { color: #f2e6f1; }
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus { color: #fff; background-color: var(--brand-secondary); }

.btn-primary, .btn-success { background-color: var(--brand-primary); border-color: var(--brand-primary); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-success:hover, .btn-success:focus, .btn-success:active { background-color: var(--brand-secondary) !important; border-color: var(--brand-secondary) !important; }
.btn-info { background-color: var(--brand-secondary); border-color: var(--brand-secondary); }

.page-header { text-align: center; border-bottom-color: var(--brand-primary); }
.container { max-width: 1140px; padding-top: 20px; }
th { text-align: center; }
.low-stock-label { background-color: #a94442; color: #fff; }

.dropdown-menu form { margin: 0; }
.dropdown-action-btn {
    display: block; width: 100%; text-align: left; padding: 3px 20px;
    border: 0; background: none; color: #333; font: inherit;
}
.dropdown-action-btn:hover { background-color: #f5f5f5; }

.actions-mobile { display: none; }
.actions-mobile-row { display: flex; gap: 6px; margin-bottom: 4px; }
.actions-mobile-row > a, .actions-mobile-row > form { flex: 1; margin: 0; }
.actions-mobile-row .btn { width: 100%; }
.quick-stock-buttons { display: flex; gap: 6px; margin-bottom: 10px; }
.quick-stock-buttons .btn { flex: 1; }

/* Dashboard check-in/out - modern gradient tiles instead of plain
   Bootstrap buttons: bigger touch target, icon-over-label, subtle
   lift on hover/focus. */
.action-tiles { margin-bottom: 15px; }
.action-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 26px 10px; border-radius: 14px; text-decoration: none; font-weight: 600;
    font-size: 15px; color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.action-tile i { font-size: 30px; margin-bottom: 8px; }
.action-tile:hover, .action-tile:focus {
    transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,0.2);
    color: #fff; text-decoration: none;
}
.action-tile:active { transform: translateY(-1px); }
.action-tile-out { background: linear-gradient(135deg, #e05c4b, #c0392b); }
.action-tile-in { background: linear-gradient(135deg, #34b768, #1e8449); }

/* Dashboard stat cards (Items in Stock / Low Stock Categories) */
.stat-cards { margin-bottom: 5px; }
.stat-card {
    background: #fff; border-radius: 14px; padding: 20px; text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin-bottom: 15px; min-height: 110px;
}
.stat-card h2 { margin-top: 0; margin-bottom: 4px; }
.stat-card h4 { margin-top: 0; color: var(--brand-primary); }
.stat-card p { margin: 0; }

/* Settings page sections */
.settings-card {
    background: #fff; border-radius: 14px; padding: 20px 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin-bottom: 20px;
}
.settings-card h4:first-child { margin-top: 0; }
.settings-card h5 { color: var(--brand-primary); }

/* Bootstrap columns stack on mobile with zero gap between them since
   the row gutter only shows up when they sit side by side - add a
   bottom margin so stacked buttons don't touch. */
.btn-row-gap > div { margin-bottom: 10px; }

/* We never need horizontal scrolling at any width with the current
   column layout - and Bootstrap's default overflow-x:auto on
   .table-responsive creates its own scroll container, which breaks
   position:sticky on thead (it would stick to that div, not the
   page, and the div is never taller than its own content so nothing
   visibly "sticks"). Turning it off restores normal page-level
   sticky behaviour. */
.table-responsive { overflow-x: visible; }

/* Sticky table headers on desktop/tablet - stick just below the
   sticky nav bar (its rendered height is ~51px) while scrolling a
   long list. Hidden entirely on mobile below, so no conflict with
   the card layout there. */
.table-mobile-cards thead th {
    position: sticky; top: 51px; background-color: #fff; z-index: 10;
}

@media (max-width: 600px) {
    body { font-size: 13px; }
    .btn-xs { padding: 1px 4px; font-size: 10px; }
    .form-inline .form-control { margin-bottom: 4px; }

    /* Stack tables into cards instead of shrinking text and
       scrolling sideways - nothing left to scroll. */
    .table-responsive { border: 0; }
    .table-mobile-cards thead { display: none; }
    .table-mobile-cards, .table-mobile-cards tbody, .table-mobile-cards tr, .table-mobile-cards td {
        display: block; width: 100%;
    }
    .table-mobile-cards.table-striped tbody tr { background-color: #fff; }
    .table-mobile-cards tr {
        margin-bottom: 10px; border: 1px solid #ddd; border-radius: 4px;
        padding: 8px; box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }
    .table-mobile-cards td {
        border: none !important; padding: 4px 0 !important; text-align: left !important;
        overflow-wrap: break-word; word-break: break-word; max-width: 100%;
    }
    .table-mobile-cards td[data-label]:before {
        content: attr(data-label); font-weight: bold; color: #888;
        display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.03em;
    }
    /* Actions: swap the desktop button row for full-width stacked
       buttons - no dropdown, so nothing can overflow off the edge
       of the screen. */
    .actions-desktop { display: none; }
    .actions-mobile { display: block; }
}