/* Readability layer, loaded by every instance after its brand stylesheet.

   Elian, 2026-10-02, on EpsiHR: "the branding colors are not clear and
   cannot be seen ... the font needs to be black ... on the button it needs
   to be proper white ... icons on top for settings etc are not nice colors".

   The theme paints text in the brand colour on a pale tint of the SAME
   colour. With a dark coral that is merely weak; with a mid green it is
   unreadable. None of this is specific to green, so it lives here and loads
   for every instance -- SupremeFX gets the same contrast in its own colour.

   The rule throughout: text that must be READ is near-black, and anything
   sitting ON the brand colour is white. The brand colour keeps its job of
   drawing the eye, and stops doing the job of carrying words. */

:root {
  --epsi-ink: #111827;      /* body text */
  --epsi-ink-soft: #374151; /* secondary text */
}

/* --- words on a brand-coloured surface are always white ---------------- */
/* Only a SOLID brand background: "hover:bg-primary-600" also contains
   "bg-primary-6", and matching it painted outline buttons' words white on
   white -- "Select (11)" over every list (Elian, 2026-10-18). */
.bg-primary-600, .bg-primary-700, .bg-brand-600, .bg-brand-700,
.oh-btn--primary, .oh-btn--secondary.bg-primary-600,
button[class*="bg-primary-6"]:not([class*=":bg-primary-6"]),
a[class*="bg-primary-6"]:not([class*=":bg-primary-6"]),
button[class^="bg-primary-6"], a[class^="bg-primary-6"],
button[class*=" bg-primary-6"], a[class*=" bg-primary-6"] {
  color: #fff !important;
}
.bg-primary-600 i, .bg-primary-700 i,
.bg-primary-600 ion-icon, .bg-primary-700 ion-icon,
.bg-primary-600 svg, .bg-primary-700 svg {
  color: #fff !important;
  fill: currentColor;
}

/* --- the sign-in card: every word near-black ---------------------------
   Its background is primary_200, a pale tint, so brand-coloured text on it
   has almost no contrast. The headings were already black; the labels, the
   helper line and the Forgot Password link were not. */
.oh-auth-card, .oh-auth-card label, .oh-auth-card p, .oh-auth-card h1,
form#loginForm label, form#loginForm p {
  color: var(--epsi-ink) !important;
}
a[href*="forgot-password"] {
  color: var(--epsi-ink) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}
a[href*="forgot-password"]:hover {
  color: #000 !important;
}

/* --- list and form text stays ink, not brand --------------------------- */
table td, table th, .oh-label, .oh-input, .oh-select,
label, .form-label, .oh-profile-section__title {
  color: var(--epsi-ink);
}

/* The tint behind a selected sidebar row or an active tab is fine; the
   WORDS on it are what needed fixing. */
.bg-primary-100, .bg-primary-200, .bg-brand-100, .bg-brand-200 {
  color: var(--epsi-ink);
}

/* Status pills keep their own meaning-colours (green ok, red danger); only
   the brand-tinted ones are corrected, and only where they hold text. */
span.bg-primary-100, span.bg-primary-200 {
  color: var(--epsi-ink) !important;
}


/* --- the sidebar's selected and hovered rows ---------------------------
   Elian, 2026-10-03: "the colors and fonts are not good ... the font or
   letters should be in diff color ... and selection on menu should be
   different".

   The CURRENT page was already solid brand with a white label and stays so.
   HOVER painted the brand colour on a pale tint of itself -- green on pale
   green, which is what he could not read. Hover is ink on a slightly firmer
   tint now, with an accent bar down the left edge, so hovering and being ON
   a page are told apart by shape as well as by colour. */
.sideboxmain.sidebox-active:not(.sidebox-current) .oh-sidebar-label,
.sideboxmain:hover:not(.sidebox-current) .oh-sidebar-label {
  color: var(--epsi-ink) !important;
  font-weight: 600;
}
.sideboxmain.sidebox-active:not(.sidebox-current),
.sideboxmain:hover:not(.sidebox-current) {
  box-shadow: inset 3px 0 0 0 var(--sidebar-accent);
}
.sideboxmain.sidebox-active:not(.sidebox-current) i,
.sideboxmain:hover:not(.sidebox-current) i,
.sideboxmain.sidebox-active:not(.sidebox-current) ion-icon,
.sideboxmain:hover:not(.sidebox-current) ion-icon {
  color: var(--epsi-ink) !important;
}
/* The page you are ON keeps the solid fill and white text, and gains a
   heavier weight so it is unmistakable next to a hovered row. */
.sideboxmain.sidebox-current .oh-sidebar-label {
  color: #fff !important;
  font-weight: 700;
}

/* Dark mode keeps its own light-on-dark labels; do not force ink there. */
body.dark .sideboxmain.sidebox-active:not(.sidebox-current) .oh-sidebar-label,
body.dark .sideboxmain:hover:not(.sidebox-current) .oh-sidebar-label,
body.dark .sideboxmain.sidebox-active:not(.sidebox-current) i,
body.dark .sideboxmain:hover:not(.sidebox-current) i {
  color: #e5e7eb !important;
}


/* --- accordion group rows, tabs and any pale brand panel ---------------
   The group headers on pipeline, project and asset pages take their
   background from a pale brand shade and their TEXT from a strong one, so
   on EpsiHR every row read green-on-green. The pale shades are near-neutral
   now (deploy/apply-brand-theme.py), and the words on them are ink.

   Written against what these rows actually are rather than one page's
   classes, so it covers offboarding, onboarding, recruitment, projects and
   assets at once. */
[class*="accordion"] > a, [class*="accordion"] > button,
[class*="accordion"] .oh-accordion__title,
.oh-accordion-header, .oh-accordion-header *,
.group-by-header, .group-by-header * {
  color: var(--epsi-ink) !important;
}
/* The count bubble keeps the brand colour -- it is a badge, not a word. */
.group-by-header .badge, [class*="accordion"] .badge {
  color: #fff !important;
}
/* ...and so does everything FILLED with a colour inside those rows: the
   count bubble (bg-primary-600, not .badge), "Assign Leave", the red "Clear
   Filters". The ink rule above had turned their white words ink on green
   (2.95:1 against white's 6.01:1, measured 2026-10-19). */
.oh-accordion-header .bg-primary-600, .group-by-header .bg-primary-600,
[class*="accordion"] .oh-btn--secondary:not(.oh-btn--light-bkg),
[class*="accordion"] .oh-btn--secondary:not(.oh-btn--light-bkg) *,
[class*="accordion"] .oh-btn--danger:not(.oh-btn--light-bkg),
[class*="accordion"] .oh-btn--danger:not(.oh-btn--light-bkg) * {
  color: #fff !important;
}
/* A selected tab: solid brand with white text, like the sidebar's current row. */
.oh-tabs__input:checked + label, .nav-tab.active, .tab-active {
  color: #fff !important;
}