/* ============================================================
   E-ROCK — RESPONSIVE FRAMEWORK ULTRA-PUISSANT v2
   ============================================================
   Breakpoints :
   - XS (mobile)     : < 576px
   - SM (mobile L)   : 576px - 767px
   - MD (tablette)   : 768px - 991px
   - LG (laptop)     : 992px - 1199px
   - XL (desktop)    : ≥ 1200px
   ============================================================ */

/* ========== BASE GLOBALE ========== */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
    overflow-x: hidden;
    /* Pas de height fixe - laisser le contenu déterminer */
}

body {
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 100vh;
    /* RETIRÉ : overscroll-behavior-y et -webkit-fill-available
       (cause de bloque le scroll sur Android) */
}

img, svg, video, iframe { max-width: 100%; height: auto; }

/* ========== TYPOGRAPHIE FLUIDE ========== */
h1, .h1 { font-size: clamp(1.5rem, 4.5vw, 2.5rem); line-height: 1.2; }
h2, .h2 { font-size: clamp(1.35rem, 3.8vw, 2rem); line-height: 1.25; }
h3, .h3 { font-size: clamp(1.2rem, 3vw, 1.75rem); line-height: 1.3; }
h4, .h4 { font-size: clamp(1.1rem, 2.5vw, 1.5rem); }
h5, .h5 { font-size: clamp(1rem, 2vw, 1.25rem); }
h6, .h6 { font-size: clamp(0.9rem, 1.8vw, 1.1rem); }

.display-1 { font-size: clamp(2.5rem, 8vw, 5rem) !important; }
.display-2 { font-size: clamp(2.2rem, 7vw, 4.5rem) !important; }
.display-3 { font-size: clamp(2rem, 6vw, 4rem) !important; line-height: 1.1; }
.display-4 { font-size: clamp(1.8rem, 5vw, 3.5rem) !important; }
.display-5 { font-size: clamp(1.5rem, 4.5vw, 3rem) !important; }
.display-6 { font-size: clamp(1.4rem, 4vw, 2.5rem) !important; }

.lead { font-size: clamp(0.95rem, 1.8vw, 1.15rem); }

p, li, td, th, label, input, textarea, select, button {
    font-size: clamp(0.85rem, 1.5vw, 1rem);
}

/* ============================================================
   SIDEBAR USER (Dashboard)
   ============================================================ */
@media (max-width: 991.98px) {
    .sidebar {
        position: fixed !important;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1040;
        box-shadow: 0 0 50px rgba(0,0,0,0.5);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .sidebar.show { transform: translateX(0); }

    [dir="rtl"] .sidebar { transform: translateX(100%); }
    [dir="rtl"] .sidebar.show { transform: translateX(0); }

    .dashboard-main { margin-left: 0 !important; width: 100% !important; }

    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.6);
        z-index: 1039;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
    .sidebar-overlay.active { display: block; }
}

/* ============================================================
   TOPBAR
   ============================================================ */
@media (max-width: 767.98px) {
    .topbar {
        padding: 0.75rem 1rem !important;
        gap: 0.5rem !important;
    }
    .topbar-title h1 { font-size: 1.1rem !important; }
    .topbar-actions { gap: 0.3rem !important; }
    .topbar-lang, .topbar-user {
        padding: 0.45rem 0.7rem !important;
        font-size: 0.85rem !important;
    }
    .user-info { display: none !important; }
}

@media (max-width: 575.98px) {
    .topbar { padding: 0.65rem 0.75rem !important; }
    .topbar-title h1 { font-size: 1rem !important; }
    .user-avatar { width: 36px !important; height: 36px !important; font-size: 0.9rem !important; }
}

/* ============================================================
   DASHBOARD CONTENT
   ============================================================ */
@media (max-width: 991.98px) {
    .dashboard-content {
        padding: 1rem !important;
    }
}

@media (max-width: 575.98px) {
    .dashboard-content {
        padding: 0.75rem !important;
    }
    .content-card {
        padding: 1rem !important;
        border-radius: 12px !important;
        margin-bottom: 0.75rem !important;
    }
}

/* ============================================================
   STAT CARDS
   ============================================================ */
@media (max-width: 767.98px) {
    .stat-card {
        padding: 1rem !important;
    }
    .stat-card .stat-icon {
        width: 42px !important;
        height: 42px !important;
        font-size: 1.2rem !important;
    }
    .stat-card .stat-value {
        font-size: 1.3rem !important;
    }
    .stat-card .stat-label {
        font-size: 0.75rem !important;
    }
}

@media (max-width: 575.98px) {
    .stat-card { padding: 0.85rem !important; border-radius: 12px !important; }
    .stat-card .stat-icon { width: 38px !important; height: 38px !important; font-size: 1.05rem !important; }
    .stat-card .stat-value { font-size: 1.15rem !important; }
}

/* ============================================================
   FORMULAIRES — Critical: pas de zoom iOS
   ============================================================ */
@media (max-width: 767.98px) {
    .form-control, .form-select, input, textarea, select {
        font-size: 16px !important;  /* Anti-zoom iOS */
    }

    .form-control-lg, .form-select-lg {
        padding: 0.65rem 0.9rem !important;
        font-size: 16px !important;
    }

    .btn-lg {
        padding: 0.7rem 1rem !important;
        font-size: 0.95rem !important;
    }

    .input-group-text {
        padding: 0.5rem 0.7rem !important;
        font-size: 0.9rem !important;
    }

    .form-label {
        font-size: 0.85rem !important;
        margin-bottom: 0.3rem !important;
    }
}

/* Touch-friendly */
@media (hover: none) and (pointer: coarse) {
    .btn, .nav-item, .dropdown-item, .form-control, .form-select {
        min-height: 44px;
    }
    .btn-sm { min-height: 36px; }
    button, a { touch-action: manipulation; }
}

/* ============================================================
   TABLES RESPONSIVE
   ============================================================ */
.table-responsive { -webkit-overflow-scrolling: touch; }

@media (max-width: 767.98px) {
    .table-responsive table {
        font-size: 0.8rem;
        min-width: 600px;  /* Force scroll horizontal */
    }
    .table-responsive td, .table-responsive th {
        padding: 0.5rem 0.6rem !important;
        white-space: nowrap;
    }
}

/* ============================================================
   MODALS RESPONSIVE
   ============================================================ */
@media (max-width: 575.98px) {
    .modal-dialog { margin: 0.5rem !important; max-width: calc(100% - 1rem) !important; }
    .modal-content { border-radius: 14px !important; }
    .modal-body { padding: 1rem !important; }
    .modal-header, .modal-footer { padding: 0.85rem 1rem !important; }
    .modal-title { font-size: 1rem !important; }
}

/* ============================================================
   HOME PAGE RESPONSIVE
   ============================================================ */
@media (max-width: 991.98px) {
    .hero-erock { text-align: center; padding: 3rem 0 !important; }
    .hero-erock .stats-row { justify-content: center; }
    .min-vh-75 { min-height: auto !important; }
    .feature-card, .step-card { padding: 1.5rem 1.25rem !important; }
}

@media (max-width: 575.98px) {
    .hero-erock { padding: 2rem 0 !important; }
    .hero-erock .display-3 { font-size: 1.7rem !important; }
    .hero-erock .lead { font-size: 0.92rem !important; }
    .badge-hero { font-size: 0.7rem !important; padding: 0.3rem 0.75rem !important; }
    .feature-card, .step-card { padding: 1.1rem 0.9rem !important; }
    .cta-box { padding: 1.75rem 1rem !important; }
    .accordion-button { padding: 0.85rem 1rem !important; font-size: 0.9rem !important; }
    .accordion-body { padding: 0.85rem 1rem 1.15rem !important; font-size: 0.85rem; }
    .stat-value { font-size: 1.5rem !important; }
}

/* ============================================================
   TRADING PAGE RESPONSIVE
   ============================================================ */
@media (max-width: 991.98px) {
    .trading-hero { padding: 1.5rem !important; }
    .trading-card-active { padding: 1.5rem !important; }
}

@media (max-width: 767.98px) {
    .trading-level-emoji { font-size: 3rem !important; }
    .trading-level-name { font-size: 1.5rem !important; }
    .trading-level-desc { font-size: 0.85rem; }
    .rate-value { font-size: 2rem !important; }
    .rate-amount-est { font-size: 0.8rem !important; }
    .trading-level-rate-box { padding: 1rem !important; width: 100%; margin-top: 1rem; }
    .code-text { font-size: 1.2rem !important; letter-spacing: 2px !important; }
    .code-copy-btn { padding: 0.55rem 0.8rem !important; font-size: 0.95rem !important; }
    .trading-hero { padding: 1.25rem !important; }
    .trading-card-active { padding: 1.25rem !important; }
    .breakdown-item { padding: 0.7rem !important; }
    .breakdown-icon { font-size: 1.3rem !important; }
    .breakdown-label { font-size: 0.82rem !important; }
    .breakdown-detail { font-size: 0.72rem !important; }
    .expiry-banner { padding: 0.75rem 0.9rem !important; gap: 0.6rem !important; }
    .expiry-icon { font-size: 1.4rem !important; }
    .expiry-time { font-size: 1.2rem !important; letter-spacing: 1px !important; }
    .expiry-end-time { font-size: 0.75rem !important; }
}

@media (max-width: 575.98px) {
    .trading-stat { padding: 0.7rem !important; gap: 8px !important; }
    .trading-stat-icon { width: 38px !important; height: 38px !important; font-size: 1rem !important; }
    .trading-stat-value { font-size: 1.05rem !important; }
    .trading-stat-label { font-size: 0.7rem !important; }
    .level-card { padding: 0.9rem 0.6rem !important; }
    .level-rate { font-size: 1.3rem !important; }
    .level-icon { font-size: 2rem !important; }
    .level-card .level-threshold { font-size: 0.7rem !important; }
    .level-card h6 { font-size: 0.85rem !important; }
    .trading-card-active { padding: 1rem !important; }
    .trading-card-active::before { display: none; }  /* Désactiver l'animation sur mobile pour perf */
    .trader-form-box { padding: 1rem !important; }
    .trader-form-box h5 { font-size: 1rem !important; }
    .code-display-row { flex-direction: column; }
    #todayCode { font-size: 1rem !important; letter-spacing: 1.5px !important; }
}

/* ============================================================
   WITHDRAWAL / DEPOSIT / KYC RESPONSIVE
   ============================================================ */
@media (max-width: 767.98px) {
    .progress-erock { height: 24px !important; }
    .progress-label { font-size: 0.75rem !important; }
    .alert { padding: 0.75rem 0.9rem !important; font-size: 0.85rem; }
    .alert ul { padding-left: 1.2rem !important; }
    .info-stat { padding: 0.85rem !important; }
    .info-stat .h4 { font-size: 1.1rem !important; }
}

@media (max-width: 575.98px) {
    .kyc-status-banner { padding: 1rem !important; flex-direction: column !important; text-align: center; gap: 0.75rem; }
    .kyc-status-icon { font-size: 2.5rem !important; }
    .kyc-doc-card { padding: 0.85rem !important; }
    .upload-zone { padding: 1.5rem 0.75rem !important; }
    .deposit-wallet-box { padding: 1rem !important; }
    .wallet-address-display { font-size: 0.75rem !important; word-break: break-all; }
}

/* ============================================================
   NAVBAR PUBLIC
   ============================================================ */
@media (max-width: 991.98px) {
    .navbar-collapse {
        background: rgba(11,14,17,0.95);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        margin-top: 1rem;
        padding: 1rem;
        border-radius: 12px;
        border: 1px solid rgba(255,255,255,0.05);
    }
    .navbar-nav { gap: 0.25rem; }
    .navbar-nav .btn { width: 100%; margin: 0.25rem 0; }
    .navbar-nav .nav-link { padding: 0.65rem 0.75rem !important; }
}

@media (max-width: 575.98px) {
    .navbar-brand { font-size: 1.2rem !important; }
    .navbar-toggler { padding: 0.35rem 0.6rem !important; }
}

/* ============================================================
   ADMIN RESPONSIVE
   ============================================================ */
@media (max-width: 991.98px) {
    .admin-sidebar {
        position: fixed !important;
        top: 0; left: 0; bottom: 0;
        width: 280px;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 1040;
        box-shadow: 0 0 50px rgba(0,0,0,0.5);
        overflow-y: auto;
    }
    .admin-sidebar.show { transform: translateX(0); }
    .admin-main { margin-left: 0 !important; width: 100% !important; }
}

@media (max-width: 575.98px) {
    .admin-content { padding: 0.75rem !important; }
    .admin-card { border-radius: 10px !important; }
    .admin-card-header { padding: 0.85rem 1rem !important; flex-wrap: wrap; gap: 0.5rem; }
    .admin-card-body { padding: 0.85rem !important; }
    .kpi-value { font-size: 1.3rem !important; }
    .kpi-label { font-size: 0.7rem !important; }
    .admin-topbar { padding: 0.65rem 0.85rem !important; }
}

/* ============================================================
   FORMS AUTH (login/register)
   ============================================================ */
@media (max-width: 575.98px) {
    .auth-wrapper { padding: 1rem !important; }
    .auth-card { padding: 1.5rem 1.25rem !important; border-radius: 14px !important; }
    .auth-logo { font-size: 2rem !important; }
    .auth-header h2 { font-size: 1.3rem !important; }
}

/* ============================================================
   SAFE AREA iOS (notch iPhone X+)
   ============================================================ */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
    .topbar, .admin-topbar, .navbar {
        padding-top: max(0.65rem, env(safe-area-inset-top));
    }
    .sidebar-footer, .admin-sidebar-footer {
        padding-bottom: max(0.85rem, env(safe-area-inset-bottom));
    }
}

/* ============================================================
   PWA STANDALONE
   ============================================================ */
@media all and (display-mode: standalone) {
    body { user-select: none; }
    body input, body textarea { user-select: text; }
    .topbar { padding-top: max(1rem, env(safe-area-inset-top)) !important; }
}

/* ============================================================
   UTILITAIRES
   ============================================================ */
.hide-xs { display: block; }
.show-xs { display: none; }

@media (max-width: 575.98px) {
    .hide-xs { display: none !important; }
    .show-xs { display: block !important; }
}

.hide-mobile { display: block; }
.show-mobile { display: none; }

@media (max-width: 767.98px) {
    .hide-mobile { display: none !important; }
    .show-mobile { display: block !important; }
}

@media (min-width: 1400px) {
    .container { max-width: 1320px; }
}

.responsive-py { padding-top: clamp(1.5rem, 4vw, 4rem); padding-bottom: clamp(1.5rem, 4vw, 4rem); }
.responsive-px { padding-left: clamp(1rem, 3vw, 2rem); padding-right: clamp(1rem, 3vw, 2rem); }

/* ============================================================
   FIXES SPÉCIFIQUES
   ============================================================ */
.info-stat {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 1rem;
}

/* Sidebar item RTL */
[dir="rtl"] .nav-item.active {
    border-left: none !important;
    border-right: 3px solid var(--erock-yellow, #F0B90B) !important;
}
[dir="rtl"] .admin-nav-item.active {
    border-left: none !important;
    border-right: 3px solid var(--erock-yellow, #F0B90B) !important;
}

/* Container debordement */
.container, .container-fluid {
    max-width: 100%;
    overflow-x: hidden;
}

/* Eviter overflow horizontal global */
.row { margin-left: 0; margin-right: 0; }
.row > * {
    max-width: 100%;
}

/* Phone input group responsive */
@media (max-width: 575.98px) {
    .phone-input-group .phone-prefix {
        font-size: 0.85rem !important;
        min-width: 80px !important;
        padding: 0.4rem 0.6rem !important;
    }
}

/* Confettis et animations: désactiver sur reduce-motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Améliorer lisibilité boutons mobile */
@media (max-width: 575.98px) {
    .btn {
        font-size: 0.875rem;
        padding: 0.5rem 0.85rem;
    }
    .btn-lg {
        font-size: 0.95rem;
        padding: 0.65rem 1rem;
    }
    .btn-sm {
        font-size: 0.78rem;
        padding: 0.35rem 0.65rem;
    }
}

/* Dashboard trading widget responsive */
@media (max-width: 575.98px) {
    .dashboard-trading-widget {
        padding: 0.85rem 1rem !important;
    }
    .dashboard-trading-icon { font-size: 2rem !important; }
    .dashboard-trading-rate { font-size: 1.5rem !important; }
    .dashboard-trading-widget h5 { font-size: 0.95rem !important; }
    .dashboard-trading-widget p { font-size: 0.78rem !important; }
}

/* Improve scrolling perf */
.modal, .sidebar, .admin-sidebar {
    will-change: transform;
}

/* Improve text rendering on small screens */
@media (max-width: 575.98px) {
    body { line-height: 1.55; }
    p { margin-bottom: 0.75rem; }
}

/* ============================================================
   🛡️ PROTECTION ANTI-TRADUCTION CHROME / GOOGLE TRANSLATE
   ============================================================ */
.no-translate, .money {
    unicode-bidi: isolate;
    direction: ltr;
    display: inline-block;
    white-space: nowrap;
}

/* Force LTR pour les montants même en mode RTL (arabe) */
[dir="rtl"] .money,
[dir="rtl"] .no-translate {
    direction: ltr !important;
    unicode-bidi: embed;
}

/* Empêcher Google Translate de retransformer les chiffres */
.money {
    -webkit-user-modify: read-only;
    user-modify: read-only;
}

/* ============================================================
   📱 PAGE INSCRIPTION ULTRA RESPONSIVE
   ============================================================ */
.auth-wrapper {
    min-height: 100vh;
    padding: 1.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-card {
    width: 100%;
    max-width: 600px;
}

@media (max-width: 575.98px) {
    .auth-wrapper {
        padding: 0.75rem 0.5rem;
        align-items: flex-start;
    }
    .auth-card {
        padding: 1.25rem 1rem !important;
        border-radius: 14px !important;
        margin: 0;
    }
    .auth-card .form-control,
    .auth-card .form-select {
        padding: 0.6rem 0.85rem !important;
        font-size: 16px !important;
    }
    .auth-card .row.g-3 > * { margin-bottom: 0.25rem; }
    .auth-card .btn-lg {
        padding: 0.65rem 1rem !important;
        font-size: 0.95rem !important;
    }
    .auth-card h2, .auth-card h3 {
        font-size: 1.25rem !important;
    }
    .phone-input-group .phone-prefix {
        min-width: 70px !important;
        font-size: 0.78rem !important;
        padding: 0.4rem 0.5rem !important;
    }
    .phone-input-group #phoneFlag { font-size: 0.95rem; }
}

/* Scroll fluide pour le formulaire long */
@media (max-height: 700px) {
    .auth-wrapper {
        align-items: flex-start;
        overflow-y: auto;
    }
}

/* ============================================================
   📱 DASHBOARD - FIX POUR LE BUG DE LA CAPTURE
   ============================================================ */
.stat-card .stat-value,
.dashboard-trading-rate,
.kpi-value,
.h4, .h5, .display-4, .display-5,
[class*="money"] {
    /* Force LTR direction même en RTL pour les nombres */
    direction: ltr;
    unicode-bidi: bidi-override;
}

/* Empêcher de couper les nombres très longs (genre 12 345 678,90) */
.stat-value, .money, .no-translate {
    word-break: keep-all;
    overflow-wrap: normal;
    text-wrap: nowrap;
    -webkit-text-wrap: nowrap;
}

/* Si le solde est très grand, réduire la taille pour rentrer */
@media (max-width: 991.98px) {
    .stat-value {
        font-size: clamp(0.95rem, 3vw, 1.4rem) !important;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 575.98px) {
    .stat-value {
        font-size: clamp(0.85rem, 4vw, 1.2rem) !important;
    }
}

/* ============================================================
   💵 PROTECTION DOLLAR — TRIPLE SÉCURITÉ
   ============================================================
   Si pour une raison quelconque le $ disparaît, le CSS le rajoute
   visuellement via des règles d'isolation typographique.
   ============================================================ */

/* Force LTR + isolation Unicode pour empêcher tout reformatage */
.money-display,
.money,
.notranslate,
[translate="no"],
.no-translate {
    unicode-bidi: isolate !important;
    direction: ltr !important;
    display: inline-block;
    white-space: nowrap;
}

/* Bloquer Google Translate sur les éléments avec class notranslate */
.notranslate {
    -webkit-user-select: text;
}

/* Numéros toujours en LTR même en RTL */
[dir="rtl"] .money-display,
[dir="rtl"] .money,
[dir="rtl"] .notranslate {
    direction: ltr !important;
    text-align: left;
}

/* Stat values dans le dashboard : prévention overflow + LTR */
.stat-value, .stat-card .stat-value {
    direction: ltr;
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
}