/* Reskins Mission Control - Jobs (a mounted engine built on Bulma, not this app's own
   Bootstrap) to read as part of ForgeOps rather than a separate tool. Layered on top of the
   gem's own bulma.min.css/application.css (see the stylesheet_link_tag order in
   layouts/mission_control/jobs/application.html.erb) as plain overrides of Bulma's own
   HSL-based theme variables -- Bulma 1.x themes every component off --bulma-primary-h/s/l,
   --bulma-link-h/s/l, --bulma-scheme-main-l, etc., so retheming these few tokens recolors
   every table/tab/tag/button the gem renders without touching a single one of its view
   templates (which stay exactly as the gem ships them; see the "wrap it in your navbar +
   harmonize colors" choice this file exists for, over a full Bootstrap reimplementation of
   every page). Not routed through the Sass/esbuild pipeline like application.bootstrap.scss --
   Propshaft serves a plain CSS file straight from here, so this one file is the whole build. */

[data-theme="dark"] {
  /* This app's one accent color (see $mkt-accent in application.bootstrap.scss), as HSL --
     Bulma's variables are H/S/L triplets, not a hex it'll accept directly. Used for both
     primary and link, matching the rest of the app's single-accent design (no separate link
     color from the button/highlight color). */
  --bulma-primary-h: 129deg;
  --bulma-primary-s: 60%;
  --bulma-primary-l: 50%;
  --bulma-link-h: 129deg;
  --bulma-link-s: 60%;
  --bulma-link-l: 50%;

  /* A touch darker than Bulma's own dark-mode default (9%) -- matches $dark (#0d0d0d) below the
     rest of this app's navbar, so the custom bar in the layout above blends into the page
     underneath it instead of stepping to a visibly different near-black. */
  --bulma-scheme-main-l: 5%;

  --bulma-family-primary: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bulma-family-secondary: var(--bulma-family-primary);
}

/* The custom top bar in layouts/mission_control/jobs/application.html.erb, styled by hand
   rather than with Bulma's own .navbar-* classes -- it's static (no burger/collapse toggle,
   no dropdowns), so it doesn't need the component CSS those classes pull in, and $dark
   below matches the real navbar's own bg-dark exactly rather than Bulma's darkened scheme. */
.forgeops-admin-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.5rem;
  background: #0d0d0d;
  font-family: var(--bulma-family-primary);
}

.forgeops-admin-bar a {
  color: #f5f5f5;
  text-decoration: none;
}

.forgeops-admin-bar a:hover {
  color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l));
}

.forgeops-admin-bar .forgeops-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Space Grotesk", var(--bulma-family-primary);
  font-weight: 600;
  font-size: 1.1rem;
}

.forgeops-admin-bar .forgeops-brand .accent {
  color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l));
}

.forgeops-admin-bar-links {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.9rem;
}

.forgeops-admin-bar-links .email {
  color: #adb5bd;
}

.forgeops-admin-bar-links button {
  font: inherit;
  color: #f5f5f5;
  background: transparent;
  border: 1px solid #495057;
  border-radius: 0.25rem;
  padding: 0.25rem 0.75rem;
  cursor: pointer;
}

.forgeops-admin-bar-links button:hover {
  border-color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l));
  color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l));
}

/* Every real button Mission Control renders (job retry/discard, queue pause/resume, recurring
   task "Run now", pagination) uses Bulma's ".is-light" variant -- a solid pale/pastel fill (pink,
   cream, pale green) that reads fine on Bulma's own light background but clashes hard against
   this app's dark theme. Retheming this to look like ForgeOps's own .btn-outline-* (transparent
   background, colored border and text, filling solid only on hover) instead of chasing Bulma's
   token system: the two frameworks' "soft/light" button concepts don't line up closely enough
   for a CSS-variable swap the way the color retheme above works, so this overrides the rendered
   properties directly. Colors are copied from application.bootstrap.scss's own dark-theme
   .btn-outline-* rules (including its accessibility-driven lighter danger/secondary reds/grays --
   see that file's own comment on WCAG contrast against this exact page background) rather than
   Bootstrap's plain defaults, so a button here matches one on any other admin page exactly. */
[data-theme="dark"] .button,
[data-theme="dark"] .pagination-previous,
[data-theme="dark"] .pagination-next {
  border-radius: 0.375rem;
  padding: 0.375rem 0.75rem;
  height: auto;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
  border-width: 1px;
  box-shadow: none;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

[data-theme="dark"] .button.is-small {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: 0.25rem;
}

/* Plain, uncolored buttons and Bulma's pagination links -- this app's own .btn-outline-secondary. */
[data-theme="dark"] .button,
[data-theme="dark"] .pagination-previous,
[data-theme="dark"] .pagination-next {
  background-color: transparent;
  border-color: #adb5bd;
  color: #adb5bd;
}
[data-theme="dark"] .button:hover,
[data-theme="dark"] .pagination-previous:hover,
[data-theme="dark"] .pagination-next:hover {
  background-color: #6c757d;
  border-color: #6c757d;
  color: #fff;
}

/* .is-danger(.is-light) -- this app's own .btn-outline-danger. */
[data-theme="dark"] .button.is-danger {
  background-color: transparent;
  border-color: #ea868f;
  color: #ea868f;
}
[data-theme="dark"] .button.is-danger:hover {
  background-color: #dc3545;
  border-color: #dc3545;
  color: #fff;
}

/* .is-warning(.is-light) -- Bootstrap's stock .btn-outline-warning; ForgeOps doesn't reskin
   warning for dark mode (its default yellow already clears WCAG AA against this background). */
[data-theme="dark"] .button.is-warning {
  background-color: transparent;
  border-color: #ffc107;
  color: #ffc107;
}
[data-theme="dark"] .button.is-warning:hover {
  background-color: #ffc107;
  border-color: #ffc107;
  color: #000;
}

/* .is-success(.is-light) -- Bootstrap's stock .btn-outline-success, same reasoning as warning
   above (not reskinned for dark mode; already passes contrast as-is). */
[data-theme="dark"] .button.is-success {
  background-color: transparent;
  border-color: #198754;
  color: #198754;
}
[data-theme="dark"] .button.is-success:hover {
  background-color: #198754;
  border-color: #198754;
  color: #fff;
}

/* .is-primary -- this app's one reskinned-to-the-accent .btn-primary (see $mkt-accent's own
   comment in application.bootstrap.scss). background-color/border-color have to be set here
   explicitly, not left to Bulma's own .button.is-primary rule reading --bulma-primary-* (as the
   color retheme above does for everything else) -- the plain ".button" rule above sets its own
   background-color/border-color at the same specificity and loads later in this same file, so
   without an explicit rule here it wins instead, leaving is-primary transparent with no visible
   fill at all (caught by actually looking at a rendered primary button, not just reading the
   cascade). $mkt-accent-contrast (#0d0d0d) is a fixed hex rather than derived from
   --bulma-primary-l -- it's a contrast-driven text color, not the button's own background hue,
   so it isn't meant to move if the accent's lightness ever gets retuned. */
[data-theme="dark"] .button.is-primary {
  background-color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l));
  border-color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l));
  color: #0d0d0d;
}
[data-theme="dark"] .button.is-primary:hover {
  background-color: #2aa33c;
  border-color: #2aa33c;
}

[data-theme="dark"] .button[disabled] {
  opacity: 0.65;
}