@media (max-width: 1280px) {
    .metric-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-grid,
    .section-grid,
    .analytics-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .app-shell {
        display: flex;
        flex-direction: column;
        padding: 12px;
    }

    .sidebar {
        position: static;
        height: auto;
        padding: 16px;
    }

    .brand {
        margin-bottom: 16px;
    }

    .sidebar-nav {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        display: grid;
    }

    .nav-item {
        justify-content: center;
        text-align: center;
    }

    .nav-icon {
        display: none;
    }

    .sidebar-footer {
        display: none;
    }

    .topbar {
        align-items: stretch;
        flex-direction: column;
    }

    .topbar-actions {
        width: 100%;
    }

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

@media (max-width: 640px) {
    .app-shell {
        padding: 10px;
    }

    .brand {
        align-items: flex-start;
    }

    .brand-mark {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }

    .brand h1 {
        font-size: 1.14rem;
    }

    .sidebar-nav {
        grid-template-columns: 1fr;
    }

    .nav-item {
        justify-content: flex-start;
    }

    .nav-icon {
        display: grid;
    }

    .topbar,
    .hero-panel,
    .panel,
    .metric-card {
        padding: 14px;
    }

    .hero-panel {
        align-items: stretch;
        flex-direction: column;
    }

    .hero-stats {
        min-width: 0;
        text-align: left;
    }

    .metric-grid,
    .form-row,
    .filters-grid {
        grid-template-columns: 1fr;
    }

    .metric-card {
        min-height: 104px;
    }

    .panel-header {
        align-items: stretch;
        flex-direction: column;
    }

    .vehicle-card {
        flex-direction: column;
    }

    .vehicle-card-side {
        min-width: 0;
        justify-items: start;
    }

    .card-actions,
    .table-actions {
        justify-content: stretch;
        width: 100%;
    }

    .card-actions .action-button,
    .table-actions .action-button {
        flex: 1 1 120px;
    }

    .table-wrapper {
        overflow-x: visible;
    }

    table,
    thead,
    tbody,
    tr,
    th,
    td {
        display: block;
        width: 100%;
    }

    table,
    .compact-table table {
        min-width: 0;
    }

    thead {
        display: none;
    }

    tbody {
        display: grid;
        gap: 10px;
    }

    tr {
        padding: 12px;
        background: rgba(3, 11, 24, 0.34);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
    }

    td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 8px 0;
        border-bottom: 1px solid var(--color-border);
        text-align: right;
    }

    td:last-child {
        border-bottom: 0;
    }

    td::before {
        content: attr(data-label);
        color: var(--color-cyan);
        font-weight: 900;
        text-align: left;
    }

    td.empty-table {
        display: block;
        text-align: center;
    }

    td.empty-table::before {
        content: "";
    }

    .vertical-bars {
        height: 260px;
        grid-auto-columns: minmax(54px, 1fr);
        gap: 10px;
    }

    .bar-track {
        min-height: 170px;
        padding: 0 7px;
    }

    .bar-value {
        font-size: 0.7rem;
    }
}

@media (max-width: 390px) {
    .topbar h2 {
        font-size: 1.45rem;
    }

    .hero-panel h3 {
        font-size: 1.28rem;
    }

    .search-field input {
        padding-left: 38px;
    }

    .primary-button,
    .secondary-button,
    .nav-item {
        min-height: 46px;
    }

    .chart-row-label,
    .monthly-item {
        align-items: flex-start;
        flex-direction: column;
    }
}