/* ==========================================================================
   Trading Bot — styles.css (v30)
   - Thème sombre
   - Layout 2 colonnes (blocs plus larges, centrés)
   - Boutons segmentés (paper/live, USDT/EUR) sobres
   - Responsive MacBook / ultra-wide / mobile
   - Styles login conservés
   ========================================================================== */

/* Reset & base */
* { box-sizing: border-box }
html, body { height: 100% }
html { font-size: 16px }
body{
  margin: 0;
  font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  background: #0f141a;
  color: #e6e8eb;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Variables */
:root{
  --bg-1:#0f141a;
  --bg-2:#141b23;
  --card:#161f28;
  --card-2:#1b2732;
  --text:#e6e8eb;
  --muted:#9aa3ab;
  --accent:#66b2ff;
  --accent-soft:rgba(102,178,255,.15);
  --ok:#76e38e;
  --warn:#ffd166;
  --err:#ff6b6b;
  --shadow:rgba(0,0,0,.35);
  --border:rgba(255,255,255,.06);
  --input-bg:#0f141a;
  --space:1.35rem;
  --space-row:8px;
}

/* Utils */
.hidden{display:none!important}
.center{text-align:center}
.mt-8{margin-top:8px}
.mt-12{margin-top:12px}
.mt-16{margin-top:16px}
.mt-20{margin-top:20px}
.w-full{width:100%}
.num{font-variant-numeric:tabular-nums}

/* Segmented controls (paper/live, USDT/EUR) */
.seg{
  display:inline-flex;
  flex-wrap:nowrap;
  padding:2px;
  border-radius:999px;
  background:rgba(4,9,16,.98);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 0 0 1px rgba(2,6,23,.7),0 6px 14px rgba(0,0,0,.6);
}

@media (max-width: 980px){
  .seg{flex-wrap:wrap; max-width:100%}
  .seg button{padding:4px 10px}
}
.seg button{
  appearance:none;
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:.8rem;
  padding:4px 12px;
  border-radius:999px;
  cursor:pointer;
  font-weight:600;
  letter-spacing:.02em;
}
.seg button:hover{
  background:rgba(148,163,184,.08);
}
.seg button.active{
  background:var(--accent-soft);
  color:#e5f2ff;
  box-shadow:0 0 0 1px rgba(56,189,248,.35),0 8px 18px rgba(15,23,42,.7);
}
.seg button.mode-live{
  color:#fecaca;
}
.seg button.mode-live.active{
  background:rgba(248,113,113,.16);
  color:#fee2e2;
  box-shadow:0 0 0 1px rgba(127,29,29,.65),0 8px 20px rgba(127,29,29,.9);
}

/* Topbar */
.topbar{
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 12px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 8px var(--shadow);
  font-size: .92rem;
}
.topbar span{
  color:var(--muted);
}
.topbar strong{
  color:var(--text);
  font-weight:600;
}
.topbar .btn{
  margin-left:auto;
}

/* Buttons */
.btn{
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 6px 14px;
  background: var(--accent);
  color: #02111f;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration:none;
}
.btn:hover{background:#7bbdff}
.btn:disabled{opacity:.6;cursor:default}
.seg button:disabled{opacity:.45;cursor:not-allowed}

.btn-ghost{
  appearance:none;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(6,13,20,.9);
  color:var(--text);
  padding:8px 12px;
  font-size:.9rem;
  cursor:pointer;
  font-weight:600;
}
.btn-danger{
  appearance:none;
  border-radius:999px;
  border:0;
  background:#0d3a24;
  color:#c4f2dc;
  padding:8px 14px;
  font-size:.9rem;
  font-weight:700;
  cursor:pointer;
}

/* Layout principal (2 colonnes, blocs larges et centrés) */
.app main.grid{
  max-width: 1320px;
  margin: calc(var(--space) + 4px) auto 48px auto;
  display: grid;
  grid-template-columns: minmax(0,0.8fr) minmax(0,1.2fr);
  gap: var(--space);
  padding: 0 18px;
}
.grid-col{
  display:flex;
  flex-direction:column;
  gap:var(--space);
}

/* Cards */
.card{
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 20px;
  box-shadow: 0 6px 18px var(--shadow);
}

.sep{
  border: none;
  border-top: 1px solid rgba(255,255,255,0.10);
  margin: 12px 0;
}
.card h2{
  margin:0 0 10px;
  font-size:1rem;
  font-weight:700;
  letter-spacing:.2px;
}
.card h3{
  margin:10px 0 6px;
  font-size:.95rem;
  font-weight:700;
  color:#cdd3d9;
}
.card .row{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:14px;
  padding: var(--space-row) 0;
  border-bottom: 1px dashed rgba(255,255,255,.04);
}
.card .row:last-child{
  border-bottom:0;
}
.card .row span{
  color:var(--muted);
  font-size:.93rem;
}
.card .row strong{
  color:var(--text);
  font-variant-numeric:tabular-nums;
  font-weight:600;
}
.card .caption{
  margin-top:8px;
  font-size:.8rem;
  color:var(--muted);
}

/* Hover ligne */
.card .row:hover{
  background: linear-gradient(90deg,rgba(255,255,255,.02),rgba(255,255,255,0));
  border-bottom-color: rgba(255,255,255,.07);
}

/* Table générique */
.table-wrap{
  margin-top: 8px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.06);
  /* Important: ne pas laisser un tableau "pousser" toute la page (scroll horizontal global).
     On autorise un scroll interne si vraiment nécessaire. */
  overflow: auto;
  max-width: 100%;
}
.tbl{
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
}
.tbl thead{
  background:#151e27;
}
.tbl th,
.tbl td{
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  text-align: left;
}
.tbl th{
  color:#a7b3be;
  font-weight:600;
}
.tbl td{
  color:#d3dae1;
}
.tbl tbody tr:nth-child(odd){
  background:rgba(18,26,36,1);
}
.tbl tbody tr:nth-child(even){
  background:rgba(21,30,40,1);
}
.tbl tbody tr:hover{
  background:rgba(46,97,158,.45);
}

/* ================== TRADES PAGE ==================
   Objectif: page lisible sur laptop (éviter scroll horizontal),
   et scroll vertical interne quand les listes grandissent.
   ------------------------------------------------- */

/* Événements: header fixe + tbody scrollable */
#evt-table{
  table-layout: fixed;
}
#evt-table thead,
#evt-table tbody tr{
  display: table;
  width: 100%;
  table-layout: fixed;
}
#evt-table tbody{
  display: block;
  max-height: 360px;
  overflow-y: auto;
}

/* Positions récentes: idem, avec un peu plus de hauteur */
#recent-table{
  table-layout: fixed;
}
#recent-table thead,
#recent-table tbody tr{
  display: table;
  width: 100%;
  table-layout: fixed;
}
#recent-table tbody{
  display: block;
  max-height: 420px;
  overflow-y: auto;
}

/* Réduire les débordements: ellipsis par défaut */
#evt-table th, #evt-table td,
#recent-table th, #recent-table td{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* La colonne "Event" et "Reason" peuvent s'étaler (hauteur, pas largeur) */
#evt-table td:nth-child(5),
#recent-table td:nth-child(9){
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: break-word;
}

/* Largeurs cibles pour tenir sur écran portable */
#evt-table th:nth-child(1){width: 24%}
#evt-table th:nth-child(2){width: 12%}
#evt-table th:nth-child(3){width: 14%}
#evt-table th:nth-child(4){width: 14%}
#evt-table th:nth-child(5){width: 36%}

/* Positions récentes: largeurs relatives (somme = 100%) */
#recent-table th:nth-child(1){width: 6%}
#recent-table th:nth-child(2){width: 16%}
#recent-table th:nth-child(3){width: 16%}
#recent-table th:nth-child(4){width: 10%}
#recent-table th:nth-child(5){width: 8%}
#recent-table th:nth-child(6){width: 10%}
#recent-table th:nth-child(7){width: 10%}
#recent-table th:nth-child(8){width: 8%}
#recent-table th:nth-child(9){width: 16%}


/* Colonnes univers (10 colonnes) */
#uni-table{
  table-layout: fixed;
}

#uni-table col.sym{width:14%}
#uni-table col.last{width:12%}
#uni-table col.var1h,
#uni-table col.var24h{width:8%}

#uni-table col.hi1h,
#uni-table col.lo1h,
#uni-table col.hi24h,
#uni-table col.lo24h{width:10%}

#uni-table col.vol1h,
#uni-table col.vol24h{width:10%}

/* Wallet balances: tbody scrollable */
#wallet-balances thead,
#wallet-balances tbody tr{
  display: table;
  width: 100%;
  table-layout: fixed;
}
#wallet-balances tbody{
  display: block;
  max-height: 400px;
  overflow-y: auto;
}

/* Trades page: rendre les grandes tables "laptop-friendly"
   - pas de scroll horizontal global
   - scroll vertical interne quand la liste est longue
   - colonnes shrinkables + ellipsis pour éviter l'explosion en largeur */
#evt-table,
#recent-table{
  table-layout: fixed;
}

#evt-table thead,
#evt-table tbody tr,
#recent-table thead,
#recent-table tbody tr{
  display: table;
  width: 100%;
  table-layout: fixed;
}

#evt-table tbody{
  display: block;
  max-height: 360px;
  overflow-y: auto;
}
#recent-table tbody{
  display: block;
  max-height: 420px;
  overflow-y: auto;
}

#evt-table th, #evt-table td,
#recent-table th, #recent-table td{
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Evénements: on laisse "Event" s'étaler sur 2 lignes si besoin */
#evt-table td:nth-child(5){
  white-space: normal;
  overflow: visible;
}

/* Positions récentes: on évite les largeurs fixes (px) qui rendent le bloc trop étroit en 2 colonnes */
#recent-table td:nth-child(9){
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: break-word;
}

@media (max-width: 1280px){
  /* Sur laptop, on garde tout lisible en cachant la colonne ID (rarement utile au scan) */
  #recent-table th:nth-child(1),
  #recent-table td:nth-child(1){
    display:none;
  }
}

/* Range headroom */
.range-wrap{
  display:flex;
  align-items:center;
  gap:10px;
}
input[type="range"]{
  -webkit-appearance:none;
  width:200px;
  height:4px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  outline:none;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--accent);
  border:0;
  cursor:pointer;
}
input[type="range"]::-moz-range-thumb{
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--accent);
  border:0;
  cursor:pointer;
}
.value-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:2px 8px;
  border-radius:999px;
  background:rgba(5,12,20,.9);
  border:1px solid rgba(255,255,255,.08);
  color:#dce7f2;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}

/* Toasts & modal */
.toast-wrap{
  position:fixed;
  right:16px;
  bottom:16px;
  display:flex;
  flex-direction:column;
  gap:8px;
  z-index:1000;
}
.toast{
  min-width:220px;
  max-width:360px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(102,178,255,.4);
  background:#101924;
  display:flex;
  align-items:center;
  gap:10px;
  animation:toast-in .2s ease-out;
  font-size:.82rem;
}
.toast.ok{
  background:rgba(34,197,94,.12);
  color:#a7f3d0;
  border-color:rgba(34,197,94,.25);
}
.toast.err{
  background:rgba(239,68,68,.12);
  color:#fecaca;
  border-color:rgba(239,68,68,.25);
}
@keyframes toast-in{
  from{transform:translateY(8px);opacity:0}
  to{transform:translateY(0);opacity:1}
}

.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:1001;
}
.modal-backdrop.open{
  display:flex;
}
.modal{
  width:clamp(300px,90vw,420px);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 20px 60px var(--shadow);
  padding:16px 16px 12px;
}
.modal h3{
  margin:0 0 8px;
  font-size:1rem;
  font-weight:800;
}
.modal p{
  margin:0 0 12px;
  color:var(--muted);
}
.modal .hint{
  margin-top:6px;
  font-size:.85rem;
  color:#ffd166;
}
.modal-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:6px;
}

/* Tooltips */
.tip{
  position:relative;
  cursor:help;
}
.tip::after{
  content:attr(data-tip);
  position:absolute;
  left:0;
  top:100%;
  transform:translateY(8px);
  min-width:220px;
  max-width:340px;
  background:#0c1117;
  color:#d7dce2;
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 10px 24px var(--shadow);
  padding:8px 10px;
  opacity:0;
  pointer-events:none;
  transition:opacity .12s ease,transform .12s ease;
  z-index:20;
  font-size:.88rem;
  line-height:1.25rem;
  white-space:normal;
  font-weight:500;
}
.tip:hover::after{
  opacity:1;
  transform:translateY(4px);
}

/* Responsive layout */
@media (max-width:1200px){
  .app main.grid{
    grid-template-columns: minmax(0,1fr);
  }
}
@media (max-width:900px){
  .app main.grid{
    grid-template-columns: 1fr;
    margin: calc(var(--space) + 2px) 0 48px 0;
  }
}

/* Focus */
:focus-visible{
  outline:2px solid rgba(102,178,255,.6);
  outline-offset:2px;
}

/* ================== LOGIN PAGE ==================
   (body.login-body)
   ===============================================*/

.login-body{
  background: radial-gradient(1200px 800px at 20% -10%, #1b2732 0%, rgba(27,39,50,0) 60%), #0f141a;
  color: var(--text);
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
}
.login-wrap{
  width: min(420px, 92vw);
}
.login-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 16px 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,.55);
}
.login-title{
  margin: 0 0 12px 0;
  font-size: 1.25rem;
  font-weight: 800;
}
.login-alert{
  display: none;
  background: rgba(239,68,68,.12);
  border: 1px solid rgba(239,68,68,.4);
  border-radius: 10px;
  padding: 6px 8px;
  font-size: .86rem;
  color: #fecaca;
  margin-bottom: 8px;
}
.login-label{
  font-size: .86rem;
  color: var(--muted);
}
.login-input{
  width: 100%;
  margin-top: 4px;
  padding: 7px 9px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: #141b23;
  color: var(--text);
  font-size: .9rem;
}
.login-input:focus-visible{
  outline: 2px solid rgba(102,178,255,.6);
  outline-offset: 1px;
}
.login-btn{
  margin-top: 12px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 0;
  background: var(--accent);
  color: #02111f;
  padding: 7px 12px;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
}
.login-muted{
  color: var(--muted);
  font-size: .9rem;
}

/* Empêche toute barre de scroll horizontale sur la page de login */
.login-body,
.login-wrap,
.login-card{
  overflow-x: hidden;
}

/* ================== MENU + LARGE SCREENS ================== */

/* Menu principal */
.main-nav{
  display:flex;
  gap:8px;
  padding:8px 18px 0;
  max-width:1480px;
  margin:0 auto;
}
.nav-link{
  border:1px solid var(--border);
  background:var(--bg-2);
  color:var(--muted);
  border-radius:999px;
  padding:6px 16px;
  font-size:.9rem;
  cursor:pointer;
  font-weight:600;
  text-decoration:none;
}
.nav-link.nav-active{
  background:var(--accent);
  color:#02111f;
  border-color:transparent;
}

/* Ultra-wide desktop (ex: 3440x1440) */
@media (min-width:1900px){
  .app main.grid{
    max-width:1760px;
  }
}

/* Desktop standard (MacBook Air 13", 1400–1899px) */
@media (min-width:1400px) and (max-width:1899px){
  .app main.grid{
    max-width:1500px;
  }
}

/* Téléphones (<= 600px) */
@media (max-width:600px){
  .topbar{
    padding:10px;
    flex-wrap:wrap;
    gap:8px;
    justify-content:flex-start;
  }
  .topbar span{
    font-size:.8rem;
  }
  .topbar .btn{
    width:100%;
    justify-content:center;
    text-align:center;
    margin-left:0;
  }
  .app main.grid{
    padding:0 12px;
    margin:16px 0 32px 0;
  }
  .card{
    padding:12px 14px;
    border-radius:12px;
  }
  .card .row{
    grid-template-columns: 1fr;
  }
  table.tbl th,
  table.tbl td{
    padding:4px 6px;
    font-size:.8rem;
  }
  .main-nav{
    padding:8px 12px 0;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .nav-link{
    white-space:nowrap;
    font-size:.85rem;
    padding:5px 10px;
  }
}

/* ============================= */
/*   Mise en page Marchés        */
/* ============================= */

body.app.markets-page main.main-markets {
    max-width: 1980px;      /* largeur réelle du bloc */
    margin: 30px auto 80px; /* espace sous les onglets + espace bas */
    padding: 0 32px;        /* marge intérieure gauche/droite */
    display: block;
}

/* Décoller encore plus si tu veux */
body.app.markets-page nav.main-nav {
    margin-bottom: 20px;
}



/* ===========================================================
   Badges (quota + fraîcheur)
   - b-green  : OK
   - b-orange : attention
   - b-red    : proche du plafond / stale
   =========================================================== */
.badge{
  display:inline-block;
  min-width:3.2em;
  text-align:center;
  font-size:0.78rem;
  line-height:1.2;
  padding:.16rem .48rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(230,232,235,.92);
  vertical-align:middle;
}
.badge.b-muted{
  opacity:.65;
}
.badge.b-green{
  background: rgba(46, 204, 113, .14);
  border-color: rgba(46, 204, 113, .35);
  color: rgba(220, 255, 236, .96);
}
.badge.b-orange{
  background: rgba(241, 196, 15, .14);
  border-color: rgba(241, 196, 15, .38);
  color: rgba(255, 247, 214, .98);
}
.badge.b-red{
  background: rgba(231, 76, 60, .14);
  border-color: rgba(231, 76, 60, .42);
  color: rgba(255, 227, 223, .98);
}

/* ---- FIX: colonnes fees univers (maker/taker/effective) ---- */
/* assure le scroll horizontal si écran étroit */
.table-wrap { overflow-x: auto; }

#uni-table { table-layout: fixed; min-width: 1550px; }

#uni-table th, #uni-table td{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Largeurs : ajuste si besoin */
#uni-table col.symbol { width: 110px; }
#uni-table col.fee_maker,
#uni-table col.fee_taker,
#uni-table col.fee_eff { width: 95px; }

#uni-table col.price { width: 140px; }
#uni-table col.var_1h,
#uni-table col.var_24h { width: 90px; }

#uni-table col.high_1h,
#uni-table col.low_1h,
#uni-table col.high_24h,
#uni-table col.low_24h { width: 120px; }

#uni-table col.vol_1h,
#uni-table col.vol_24h { width: 160px; }
/* ---- /FIX ---- */


/* Inputs */
.inp{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);color:#e6e8eb;border-radius:12px;padding:10px 12px;outline:none;}
.inp:focus{border-color:rgba(255,255,255,.25);}