/* ============================================================
   MAETIS — Mobile Stylesheet
   Appliqué uniquement via @media (max-width: 768px)
   NE PAS modifier ce fichier pour les styles desktop.
   ============================================================ */

/* Masqué sur desktop — !important pour éviter tout conflit de spécificité */
@media (min-width: 769px) {
    .mobile-overlay,
    .mobile-drawer,
    .mobile-hamburger { display: none !important; }
}

@media (max-width: 768px) {

    /* ── HAMBURGER BUTTON ── */
    .mobile-hamburger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: var(--sp-1);
        width: 40px;
        height: 40px;
        padding: var(--sp-2);
        background: none;
        border: 1px solid var(--border);
        border-radius: 6px;
        cursor: pointer;
        flex-shrink: 0;
    }
    .mobile-hamburger span {
        display: block;
        height: 1.5px;
        background: var(--text);
        border-radius: 2px;
    }

    /* ── DRAWER OVERLAY ── */
    .mobile-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 200;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }
    .mobile-overlay.open { display: block; }

    /* ── DRAWER PANEL ── */
    .mobile-drawer {
        position: fixed;
        top: 0;
        right: 0;
        width: min(280px, 100vw);
        height: 100%;
        background: var(--surface);
        border-left: 1px solid var(--border);
        z-index: 201;
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        will-change: transform;
        overflow-y: auto;
        padding: var(--sp-5);
        display: flex;
        flex-direction: column;
        gap: var(--sp-4);
    }
    .mobile-drawer.open { transform: translateX(0); }

    .mobile-drawer-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .mobile-drawer-title {
        font-size: 0.65rem;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--text-2);
    }
    .mobile-drawer-close {
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: 1px solid var(--border);
        border-radius: 4px;
        color: var(--text-2);
        cursor: pointer;
        font-size: 1rem;
        line-height: 1;
    }
    .mobile-drawer-close:focus-visible,
    .mobile-hamburger:focus-visible {
        outline: 2px solid var(--text-2);
        outline-offset: 2px;
    }
    .mobile-drawer-sep {
        height: 1px;
        background: var(--border);
        flex-shrink: 0;
    }
    .mobile-drawer-user {
        display: flex;
        align-items: center;
        gap: var(--sp-3);
        padding: var(--sp-1) 0;
    }
    .mobile-drawer-item {
        display: flex;
        align-items: center;
        gap: var(--sp-3);
        padding: var(--sp-3);
        border-radius: 6px;
        font-size: 0.8rem;
        color: var(--text-2);
        text-decoration: none;
        background: none;
        border: none;
        cursor: pointer;
        font-family: var(--font-ui);
        width: 100%;
        text-align: left;
        transition: background 0.15s, color 0.15s;
    }
    .mobile-drawer-item:hover {
        background: var(--surface-2);
        color: var(--text);
    }
    .mobile-drawer-item.danger { color: var(--red); }
    .mobile-drawer-item.danger:hover { background: rgba(239,68,68,0.08); }
    .mobile-drawer-item.yellow { color: var(--yellow); }
    .mobile-drawer-item.yellow:hover { background: rgba(245,158,11,0.08); }

    /* ── INDEX.HTML — HEADER ── */
    .status-bar { display: none; }
    .user-menu  { display: none; }

    /* ── INDEX.HTML — LAYOUT ── */
    /* grid-template-columns and control-panel handled by inline 900px breakpoint */
    .main {
        padding: var(--sp-4) !important;
        gap: var(--sp-4) !important;
    }
    /* Control panel position handled by JS reorderMobileLayout() */

    /* ── INDEX.HTML — STATS ── */
    .stats-row { grid-template-columns: 1fr 1fr !important; }

    /* ── INDEX.HTML — POSITION CARD ── */
    #position-size { font-size: 0.72rem !important; }
    #pnl           { font-size: 1.05rem !important; }

    /* ── INDEX.HTML — PNL CHART ── */
    #pnl-chart { max-height: 180px; }

    /* ── INDEX.HTML — TRADES TABLE (dashboard) ── */
    .trades-table-wrap { overflow-x: auto; }
    .trades-table { min-width: 480px; }

    /* ── INDEX.HTML — HISTORIQUE CARDS ── */
    .trades-stats { grid-template-columns: 1fr 1fr !important; }

    #tab-history .card              { overflow: visible !important; }
    #tab-history .trades-table-wrap { overflow: visible !important; }
    #tab-history .trades-table,
    #tab-history .trades-table tbody { display: block; min-width: 0 !important; }
    #tab-history .trades-table thead { display: none; }

    #tab-history .trades-table tr.trade-row {
        display: block;
        border: 1px solid var(--border);
        border-radius: 8px;
        margin-bottom: var(--sp-2);
        min-width: 0 !important;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        -webkit-user-select: none;
        user-select: none;
        overflow: hidden;
    }

    #tab-history .trades-table .trade-card-cell {
        display: block;
        border: none;
        padding: 0;
    }

    .tc-date {
        font-family: var(--font-mono);
        font-size: 0.65rem;
        color: var(--text-2);
        padding: var(--sp-3) var(--sp-4) var(--sp-1);
        letter-spacing: 0.04em;
    }
    .tc-primary {
        display: flex;
        align-items: center;
        gap: var(--sp-3);
        padding: var(--sp-2) var(--sp-4) var(--sp-3);
    }
    .tc-coin {
        font-family: var(--font-mono);
        font-size: 1rem;
        font-weight: 700;
        color: var(--text);
        flex-shrink: 0;
    }
    .tc-pnl {
        font-family: var(--font-mono);
        font-size: 0.95rem;
        font-weight: 700;
        margin-left: auto;
        flex-shrink: 0;
    }
    .tc-details {
        padding: var(--sp-3) var(--sp-4);
        border-top: 1px solid var(--border);
        display: none;
    }
    .tc-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-3);
        margin-bottom: var(--sp-2);
    }
    .tc-row:last-child { margin-bottom: 0; }
    .tc-item {
        display: flex;
        flex-direction: column;
        gap: var(--sp-1);
    }
    .tc-label {
        font-size: 0.55rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-2);
    }
    .tc-item span:last-child {
        font-family: var(--font-mono);
        font-size: 0.8rem;
    }
    .tc-toggle {
        font-family: var(--font-ui);
        font-size: 0.6rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--text-2);
        text-align: center;
        padding: var(--sp-2) var(--sp-4);
        border-top: 1px solid var(--border);
    }

    /* ── INDEX.HTML — LOG ── */
    .log-list { max-height: 180px !important; }

    /* ── INDEX.HTML — SLIDERS ── */
    .custom-slider { height: 5px; }
    .custom-slider::-webkit-slider-thumb {
        width: 24px !important;
        height: 24px !important;
    }
    .custom-slider::-moz-range-thumb {
        width: 24px !important;
        height: 24px !important;
    }

    /* ── INDEX.HTML — PCT PRESETS ── */
    .pct-presets {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* ── AUTH ── */
    .auth-container { width: min(430px, 92vw) !important; }
    .form-body { padding: var(--sp-5) !important; }
    .btn-submit { min-height: 48px; }
    .form-input { min-height: 48px; }
    .btn-oauth { min-height: 48px; width: 100% !important; }

    /* ── ADMIN — METRICS ── */
    .metrics-grid { grid-template-columns: repeat(3, 1fr) !important; }

    /* ── ADMIN — KILL SWITCH ── */
    .kill-switch-bar {
        flex-direction: column !important;
        gap: var(--sp-3);
        align-items: stretch !important;
    }
    .kill-switch-actions { width: 100%; }
    .btn-kill { flex: 1; text-align: center; }

    /* ── ADMIN — TABLE ── */
    .table-wrap { overflow-x: auto; }
    .table-wrap table { min-width: 620px; }
    .search-input { width: 100% !important; }
    .section-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: var(--sp-3);
    }

    /* ── STATIC PAGES (legal, privacy, terms, support) ── */
    .container { padding: var(--sp-6) var(--sp-4) var(--sp-12) !important; }
    header { padding: 0 var(--sp-4) !important; }
    footer  { padding: var(--sp-4) !important; }

    /* ── FE-M1: RESPONSIVE FIXES ── */

    /* Onboarding card */
    .onboarding-card { padding: var(--sp-5) var(--sp-4) !important; }
    .onboarding-step { padding: var(--sp-3) var(--sp-4) !important; gap: var(--sp-3) !important; }
    .onboarding-title { font-size: 0.95rem !important; }

    /* Chart period buttons — larger tap target */
    .chart-period-btn { padding: var(--sp-2) var(--sp-4) !important; min-height: 38px; }

    /* Modals — prevent overflow on narrow screens */
    .modal-box,
    .disconnect-box { width: min(340px, 90vw) !important; padding: var(--sp-7) var(--sp-5) !important; }

    /* Toast — full width on mobile */
    #toast-container { bottom: var(--sp-4) !important; right: var(--sp-3) !important; left: var(--sp-3) !important; }
    .toast { max-width: 100% !important; }

    /* Tabs — horizontal scroll if needed, no text wrap */
    .tabs-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .tabs-bar::-webkit-scrollbar { display: none; }
    .tab-btn { white-space: nowrap; padding: var(--sp-3) var(--sp-4) !important; min-height: 44px; }

    /* Control panel body — tighter on mobile */
    .cp-body { padding: var(--sp-3) !important; }
    .cp-section { padding: var(--sp-3) var(--sp-4) !important; }

    /* Footer — stack vertically */
    .page-footer { flex-direction: column !important; align-items: flex-start !important; gap: var(--sp-2) !important; }

    /* Status dots row in mobile drawer header */
    .mobile-status-row { display: flex; gap: var(--sp-4); padding: var(--sp-2) 0 var(--sp-1); }
}

/* ── SMALL SCREENS (480px) ── */
@media (max-width: 480px) {
    .metrics-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── VERY SMALL SCREENS (420px) ── */
@media (max-width: 420px) {
    .stats-row { grid-template-columns: 1fr !important; }
}

/* ── FE-M1: VERY SMALL SCREENS (360px) ── */
@media (max-width: 360px) {
    .onboarding-card { padding: var(--sp-4) var(--sp-3) !important; }
    .tab-btn { padding: var(--sp-3) var(--sp-3) !important; font-size: 0.62rem !important; }
    .cp-body { padding: var(--sp-3) !important; }
    .modal-box,
    .disconnect-box { padding: var(--sp-6) var(--sp-4) !important; }
}