/* ============================================================
   17. MEDIA QUERIES & RESPONSIVE LAYOUT (HP & TABLET)
   ============================================================ */
@media (max-width: 992px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.show { transform: translateX(0); }
    .main-content { margin-left: 0; }
    .hamburger-btn { display: flex !important; }
    .container { padding: 15px; }
    .cbt-container { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .top-header {
        height: auto !important;
        padding: 12px 15px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    /* Top Bar Header Mobile */
    .top-header > div:first-child {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
    }

    .top-header .top-header-actions,
    .top-header > div:nth-child(2),
    .top-header div[style*="flex-wrap: wrap"] {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .top-header-title {
        font-size: 16px !important;
        margin: 0 !important;
    }

    .top-header select, 
    .top-header .filter-box-saas {
        flex: 1 1 40% !important;
        min-width: unset !important;
        font-size: 12px !important;
        padding: 8px 10px !important;
        height: 36px !important;
        margin: 0 !important;
    }

    .top-header button {
        flex: 0 0 auto !important;
        font-size: 12px !important;
        padding: 8px 12px !important;
        height: 36px !important;
        margin: 0 !important;
        box-shadow: none !important;
    }

    .panels-grid, .finance-summary-grid {
        grid-template-columns: 1fr;
    }

    .public-hero h1 { font-size: 30px; }
    .public-nav-links a:not(.btn-nav-wa) { display: none; }
    .public-nav-links { gap: 10px; }
    .promo-content { flex-direction: column; text-align: center; }
    .btn-promo-claim { width: 100%; text-align: center; }
}
@media (max-width: 480px) { .public-nav-links a.btn-nav-wa { display: none; } }