/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */
 :root {
  --bulma-primary-h: 176deg;
  --bulma-primary-s: 54%;
  --bulma-primary-l: 48%;
  --bulma-success-h: 176deg;
  --bulma-success-s: 54%;
  --bulma-success-l: 48%;
}

.secret-plain {
  background: #22262f;
  color: #e48293;
  border-radius: 5px;
  padding: 0.2em 0.5em;
  font-family: monospace;
  margin-left: 0.5rem;
}

/* Equal-width date columns in headquarters failed jobs table */
.failed-jobs-table .col-datetime {
  width: 11rem;
  min-width: 11rem;
}

/* Failed jobs "last fetched" box: horizontal columns (max 5 per column), readable in light and dark mode */
.last-fetched-box {
  font-size: 0.8rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #e8f4fc;
  color: #1a1a1a;
}

.last-fetched-box__title {
  display: block;
  margin-bottom: 0.35rem;
}

.last-fetched-box__columns {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0 1.25rem;
  overflow-x: auto;
}

.last-fetched-box__column {
  min-width: 8rem;
  flex: 0 0 auto;
}

.last-fetched-box__env {
  display: block;
  margin-bottom: 0.25rem;
  text-transform: capitalize;
}

.last-fetched-box__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.last-fetched-box__list li {
  white-space: nowrap;
}

@media (prefers-color-scheme: dark) {
  .last-fetched-box {
    background: rgba(30, 45, 55, 0.95);
    border-color: rgba(255, 255, 255, 0.12);
    color: #e6e6e6;
  }
}

/* Sortable table headers (portals, pods, organizations) */
a.sortable-column {
  color: #3273dc;
  text-decoration: none;
  cursor: pointer;
}

a.sortable-column:hover {
  color: #2366d1;
  text-decoration: underline;
}

/* System dark mode: improve contrast for Bulma surfaces and text */
@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }

  body {
    background-color: #141418;
    color: #e8e8ec;
  }

  main.container a:not(.button):not(.tag):not(.navbar-item) {
    color: #8ab4ff;
  }

  main.container a:not(.button):not(.tag):not(.navbar-item):hover {
    color: #b8cdf8;
  }

  a.sortable-column {
    color: #8ab4ff;
  }

  a.sortable-column:hover {
    color: #c5d9ff;
  }

  .title,
  .subtitle,
  h1,
  h2,
  h3 {
    color: #f2f2f5 !important;
  }

  .navbar {
    background-color: #1e1e24 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .navbar-item,
  .navbar-link {
    color: #e8e8ec !important;
  }

  .navbar-item:hover,
  .navbar-link:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: #fff !important;
  }

  .navbar-burger span {
    background-color: #e8e8ec;
  }

  .table {
    background-color: #1a1a20;
    color: #e8e8ec;
  }

  .table.is-hoverable tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
  }

  .table thead th {
    color: #d0d0d8;
    border-color: rgba(255, 255, 255, 0.12);
  }

  .table td {
    border-color: rgba(255, 255, 255, 0.1);
  }

  .input,
  .textarea,
  .select select {
    background-color: #25252c;
    border-color: rgba(255, 255, 255, 0.15);
    color: #e8e8ec;
  }

  .input::placeholder,
  .textarea::placeholder {
    color: rgba(232, 232, 236, 0.45);
  }

  .button.is-static {
    background-color: #2a2a32;
    border-color: rgba(255, 255, 255, 0.12);
    color: #c8c8d0;
  }

  .button.is-light {
    background-color: #2a2a32;
    border-color: rgba(255, 255, 255, 0.12);
    color: #e8e8ec;
  }

  .button.is-light:hover {
    background-color: #34343e;
    border-color: rgba(255, 255, 255, 0.18);
    color: #fff;
  }

  .tag.is-light {
    background-color: #2f2f38 !important;
    color: #e4e4ea !important;
  }

  .tag.is-info.is-light {
    background-color: rgba(62, 142, 208, 0.25) !important;
    color: #b3d4f0 !important;
  }

  .tag.is-success.is-light {
    background-color: rgba(72, 199, 142, 0.22) !important;
    color: #a8e9cc !important;
  }

  .tag.is-link.is-light {
    background-color: rgba(72, 95, 199, 0.28) !important;
    color: #c5cef5 !important;
  }

  .notification.is-light {
    background-color: #25252c !important;
    color: #e0e0e6 !important;
  }

  .notification.is-info.is-light {
    background-color: rgba(62, 142, 208, 0.18) !important;
    color: #dceaf6 !important;
  }

  .notification.is-success.is-light,
  .notification.is-danger.is-light {
    color: #f0f0f4 !important;
  }

  .has-text-grey {
    color: #a8a8b4 !important;
  }

  .has-text-info {
    color: #9ec5fe !important;
  }

  code {
    background-color: #2a2a32;
    color: #f0c674;
  }

  .box {
    background-color: #1e1e24;
    color: #e8e8ec;
    box-shadow: none;
    border: 1px solid rgba(255, 255, 255, 0.08);
  }

  .card {
    background-color: #1e1e24;
    color: #e8e8ec;
    box-shadow: none;
    border: 1px solid rgba(255, 255, 255, 0.08);
  }

  .card-header-title {
    color: #f2f2f5 !important;
  }

  .modal-card-body,
  .modal-card-head,
  .modal-card-foot {
    background-color: #1e1e24;
    color: #e8e8ec;
  }
}