/*
 * Customer lifetime AI browser polish.
 *
 * Presentation only. Scoped to the browser-only CustomerLifetimeAIBrowserV2
 * by its unique 7-column data-basis grid. No data, logic, handlers, thresholds,
 * kiosk rendering or AI behaviour is changed here.
 *
 * Visual reference: the shared design system and Profitability/Tjener vi penge?
 * palette. Neutral information stays neutral; amber/red/green are reserved for
 * semantic watch/critical/good states.
 */

@supports selector(:has(*)) {
  :where(div:has(> div > .ds-view-header):has(> div > div > .grid.grid-cols-2.gap-3.md\:grid-cols-4.xl\:grid-cols-7)) {
    --customer-ai-app: #e6e4e2;
    --customer-ai-shell: #faf9f8;
    --customer-ai-card: #ffffff;
    --customer-ai-muted: #f1efed;
    --customer-ai-active: #e8e1da;
    --customer-ai-ink: #201e1d;
    --customer-ai-secondary: rgba(32, 30, 29, 0.55);
    --customer-ai-tertiary: rgba(32, 30, 29, 0.42);
    --customer-ai-line: rgba(32, 30, 29, 0.09);
    --customer-ai-line-faint: rgba(32, 30, 29, 0.07);
    --customer-ai-good: #157a5c;
    --customer-ai-good-soft: #eaf4f0;
    --customer-ai-watch: #c26a06;
    --customer-ai-watch-soft: #fdf1e3;
    --customer-ai-critical: #ae1800;
    --customer-ai-critical-soft: #fff2ef;

    box-sizing: border-box;
    padding: 16px !important;
    background: var(--customer-ai-app) !important;
  }

  :where(div:has(> div > .ds-view-header):has(> div > div > .grid.grid-cols-2.gap-3.md\:grid-cols-4.xl\:grid-cols-7)) > div {
    max-width: 1540px !important;
    padding: 20px !important;
    gap: 14px !important;
    background: var(--customer-ai-shell) !important;
    border: 1px solid var(--customer-ai-line) !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 44px rgba(45, 43, 43, 0.14) !important;
  }

  /* Header follows the established design line: typography + controls only.
     Deliberately no decorative icon next to the page title. */
  :where(div:has(> div > .ds-view-header):has(> div > div > .grid.grid-cols-2.gap-3.md\:grid-cols-4.xl\:grid-cols-7)) .ds-view-title {
    color: var(--customer-ai-ink) !important;
    font-size: 30px !important;
    line-height: 1.05 !important;
    font-weight: 600 !important;
    letter-spacing: -0.025em !important;
  }

  :where(div:has(> div > .ds-view-header):has(> div > div > .grid.grid-cols-2.gap-3.md\:grid-cols-4.xl\:grid-cols-7)) .ds-view-desc {
    color: var(--customer-ai-secondary) !important;
  }

  :where(div:has(> div > .ds-view-header):has(> div > div > .grid.grid-cols-2.gap-3.md\:grid-cols-4.xl\:grid-cols-7)) .ds-view-header button {
    min-height: 40px;
    border-color: var(--customer-ai-line) !important;
    border-radius: 999px !important;
    background: var(--customer-ai-card) !important;
    box-shadow: none !important;
  }

  /* Main content cards: crisp white decision surfaces on the warm shell. */
  :where(div:has(> div > .ds-view-header):has(> div > div > .grid.grid-cols-2.gap-3.md\:grid-cols-4.xl\:grid-cols-7)) > div > div:not(.ds-view-rule) {
    border-color: var(--customer-ai-line) !important;
  }

  /* Data basis: six neutral metrics + one semantic watch metric.
     Avoid introducing a decorative rainbow that conflicts with the reference. */
  :where(div:has(> div > .ds-view-header):has(> div > div > .grid.grid-cols-2.gap-3.md\:grid-cols-4.xl\:grid-cols-7)) .grid.grid-cols-2.gap-3.md\:grid-cols-4.xl\:grid-cols-7 > div {
    min-height: 86px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--customer-ai-muted) !important;
    border-color: var(--customer-ai-line-faint) !important;
    border-top: 3px solid rgba(32, 30, 29, 0.16) !important;
    box-shadow: none !important;
  }

  :where(div:has(> div > .ds-view-header):has(> div > div > .grid.grid-cols-2.gap-3.md\:grid-cols-4.xl\:grid-cols-7)) .grid.grid-cols-2.gap-3.md\:grid-cols-4.xl\:grid-cols-7 > div:last-child {
    background: var(--customer-ai-watch-soft) !important;
    border-top-color: var(--customer-ai-watch) !important;
  }

  /* Forecast: semantic colour is used only because these cards represent risk. */
  :where(div:has(> div > .ds-view-header):has(> div > div > .grid.grid-cols-2.gap-3.md\:grid-cols-4.xl\:grid-cols-7)) > div > div:nth-of-type(2) .grid.grid-cols-1.gap-3.md\:grid-cols-3 > :nth-child(1) > div,
  :where(div:has(> div > .ds-view-header):has(> div > div > .grid.grid-cols-2.gap-3.md\:grid-cols-4.xl\:grid-cols-7)) > div > div:nth-of-type(2) .grid.grid-cols-1.gap-3.md\:grid-cols-3 > :nth-child(1) > button > div {
    background: var(--customer-ai-watch-soft) !important;
    border-color: rgba(194, 106, 6, 0.20) !important;
    border-top: 3px solid var(--customer-ai-watch) !important;
  }

  :where(div:has(> div > .ds-view-header):has(> div > div > .grid.grid-cols-2.gap-3.md\:grid-cols-4.xl\:grid-cols-7)) > div > div:nth-of-type(2) .grid.grid-cols-1.gap-3.md\:grid-cols-3 > :nth-child(2) > div,
  :where(div:has(> div > .ds-view-header):has(> div > div > .grid.grid-cols-2.gap-3.md\:grid-cols-4.xl\:grid-cols-7)) > div > div:nth-of-type(2) .grid.grid-cols-1.gap-3.md\:grid-cols-3 > :nth-child(2) > button > div {
    background: var(--customer-ai-critical-soft) !important;
    border-color: rgba(174, 24, 0, 0.18) !important;
    border-top: 3px solid var(--customer-ai-critical) !important;
  }

  :where(div:has(> div > .ds-view-header):has(> div > div > .grid.grid-cols-2.gap-3.md\:grid-cols-4.xl\:grid-cols-7)) > div > div:nth-of-type(2) .grid.grid-cols-1.gap-3.md\:grid-cols-3 > :nth-child(3) {
    background: var(--customer-ai-muted) !important;
    border-color: var(--customer-ai-line-faint) !important;
    border-top: 3px solid rgba(32, 30, 29, 0.16) !important;
  }

  /* Risk and analysis rows: stronger hierarchy without changing state meaning. */
  :where(div:has(> div > .ds-view-header):has(> div > div > .grid.grid-cols-2.gap-3.md\:grid-cols-4.xl\:grid-cols-7)) > div > div:nth-of-type(3) > div:first-child button > div {
    transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
  }

  :where(div:has(> div > .ds-view-header):has(> div > div > .grid.grid-cols-2.gap-3.md\:grid-cols-4.xl\:grid-cols-7)) > div > div:nth-of-type(3) > div:first-child button:hover > div {
    transform: translateY(-1px);
    border-color: rgba(32, 30, 29, 0.16) !important;
    box-shadow: 0 7px 18px rgba(45, 43, 43, 0.08) !important;
  }

  :where(div:has(> div > .ds-view-header):has(> div > div > .grid.grid-cols-2.gap-3.md\:grid-cols-4.xl\:grid-cols-7)) > div > div:nth-of-type(3) > div:last-child > div:last-child > div {
    background: var(--customer-ai-muted) !important;
    border-color: var(--customer-ai-line-faint) !important;
  }

  /* Keep action controls understated and consistent with Tjener vi penge?. */
  :where(div:has(> div > .ds-view-header):has(> div > div > .grid.grid-cols-2.gap-3.md\:grid-cols-4.xl\:grid-cols-7)) button[class*="border"] {
    border-radius: 999px;
  }

  @media (max-width: 1099px) {
    :where(div:has(> div > .ds-view-header):has(> div > div > .grid.grid-cols-2.gap-3.md\:grid-cols-4.xl\:grid-cols-7)) {
      padding: 8px !important;
    }

    :where(div:has(> div > .ds-view-header):has(> div > div > .grid.grid-cols-2.gap-3.md\:grid-cols-4.xl\:grid-cols-7)) > div {
      padding: 14px !important;
      gap: 12px !important;
      border-radius: 18px !important;
      box-shadow: 0 1px 3px rgba(45, 43, 43, 0.07) !important;
    }

    :where(div:has(> div > .ds-view-header):has(> div > div > .grid.grid-cols-2.gap-3.md\:grid-cols-4.xl\:grid-cols-7)) .grid.grid-cols-2.gap-3.md\:grid-cols-4.xl\:grid-cols-7 > div {
      min-height: 78px;
    }
  }
}