:root {
      --sidebar-width: 350px;
      --bg-dark: #f0f2f5;
      --sidebar-bg: #ffffff;
      --card-bg: #ffffff;
      --card-hover: #f8f9fa;
      --card-active: #e9ecef;
      --text-main: #1a1a1a;
      --text-muted: #555;
      --text-dim: #777;
      --accent-color: #008f7a;
      --border-color: #ddd;
      --input-bg: #f1f3f4;
      --header-height: 60px;
      --live-red: #ff3e3e;
      --capsule-bg: #e9ecef;
    }
    body.dark-mode {
      --bg-dark: #0a0a0a;
      --sidebar-bg: #141414;
      --card-bg: #1a1a1a;
      --card-hover: #222;
      --card-active: #1f1f1f;
      --text-main: #ffffff;
      --text-muted: #888;
      --text-dim: #666;
      --accent-color: #00ffcc;
      --border-color: #262626;
      --input-bg: #1f1f1f;
      --capsule-bg: #222;
    }
    body {
      margin: 0; background: var(--bg-dark); color: var(--text-main);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      height: 100vh; overflow: hidden;
    }
    .container { display: flex; height: 100vh; width: 100vw; overflow: hidden; }
    .sidebar {
      width: var(--sidebar-width);
      min-width: var(--sidebar-width);
      background: var(--sidebar-bg);
      display: flex; flex-direction: column;
      border-right: 1px solid var(--border-color);
      z-index: 100;
      transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .container.collapsed .sidebar { margin-left: calc(var(--sidebar-width) * -1); border: none; }
    .open-sidebar-btn {
      position: absolute; left: 15px; top: 10px; z-index: 1000; display: none;
      background: var(--card-bg); border: 1px solid var(--border-color); color: var(--text-main);
      padding: 8px 12px; cursor: pointer; border-radius: 8px; font-size: 1.2rem;
    }
    @media (min-width: 769px) {
        .container.collapsed .open-sidebar-btn { display: block; }
    }
    .sidebar-header {
      padding: 15px 20px; display: flex; align-items: center;
      justify-content: space-between; border-bottom: 1px solid var(--border-color);
      height: var(--header-height);
    }
    .sidebar-header h2 { margin: 0; font-size: 0.8rem; letter-spacing: 2px; color: var(--text-dim); }
    #search {
      margin: 12px; padding: 10px 15px; background: var(--input-bg);
      border: 1px solid var(--border-color); color: var(--text-main);
      border-radius: 10px; outline: none; font-size: 16px;
    }
    #channelList { flex: 1; overflow-y: auto; padding: 12px; }
    .channel {
      background: var(--card-bg); border-radius: 15px; padding: 15px;
      margin-bottom: 12px; cursor: pointer; border: 1px solid var(--border-color);
      transition: all 0.2s; position: relative;
    }
    .channel:hover { background: var(--card-hover); }
    .channel.active-match { border-color: var(--accent-color); background: var(--card-active); }
    .match-row { display: flex; align-items: center; justify-content: space-between; margin: 12px 0; pointer-events: none; }
    .team-box { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; width: 35%; }
    .logo-frame { width: 42px; height: 42px; background: var(--capsule-bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
    .team-logo { width: 70%; height: 70%; object-fit: contain; }
    .team-name { font-size: 0.75rem; font-weight: bold; text-align: center; min-height: 14px; }
    .vs-capsule { background: var(--capsule-bg); padding: 8px 12px; border-radius: 10px; min-width: 90px; text-align: center; }
    .start-time-text { color: var(--accent-color); font-weight: 900; font-family: monospace; font-size: 14px; }
    .countdown-mini { font-size: 11px; color: var(--text-muted); font-family: monospace; margin-top: 2px; }
    .live-score-text { font-size: 18px; font-weight: 900; font-family: monospace; letter-spacing: 1px; }
    .badge { font-size: 9px; padding: 3px 7px; border-radius: 4px; font-weight: bold; text-transform: uppercase; }
    .badge-live { background: var(--live-red); color: white; animation: blink 1.5s infinite; }
    .badge-finished { background: var(--border-color); color: var(--text-muted); }
    .badge-upcoming { background: var(--capsule-bg); color: var(--accent-color); }
    .badge-syncing { background: var(--border-color); color: var(--text-dim); }
    .badge-postponed { background: #ffa502; color: #000; }
    .links-container {
      display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px;
      border-top: 1px solid var(--border-color); padding-top: 10px; justify-content: center;
    }
    .stream-link {
      font-size: 11px; font-weight: bold; color: var(--accent-color);
      padding: 5px 10px; border-radius: 6px; background: rgba(0, 255, 204, 0.08);
      border: 1px solid transparent; transition: all 0.2s;
    }
    .stream-link:hover, .stream-link.active-link { background: var(--accent-color); color: #000; }
    .playerArea { flex: 1; background: #000; display: flex; flex-direction: column; min-width: 0; }
    .player-header {
      padding: 0 15px; height: var(--header-height);
      background: var(--sidebar-bg); border-bottom: 1px solid var(--border-color);
      display: flex; align-items: center; gap: 12px;
    }
    #nowPlaying {
      font-size: 0.85rem; font-weight: 600; color: var(--accent-color);
      flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    #videoContainer { display: grid; gap: 4px; flex: 1; background: #000; padding: 4px; min-height: 0; }
    .grid-1 { grid-template-columns: 1fr; }
    .grid-2 { grid-template-columns: 1fr 1fr; }
    .grid-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr !important; }
    .grid-6 { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr !important; }
    .video-slot { position: relative; background: #0a0a0a; border: 2px solid #222; display: flex; align-items: center; justify-content: center; overflow: hidden; transition: border-color 0.2s; }
    .video-slot.drag-over { border-color: var(--accent-color); }
    .drag-handle {
      position: absolute; top: 0; left: 0; width: 100%; height: 15px;
      z-index: 1000; cursor: grab; background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);
      display: flex; justify-content: center; padding-top: 5px;
    }
    .drag-handle::before { content: "⠿"; color: rgba(255,255,255,0.8); font-size: 20px; }
   
    body.is-dragging iframe, body.is-dragging video { pointer-events: none !important; }
    .slot-label {
      position: absolute; top: 5px; left: 10px; background: rgba(0,0,0,0.7); color: #fff; padding: 0px 2px;
      font-size: 11px; z-index: 1005; border-radius: 4px; max-width: 50%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; pointer-events: none;
    }
    .slot-controls { position: absolute; top: 5px; right: 5px; display: flex; gap: 6px; z-index: 1010; opacity: 0; transition: opacity 0.2s; }
    .video-slot:hover .slot-controls { opacity: 1; }
    .slot-btn { width: 15px; height: 15px; border-radius: 4px; border: none; cursor: pointer; color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; }
    .remove-btn { background: var(--live-red); }
    .refresh-slot-btn { background: #444; }
    #backToMenuBtn { display: none; background: var(--input-bg); border: 1px solid var(--border-color); color: var(--text-main); padding: 8px 12px; border-radius: 8px; cursor: pointer; }
   
    .yt-placeholder {
      width: 100%; height: 100%; background-size: cover; background-position: center;
      display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative;
    }
    .yt-placeholder iframe { width: 100%; height: 100%; border: none; }
    .play-button-overlay {
      width: 68px; height: 48px; background: rgba(33, 33, 33, 0.8); border-radius: 12px;
      color: white; display: flex; align-items: center; justify-content: center; font-size: 24px;
      transition: background 0.2s cubic-bezier(0, 0, 0.2, 1);
    }
    .yt-placeholder:hover .play-button-overlay { background: #ff0000; }
    .highlight-link {
      background: #ff0000 !important; color: white !important;
      padding: 3px 10px !important; border-radius: 5px; font-weight: bold;
      animation: pulse 2s infinite;
    }
    @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
    @media (max-width: 768px) {
      .sidebar { width: 100%; min-width: 100%; position: absolute; left: 0; top: 0; bottom: 0; transition: transform 0.3s; z-index: 200; }
      .container.player-active .sidebar { transform: translateX(-100%); }
      .container.player-active #backToMenuBtn { display: block; }
      .container.player-active #layoutSelect { display: none; }
      .playerArea { width: 100%; }
      .slot-label, .drag-handle { display: none !important; }
      .close-sidebar-btn {display: none !important;} /* Hide the sidebar close button on mobile */
      #videoContainer iframe,
      #videoContainer video {
        height: 50vh;
        width: 100%;
      }
    }
    iframe, video { width: 100%; height: 100%; border: none; background: #000; display: block; }
    .view-selector { background: var(--input-bg); color: var(--text-main); border: 1px solid var(--border-color); padding: 8px 20px; border-radius: 10px; font-size: 12px; cursor: pointer; }
    .skeleton { background: linear-gradient(to right, var(--capsule-bg) 8%, var(--border-color) 18%, var(--capsule-bg) 33%); background-size: 800px 104px; animation: shimmer 1.5s linear infinite forwards; }
    @keyframes shimmer { 0% { background-position: -468px 0; } 100% { background-position: 468px 0; } }
    .sk-text { height: 12px; width: 60px; border-radius: 4px; display: inline-block; }
    .sk-circle { border-radius: 50% !important; }
    @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
   
/* Hide loader by default (Desktop) */
.mobile-only-loader {
  display: none; !important;
}

/* Show loader only on Mobile */
@media (max-width: 768px) {
  .mobile-only-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    color: var(--text-main);
  }
  .spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--border-color);
    border-top: 4px solid var(--accent-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
  }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* Mobile Stream Switcher Bar */
.mobile-stream-bar {
    display: none; /* Hidden by default */
}
@media (max-width: 768px) {
    .mobile-stream-bar {
        display: flex;
        justify-content: center;
        gap: 10px;
        background: #1a1a1a;
        padding: 0px;
        overflow-x: auto;
        border-bottom: 0px solid var(--border-color);
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1020;
    }
   
    .mobile-stream-bar span {
        font-size: 12px;
        font-weight: bold;
        color: var(--accent-color);
        padding: 4px 12px;
        background: rgba(0, 255, 204, 0.1);
        border-radius: 4px;
        white-space: nowrap;
    }
    /* Push video down slightly so the bar doesn't cover the top of the video */
    .container.player-active .video-slot iframe,
    .container.player-active .video-slot video {
        padding-top: 35px;
    }
}

@media (max-width: 768px) {
  /* Hide Stream 1, Stream 2, … but keep Highlights */
  .links-container .stream-link:not(.highlight-link) {
    display: none !important;
  }

  /* Keep the container visible when it has a Highlights button */
  .links-container {
    display: flex !important;
  }

  /* Optional: if the only children were stream links, container can collapse */
  .links-container:not(:has(.highlight-link)) {
    display: none !important;
  }
}




/* PIN TO TOP */
.pin-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
  margin-left: 2px;
  opacity: 0.55;
  transition: opacity 0.15s, transform 0.15s;
  line-height: 1;
  color: var(--text-muted);
}

.pin-btn:hover {
  opacity: 1;
  transform: scale(1.15);
}

.pin-btn.pinned {
  opacity: 1;
  color: #f59e0b; /* amber/gold color */
}



/* Date selector */

/* ===== DATE NAVIGATOR ===== */
.date-navigator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  user-select: none;
}

.date-nav-btn {
  background: var(--input-bg, #f3f4f6);
  border: 1px solid var(--border-color, #d1d5db);
  color: var(--text-main, #111);
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.date-nav-btn:hover:not(:disabled) {
  background: var(--accent-color, #3b82f6);
  border-color: var(--accent-color, #3b82f6);
  color: #fff;
}

.date-nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.date-label {
  min-width: 110px;
  text-align: center;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  color: var(--text-main, #111);
  transition: background 0.15s;
}

.date-label:hover {
  background: rgba(0,0,0,0.05);
}

/* Dark mode overrides */
body.dark-mode .date-nav-btn {
  background: var(--input-bg, #2a2a2a);
  border-color: var(--border-color, #444);
  color: var(--text-main, #fff);
}

body.dark-mode .date-label {
  color: var(--text-main, #fff);
}

body.dark-mode .date-label:hover {
  background: rgba(255,255,255,0.08);
}

/* ===== Desktop / Mobile visibility ===== */
@media (min-width: 769px) {
  .player-header .date-navigator { display: flex; }
  .sidebar .date-navigator { display: none !important; }
}

@media (max-width: 768px) {
  .player-header .date-navigator { display: none !important; }

  .sidebar .date-navigator {
    display: flex !important;
    justify-content: center;
    gap: 12px;
    margin: 12px 10px 16px;
    padding: 10px 12px;
    background: var(--input-bg, #f3f4f6);
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 12px;
  }

  body.dark-mode .sidebar .date-navigator {
    background: var(--input-bg, #1e1e1e);
    border-color: var(--border-color, #333);
  }

  .sidebar .date-nav-btn {
    width: 42px;
    height: 42px;
    font-size: 22px;
    border-radius: 10px;
  }

  .sidebar .date-label {
    min-width: 140px;
    font-size: 15px;
  }
}



.date-label-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;         
  height: 30px;
  cursor: pointer;
  overflow: visible;         /* important – don’t clip the picker */
}

.date-label-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.01;        
  cursor: pointer;
  border: none;
  background: transparent;
  z-index: 5;
  font-size: 16px;  
}

.date-label-text {
  pointer-events: none;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-main, #111);
  padding: 0 6px;
  z-index: 1;
  white-space: nowrap;
}

body.dark-mode .date-label-text {
  color: var(--text-main, #fff);
}

/* Mobile larger version */
@media (max-width: 768px) {
  .sidebar .date-label-wrapper {
    min-width: 150px;
    height: 42px;
  }
  .sidebar .date-label-text {
    font-size: 15px;
  }
}


#loadingOverlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg-main, #fff);
}

body.dark-mode #loadingOverlay {
  background: var(--bg-main, #111);
}





/* ===== SIDEBAR HEADER LAYOUT (mobile) ===== */
@media (max-width: 768px) {
  .sidebar-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
  }

  .sidebar-header h2 {
    flex: 1 1 100%;          /* title takes full first row */
    margin: 0 0 4px 0;
    font-size: 15px;
  }

  /* Date navigator – second row, left side */
  .sidebar-header .date-navigator {
    display: flex !important;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 4px 6px;
    background: var(--input-bg, #f3f4f6);
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 8px;
    flex: 1 1 auto;          /* takes remaining space */
  }

  body.dark-mode .sidebar-header .date-navigator {
    background: var(--input-bg, #2a2a2a);
    border-color: var(--border-color, #444);
  }

  /* Smaller buttons for the header */
  .sidebar-header .date-nav-btn {
    width: 60px;
    height: 30px;
    font-size: 16px;
    border-radius: 6px;
    flex-shrink: 0;
  }

  .sidebar-header .date-label-wrapper {
    min-width: 90px;
    height: 30px;
  }

  .sidebar-header .date-label-text {
    font-size: 13px;
    padding: 0 4px;
  }

  /* Theme + close buttons stay on the right */
  .sidebar-header > div:last-child {
    display: flex;
    gap: 6px;
    margin-left: auto;       /* push to the right */
  }

  .sidebar-header > div:last-child button {
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Keep desktop version unchanged */
@media (min-width: 769px) {
  .sidebar-header .date-navigator {
    display: none !important;
  }
}