/* ui/assets/responsive.css
   Mobile-first overrides for WOI
   Works with theme.css + style.css
*/

/* =========================================================
   Visibility helpers
========================================================= */
.desktop-only { display: block; }
.mobile-only  { display: none; }

@media (max-width: 992px) {

  /* =========================================================
     Swap desktop / mobile views
  ========================================================= */
  .desktop-only { display: none; }
  .mobile-only  { display: block; }

  /* =========================================================
     Container & layout tightening
  ========================================================= */
  .woi-shell{
    padding: 10px 10px 70px 10px;
  }

  .woi-controls{
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .woi-status{
    margin-left: 0;
    font-size: 12px;
  }

  /* =========================================================
     Touch targets (prevent iOS zoom)
  ========================================================= */
  button,
  .woi-btn,
  .btn-icon,
  input,
  select{
    min-height: 44px;
    font-size: 16px;
  }

  /* =========================================================
     Dropdown height override
  ========================================================= */
  .Select-control{
    min-height: 44px !important;
    height: 44px !important;
  }
  .Select-placeholder,
  .Select--single > .Select-control .Select-value{
    line-height: 44px !important;
  }

  /* =========================================================
     Market overview (single column)
  ========================================================= */
  .mkt-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .mkt-card{ width: 100% !important; }
  .mkt-fig{ height: 180px !important; }

  /* =========================================================
     Ticker tape (compact)
  ========================================================= */
  .ticker-area{
    margin: 8px 10px 0 10px;
    padding: 8px 10px;
  }
  .ticker-wrap{ height: 30px; }
  .ticker{ height: 30px; animation-duration: 14s; }
  .ticker-item{
    font-size: 12px;
    padding: 3px 8px;
  }

  /* =========================================================
     DataTable horizontal scroll safety
  ========================================================= */
  .dash-table-container{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* =========================================================
     Overlays (tight mobile layout)
  ========================================================= */
  .overlaybox{ margin-bottom: 8px; }

  .overlays-checklist{
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px 6px !important;
  }

  .overlays-checklist label{
    margin-right: 6px !important;
    margin-bottom: 0 !important;
    line-height: 1.05 !important;
    font-size: 13px;
  }

  .overlays-checklist input[type="checkbox"]{
    margin-right: 4px !important;
    transform: scale(1.0);
  }

  /* =========================================================
     Fibo buttons (compact)
  ========================================================= */
  .fibo-row{
    margin-left: 0 !important;
    margin-top: 6px;
    gap: 6px !important;
  }

  .fibo-row button{
    min-height: 24px !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
    border-radius: 14px !important;
  }

  #btn-fibo-a,
  #btn-fibo-b,
  #btn-fibo-clear{
    min-height: 28px !important;
    height: 28px !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
    border-radius: 12px !important;
    line-height: 1 !important;
  }

  #fibo-status{
    font-size: 12px !important;
  }

  /* =========================================================
     Mobile card list (replaces DataTable)
  ========================================================= */
  .mobile-table{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 6px 0;
  }

  /* =========================================================
     ✅ NORMAL SCREENER CARDS (mob-card) — ANDROID/WINDOWS FIX
     Sorun: iOS Safari kartları doğru gösteriyor ama Android/Windows
     default button styles yüzünden kartlar beyaz kalabiliyor.
     Çözüm: mob-card'ı tamamen theme-variable ile boyayıp
     default appearance'ı sıfırlıyoruz.
  ========================================================= */

  /* Base: catch both button/div cases */
  .mob-card{
    width: 100% !important;
    text-align: left;
    border-radius: 16px !important;
    padding: 12px 12px !important;
    cursor: pointer;

    /* kill default button UI */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    /* ✅ theme-aware card look */
    background: var(--card) !important;
    border: 1px solid var(--border2) !important;

    /* ✅ force readable text */
    color: var(--fg) !important;
    -webkit-text-fill-color: var(--fg) !important;

    /* small polish */
    box-shadow: 0 6px 22px rgba(0,0,0,0.22);
  }

  /* If mob-card is actually a <button>, remove default background highlight */
  .mob-card:focus,
  .mob-card:active{
    outline: none !important;
    filter: brightness(1.02);
  }

  /* Inherit text color for all child nodes (Android sometimes overrides) */
  .mob-card *{
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
  }

  /* Dark / Light explicitly (catch both #app-root and body usage) */
  #app-root.theme-dark .mob-card,
  body.theme-dark .mob-card{
    background: rgba(255,255,255,0.04) !important;   /* biraz daha “cam” */
    border-color: rgba(255,255,255,0.10) !important;
  }

  #app-root.theme-light .mob-card,
  body.theme-light .mob-card{
    background: rgba(10,20,28,0.03) !important;
    border-color: rgba(10,20,28,0.14) !important;
    box-shadow: 0 8px 22px rgba(10,20,28,0.10);
  }

  /* Optional: tiny separators inside card (if your mob-card uses these classnames) */
  .mob-card .mob-card-top,
  .mob-card .mob-card-mid,
  .mob-card .mob-card-bottom{
    width: 100%;
  }

  /* =========================================================
     Mobile card (mcard) – keep (watchlist/other)
  ========================================================= */
  .mcard{
    width: 100%;
    text-align: left;
    border-radius: 14px;
    padding: 12px;
    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;

    background: var(--card) !important;
    border: 1px solid var(--border2) !important;

    color: var(--fg) !important;
    -webkit-text-fill-color: var(--fg) !important;
  }

  .mcard *{
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
  }

  #app-root.theme-dark .mcard,
  body.theme-dark .mcard{
    background: var(--card) !important;
    border-color: rgba(255,255,255,0.10) !important;
  }

  #app-root.theme-light .mcard,
  body.theme-light .mcard{
    background: var(--card) !important;
    border-color: rgba(10,20,28,0.14) !important;
  }

  /* =========================================================
     Card content (legacy mcard layout)
  ========================================================= */
  .mrow1{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
  }

  .msym{
    font-weight: 900;
    font-size: 16px;
  }

  .mscore{
    opacity: 0.8;
    font-size: 13px;
  }

  .mrow2{
    margin-top: 6px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
  }

  .mmeta{
    opacity: 0.85;
    font-size: 13px;
  }

  .mval{
    font-weight: 900;
    font-size: 13px;
  }
  .mval.pos{ color: #00ff9a; }
  .mval.neg{ color: #ff4d6d; }
  .mval.neutral{ opacity: 0.75; }

  .mbadges{
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .mbadge{
    font-size: 11px;
    font-weight: 900;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.14);
    opacity: 0.95;
  }

  .mbadge.good{ color: #00ff9a; }
  .mbadge.bad{ color: #ff4d6d; }

}

/* Guides — mobile card layout fix */
@media (max-width: 768px) {
  .guide-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .guide-thumb-wrap {
    width: 100% !important;
    max-width: 100% !important;
  }

  .guide-thumb {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
    border-radius: 10px;
  }
}/* Guides — mobile card layout fix */
@media (max-width: 768px) {
  .guide-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .guide-thumb-wrap {
    width: 100% !important;
    max-width: 100% !important;
  }

  .guide-thumb {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
    border-radius: 10px;
  }
}

/* =========================
   WOI_GUIDES_FIX_V4
   - mobile overlap fix for /guides cards
   ========================= */

/* hard lock dark background */
html, body { background:#0b0f14 !important; color:#e8eef6 !important; }
img { max-width:100% !important; height:auto !important; display:block !important; }

/* /guides outer wrapper uses inline max-width:980px... target it safely */
@media (max-width: 860px){
  div[style*="max-width:980px"][style*="margin:0 auto"] div[style*="display:grid"][style*="repeat(2"]{
    grid-template-columns: 1fr !important;
  }
}

/* card row is inline flex -> stack on mobile */
@media (max-width: 720px){
  div[style*="max-width:980px"][style*="margin:0 auto"] div[style*="display:flex"][style*="gap:12px"]{
    flex-direction: column !important;
  }

  /* thumb wrapper in your HTML is flex:0 0 170px;max-width:170px;  */
  div[style*="flex:0 0 170px"][style*="max-width:170px"]{
    max-width: 100% !important;
    width: 100% !important;
    flex: 0 0 auto !important;
  }
}

/* =========================
   WOI_GUIDES_FIX_V4
   - mobile overlap fix for /guides cards
   ========================= */

html, body { background:#0b0f14 !important; color:#e8eef6 !important; }
img { max-width:100% !important; height:auto !important; display:block !important; }

@media (max-width: 860px){
  div[style*="max-width:980px"][style*="margin:0 auto"] div[style*="display:grid"][style*="repeat(2"]{
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 720px){
  div[style*="max-width:980px"][style*="margin:0 auto"] div[style*="display:flex"][style*="gap:12px"]{
    flex-direction: column !important;
  }
  div[style*="flex:0 0 170px"][style*="max-width:170px"]{
    max-width: 100% !important;
    width: 100% !important;
    flex: 0 0 auto !important;
  }
}


/* =========================
   WOI_GUIDES_RESP_V1
   - Only overrides guides on smaller screens
   - Keeps your V4 overlap fix, but adds "desktop vs mobile" structure
   ========================= */

/* On tablet+mobile we ensure guide images don't look tiny or overflow */
@media (max-width: 1023px){
  img[src*="/assets/guides/"],
  img[src*="/assets/guide_"]{
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
  }
}

/* Mobile: stack any inline-flex card rows in /guides and make thumbs full width */
@media (max-width: 720px){
  /* guides wrapper has inline max-width:980px; target within it */
  div[style*="max-width:980px"][style*="margin:0 auto"] div[style*="display:flex"][style*="gap:12px"]{
    flex-direction: column !important;
  }

  /* thumb wrapper in HTML: flex:0 0 170px;max-width:170px; */
  div[style*="flex:0 0 170px"][style*="max-width:170px"]{
    max-width: 100% !important;
    width: 100% !important;
    flex: 0 0 auto !important;
  }
}

/* Tablet: if 2-column grid exists, force 1 column earlier to avoid squeeze */
@media (max-width: 860px){
  div[style*="max-width:980px"][style*="margin:0 auto"] div[style*="display:grid"][style*="repeat(2"]{
    grid-template-columns: 1fr !important;
  }
}