body {
    background-color: #f4f6f9;
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
    overflow-x: hidden; /* prevents horizontal scroll-jank when the mobile sidebar is off-canvas */
}

/* ============================================================
   Layout: sidebar + main content
   Desktop (>=992px): sidebar sits statically on the left, always visible.
   Mobile/Tablet (<992px): sidebar becomes an off-canvas drawer that
   slides in over the content, toggled by the navbar hamburger button.
   ============================================================ */
.app-layout {
    align-items: stretch;
}

.sidebar {
    width: 240px;
    flex-shrink: 0;
    min-height: calc(100vh - 56px);
}

.sidebar .nav-link {
    white-space: nowrap;
}

.sidebar .nav-link.active {
    background-color: #0d6efd;
}

.sidebar .nav-link.disabled {
    color: #8a8f98 !important;
    opacity: 0.7;
}

.main-content {
    min-height: calc(100vh - 56px);
    min-width: 0; /* critical: lets flex children shrink instead of overflowing on narrow screens */
    width: 100%;
}

.top-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
}

.sidebar-backdrop {
    display: none;
}

@media (max-width: 991.98px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        z-index: 1045;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        overflow-y: auto;
        box-shadow: 4px 0 16px rgba(0,0,0,0.25);
    }
    .sidebar.show {
        transform: translateX(0);
    }
    .sidebar-backdrop.show {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.45);
        z-index: 1040;
    }
    .main-content {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

/* ============================================================
   Responsive tables — instead of editing every table in every
   module, any table that overflows its card horizontally becomes
   scrollable within its own card rather than breaking the page layout.
   ============================================================ */
@media (max-width: 991.98px) {
    .card-body {
        overflow-x: auto;
    }
    .card-body table {
        min-width: 640px;
    }
    /* Exception: small stat/summary cards should never force a scrollbar */
    .stat-card .card-body,
    .card-body:has(> h4:only-child),
    .card-body:has(> small) {
        overflow-x: visible;
        min-width: 0;
    }
}

/* Forms and buttons stay comfortably tappable on mobile */
@media (max-width: 575.98px) {
    .btn {
        touch-action: manipulation;
    }
    h4 {
        font-size: 1.15rem;
    }
    .card-body {
        padding: 0.9rem;
    }
}

/* Login page */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1e293b, #0f172a);
    padding: 16px;
}

.login-card {
    width: 380px;
    max-width: 100%;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

/* Dashboard stat cards */
.stat-card {
    border: none;
    border-radius: 10px;
    color: #fff;
}
.stat-card .stat-icon {
    font-size: 2rem;
    opacity: 0.85;
}