/* ==========================================================================
   LIU Alumni Management Platform - Responsive Rules
   Mobile-first breakpoints shared by the Admin and Alumni portals.
   ========================================================================== */

/* ---------- Tablet (<= 992px) ---------- */
@media (max-width: 992px) {
    .dashboard-grid,
    .content-columns {
        grid-template-columns: 1fr;
    }

    .admin-sidebar,
    .alumni-sidebar {
        transform: translateX(-100%);
        width: var(--liu-sidebar-width);
    }

    .admin-sidebar.mobile-open,
    .alumni-sidebar.mobile-open {
        transform: translateX(0);
        box-shadow: var(--liu-shadow-lg);
    }

    .admin-sidebar.collapsed,
    .alumni-sidebar.collapsed {
        width: var(--liu-sidebar-width);
    }

    .admin-main,
    .alumni-main {
        margin-left: 0 !important;
    }
}

/* ---------- Small tablet / large phone (<= 768px) ---------- */
@media (max-width: 768px) {
    .kpi-grid,
    .alumni-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .kpi-card .kpi-label {
        white-space: normal;
    }

    .admin-content {
        padding: 12px;
    }

    .alumni-content {
        padding: 14px 12px;
    }

    .page-heading {
        flex-direction: column;
        align-items: flex-start;
    }

    .welcome-banner {
        flex-direction: column;
        align-items: flex-start;
    }

    .profile-progress-box {
        width: 100%;
    }

    .topbar-page-title span.hide-mobile {
        display: none;
    }

    .liu-table-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .dataTables_wrapper .dataTables_filter {
        text-align: left;
    }

    .dataTables_wrapper .dataTables_filter input {
        margin-left: 0;
        margin-top: 4px;
        width: 100%;
    }
}

/* ---------- Phone (<= 576px) ---------- */
@media (max-width: 576px) {
    .kpi-grid,
    .alumni-grid {
        grid-template-columns: 1fr 1fr;
    }

    .kpi-card {
        padding: 10px 12px;
    }

    .kpi-card .kpi-value {
        font-size: 16px;
    }

    .form-row {
        flex-direction: column;
        gap: 0;
    }

    .form-row > .form-group {
        flex: 1 1 auto;
    }

    .topbar-user .user-meta {
        display: none;
    }

    .card-body {
        padding: 12px;
    }

    .admin-sidebar-brand .brand-text,
    .alumni-header .brand-text {
        font-size: 11.5px;
    }
}

/* ---------- Very small phone (<= 400px) ---------- */
@media (max-width: 400px) {
    .kpi-grid,
    .alumni-grid {
        grid-template-columns: 1fr;
    }
}