/* ==========================================================================
   Responsive - OMRO Dashboard
   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;
    }

    /* Status bar: respect collapsed sidebar on tablet */
    .status-bar {
        left: var(--sidebar-collapsed);
    }

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

    /* -- Sidebar expand-on-hover at tablet -------------------------------- */
    .sidebar:hover {
        width: var(--sidebar-width);
    }

    .sidebar:hover .brand-text,
    .sidebar:hover .nav-label,
    .sidebar:hover .sidebar-logout .nav-label {
        opacity: 1;
        pointer-events: auto;
        width: auto;
        overflow: visible;
        position: static;
    }

    .sidebar:hover .nav-item {
        justify-content: flex-start;
        padding: var(--space-sm) var(--space-md);
        gap: var(--space-md);
    }

    .sidebar:hover .sidebar-brand {
        justify-content: flex-start;
        padding: var(--space-lg) var(--space-lg);
        gap: var(--space-md);
    }

    .sidebar:hover .sidebar-logout {
        justify-content: flex-start;
        padding: var(--space-sm) var(--space-md);
        gap: var(--space-md);
    }

    .sidebar:hover .nav-item::after {
        display: none;
    }
}

/* -- 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);
    }

    /* Restore labels on mobile sidebar overlay */
    .sidebar.mobile-open .brand-text,
    .sidebar.mobile-open .nav-label,
    .sidebar.mobile-open .sidebar-logout .nav-label {
        opacity: 1;
        pointer-events: auto;
        width: auto;
        overflow: visible;
        position: static;
    }

    .sidebar.mobile-open .nav-item {
        justify-content: flex-start;
        padding: var(--space-sm) var(--space-md);
        gap: var(--space-md);
    }

    .sidebar.mobile-open .sidebar-brand {
        justify-content: flex-start;
        padding: var(--space-lg) var(--space-lg);
        gap: var(--space-md);
    }

    .sidebar.mobile-open .sidebar-logout {
        justify-content: flex-start;
        padding: var(--space-sm) var(--space-md);
        gap: var(--space-md);
    }

    .sidebar.mobile-open .nav-item::after {
        display: none;
    }

    .mobile-nav {
        display: flex;
    }

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

    .main-wrapper {
        margin-left: 0;
        padding-bottom: var(--mobile-nav-height);
        max-width: 100vw;
        width: 100%;
        overflow-x: hidden;
    }

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

    /* Page content padding -- remove fixed-footer offset on mobile */
    .page-content {
        padding: var(--space-lg);
        padding-bottom: var(--space-lg);
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* Header adjustments */
    .header {
        padding: 0 var(--space-lg);
        max-width: 100vw;
        overflow: hidden;
    }

    .header-center {
        display: none;
    }

    .header-right {
        flex-shrink: 1;
        min-width: 0;
        overflow: hidden;
    }

    .wallet-badge {
        display: none;
    }

    /* Compact env toggle on mobile */
    .env-label {
        font-size: 9px;
    }

    /* Connection badge compact on mobile -- hide text, just dot */
    .conn-text {
        display: none;
    }

    .connection-badge {
        padding: var(--space-xs) var(--space-sm);
    }

    /* 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);
        padding-bottom: var(--space-md);
        max-width: 100vw;
    }

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

    .header-right {
        gap: var(--space-sm);
    }

    .header-left {
        flex-shrink: 1;
        min-width: 0;
    }

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

    /* Hide env toggle labels on tiny screens, just show switch */
    .env-label {
        display: none;
    }

    /* Hide connection text, just show dot */
    .conn-text {
        display: none;
    }

    .connection-badge {
        padding: var(--space-xs);
        min-width: 28px;
        justify-content: center;
    }

    /* 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;
    }
}

/* -- Global overflow containment ------------------------------------------ */
.card,
.metric-card,
.stats-card,
.stats-metric-card,
.config-card,
.config-card-body,
.strategy-desc-banner,
.admin-card {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* -- Mobile layout fixes (< 768px) --------------------------------------- */
@media (max-width: 768px) {
    /* Metrics grid: clamp min col size so it doesn't overflow */
    .metrics-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    }

    /* Stats overview grid */
    .stats-overview {
        grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
    }

    /* Stats analyses grid */
    .stats-analysis-grid {
        grid-template-columns: 1fr;
    }

    /* Config page */
    .config-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .config-strategy-select {
        width: 100%;
    }

    .config-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .config-actions .btn {
        flex: 1;
        min-width: 0;
    }

    .strategy-desc-banner {
        flex-direction: column;
        gap: var(--space-sm);
        padding: var(--space-md);
    }

    /* Config card body (form grids) */
    .config-card-body {
        grid-template-columns: 1fr;
    }

    .ap-tier-totals,
    .ap-metrics {
        grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
    }

    /* Chart containers: reduce height on mobile */
    .chart-container {
        height: 200px;
    }

    /* Trading cards */
    .tc-container {
        width: 98vw;
        min-width: auto;
        max-height: 92vh;
    }

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

    .tc-footer {
        flex-direction: column;
    }

    /* Dashbaord grid always single col on mobile */
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}

/* -- Small phone fixes (< 480px) ----------------------------------------- */
@media (max-width: 480px) {
    .metrics-grid {
        grid-template-columns: 1fr;
    }

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

    /* Ensure cards don't have excessive padding */
    .stats-card,
    .stats-metric-card {
        padding: var(--space-md);
    }

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

    /* Trading card relationship grid */
    .tc-rel-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Config symbol tabs scroll */
    .cfg-sym-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
}