/* =========================================================
   META DASHBOARD — RESPONSIVE STYLES
   Tablet + Mobile + Small Mobile overrides.
   Desktop base styles live in style.css.
========================================================= */


/* =========================================================
   TABLET (max-width: 1100px)
   Affects: overview.html grid, summary cards everywhere
========================================================= */

@media (max-width: 1100px) {

    .overview-grid {
        grid-template-columns: 1fr;
    }

    .summary-grid,
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .info-card {
        min-height: auto;
    }

    /* SETTINGS.HTML */
    .settings-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   MOBILE (max-width: 760px)
========================================================= */

@media (max-width: 760px) {

    /* BASE.HTML — SIDEBAR (icons only, labels hidden) */
    .sidebar {
        width: 60px;
    }

    .sidebar-label {
        display: none;
    }

    .sidebar-item {
        justify-content: center;
        width: 44px;
        margin: 3px auto;
    }

    .main-content {
        width: calc(100% - 60px);
        margin-left: 60px;
    }

    .page-content {
        padding: 18px 14px 30px;
    }

    /* BASE.HTML — TOPBAR */
    .topbar {
        padding: 0 14px;
    }

    .topbar-title {
        font-size: 14px;
    }

    .account-selector {
        min-width: 130px;
    }

    /* BASE.HTML — TOP TABS */
    .tabs-bar-wrapper {
        padding: 0 14px;
    }

    /* OVERVIEW.HTML + DIAGNOSTICS.HTML */
    .summary-grid,
    .stats-grid,
    .diagnostic-summary {
        grid-template-columns: 1fr;
    }

    .dataset-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .dataset-header-left,
    .dataset-title-area {
        width: 100%;
    }

    .dataset-header-actions,
    .header-actions {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }

    .dataset-header-actions .meta-button,
    .dataset-header-actions .primary-button,
    .dataset-header-actions .secondary-button,
    .header-actions .meta-button,
    .header-actions .primary-button,
    .header-actions .secondary-button {
        flex: 1;
    }

    .meta-card-header,
    .card-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .meta-chart {
        min-height: 325px;
        padding: 15px 12px 12px;
    }

    .chart-y-axis {
        width: 38px;
        flex-basis: 38px;
        padding-right: 5px;
    }

    .chart-y-axis span,
    .mini-chart-y-axis span {
        font-size: 8px;
    }

    /*
       All 24 hourly labels remain visible.
       No alternate labels are hidden.
    */

    .chart-labels,
    .mini-chart-labels {
        font-size: 7px;
    }

    .toolbar,
    .events-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .toolbar-controls {
        width: 100%;
    }

    .event-search {
        width: 100%;
    }

    .events-table {
        min-width: 900px;
    }

    .mini-chart {
        min-width: 600px;
    }

    /* SETTINGS.HTML */
    .settings-avatar-row {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* =========================================================
   SMALL MOBILE (max-width: 480px)
========================================================= */

@media (max-width: 480px) {

    /* BASE.HTML */
    .page-content {
        padding-left: 10px;
        padding-right: 10px;
    }

    .topbar {
        padding-left: 10px;
        padding-right: 10px;
    }

    .topbar-right {
        gap: 7px;
    }

    .account-selector {
        min-width: 0;
        max-width: 145px;
    }

    /* OVERVIEW.HTML */
    .dataset-title,
    .dataset-title-area h1 {
        font-size: 17px;
    }

    .meta-chart {
        padding-left: 8px;
        padding-right: 8px;
    }

    .chart-y-axis {
        width: 34px;
        flex-basis: 34px;
        font-size: 8px;
    }

    .chart-labels,
    .mini-chart-labels {
        font-size: 6.5px;
    }

    /* AUTH PAGES (login/signup/password reset) */
    .auth-page-wrapper {
        padding: 24px 20px;
        margin: 40px auto;
    }
}