/* Farm Tools CMS. Wagtail semantic error/warning/success tokens stay intact. */
:root {
  --farm-cms-deep: #1a3949;
  --farm-cms-paper: #f0f6fa;
  --farm-cms-ink: #253c49;
  --farm-cms-line: #d6e5ee;
  --farm-cms-link: #1f4a60;
  --farm-cms-link-dark: #a5eaff;
  --farm-cms-button: #a5eaff;
  --farm-cms-button-hover: #91ddff;
  --farm-cms-button-text: #1a3949;
  --farm-cms-radius: 12px;
  --w-color-primary: var(--farm-ui-sidebar, #1a3949);
  --w-color-primary-200: #254759;
  --w-color-secondary: var(--farm-ui-primary, #28576f);
  --w-color-secondary-400: var(--farm-ui-primary-hover, #1f4a60);
  --w-color-secondary-100: var(--farm-ui-accent, #a5eaff);
  --w-color-secondary-75: #cfeeff;
  --w-color-secondary-50: #e4f2fb;
  --w-color-surface-menus: var(--farm-cms-deep);
  --w-color-surface-menu-item-active: var(--farm-ui-accent, #a5eaff);
  --w-color-text-label-menus-default: #cbdce5;
  --w-color-text-label-menus-active: var(--farm-cms-button-text, #1a3949);
  --w-color-text-label-menus-hover: #ffffff;
  --w-login-fullscreen-background: radial-gradient(ellipse at top left, #315061, #1a3949 65%);
}

:root.w-theme-light,
:root.w-theme-system {
  --w-color-surface-page: var(--farm-cms-paper);
  --w-color-surface-header: #f7fbfe;
  --w-color-surface-field: #ffffff;
  --w-color-surface-dashboard-panel: #ffffff;
  --w-color-text-context: var(--farm-cms-ink);
  --w-color-text-label: var(--farm-cms-ink);
  --w-color-text-link-default: var(--farm-cms-link);
  --w-color-text-link-hover: #1a3949;
  --w-color-border-furniture: var(--farm-cms-line);
  --w-color-surface-button-default: var(--farm-ui-primary, #1f4a60);
  --w-color-surface-button-hover: var(--farm-ui-primary-hover, #1a3949);
  --w-color-text-button: var(--farm-ui-primary-text, #ffffff);
}

:root.w-theme-dark {
  --w-color-surface-page: #172831;
  --w-color-surface-header: #1c313b;
  --w-color-surface-field: #1f3541;
  --w-color-surface-dashboard-panel: #1f3541;
  --w-color-text-context: #e5f2f9;
  --w-color-text-label: #e5f2f9;
  --w-color-text-link-default: var(--farm-cms-link-dark);
  --w-color-text-link-hover: #dcf8ff;
  --w-color-border-furniture: #385565;
}

@media (prefers-color-scheme: dark) {
  :root.w-theme-system {
    --w-color-surface-page: #172831;
    --w-color-surface-header: #1c313b;
    --w-color-surface-field: #1f3541;
    --w-color-surface-dashboard-panel: #1f3541;
    --w-color-text-context: #e5f2f9;
    --w-color-text-label: #e5f2f9;
    --w-color-text-link-default: var(--farm-cms-link-dark);
    --w-color-text-link-hover: #dcf8ff;
    --w-color-border-furniture: #385565;
  }
}

body#wagtail .sidebar,
body#wagtail .sidebar-panel {
  background: var(--farm-cms-deep);
}
body#wagtail .sidebar-menu-item--active {
  border-radius: 7px;
  text-shadow: none;
}
body#wagtail .sidebar-menu-item--active > a {
  color: var(--farm-cms-button-text, #1a3949);
}
body#wagtail .sidebar-wagtail-branding,
body#wagtail .sidebar-custom-branding {
  border-radius: 0;
  width: calc(100% - 32px);
  max-width: calc(100% - 32px);
  height: auto;
  min-height: 66px;
  margin: 22px 16px 26px;
  padding: 0;
  text-align: start;
}
.farm-cms-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  color: #e8f4fb;
}
.farm-cms-brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 42px;
  flex: none;
  border: 1px solid #4c6d7f;
  border-radius: 10px;
  color: #a5eaff;
  font: italic 28px Georgia, serif;
  letter-spacing: -5px;
  padding-inline-end: 5px;
}
.farm-cms-brand-copy { min-width: 0; flex: 1; overflow: hidden; }
.farm-cms-brand-copy strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 600;
}
.farm-cms-brand-copy small {
  display: block;
  margin-top: 3px;
  color: #b0cbda;
  font-size: 10px;
  letter-spacing: .8px;
  text-transform: uppercase;
}
body#wagtail .sidebar--slim .sidebar-wagtail-branding,
body#wagtail .sidebar--slim .sidebar-custom-branding {
  width: 40px;
  max-width: 40px;
  margin-inline: 10px;
  padding: 0;
}
.sidebar--slim .farm-cms-brand-copy { display: none; }
body#wagtail .button:not(.secondary):not(.button-secondary):not(.no):not(.serious):not(.warning):not([disabled]):not(.disabled) {
  background: var(--farm-cms-button);
  border-color: transparent;
  color: var(--farm-cms-button-text);
  border-radius: 7px;
}
body#wagtail .button:not(.secondary):not(.button-secondary):not(.no):not(.serious):not(.warning):not([disabled]):not(.disabled):hover {
  background: var(--farm-cms-button-hover);
  color: var(--farm-cms-button-text);
}
body#wagtail .w-panel {
  border-radius: var(--farm-cms-radius);
}
body#wagtail .login-form input:not([type="checkbox"]) {
  border-radius: 7px;
}
body#wagtail.login .content-wrapper {
  border-radius: 16px;
  border-color: transparent;
  max-width: 29rem;
}
body#wagtail.login h1 {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -.6px;
}
.farm-cms-login-note {
  margin: -12px 0 26px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--w-color-text-context);
}
.farm-cms-login-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
  font-size: 18px;
  font-weight: 600;
  color: var(--w-color-text-label);
}
.farm-cms-login-brand .farm-cms-brand-mark {
  background: var(--farm-cms-deep);
}
body#wagtail .button:focus-visible,
body#wagtail .sidebar a:focus-visible {
  outline: 3px solid #a97017;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  body#wagtail .sidebar-wagtail-branding { transition: none; }
}

/* ---------------------------------------------------------------------------
   Sidebar sub-menu: make it readable.

   The panel took its background from --w-color-surface-menu-item-active (the
   pale accent) while its labels kept --w-color-text-label-menus-default
   (#cbdce5), which is chosen for the DARK sidebar. Pale text on a pale panel
   is unreadable - the submenu was effectively invisible.

   The panel is part of the sidebar, so it is given the sidebar's own dark
   surface and light labels, and the active item keeps the accent with dark
   text on it. Explicit rather than inherited, so a future token change cannot
   silently reintroduce the collision.
   --------------------------------------------------------------------------- */
body#wagtail .sidebar-sub-menu-panel {
  background: var(--farm-cms-deep);
  color: var(--w-color-text-label-menus-hover, #ffffff);
}

body#wagtail .sidebar-sub-menu-panel h2,
body#wagtail .sidebar-sub-menu-panel h3 {
  color: var(--w-color-text-label-menus-hover, #ffffff);
}

body#wagtail .sidebar-sub-menu-panel .sidebar-menu-item a,
body#wagtail .sidebar-sub-menu-panel a {
  color: var(--w-color-text-label-menus-default, #cbdce5);
}

/* Hover must cover BUTTONS as well as links. Sub-menu rows that open a further
   level are <button>, not <a>, so an `a:hover` rule silently misses them - and
   Wagtail paints the ACTIVE label colour (#1a3949, dark) on hover, which on
   this dark panel made the row vanish, icon and all. */
body#wagtail .sidebar-sub-menu-panel .sidebar-menu-item:not(.sidebar-menu-item--active) > a:hover,
body#wagtail .sidebar-sub-menu-panel .sidebar-menu-item:not(.sidebar-menu-item--active) > button:hover,
body#wagtail .sidebar-sub-menu-panel .sidebar-menu-item:not(.sidebar-menu-item--active) > a:focus-visible,
body#wagtail .sidebar-sub-menu-panel .sidebar-menu-item:not(.sidebar-menu-item--active) > button:focus-visible,
body#wagtail .sidebar-sub-menu-panel .sidebar-menu-item:not(.sidebar-menu-item--active):hover > a,
body#wagtail .sidebar-sub-menu-panel .sidebar-menu-item:not(.sidebar-menu-item--active):hover > button {
  color: var(--w-color-text-label-menus-hover, #ffffff);
  background: rgba(255, 255, 255, 0.1);
}

/* The icon is drawn with currentColor in some rows and a fill in others. */
body#wagtail .sidebar-sub-menu-panel .sidebar-menu-item:not(.sidebar-menu-item--active) > a:hover svg,
body#wagtail .sidebar-sub-menu-panel .sidebar-menu-item:not(.sidebar-menu-item--active) > button:hover svg,
body#wagtail .sidebar-sub-menu-panel .sidebar-menu-item:not(.sidebar-menu-item--active):hover svg {
  color: var(--w-color-text-label-menus-hover, #ffffff);
  fill: currentColor;
}

/* NOTE: do NOT re-point --w-color-text-label-menus-active on the panel. The
   open sidebar trigger renders inside this subtree and sits on the PALE accent,
   so a white active label made it unreadable - the same pale-on-pale failure
   this block exists to fix, reintroduced one element over. Colour the panel's
   own rows explicitly instead, and leave the token alone. */

/* The active row keeps the accent, so the dark label is the readable pairing. */
body#wagtail .sidebar-sub-menu-panel .sidebar-menu-item--active > a {
  background: var(--farm-ui-accent, #a5eaff);
  color: var(--farm-cms-button-text, #1a3949);
}


/* Any active sidebar row - in the panel or the main sidebar - sits on the pale
   accent, so its label and icon must be the DARK ink. Stated once, last, so no
   earlier rule can leave pale text on a pale background. */
body#wagtail .sidebar-menu-item--active > a,
body#wagtail .sidebar-menu-item--active > button,
body#wagtail .sidebar-menu-item--active > a svg,
body#wagtail .sidebar-menu-item--active > button svg {
  color: var(--farm-cms-button-text, #1a3949);
  fill: currentColor;
}

/* ---------------------------------------------------------------------------
   Sidebar hover, everywhere - the actual bug.

   Wagtail's own rule is:
       .sidebar-menu-item__link:hover { color: var(--w-color-text-label-menus-active) }
   and this theme sets that token to #1a3949, which is ALSO the sidebar's
   surface (--farm-cms-deep). So every hovered row rendered dark ink on a
   dark background - contrast 1.00, the row simply disappeared. The earlier fix
   addressed only the sub-menu panel, so the main sidebar kept doing it.

   The token has to stay dark because the ACTIVE row sits on the pale accent.
   So hover is given its own pairing, and active rows are excluded.
   --------------------------------------------------------------------------- */
body#wagtail .sidebar-menu-item:not(.sidebar-menu-item--active) > .sidebar-menu-item__link:hover,
body#wagtail .sidebar-menu-item:not(.sidebar-menu-item--active) > .sidebar-menu-item__link:focus,
body#wagtail .sidebar-menu-item:not(.sidebar-menu-item--active) > .sidebar-menu-item__link:focus-visible {
  color: var(--w-color-text-label-menus-hover, #ffffff);
  background: rgba(255, 255, 255, 0.1);
}

body#wagtail .sidebar-menu-item:not(.sidebar-menu-item--active) > .sidebar-menu-item__link:hover svg,
body#wagtail .sidebar-menu-item:not(.sidebar-menu-item--active) > .sidebar-menu-item__link:focus svg {
  color: var(--w-color-text-label-menus-hover, #ffffff);
  fill: currentColor;
}

/* ---------------------------------------------------------------------------
   The branch you are BROWSING must stay visible.

   Fixing the triple-highlight reserved the pale accent for the branch that
   holds your page (--active without --open) and removed it from the branch you
   are browsing (--active AND --open). But removing the background left those
   rows with the ACTIVE ink, #1a3949, which is the sidebar's own surface colour.
   Measured on the running admin: FarmLink and "Sales & finance" both resolved
   to colour #1a3949 on a transparent background - contrast 1.00, the row
   vanished. Reported as "the invisibility of category section and subsection
   is back", and it is the same dark-on-dark family as the earlier hover bug.

   An open branch still must not compete with the one holding your page, so it
   gets a QUIETER treatment rather than none: the normal menu label colour plus
   a faint wash, which reads as "you are in here" without claiming "your page
   is here". Specificity carries body#wagtail so Wagtail's own active rule
   cannot win it back.
   --------------------------------------------------------------------------- */
body#wagtail .sidebar-menu-item--active.sidebar-sub-menu-item--open,
body#wagtail .sidebar-menu-item--active.sidebar-sub-menu-item--open > a,
body#wagtail .sidebar-menu-item--active.sidebar-sub-menu-item--open > button {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--w-color-text-label-menus-default, #cbdce5);
}

body#wagtail .sidebar-menu-item--active.sidebar-sub-menu-item--open > a svg,
body#wagtail .sidebar-menu-item--active.sidebar-sub-menu-item--open > button svg {
  color: var(--w-color-text-label-menus-default, #cbdce5);
  fill: currentColor;
}