body {
    background-color: #f4f6f9;
}
.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.8rem;
    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;
    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 {
        padding: 1rem 1.1rem;
    }
    .stat-card .stat-value {
        font-size: 1.4rem;
    }
    .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 {
    .no-print { display: none !important; }
    body { background: #fff; }
}