/*
 * DLA approved dashboard visual direction — 2026-08-26
 *
 * Presentation-only overrides for the redesigned staff dashboard.
 * IMPORTANT: every rule is gated by the canonical visual-system attribute so
 * `dla_new_visual_system=false` remains a complete appearance rollback.
 */

@media (min-width: 1024px) {
  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-testid="workflow-shell"] {
    --dla-navy: #071c3b;
    --dla-navy-2: #0b2d62;
    --dla-blue: #0e47b8;
    --dla-blue-soft: #eaf2ff;
    --dla-line: #dce5f1;
    --dla-canvas: #f5f8fc;
    background: var(--dla-canvas);
  }

  /* Sidebar color treatment applies in both expanded and collapsed states. */
  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-testid="portal-sidebar"] {
    border-right: 0 !important;
    background: linear-gradient(180deg, var(--dla-navy) 0%, #061832 100%) !important;
    color: #fff;
  }

  /* Only the expanded rail receives the wider approved-dashboard width.
     When WorkflowShell renders its existing `w-14` collapsed class, these
     dimensions do not match, so Collapse still reclaims workspace width. */
  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-testid="portal-sidebar"]:not(.w-14) {
    width: 284px !important;
    min-width: 284px !important;
  }

  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-testid="portal-title"] {
    min-height: 72px;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
    padding: 14px 20px !important;
    background: rgba(255,255,255,.02);
  }

  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-testid="portal-title"] img {
    height: 40px !important;
    max-width: 225px;
  }

  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-testid="portal-role-label"] {
    display: none !important;
  }

  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-testid="workflow-nav"] {
    gap: 4px !important;
    padding: 14px 12px !important;
    scrollbar-width: none;
  }

  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-testid="workflow-nav"]::-webkit-scrollbar {
    display: none;
  }

  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-testid="workflow-nav"] a,
  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-testid="workflow-nav"] button {
    color: rgba(255,255,255,.80) !important;
  }

  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-testid="workflow-nav"] svg {
    color: rgba(255,255,255,.65) !important;
  }

  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-testid="workflow-nav"] a:hover,
  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-testid="workflow-nav"] button:hover {
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
  }

  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-testid="workflow-nav"] a[data-active="true"],
  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-testid="workflow-nav-/admin"] {
    background: linear-gradient(90deg, #174baf 0%, #123e92 100%) !important;
    color: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  }

  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-testid="portal-user-profile"] {
    border-top: 1px solid rgba(255,255,255,.10) !important;
    color: #fff;
    padding: 10px 14px !important;
  }

  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-testid="portal-user-profile"] * {
    border-color: rgba(255,255,255,.12);
  }

  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-testid="portal-user-name-sidebar"] {
    color: #fff !important;
  }

  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-testid="portal-user-email-sidebar"],
  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-testid="workflow-nav-rail-toggle"] {
    color: rgba(255,255,255,.60) !important;
  }

  /* Header — search-forward and visually aligned with the content grid. */
  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-testid="workflow-shell"] > div > div > header {
    height: 68px !important;
    border-bottom: 1px solid var(--dla-line) !important;
    background: rgba(255,255,255,.97) !important;
    box-shadow: 0 1px 0 rgba(7,28,59,.02);
  }

  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-testid="portal-header-title"] {
    display: none !important;
  }

  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) .dla-header-search {
    width: min(42vw, 640px) !important;
    min-width: 420px !important;
    order: -10;
    margin-right: auto;
  }

  /* Main canvas: one-screen command center where practical. */
  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-scroll-container] {
    overflow-y: auto !important;
    background:
      radial-gradient(circle at 35% 0%, rgba(51,111,209,.055), transparent 35%),
      var(--dla-canvas) !important;
  }

  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-scroll-container] > div {
    padding: 18px 28px 22px !important;
  }

  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-testid="new-admin-dashboard"] {
    width: 100%;
    max-width: none !important;
  }

  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-testid="ds-page-header"] {
    border: 0 !important;
    background: transparent !important;
    padding: 0 0 14px !important;
    backdrop-filter: none !important;
  }

  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-testid="ds-page-header"] .ds-page,
  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-testid="new-admin-dashboard"] > main.ds-page {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-testid="ds-page-header"] h1 {
    color: #071c3b !important;
    font-size: clamp(26px, 2vw, 32px) !important;
    line-height: 1.1 !important;
    letter-spacing: -.025em;
  }

  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-testid="ds-page-header"] p {
    color: #587091 !important;
    font-size: 14px !important;
  }

  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-testid="ds-page-primary-action"] {
    min-height: 40px;
    padding-inline: 18px;
    border-radius: 8px;
    background: linear-gradient(180deg, #104bb5, #0a3e99) !important;
    box-shadow: 0 6px 16px rgba(14,71,184,.16);
  }

  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-testid="new-admin-dashboard"] > main {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-testid="new-admin-dashboard"] > main > div {
    gap: 14px !important;
  }

  /* Approved hierarchy: attention first, schedule beside it, activity + stats below. */
  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-testid="dashboard-primary-surface"] {
    gap: 14px !important;
    grid-template-columns: minmax(0, 1.9fr) minmax(280px, .85fr) !important;
  }

  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-testid="dashboard-needs-attention"],
  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-testid="dashboard-today-week"],
  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-testid="dashboard-recent-activity"],
  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-testid="dashboard-quick-stats"] {
    min-width: 0;
  }

  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-testid="dashboard-attention-feed"],
  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-testid="dashboard-today-week"] > div,
  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-testid="dashboard-quick-stats"] a {
    border-color: var(--dla-line) !important;
  }

  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-testid="dashboard-attention-feed"],
  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-testid="dashboard-today-week"] {
    border-radius: 12px !important;
    background: rgba(255,255,255,.97) !important;
    box-shadow: 0 8px 24px rgba(7,28,59,.045) !important;
  }

  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-testid="dashboard-recent-activity"],
  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-testid="dashboard-quick-stats"] {
    border: 1px solid var(--dla-line);
    border-radius: 12px;
    background: rgba(255,255,255,.97);
    padding: 14px 16px;
    box-shadow: 0 8px 24px rgba(7,28,59,.035);
  }

  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-testid="dashboard-quick-stats"] {
    padding: 14px;
  }

  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-testid="dashboard-quick-stats"] > div {
    gap: 10px !important;
  }

  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-testid="dashboard-quick-stats"] a {
    border-radius: 10px !important;
    background: #fbfdff !important;
    padding: 12px !important;
    box-shadow: none !important;
  }

  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-testid="dashboard-quick-stats"] a:hover {
    border-color: #a9c2e8 !important;
    background: #f5f9ff !important;
  }

  /* Firm-health reporting stays available but visually secondary. */
  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-testid="dashboard-firm-health"] {
    margin-top: 0 !important;
  }

  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-testid="dashboard-firm-health"] > button {
    min-height: 38px;
    border: 1px solid var(--dla-line) !important;
    border-radius: 10px;
    background: rgba(255,255,255,.78);
    padding: 8px 12px !important;
  }

  /* Tighten bounded lists to reduce unnecessary vertical movement. */
  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-testid="dashboard-attention-feed"] li,
  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-testid="dashboard-today-week"] li {
    min-height: 42px;
  }
}

/* Laptop-width compaction: keep the dashboard usable without horizontal drift. */
@media (min-width: 1024px) and (max-width: 1365px) {
  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-testid="portal-sidebar"]:not(.w-14) {
    width: 244px !important;
    min-width: 244px !important;
  }

  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) [data-scroll-container] > div {
    padding-inline: 20px !important;
  }

  html[data-dla-vs="on"] body:has([data-testid="new-admin-dashboard"]) .dla-header-search {
    min-width: 300px !important;
    width: 34vw !important;
  }
}