/* ==========================================================================
   WFS-CISS theme overrides

   This file exists ONLY because the JustDo admin theme
   (/css/vertical-layout-light/style.css, ~32k lines) is still loaded and
   unconditionally paints the app chrome light. It must load LAST.

   Rules for this file:
     - Everything is scoped under .wfs-app so it cannot affect anything else.
     - !important is used ONLY where the theme rule cannot be beaten by
       specificity alone. Each such rule carries a note saying why.
     - If this file starts growing past the chrome listed here, that is the
       signal that deleting style.css is the cheaper option.
   ========================================================================== */

/* ---- page chrome ------------------------------------------------------ */

/* Theme sets `body { background: #ffffff }` at element level; a class
   selector alone ties rather than wins on the cascade order for some
   variants, so this one is forced. */
body.wfs-app { background: var(--wfs-bg) !important; color: var(--wfs-text); }

.wfs-app .container-scroller { background: var(--wfs-bg); }

.wfs-app .page-body-wrapper,
.wfs-app .main-panel,
.wfs-app .content-wrapper {
  background: var(--wfs-bg);
}

.wfs-app .content-wrapper {
  padding: var(--wfs-s5);
}

@media (max-width: 767px) {
  .wfs-app .content-wrapper { padding: var(--wfs-s3); }
}

/* ---- navbar ----------------------------------------------------------- */

.wfs-app .navbar {
  background: var(--wfs-surface-raised);
  border-bottom: 1px solid var(--wfs-border);
  box-shadow: none;
}

.wfs-app .navbar .navbar-brand-wrapper {
  background: var(--wfs-surface-raised);
  border-right: 1px solid var(--wfs-border);
}

.wfs-app .navbar .navbar-menu-wrapper {
  background: var(--wfs-surface-raised);
  border: 0;
}

.wfs-app .navbar .navbar-nav .nav-link,
.wfs-app .navbar .navbar-toggler {
  color: var(--wfs-text);
}

/* ---- sidebar ---------------------------------------------------------- */

.wfs-app .sidebar {
  background: var(--wfs-surface-raised);
  border-right: 1px solid var(--wfs-border);
}

.wfs-app .sidebar .nav .nav-item .nav-link {
  color: var(--wfs-text-muted);
  border-radius: var(--wfs-r-md);
  margin: 2px var(--wfs-s2);
  transition: background var(--wfs-t-fast) var(--wfs-ease),
              color var(--wfs-t-fast) var(--wfs-ease);
}

.wfs-app .sidebar .nav .nav-item .nav-link:hover {
  background: var(--wfs-surface-hover);
  color: var(--wfs-text);
}

.wfs-app .sidebar .nav .nav-item .nav-link .menu-icon,
.wfs-app .sidebar .nav .nav-item .nav-link .menu-title {
  color: inherit;
}

/* active page */
.wfs-app .sidebar .nav .nav-item .nav-link[aria-current="page"] {
  background: var(--wfs-primary-soft);
  color: var(--wfs-primary-fg);
  font-weight: 600;
}

/* ---- footer ----------------------------------------------------------- */

.wfs-app .footer {
  background: var(--wfs-surface-raised);
  border-top: 1px solid var(--wfs-border);
  color: var(--wfs-text-muted);
}

.wfs-app .footer a { color: var(--wfs-primary-fg); }
.wfs-app .footer .text-muted { color: var(--wfs-text-muted) !important; } /* theme sets .text-muted with !important */

/* ---- dropdown (profile menu) ------------------------------------------ */

.wfs-app .dropdown-menu {
  background: var(--wfs-surface-raised);
  border: 1px solid var(--wfs-border);
  box-shadow: var(--wfs-e3);
  border-radius: var(--wfs-r-md);
}

.wfs-app .dropdown-menu .dropdown-item {
  color: var(--wfs-text);
}

.wfs-app .dropdown-menu .dropdown-item:hover,
.wfs-app .dropdown-menu .dropdown-item:focus {
  background: var(--wfs-surface-hover);
  color: var(--wfs-text);
}

/* ---- neutralise leftover Bootstrap cards ------------------------------ */
/* We build .wfs-card, but the vendor .card still wraps some grid cells. */

.wfs-app .card {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.wfs-app .card .card-body { padding: 0; }

/* ---- flatpickr --------------------------------------------------------- */
/* flatpickr ships its own light palette from the CDN and knows nothing about
   our tokens, so every surface it paints has to be restated here. */

.flatpickr-calendar {
  background: var(--wfs-surface-raised);
  border: 1px solid var(--wfs-border);
  box-shadow: var(--wfs-e3);
  color: var(--wfs-text);
}

.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after { border-bottom-color: var(--wfs-surface-raised); }
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after { border-top-color: var(--wfs-surface-raised); }

.flatpickr-months,
.flatpickr-month,
.flatpickr-weekdays,
span.flatpickr-weekday {
  background: var(--wfs-surface-raised);
  color: var(--wfs-text-muted);
  fill: var(--wfs-text-muted);
}

.flatpickr-current-month input.cur-year,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-months .flatpickr-month { color: var(--wfs-text); }

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg { fill: var(--wfs-text-muted); }

.flatpickr-day {
  color: var(--wfs-text);
  border-radius: var(--wfs-r-sm);
}

.flatpickr-day:hover { background: var(--wfs-surface-hover); border-color: transparent; }

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: var(--wfs-primary);
  border-color: var(--wfs-primary);
  color: #fff;
}

.flatpickr-day.today { border-color: var(--wfs-primary); }

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay { color: var(--wfs-text-faint); }

/* ---- dark-mode-only chrome fixes -------------------------------------- */
/* The theme hardcodes white on these; in light mode our tokens already match,
   so these only need stating for dark. */

:root[data-theme="dark"] .wfs-app .navbar,
:root[data-theme="dark"] .wfs-app .navbar .navbar-brand-wrapper,
:root[data-theme="dark"] .wfs-app .navbar .navbar-menu-wrapper,
:root[data-theme="dark"] .wfs-app .sidebar {
  background: var(--wfs-surface-raised) !important; /* theme sets #fff inline-level on these */
}

:root[data-theme="dark"] .wfs-app .table,
:root[data-theme="dark"] .wfs-app .table td,
:root[data-theme="dark"] .wfs-app .table th {
  color: var(--wfs-text);
  border-color: var(--wfs-border);
}

:root[data-theme="dark"] .wfs-app .table-striped tbody tr:nth-of-type(odd) {
  background: var(--wfs-surface-sunken);
}

:root[data-theme="dark"] .wfs-app .form-control {
  background: var(--wfs-surface);
  color: var(--wfs-text);
  border-color: var(--wfs-border-strong);
}

/* logo-custom.png is a white-on-transparent wordmark, invisible against a
   light navbar, so invert it to black in light mode. Scoped to .brand-logo
   only: .brand-logo-mini is a full-colour icon on a white tile and inverting
   it turns it into a black block. */
:root[data-theme="light"] .wfs-app .navbar-brand.brand-logo img { filter: invert(1); }

/* ---- kill the theme's dead Roboto @font-face declarations -------------- */
/* style.css declares Roboto at 300/400/500/700/900 pointing at
   /fonts/Roboto/, a directory that was never shipped - up to 9 failed
   requests per page load. Google Fonts (linked in head.ejs) covers 400/500/700
   but does not stop these from being candidates, so each is redeclared here
   with a local()-only src. If the font is not installed the declaration simply
   provides nothing and the browser falls through to the next family in the
   stack - and, crucially, makes no request. */

/* Two details matter here:
   1. The weight tokens must match style.css EXACTLY. It uses the keywords
      `normal` and `bold`; a face declared as 400/700 is kept as a SEPARATE
      entry rather than replacing them, so the dead URLs stay in play.
   2. The src must actually load. A local()-only src looks tidy, but when the
      font is not installed the face fails and the browser falls back to the
      earlier (theme) declaration - and fetches the 404 anyway. Pointing at a
      real file is what stops the request.
   Worst case, if this gstatic URL ever rotates, the face fails and we are back
   to today's harmless 404 - never worse. */
@font-face {
  font-family: "Roboto";
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  src: local("Roboto"),
       url("https://fonts.gstatic.com/s/roboto/v51/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbVmUiAo.woff2") format("woff2");
}

/* 300/500/900 are covered by the Google Fonts link in head.ejs (500) or simply
   unused (300, 900); they stopped requesting once that stylesheet loaded. Only
   `bold` still needs restating for the same keyword-token reason as above. */
@font-face {
  font-family: "Roboto";
  font-weight: bold;
  font-style: normal;
  font-display: swap;
  src: local("Roboto Bold"), local("Roboto"),
       url("https://fonts.gstatic.com/s/roboto/v51/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbVmUiAo.woff2") format("woff2");
}

/* Native widgets (scrollbars, date picker glyphs) follow the theme. */
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }