/* Small-screen layout only. Desktop keeps its existing colors and proportions. */
@media (max-width: 1000px) {
body.index-dashboard {
  --index-surface: #fff;
  --index-canvas: #f7f8fa;
  --index-line: #e5e8ee;
  --index-accent: #2563eb;
  --index-soft: #eff5ff;
}
body.index-dashboard.dark-theme {
  --index-surface: #17191d;
  --index-canvas: #101114;
  --index-line: #2c3037;
  --index-accent: #8bb4ff;
  --index-soft: #202c42;
}
body.index-dashboard .header { background: var(--index-surface); border-bottom: 1px solid var(--index-line); box-shadow: none; }
body.index-dashboard :is(.filter-sort-controls, .video-results-shell > .section) { background: var(--index-surface) !important; border: 1px solid var(--index-line) !important; border-radius: 16px; box-shadow: 0 2px 6px #00000003; }
body.index-dashboard .filter-sort-controls > .filter-title { border-bottom: 1px solid var(--index-line); }
body.index-dashboard #dataContainer .data-table { background: var(--index-surface); box-shadow: none; }
body.index-dashboard #dataContainer .data-table th > div { border: 0; border-radius: 8px; background: var(--index-canvas); color: var(--text-secondary); }
body.index-dashboard .video-table .video-info > div { flex-wrap: wrap; }
body.index-dashboard .video-table .video-info > .thumbnail-wrapper { flex: 0 0 72px; width: 72px; }
body.index-dashboard .video-table .video-thumbnail { width: 72px; height: 45px; object-fit: cover; border-radius: 8px; }
body.index-dashboard .video-table a.video-title { flex: 1 0 100% !important; color: var(--text-primary) !important; font-weight: 600; line-height: 1.5; }
body.index-dashboard .video-table a.video-title:hover { color: var(--index-accent) !important; }
body.index-dashboard .video-table .upload-date-badge { background: var(--index-canvas); color: var(--text-secondary); border: 1px solid var(--index-line); border-radius: 7px; }
body.index-dashboard .index-search-input-group { border: 1px solid var(--index-line); background: var(--index-canvas); border-radius: 12px; padding: 3px; }
body.index-dashboard .index-search-input-group:focus-within { border-color: var(--index-accent); box-shadow: 0 0 0 3px var(--index-soft); }
body.index-dashboard .index-search-input-group :is(input, select, button) { box-shadow: none; border: 0; background: transparent; }
body.index-dashboard .header-search-button { border-radius: 9px; }
body.index-dashboard :is(.quick-metric-select, .quick-preset-trigger) { border-radius: 9px; }
body.index-dashboard .quick-multi-menu { border-radius: 12px; border-color: var(--index-line); box-shadow: 0 12px 36px #0002; }
}

body.index-dashboard .index-compact-controls,
body.index-dashboard .index-filter-actions,
body.index-dashboard #indexMobileMenu,
body.index-dashboard #indexPeriodSelect,
body.index-dashboard .index-channel-rank,
body.index-dashboard .index-mobile-date,
body.index-dashboard .index-mobile-mode-button,
body.index-dashboard .index-row-more { display: none; }

@media (max-width: 1000px) {
  body.index-dashboard .index-compact-controls { display: flex; align-items: center; gap: 10px; }
  body.index-dashboard :is(#indexMetricSelect, #indexPeriodSelect, #indexFilterToggle, .index-filter-actions button) {
    min-height: 44px; min-width: 0; max-width: 100%; border: 1px solid var(--index-line);
    border-radius: 11px; background: var(--index-surface); color: var(--text-primary);
    padding: 10px 12px; font: inherit; font-size: 14px; cursor: pointer;
  }
  body.index-dashboard #indexMetricSelect { flex: 1; width: 0; font-size: 16px; font-weight: 600; text-overflow: ellipsis; }
  body.index-dashboard #indexFilterToggle { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
  body.index-dashboard #indexFilterToggle svg { width: 17px; height: 17px; fill: var(--index-surface); stroke: currentColor; stroke-width: 1.7; }
  body.index-dashboard #indexFilterToggle[aria-expanded="true"] { color: var(--index-accent); border-color: var(--index-accent); background: var(--index-soft); }
  body.index-dashboard #trendFilterControls > .filter-title { display: none; }
  body.index-dashboard .index-filters-open .index-filter-actions { display: flex; gap: 8px; justify-content: flex-end; margin: 12px 0; }
  body.index-dashboard .index-filter-actions button { min-height: 36px; padding: 6px 10px; font-size: 12px; }
  body.index-dashboard #trendFilterControls:not(.index-filters-open) :is(.quick-selection-dropdowns, #allFiltersContent) { display: none !important; }
  body.index-dashboard #trendFilterControls:not(.index-filters-open) #collapsedFilterView { display: block !important; }
  body.index-dashboard #summaryMetric { display: none !important; }
  body.index-dashboard .filter-summary-inline { gap: 0; }
  body.index-dashboard .filter-summary-inline > .summary-section { flex-basis: 100%; min-height: 0; gap: 6px; }
  body.index-dashboard .filter-summary-inline > .summary-section > .summary-label { display: none; }
  body.index-dashboard .filter-summary-inline .summary-btn { margin-top: 8px; font-size: 12px; border-radius: 8px; }
  body.index-dashboard .quick-selection-dropdowns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; }
  body.index-dashboard .quick-selection-dropdowns > .summary-section { display: flex !important; flex-direction: column; align-items: stretch; gap: 5px; }
  body.index-dashboard .quick-selection-dropdowns :is(.quick-metric-combined-section, .quick-metric-split-section) { display: none !important; }
  body.index-dashboard .quick-selection-dropdowns .summary-label { display: block; font-size: 11px; color: var(--text-secondary); }
  body.index-dashboard .quick-selection-dropdowns :is(.quick-multi-dropdown, .quick-metric-select) { width: 100%; min-width: 0; }
  body.index-dashboard .quick-selection-dropdowns .quick-metric-select { min-height: 40px; display: flex; align-items: center; font-size: 14px; }
  body.index-dashboard .controls { grid-template-columns: minmax(0, 1fr); }
  body.index-dashboard .filter-groups-container { grid-template-columns: minmax(0, 1fr); }
  body.index-dashboard :is(.control-group, .filter-group-compact) { min-width: 0; max-width: 100%; }
  body.index-dashboard .filter-button-group { flex-wrap: wrap; }
  body.index-dashboard .video-broadcast-tabs { position: static; height: auto; margin: 0 0 8px; }
  body.index-dashboard .video-results-shell.has-broadcast-tabs { margin-top: 12px; }
  body.index-dashboard .video-broadcast-tabs .video-tab-group:not(:first-child) { display: none; }
  body.index-dashboard .video-broadcast-scroll { width: 100%; height: auto; padding: 0; overflow: visible; }
  body.index-dashboard .video-broadcast-tabs .video-tab-group { background: transparent; gap: 4px; }
  body.index-dashboard .video-broadcast-tabs :is(.video-tab-group, .channel-period-scroll) > button { height: 38px; border-radius: 9px; padding: 0 16px; font-size: 13px; }
  body.index-dashboard .video-broadcast-tabs :is(.video-tab-group, .channel-period-scroll) > button::before { display: none; }
  body.index-dashboard .video-broadcast-tabs .video-tab-group > button.active { background: var(--index-soft); color: var(--index-accent); }
  body.index-dashboard .channel-period-scroll { display: none; }
  body.index-dashboard #indexPeriodSelect { display: block; font-size: 16px; flex: 0 0 110px; }
  body.index-dashboard .channel-period-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
  body.index-dashboard .channel-period-tabs[hidden] { display: none; }
  body.index-dashboard .channel-period-tabs .channel-list-search { flex: 1; width: auto; min-width: 0; order: initial; margin: 0; }
  body.index-dashboard .collection-control-bar, body.index-dashboard .collection-control-buttons { flex-wrap: wrap; gap: 8px; }
  body.index-dashboard .collection-control-left { min-width: 0; flex-wrap: wrap; }
  body.index-dashboard .collection-mode-title { white-space: normal; }
}

@media (max-width: 700px) {
  body.index-dashboard, body.index-dashboard:has(.cs-sidebar.collapsed) { --index-sidebar-width: 0px; --auth-overlay-offset: 0px; }
  body.index-dashboard .cs-sidebar.collapsed { visibility: hidden; transform: translateX(-100%); pointer-events: none; }
  body.index-dashboard .cs-sidebar.cs-drawer-open { max-width: 85vw; }
  body.index-dashboard .header { transition: none; }
  body.index-dashboard .container,
  body.index-dashboard.menu-expanded .container,
  body.index-dashboard .cs-sidebar.collapsed ~ .container { padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)) !important; }
  body.index-dashboard .header .header-content { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; padding: 8px 12px; }
  body.index-dashboard #indexMobileMenu { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 10px; border: 1px solid var(--index-line); border-radius: 11px; background: var(--index-surface); color: var(--text-primary); cursor: pointer; }
  body.index-dashboard #indexMobileMenu svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
  body.index-dashboard #quickCcBtn { display: none; }
  body.index-dashboard .header-right :is(#agentStatusIndicator, #themeToggle) { display: none !important; }
  body.index-dashboard .header .header-search-wrapper.index-search-with-mode { display: contents !important; }
  body.index-dashboard .header .index-search-input-group { grid-column: 1 / -1; grid-row: 2; width: 100%; gap: 4px; }
  body.index-dashboard .header .index-mode-segment { grid-column: 2; grid-row: 1; justify-self: start; min-width: 0; width: min(100%, 210px); margin: 0; padding: 3px; gap: 3px; border-radius: 11px; background: var(--index-canvas); }
  body.index-dashboard .header .index-mode-segment__button { display: none; }
  body.index-dashboard .header .index-mobile-mode-button { display: block; flex: 1 1 0; min-width: 0; min-height: 36px; padding: 5px 4px; border: 0; border-radius: 8px; background: transparent; box-shadow: none; color: var(--text-secondary); font: inherit; font-size: 12px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; cursor: pointer; }
  body.index-dashboard .header .index-mobile-mode-button[aria-pressed="true"] { background: var(--primary-color); color: #fff; }
  body.index-dashboard .header .index-mobile-mode-button:focus-visible { outline: 2px solid var(--index-accent); outline-offset: 2px; }
  body.index-dashboard .header .header-right { grid-column: 3; grid-row: 1; }
  body.index-dashboard :is(.header-icon-btn, .profile-icon-btn) { width: 36px; height: 40px; flex-basis: 36px; }
  body.index-dashboard .header .search-type-select { width: 94px; font-size: 14px; padding: 8px; }
  body.index-dashboard .header .header-search-input { min-width: 0; width: 0; flex: 1; font-size: 16px; padding: 8px 4px; height: 40px; }
  body.index-dashboard .header .header-search-button { width: 36px; height: 40px; min-width: 36px; padding: 0; flex-shrink: 0; }
  body.index-dashboard .header .autocomplete-dropdown { left: 12px; right: 12px; width: auto; max-width: calc(100vw - 24px); }
  body.index-dashboard .filter-sort-controls { padding: 10px 12px; margin-bottom: 8px; border-radius: 12px; }
  body.index-dashboard .filter-summary-inline .summary-btn { margin-top: 6px; }
  body.index-dashboard .video-results-shell.has-broadcast-tabs { margin-top: 8px; }
  body.index-dashboard #indexFilterToggle span { max-width: 66px; }
  body.index-dashboard .quick-selection-dropdowns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.index-dashboard .video-results-shell > .section { padding: 0; background: transparent !important; border: 0 !important; box-shadow: none; }
  body.index-dashboard #dataContainer { overflow: visible; }
  body.index-dashboard #dataContainer .video-table tbody tr { grid-template-columns: 18px minmax(0, 1fr) auto; gap: 6px 8px; padding: 12px; margin-bottom: 8px; border: 1px solid var(--index-line); border-radius: 12px; background: var(--index-surface); }
  body.index-dashboard #dataContainer .video-table tbody td:nth-child(n) { display: none !important; }
  body.index-dashboard #dataContainer .video-table tbody td:nth-child(2) { display: block !important; grid-row: 1; grid-column: 1; font-size: 13px; color: var(--text-secondary); }
  body.index-dashboard #dataContainer .video-table tbody td:nth-child(5) { display: block !important; grid-row: 1; grid-column: 2 / -1; }
  body.index-dashboard #dataContainer .video-table tbody td:nth-child(4) { display: block !important; grid-row: 2; grid-column: 2; min-width: 0; }
  body.index-dashboard #dataContainer .video-table tbody td:nth-child(7) { display: block !important; grid-row: 2; grid-column: 3; align-self: center; text-align: right; color: var(--index-accent); font-size: 14px; font-weight: 700; }
  body.index-dashboard .video-table td:nth-child(5) > div { align-items: flex-start !important; }
  body.index-dashboard .video-table td:nth-child(7)::before { content: attr(data-column-label); margin-right: 5px; color: var(--text-secondary); font-size: 11px; font-weight: 400; }
  body.index-dashboard .video-table td:nth-child(7) .metric { color: var(--index-accent) !important; font-size: 14px; }
  body.index-dashboard .video-table .upload-date-badge { padding: 4px 7px; }
  body.index-dashboard .video-table .channel-name { white-space: normal; overflow-wrap: anywhere; font-size: 12px; }
  body.index-dashboard .video-table .channel-info { display: none; }
  body.index-dashboard .video-table .index-mobile-date { display: block; margin-top: 3px; color: var(--text-secondary); font-size: 11px; line-height: 1.4; text-align: left; }
  body.index-dashboard #dataContainer .channel-table tbody tr { padding: 16px; margin-bottom: 12px; border: 1px solid var(--index-line); border-radius: 14px; background: var(--index-surface); }
  body.index-dashboard #indexTrendMount #dataContainer .channel-table td.index-secondary-cell { display: none !important; }
  body.index-dashboard #indexTrendMount #dataContainer .channel-table tr.index-row-expanded td.index-secondary-cell { display: block !important; }
  body.index-dashboard .index-row-more { display: inline-flex; margin-top: 8px; padding: 7px 10px; border: 1px solid var(--index-line); border-radius: 8px; background: var(--index-surface); color: var(--index-accent); font: inherit; font-size: 12px; cursor: pointer; }
  body.index-dashboard .index-row-more[aria-expanded="true"] { background: var(--index-soft); }
  body.index-dashboard .index-channel-rank { display: block; color: var(--index-accent); font-size: 12px; font-weight: 700; margin-bottom: 3px; }
  body.index-dashboard .channel-search-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; padding: 12px 0; }
  body.index-dashboard .channel-card-compact { min-width: 0; padding: 16px; border-radius: 14px; background: var(--index-surface); }
  body.index-dashboard .channel-card-header { gap: 12px; }
  body.index-dashboard .channel-avatar-compact { width: 48px; height: 48px; }
  body.index-dashboard .channel-name-compact { white-space: normal; overflow-wrap: anywhere; font-size: 15px; }
  body.index-dashboard .channel-stats-row { gap: 6px; }
  body.index-dashboard .channel-stats-row .stat-item { min-width: 0; padding: 10px 6px; overflow-wrap: anywhere; }
  body.index-dashboard .index-live-mode__field select { min-width: 0; font-size: 16px; min-height: 42px; }
  body.index-dashboard #indexLiveMount .index-live-mode { padding: 12px; border-color: var(--index-line); background: var(--index-surface); }
  body.index-dashboard #indexLiveMount .index-live-mode__field { flex-direction: column; align-items: stretch; }
  body.index-dashboard #indexLiveMount .index-live-mode__field select { width: 100%; font-size: 16px; }
  body.index-dashboard #indexLiveMount .index-live-mode__grid { grid-template-columns: minmax(0, 1fr); }
  body.index-dashboard .quick-selection-dropdowns .quick-multi-menu { max-width: calc(100vw - 24px); }
  body.index-dashboard .pagination { gap: 4px !important; }
  body.index-dashboard .pagination :is(button, a) { min-width: 32px; min-height: 36px; padding-inline: 8px; }
  body.index-dashboard #toastContainer { left: 12px; right: 12px !important; max-width: calc(100% - 24px); }
}

@media (max-width: 700px) and (pointer: coarse) {
  body.index-dashboard .quick-selection-dropdowns .quick-multi-menu { inset: auto 12px max(12px, env(safe-area-inset-bottom)) 12px !important; }
}