/* ============================================================
   SevaSetu - Responsive Stylesheet (responsive.css)
   Shared media queries for all pages. Preserves the exact
   responsive behaviour of the research prototype.
   ============================================================ */

/* ============ TABLET / SMALL LAPTOP (max 820px) ============ */
@media (max-width: 820px) {
    .sidebar {
        position: fixed;
        left: -280px;
        top: var(--header-h);
        z-index: 200;
        height: calc(100vh - var(--header-h));
        transition: left 0.25s;
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.1);
        width: 260px;
    }

    .sidebar.open { left: 0; }
    .topbar .hamburger { display: block; }
    .main-content { padding: 16px; }
}

/* ============ MOBILE (max 768px) ============ */
@media (max-width: 768px) {
    .sidebar-dark, .sidebar {
        width: 70px;
        padding: 16px 8px;
    }

    .sidebar-dark .sidebar-logo h4,
    .sidebar-dark .nav-link span,
    .sidebar-dark .sidebar-footer,
    .sidebar .sidebar-logo h4,
    .sidebar .nav-link span,
    .sidebar-footer {
        display: none;
    }

    .sidebar-dark .nav-link { justify-content: center; padding: 12px; }
    .content { padding: 16px; }
    .form-card { padding: 20px; }
    .detail-row { grid-template-columns: 1fr; }
    .search-box { flex-direction: column; }
    .sidebar-logo h4, .sidebar-dark .nav-link span { display: none; }
}

/* ============ SMALL MOBILE (max 480px) ============ */
@media (max-width: 480px) {
    .stats-row {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .rel-flow { flex-direction: column; gap: 4px; }
    .table-list { grid-template-columns: 1fr 1fr; }
    .role-cards { grid-template-columns: 1fr; }
}