/*
 * Sidebar-theme page headers
 * ----------------------------------------------------------------
 * Every page header band in the app is a .lksjs-pepe element (About,
 * Accounting, Balances, Customers, Expenses, Invoicing, Payments,
 * Payroll, Reporting, Routes, Search, Settings, Staff, User Management,
 * WhatsApp, ...). main.css hard-codes that band to a blue gradient, so a
 * green sidebar used to sit next to blue headers.
 *
 * Utils.applySidebarTheme() now derives a header palette from the active
 * sidebar theme's hue and writes these variables on :root:
 *
 *   --header-top / --header-bottom   light band gradient
 *   --header-ink                     title text colour
 *   --header-accent                  the left accent bar
 *   --header-dark-top / --header-dark-bottom / --header-dark-ink
 *
 * So picking a sidebar colour recolours all page headers at once.
 *
 * This file is loaded last on purpose. It overrides only the background,
 * the left border colour and the title colour, which is the minimum needed
 * to recolour the band. Padding, radius, border width, shadow and the
 * mobile font-size rules set by modern-ui-enhancements.css and
 * mobile-responsive-fixes.css are deliberately left alone.
 *
 * The var() fallbacks reproduce the original blue, so if the variables are
 * ever missing (e.g. before Utils.fetchSidebarTheme resolves) headers still
 * look correct instead of turning transparent.
 */

.lksjs-pepe {
  background: linear-gradient(135deg, var(--header-top, #e3f2fd), var(--header-bottom, #bbdefb)) !important;
  border-left-color: var(--header-accent, #1565c0) !important;
  box-shadow: 0 4px 14px var(--header-shadow, rgba(37, 99, 235, 0.07)) !important;
}

.lksjs-pepe h3 {
  color: var(--header-ink, #0d47a1) !important;
}

/* Dark mode keeps its dark band, tinted to the same sidebar hue. */
[data-theme="dark"] .lksjs-pepe {
  background: linear-gradient(135deg, var(--header-dark-top, #1a237e), var(--header-dark-bottom, #283593)) !important;
  border-left-color: var(--header-accent, #5c6bc0) !important;
}

[data-theme="dark"] .lksjs-pepe h3 {
  color: var(--header-dark-ink, #e3f2fd) !important;
}

/*
 * Breadcrumb suffixes painted with ::after on header titles, e.g.
 * "Staff > View Staff". These were hard-coded to the old blue and would
 * clash with a differently coloured band.
 */
.lksjs-pepe h3::after {
  color: var(--header-accent, #1565c0) !important;
}