/*
 qbmonitor annotated mapping

 File: app/app/static/css/dashboard.css
 Purpose: Stylesheet for qbmonitor UI (dashboard/settings).
 Referenced by: HTML templates via <link rel="stylesheet" ...>.
 Notes: Comments only.
*/
body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #050608;
    color: #f5f5f5;
    margin: 0;
    padding: 0;
}

/* =========================
   QB Pill (badge / status)
   ========================= 
   Header layout
   ========================= */
.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* =========================
   QB Pill (badge / status)
   ========================= */
.qb-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.85rem;
  line-height: 1;
  font-weight: 500;
  white-space: nowrap;
  backdrop-filter: blur(6px);
  background: rgba(30, 41, 59, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 4px 16px rgba(0,0,0,0.25);
}

.qb-pill.title {
  font-size: 0.9rem;
  font-weight: 600;
}

/* Indicator dot */
.qb-pill .dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #64748b;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.25);
}

/* States */
.qb-pill.connected .dot {
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34,197,94,0.75);
}

.qb-pill.connecting .dot {
  background: #facc15;
}

.qb-pill.error .dot {
  background: #ef4444;
}

/* Not-configured is visually similar to error but clearer on tooltip */
.qb-pill.not-configured .dot {
  background: #f97316;
}

/* Header "link-button" styling */
button.small-muted {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: var(--muted);
}
button.small-muted:hover {
  text-decoration: underline;
}

/* ===== Blocking overlay + modal for qB login ===== */
.qb-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 9998;
  align-items: center;
  justify-content: center;
}
.qb-overlay-card {
  width: min(520px, 92vw);
  background: rgba(30, 41, 59, 0.92);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 18px 18px 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  text-align: center;
}
.qb-overlay-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 6px; }
.qb-overlay-sub { color: rgba(255,255,255,0.75); font-size: 0.9rem; margin-bottom: 14px; }
.qb-overlay-btn {
  background: rgba(255,255,255,0.08);
  color: white;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
}
.qb-overlay-btn:hover { background: rgba(255,255,255,0.12); }

.qb-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qb-modal-card {
  width: min(560px, 94vw);
  background: rgba(30, 41, 59, 0.96);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
}
.qb-modal-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 14px; }
.qb-modal-grid {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 10px 12px;
  align-items: center;
}
.qb-modal-label { color: rgba(255,255,255,0.75); font-size: 0.9rem; }
.qb-modal-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(15, 23, 42, 0.65);
  color: white;
  outline: none;
}
.qb-pass-wrap { display: flex; gap: 8px; align-items: center; }
.qb-eye {
  width: 42px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: white;
  cursor: pointer;
}
.qb-eye:hover { background: rgba(255,255,255,0.10); }
.qb-modal-error { margin-top: 10px; color: #fecaca; min-height: 1.2em; }
.qb-modal-actions { display: flex; justify-content: flex-end; margin-top: 14px; }
.qb-modal-save {
  background: rgba(34,197,94,0.16);
  border: 1px solid rgba(34,197,94,0.35);
  color: white;
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
}
.qb-modal-save:hover { background: rgba(34,197,94,0.22); }


/* ==============================
   Ratio Events (Phase C-4.x)
   ============================== */

#ratio-events-table tbody tr.sev-extreme { background: rgba(255, 60, 60, 0.25); }
#ratio-events-table tbody tr.sev-strong  { background: rgba(255, 165, 0, 0.22); }
#ratio-events-table tbody tr.sev-moderate{ background: rgba(255, 215, 0, 0.20); }
#ratio-events-table tbody tr.sev-weak    { background: rgba(0, 160, 255, 0.08); }

.ratio-event-details-inner { padding: 10px 6px; }
.ratio-event-metrics { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 10px; }
.ratio-event-section { margin-top: 10px; }
.ratio-event-section-title { font-weight: 600; margin-bottom: 6px; }
.ratio-event-list { margin: 0; padding-left: 18px; }

.ratio-event-category-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 6px;
}
.ratio-event-category-table th,
.ratio-event-category-table td {
  padding: 4px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 12px;
}
.ratio-event-category-table thead th {
  font-weight: 600;
  color: rgba(255,255,255,0.8);
}


.dashboard-root {
    max-width: 1400px;
    margin: 0 auto;
    padding: 16px 16px 32px;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
}

.dashboard-header h1 {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.dashboard-header .subtitle {
    opacity: 0.8;
    font-size: 13px;
}

.card-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.card-row.single {
    grid-template-columns: minmax(0, 1fr);
}

.card-row.double {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
}

@media (max-width: 900px) {
    .card-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

.card {
    background: radial-gradient(circle at top left, #1b2838, #080b10);
    border-radius: 14px;
    border: 1px solid #232733;
    padding: 10px 12px 12px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.55);
    position: relative;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
}

/* ===============================
   Tracker View / Network Sanity
   =============================== */
.ns-ip {
    cursor: pointer;
    user-select: none;
}

.ns-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.06);
    font-size: 12px;
    line-height: 16px;
    margin-right: 6px;
}

.ns-badge.ok {
    border-color: rgba(34,197,94,0.35);
    background: rgba(34,197,94,0.10);
}
.ns-badge.info {
    border-color: rgba(59,130,246,0.35);
    background: rgba(59,130,246,0.10);
}
.ns-badge.warn {
    border-color: rgba(234,179,8,0.35);
    background: rgba(234,179,8,0.10);
}
.ns-badge.bad {
    border-color: rgba(239,68,68,0.45);
    background: rgba(239,68,68,0.12);
}

.card-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fdfdfd;
}

.card-meta {
    font-size: 11px;
    opacity: 0.7;
}

.card-body {
    font-size: 13px;
}

#card-graph .card-body {
    position: relative;
    height: 260px;   /* ← adjust to preferred size */
    padding: 10px;
}

#card-hourly-curve .card-body {
    position: relative;
    height: 260px;   /* ← adjust to preferred size */
    padding: 10px;
}

#speedChart {
    width: 100% !important;
    height: 100% !important;
}

.metric-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px;
}

.metric-label {
    opacity: 0.78;
    font-size: 11px;
}

.metric-value {
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12px;
}

.metric-value-big {
    font-size: 14px;
    font-weight: 600;
}

.metric-tag {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 11px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.04);
}

.metric-tag.good {
    color: #b2f5b4;
    border-color: rgba(102, 187, 106, 0.7);
}

.metric-tag.bad {
    color: #ffb3b3;
    border-color: rgba(244, 67, 54, 0.7);
}

.metric-tag.neutral {
    color: #e0e0e0;
}

.table-wrapper {
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.05);
    background: rgba(0,0,0,0.2);
    overflow: hidden;
    max-height: 400px;
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.table thead {
    background: rgba(255,255,255,0.02);
}

.table th,
.table td {
    padding: 4px 6px;
    text-align: left;
    white-space: nowrap;
}

.table th {
    font-weight: 500;
    opacity: 0.76;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.table td {
    border-bottom: 1px solid rgba(255,255,255,0.03);
}

.table tbody tr:nth-child(even) {
    background: rgba(255,255,255,0.01);
}

/* Tracker Health / Errors card */
#card-tracker-health .input-sm {
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(0,0,0,0.15);
    color: inherit;
}

#card-tracker-health th[data-key] {
    cursor: pointer;
    user-select: none;
}

#card-tracker-health th[data-key]::after {
    content: "";
    opacity: 0.65;
    margin-left: 6px;
}

#card-tracker-health th.th-sort-asc::after { content: "▲"; }
#card-tracker-health th.th-sort-desc::after { content: "▼"; }

#card-tracker-health .th-trend {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    letter-spacing: 0.5px;
}

#card-tracker-health .th-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.06);
    font-size: 12px;
}

/* Settings: API verification (last card) */
.api-verify-results {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.api-verify-summary {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.api-verify-table td {
    white-space: normal;
    vertical-align: top;
}

.api-verify-table td:nth-child(1) {
    max-width: 560px;
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

.badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 1px 6px;
    font-size: 11px;
    background: rgba(0,0,0,0.3);
}

.badge.state-paused {
    color: #ffeb3b;
}

.badge.state-downloading {
    color: #80deea;
}

.badge.state-uploading {
    color: #c5e1a5;
}

.badge.state-error {
    color: #ef9a9a;
}

.small-muted {
    font-size: 11px;
    opacity: 0.7;
}

#speedChart {
    width: 100%;
    height: 220px;
}

.torrents-list {
    max-height: 420px;
    overflow-y: auto;
}

.chip {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(0,0,0,0.4);
    font-size: 11px;
    margin-left: 4px;
}

.chip-label {
    opacity: 0.7;
}

.chip-value {
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    margin-left: 4px;
}

.footer-note {
    margin-top: 4px;
    font-size: 11px;
    opacity: 0.6;
}

/* Torrent table toolbar */
.torrent-table-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.btn-reset-sort {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.15);
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.btn-reset-sort:hover {
    background: rgba(255,255,255,0.06);
}

/* Hover highlight on torrent rows */
#torrents-table tbody tr:hover {
    background: rgba(255,255,255,0.03);
}

#card-torrents .table-wrapper {
  max-height: 420px;
  overflow-y: auto;
  overscroll-behavior: contain;
}


/* MOBILE FIX: torrent table horizontal scroll */
@media (max-width: 900px) {
    #card-torrents .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    #torrents-table {
        min-width: 900px; /* forces full table to scroll, not squish */
    }

    #torrents-table td,
    #torrents-table th {
        white-space: nowrap; /* keep content readable */
    }
}

<style>
/* === Ratio Event Expanded Sections === */
.ratio-event-section {
  margin-top: 8px;
}

.ratio-event-section-title {
  font-weight: 600;
  margin-bottom: 2px;
}

.ratio-event-list {
  margin: 0;
  padding-left: 16px;
}

/* Ratio Events: allow smooth scrolling when rows expand */
#card-ratio-events .table-wrapper {
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Make expanded detail rows visually distinct */
#ratio-events-table tr.ratio-event-details td {
  padding: 10px 14px;
}

#card-ratio-events .table-wrapper {
  overflow-y: auto;
}

.ratio-events-filters {
  display: flex;
  gap: 8px;
  align-items: center;
}

.ratio-events-filters select,
.ratio-events-filters input {
  background: #111;
  color: #ddd;
  border: 1px solid #333;
  padding: 3px 6px;
  font-size: 12px;
}

.info-tooltip {
  margin-left: 6px;
  cursor: help;
  color: #9bb4d1;
  font-size: 13px;
  user-select: none;
}

.info-tooltip:hover {
  color: #cfe3ff;
}

.ratio-severity-legend {
  display: flex;
  gap: 12px;
  margin-bottom: 6px;
  font-size: 12px;
}

.ratio-severity-legend .legend-item {
  padding: 2px 8px;
  border-radius: 4px;
  line-height: 1.4;
}

.ratio-severity-legend .sev-weak {
  background: rgba(0, 160, 255, 0.10);
}

.ratio-severity-legend .sev-moderate {
  background: rgba(255, 215, 0, 0.20);
}

.ratio-severity-legend .sev-strong {
  background: rgba(255, 165, 0, 0.22);
}

.ratio-severity-legend .sev-extreme {
  background: rgba(255, 60, 60, 0.25);
}

/* Row coloring based on severity (applied to clickable rows only) */
#ratio-events-table tbody tr.ratio-event-row.sev-extreme { background: rgba(255, 60, 60, 0.25); }
#ratio-events-table tbody tr.ratio-event-row.sev-strong  { background: rgba(255, 165, 0, 0.22); }
#ratio-events-table tbody tr.ratio-event-row.sev-moderate{ background: rgba(255, 215, 0, 0.20); }
#ratio-events-table tbody tr.ratio-event-row.sev-weak    { background: rgba(0, 160, 255, 0.08); }

.ratio-event-details-inner { padding: 10px 8px; }
.ratio-event-metrics { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.ratio-event-section { margin-top: 10px; }
.ratio-event-section-title { font-weight: 700; margin-bottom: 6px; }
.ratio-event-list { margin: 0; padding-left: 18px; }

.ratio-event-category-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 6px;
}
.ratio-event-category-table th,
.ratio-event-category-table td {
  padding: 4px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ratio-event-category-table thead th { font-size: 12px; }

.ratio-event-details-inner {
  padding: 10px 8px;
}

.ratio-event-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 10px;
  margin-bottom: 10px;
}

.ratio-event-section {
  margin-top: 10px;
}

.ratio-event-section-title {
  font-weight: 600;
  margin-bottom: 6px;
}

.ratio-event-list {
  margin: 0;
  padding-left: 18px;
}

.ratio-event-category-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.ratio-event-category-table th,
.ratio-event-category-table td {
  padding: 4px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.ratio-event-category-table th {
  color: rgba(255,255,255,0.75);
  font-weight: 600;
}

/* Row coloring based on severity (applied to clickable rows only) */
#ratio-events-table tbody tr.ratio-event-row.sev-extreme { background: rgba(255, 60, 60, 0.25); }
#ratio-events-table tbody tr.ratio-event-row.sev-strong  { background: rgba(255, 165, 0, 0.22); }
#ratio-events-table tbody tr.ratio-event-row.sev-moderate{ background: rgba(255, 215, 0, 0.20); }
#ratio-events-table tbody tr.ratio-event-row.sev-weak    { background: rgba(0, 160, 255, 0.08); }

.ratio-event-details-inner {
  padding: 10px 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.ratio-event-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 6px 14px;
  margin-bottom: 10px;
}

.ratio-event-section {
  margin-top: 10px;
}

.ratio-event-section-title {
  font-weight: 600;
  margin-bottom: 6px;
  color: rgba(255,255,255,0.85);
}

.ratio-event-list {
  margin: 0;
  padding-left: 18px;
}

.ratio-event-category-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.ratio-event-category-table th,
.ratio-event-category-table td {
  padding: 4px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.ratio-event-category-table thead th {
  color: rgba(255,255,255,0.75);
  font-weight: 600;
}

/* Settings page text color */
.settings-page,
.settings-page * {
    color: #eaeaea; /* soft white, readable on dark bg */
}

a,
a:visited {
    color: #eaeaea;
}

a:hover {
    color: #cce6ff;
}


/* -----------------------------
   Settings page helpers
------------------------------ */
.settings-page,
.settings-page * {
    color: #eaeaea;
}

.settings-multilist {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 8px 14px;
    padding: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    background: rgba(0,0,0,0.12);
    max-height: 320px;
    overflow: auto;
}

.settings-multilist label {
    display: flex;
    gap: 8px;
    align-items: center;
    cursor: pointer;
    user-select: none;
    font-size: 14px;
}

.settings-multilist input[type="checkbox"] {
    transform: translateY(1px);
}


/* =============================
   Settings form input visibility
   ============================= */
.settings-page input,
.settings-page select,
.settings-page textarea {
    background-color: #1e1e1e;
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.35);
}

.settings-page input::placeholder {
    color: rgba(255,255,255,0.55);
}

.settings-page select option {
    background-color: #1e1e1e;
    color: #ffffff;
}

.settings-page input:focus,
.settings-page select:focus,
.settings-page textarea:focus {
    outline: none;
    border-color: #5aa9ff;
    box-shadow: 0 0 0 1px rgba(90,169,255,0.6);
}

.eval-badge{padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600}
.eval-true{background:rgba(46,204,113,.2);color:#2ecc71}
.eval-false{background:rgba(231,76,60,.2);color:#e74c3c}

.apply-row{display:flex;flex-wrap:wrap;gap:6px}

/* Evaluator badge N/A */
.eval-na {
    background: rgba(148, 163, 184, 0.2);
    color: #94a3b8;
}

/* Settings action buttons visibility */
.settings-page button,
.settings-page .btn-primary,
.settings-page .btn-secondary {
    color: #ffffff !important;
}

.settings-page .btn-primary {
    background: #3b82f6 !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
}

.settings-page .btn-secondary {
    background: #374151 !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
}

/* Restricted card counter pill (yellow) */
.pill-warning{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  height:24px;
  padding:0 10px;
  border-radius:999px;
  background:#ffcc00;
  color:#111;
  font-weight:800;
  font-size:12px;
  line-height:24px;
  box-shadow:0 0 0 1px rgba(0,0,0,0.25) inset;
}

/* Subtle warning accent (left stripe) */
.card-warning{
  border-left:4px solid #ffcc00;
}


/* === Heatmap single-band layout fix (32px) === */
#heatmap {
  display: grid !important;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: 2px;
  height: 32px;
}

#heatmap .heatmap-cell {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.10);
  user-select: none;
}
/* === Heatmap base colors === */
#heatmap .heatmap-cell {
  background-color: #f97316; /* combined default (orange) */
}

/* Upload = green */
#heatmap.mode-upload .heatmap-cell {
  background-color: #22c55e;
}

/* Download = reddish */
#heatmap.mode-download .heatmap-cell {
  background-color: #ef4444;
}

/* Combined = orangish */
#heatmap.mode-combined .heatmap-cell {
  background-color: #f97316;
}
/* === Heatmap number emphasis (larger & centered) === */
#heatmap .heatmap-cell {
  display: flex;
  align-items: center;      /* vertical center */
  justify-content: center;  /* horizontal center */
  font-size: 1.1rem;        /* noticeably larger */
  font-weight: 700;         /* bold */
  line-height: 1;
  text-align: center;
}

.heatmap-cell.best-hour {
  box-shadow: inset 0 0 0 2px rgba(34,197,94,0.95);
}

.heatmap-cell.worst-hour {
  box-shadow: inset 0 0 0 2px rgba(239,68,68,0.95);
}

/* ===== Summary Extended Card ===== */

.summary-extended-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 18px;
  font-size: 13px;
  line-height: 1.3;
}

.summary-extended-grid .row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  white-space: nowrap;
}

.summary-extended-grid .label {
  color: #9aa4b2;
  font-weight: 500;
}

.summary-extended-grid .value {
  font-weight: 600;
  color: #e5e7eb;
  font-variant-numeric: tabular-nums;
}

/* Section divider */
.summary-extended-grid hr {
  grid-column: 1 / -1;
  border: none;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin: 6px 0;
}

/* Golden / Toxic emphasis */
.summary-extended-grid .row.golden .value {
  color: #22c55e; /* green */
}

.summary-extended-grid .row.toxic .value {
  color: #ef4444; /* red */
}

/* Best / Worst hour emphasis */
#summary-best-hour {
  color: #22c55e;
}

#summary-worst-hour {
  color: #ef4444;
}

/* Updated timestamp */
.summary-extended-grid .updated {
  grid-column: 1 / -1;
  margin-top: 4px;
  font-size: 11px;
  color: #6b7280;
  text-align: right;
}

/* ===== Today Extended (dense composite card) ===== */

.today-extended.dense {
  padding: 10px 12px;
}

.today-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.today-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.today-col .metric {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.today-col .label {
  font-size: 11px;
  color: #9aa4b2;
  white-space: nowrap;
}

.today-col .value {
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.today-col .metric.golden .value {
  color: #22c55e;
}

.today-col .metric.toxic .value {
  color: #ef4444;
}

.card-row.full {
  grid-column: 1 / -1;
  display: block;
}

/* colors */
.gain {
  color: #22c55e; /* green */
  font-weight: 600;
}

.loss {
  color: #ef4444; /* red */
  font-weight: 600;
}

.neutral {
  color: #94a3b8;
}
/* Ratio Event Severity */
.ratio-gain-strong { background: rgba(0, 200, 0, 0.25); }
.ratio-gain-mild   { background: rgba(0, 200, 0, 0.12); }
.ratio-loss-mild   { background: rgba(200, 0, 0, 0.12); }
.ratio-loss-strong { background: rgba(200, 0, 0, 0.25); }

.ratio-row { cursor: pointer; }
.ratio-detail.hidden { display: none; }


/* ------------------------------------------------------------
   Ratio Events: Phase D/E/F enhancements (Attribution + Hour Hint + Recs)
   ------------------------------------------------------------ */
.btn-mini{
  margin-left: 10px;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06);
  color: inherit;
  cursor: pointer;
  font-size: 12px;
}
.btn-mini:hover{ background: rgba(255,255,255,0.10); }

.ratio-recs-box{
  margin: 10px 0 12px 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
}
.ratio-recs-box.hidden{ display:none; }
.ratio-recs-title{ font-weight: 700; margin-bottom: 6px; }
.ratio-recs-item{ margin: 6px 0; }
.ratio-recs-item .title{ font-weight: 600; }
.ratio-recs-item .text{ opacity: 0.9; }

.ratio-event-hourhint{
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
}
.ratio-event-hourhint.golden{ border-color: rgba(34,197,94,0.35); }
.ratio-event-hourhint.toxic{ border-color: rgba(239,68,68,0.35); }
.ratio-event-hourhint .k{ font-weight: 600; margin-bottom: 2px; }

.ratio-event-attrib{
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.ratio-event-attrib-title{ font-weight: 700; margin-bottom: 4px; }
.ratio-event-attrib-subtitle{ font-weight: 600; margin: 8px 0 6px; }
.ratio-event-attrib-grid{
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 12px;
}
@media (max-width: 1100px){
  .ratio-event-attrib-grid{ grid-template-columns: 1fr; }
}
.ratio-event-attrib-pane{
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  padding: 10px;
  background: rgba(255,255,255,0.02);
}
.ratio-event-attrib-table, .ratio-event-attrib-rollup{
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.ratio-event-attrib-table th, .ratio-event-attrib-table td,
.ratio-event-attrib-rollup th, .ratio-event-attrib-rollup td{
  padding: 6px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  vertical-align: middle;
}
.ratio-event-attrib-table td.name{
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ratio-event-attrib-table tr.carrier td.cls{ color: rgba(34,197,94,0.9); }
.ratio-event-attrib-table tr.passenger td.cls{ color: rgba(148,163,184,0.9); }
.ratio-event-attrib-table .share .pct,
.ratio-event-attrib-rollup .pct{
  margin-left: 6px;
  opacity: 0.85;
}
.ratio-event-attrib-rollup td.n{
  width: 40px;
  text-align: right;
  opacity: 0.85;
}
.bar{
  display:inline-block;
  width: 110px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  overflow:hidden;
  vertical-align: middle;
}
.barfill{
  height: 100%;
  background: rgba(255,255,255,0.45);
}
.ratio-tuning-controls {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
}

.tuning-info-icon {
  cursor: pointer;
  font-weight: 600;
  opacity: 0.8;
  user-select: none;
}

.tuning-info-icon:hover {
  opacity: 1;
}



/* Health pills (global connection indicator) */
.pill-good, .pill-bad, .pill-warn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:24px;
  padding:0 10px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
  line-height:24px;
  user-select:none;
  box-shadow:0 0 0 1px rgba(255,255,255,0.08) inset;
  margin-left:10px;
}
.pill-good{ background: rgba(34,197,94,0.22); color:#d1fae5; border:1px solid rgba(34,197,94,0.45); }
.pill-warn{ background: rgba(234,179,8,0.18); color:#fef3c7; border:1px solid rgba(234,179,8,0.45); }
.pill-bad{ background: rgba(239,68,68,0.18); color:#fee2e2; border:1px solid rgba(239,68,68,0.45); }


/* Ratio Events severity row coloring */
tr.sev-low { background: rgba(16, 185, 129, 0.06); }      /* green-ish */
tr.sev-med { background: rgba(245, 158, 11, 0.06); }      /* amber-ish */
tr.sev-high { background: rgba(239, 68, 68, 0.06); }      /* red-ish */
tr.sev-extreme { background: rgba(168, 85, 247, 0.08); }  /* purple-ish */

/* Ensure long ratio event lists scroll within the card */
.table-wrapper { overflow-y: auto; }

tr.row-selected { outline: 2px solid rgba(59, 130, 246, 0.7); }

.pre-box{background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.08);padding:8px;border-radius:8px;max-height:220px;overflow:auto;font-size:12px;}
.mini-list{margin:6px 0 0 18px;max-height:220px;overflow:auto;font-size:12px;}


/* Audit Log (live, bounded) */
#card-audit-log .audit-log-list{
  /* ~20 rows visible before scroll */
  max-height: 520px;
  overflow-y: auto;
  padding-right: 4px;
}
#card-audit-log .audit-row{
  display:flex;
  gap:8px;
  padding:3px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 0.82rem;
  line-height: 1.25rem;
}
#card-audit-log .audit-ts{
  opacity:0.65;
  min-width:72px;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
#card-audit-log .audit-msg{
  flex: 1 1 auto;
  word-break: break-word;
}
#card-audit-log .audit-restricted{ background: rgba(255, 165, 0, 0.10); }
#card-audit-log .audit-unrestricted{ background: rgba(0, 255, 0, 0.08); }
#card-audit-log .audit-deleted{ background: rgba(255, 0, 0, 0.10); }
#card-audit-log .audit-system{ background: rgba(0, 136, 255, 0.10); }
#card-audit-log .audit-controller{ background: rgba(180, 120, 255, 0.10); }
#card-audit-log .audit-ratio{ background: rgba(160, 160, 255, 0.10); }

/* Audit Log */
.audit-log-list { max-height: 520px; overflow-y: auto; }
.audit-rows { list-style: none; margin: 0; padding: 0; }
.audit-row { display: flex; gap: .5rem; padding: 2px 4px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.audit-ts { opacity: .6; min-width: 74px; font-variant-numeric: tabular-nums; }
.audit-restricted { background: rgba(255,165,0,0.08); }
.audit-unrestricted { background: rgba(0,255,0,0.06); }
.audit-deleted { background: rgba(255,0,0,0.08); }
.audit-system { background: rgba(0,136,255,0.08); }
.audit-controller { background: rgba(160,160,255,0.08); }
.audit-ratio { background: rgba(160,160,255,0.06); }


/* Force stack Ratio on top of Learning card */
/* Force Ratio Events + Learning to full width rows */
#card-ratio-events,
#card-learning {
  grid-column: 1 / -1;
}

/* Stack Model - Stalled 3 rows within Ratio Events card */
.learning-kv-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 8px 24px;
}

.learning-kv-grid .kv {
  margin: 0;
}

#learning-category-json {
  max-height: 220px;
  overflow-y: auto;
  white-space: pre;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}

#learning-category-json {
  min-height: 160px;
}

#learning-category-json {
  white-space: pre-wrap;        /* preserves formatting AND allows wrapping */
  word-break: break-word;       /* break long tokens */
  overflow-wrap: anywhere;      /* last-resort wrapping for long keys */
  overflow-y: auto;

  max-height: 240px;            /* or whatever you prefer */
  padding: 6px 8px;

  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.35;
}

/* --- qB Login / Connection UI fixes --- */

/* Ensure header pills are readable */
#qb-login-btn,
#qb-conn-pill {
  color: #fff !important;
  background: rgba(80, 120, 255, 0.25);
  border: 1px solid rgba(120, 160, 255, 0.6);
  font-weight: 600;
}

/* Make login button clearly interactive */
#qb-login-btn {
  cursor: pointer;
  pointer-events: auto;
}

/* Connection pill states */
#qb-conn-pill.connected {
  background: rgba(0, 180, 90, 0.35);
  border-color: rgba(0, 220, 120, 0.9);
}

#qb-conn-pill.error {
  background: rgba(200, 40, 40, 0.35);
  border-color: rgba(255, 80, 80, 0.9);
}

#qb-conn-pill.not-configured {
  background: rgba(120, 120, 120, 0.35);
  border-color: rgba(180, 180, 180, 0.8);
}

/* Ensure header does not block clicks */
header,
.header,
.top-bar {
  pointer-events: auto;
  z-index: 50;
}

/* Ensure modals are above everything */
.modal-overlay {
  z-index: 9999;
}
/* Force qB login modal to actually be visible */
#qb-login-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
}

#qb-login-modal[style*="display: flex"] {
  display: flex !important;
}

/* ================================
   Selector visibility / contrast
   ================================ */

/* Base select styling */
select,
.selector,
.card select {
  color: #e5e7eb;                 /* text */
  background-color: #0f172a;      /* slate-900 */
  border: 1px solid rgba(255,255,255,0.18);
}

/* Options dropdown */
select option {
  color: #e5e7eb;
  background-color: #020617;      /* near-black */
}

/* Hover / focus */
select:hover,
select:focus {
  border-color: #38bdf8;          /* sky-400 */
  outline: none;
}

/* Disabled (if any) */
select:disabled {
  color: #6b7280;
  background-color: #020617;
  border-color: rgba(255,255,255,0.08);
}

/* Match pill-style buttons nearby */
.card .selector,
.card select {
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 500;
}

/* Ensure arrow is visible in dark themes */
select {
  accent-color: #38bdf8;
}

/* Base pill */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  transition:
    background-color 120ms ease,
    color 120ms ease,
    box-shadow 120ms ease,
    transform 80ms ease;
}

/* Muted / default pill */
.pill--muted {
  background: #f1f5f9;          /* light gray */
  color: #334155;               /* slate text */
  box-shadow: inset 0 0 0 1px #e2e8f0;
}

/* Hover */
.pill--muted:hover {
  background: #e2e8f0;
  color: #0f172a;
  box-shadow:
    inset 0 0 0 1px #cbd5e1,
    0 1px 2px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}

/* Active / pressed */
.pill--muted:active {
  transform: translateY(0);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* ---------- Context menu (Restricted Torrents override) ---------- */
.qbm-context-menu {
  position: absolute;
  z-index: 9999;
  min-width: 240px;
  max-width: 360px;
  padding: 8px;
  border-radius: 10px;
  background: rgba(20, 20, 24, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 14px 48px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
}

.qbm-context-menu__title {
  font-size: 12px;
  opacity: 0.9;
  padding: 4px 6px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qbm-context-menu__item {
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
}

.qbm-context-menu__item:hover {
  background: rgba(255, 255, 255, 0.12);
}

.restricted-overridden {
  opacity: 0.75;
}

/* Optional: current page highlight */
.pill.is-active {
  background: #0ea5e9;          /* accent blue */
  color: #ffffff;
  box-shadow: none;
}

.topbar .pill {
  padding: 5px 12px;
  font-size: 12.5px;
}

/* Ensure pill text is always visible */
.pill,
.pill:visited {
  color: #0f172a; /* dark slate text */
}


/* History cards (totals/speeds): fixed 7-row viewport + scrolling for longer ranges */
#card-history-totals .table-wrapper,
#card-history-speeds .table-wrapper {
  max-height: 220px;
  overflow-y: auto;
}
#card-history-totals tbody tr.is-selected {
  background: rgba(255,255,255,0.04);
}
#card-history-totals .history-comment-block {
  margin-top: 10px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 8px;
  background: rgba(0,0,0,0.18);
}
#card-history-totals .history-comment-block .row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}
#card-history-totals .history-comment-block .label {
  opacity: 0.75;
  font-size: 12px;
}
#card-history-totals .history-comment-block textarea {
  width: 100%;
  min-height: 44px;
  resize: vertical;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.25);
  color: inherit;
}
#card-history-totals .history-comment-block .status {
  margin-left: auto;
  font-size: 11px;
  opacity: 0.7;
}

/* Settings: align a select and a button on the same row (used by External Reflector Mode) */
.inline-row {
  display: flex;
  gap: 10px;
  align-items: center;
}
.inline-row select {
  flex: 1 1 auto;
  min-width: 0;
}


/* === External Reflector inline controls === */
.reflector-inline-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.reflector-inline-row select {
  width: auto;
  min-width: 340px;
  max-width: 420px;
}

.reflector-instructions-btn {
  white-space: nowrap;
}


/* Utility: small spacing helpers (used by Settings cards) */
.mt-8 { margin-top: 8px; }


/* TL Achievements: completed rows */
.achievement-complete { background: rgba(46, 204, 113, 0.14); }
.achievement-subrow td { padding: 10px 12px; }
.achievement-panel { border-left: 3px solid rgba(255,255,255,0.18); padding-left: 10px; }
.achievement-panel .small { opacity: 0.9; }
.achievement-panel table { width: 100%; border-collapse: collapse; }
.achievement-panel th, .achievement-panel td { padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,0.10); }
.achievement-panel .scroll { max-height: 320px; overflow: auto; }

/* TL Achievements: last fetch readability */
#last-fetch {
  color: #e5e7eb;            /* light slate */
  font-weight: 600;
  opacity: 1 !important;
}

/* TL Achievements: next refresh readability */
#next-refresh {
  color: #e5e7eb;
  font-weight: 600;
  opacity: 1 !important;
}

/* Make last fetch pill pop slightly */
#last-fetch {
  text-shadow: 0 0 4px rgba(56,189,248,0.35);
}

/* TorrentLeech Achievements: collapsible category headers */
.ach-cat-row td { padding-top: 10px; padding-bottom: 10px; }
.ach-cat-row { user-select: none; }
.ach-cat-row.collapsed .cat { opacity: 0.9; }


/* Surplus card: split into Surplus / Seeding columns */
.surplus-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.surplus-split .split-title {
  font-size: 12px;
  font-weight: 650;
  opacity: 0.85;
  margin-bottom: 6px;
}

.surplus-split .split-col {
  padding-right: 4px;
}

/* Mobile: stack */
@media (max-width: 900px) {
  .surplus-split {
    grid-template-columns: 1fr;
  }
}


/* Surplus card split */
.surplus-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
  padding-top: 8px;
}

.surplus-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.surplus-col:not(:last-child) {
  border-right: 1px solid rgba(255,255,255,0.08);
  padding-right: 24px;
}

.surplus-col:not(:first-child) {
  padding-left: 24px;
}

@media (max-width: 900px) {
  .surplus-grid {
    grid-template-columns: 1fr;
  }
  .surplus-col {
    border-right: none;
    padding-right: 0;
    padding-left: 0;
  }
}

/* Surplus / Seed metrics: enforce stable two-column layout */
#card-surplus .metrics,
#card-surplus-history .metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 32px;
}

/* Each side (left/right) */
#card-surplus .metrics > div {
  display: flex;
  flex-direction: column;
}

/* Individual rows: label | value split */
#card-surplus .metric {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  column-gap: 12px;
  align-items: baseline;
}

#card-surplus .metric .label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#card-surplus .metric .value {
  text-align: right;
  white-space: nowrap;
}


#card-surplus .metric {
  overflow: visible;
}

/* ------------------------------------------------------------
   RAG Docs Chat (popup modal)
   ------------------------------------------------------------ */

.rag-chat-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: none;
  z-index: 9999;
}

.rag-chat-modal.open {
  display: block;
}

.rag-chat-panel {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: min(560px, calc(100vw - 36px));
  max-height: min(680px, calc(100vh - 36px));
  display: flex;
  flex-direction: column;
  background: rgba(18, 20, 26, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.rag-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.rag-chat-title {
  font-weight: 700;
}

.rag-chat-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.rag-chat-toggle {
  font-size: 12px;
  opacity: 0.9;
  display: flex;
  align-items: center;
  gap: 6px;
}

.rag-chat-messages {
  padding: 10px 12px;
  overflow: auto;
  flex: 1;
}

.rag-msg {
  margin-bottom: 10px;
}

.rag-msg-meta {
  font-size: 11px;
  opacity: 0.75;
  margin-bottom: 3px;
}

.rag-msg-text {
  font-size: 13px;
  line-height: 1.35;
  white-space: pre-wrap;
}

.rag-msg.user .rag-msg-text {
  opacity: 0.95;
}

.rag-msg.assistant .rag-msg-text {
  opacity: 0.92;
}

.rag-msg-sources {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rag-src-title {
  font-size: 11px;
  opacity: 0.75;
}

.rag-src-link {
  font-size: 12px;
  color: #b7d6ff;
  text-decoration: none;
}

.rag-src-link:hover {
  text-decoration: underline;
}

.rag-chat-input-row {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.rag-chat-input {
  flex: 1;
  resize: vertical;
  min-height: 44px;
  max-height: 160px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  color: #fff;
  padding: 8px 10px;
}

.rag-chat-hint {
  padding: 0 12px 10px 12px;
  font-size: 11px;
  opacity: 0.8;
}


/* Docs Chat pill: brighten label */
#rag-chat-open.qb-pill {
  color: rgba(255,255,255,0.92);
}
#rag-chat-open.qb-pill:hover {
  color: rgba(255,255,255,1.0);
}

/* Docs Chat sources */
.rag-src-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 2px 0;
}
.rag-src-text {
  color: rgba(255,255,255,0.85);
  font-size: 12px;
}
.rag-src-link {
  font-size: 12px;
}
.rag-src-link-local {
  opacity: 0.85;
}
.rag-src-link-local:hover {
  opacity: 1.0;
}

#card-surplus .metric[data-kind="credit"]  .value { color: #ffffff; } /* for bold { font-weight: 700; color: #ffffff; } */
#card-surplus .metric[data-kind="gross"]   .value { color: #2ecc71; }
#card-surplus .metric[data-kind="net"]     .value { font-weight: 700; color: #3498db; }
#card-surplus .metric[data-kind="hnr"]     .value { color: #e74c3c; }
#card-surplus .metric[data-kind="deficit"] .value { color: #f39c12; }



/* =========================================================
   INTERNAL CARD SCROLLING (mobile + desktop)
   ========================================================= */
.card-body.scrollable {
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  max-height: 420px;
}

@media (max-width: 900px) {
  .card-body.scrollable {
    max-height: 60vh;
  }
}

/* Horizontal safety for wide content */
.card-body.scrollable > * {
  min-width: max-content;
}

/* Override failsafe for Last Removed only */
#card-removed.card .card-body.scrollable > * {
  min-width: 0 !important;
}

/* Table wrappers: allow both-axis scroll */
.table-wrapper {
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.table-wrapper table {
  min-width: max-content;
}

/* === v0.9.9.30.02-rag: guest/public + removed styling tweaks === */

/* Speeds graph: keep the chart stationary (no scrollbars inside the card). */
#card-graph .card-body { overflow: hidden; }

/* Last removed table styling rules */
.removed-row-lowratio td {
 /* background: #fef08a;  yellow */
  color: #dc2626;      /* red */
}

.removed-row-highratio td {
 /* background: #fef08a;  yellow */
  color: #16a34a;      /* green */
}

.removed-gain-negative {
  color: #dc2626;
  font-weight: 700;
}

.removed-gain-stalled {
  color: #fef08a;
 /* font-weight: 700; */
}

.removed-gain-positive {
  color: #16a34a;      /* green */
}

.table-scroll-x {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.table-scroll-x table {
    min-width: 900px; /* force overflow when needed */
    border-collapse: collapse;
}

#card-removed .table-wrapper {
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#card-removed table {
  min-width: 1100px; /* wide enough for all columns */
}

/* -----------------------------------------------------------------------------
   Settings: right-side validation panel
   -------------------------------------------------------------------------- */

.settings-layout{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.settings-main{
  flex:1;
  min-width:0;
}

.validation-panel{
  width: 480px;
  max-width: 48vw;
  position: sticky;
  top: 72px; /* below topbar */
  max-height: calc(100vh - 96px);
  overflow: hidden;
}

.validation-panel.hidden{
  display:none;
}

.validation-table-wrap{
  overflow:auto;
  max-height: calc(100vh - 220px);
  -webkit-overflow-scrolling: touch;
}

.validation-table{
  width:100%;
  border-collapse: collapse;
  font-size: 12px;
}

.validation-table th,
.validation-table td{
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 8px 6px;
  vertical-align: top;
}

.validation-table th{
  position: sticky;
  top: 0;
  background: rgba(11,18,32,0.98);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 11px;
  color: #94a3b8;
}

.validation-pill-ok{
  background: rgba(34,197,94,.14);
  border: 1px solid rgba(34,197,94,.24);
  color: #86efac;
}

.validation-pill-bad{
  background: rgba(239,68,68,.12);
  border: 1px solid rgba(239,68,68,.22);
  color: #fecaca;
}

.validation-pill-warn{
  background: rgba(251,191,36,.12);
  border: 1px solid rgba(251,191,36,.22);
  color: #fde68a;
}


/* Settings validation: binding warnings */
.validation-warning{
  margin-top:12px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,200,0,.35);
  background: rgba(255,200,0,.10);
  color: rgba(255,255,255,.92);
  font-size: 13px;
  line-height: 1.35;
}
.validation-warning.hidden{display:none;}