/* Responsive */
@media (max-width: 1024px) {
    .sidebar {
        width: 200px;
    }
    .main-content {
        margin-left: 200px;
    }
    .page-content {
        padding: 24px;
    }
}

@media (max-width: 768px) {
    .mobile-panel-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 56px;
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        z-index: 1250;
        background: color-mix(in srgb, var(--bg-primary) 94%, transparent);
        border-bottom: 1px solid var(--border-color);
        backdrop-filter: blur(8px);
    }

    .mobile-panel-header__title {
        font-size: 0.88rem;
        font-weight: 600;
        color: var(--text-primary);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-panel-header__home {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        border: 1px solid var(--border-color);
        border-radius: 9px;
        padding: 6px 9px;
        background: var(--bg-primary);
        color: var(--text-primary);
        text-decoration: none;
        font-size: 0.78rem;
        font-weight: 600;
    }

    .mobile-menu-toggle {
        position: static;
        z-index: 1201;
        min-width: 42px;
        height: 40px;
        border: 1px solid var(--border-color);
        border-radius: 9px;
        background: var(--bg-primary);
        color: var(--text-primary);
        box-shadow: var(--shadow-sm);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 0 10px;
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
    }

    .mobile-sidebar-open .mobile-menu-toggle {
        background: var(--bg-active);
    }

    .mobile-sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.35);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
        z-index: 90;
        border: none;
    }

    .mobile-sidebar-overlay.open {
        opacity: 1;
        pointer-events: auto;
    }

    .sidebar {
        position: fixed;
        width: min(86vw, 280px);
        left: calc(-1 * min(86vw, 280px));
        z-index: 100;
        transition: left 0.3s ease;
    }
    .sidebar.open {
        left: 0;
    }
    .sidebar-collapsed .sidebar {
        width: min(86vw, 280px);
    }
    .sidebar-collapsed .logo-text,
    .sidebar-collapsed .nav-section-title,
    .sidebar-collapsed .nav-item span:last-child,
    .sidebar-collapsed .sidebar-footer span:not(.status-dot) {
        display: initial;
    }
    .sidebar-collapsed .sidebar-header {
        justify-content: space-between;
        padding: 12px 14px;
    }
    .sidebar-collapsed .nav-item {
        justify-content: flex-start;
        padding: 8px 10px;
    }
    .sidebar-collapsed .main-content {
        margin-left: 0;
    }
    .sidebar-collapsed .sidebar-footer {
        justify-content: flex-start;
    }
    .sidebar-collapsed .api-status {
        justify-content: flex-start;
    }
    .main-content {
        margin-left: 0;
        padding-top: 72px;
    }
    .page-content {
        max-width: none;
        padding: 16px 12px;
    }
    .page-title {
        font-size: 1.45rem;
    }
    .page-header {
        margin-bottom: 20px;
    }
    .form-row {
        grid-template-columns: 1fr;
    }

    .card {
        padding: 16px;
    }

    th, td {
        padding: 10px 12px;
    }

    .table-container {
        border-radius: var(--radius);
    }

    .dashboard-error-list,
    .dashboard-lists-grid {
        grid-template-columns: 1fr;
    }
}

