/* Video list round 1, ungated fixes (L2, L3, L4, L5, L17). Every rule is scoped to the
   Videos tab, so Reports, Templates and Collect keep their cards and header as they were.
   Linked from index.html after video-team.css. The dashboard is dark-only. */

/* L17: text for screen readers only ("opens in a new tab") */
.vl-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- L2: the card menu is always there, top right, off the status chip ---------- */
/* builder-style.css hides .dropdown until the card is hovered (no touch, no keyboard) */
#dashboard [data-dashboard-main] [data-video-tab] [data-reports] [data-video-card] .dropdown {
  visibility: visible; left: auto; right: 0.5rem; top: 0.5rem; z-index: 2;
  opacity: 0.65; transition: opacity 0.12s ease;
}
#dashboard [data-dashboard-main] [data-video-tab] [data-reports] [data-video-card]:hover .dropdown,
#dashboard [data-dashboard-main] [data-video-tab] [data-reports] [data-video-card] .dropdown:focus-within { opacity: 1; }
#dashboard [data-dashboard-main] [data-video-tab] [data-reports] [data-video-card] .dropdown > .btn {
  width: 32px; height: 32px; min-height: 32px; padding: 0; border: 0;
  border-radius: 0.5rem; color: #fff;
  background-color: rgba(15, 20, 26, 0.78) !important;
}
#dashboard [data-dashboard-main] [data-video-tab] [data-reports] [data-video-card] .dropdown > .btn:hover,
#dashboard [data-dashboard-main] [data-video-tab] [data-reports] [data-video-card] .dropdown:focus-within > .btn { background-color: #286ea6 !important; }
#dashboard [data-dashboard-main] [data-video-tab] [data-reports] [data-video-card] .dropdown > .btn:focus-visible { outline: 2px solid #7dd3fc; outline-offset: 2px; }
#dashboard [data-dashboard-main] [data-video-tab] [data-reports] [data-video-card] .dropdown > .btn .material-icons { font-size: 1.25rem; }
#dashboard [data-dashboard-main] [data-video-tab] [data-reports] [data-video-card] .dropdown .dropdown-content { width: 12.5rem !important; margin-top: 0.25rem; }
#dashboard [data-dashboard-main] [data-video-tab] [data-reports] [data-video-card] .dropdown .dropdown-content a { display: flex; align-items: center; gap: 0.35rem; }
#dashboard [data-dashboard-main] [data-video-tab] [data-reports] [data-video-card] .dropdown .dropdown-content a:focus-visible { outline: 2px solid #7dd3fc; outline-offset: -2px; }
/* L17: the new-tab glyph */
#dashboard [data-video-tab] [data-vl-newtab] .material-symbols-outlined { font-size: 14px; line-height: 1; opacity: 0.75; }

/* L1: the numbers sit under the title link, in the card's text column */
#dashboard [data-video-tab] [data-video-card] .vl-card-stats { padding: 0 0.3rem 0.125rem; }

@media (max-width: 767px) {
  /* touch: no hover to reveal it, and a 44px target */
  #dashboard [data-dashboard-main] [data-video-tab] [data-reports] [data-video-card] .dropdown { opacity: 1; }
  #dashboard [data-dashboard-main] [data-video-tab] [data-reports] [data-video-card] .dropdown > .btn { width: 44px; height: 44px; min-height: 44px; }
}

/* ---------- L3: the header fits at 1280; filters show only where they filter ---------- */
#dashboard [data-dashboard-main] .vt-head-tools { min-width: 0; align-items: center; }
#dashboard [data-dashboard-main] .vt-head-tools > input[data-vt-search] {
  flex: 1 1 14rem; min-width: 10rem; max-width: 22rem; width: auto; margin-left: 1rem;
}
#dashboard [data-dashboard-main] .vt-head-tools > select,
#dashboard [data-dashboard-main] .vt-head-tools > .vq-doors { flex: 0 0 auto; }
#dashboard [data-dashboard-main] .vt-head-tools > .vq-doors { display: flex; gap: 0.5rem; align-items: center; white-space: nowrap; }
/* search and the selects only filter the Videos grid: off it (My donors, Team, Campaigns,
   Results) they're hidden at every width, not only on a phone. The create doors stay. */
#dashboard [data-dashboard-main] .vt-head-tools:not([data-vt-grid]) > input,
#dashboard [data-dashboard-main] .vt-head-tools:not([data-vt-grid]) > select { display: none; }
/* the owner select renders disabled while videos load, at one fixed width (its review
   options arrive with the videos), so nothing jumps */
#dashboard [data-dashboard-main] .vt-head-tools > select[aria-label="Show videos by"] { width: 11.5rem !important; }
#dashboard [data-dashboard-main] .vt-head-tools > select:disabled { opacity: 0.6; }

/* ---------- L4: the side panels get their padding back ---------- */
/* .vt-panel (0,1,0) lost to "#dashboard [data-dashboard-main] section" (1,1,1) */
#dashboard [data-dashboard-main] section.vt-panel { padding: 1.5rem; }

@media (max-width: 767px) {
  #dashboard [data-dashboard-main]:has(.vt-views) .vt-head-tools > input[data-vt-search] { flex: 1 1 100%; max-width: 100%; margin-left: 0; }
}
@media (max-width: 640px) {
  #dashboard [data-dashboard-main] section.vt-panel { padding: 1rem; }
  /* L5: the intro line gives way to the first video on a phone */
  #dashboard [data-vl-intro] { display: none; }
}

/* Integration: "Draft" (the most common chip since L1) had no status rule and fell back to grey on
   white, 2.53:1. Same slate as "Shared (not confirmed)". */
#dashboard [data-dashboard-main] [data-video-tab] [data-reports] [data-report] [data-cover] .status[data-video-status="Draft"] { background: #334155; color: #e2e8f0 !important; }