/*
  covetrusTheme-dark.css

  Dark mode overrides for covetrusTheme.min.css.
  All rules are prefixed with html.dark and loaded after the CDN stylesheet
  in index.html so equal-specificity dark rules win by source order.

  Intended to eventually be promoted to the CDN alongside covetrusTheme.min.css.

  Source colours from covetrusTheme light:
    accent blue  #1474e5 / hover #0e59c4 / focus-ring #b3e0ff
    danger red   #d8193b / hover #b01332
    success      #00855d
    neutral-black #191919 / neutral-600 #6e6e6e / neutral-400 #a9a9a9

  Dark palette used here:
    surface-0    #1e1e2e   (component backgrounds)
    surface-1    #313244   (elevated / hover fills)
    surface-deep #181825   (sidebar, deep backgrounds)
    text-primary #cdd6f4
    text-muted   #a6adc8
    text-subtle  #6c7086
    border       #45475a
    border-strong #585b70
    accent       #46a2fb
    accent-hover #75c1ff
    accent-ring  rgba(70,162,251,0.4)
    danger       #f24c59
    danger-hover #ff6b7a
    success      #a6e3a1  (text on dark bg)
    success-bg   #0d2f28
    warning      #fbbf24  (text on dark bg)
    warning-bg   #312308
*/

/* ─── Shell light-mode corrections ───────────────────────────────────────── */
/*
  The new shell's main content area is slightly off-white, making pure-white
  component backgrounds look inset/detached. Scoped to [ng-version^="1"] so
  only Angular v12-v19 micro UIs are affected — the v21 navbar (ng-version
  starts with "2") and other v21 apps are excluded.
*/

/* Tertiary buttons: white → transparent so they blend with any surface. */
[ng-version^="1"] .cv-button-tertiary {
  background: transparent;
}

/* Banners: white → transparent so they sit flush with the shell surface. */
[ng-version^="1"] .cv-banner {
  background-color: transparent;
}

/* ─── Base component ──────────────────────────────────────────────────────── */

html.dark .cv-component {
  color: #cdd6f4;
}

/* ─── Buttons — base disabled state ──────────────────────────────────────── */

html.dark .cv-button:disabled {
  color: #6c7086;
  background: #313244;
  border-color: transparent;
  cursor: default;
}

/* ─── cv-button-primary ───────────────────────────────────────────────────── */

html.dark .cv-button-primary {
  color: #0f172a;
  background: #46a2fb;
  border: none;
}
html.dark .cv-button-primary:enabled:hover {
  background: #75c1ff;
  color: #0f172a;
  border-color: #75c1ff;
  box-shadow: 0 3px 1px -2px rgba(0,0,0,.3), 0 3px 4px 0 rgba(0,0,0,.14), 0 1px 8px 0 rgba(0,0,0,.12);
}
html.dark .cv-button-primary:enabled:focus {
  box-shadow: 0 0 0 0.125rem rgba(70,162,251,0.4);
}
html.dark .cv-button-primary:enabled:active {
  background: #75c1ff;
  color: #0f172a;
  border-color: #75c1ff;
}

/* ─── cv-button-secondary ────────────────────────────────────────────────── */

html.dark .cv-button-secondary {
  color: #46a2fb;
  background: transparent;
  border: 0.0625rem solid #46a2fb;
}
html.dark .cv-button-secondary:enabled:hover {
  background: rgba(70,162,251,0.08);
  color: #75c1ff;
  border-color: #75c1ff;
  box-shadow: 0 3px 1px -2px rgba(0,0,0,.3), 0 3px 4px 0 rgba(0,0,0,.14), 0 1px 8px 0 rgba(0,0,0,.12);
}
html.dark .cv-button-secondary:enabled:focus {
  box-shadow: 0 0 0 0.125rem rgba(70,162,251,0.4);
}
html.dark .cv-button-secondary:enabled:active {
  background: rgba(70,162,251,0.08);
  color: #46a2fb;
  border-color: #46a2fb;
}

/* ─── cv-button-tertiary ─────────────────────────────────────────────────── */
/*
  Light mode: white bg, no border, blue text.
  Dark mode: transparent bg, no border, muted text.
  Hover: no fill, blue outline (box-shadow ring), brighter text — same
         behaviour as light-mode hover but adapted to dark surface.
*/

html.dark .cv-button-tertiary {
  color: #a6adc8;
  background: transparent;
  border: none;
}
html.dark .cv-button-tertiary:enabled:hover {
  background: transparent;
  color: #cdd6f4;
  border-color: #46a2fb;
  box-shadow: 0 0 0 0.0625rem #46a2fb;
}
html.dark .cv-button-tertiary:enabled:focus {
  box-shadow: 0 0 0 0.125rem rgba(70,162,251,0.4);
}
html.dark .cv-button-tertiary:enabled:focus:hover {
  box-shadow: 0 0 0 0.125rem rgba(70,162,251,0.4), 0 0 0 0.1875rem #46a2fb;
}
html.dark .cv-button-tertiary:enabled:active {
  background: transparent;
  color: #cdd6f4;
  border-color: rgba(70,162,251,0.5);
}

/* ─── cv-button-danger ───────────────────────────────────────────────────── */

html.dark .cv-button-danger {
  color: #fff;
  background: #f24c59;
  border: none;
}
html.dark .cv-button-danger:enabled:hover {
  background: #ff6b7a;
  color: #fff;
  border-color: #ff6b7a;
}
html.dark .cv-button-danger:enabled:focus {
  box-shadow: 0 0 0 0.125rem rgba(242,76,89,0.4);
}
html.dark .cv-button-danger:enabled:active {
  background: #ff6b7a;
  color: #fff;
  border-color: #ff6b7a;
}

/* ─── Tags ───────────────────────────────────────────────────────────────── */

html.dark .cv-tag {
  background: #313244;
  color: #cdd6f4;
}
html.dark .cv-tag.cv-tag-default {
  background-color: #1e3a5f;
  color: #89b4fa;
}
html.dark .cv-tag.cv-tag-success {
  background-color: #0d2f28;
  color: #a6e3a1;
}
html.dark .cv-tag.cv-tag-danger {
  background-color: #3b1f24;
  color: #f38ba8;
}
html.dark .cv-tag-neutral {
  background-color: #313244;
  color: #a6adc8;
}
html.dark .cv-tag-multiline {
  background: #313244;
  color: #cdd6f4;
}

/* ─── Badges ─────────────────────────────────────────────────────────────── */

html.dark .cv-badge {
  background: #46a2fb;
  color: #0f172a;
}
html.dark .cv-badge.cv-badge-success {
  background-color: #a6e3a1;
  color: #0d2f28;
}
html.dark .cv-badge.cv-badge-danger {
  background-color: #f38ba8;
  color: #3b1f24;
}
html.dark .cv-badge.cv-badge-warning {
  background-color: #fbbf24;
  color: #312308;
}

/* ─── Cards ──────────────────────────────────────────────────────────────── */

html.dark .cv-card {
  background-color: #1e1e2e;
  border-color: #45475a;
  color: #cdd6f4;
}
html.dark .cv-card .cv-card-content .cv-card-content-button {
  background: #313244;
}

/* ─── Panels ─────────────────────────────────────────────────────────────── */

html.dark .cv-panel {
  background-color: #1e1e2e;
  border-color: #45475a;
  color: #cdd6f4;
}

/* ─── Switch ─────────────────────────────────────────────────────────────── */

html.dark .cv-switch.cv-switch-checked .cv-switch-container .cv-switch-input .cv-switch-slider {
  background: #46a2fb;
}
html.dark .cv-switch.cv-disabled .cv-switch-container .cv-switch-input .cv-switch-slider {
  background: rgba(70,162,251,0.3);
  opacity: 1;
}

/* ─── Layout / Sidebar ───────────────────────────────────────────────────── */

html.dark .cv-layout-wrapper .cv-layout-sidebar {
  background: #181825;
  box-shadow: 0 3px 1px -2px rgba(0,0,0,.4), 0 2px 2px 0 rgba(0,0,0,.3), 0 1px 5px 0 rgba(0,0,0,.24);
}

/* ─── Dropdown menu ──────────────────────────────────────────────────────── */

html.dark .cv-dropdown-menu {
  background: #1e1e2e;
  color: #cdd6f4;
  border: 1px solid #45475a;
  box-shadow: 0 3px 5px -1px rgba(0,0,0,.4), 0 6px 10px 0 rgba(0,0,0,.3), 0 1px 18px 0 rgba(0,0,0,.2);
}

/* ─── Divider ────────────────────────────────────────────────────────────── */

html.dark .cv-divider.cv-divider-horizontal {
  border-top-color: #45475a;
}

/* ─── Background utility classes ────────────────────────────────────────── */

/* Neutral greys — map light neutrals to dark surface equivalents. */
html.dark .cv-bg-neutral-white { background-color: #1e1e2e; }
html.dark .cv-bg-neutral-100   { background-color: #313244; }
html.dark .cv-bg-neutral-150   { background-color: #252535; }
html.dark .cv-bg-neutral-200   { background-color: #45475a; }
html.dark .cv-bg-neutral-250   { background-color: #585b70; }
html.dark .cv-bg-neutral-300   { background-color: #6c7086; }

/* Semantic tints — light-tint backgrounds become dark-tinted equivalents. */
html.dark .cv-bg-utility-default-100 { background-color: #1e3a5f; }
html.dark .cv-bg-utility-warning-100,
html.dark .cv-bg-utility-warning-150 { background-color: #312308; }
html.dark .cv-bg-utility-success-100 { background-color: #0d2f28; }
html.dark .cv-bg-utility-danger-100  { background-color: #3b1f24; }

/* ─── Border utility classes ─────────────────────────────────────────────── */

/* cv-border-neutral-* classes don't exist in the CDN light stylesheet but
   are used in templates, relying on currentColor as fallback. Adding explicit
   dark values prevents overly-bright currentColor borders. */
html.dark .cv-border-neutral-400 { border-color: #45475a; }
html.dark .cv-border-neutral-300 { border-color: #585b70; }
html.dark .cv-border-neutral-200 { border-color: #6c7086; }

/* ─── Text utility classes ───────────────────────────────────────────────── */

html.dark .cv-text-neutral-black { color: #cdd6f4; }
html.dark .cv-text-neutral-600   { color: #a6adc8; }

/* ─── Body-appended v12 dropdown panels ─────────────────────────────────── */
/*
  p-dropdown panels are body-appended by default in PrimeNG v12, placing them
  outside the dark bundle's :where([ng-version^="1"]) scope. Direct rules here
  win by specificity and source order over the light theme.
*/

html.dark .p-dropdown-panel:not([data-p]) {
  background: #1e1e2e;
  border-color: #45475a;
  color: #cdd6f4;
}
html.dark .p-dropdown-panel:not([data-p]) .p-dropdown-header {
  background: #313244;
  border-bottom-color: #45475a;
  color: #cdd6f4;
}
html.dark .p-dropdown-panel:not([data-p]) .p-dropdown-filter {
  background: #1e1e2e;
  border-color: #45475a;
  color: #cdd6f4;
}
html.dark .p-dropdown-panel:not([data-p]) .p-dropdown-item {
  color: #cdd6f4;
  background: transparent;
}
html.dark .p-dropdown-panel:not([data-p]) .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
  background: #313244;
  color: #cdd6f4;
}
html.dark .p-dropdown-panel:not([data-p]) .p-dropdown-item.p-highlight {
  background: rgba(70, 162, 251, 0.16);
  color: #89b4fa;
}

/* ─── Body-appended v12 overlay menus ───────────────────────────────────── */
/*
  The dark bundle uses descendant-combinator scoping, so it can style elements
  INSIDE body-appended overlays but cannot style the overlay root itself.
  These rules target the root directly (no scope wrapper) and win by both
  higher specificity and later source order over PrimeNG light theme rules.
  Covers p-splitButton dropdown (TieredMenu) and standalone p-menu overlays.
*/

html.dark .p-tieredmenu:not([data-p]),
html.dark .p-menu:not([data-p]) {
  background: #1e1e2e;
  border-color: #45475a;
  color: #cdd6f4;
}
html.dark .p-tieredmenu:not([data-p]) .p-menuitem-link,
html.dark .p-menu:not([data-p]) .p-menuitem-link {
  color: #cdd6f4;
}
html.dark .p-tieredmenu:not([data-p]) .p-menuitem-link .p-menuitem-text,
html.dark .p-menu:not([data-p]) .p-menuitem-link .p-menuitem-text {
  color: #cdd6f4;
}
html.dark .p-tieredmenu:not([data-p]) .p-menuitem-icon,
html.dark .p-menu:not([data-p]) .p-menuitem-icon {
  color: #46a2fb;
}
html.dark .p-tieredmenu:not([data-p]) .p-menuitem-link:not(.p-disabled):hover,
html.dark .p-menu:not([data-p]) .p-menuitem-link:not(.p-disabled):hover {
  background: #313244;
}
html.dark .p-tieredmenu:not([data-p]) .p-menu-separator,
html.dark .p-menu:not([data-p]) .p-menu-separator {
  border-top-color: #45475a;
}

/* ─── Icon colour utilities ──────────────────────────────────────────────── */

/* Semantic colours stay recognisable in dark mode; only the "black" and
   "neutral" neutrals need remapping for legibility. */
html.dark .cvi-color-black   { color: #cdd6f4; }
html.dark .cvi-color-neutral { color: #a6adc8; }

/* ─── cvet-banner (Covetrus UI Library component) ───────────────────────── */
/*
  TODO: Long-term, add dark mode support directly to the cvet-banner component
  source at Covetrus-UI-Library/projects/covetrus-ui-lib/src/components/banner.
  These shell overrides cover all micro UIs that consume cvet-banner until that
  work is done. The component uses ViewEncapsulation.None so global rules apply.
*/

html.dark .cv-banner {
  background-color: #1e1e2e;
  color: #cdd6f4;
}

/* Border-left accent colours */
html.dark .cv-banner.cv-banner-info    { border-left-color: #46a2fb; }
html.dark .cv-banner.cv-banner-success { border-left-color: #a6e3a1; }
html.dark .cv-banner.cv-banner-warning { border-left-color: #fbbf24; }
html.dark .cv-banner.cv-banner-alert   { border-left-color: #f38ba8; }

/* Icon colours */
html.dark .cv-banner.cv-banner-info    .cv-banner-icon { color: #46a2fb; }
html.dark .cv-banner.cv-banner-success .cv-banner-icon { color: #a6e3a1; }
html.dark .cv-banner.cv-banner-warning .cv-banner-icon { color: #fbbf24; }
html.dark .cv-banner.cv-banner-alert   .cv-banner-icon { color: #f38ba8; }

/* Coloured-background variant (background="color") */
html.dark .cv-banner.cv-banner-info.cv-banner-color    { background-color: #1e3a5f; }
html.dark .cv-banner.cv-banner-success.cv-banner-color { background-color: #0d2f28; }
html.dark .cv-banner.cv-banner-warning.cv-banner-color { background-color: #312308; }
html.dark .cv-banner.cv-banner-alert.cv-banner-color   { background-color: #3b1f24; }

/* Action button background tracks its container colour in the colour variant */
html.dark .cv-banner.cv-banner-info.cv-banner-color    .cv-button { background: #1e3a5f; }
html.dark .cv-banner.cv-banner-success.cv-banner-color .cv-button { background: #0d2f28; }
html.dark .cv-banner.cv-banner-warning.cv-banner-color .cv-button { background: #312308; }
html.dark .cv-banner.cv-banner-alert.cv-banner-color   .cv-button { background: #3b1f24; }