/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ─── Design tokens ────────────────────────────────────────────────────── */

:root {
  /* Override Bulma primary → emerald (#059669 ≈ hsl(162, 94%, 30%)) */
  --bulma-primary-h: 162;
  --bulma-primary-s: 94%;
  --bulma-primary-l: 30%;

  /* Brand */
  --sp-font: 'Plus Jakarta Sans', system-ui, sans-serif;
  --sp-navbar-bg: #1A1A2E;

  /* Rating badges */
  --sp-rating-elite-bg:   #D1FAE5;
  --sp-rating-elite-fg:   #059669;
  --sp-rating-high-bg:    #CFFAFE;
  --sp-rating-high-fg:    #0891B2;
  --sp-rating-medium-bg:  #FEF3C7;
  --sp-rating-medium-fg:  #D97706;
  --sp-rating-low-bg:     #FEE2E2;
  --sp-rating-low-fg:     #DC2626;
}

/* ─── Base ─────────────────────────────────────────────────────────────── */

html, body {
  font-family: var(--sp-font);
}

/* ─── Navbar ───────────────────────────────────────────────────────────── */

/* html prefix raises specificity to (0,2,1) — beats Bulma's (0,2,0) */
html .navbar.is-dark {
  background-color: var(--sp-navbar-bg);
}

/* ─── Buttons ──────────────────────────────────────────────────────────── */

/* Primary button weight */
.button.is-primary {
  font-weight: 600;
}

/* Outlined: near-black text for contrast. html prefix > Bulma's (0,3,0) */
html .button.is-primary.is-outlined {
  color: #1E293B;
  font-weight: 600;
}

html .button.is-primary.is-outlined:hover {
  color: #fff;
}

/* is-light: visible border via inset shadow. html prefix > Bulma's (0,2,0) */
html .button.is-light {
  box-shadow: inset 0 0 0 1px #CBD5E1;
}

/* ─── Rating badges ────────────────────────────────────────────────────── */
/* Use .tag.is-rating-* instead of Bulma's semantic is-success/is-info etc. */

.tag.is-rating-elite {
  background-color: var(--sp-rating-elite-bg);
  color: var(--sp-rating-elite-fg);
  font-weight: 700;
}

.tag.is-rating-high {
  background-color: var(--sp-rating-high-bg);
  color: var(--sp-rating-high-fg);
  font-weight: 700;
}

.tag.is-rating-medium {
  background-color: var(--sp-rating-medium-bg);
  color: var(--sp-rating-medium-fg);
  font-weight: 700;
}

.tag.is-rating-low {
  background-color: var(--sp-rating-low-bg);
  color: var(--sp-rating-low-fg);
  font-weight: 700;
}

/* ─── Metric numbers ───────────────────────────────────────────────────── */

.metric-value {
  font-variant-numeric: tabular-nums;
}

/* ─── Footer ───────────────────────────────────────────────────────────── */

.footer {
  padding: 0 1.5rem;
}

.footer .columns {
  margin-bottom: 0;
  margin-top: 0;
}

/* ─── Navbar dropdown: button_to forms styled as links ─────────────────── */

.navbar-dropdown form {
  display: block;
  width: 100%;
}

.navbar-dropdown form button {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0.375rem 1rem;
  text-align: left;
  width: 100%;
  display: block;
}

.navbar-dropdown form button:hover {
  background-color: whitesmoke;
  color: #0a0a0a;
}

/* ─── Metrics filter form ──────────────────────────────────────────────── */

/* Repository dropdown full-width */
.dropdown.repository-dropdown,
.dropdown.repository-dropdown .dropdown-trigger,
.dropdown.repository-dropdown .dropdown-menu {
  width: 100%;
}

.dropdown.repository-dropdown .dropdown-trigger .button {
  width: 100%;
  justify-content: space-between;
  text-align: left;
}

/* Date fields container */
.date-fields-container {
  display: flex;
  gap: 1rem;
}

.date-fields-container .field {
  flex: 1;
  min-width: 0;
}

/* Date preset buttons */
.date-preset-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}

/* Remove bottom margin from columns inside box filter */
.box > .columns {
  margin-bottom: 0;
}

/* Checkbox items in dropdowns */
.dropdown-item label.checkbox {
  width: 100%;
  display: block;
  padding: 0;
  margin: 0;
}

.dropdown-item label.checkbox:hover {
  background-color: transparent;
}

.dropdown-item {
  padding: 0.375rem 1rem;
}

.dropdown-item label.checkbox input[type="checkbox"] {
  margin-right: 0.5rem;
}

/* Person select full-width */
.select.person-select {
  width: 100%;
}

.select.person-select select {
  width: 100%;
}

/* Date input calendar icon cursor */
.date-input-compact {
  width: 100%;
  max-width: 100%;
}

.date-input-compact::-webkit-calendar-picker-indicator {
  cursor: pointer;
}