html, body {
    height: 100%;
}
body {
    background-color: #f4f6f9;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
/* The main scrollable content area grows to fill available space, pushing
   the footer to the bottom of the viewport on short pages, while still
   scrolling normally on long pages. */
.page-content {
    flex: 1 0 auto;
}
footer {
    flex-shrink: 0;
}
.app-navbar {
    background: linear-gradient(90deg, #b5651d 0%, #8a4a12 100%);
}
.card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.stat-card {
    border-radius: 12px;
    color: #fff;
    padding: 1.2rem 1.5rem;
}
.stat-card .stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    word-break: break-word;
}
.bg-brick   { background: linear-gradient(135deg,#b5651d,#8a4a12); }
.bg-stock   { background: linear-gradient(135deg,#2c7a7b,#205e5e); }
.bg-sales   { background: linear-gradient(135deg,#2f6fb0,#1e4f80); }
.bg-due     { background: linear-gradient(135deg,#c0392b,#922b21); }
.bg-staff   { background: linear-gradient(135deg,#6c5ce7,#4834a3); }
.bg-low     { background: linear-gradient(135deg,#e67e22,#af5c14); }

table.table thead {
    background-color: #f1eee9;
}
.table-hover tbody tr:hover {
    background-color: #fdf6ec;
}
.login-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,#b5651d 0%, #4a2c0a 100%);
}
.login-card {
    width: 100%;
    max-width: 400px;
    border-radius: 14px;
}
.badge-low { background-color:#e67e22; }

/* ---------------------------------------------------------------
   Navbar: truncate a long brand name instead of letting it wrap
   and break the header row. (Do NOT disable flex-wrap on the
   container itself — Bootstrap relies on that wrap so the expanded
   mobile menu drops to its own line below the brand/toggler instead
   of being squeezed onto the same flex line and vertically centered
   against it.)
---------------------------------------------------------------- */
.navbar-brand {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60vw;
}

/* ---------------------------------------------------------------
   Page header rows (title + action button) wrap gracefully
---------------------------------------------------------------- */
.page-header {
    flex-wrap: wrap;
    row-gap: .5rem;
}

/* ---------------------------------------------------------------
   Buttons/badges inside tables & forms wrap instead of overflowing
---------------------------------------------------------------- */
.btn-group {
    flex-wrap: wrap;
}
.table td .btn,
.table td .badge {
    white-space: normal;
}

/* ---------------------------------------------------------------
   Cards & spacing tighten up on small screens
---------------------------------------------------------------- */
@media (max-width: 576px) {
    .container-fluid {
        padding-left: .75rem;
        padding-right: .75rem;
    }
    .card {
        padding: .9rem !important;
    }
    .stat-card {
        aspect-ratio: 1 / 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: .6rem;
        border-radius: 18px;
        overflow: hidden;
    }
    .stat-card > div:first-child {
        font-size: .72rem;
        line-height: 1.15;
        opacity: .92;
        margin-bottom: .2rem;
    }
    .stat-card .stat-value {
        font-size: 1.05rem;
        line-height: 1.15;
        word-break: break-word;
    }
    .stat-card .small {
        font-size: .62rem !important;
        margin-top: .15rem;
    }
    .navbar-brand {
        font-size: 1rem;
        max-width: 55vw;
    }
    .navbar-brand i {
        margin-right: .25rem;
    }
    h4 {
        font-size: 1.2rem;
    }
    .modal-dialog {
        margin: .5rem;
    }
    .btn {
        font-size: .9rem;
    }
}

/* ---------------------------------------------------------------
   Tables: smaller font + comfortable scroll on tablets/phones
---------------------------------------------------------------- */
@media (max-width: 768px) {
    table.table {
        font-size: .85rem;
    }
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }
}

/* Ensure every scrollable table has a little breathing room so the
   horizontal scrollbar doesn't clip the last column's shadow/border */
.table-responsive {
    margin-bottom: .5rem;
}

@media print {
    /* Hide anything marked no-print (nav, action buttons, filter forms, etc.) */
    .no-print { display: none !important; }

    html, body {
        height: auto;
    }
    body {
        background: #fff;
        display: block; /* undo the sticky-footer flex layout for print */
    }
    footer {
        display: none; /* the app footer/credit line isn't needed on a printed document */
    }
    .page-content {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Most browsers strip background colors/shadows when printing unless
       explicitly told to keep them — without this, badges, stat cards, and
       shaded table rows would print/PDF as plain white/black text. */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    .card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }

    /* Keep table header rows and each data row intact instead of splitting
       a single row across two PDF pages. */
    table {
        page-break-inside: auto;
    }
    tr {
        page-break-inside: avoid;
        page-break-after: auto;
    }
    thead {
        display: table-header-group; /* repeat the header row on every printed page */
    }
    tfoot {
        display: table-footer-group;
    }

    a[href]::after {
        content: none !important; /* don't print raw URLs after links */
    }

    @page {
        margin: 12mm;
    }
}