/*
 * Admin UI layer on top of Bootstrap/Bootswatch (GL #125).
 *
 * Two jobs:
 *  1. COMPAT — the ~40 pages written against the old hand-rolled stylesheet
 *     (.card, .form-group, .stat-card, .flash, .tag, .prose, .match-card…)
 *     keep working unchanged, restyled in terms of Bootstrap's theme variables
 *     so they follow the cerulean/darkly switch instead of hard-coding colours.
 *  2. COMPONENTS the new domain pages need that Bootstrap doesn't ship.
 *
 * Everything here is expressed with var(--bs-*) so a theme swap is genuinely
 * just swapping the Bootswatch file.
 */

/* ---------- legacy custom-property aliases ----------
 * ~120 inline styles across the not-yet-migrated pages reference the old
 * hand-rolled palette (var(--accent), var(--danger), …). Aliasing those onto
 * Bootstrap's variables keeps every one of them working AND makes them follow
 * the cerulean/darkly switch — far better than editing 120 call sites, and it
 * costs nothing once those pages are migrated. */

:root {
  --accent: var(--bs-primary);
  --accent-hover: var(--bs-primary);
  --danger: var(--bs-danger);
  --success: var(--bs-success);
  --warning: var(--bs-warning);
  --text: var(--bs-body-color);
  --text-muted: var(--bs-secondary-color);
  --border: var(--bs-border-color);
  --bg: var(--bs-body-bg);
  --bg-card: var(--bs-body-bg);
  --nav-bg: var(--bs-primary);
  --nav-text: rgba(255, 255, 255, 0.8);
}

/* A bare .btn had a visible style under the old sheet; under Bootstrap it needs
 * a variant. Give the un-migrated ones the secondary look rather than leaving
 * naked text where a button should be. */
.btn:not([class*="btn-outline"]):not(.btn-primary):not(.btn-secondary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-light):not(.btn-dark):not(.btn-link) {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-secondary);
  --bs-btn-hover-border-color: var(--bs-secondary);
}

/* Bootstrap 4 badge variants (still used on a couple of un-migrated pages) */
.badge-success {
  background-color: var(--bs-success) !important;
  color: #fff;
}
.badge-danger {
  background-color: var(--bs-danger) !important;
  color: #fff;
}
.badge-warning {
  background-color: var(--bs-warning) !important;
  color: #000;
}
.badge:not([class*="bg-"]):not([class*="badge-"]) {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-secondary-color);
}

/* ---------- layout ---------- */

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main {
  flex: 1;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.page-header h1 {
  font-size: 1.5rem;
  margin: 0;
}
.page-header h2 {
  font-size: 1.1rem;
  margin: 0;
}
.page-subtitle {
  font-size: 0.85rem;
  color: var(--bs-secondary-color);
  margin-top: 0.15rem;
}

/* ---------- cards (legacy: content sits directly in .card, no .card-body) ---------- */

.card {
  padding: 1.25rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.card > .card-body {
  /* a Bootstrap-native card inside our padded shell shouldn't double-pad */
  padding: 0;
}
.card > h2:first-child,
.card > .page-header:first-child h2 {
  font-size: 1.05rem;
}
.card h2 {
  font-size: 1.05rem;
  margin-bottom: 0.75rem;
}
.card h3 {
  font-size: 0.95rem;
}

/* ---------- stat + ops tiles ---------- */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.stat-card {
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  padding: 1rem 1.15rem;
}
.stat-card .stat-value {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--bs-primary);
  line-height: 1.1;
}
.stat-card .stat-label {
  font-size: 0.82rem;
  color: var(--bs-secondary-color);
  margin-top: 0.2rem;
}
.stat-card a {
  text-decoration: none;
}

.ops-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.ops-tile {
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-left: 4px solid var(--bs-secondary);
  border-radius: var(--bs-border-radius);
  padding: 0.8rem 1rem;
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.12s, box-shadow 0.12s;
}
a.ops-tile:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  text-decoration: none;
  color: inherit;
}
.ops-tile .ops-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bs-secondary-color);
  font-weight: 700;
}
.ops-tile .ops-value {
  font-size: 1.3rem;
  font-weight: 700;
  margin-top: 0.15rem;
  line-height: 1.2;
}
.ops-tile .ops-sub {
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
  margin-top: 0.15rem;
}
.ops-tile.ok {
  border-left-color: var(--bs-success);
}
.ops-tile.ok .ops-value {
  color: var(--bs-success);
}
.ops-tile.warn {
  border-left-color: var(--bs-warning);
}
.ops-tile.warn .ops-value {
  color: var(--bs-warning);
}
.ops-tile.bad {
  border-left-color: var(--bs-danger);
}
.ops-tile.bad .ops-value {
  color: var(--bs-danger);
}
.ops-tile.info {
  border-left-color: var(--bs-info);
}
.ops-tile.idle {
  border-left-color: var(--bs-border-color);
}

/* ---------- link hubs (domain landing sections) ---------- */

.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
}
.hub-card {
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  padding: 0.85rem 1rem;
}
.hub-card h3 {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bs-secondary-color);
  margin-bottom: 0.5rem;
  font-weight: 700;
}
.hub-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.hub-card li {
  font-size: 0.9rem;
}
.hub-card li .text-muted {
  font-size: 0.78rem;
}

/* ---------- forms (Bootstrap 5 dropped .form-group) ---------- */

.form-group {
  margin-bottom: 1rem;
}
.form-group > label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
  color: var(--bs-secondary-color);
}
.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group textarea,
.form-group select {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 0.95rem;
  font-family: inherit;
  line-height: 1.5;
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: 0;
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.2);
}
.form-group textarea {
  min-height: 120px;
  resize: vertical;
}
.form-group textarea.tall {
  min-height: 320px;
}
.form-group textarea.mono,
textarea.mono,
input.mono {
  font-family: var(--bs-font-monospace);
  font-size: 0.85rem;
}
.form-hint {
  font-size: 0.78rem;
  color: var(--bs-secondary-color);
  margin-top: 0.25rem;
}

/* ---------- flash messages (map onto Bootstrap alert palette) ---------- */

.flash {
  padding: 0.7rem 1rem;
  border-radius: var(--bs-border-radius);
  margin-bottom: 1rem;
  font-size: 0.9rem;
  border: 1px solid transparent;
}
.flash-danger {
  color: var(--bs-danger-text-emphasis);
  background: var(--bs-danger-bg-subtle);
  border-color: var(--bs-danger-border-subtle);
}
.flash-success {
  color: var(--bs-success-text-emphasis);
  background: var(--bs-success-bg-subtle);
  border-color: var(--bs-success-border-subtle);
}
.flash-warning {
  color: var(--bs-warning-text-emphasis);
  background: var(--bs-warning-bg-subtle);
  border-color: var(--bs-warning-border-subtle);
}
.flash-info {
  color: var(--bs-info-text-emphasis);
  background: var(--bs-info-bg-subtle);
  border-color: var(--bs-info-border-subtle);
}

/* ---------- tags + status pills ---------- */

.tag {
  display: inline-block;
  background: var(--bs-secondary-bg);
  color: var(--bs-emphasis-color);
  padding: 0.12rem 0.5rem;
  border-radius: 4px;
  font-size: 0.76rem;
  margin-right: 0.25rem;
  margin-bottom: 0.2rem;
  text-decoration: none;
}
a.tag:hover {
  background: var(--bs-primary);
  color: #fff;
  text-decoration: none;
}

.pill {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: lowercase;
  background: var(--bs-secondary-bg);
  color: var(--bs-secondary-color);
  white-space: nowrap;
}
.pill-active,
.pill-running,
.pill-enabled,
.pill-completed,
.pill-complete,
.pill-success,
.pill-ok,
.pill-done,
.pill-sent {
  background: var(--bs-success-bg-subtle);
  color: var(--bs-success-text-emphasis);
}
.pill-pending,
.pill-queued,
.pill-waiting,
.pill-parked,
.pill-paused,
.pill-pending_eval,
.pill-due {
  background: var(--bs-warning-bg-subtle);
  color: var(--bs-warning-text-emphasis);
}
.pill-failed,
.pill-error,
.pill-disabled,
.pill-cancelled,
.pill-canceled,
.pill-abandoned,
.pill-rejected,
.pill-stalled {
  background: var(--bs-danger-bg-subtle);
  color: var(--bs-danger-text-emphasis);
}
.pill-retired,
.pill-archived,
.pill-idle,
.pill-dismissed,
.pill-new {
  background: var(--bs-secondary-bg);
  color: var(--bs-secondary-color);
}

/* ---------- priority badges (watchlist matches) ---------- */

.prio {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  min-width: 1.6rem;
  text-align: center;
}
.prio-9,
.prio-10 {
  background: var(--bs-danger-bg-subtle);
  color: var(--bs-danger-text-emphasis);
}
.prio-7,
.prio-8 {
  background: var(--bs-warning-bg-subtle);
  color: var(--bs-warning-text-emphasis);
}
.prio-4,
.prio-5,
.prio-6 {
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
}
.prio-1,
.prio-2,
.prio-3,
.prio-none {
  background: var(--bs-secondary-bg);
  color: var(--bs-secondary-color);
}

/* ---------- watchlist match cards ---------- */

.match-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.match-card {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.6rem 0.9rem;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.match-card:hover {
  border-color: var(--bs-primary);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.match-card__prio {
  text-align: center;
}
.match-card__main {
  min-width: 0;
}
.match-card__title {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.match-card__meta {
  font-size: 0.78rem;
  color: var(--bs-secondary-color);
  margin-top: 0.15rem;
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
}
.match-card__meta .tag {
  margin: 0;
  font-size: 0.7rem;
  padding: 0.05rem 0.4rem;
}
.match-card__status {
  text-transform: lowercase;
}
.match-card__status-new {
  color: var(--bs-primary);
  font-weight: 600;
}
.match-card__status-saved {
  color: var(--bs-success);
  font-weight: 600;
}
.match-card__status-pending_eval {
  color: var(--bs-warning);
  font-style: italic;
}
.match-card__status-rejected {
  color: var(--bs-danger);
}
.match-card__status-dismissed {
  color: var(--bs-secondary-color);
}
.match-card__price {
  text-align: right;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.match-card__price-sale {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  background: var(--bs-danger-bg-subtle);
  color: var(--bs-danger-text-emphasis);
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
}

/* legacy hand-rolled modal (watchlists) — Bootstrap's modal is used everywhere new */
dialog.match-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  border: 1px solid var(--bs-border-color);
  border-radius: 12px;
  padding: 0;
  max-width: 640px;
  width: calc(100% - 2rem);
  max-height: calc(100vh - 2rem);
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
dialog.match-modal[open] {
  display: flex;
  flex-direction: column;
}
dialog.match-modal::backdrop {
  background: rgba(0, 0, 0, 0.5);
}
.match-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--bs-border-color);
  flex-shrink: 0;
}
.match-modal__header h2 {
  font-size: 1.05rem;
  line-height: 1.3;
  margin: 0;
}
.match-modal__close {
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: var(--bs-secondary-color);
  padding: 0;
}
.match-modal__body {
  padding: 1rem 1.25rem;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}
.match-modal__image {
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  background: var(--bs-secondary-bg);
  border-radius: 6px;
  margin-bottom: 0.75rem;
}
.match-modal__field {
  display: flex;
  gap: 0.5rem;
  margin: 0.4rem 0;
  font-size: 0.9rem;
}
.match-modal__field-label {
  color: var(--bs-secondary-color);
  font-weight: 600;
  min-width: 90px;
}
.match-modal__reason {
  font-style: italic;
  color: var(--bs-secondary-color);
  margin: 0.5rem 0;
}
.match-modal__notes {
  padding: 0.5rem 0.75rem;
  background: var(--bs-secondary-bg);
  border-left: 3px solid var(--bs-primary);
  border-radius: 4px;
  margin: 0.5rem 0;
  white-space: pre-wrap;
  font-size: 0.88rem;
}
.match-modal__actions {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--bs-border-color);
  flex-wrap: wrap;
  flex-shrink: 0;
}
.match-modal__actions form {
  display: inline;
}

/* ---------- rendered markdown ---------- */

.prose {
  line-height: 1.7;
}
.prose h1 {
  font-size: 1.5rem;
  margin: 1.5rem 0 0.75rem;
  border-bottom: 1px solid var(--bs-border-color);
  padding-bottom: 0.3rem;
}
.prose h2 {
  font-size: 1.25rem;
  margin: 1.25rem 0 0.6rem;
  border-bottom: 1px solid var(--bs-border-color);
  padding-bottom: 0.25rem;
}
.prose h3 {
  font-size: 1.1rem;
  margin: 1rem 0 0.5rem;
}
.prose p {
  margin: 0.6rem 0;
}
.prose ul,
.prose ol {
  margin: 0.6rem 0;
  padding-left: 1.5rem;
}
.prose li {
  margin: 0.25rem 0;
}
.prose code {
  background: var(--bs-secondary-bg);
  padding: 0.15rem 0.35rem;
  border-radius: 3px;
  font-size: 0.85em;
}
.prose pre {
  background: var(--bs-secondary-bg);
  padding: 1rem;
  border-radius: 6px;
  overflow-x: auto;
  margin: 0.75rem 0;
  border: 1px solid var(--bs-border-color);
}
.prose pre code {
  background: none;
  padding: 0;
  font-size: 0.85rem;
}
.prose table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.75rem 0;
}
.prose th,
.prose td {
  border: 1px solid var(--bs-border-color);
  padding: 0.4rem 0.6rem;
  text-align: left;
}
.prose blockquote {
  border-left: 3px solid var(--bs-primary);
  padding: 0.5rem 1rem;
  margin: 0.75rem 0;
  color: var(--bs-secondary-color);
  background: var(--bs-secondary-bg);
}
.prose hr {
  border: none;
  border-top: 1px solid var(--bs-border-color);
  margin: 1.5rem 0;
}

/* ---------- tables ---------- */

/* DataTables' controls sit tighter than the default and read as one bar */
div.dt-container .dt-layout-row {
  margin-bottom: 0.5rem;
}
div.dt-container .dt-search input,
div.dt-container .dt-length select {
  font-size: 0.85rem;
}
div.dt-container .dt-info,
div.dt-container .dt-length label,
div.dt-container .dt-search label {
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
}
table.dataTable thead th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--bs-secondary-color);
  white-space: nowrap;
}
table.table td,
table.table th {
  vertical-align: middle;
}
td.cell-wrap {
  white-space: normal;
  min-width: 16rem;
}

/* ---------- misc utilities the views rely on ---------- */

/* Bootstrap's .flex-row only sets flex-direction; the old stylesheet's meant
   "a horizontal row of things", and ~30 pages were written against that. */
.flex-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.flex-between {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.text-sm {
  font-size: 0.85rem;
}
.text-xs {
  font-size: 0.75rem;
}
.mono {
  font-family: var(--bs-font-monospace);
  font-size: 0.85rem;
}
.nowrap {
  white-space: nowrap;
}
.truncate {
  max-width: 34rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: bottom;
}
.empty-state {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--bs-secondary-color);
}
.empty-state p {
  margin-bottom: 0.75rem;
}

/* nav dropdown section labels */
.dropdown-menu .dropdown-header {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  padding-bottom: 0.15rem;
}
.navbar .dropdown-menu {
  font-size: 0.9rem;
}
@media (min-width: 992px) {
  .navbar-nav .dropdown-menu {
    margin-top: 0;
  }
}

/* theme toggle button in the navbar */
.theme-toggle {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  border-radius: 6px;
  padding: 0.15rem 0.5rem;
  font-size: 0.85rem;
  line-height: 1.4;
  cursor: pointer;
}
.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.15);
}