/* =========================
   SANTROVISION RESPONSIVE CORE
   TV → LAPTOP → MOBILE (CLEAN)
========================= */

/* =========================
   GLOBAL SAFETY FIX
========================= */
*{
  box-sizing:border-box;
}

html, body{
  width:100%;
  height:100%;
  overflow:hidden;
}

/* =========================
   LARGE TV SCREENS (DEFAULT)
   1200px+
========================= */
@media (min-width:1200px){

  #main-layout{
    grid-template-columns:1.8fr 1fr;
    gap:14px;
    padding:14px;
  }

  #channelGrid{
    grid-template-columns:repeat(6, 1fr);
  }

  #player-box{
    height:100%;
  }

  #statusBox,
  #watermark,
  #brandTicker{
    font-size:13px;
  }
}

/* =========================
   LAPTOP / MEDIUM SCREEN
   769px - 1199px
========================= */
@media (min-width:769px) and (max-width:1199px){

  #main-layout{
    grid-template-columns:1.6fr 1fr;
  }

  #channelGrid{
    grid-template-columns:repeat(4, 1fr);
  }

  #searchInput{
    width:180px;
  }

  #player-controls button,
  #player-controls select{
    font-size:13px;
    padding:9px 12px;
  }
}

/* =========================
   TABLET MODE
   600px - 768px
========================= */
@media (min-width:600px) and (max-width:768px){

  body{
    overflow:auto;
  }

  #main-layout{
    grid-template-columns:1fr;
    height:auto;
  }

  #player-section{
    order:1;
  }

  #sidebar{
    order:2;
  }

  #channelGrid{
    grid-template-columns:repeat(3, 1fr);
  }

  #searchInput{
    width:140px;
  }

  #player-box{
    height:320px;
  }
}

/* =========================
   MOBILE SMALL
   0 - 599px
========================= */
@media (max-width:599px){

  body{
    overflow:auto;
  }

  #main-layout{
    grid-template-columns:1fr;
    padding:8px;
    gap:10px;
  }

  #channelGrid{
    grid-template-columns:repeat(3, 1fr);
    gap:8px;
  }

  .channel-card{
    height:60px;
    font-size:11px;
    border-radius:12px;
  }

  #searchInput{
    width:120px;
    font-size:12px;
  }

  #player-box{
    height:260px;
    border-radius:14px;
  }

  #player-controls{
    justify-content:center;
  }

  #player-controls button,
  #player-controls select{
    padding:8px 10px;
    font-size:12px;
  }

  #statusBox{
    font-size:11px;
    padding:6px 10px;
  }

  #watermark,
  #brandTicker{
    font-size:11px;
  }
}

/* =========================
   ULTRA WIDE SCREENS (4K+)
========================= */
@media (min-width:1800px){

  #main-layout{
    max-width:1600px;
    margin:0 auto;
  }

  #channelGrid{
    grid-template-columns:repeat(7, 1fr);
  }

  .channel-card{
    height:80px;
    font-size:13px;
  }

  #player-box{
    border-radius:24px;
  }
}

/* =========================
   TV SAFE AREA FIX
   (for smart TVs)
========================= */
@media (min-width:1200px){

  body{
    padding:0;
    margin:0;
  }

  #app{
    padding:10px;
  }
}

/* =========================
   NO SCROLL LOCK FIX (OPTIONAL MODE)
========================= */
.scrollable{
  overflow:auto !important;
}

/* =========================
   ORIENTATION FIX (MOBILE LANDSCAPE)
========================= */
@media (max-height:500px) and (orientation:landscape){

  #player-box{
    height:220px;
  }

  #channelGrid{
    grid-template-columns:repeat(5, 1fr);
  }
}