/* Index only: legacy viewport rules must not shrink the usable content twice. */
body.index-dashboard { padding: 0 !important; --index-sidebar-width: 210px; }
body.index-dashboard:has(.cs-sidebar.collapsed) { --index-sidebar-width: 52px; }
body.index-dashboard .container,
body.index-dashboard.menu-expanded .container,
body.index-dashboard .cs-sidebar.collapsed ~ .container {
  margin: calc(var(--index-header-height, 70px) + 12px) 0 0 var(--index-sidebar-width) !important;
  width: calc(100% - var(--index-sidebar-width)) !important;
  padding: 0 16px 24px !important;
  min-width: 0;
  overflow: visible !important;
  transition: none;
}
body.index-dashboard .header,
body.index-dashboard .cs-sidebar.collapsed ~ .container .header { left: var(--index-sidebar-width) !important; }
body.index-dashboard { --auth-overlay-offset: var(--index-sidebar-width); }
body.index-dashboard .cs-sidebar { height: 100dvh; z-index: 1005; }
body.index-dashboard .cs-overlay { z-index: 1004; }
body.index-dashboard .header .header-content {
  display: grid;
  grid-template-columns: auto minmax(0, 780px) auto;
  justify-content: space-between;
  align-items: center;
  height: auto;
  min-height: 64px;
  padding: 10px 16px;
  gap: 12px;
}
body.index-dashboard .header .header-search-wrapper.index-search-with-mode {
  position: static;
  transform: none;
  width: 100%;
  max-width: 780px;
  min-width: 0;
  margin: 0;
  padding: 0;
  order: initial;
}
body.index-dashboard .index-search-input-group { min-width: 0; gap: 8px; }
body.index-dashboard .search-type-select { min-width: 0; width: auto; flex: 0 0 auto; }
body.index-dashboard .header-right { min-width: 0; gap: 6px; }
body.index-dashboard .section { padding: 16px; min-width: 0; }
body.index-dashboard #dataContainer { min-width: 0; max-width: 100%; overflow-x: auto; }
body.index-dashboard #dataContainer .data-table.channel-table tbody td.channel-table-channel-cell { display: table-cell !important; }
body.index-dashboard .filter-summary-inline { flex-wrap: wrap; gap: 10px 16px; }
body.index-dashboard .quick-selection-dropdowns { flex-wrap: wrap; gap: 8px 12px; max-width: 100%; }
body.index-dashboard .quick-selection-dropdowns > .summary-section { flex-wrap: nowrap; min-width: 0; }
body.index-dashboard .quick-selection-dropdowns :is(.quick-sort-section, .quick-category-section, .quick-subscriber-section, .quick-duration-section) { display: flex !important; }
body.index-dashboard .filter-sort-controls { padding: 14px 16px; }
body.index-dashboard .filter-sort-controls > .filter-title { padding-bottom: 8px; margin-bottom: 8px !important; min-height: 32px; }
body.index-dashboard .video-results-shell > .section { padding-top: 8px; }
body.index-dashboard .quick-multi-menu { max-height: min(360px, 60dvh); overflow-y: auto; max-width: calc(100vw - 84px); }
body.index-dashboard .quick-selection-dropdowns .quick-multi-menu {
  position: fixed;
  left: var(--index-menu-left, 60px) !important;
  top: var(--index-menu-top, 80px) !important;
  right: auto !important;
  max-height: min(360px, calc(100dvh - 16px)) !important;
  z-index: 1100;
}
/* Fixed positioning turns the split menus' min-width: 100% (meant as the trigger width,
   indexstyle.css) into 100% of the viewport. index-responsive.js hands over the trigger width. */
body.index-dashboard .quick-selection-dropdowns .quick-multi-menu.quick-split-metric-menu { min-width: var(--index-menu-min-width, 0); }
body.index-dashboard .video-broadcast-tabs { left: 12px; right: 12px; }
body.index-dashboard .video-broadcast-scroll { scrollbar-width: thin; height: 42px; }
body.index-dashboard .video-broadcast-scroll::-webkit-scrollbar { display: block; height: 4px; }
body.index-dashboard .pagination { flex-wrap: wrap; max-width: 100%; }
body.index-dashboard .video-table a.video-title { white-space: normal !important; overflow-wrap: anywhere; }
body.index-dashboard .index-utility-dock { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; margin-top: 16px; }
body.index-dashboard .persona-idea-nudge { position: relative !important; inset: auto; margin: 0; max-width: 100%; z-index: 1; }
body.index-dashboard .persona-idea-nudge__panel { width: min(440px, 100%); }
body.index-dashboard .persona-idea-nudge__chip { max-width: 100%; white-space: normal; }
body.index-dashboard .persona-idea-nudge__chip-label { white-space: normal; }

/* Hidden cells shift the legacy colgroup widths onto different columns. Size
   the visible headers directly, leaving the video title the remaining space. */
@media (min-width: 1504px) {
  body.index-dashboard #dataContainer .video-table { table-layout: fixed !important; width: 100% !important; min-width: 0 !important; margin-inline: 0 !important; }
  body.index-dashboard .video-table colgroup { display: none; }
  body.index-dashboard #dataContainer .video-table :is(th, td) { width: auto !important; min-width: 0 !important; max-width: none !important; }
  body.index-dashboard #dataContainer .video-table th:nth-child(1) { width: 40px !important; }
  body.index-dashboard #dataContainer .video-table th:nth-child(2) { width: 60px !important; }
  body.index-dashboard #dataContainer .video-table th:nth-child(3) { width: 140px !important; }
  body.index-dashboard #dataContainer .video-table th:nth-child(4) { width: 184px !important; }
  body.index-dashboard #dataContainer .video-table th:nth-child(6) { width: 150px !important; }
  body.index-dashboard #dataContainer .video-table th:nth-child(7) { width: 120px !important; }
  body.index-dashboard #dataContainer .video-table th:nth-child(8) { width: 124px !important; }
  body.index-dashboard #dataContainer .video-table th:nth-child(9) { width: 100px !important; }
  body.index-dashboard #dataContainer .video-table th:nth-child(10) { width: 88px !important; }
  body.index-dashboard #dataContainer .video-table th:nth-child(11) { width: 100px !important; }
  body.index-dashboard #dataContainer .video-table th:nth-child(12) { width: 70px !important; }
  body.index-dashboard #dataContainer .video-table th:nth-child(13) { width: 120px !important; }
  body.index-dashboard .video-table .download-btn { max-width: 100%; box-sizing: border-box; }
}

@media (min-width: 1801px) {
  body.index-dashboard #dataContainer .video-table th:nth-child(6) { width: 220px !important; }
}

@media (min-width: 1001px) and (max-width: 1503px) {
  body.index-dashboard #dataContainer .video-table :is(th, td):nth-child(7) { width: 120px !important; min-width: 120px !important; max-width: 120px !important; }
}

@media (max-width: 1440px) {
  body.index-dashboard { --index-sidebar-width: 52px; }
  body.index-dashboard .cs-sidebar { width: 52px !important; min-width: 52px !important; }
  body.index-dashboard .cs-sidebar.cs-drawer-open { width: 210px !important; min-width: 210px !important; box-shadow: 8px 0 24px #0003; }
  body.index-dashboard .header .header-content { grid-template-columns: auto minmax(0, 1fr) auto; }
  body.index-dashboard .filter-summary-inline > .summary-section { flex-basis: 100%; flex-wrap: wrap; }
  body.index-dashboard .quick-selection-dropdowns { margin-left: 0; }
}

@media (max-width: 1000px) {
  body.index-dashboard .header .header-content { grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
  body.index-dashboard .header-right { justify-self: end; }
  body.index-dashboard .header .header-search-wrapper.index-search-with-mode { grid-column: 1 / -1; grid-row: 2; max-width: none; }
}

@media (max-width: 768px) {
  body.index-dashboard .container,
  body.index-dashboard.menu-expanded .container,
  body.index-dashboard .cs-sidebar.collapsed ~ .container { padding: 0 8px 16px !important; }
  body.index-dashboard .section { padding: 8px; }
  body.index-dashboard .filter-sort-controls { padding: 10px; }
  body.index-dashboard .collapsed-filter-view { padding: 0 !important; }
  body.index-dashboard .filter-sort-controls > .filter-title { margin-bottom: 10px !important; }
  body.index-dashboard .filter-summary-inline > .summary-section { display: flex !important; }
  body.index-dashboard .filter-summary-inline > .summary-section > .summary-label { display: none; }
  body.index-dashboard .header .header-content { padding: 8px; }
  body.index-dashboard .header .header-search-wrapper.index-search-with-mode { flex-wrap: wrap; justify-content: center; gap: 8px; }
  body.index-dashboard .index-search-input-group { flex-basis: 100%; }
  body.index-dashboard .search-type-select { display: block; font-size: 12px; padding: 8px; }
  body.index-dashboard .header-search-input { font-size: 14px; }
  body.index-dashboard .header-right { gap: 4px; }
  body.index-dashboard .header-icon-btn,
  body.index-dashboard .profile-icon-btn { width: 30px; height: 30px; flex: 0 0 30px; }
  body.index-dashboard .quick-cc-btn { height: 30px; padding: 0 8px; }
  body.index-dashboard .quick-selection-dropdowns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 24px; width: 100%; gap: 6px; }
  body.index-dashboard .quick-selection-dropdowns :is(.quick-sort-section, .quick-subscriber-section, .quick-duration-section) { display: none !important; }
  body.index-dashboard .quick-metric-combined-section { flex: 1 1 auto; }
  body.index-dashboard .quick-selection-dropdowns .summary-label { display: none; }
  body.index-dashboard .quick-metric-select { max-width: 100%; min-width: 0; }
  body.index-dashboard .quick-selection-dropdowns .quick-multi-dropdown,
  body.index-dashboard .quick-selection-dropdowns .quick-metric-select { width: 100%; min-width: 0; }
  body.index-dashboard .video-broadcast-tabs { left: 4px; right: 4px; }
  body.index-dashboard .video-broadcast-scroll { gap: 12px; }
  body.index-dashboard .video-broadcast-tabs .video-tab-group > button { min-width: 48px; padding-inline: 10px; font-size: 13px; }
  body.index-dashboard #dataContainer .video-table { display: block; width: 100% !important; margin: 0 !important; }
  body.index-dashboard .video-table colgroup { display: none; }
  body.index-dashboard .video-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  body.index-dashboard .video-table tbody { display: block; }
  body.index-dashboard .video-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--border-color); }
  body.index-dashboard #dataContainer .video-table tbody td { width: auto !important; min-width: 0 !important; max-width: none !important; padding: 0 !important; border: 0; }
  body.index-dashboard #dataContainer .video-table tbody td:nth-child(5) { display: block !important; grid-column: 1 / -1; grid-row: 1; overflow: visible !important; }
  body.index-dashboard #dataContainer .video-table tbody td:nth-child(4) { display: block !important; grid-column: 1; grid-row: 2; }
  body.index-dashboard #dataContainer .video-table tbody td:nth-child(7) { display: block !important; grid-column: 2; grid-row: 2; align-self: center; font-size: 13px; }
  body.index-dashboard #dataContainer .video-table tbody td:nth-child(6) { display: block !important; grid-column: 1 / -1; grid-row: 3; justify-self: end; }
  body.index-dashboard .video-table td:nth-child(4) .thumbnail-wrapper { display: none; }
  body.index-dashboard .video-table .channel-name { text-align: left; font-size: 12px; }
  body.index-dashboard .video-table .channel-info { justify-content: flex-start; align-items: flex-start !important; text-align: left; flex-wrap: wrap; }
  body.index-dashboard .video-table .video-info { overflow: visible !important; margin: 0; align-items: flex-start; }
  body.index-dashboard .video-table .video-info > div { min-width: 0; overflow: visible !important; }
  body.index-dashboard .video-table .video-info > div:not(.thumbnail-wrapper) { min-width: 0; flex: 1; flex-wrap: wrap; }
  body.index-dashboard .video-table a.video-title { flex-basis: 100% !important; line-height: 1.5; font-size: 14px !important; }
  body.index-dashboard .video-table .video-thumbnail { width: 72px !important; height: 45px !important; min-width: 72px !important; }
  body.index-dashboard .video-table .thumbnail-wrapper { flex-shrink: 0; }
  body.index-dashboard .video-table .metric { white-space: nowrap; }
  body.index-dashboard .video-table .upload-date-badge { font-size: 11px; }
  /* Channel names and their metric labels stay readable without sideways panning. */
  body.index-dashboard #dataContainer .data-table.channel-table { display: block; width: 100% !important; min-width: 0 !important; margin: 0 !important; }
  body.index-dashboard .channel-table colgroup { display: none; }
  body.index-dashboard .channel-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  body.index-dashboard .channel-table tbody { display: block; }
  body.index-dashboard .channel-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--border-color); }
  body.index-dashboard #dataContainer .data-table.channel-table tbody td:nth-child(n) { width: auto !important; min-width: 0 !important; max-width: none !important; padding: 0 !important; border: 0; text-align: left !important; overflow-wrap: anywhere; }
  body.index-dashboard #dataContainer .data-table.channel-table tbody td:nth-child(2) { display: none !important; }
  body.index-dashboard #dataContainer .data-table.channel-table tbody td:nth-child(3) { display: block !important; grid-column: 1 / -1; order: -1; }
  body.index-dashboard #dataContainer .data-table.channel-table tbody td.channel-table-channel-cell { display: block !important; grid-column: 1 / -1; order: -2; }
  body.index-dashboard #dataContainer .data-table.channel-table tbody td:nth-child(n+4):not(.channel-table-channel-cell):not(.growth-col-grade):not(.growth-col-signals):not(.growth-col-benchmark):not(.minefield-col-grade):not(.minefield-col-signals):not(.minefield-col-benchmark) { display: block !important; }
  body.index-dashboard .channel-table td:nth-child(n+4):not(.channel-table-channel-cell)::before { content: attr(data-column-label); display: block; margin-bottom: 5px; color: var(--text-secondary); font-size: 11px; line-height: 1.4; }
  body.index-dashboard .channel-table td:has(a.video-link, a[href*="youtube.com/watch"]) { grid-column: 1 / -1; }
  body.index-dashboard .channel-table td a { white-space: normal !important; }
  body.index-dashboard .channel-table .channel-table-channel-layout { display: flex; gap: 10px; align-items: center; }
  body.index-dashboard #dataContainer .channel-table .channel-table-channel-copy { min-width: 0; align-items: flex-start; text-align: left; }
  body.index-dashboard #dataContainer .channel-table .channel-table-channel-copy .channel-name { display: block; font-size: 15px; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; text-align: left; }
  body.index-dashboard #dataContainer .channel-table .channel-table-subscriber-line { justify-content: flex-start; text-align: left; }
  body.index-dashboard .channel-table .channel-info { align-items: flex-start !important; text-align: left; }
  body.index-dashboard .channel-table .metric { font-size: 14px; white-space: normal !important; }
  body.index-dashboard .channel-table .channel-sparkline { max-width: 100%; }
  body.index-dashboard .index-utility-dock { flex-direction: column; }
  body.index-dashboard #planPreviewToolbar { padding: 8px; gap: 6px; }
  body.index-dashboard #planPreviewSelect { min-width: 0; max-width: 100%; }
}

/* Bottom sheet for touch screens only. A narrow or zoomed desktop window also drops
   below 768px, and a mouse user expects the menu under its trigger, not screen-wide. */
@media (max-width: 768px) and (pointer: coarse) {
  body.index-dashboard .quick-selection-dropdowns .quick-multi-menu {
    position: fixed;
    inset: auto 8px 12px 60px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none;
    max-height: min(360px, calc(100dvh - 24px)) !important;
    overflow-y: auto;
    z-index: 1100;
  }
}