/*
 * Gaelium Pool Theme v1.0
 * Override pour YiiMP - Style cohérent avec gaelium.io
 */

/* ============================================
   VARIABLES & FONTS
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    --primary: #088a63;
    --primary-light: #0db584;
    --primary-dark: #065c42;
    --accent: #384192;
    --accent-light: #4a54b0;
    --dark: #0a0f1c;
    --dark-lighter: #121a2d;
    --dark-card: #161f35;
    --dark-card-hover: #1c2640;
    --text: #e8edf5;
    --text-muted: #8892a8;
    --border: rgba(255,255,255,0.08);
    --border-light: rgba(255,255,255,0.12);
    --glow: rgba(8, 138, 99, 0.4);
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
}

/* ============================================
   BASE STYLES
   ============================================ */
body {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 14px !important;
    background: var(--dark) !important;
    color: var(--text) !important;
    line-height: 1.6;
    min-height: 100vh;
}

/* Grille de fond animée */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(8, 138, 99, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(8, 138, 99, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 0;
}

.page {
    position: relative;
    z-index: 1;
}

/* ============================================
   LIENS
   ============================================ */
a, a:visited {
    color: var(--primary-light) !important;
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--text) !important;
    text-decoration: none !important;
}

/* ============================================
   HEADER / NAVIGATION
   ============================================ */
.page .tabmenu-out {
    background: rgba(10, 15, 28, 0.95) !important;
    background-image: none !important;
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    height: 50px !important;
}

.page .tabmenu-inner {
    font-size: 1em !important;
    font-weight: 500;
    padding: 12px 15px !important;
}

.page .tabmenu-inner a {
    color: var(--text-muted) !important;
    padding: 10px 16px !important;
    border-radius: 6px;
    transition: all 0.2s ease;
    margin: 0 2px;
}

.page .tabmenu-inner a:hover {
    color: var(--text) !important;
    background: var(--dark-card);
}

.page .tabmenu-inner .selected {
    color: var(--text) !important;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    background-image: none;
    border: none !important;
}

.page .headermenu {
    top: 10px !important;
}

.page .headermenu a {
    color: var(--text-muted) !important;
}

.page .headermenu a:hover {
    color: var(--primary-light) !important;
}

/* ============================================
   CONTENU PRINCIPAL
   ============================================ */
.page .content-out {
    padding-top: 60px !important;
}

.page .content-inner {
    padding: 20px !important;
    max-width: 100%;
    margin: 0;
}

.page .main {
    font-size: 1em !important;
}

/* ============================================
   BOÎTES PRINCIPALES (main-left-box)
   ============================================ */
.main-left-box {
    background: var(--dark-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    margin-bottom: 20px;
}

.main-left-box:hover {
    border-color: var(--border-light) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.main-left-title {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary)) !important;
    color: var(--text) !important;
    padding: 12px 16px !important;
    font-weight: 600 !important;
    font-size: 1.1em;
    letter-spacing: 0.02em;
}

.main-left-inner {
    padding: 16px !important;
    background: transparent !important;
}

.main-left-inner ul {
    margin: 0 !important;
}

.main-left-inner li {
    color: var(--text-muted);
    padding: 8px 0 !important;
    border-bottom: 1px solid var(--border);
    font-size: 0.95em !important;
}

.main-left-inner li:last-child {
    border-bottom: none;
}

/* ============================================
   TABLEAUX
   ============================================ */
table.dataGrid,
table.dataGrid2,
table.reportgrid1 {
    background: var(--dark-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    overflow: hidden;
    border-collapse: separate !important;
    border-spacing: 0;
}

table.dataGrid th,
table.dataGrid2 th,
table.reportgrid1 th {
    background: var(--dark-lighter) !important;
    color: var(--text-muted) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 12px 16px !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8em;
    letter-spacing: 0.05em;
}

table.dataGrid td,
table.dataGrid2 td,
table.reportgrid1 td {
    color: var(--text) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 12px 16px !important;
}

table.dataGrid tbody,
table.dataGrid2 tbody {
    border: none !important;
}

table.dataGrid tr:hover td,
table.dataGrid2 tr:hover td,
.ssrow:hover {
    background: var(--dark-card-hover) !important;
}

table.dataGrid a,
table.dataGrid2 a {
    color: var(--primary-light) !important;
}

table.dataGrid th.tablesorter-headerAsc,
table.dataGrid th.tablesorter-headerDesc,
table.dataGrid2 th.tablesorter-headerAsc,
table.dataGrid2 th.tablesorter-headerDesc {
    color: var(--primary-light) !important;
}

/* Lignes alternées */
table.reportgrid1 tr.odd {
    background: var(--dark-lighter) !important;
}

/* ============================================
   FORMULAIRES
   ============================================ */
input, select, textarea {
    font-family: 'Outfit', sans-serif !important;
}

.main-text-input,
input[type="text"],
input[type="password"],
input[type="email"],
select {
    background: var(--dark-lighter) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    color: var(--text) !important;
    padding: 10px 14px !important;
    font-size: 0.95em;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.main-text-input:focus,
input[type="text"]:focus,
select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--glow) !important;
    outline: none;
}

select {
    cursor: pointer;
}

select option {
    background: var(--dark-card);
    color: var(--text);
}

.main-submit-button,
input[type="submit"],
button {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    border: none !important;
    border-radius: 8px !important;
    color: white !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.main-submit-button:hover,
input[type="submit"]:hover,
button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px var(--glow) !important;
}

/* ============================================
   COULEURS UTILITAIRES
   ============================================ */
.red {
    color: var(--danger) !important;
}

.green {
    color: var(--success) !important;
}

.blue {
    color: var(--primary-light) !important;
}

/* ============================================
   GRAPHIQUES JQPLOT
   ============================================ */
.jqplot-target {
    background: transparent !important;
    color: var(--text-muted);
}

.jqplot-axis {
    color: var(--text-muted) !important;
}

/* ============================================
   FOOTER
   ============================================ */
.page .footer {
    background: var(--dark-lighter) !important;
    color: var(--text-muted) !important;
    border-top: 1px solid var(--border);
    padding: 20px !important;
    margin-top: 40px;
}

/* ============================================
   ÉLÉMENTS DIVERS
   ============================================ */
hr {
    border-color: var(--border) !important;
}

h2 {
    color: var(--text) !important;
}

/* Message pause auto-refresh */
#resume_update_button {
    background: var(--dark-card) !important;
    border: 1px solid var(--warning) !important;
    color: var(--warning) !important;
    border-radius: 8px !important;
}

/* Scrollbar personnalisée */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--dark-lighter);
}

::-webkit-scrollbar-thumb {
    background: var(--primary-dark);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

/* ============================================
   CODE / MONOSPACE
   ============================================ */
code, pre, .monospace,
input[style*="monospace"],
select[style*="monospace"] {
    font-family: 'JetBrains Mono', monospace !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .page .content-inner {
        padding: 10px !important;
    }
    
    .main-left-box {
        border-radius: 8px !important;
    }
    
    table.dataGrid th,
    table.dataGrid td {
        padding: 8px 10px !important;
        font-size: 0.9em;
    }
}

/* ============================================
   FIX DÉBORDEMENT HORIZONTAL
   ============================================ */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

.page, .page .content-out, .page .content-inner {
    max-width: 100%;
    overflow-x: hidden;
}

table {
    max-width: 100%;
    table-layout: auto;
}

.main-left-box {
    max-width: 100%;
    overflow-x: auto;
}

/* ============================================
   FIX TABLEAU POOL STATUS (partie droite)
   ============================================ */
table.dataGrid th,
table.dataGrid td,
table.dataGrid2 th,
table.dataGrid2 td {
    font-size: 0.85em !important;
    padding: 8px 10px !important;
    white-space: nowrap;
}

/* Conteneur scrollable pour grands tableaux */
td[valign="top"] > div,
td[valign="top"] > table {
    max-width: 100%;
    overflow-x: auto;
}

/* Réduire largeur colonnes si nécessaire */
table.dataGrid {
    width: auto !important;
    min-width: 100%;
}

/* ============================================
   FIX CONTENEUR PRINCIPAL - DEUX COLONNES
   ============================================ */
body > .page {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

/* Table principale layout 2 colonnes */
table[cellspacing="20"] {
    width: 100% !important;
    table-layout: fixed !important;
}

table[cellspacing="20"] > tbody > tr > td {
    vertical-align: top;
    overflow: hidden;
}

table[cellspacing="20"] > tbody > tr > td:first-child {
    width: 55% !important;
}

table[cellspacing="20"] > tbody > tr > td:last-child {
    width: 55% !important;
}

/* Tableaux internes scrollables */
.main-left-box {
    overflow-x: auto !important;
}

.main-left-inner {
    overflow-x: auto !important;
}

.main-left-inner table {
    min-width: auto !important;
    font-size: 0.8em;
}

/* ============================================
   FIX LARGEUR LIGNES ALGO (kawpow/all)
   ============================================ */
.ssrow td {
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
}

tr.ssrow {
    width: 100%;
}

/* ============================================
   FORCE CONTENEUR POOL STATUS
   ============================================ */
.main-left-box table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
}

.main-left-box table td,
.main-left-box table th {
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
}

/* ============================================
   FIX TEXTE LIGNES BLANCHES (kawpow/all)
   ============================================ */
.ssrow td {
    color: #333 !important;
}

.ssrow:hover td {
    color: var(--text) !important;
}

.ssselected td {
    color: var(--text) !important;
}

/* ============================================
   FIX LIGNES ALGO AVEC STYLES INLINE
   ============================================ */
tr[onclick*="select_algo"] {
    background-color: var(--dark-lighter) !important;
}

tr[onclick*="select_algo"] td {
    background-color: var(--dark-lighter) !important;
    color: var(--text) !important;
}

tr[onclick*="select_algo"]:hover {
    background-color: var(--dark-card-hover) !important;
}

tr[onclick*="select_algo"]:hover td {
    background-color: var(--dark-card-hover) !important;
}

/* ============================================
   FIX EN-TÊTES TABLEAU POOL STATUS
   ============================================ */
.main-left-box table th {
    white-space: normal !important;
    word-wrap: break-word !important;
    font-size: 0.7em !important;
    padding: 8px 4px !important;
    line-height: 1.2 !important;
}

.main-left-box table td {
    white-space: nowrap;
    font-size: 0.75em !important;
}

/* Permettre scroll horizontal si nécessaire */
.main-left-inner {
    overflow-x: auto !important;
    padding-bottom: 5px !important;
}

/* ============================================
   AUGMENTATION TAILLE TEXTES
   ============================================ */
body {
    font-size: 16px !important;
}

.main-left-box table th {
    font-size: 0.85em !important;
}

.main-left-box table td {
    font-size: 0.9em !important;
}

.main-left-inner {
    font-size: 1em !important;
}

.main-left-inner li {
    font-size: 1em !important;
}

.main-left-title {
    font-size: 1.2em !important;
}

table.dataGrid th,
table.dataGrid2 th {
    font-size: 0.85em !important;
}

table.dataGrid td,
table.dataGrid2 td {
    font-size: 0.9em !important;
}

/* ============================================
   FIX LOGO GITHUB (inverser couleur)
   ============================================ */
.social-icons img[src*="github"] {
    filter: invert(1) brightness(2);
}

/* ============================================
   API PAGE STYLING
   ============================================ */
.main-left-inner p.main-left-box[style*="ffffee"] {
    background: linear-gradient(135deg, #088a63, #0db584) !important;
    color: white !important;
    border-radius: 8px !important;
    padding: 10px 15px !important;
    border: none !important;
}
.main-left-inner p.main-left-box[style*="ffffee"] b {
    color: #ffeb3b !important;
}
.main-left-inner pre.main-left-box[style*="ffffee"] {
    background-color: #1a1a2e !important;
    color: #a0a0a0 !important;
    border-radius: 8px !important;
    padding: 15px !important;
    border: none !important;
    border-left: 4px solid #088a63 !important;
}

/* ============================================
   API PAGE - JSON RESULT BLOCKS
   ============================================ */
.main-left-inner pre {
    background-color: #0d1117 !important;
    color: #7ee787 !important;
    border-radius: 8px !important;
    padding: 15px !important;
    border: none !important;
    border-left: 4px solid #088a63 !important;
    font-family: 'JetBrains Mono', 'Courier New', monospace !important;
    font-size: 0.9em !important;
    overflow-x: auto;
}

/* ============================================
   API PAGE - JSON RESULT BLOCKS (UPDATED)
   ============================================ */
.main-left-inner pre.main-left-box {
    background-color: #1e3a5f !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 15px !important;
    border: none !important;
    border-left: 4px solid #0db584 !important;
    font-family: 'JetBrains Mono', 'Courier New', monospace !important;
    font-size: 0.95em !important;
    overflow-x: auto;
    text-shadow: none !important;
}

/* ============================================
   EXPLORER PAGE - LARGER FONTS
   ============================================ */
.main-left-inner table.dataGrid td,
.main-left-inner table.dataGrid th,
.main-left-inner table.dataGrid2 td,
.main-left-inner table.dataGrid2 th {
    font-size: 0.95em !important;
}
.main-left-inner code,
.main-left-inner .monospace,
.main-left-inner span[style*="monospace"] {
    font-size: 0.95em !important;
}
body[class*="explorer"] .main-left-inner,
#main-content .main-left-inner {
    font-size: 1em !important;
}
/* Explorer specific tables */
table[width="100%"] td,
table[width="100%"] th {
    font-size: 0.95em !important;
    padding: 6px 8px !important;
}

/* ====================================================
   MOBILE REFACTOR - 20 juin 2026
   Design responsive base sur audit DOM mobile (MR.2)
   Periode de declenchement : ecrans <= 768px
   ==================================================== */
@media (max-width: 768px) {

    /* ========== SECURITE GLOBALE ========== */
    body {
        overflow-x: hidden !important;
    }

    /* ========== LAYOUT 2 COLONNES (table cellspacing=20) ========== */
    /* Empiler verticalement les 2 td.
       Neutraliser border-spacing herite de l'attribut HTML cellspacing=20
       qui parasite les marges horizontales en display: block (audit Bug 1). */
    table[cellspacing="20"] {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: auto !important;
        border-spacing: 0 !important;
        border-collapse: collapse !important;
    }

    /* DEMANTELEMENT TABLE EXTERNE (Option 1, audit inner overflow du 20 juin 23:28) :
       table[cellspacing="20"] restait display: table + table-layout: auto, donc la
       colonne etait dimensionnee par le contenu le plus large de la cellule (la table
       How to mine forcee nowrap par Bug 3 Partie A), ce qui etirait la box intro
       hors viewport puis la faisait clipper par body overflow-x hidden. On convertit
       table + tbody + tr en blocs (le td est deja block) pour supprimer tout layout
       de table en mobile : chaque td devient un bloc a 100 pourcent du viewport,
       decouple du contenu de sa voisine. Mobile uniquement, desktop intact. */
    table[cellspacing="20"],
    table[cellspacing="20"] > tbody,
    table[cellspacing="20"] > tbody > tr {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* BUG HOME : override specificite legacy lignes 474-491
       table[cellspacing="20"] > td:first-child / :last-child legacy ont
       width: 55% !important + overflow: hidden (specificite 0,2,4) qui
       battent le td { width: 100% } mobile (specificite 0,1,4) et clippent
       le contenu intro. Override mobile avec specificite egale (0,2,4)
       + position posterieure dans le fichier = mobile gagne, desktop intact. */
    table[cellspacing="20"] > tbody > tr > td:first-child,
    table[cellspacing="20"] > tbody > tr > td:last-child {
        width: 100% !important;
        overflow: visible !important;
    }
    table[cellspacing="20"] > tbody > tr > td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 4px 0 !important;
        vertical-align: top !important;
    }

    /* ========== STATS /stats : table layout des 3 cards (48h / 7j / 30j) ========== */
    /* <table width=100%> avec <td width=33%> x3 + td spacers vides. Pas de
       cellspacing=20, donc NON capturee par le demantelement Option 1 ci-dessus.
       En mobile les 3 td restaient cote a cote a 33 pourcent (~135 px sur 406),
       forcant le texte (Average Hashrate, titres jqplot) a wrapper lettre par lettre.
       Selecteur td[width="33%"] propre a stats/index.php (verifie unique, zero
       collateral). On convertit la table cards + lignes + cellules en blocs 100%,
       exactement comme le demantelement de la table cellspacing=20. Mobile only. */
    table:has(> tbody > tr > td[width="33%"]),
    table:has(> tbody > tr > td[width="33%"]) > tbody,
    table:has(> tbody > tr > td[width="33%"]) > tbody > tr {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    table:has(> tbody > tr > td[width="33%"]) > tbody > tr > td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        vertical-align: top !important;
    }

    /* ========== BOITES CONTAINER (.main-left-box, .main-left-inner) ========== */
    .main-left-box,
    .main-left-inner {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ========== TEXTE NATUREL : wrap normal partout dans les boites ========== */
    .main-left-box p,
    .main-left-box div,
    .main-left-box span,
    .main-left-box li,
    .main-left-inner p,
    .main-left-inner div,
    .main-left-inner span,
    .main-left-inner li {
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal;
    }

    /* ========== TABLES DE DONNEES (Wallet, Pool Status) ========== */
    /* Scroll horizontal interne, NE PAS empiler */
    .dataGrid2,
    #maintable1,
    .dataGrid {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    .dataGrid2 tbody,
    #maintable1 tbody,
    .dataGrid tbody {
        display: table;
        width: 100%;
        min-width: 600px;
    }
    .dataGrid2 thead,
    #maintable1 thead,
    .dataGrid thead {
        display: table;
        width: 100%;
        min-width: 600px;
    }

    /* Masquer les petits logos coin (G dore) dans les cellules des tables data.
       Notre regle img mobile (max-height: 80px) override l'attribut HTML width=10
       de ces logos qui gonflent la hauteur des lignes et desalignent les colonnes.
       Solution : les masquer en mobile, le texte "Gaelium (GAEL)" suffit. */
    img[src*="/images/coin/"] {
        display: none !important;
    }

    /* Neutraliser les regles legacy globales qui cassent les tables data en mobile :
       - .ssrow td { max-width: 80px; ellipsis } (legacy, ligne ~508)
       - .main-left-box table { table-layout: fixed } (legacy, ligne ~523)
       - .main-left-box table td/th { ellipsis } (legacy, ligne ~528)
       Voir audit Bug 3 du 20 juin 2026. */
    .ssrow td {
        max-width: none !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    .main-left-box table td,
    .main-left-box table th {
        max-width: none !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
    }

    .main-left-box table {
        table-layout: auto !important;
    }

    /* === BUG 3 PARTIE B : alignement colonnes ===
       Forcer un contexte de table unique (thead+tbody alignes) UNIQUEMENT pour
       les tables dans .main-left-box et .main-right-box, donc Pool Status et
       Last 50 Blocks specifiquement. NE PAS toucher aux autres .dataGrid2 pour
       eviter la regression home (lecon Bug 2 v1). Le scroll horizontal eventuel
       est gere par les containers .main-left-inner / .main-right-inner. */
    .main-left-box .dataGrid2,
    .main-left-box #maintable1,
    .main-right-box .dataGrid2,
    .main-right-box #maintable1 {
        display: table !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        table-layout: auto !important;
    }

    .main-left-box .dataGrid2 thead,
    .main-left-box .dataGrid2 tbody,
    .main-left-box #maintable1 thead,
    .main-left-box #maintable1 tbody,
    .main-right-box .dataGrid2 thead,
    .main-right-box .dataGrid2 tbody,
    .main-right-box #maintable1 thead,
    .main-right-box #maintable1 tbody {
        display: table-row-group !important;
        width: auto !important;
        min-width: 0 !important;
    }

    .main-left-box .dataGrid2 tr,
    .main-left-box #maintable1 tr,
    .main-right-box .dataGrid2 tr,
    .main-right-box #maintable1 tr {
        display: table-row !important;
    }

    .main-left-box .dataGrid2 td,
    .main-left-box .dataGrid2 th,
    .main-left-box #maintable1 td,
    .main-left-box #maintable1 th,
    .main-right-box .dataGrid2 td,
    .main-right-box .dataGrid2 th,
    .main-right-box #maintable1 td,
    .main-right-box #maintable1 th {
        display: table-cell !important;
    }

    /* === BUG 3 PARTIE C : autoriser wrap sur les en-tetes pour eviter
       le debordement horizontal de la table. Les <th> longs (MINIMUM PAYOUT,
       WORKERS SHARE/SOLO, USERS (ACTIVE)) peuvent wrapper sur 2 lignes.
       Les <td> data gardent nowrap (sinon Gaelium (kawpow) ou les nombres
       se cassent en colonnes inutilisables). */
    .main-left-box .dataGrid2 th,
    .main-left-box #maintable1 th,
    .main-right-box .dataGrid2 th,
    .main-right-box #maintable1 th {
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        line-height: 1.2 !important;
    }

    /* ========== LOGO ET IMAGES ========== */
    /* Le logo Gaelium a un float:right en desktop. On l'annule en mobile.
       Limite max-height pour empecher le logo de devenir gigantesque. */
    img {
        max-width: 100% !important;
        max-height: 80px !important;
        height: auto !important;
        width: auto !important;
        float: none !important;
    }
    .main-left-title img,
    .main-left-box img,
    .main-right-box img {
        float: none !important;
        max-width: 100% !important;
    }

    /* ========== CODE ET COMMANDES MONOSPACE ========== */
    /* Force wrap des longues commandes stratum+tcp:// etc. */
    pre,
    code,
    .stratum-config {
        white-space: pre-wrap !important;
        word-break: break-all !important;
        overflow-wrap: anywhere !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ========== LONGUES URLs et ADDRESSES ========== */
    a {
        word-break: break-all;
        overflow-wrap: anywhere;
    }

    /* ========== MENU DE NAVIGATION : barre fixe en haut, design polish ========== */
    /* Pattern mobile standard : menu fixe en haut, gradient vert, items lisibles
       blanc franc, espacement aere, separation Next Payout, micro-interactions.
       Validation visuelle Olivier 20 juin 2026. */

    .tabmenu-out {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 50px !important;
        background: linear-gradient(180deg, #088a63 0%, #065c42 100%) !important;
        background-color: #088a63 !important;
        z-index: 9999 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
        overflow: visible !important;
        border-bottom: 2px solid rgba(0, 0, 0, 0.2) !important;
    }

    .tabmenu-inner {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        grid-template-rows: repeat(4, auto) !important;
        grid-auto-rows: 0 !important;
        gap: 6px 4px !important;
        padding: 10px 14px 2px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        background: linear-gradient(180deg, #088a63 0%, #065c42 100%) !important;
        background-color: #088a63 !important;
        align-items: center !important;
        justify-items: center !important;
    }

    /* === LIGNE 1 : Brand (logo + Gaelium Pool) centre, pleine largeur === */
    .tabmenu-inner > span:nth-child(1) {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        justify-self: center !important;
    }

    /* === LIGNE 2 : 4 premiers items du menu (Home, Pool, Wallet, Graphs) === */
    .tabmenu-inner > span:nth-child(2) { grid-column: 1; grid-row: 2; }
    .tabmenu-inner > span:nth-child(3) { grid-column: 2; grid-row: 2; }
    .tabmenu-inner > span:nth-child(4) { grid-column: 3; grid-row: 2; }
    .tabmenu-inner > span:nth-child(5) { grid-column: 4; grid-row: 2; }

    /* === LIGNE 3 : 3 derniers items (Miners, API, Explorer) === */
    /* Colonnes distinctes, sans chevauchement des zones tactiles :
       Miners col 1, API cols 2-3 (centre), Explorer col 4. */
    .tabmenu-inner > span:nth-child(6) {
        grid-column: 1 / 2 !important;
        grid-row: 3 !important;
        justify-self: center !important;
        padding: 0 !important;
    }
    .tabmenu-inner > span:nth-child(7) {
        grid-column: 2 / 4 !important;
        grid-row: 3 !important;
        justify-self: center !important;
        padding: 0 !important;
    }
    .tabmenu-inner > span:nth-child(8) {
        grid-column: 4 / 5 !important;
        grid-row: 3 !important;
        justify-self: center !important;
        padding: 0 !important;
    }

    /* === LIGNE 4 : Next Payout (deja stylise via span:last-child) === */
    .tabmenu-inner > span:last-child {
        grid-column: 1 / -1 !important;
        grid-row: 4 !important;
    }

    /* Brand : logo + nom de la pool */
    .tabmenu-inner > span:first-child {
        display: flex !important;
        align-items: center !important;
        color: #ffffff !important;
        font-size: 0.95em !important;
        font-weight: 700 !important;
        margin-right: 14px !important;
        white-space: nowrap !important;
        opacity: 1 !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    }

    .tabmenu-inner > span:first-child img {
        max-height: 30px !important;
        width: auto !important;
        vertical-align: middle !important;
        margin-right: 8px !important;
        float: none !important;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
    }

    /* Items du menu */
    .tabmenu-inner a {
        color: #ffffff !important;
        text-decoration: none !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        white-space: nowrap !important;
        padding: 6px 12px !important;
        margin: 0 !important;
        display: inline-block !important;
        font-size: 0.92em !important;
        font-weight: 600 !important;
        border-radius: 6px !important;
        line-height: 1.5 !important;
        opacity: 1 !important;
        transition: background 0.15s ease, transform 0.1s ease !important;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25) !important;
    }

    .tabmenu-inner a:hover,
    .tabmenu-inner a:active {
        background: rgba(255, 255, 255, 0.18) !important;
        transform: translateY(-1px);
    }

    /* Item selectionne : fond contrastant clair, plus visible */
    .tabmenu-inner a.selected {
        background: rgba(255, 255, 255, 0.25) !important;
        color: #ffffff !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
    }

    /* Annuler les float sur tous les spans */
    .tabmenu-inner > span,
    .tabmenu-inner > span[style*="float"] {
        float: none !important;
    }

    /* Next Payout : pleine largeur, centre, separe du menu principal */
    .tabmenu-inner > span:last-child {
        flex: 1 1 100% !important;
        width: 100% !important;
        text-align: center !important;
        margin: 4px 0 0 0 !important;
        padding: 4px 0 0 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
    }

    .tabmenu-inner #nextpayout {
        color: #ffffff !important;
        font-size: 0.85em !important;
        font-weight: 500 !important;
        opacity: 0.95 !important;
        padding: 2px 0 !important;
        margin: 0 !important;
        display: inline-block !important;
        letter-spacing: 0.3px !important;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3) !important;
    }

    /* Le menu etant fixed, decaler le contenu pour qu'il ne passe pas dessous */
    /* Marge defensive de 195px : menu mobile ~157px (brand + 4 items + 3 items + Next Payout grid) + clearance ~38px */
    body {
        padding-top: 195px !important;
    }

    .content-out,
    #content-out {
        padding-top: 0 !important;
    }

    /* ========== FORMULAIRES (find-miner, register, etc.) ========== */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    textarea,
    select {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

}
/* ==== FIN MOBILE REFACTOR ==== */