/* 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;
}

/* The current section, the way the main admin sub-nav's own active pill reads. */
.forgeops-admin-bar-links a.active {
  color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l));
  font-weight: 600;
}

.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;
}

/* Row and bulk actions (Discard / Retry, Run now, Pause/Resume), rendered by this app's own
   overrides of the gem's _actions and _toolbar partials: the same plain muted text row the rest
   of ForgeOps uses (.member-action in application.bootstrap.scss), colored only on hover or focus,
   rather than a set of outline buttons. Danger and warning hover to the same values the .button
   rules above use; success uses Bootstrap's dark-mode success text color (#75b798), since the
   button's #198754 is a fill color and too dark to read as plain text on this background. */
.forgeops-actions {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.35rem;
  white-space: nowrap;
}

.forgeops-actions-sep {
  color: rgba(222, 226, 230, 0.75);
}

.forgeops-action {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: rgba(222, 226, 230, 0.75);
  text-decoration: none;
  cursor: pointer;
}
.forgeops-action:hover,
.forgeops-action:focus {
  text-decoration: underline;
}
.forgeops-action-danger:hover, .forgeops-action-danger:focus { color: #ea868f; }
.forgeops-action-warning:hover, .forgeops-action-warning:focus { color: #ffc107; }
.forgeops-action-success:hover, .forgeops-action-success:focus { color: #75b798; }

.forgeops-action[disabled] {
  opacity: 0.5;
  cursor: default;
  text-decoration: none;
  color: rgba(222, 226, 230, 0.75);
}

/* The toolbar sits beside the filters in a wrapping .level; once the date range filters are
   showing, it wraps onto its own line, and Bulma would leave it on the left. Keep it right
   aligned either way, the same side as each row's own actions. */
.level-right.forgeops-actions {
  margin-left: auto;
}

/* The date range filters (Enqueued, Scheduled, Finished from/to) are Bulma's pill-shaped
   .input.is-rounded; square them off to match the job class and queue name fields beside them.
   color-scheme: dark makes the browser draw the native date picker and its calendar icon for
   a dark background, where the default dark icon is otherwise invisible. */
[data-theme="dark"] .input.is-rounded {
  border-radius: 0.375rem;
}
[data-theme="dark"] input[type="datetime-local"] {
  color-scheme: dark;
}