/* =====================================================================
   RCMS Mobile Responsiveness Overrides
   Include this AFTER assets/css/style.css.
   No markup changes required — works with the existing header/sidebar/
   footer structure and Bootstrap 5 grid already in place.
   ===================================================================== */

/* ---- Tables: let any card containing a wide table scroll horizontally
   instead of breaking the page layout. Applies site-wide without needing
   a table-responsive wrapper added to every page. ---- */
.card-stat {
    overflow-x: auto;
}

@media (max-width: 768px) {

    /* ---- Navbar: allow wrapping instead of squeezing/overflowing ---- */
    .navbar {
        flex-wrap: wrap;
        row-gap: 0.5rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
    .navbar .ms-auto {
        margin-left: 0 !important;
        width: 100%;
        justify-content: space-between;
    }

    /* ---- Layout: stack sidebar above content instead of side-by-side ---- */
    body > .d-flex {
        flex-direction: column;
    }

    /* ---- Sidebar becomes a horizontally-scrollable pill bar ---- */
    .sidebar {
        width: 100% !important;
        min-height: auto !important;
        border-right: none;
        border-bottom: 1px solid #dee2e6;
        padding: 0.5rem !important;
    }
    .sidebar .nav.nav-pills.flex-column {
        flex-direction: row !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0.25rem;
    }
    .sidebar .nav-item {
        flex: 0 0 auto;
    }
    .sidebar .nav-link {
        white-space: nowrap;
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
    }

    /* ---- Main content: tighter padding on small screens ---- */
    main {
        padding: 1rem !important;
    }

    /* ---- Cards: reduce padding, avoid text overflow ---- */
    .card-stat {
        padding: 0.85rem !important;
    }
    .stat-value {
        font-size: 1.4rem !important;
    }

    /* ---- Tables: smaller text/padding so more columns fit before scrolling ---- */
    table.table {
        font-size: 0.8rem;
    }
    table.table th,
    table.table td {
        padding: 0.4rem 0.5rem;
    }

    /* ---- Forms: stack filter/search rows cleanly (Bootstrap already stacks
       col-md-*, this just tightens the gutters) ---- */
    form.row.g-2 > [class*="col-"] {
        width: 100%;
    }

    /* ---- Login card: don't let the fixed width overflow tiny screens ---- */
    body.bg-light .card[style*="width: 380px"] {
        width: 92vw !important;
    }

    /* ---- Ticket view evidence thumbnails: slightly smaller ---- */
    .evidence-thumb {
        width: 70px;
        height: 70px;
    }
}

@media (max-width: 480px) {
    .stat-value {
        font-size: 1.2rem !important;
    }
    h3 {
        font-size: 1.3rem;
    }
}