/* KAN-140: light admin chrome (opt-in theme).
   Every rule is gated on html[data-admin-theme="light"], set before first paint by the inline script
   in layouts/main.hbs from the user's localStorage preference. DARK IS THE DEFAULT: with the attribute
   absent or "dark", none of these rules match and the portal shows the stock dark theme. The user
   flips it from Settings > My Profile (Appearance toggle). This never edits the base theme.

   It recolors only the two chrome surfaces (left sidebar + top bar) from the theme's dark #333 to the
   wallet-2026 warm greige, and flips the neutral nav text/icons from light-on-dark to dark-on-light.
   Deliberately UNTOUCHED: the lifecycle group colours (KAN-278 .bg-visitor/.bg-subscriber/.bg-customer/
   .bg-member and their .white-indent submenus); only NEUTRAL items are recolored, via :not(.bg-*). */

:root {
  /* Consumed only by the light rules below. The chrome is a deliberately DEEPER warm greige than the
     white content, so the two surfaces read as distinct even though both are light. */
  --wl-rail: #e9e4da;      /* top bar + left sidebar surface (one continuous greige L) */
  --wl-topbar: #e9e4da;    /* matches the rail so the chrome reads as one shape */
  --wl-line: #d5cec1;      /* seam / hairline borders */
  --wl-ink: #16181d;       /* primary text */
  --wl-muted: #6b7280;     /* secondary text */
  --wl-hover: #ddd6c8;     /* hover / active tint */
}

/* ---- surfaces (beat the #333 !important .gradient-rtl / .gradient-ltr utility classes) ----
   The broad rule recolors EVERY gradient-rtl element inside the sidebar (rail, x-navigation list,
   and the profile block, which also carries gradient-rtl) EXCEPT the lifecycle .white-indent submenus. */
html[data-admin-theme="light"] .page-container.gradient-rtl { background-color: var(--wl-rail) !important; }
html[data-admin-theme="light"] .page-sidebar.gradient-rtl,
html[data-admin-theme="light"] .page-sidebar .x-navigation,
html[data-admin-theme="light"] .page-sidebar .gradient-rtl:not(.white-indent) { background-color: var(--wl-rail) !important; }

/* .page-content also carries gradient-ltr (#333); its background only peeks through at the content
   panel's rounded corners, so recolor those slivers to the chrome greige. White content is painted
   by .page-content-wrap on top. */
html[data-admin-theme="light"] .page-content.gradient-ltr { background-color: var(--wl-rail) !important; }

/* top navigation bar: same greige as the rail. No borders/shadows between the chrome pieces; the
   greige-vs-white contrast separates chrome from content. */
html[data-admin-theme="light"] .x-navigation.x-navigation-horizontal.x-navigation-panel.gradient-ltr,
html[data-admin-theme="light"] .x-navigation.x-navigation-horizontal.x-navigation-panel {
  background-color: var(--wl-topbar) !important;
}

/* ---- neutral sidebar items: dark-on-light. :not(.bg-*) leaves the coloured lifecycle groups alone ---- */
html[data-admin-theme="light"] .page-sidebar .x-navigation > li > a:not(.bg-visitor):not(.bg-subscriber):not(.bg-customer):not(.bg-member),
html[data-admin-theme="light"] .page-sidebar .x-navigation ul:not(.white-indent) > li > a:not(.bg-visitor):not(.bg-subscriber):not(.bg-customer):not(.bg-member) {
  color: var(--wl-ink) !important;
}
html[data-admin-theme="light"] .page-sidebar .x-navigation > li > a:not(.bg-visitor):not(.bg-subscriber):not(.bg-customer):not(.bg-member):hover,
html[data-admin-theme="light"] .page-sidebar .x-navigation > li.active > a:not(.bg-visitor):not(.bg-subscriber):not(.bg-customer):not(.bg-member),
html[data-admin-theme="light"] .page-sidebar .x-navigation ul:not(.white-indent) > li > a:not(.bg-visitor):not(.bg-subscriber):not(.bg-customer):not(.bg-member):hover,
html[data-admin-theme="light"] .page-sidebar .x-navigation ul:not(.white-indent) > li.active > a:not(.bg-visitor):not(.bg-subscriber):not(.bg-customer):not(.bg-member) {
  background-color: var(--wl-hover) !important;
  color: var(--wl-ink) !important;
}

/* openable chevrons + item dividers on neutral items */
html[data-admin-theme="light"] .page-sidebar .x-navigation > li.xn-openable:before { color: var(--wl-muted) !important; }
html[data-admin-theme="light"] .page-sidebar .x-navigation > li { border-color: var(--wl-line) !important; }

/* ---- profile block ---- */
html[data-admin-theme="light"] .x-navigation > li.xn-profile { border-bottom-color: var(--wl-line) !important; }
html[data-admin-theme="light"] .x-navigation > li.xn-profile .profile-data-name { color: var(--wl-ink) !important; }
html[data-admin-theme="light"] .x-navigation > li.xn-profile .profile-data-company,
html[data-admin-theme="light"] .x-navigation > li.xn-profile .profile-data-title { color: var(--wl-muted) !important; }

/* ---- top-bar icons (Chat / Steps / Alerts / Files / Help / Give / News / Logout + the minimize toggle) ---- */
html[data-admin-theme="light"] .x-navigation.x-navigation-horizontal .xn-icon-button > a,
html[data-admin-theme="light"] .x-navigation.x-navigation-horizontal .top-nav-button > a { color: var(--wl-ink) !important; }
html[data-admin-theme="light"] .x-navigation.x-navigation-horizontal .topnav-icon-text { color: var(--wl-muted) !important; }
html[data-admin-theme="light"] .x-navigation.x-navigation-horizontal .xn-icon-button > a:hover {
  background-color: var(--wl-hover) !important;
  color: #000 !important;
}
html[data-admin-theme="light"] .x-navigation.x-navigation-horizontal .xn-icon-button > a:hover .topnav-icon-text { color: var(--wl-ink) !important; }

/* the minimized (50px) sidebar logo tile keeps a dark chip so the reversed w-logo mark stays visible */
html[data-admin-theme="light"] .x-navigation.x-navigation-minimized > li.xn-logo > a:first-child,
html[data-admin-theme="light"] .x-navigation.x-navigation-minimized > li.xn-logo > a:first-child:hover {
  background-color: #333 !important;
}