/* ===== Theme variables ===== */
/* DEFAULT = DARK */
:root {
  /* Slightly lighter dark palette to improve contrast while keeping a dark feel */
  --bg: #0e1724;
  --panel: #15233a;
  --card: #1b2a46;
  --text: #f2f5fa;
  --muted: #a9b5c6;
  --border: rgba(255,255,255,0.18);

  --primary: #1e3557;
  --primary-hover: #dc2626;

  /* Brighter link color for readability */
  --link: #9cc8ff;
}

/* LIGHT MODE ONLY WHEN EXPLICIT */
:root[data-theme="light"] {
  --bg: #ffffff;
  --panel: #f5f5f5;
  --text: #1f2937;
  --muted: #6b7280;
  --border: rgba(0,0,0,0.12);

  --primary: #ef4444;
  --primary-hover: #dc2626;

  --link: #2563eb;
  --card: #ffffff;
}


/* ===== Global ===== */
html, body {
  background: var(--bg);
  color: var(--text);
}

a { color: var(--link); }

/* ===== Header panel ===== */
header.section.has-background-light {
  background: var(--panel) !important;
  border-bottom: 1px solid var(--border);
}

/* ===== Inputs ===== */
.input {
  background: var(--card);
  color: var(--text);
  border-color: var(--border);
}
.input::placeholder { color: var(--muted); }
.input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.2em rgba(239, 68, 68, 0.25);
}

/* ===== Cards ===== */
.card {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
}

/* ===== Bulma notifications used for stats ===== */
.notification.is-light {
  background: rgba(255,255,255,0.04) !important;
  color: var(--text) !important;
  border: 1px solid var(--border);
}
.notification.is-info {
  background: rgba(239,68,68,0.12) !important;
  color: var(--text) !important;
  border: 1px solid rgba(239,68,68,0.35);
}

/* Buttons: make them filled so they stay readable */
.button {
  background: rgba(255,255,255,0.06) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

.button:hover {
  border-color: rgba(239,68,68,0.6) !important;
}

/* Search button (Bulma is-primary) => RED filled */
.button.is-primary {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}
.button.is-primary:hover {
  background: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
}

/* Active nav button uses is-link in your header.php
   Make it a RED filled "selected tab" */
.button.is-link {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}
.button.is-link:hover {
  background: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
}

/* Fix focus/active outlines (click + keyboard) */
.button:focus { box-shadow: none !important; }
.button:focus-visible {
  outline: 2px solid var(--primary) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 0.2em rgba(239, 68, 68, 0.25) !important;
}


/* --- Header spacing --- */
header.section.has-background-light {
  padding: 1rem 1.25rem !important;
}

/* --- Search bar sizing --- */
.header-search { margin-bottom: 0.75rem !important; }
.header-search-control { width: min(620px, 100%); }

/* --- Nav row: compact + grouped --- */
.navrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.navleft, .navright {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

/* --- Buttons: blend into background until hover/active --- */
.navbtn {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: var(--text) !important;
  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

.navbtn:hover {
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.22) !important;
  transform: translateY(-1px);
}

/* Active page button: red but still not huge */
.navbtn.is-active {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

/* Make the search button match the nav sizing */
.header-search .button.is-primary {
  padding-left: 1.1rem;
  padding-right: 1.1rem;
}

/* Slim header spacing + keep buttons on ONE row (scroll instead of wrapping) */
.header-wrap { padding: 1rem 1.5rem !important; }

.nav-row {
  display: flex;
  justify-content: center;
  gap: .5rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}

.nav-row .button {
  height: 34px;
  padding: 0 .85rem;
  border-radius: 8px;
}

/* Make nav buttons “blend” more: light outline until hover/active */
.nav-row .button {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: inherit !important;
}

.nav-row .button:hover {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.22) !important;
}

/* Active page highlight */
.nav-row .button.is-link {
  background: rgba(255,77,77,.14) !important;
  border-color: rgba(255,77,77,.55) !important;
  box-shadow: 0 0 0 3px rgba(255,77,77,.10) !important;
}

/* Slim search bar */
.search-row .input.is-large { height: 42px; font-size: 1.05rem; }
.search-row .button.is-large { height: 42px; font-size: 1.05rem; }


/* Keep the whole button row on one line, centered, and allow scroll instead of wrapping */
.nav-row{
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  gap: .5rem;
  padding-bottom: 2px;
}

/* “Blend in” look */
.nav-row .nav-btn{
  background: transparent;
  border: 1px solid rgba(255,255,255,.14);
  color: inherit;
  border-radius: 8px;
}

/* Hover brings it forward */
.nav-row .nav-btn:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.22);
}

/* Active page highlight */
.nav-row .is-active-nav{
  background: rgba(255,77,77,.14) !important;
  border-color: rgba(255,77,77,.55) !important;
  box-shadow: 0 0 0 3px rgba(255,77,77,.10);
}