/* public/mobile/mobile.css — tumma, kompaktit rivit, full-screen menu, Betfair-tyyliset napit */

/* Piilota dropChart menu valikosta - ei poisteta, vaan piilotetaan */
@media (max-width: 768px) {
  .m-card[data-slug="dropChart"] {
    display: none !important;
  }
}

/* DropChart meta mobiilissa - kaksi päällekäistä laatikkoa */
@media (max-width: 768px) {
  #dropChart .meta {
    font-size: 10px !important;
    padding: 6px !important;
  }
  
  /* Mobiili laatikot */
  #dropChart .meta-mobile {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }
  
  #dropChart .meta-box {
    border: 1px solid var(--border) !important;
    border-radius: 4px !important;
    background: var(--panel) !important;
    padding: 4px !important;
  }
  
  #dropChart .meta-head-mobile {
    display: grid !important;
    font-size: 7px !important;
    color: var(--muted) !important;
    margin-bottom: 3px !important;
    font-weight: 600 !important;
    border-bottom: 1px solid var(--border) !important;
    padding-bottom: 2px !important;
    gap: 3px !important;
  }
  
  /* Ensimmäinen laatikko: At | Δ (abs) | Δ % | From | To */
  #dropChart .meta-box:first-child .meta-head-mobile {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr !important;
  }
  
  /* Toinen laatikko: Event | Market | Side | Line | Period */
  #dropChart .meta-box:last-child .meta-head-mobile {
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr !important;
  }
  
  #dropChart .meta-row-mobile {
    display: grid !important;
    gap: 3px !important;
    align-items: center !important;
    font-size: 8px !important;
  }
  
  /* Ensimmäinen laatikko: At | Δ (abs) | Δ % | From | To */
  #dropChart .meta-box:first-child .meta-row-mobile {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr !important;
  }
  
  /* Toinen laatikko: Event | Market | Side | Line | Period */
  #dropChart .meta-box:last-child .meta-row-mobile {
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr !important;
  }
  
  #dropChart .meta-row-mobile > span {
    padding: 1px 2px !important;
    text-align: center !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  
  #dropChart .meta-row-mobile .mono {
    font-size: 7px !important;
  }
  
  #dropChart .meta-row-mobile .fromto {
    gap: 1px !important;
  }
  
  #dropChart .meta-row-mobile .fromto .odd-pill {
    min-width: 12px !important;
    height: 8px !important;
    font-size: 4px !important;
    padding: 0px 1px !important;
    line-height: 1 !important;
    margin: 0 !important;
  }
  
  #dropChart .meta-row-mobile .fromto {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1px !important;
    overflow: hidden !important;
  }
  
  /* Desktop formaatti piiloon mobiilissa */
  #dropChart .meta-head,
  #dropChart .meta-row {
    display: none !important;
  }
}
:root{
  --bg:#0f0f10; --panel:#111214; --panel-2:#17191c; --text:#e7e7e7; --muted:#a7adb3; --border:#262a30;
  --topbar:48px;

  /* Betfair-tyyliset napit */
  --bf-login-1:#dddddd; --bf-login-2:#d2d2d2; --bf-login-border:#bdbdbd; --bf-login-text:#000;
  --bf-join-1:#3d3d3d;  --bf-join-2:#2f2f2f;  --bf-join-border:#1f1f1f;  --bf-join-text:#f5f5f5;
}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:13px/1.35 ui-monospace,SFMono-Regular,Menlo,Monaco,monospace}
body.is-mobile{overflow:hidden}

/* Topbar */
.m-topbar{
  position:fixed; inset:0 0 auto 0; height:var(--topbar);
  display:flex; align-items:center; justify-content:space-between;
  background:var(--panel);
  border-bottom:1px solid var(--border); z-index:20; padding:0 8px;
}
.m-left{display:flex;align-items:center;gap:8px}
.m-logo{width:28px;height:28px;border-radius:6px;background:#000;display:grid;place-items:center;
  font-weight:800;color:#fff;letter-spacing:.3px}
.m-key{min-width:28px;height:28px;border-radius:6px;border:1px solid var(--border);background:#1a1c20;color:#fff;
  font-weight:800;letter-spacing:.4px;cursor:pointer}
.m-key:hover{filter:brightness(1.06)}

.m-auth{display:flex;gap:8px}
.m-btn{padding:6px 10px;border-radius:8px;font-weight:600;line-height:1;border:1px solid var(--border);cursor:pointer}
.m-btn--login{
  background:linear-gradient(180deg,var(--bf-login-1),var(--bf-login-2));
  border-color:var(--bf-login-border); color:var(--bf-login-text);
}
.m-btn--primary{
  background:linear-gradient(180deg,var(--bf-join-1),var(--bf-join-2));
  border-color:var(--bf-join-border); color:var(--bf-join-text);
}

/* Full-screen drawer (no effects) */
.m-drawer{ position:fixed; top:var(--topbar); left:0; right:0; bottom:0; background:var(--panel); display:none; z-index:19; }
.m-drawer.open{ display:block; }
.m-drawer-inner{ height:100%; display:flex; flex-direction:column; padding:12px; gap:10px; }
.m-brand{ font-weight:800; font-size:18px; letter-spacing:.5px; }

.m-menu{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.m-menu a{
  display:block; padding:14px 12px; border:1px solid var(--border); border-radius:10px;
  background:var(--panel-2); color:var(--text); text-decoration:none;
}
.m-menu a:hover{ filter:brightness(1.06); }
.m-menu-key{ font-weight:800; font-size:12px; opacity:.85; }
.m-menu-main{ font-weight:800; font-size:16px; margin-top:2px; }
.m-menu-sub{ color:var(--muted); font-size:12px; margin-top:2px; }

/* Screen content edge-to-edge (poistaa “harmaan laatikon” tunnetta) */
.m-screen{ position:fixed; top:var(--topbar); bottom:0; left:0; right:0; overflow:auto; padding:0; }

/* Virhepaneeli + loader */
.m-err{margin:12px;padding:12px;border-radius:12px;background:#2b1212;border:1px solid #5f1f1f;color:#ffb8b8;white-space:pre-wrap;overflow:auto;max-height:40vh}
.m-loading{padding:16px;color:var(--muted)}

/* Kevyt mobiiliwrapper (ei paneelitaustaa) */
.m-widget{ padding:0; }

/* News-widgetin tiiviimpi look */
#news .listHeader{ padding:0 8px 4px 8px; }
#news .newsItem{ padding:6px 8px; margin-bottom:4px; }
#news .headline{ font-size:13.5px; }
#news .newsItem .date, #news .newsItem .time{ font-size:12.5px; }

/* Positive EV Bets mobiiliversio */
#value .scroller{ 
  overflow-x:auto !important; 
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  width:100% !important;
}
#value table{ 
  min-width:1400px !important; /* paljon leveämpi taulukko */
  font-size:10px !important; /* vielä pienempi fontti */
  width:max-content !important;
}
#value th, #value td{ 
  padding:3px 4px !important; /* hyvin pieni padding */
  min-width:50px !important; /* hyvin kapeat sarakkeet */
  white-space:nowrap !important;
  font-size:10px !important;
}
#value th:first-child, #value td:first-child{ 
  min-width:50px !important; /* Event-sarake 50px */
  width:50px !important; /* Pakota leveys */
  max-width:50px !important; /* Estä laajeneminen */
  white-space:nowrap !important; /* Yksi rivi */
  overflow:hidden !important; /* Piilota ylivuotava teksti */
  text-overflow:ellipsis !important; /* ... jos teksti katkeaa */
}
#value th:nth-child(2), #value td:nth-child(2){ 
  min-width:50px !important; /* Side-sarake 50px */
  width:50px !important; /* Pakota leveys */
  max-width:50px !important; /* Estä laajeneminen */
  white-space:nowrap !important; /* Yksi rivi */
  overflow:hidden !important; /* Piilota ylivuotava teksti */
  text-overflow:ellipsis !important; /* ... jos teksti katkeaa */
}
#value .chip{ 
  min-height:18px !important; padding:1px 3px !important; font-size:9px !important; /* hyvin pienet chipit */
}
#value .book-tag{ 
  height:18px !important; padding:0 4px !important; font-size:9px !important; /* hyvin pienet book-tagit */
}

/* Ylikirjoita value.js:n CSS mobiilissa */
#value table{ 
  min-width:1400px !important; 
  font-size:9px !important; /* Vielä pienempi fontti */
  width:max-content !important;
}
#value th,#value td{ 
  padding:2px 3px !important; /* Vielä pienempi padding */
  font-size:9px !important; /* Vielä pienempi fontti */
  min-width:50px !important;
  width:50px !important; /* Pakota kaikki sarakkeet 50px leveiksi */
  max-width:50px !important; /* Estä laajeneminen */
  white-space:nowrap !important; /* Yksi rivi */
  overflow:hidden !important; /* Piilota ylivuotava teksti */
  text-overflow:ellipsis !important; /* ... jos teksti katkeaa */
}
#value .chip{ 
  min-height:16px !important; /* Vielä pienempi korkeus */
  padding:1px 2px !important; /* Vielä pienempi padding */
  font-size:8px !important; /* Vielä pienempi fontti */
}
#value .chip .value{ 
  font-size:9px !important; /* Vielä pienempi fontti */
}
#value .book-tag{ 
  height:16px !important; /* Vielä pienempi korkeus */
  padding:0 2px !important; /* Vielä pienempi padding */
  font-size:8px !important; /* Vielä pienempi fontti */
  max-width:80px !important; /* Kapeampi max-leveys */
}

/* Estä zoomaus popup-ikkunoissa */
.modal input, .modal textarea, .modal select {
  font-size: 16px !important; /* Estää iOS:n automaattisen zoomauksen */
}

/* Estä zoomaus kaikissa input-kentissä */
input, textarea, select {
  font-size: 16px !important; /* Estää iOS:n automaattisen zoomauksen */
}

/* Varmista että arbitrage modal input-kentät eivät zoomaa */
#arbModal input[type="number"], #arbModal input[type="text"] {
  font-size: 16px !important; /* Estää zoomauksen */
}

/* Positive EV Bets taulukko mobiiliversio - 50px sarakkeet ja keskitetty */
#value table {
  width: 100% !important; /* Koko näytön leveys */
  table-layout: fixed !important; /* Pakota sarakkeiden leveydet */
}

/* Kaikki sarakkeet 50px leveitä */
#value th, #value td {
  width: 50px !important; /* Kiinteä 50px leveys */
  min-width: 50px !important;
  max-width: 50px !important;
  padding: 2px 1px !important; /* Minimaalinen padding */
  font-size: 9px !important; /* Pieni fontti */
  white-space: nowrap !important; /* Ei rivitystä */
  overflow: hidden !important; /* Piilota ylivuotava */
  text-overflow: ellipsis !important; /* ... jos teksti katkeaa */
  text-align: center !important; /* Keskitetty teksti */
}

/* Middle Bets taulukko mobiiliversio */
#middle table {
  width: 100% !important; /* Koko näytön leveys */
  table-layout: fixed !important; /* Pakota sarakkeiden leveydet */
}

/* Middle Bets sarakkeet - Event automaattinen, muut kapeat */
#middle th:first-child, #middle td:first-child {
  width: 50px !important; /* Percent sarake kapea */
  min-width: 50px !important;
  max-width: 50px !important;
  padding: 2px 1px !important;
  font-size: 9px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: center !important;
}

#middle th:nth-child(2), #middle td:nth-child(2) {
  width: auto !important; /* Event sarake automaattinen leveys */
  min-width: 120px !important;
  max-width: none !important;
  padding: 2px 4px !important;
  font-size: 9px !important;
  white-space: normal !important; /* Salli monirivinen teksti */
  overflow: visible !important;
  text-overflow: unset !important;
  text-align: left !important;
}

#middle th:nth-child(3), #middle td:nth-child(3) {
  width: 50px !important; /* Mkt sarake kapea */
  min-width: 50px !important;
  max-width: 50px !important;
  padding: 2px 1px !important;
  font-size: 9px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: center !important;
}

#middle th:nth-child(4), #middle td:nth-child(4) {
  width: auto !important; /* Bet & Books sarake automaattinen leveys */
  min-width: 200px !important;
  max-width: none !important;
  padding: 2px 4px !important;
  font-size: 9px !important;
  white-space: normal !important; /* Salli monirivinen teksti */
  overflow: visible !important;
  text-overflow: unset !important;
  text-align: left !important;
}

/* Arbitrage mobiiliversio - Event-sarake automaattinen leveys */
#arb table {
  width: 100% !important; /* Koko näytön leveys */
  table-layout: fixed !important; /* Pakota sarakkeiden leveydet */
}
/* Event-sarake automaattinen leveys, muut kapeat */
#arb th:first-child, #arb td:first-child {
  width: auto !important; /* Automaattinen leveys */
  min-width: 120px !important; /* Vähintään 120px */
  max-width: none !important; /* Ei maksimileveyttä */
  padding: 2px 4px !important;
  font-size: 9px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Muut sarakkeet kapeat */
#arb th:not(:first-child), #arb td:not(:first-child) {
  width: 60px !important; /* Kapeat sarakkeet */
  min-width: 60px !important;
  max-width: 60px !important;
  padding: 2px 1px !important;
  font-size: 9px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Chipit mukautuvat sarakkeen kokoon */
#arb .chip {
  width: 100% !important; /* Koko sarakkeen leveys */
  max-width: 100% !important;
  min-width: 0 !important;
  --chip-w: 100% !important;
  --chip-h: 20px !important;
  height: 20px !important;
  padding: 1px 2px !important;
  font-size: 7px !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  border-radius: 0 !important; /* Neliömäiset */
}

#arb .chip .label {
  font-size: 6px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

#arb .chip .value {
  font-size: 7px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  margin-top: 1px !important;
}


/* Droppers taulukko mobiiliversio */
@media (max-width: 768px) {
  #drop table {
    width: 100% !important; /* Koko näytön leveys */
    table-layout: fixed !important; /* Pakota sarakkeiden leveydet */
  }

  /* Droppers sarakkeet - oletus 50px */
  #drop th, #drop td {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    padding: 2px 1px !important;
    font-size: 9px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
  }

  /* JavaScript hoitaa kolumnien uudelleenjärjestämisen mobiilissa */

  /* From → To pillit pienemmät */
  #drop .fromto {
    gap: 2px !important;
  }

  #drop .fromto .odd-pill {
    min-width: 25px !important;
    height: 16px !important;
    font-size: 8px !important;
  }

  /* Droppers row layout */
  #drop .row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    margin-bottom: 8px !important;
  }

  /* Droppers status siirretään rivien alle */
  #drop .stat {
    font-size: 10px !important;
    padding: 2px 6px !important;
    margin-top: 4px !important;
    order: 1 !important; /* Siirretään rivien alle */
  }

  /* JavaScript hoitaa status siirron rivien alle */

  /* JavaScript hoitaa 10m/search piilottamisen ja Q nappi lisäämisen */
}

/* Middle modal mobiiliversio - pienemmät pinnit ja fontit */
#midModal .panel {
  width: min(95vw, 400px) !important; /* Kapeampi mobiilissa */
  padding: 12px !important; /* Pienempi padding */
}

#midModal .grid {
  gap: 6px !important; /* Pienempi väli */
  margin-top: 4px !important;
}

#midModal .card {
  padding: 6px !important; /* Pienempi padding */
  border-radius: 8px !important; /* Pienempi pyöristys */
}

#midModal .row {
  gap: 4px !important; /* Pienempi väli */
  margin-top: 4px !important;
}

#midModal label {
  font-size: 10px !important; /* Pienempi label fontti */
}

#midModal input {
  padding: 6px !important; /* Pienempi input padding */
  font-size: 16px !important; /* Estää zoomauksen mobiilissa */
  border-radius: 6px !important; /* Pienempi pyöristys */
}

#midModal .sum {
  gap: 8px !important; /* Pienempi väli */
  margin-top: 8px !important;
  padding-top: 6px !important;
}

#midModal .kv .k {
  font-size: 10px !important; /* Pienempi k fontti */
}

#midModal .kv .v {
  font-size: 14px !important; /* Pienempi v fontti */
  margin-top: 1px !important;
}

#midModal .actions {
  gap: 6px !important; /* Pienempi väli */
  margin-top: 10px !important;
}

#midModal .btn {
  padding: 8px 10px !important; /* Pienempi nappi padding */
  font-size: 12px !important; /* Pienempi nappi fontti */
  border-radius: 6px !important; /* Pienempi pyöristys */
}

/* Arbitrage modal mobiiliversio - pienemmät pinnit ja fontit */
#arbModal .panel {
  width: min(95vw, 400px) !important; /* Kapeampi mobiilissa */
  padding: 12px !important; /* Pienempi padding */
}

#arbModal .grid {
  gap: 6px !important; /* Pienempi väli */
  margin-top: 4px !important;
}

#arbModal .card {
  padding: 6px !important; /* Pienempi padding */
  border-radius: 8px !important; /* Pienempi pyöristys */
}

#arbModal .bet-btn {
  padding: 3px 6px !important; /* Vielä pienempi Bet Now nappi */
  font-size: 8px !important; /* Vielä pienempi fontti */
  top: 2px !important;
  right: 2px !important;
  min-width: 40px !important; /* Vähintään 40px leveys */
  text-align: center !important;
}

#arbModal .row {
  gap: 4px !important; /* Pienempi väli */
  margin-top: 4px !important;
}

#arbModal label {
  font-size: 10px !important; /* Pienempi label fontti */
}

#arbModal input {
  padding: 6px !important; /* Pienempi input padding */
  font-size: 16px !important; /* Estää zoomauksen mobiilissa */
  border-radius: 6px !important; /* Pienempi pyöristys */
}

#arbModal .role {
  gap: 4px !important; /* Pienempi väli */
  margin-top: 4px !important;
}

#arbModal .role input {
  width: auto !important;
}

#arbModal .sum {
  gap: 8px !important; /* Pienempi väli */
  margin-top: 8px !important;
  padding-top: 6px !important;
}

#arbModal .kv .k {
  font-size: 10px !important; /* Pienempi k fontti */
}

#arbModal .kv .v {
  font-size: 14px !important; /* Pienempi v fontti */
  margin-top: 1px !important;
}

#arbModal .actions {
  gap: 6px !important; /* Pienempi väli */
  margin-top: 10px !important;
}

#arbModal .btn {
  padding: 8px 10px !important; /* Pienempi nappi padding */
  font-size: 12px !important; /* Pienempi nappi fontti */
  border-radius: 6px !important; /* Pienempi pyöristys */
}

/* Ohut skrolli */
::-webkit-scrollbar{height:8px;width:8px}
::-webkit-scrollbar-thumb{background:#2f3237;border-radius:8px}
::-webkit-scrollbar-track{background:transparent}