/* Mobile overrides for jigowatt (auth/admin) pages. */

@media (max-width: 767.98px) {
    .container, .container-fluid { padding-left: .75rem; padding-right: .75rem; }

    /* Admin tables: let them scroll instead of overflowing the viewport */
    .wrap > table,
    .content > table,
    table.table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Forms: full-width inputs on phones */
    form .form-control { font-size: 16px; } /* prevents iOS zoom-on-focus */

    /* Stack filter columns */
    .row > [class*="col-md-"] { margin-bottom: .5rem; }

    /* Buttons: bigger tap target */
    .btn, .btn-sm { min-height: 38px; }

    /* Dashboard stat cards reflow 2-up instead of 4-up on phones */
    .row.row-cols-md-4 > [class*="col-"],
    .row > .col-md-3 { width: 50%; flex: 0 0 50%; max-width: 50%; }

    /* Admin v-pills tabs stack as a dropdown-ish horizontal scroll */
    .nav-pills.flex-column { flex-direction: row !important; overflow-x: auto; flex-wrap: nowrap; }
    .nav-pills.flex-column .nav-link { white-space: nowrap; }

    /* Login card fills phone width */
    .login-wrapper, .login-card { max-width: 100% !important; margin: 1rem; }

    /* Float-right buttons (search, add user) stack cleanly */
    .float-end { float: none !important; width: 100%; margin-top: .5rem; }

    /* Home.php quick-action tiles reflow 1-up on narrow phones */
    @media (max-width: 480px) {
        .row > .col-md-4 { width: 100%; flex: 0 0 100%; max-width: 100%; }
    }
}


/* Vertical nav-pills — shared sidebar style */
:root { --brand-primary: #1a56db; --brand-gradient: linear-gradient(135deg, #1e3a8a 0%, #1a56db 100%); --side-border: #e2e8f0; --side-shadow: 0 1px 3px rgba(0,0,0,.08); --side-radius: .5rem; }
[role="tablist"][aria-orientation="vertical"] {
    min-width: 220px;
    background: #fff;
    border: 1px solid var(--side-border);
    border-radius: var(--side-radius);
    box-shadow: var(--side-shadow);
    padding: .5rem;
}
[role="tablist"][aria-orientation="vertical"] .nav-link,
[role="tablist"][aria-orientation="vertical"] .dropdown-toggle {
    color: #334155;
    text-align: left;
    padding: .55rem .85rem;
    border-radius: .4rem;
    font-size: .9rem;
    font-weight: 500;
    margin-bottom: .15rem;
    border: none;
    background: transparent;
    width: 100%;
    display: flex;
    align-items: center;
}
[role="tablist"][aria-orientation="vertical"] .nav-link:hover,
[role="tablist"][aria-orientation="vertical"] .dropdown-toggle:hover {
    background: #f1f5f9;
    color: var(--brand-primary);
}
[role="tablist"][aria-orientation="vertical"] .nav-link.active {
    background: var(--brand-gradient);
    color: #fff;
}