/* ==========================================================================
   Responsive - Jabbr Dashboard v2
   Mobile breakpoints: 1200, 768, 480
   ========================================================================== */

/* ── Tablet (< 1200px) ─────────────────────────────────────────────────── */
@media (max-width: 1200px) {
    /* Collapse sidebar to icons-only */
    .sidebar {
        width: var(--sidebar-collapsed);
    }

    .sidebar .brand-text,
    .sidebar .nav-label {
        opacity: 0;
        pointer-events: none;
        width: 0;
        overflow: hidden;
        position: absolute;
    }

    .sidebar .nav-item {
        justify-content: center;
        padding: var(--space-sm);
        gap: 0;
    }

    .sidebar .sidebar-brand {
        justify-content: center;
        padding: var(--space-lg) var(--space-sm);
        gap: 0;
    }

    .sidebar .sidebar-logout {
        justify-content: center;
        padding: var(--space-sm);
        gap: 0;
    }

    .sidebar .sidebar-logout .nav-label {
        opacity: 0;
        pointer-events: none;
        width: 0;
        overflow: hidden;
        position: absolute;
    }

    .sidebar .nav-item::after {
        content: attr(data-tooltip);
        position: absolute;
        left: calc(100% + 8px);
        top: 50%;
        transform: translateY(-50%);
        background: var(--bg-elevated);
        color: var(--text-primary);
        padding: var(--space-xs) var(--space-md);
        border-radius: var(--radius-sm);
        font-size: var(--text-sm);
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--transition-fast);
        border: 1px solid var(--border-default);
        box-shadow: var(--shadow-md);
        z-index: var(--z-tooltip);
    }

    .sidebar .nav-item:hover::after {
        opacity: 1;
    }

    .main-wrapper {
        margin-left: var(--sidebar-collapsed);
    }

    .sidebar-toggle {
        display: none;
    }

    /* Dashboard grid to single column */
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    /* Session stats - hide on smaller tablets */
    .session-stats {
        display: none;
    }

    /* Config card body to single column */
    .config-card-body {
        grid-template-columns: 1fr;
    }
}

/* ── Mobile (< 768px) ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Hide sidebar, show mobile nav */
    .sidebar {
        transform: translateX(-100%);
        width: var(--sidebar-width);
        transition: transform var(--transition-normal);
    }

    .sidebar.mobile-open {
        transform: translateX(0);
    }

    .mobile-nav {
        display: flex;
    }

    .mobile-menu-btn {
        display: flex;
    }

    .main-wrapper {
        margin-left: 0;
        padding-bottom: var(--mobile-nav-height);
    }

    /* Hide status bar on mobile */
    .status-bar {
        display: none;
    }

    /* Page content padding */
    .page-content {
        padding: var(--space-lg);
    }

    /* Header adjustments */
    .header {
        padding: 0 var(--space-lg);
    }

    .header-center {
        display: none;
    }

    .wallet-badge {
        display: none;
    }

    /* Notification dropdown on mobile - full width */
    .notification-dropdown {
        position: fixed;
        top: var(--header-height, 56px);
        left: 0;
        right: 0;
        width: 100%;
        max-height: calc(100vh - var(--header-height, 56px) - var(--mobile-nav-height, 60px));
        border-radius: 0;
    }

    /* Hide greeting text on small screens, keep icon+badge */
    .user-greeting-trigger #greetingName {
        display: none;
    }
    .greeting-arrow {
        display: none;
    }

    /* Metrics grid to 2 columns */
    .metrics-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-md);
    }

    /* Bot Manager responsive */
    .bm-launcher {
        flex-direction: column;
        align-items: stretch;
    }

    /* Metric card compact */
    .metric-card {
        padding: var(--space-md);
    }

    .metric-icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
        font-size: var(--text-md);
    }

    .metric-value {
        font-size: var(--text-lg);
    }

    /* Quick actions stack */
    .quick-actions {
        flex-direction: column;
    }

    .action-btn {
        min-width: unset;
    }

    /* Position grid */
    .position-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Grid preview */
    .grid-level {
        grid-template-columns: 30px 1fr 80px 60px;
        font-size: 10px;
    }

    /* Form rows */
    .form-row {
        grid-template-columns: 1fr;
    }

    /* Config footer */
    .config-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .config-footer .btn-group {
        justify-content: stretch;
    }

    .config-footer .btn {
        flex: 1;
    }

    /* Tabs scroll */
    .tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Table horizontal scroll */
    .table-wrapper {
        margin: 0 calc(-1 * var(--space-lg));
        border-radius: 0;
    }

    /* Mobile overlay for sidebar */
    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: calc(var(--z-sidebar) - 1);
        display: none;
    }

    .sidebar-backdrop.active {
        display: block;
    }
}

/* ── Small phones (< 480px) ─────────────────────────────────────────────── */
@media (max-width: 480px) {
    .page-content {
        padding: var(--space-md);
    }

    .header {
        padding: 0 var(--space-md);
    }

    .page-title {
        font-size: var(--text-md);
    }

    /* Stack metrics to full width */
    .metrics-grid {
        grid-template-columns: 1fr;
    }

    /* Card padding reduce */
    .card,
    .metric-card {
        padding: var(--space-md);
    }

    .config-card-body {
        padding: var(--space-md);
    }

    /* Position grid single col on tiny screens */
    .position-grid {
        grid-template-columns: 1fr;
    }

    /* Grid summary */
    .grid-summary {
        grid-template-columns: 1fr 1fr;
    }

    /* Mobile nav items smaller */
    .mobile-nav-item {
        min-width: 44px;
        font-size: 9px;
    }

    .mobile-nav-item i {
        font-size: 16px;
    }
}

/* ── Touch enhancements ─────────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .btn {
        min-height: 44px;
    }

    .btn-sm {
        min-height: 36px;
    }

    .nav-item {
        min-height: 48px;
    }

    .form-input,
    .form-select {
        min-height: 44px;
        font-size: 16px; /* Prevents zoom on iOS */
    }

    /* No hover effects on touch */
    .metric-card:hover {
        transform: none;
    }

    /* Disable tooltips */
    .sidebar.collapsed .nav-item::after {
        display: none;
    }
}