/* Base theme tokens */
:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#0f172a;
  --subtle:#667085;
  --border:#e5e7eb;
  --primary:#2563eb;
  --primary-ink:#fff;
  --hover:#f2f4f7;
  --shadow:0 2px 10px rgba(0,0,0,0.05);
}
body.dark{
  --bg:#0b1220;
  --card:#0f172a;
  --text:#e5e7eb;
  --subtle:#9aa4b2;
  --border:#1f2a44;
  --primary:#60a5fa;
  --primary-ink:#0b1220;
  --hover:#0d1a2f;
  --shadow:0 2px 10px rgba(0,0,0,0.25);
}

/* Base */
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  padding: 20px;
  background: var(--bg);
  color: var(--text);
}

h1 { text-align: center; margin-bottom: 20px; }

/* Narrow layout (800px centered) */
body.narrow-layout #table-container,
body.narrow-layout #controls,
body.narrow-layout #search-container {
  max-width: 1500px;
  margin: 0 auto 12px auto;
}
body.narrow-layout #search-container { margin-bottom: 15px; }

/* Containers */
#table-container { overflow-x: auto; }

#search-container,
#controls{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px 14px;
  box-shadow:var(--shadow);
}

#search-container {
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.search-left { display: flex; align-items: center; gap: 12px; }

#controls {
  margin-bottom: 12px;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.left-controls { display: flex; align-items: center; gap: 20px; }
.right-controls {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: right;
}

/* Meta text */
#last-updated, #thumb-status, #video-count { color: var(--subtle); }

/* Inputs & Buttons */
#searchInput {
  padding: 10px 12px;
  font-size: 16px;
  width: 40%;
  min-width: 320px;
  background: var(--card);
  color: var(--text);
  border-radius: 10px;
  outline: none;

  /* Gradient border */
  border: 3px solid transparent;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image:
    linear-gradient(var(--card), var(--card)),
    linear-gradient(45deg, #7e5bef, #3b82f6, #9333ea, #2563eb);
  background-size: 100% 100%, 300% 300%;
  animation: borderGradient 12s ease infinite;
}
@keyframes borderGradient {
  0% { background-position: 0% 50%, 0% 50%; }
  50% { background-position: 0% 50%, 100% 50%; }
  100% { background-position: 0% 50%, 0% 50%; }
}
#searchInput:focus{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.15); }

#minDuration, #minViews, #videoType {
  padding: 10px 12px;
  font-size: 14px;
  width: 160px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  border-radius:10px;
  outline:none;
}
#minDuration:focus, #minViews:focus, #videoType:focus {
  border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.15);
}

#loadAllBtn, #loadMoreBtn {
  background:var(--primary);
  color:var(--primary-ink);
  border:none;
  border-radius:10px;
  padding:10px 16px;
  font-weight:600;
  cursor:pointer;
  transition:transform .06s ease, opacity .2s ease;
}
#loadAllBtn:hover, #loadMoreBtn:hover{ opacity:.9; }
#loadAllBtn:active, #loadMoreBtn:active{ transform:translateY(1px); }

/* Table */
table {
  border-collapse: collapse;
  width: 100%;
  background: var(--card);
  box-shadow: var(--shadow);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  table-layout: auto; /* dynamic columns */
}

th, td {
  padding: 12px 14px;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
  word-wrap: break-word;
}

thead th{
  position: sticky;
  top: 0;
  background: #fbfbfd; /* light mode header */
  z-index: 1;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

/* Zebra striping & hover */
tbody tr:nth-child(even) { background-color: rgba(0,0,0,0.02); }
body.dark tbody tr:nth-child(even) { background-color: rgba(255,255,255,0.04); }
tbody tr:hover { background: var(--hover); }
body.dark tbody tr:hover { background: #273548; }

/* Links */
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Load more */
#load-more-container { text-align: center; margin-top: 20px; }

/* Scroll to top button */
#scrollTopBtn {
  position: fixed;
  bottom: 22px; right: 22px; z-index: 999;
  background: var(--primary); color: var(--primary-ink);
  border: none; padding: 10px 14px; border-radius: 2%;
  font-size: 18px; cursor: pointer; display: none; box-shadow: var(--shadow);
  transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.3s ease;
}
#scrollTopBtn:hover { opacity: .9; transform: scale(1.05); }

/* Toggle switches */
.switch { display:inline-flex; align-items:center; gap:8px; user-select:none; cursor:pointer; }
.switch .switch-label { font-size:14px; color: var(--subtle); }
body.dark .switch .switch-label { color: var(--text); }
.switch input { position:absolute; opacity:0; pointer-events:none; }
.switch .slider {
  position:relative; width:46px; height:26px; border-radius:999px;
  background:var(--border); transition:background .2s ease; box-shadow: inset 0 1px 3px rgba(0,0,0,.08);
}
.switch .slider::after {
  content:""; position:absolute; top:3px; left:3px; width:20px; height:20px;
  border-radius:50%; background:var(--card); box-shadow:0 1px 4px rgba(0,0,0,.2);
  transition: transform .2s ease;
}
.switch input:checked + .slider { background: var(--primary); }
.switch input:checked + .slider::after { transform: translateX(20px); }

/* Dark mode table readability */
body.dark thead th { background: #1e293b; color: var(--text); }
body.dark tbody td { color: var(--text); }
body.dark table, body.dark th, body.dark td { border-color: #233147; }

/* Top-right bits + header area (kept for parity) */
.last-updated-top {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 14px;
  color: var(--subtle);
}
body.dark .last-updated-top {
  color: var(--text);
  opacity: 0.8;
}
.logo-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  position: relative;
}
.logo-header img { max-width: 280px; height: auto; display: block; }
.logo-text { font-size: 1rem; font-weight: 400; color: var(--text); }


.sponsor-text,
.sponsor-right {
  text-align: center;
  font-size: 14px;
  color: var(--subtle);
  margin-bottom: 15px;
}
.sponsor-text a,
.sponsor-right a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}
.sponsor-text a:hover,
.sponsor-right a:hover { text-decoration: underline; }
body.dark .sponsor-text,
body.dark .sponsor-right { color: var(--text); opacity: 0.85; }

.sponsor-right { align-self: center; margin-bottom: 0; }


/* Inputs & Buttons */
#minVideos, #minViews, #channelType {
  padding: 10px 12px;
  font-size: 14px;
  width: 160px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  border-radius: 10px;
  outline: none;
}
#minVideos:focus, #minViews:focus, #channelType:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}


/* --- Column width tuning --- */
th.col-channel_type, td.col-channel_type {
  min-width: 160px;
  white-space: nowrap;       /* keep on one line */
}

th.col-created, td.col-created {
  min-width: 120px;
  white-space: nowrap;       /* keep on one line */
}

th.col-description, td.col-description {
  width: 38%;                /* trim description a bit */
  max-width: 680px;          /* keep it from sprawling on wide screens */
  white-space: normal;       /* allow wrapping */
  word-break: break-word;
}

/* Optional: slightly widen Channel Name so links don’t wrap too soon */
th.col-channel_name, td.col-channel_name { min-width: 220px; }

/* Responsive tweak: on narrower screens, trim Description more */
@media (max-width: 1100px) {
  th.col-description, td.col-description {
    width: 32%;
    max-width: 520px;
  }
}

/* Center specific columns without affecting width */
th.col-country,    td.col-country    { text-align: center; }
th.col-videos,     td.col-videos     { text-align: center; }
th.col-created,    td.col-created    { text-align: center; white-space: nowrap; }
/* Custom URL: keep on one line, centered, and truncate with ellipsis */
th.col-custom_url, td.col-custom_url { text-align: center; }

td.col-custom_url a {
  display: block;        /* fill the cell so ellipsis can compute width */
  width: 100%;
  white-space: nowrap;   /* no wrapping */
  overflow: hidden;      /* hide overflow */
  text-overflow: ellipsis; /* add … when too long */
}

/* Center the Profile Image column (header + cells) */
th.col-profile_image,
td.col-profile_image { text-align: center; }

/* Make avatars round and consistent size */
td.col-profile_image img {
  width: 64px;          /* tweak size here */
  height: 64px;         /* keep square for a true circle */
  border-radius: 50%;   /* circle */
  object-fit: cover;    /* crop to fill circle */
  display: inline-block;
}
/* Ensure emoji fonts are available globally */
body {
  font-family:
    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji",
    sans-serif;
}

/* Or scope to just the country column */
th.col-country, td.col-country {
  font-family: inherit,
    "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla",
    "Segoe UI Symbol";
  white-space: nowrap;
}

/* Hide Description column when the body has .hide-description */
body.hide-description th.col-description,
body.hide-description td.col-description {
  display: none;
}

/* In narrow layout, clamp description so rows don't get gigantic */
.narrow-layout td.col-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8; /* ← number of lines to show */
  overflow: hidden;
  max-height: calc(1.4em * 8); /* line-height * lines; keeps height consistent */
}

/* Optional: slightly narrower description in narrow layout */
.narrow-layout th.col-description,
.narrow-layout td.col-description {
  width: 30%;
  max-width: 540px;
}

/* When a switch input is disabled, dim it */
.switch input:disabled + .slider { opacity: .5; cursor: not-allowed; }
.switch input:disabled ~ .switch-label { opacity: .6; }

/* Brand bar */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px;
}

.brand .logo-text { margin: 0; } /* brand handles the spacing */

.home-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--card);
  color: var(--accent);
  border: 1px solid var(--border);
  text-decoration: none;
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
}

.home-link:hover {
  background: #202734;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}

.home-icon { display: block; }
/* stack both links under the 'Last Updated' (top-right) */
.top-links{
  position: absolute;
  top: 38px;           /* just below your .last-updated-top (15px) */
  right: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  z-index: 10;
}

/* reset old pill/button styles + make them texty */
.submit-tutorial-link,
.report-tutorial-link{
  position: static !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0;
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.submit-tutorial-link:hover,
.report-tutorial-link:hover{
  text-decoration: underline;
}

/* small inline icon that inherits color */
.link-icon{
  width: 16px;
  height: 16px;
  display: inline-block;
}

/* on narrow screens, let them sit centered under the header */
@media (max-width: 720px){
  .top-links{
    position: static;
    align-items: center;
    margin-bottom: 10px;
  }
}