/* Detaljhuvudets överkant (Personal, Kontor, ärendevyerna): temat (nordic-dawn.css:208 m.fl.) tvingar border-color till grå
   med !important, så agent-/ärendefärgens 3px-kant (inline) blev en hård grå linje (Patrik: "hård kant mer än färg").
   Nu: kanten i egen färg, nedtonad; underkanten svagare. */
@media (min-width: 769px) {
  html body .detail-header-top.detail-header-top {
    border-top-color: color-mix(in srgb, var(--agent-color, var(--detail-accent, var(--accent-primary))) 50%, transparent) !important;
    border-bottom-color: color-mix(in srgb, var(--border-color) 30%, transparent) !important;
  }
}
/* Färgväljarens ruta (agent/kontor/profil): rund och mjuk som paletten i stället för en hård fyrkant. */
@media (min-width: 769px) {
  html body input[type="color"]#agent-color-picker, html body input[type="color"]#new-agent-color,
  html body input[type="color"]#no-color-picker, html body input[type="color"]#inp-office-color-inline,
  html body input[type="color"]#pref-color {
    width: 26px !important; height: 26px !important; padding: 0 !important; border: none !important;
    border-radius: 50% !important; overflow: hidden; background: transparent !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-primary) 8%, transparent) !important;
  }
  html body input[type="color"]#agent-color-picker::-webkit-color-swatch-wrapper, html body input[type="color"]#new-agent-color::-webkit-color-swatch-wrapper,
  html body input[type="color"]#no-color-picker::-webkit-color-swatch-wrapper, html body input[type="color"]#inp-office-color-inline::-webkit-color-swatch-wrapper,
  html body input[type="color"]#pref-color::-webkit-color-swatch-wrapper { padding: 0; }
  html body input[type="color"]#agent-color-picker::-webkit-color-swatch, html body input[type="color"]#new-agent-color::-webkit-color-swatch,
  html body input[type="color"]#no-color-picker::-webkit-color-swatch, html body input[type="color"]#inp-office-color-inline::-webkit-color-swatch,
  html body input[type="color"]#pref-color::-webkit-color-swatch { border: none; border-radius: 50%; }
}
/* Huvudets pills (AGENT, @användare, kontorets id-pills) var bara text + kant, utan fyllning
   (Patrik: "ingen färg alls på pills där … samma färg som aktiv och arkiverad") ⇒ samma platta som räknarpillsen. */
@media (min-width: 769px) {
  html body #view-admin .detail-header-top .header-pills-row .pill.pill[style] {
    background: var(--pill-state-active-bg) !important;
    color: var(--pill-state-active-text) !important;
    border-color: color-mix(in srgb, var(--accent-primary) 14%, transparent) !important;
    opacity: 1 !important;
  }
}
/* Kontorets räknare (#office-ticket-counter-cell, inline-spans utan klass i admin-office-detail-view.js) = agentens räknarpills. */
@media (min-width: 769px) {
  html body #view-admin #office-ticket-counter-cell span[style*="border-radius:24px"] {
    background: var(--pill-state-active-bg) !important;
    color: var(--pill-state-active-text) !important;
    border-color: color-mix(in srgb, var(--accent-primary) 14%, transparent) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
  }
}
/* Kontorets och agentens detaljpaneler: temats mörka panelkant (nordic-dawn.css:3300 m.fl.) ⇒ mjuk kant. */
@media (min-width: 769px) {
  html body #view-admin #admin-detail-content .detail-body .glass-panel.glass-panel {
    border-color: color-mix(in srgb, var(--border-color) 45%, transparent) !important;
  }
}

@media (min-width: 769px) {
  /* Detaljhuvudet (personal + enhet, Patrik 10-15): räknarna uppe till höger på namnradens nivå, inte egen rad. */
  html body #view-admin #admin-detail-content .detail-header-top:has(> .agent-desktop-counter-wrap),
  html body #view-admin #admin-detail-content .detail-header-top:has(> #office-ticket-counter-cell) {
    flex-wrap: nowrap !important; align-items: flex-start !important; gap: 16px !important;
  }
  html body #view-admin #admin-detail-content .detail-header-top > :first-child { flex: 1 1 auto !important; min-width: 0 !important; }
  html body #view-admin #admin-detail-content .detail-header-top > .agent-desktop-counter-wrap.agent-desktop-counter-wrap,
  html body #view-admin #admin-detail-content .detail-header-top > #office-ticket-counter-cell {
    flex: 0 0 auto !important; width: auto !important; align-self: flex-start !important; align-items: flex-end !important;
    margin: 4px 0 0 auto !important; justify-content: flex-end !important;
  }
  html body #view-admin .agent-desktop-counter-wrap .agent-counter-pills.agent-counter-pills { justify-content: flex-end !important; flex-wrap: nowrap !important; }
}
@media (min-width: 769px) {
  /* Subtil fade i agentens/enhetens färg över huvudet (Patrik 10-15); ligger under innehållet. */
  html body #view-admin #admin-detail-content .admin-user-detail > .detail-header-top,
  html body #view-admin #admin-detail-content .admin-office-detail > .detail-header-top { position: relative !important; isolation: isolate; }
  html body #view-admin #admin-detail-content .admin-user-detail > .detail-header-top::before,
  html body #view-admin #admin-detail-content .admin-office-detail > .detail-header-top::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
    background: linear-gradient(105deg,
      color-mix(in srgb, var(--unit-color, var(--agent-color, var(--accent-primary))) 16%, transparent) 0%,
      color-mix(in srgb, var(--unit-color, var(--agent-color, var(--accent-primary))) 7%, transparent) 45%,
      transparent 90%);
  }
}