/* Backoffice do BREACH: o admin do Django em tom sóbrio (grafite e âmbar), sem fonte externa. */

:root,
html[data-theme="light"] {
  --primary: #39424e;
  --secondary: #1d232b;
  --accent: #e0a526;
  --primary-fg: #fff;
  --header-color: #d6dbe1;
  --header-branding-color: #f2f4f6;
  --header-bg: #1d232b;
  --header-link-color: #f2f4f6;
  --breadcrumbs-fg: #c7ccd2;
  --breadcrumbs-link-fg: #fff;
  --breadcrumbs-bg: #39424e;
  --link-fg: #1f5f99;
  --link-hover-color: #0f3f6b;
  --link-selected-fg: #0f3f6b;
  --button-bg: #39424e;
  --button-hover-bg: #1d232b;
  --default-button-bg: #1f5f99;
  --default-button-hover-bg: #0f3f6b;
  --object-tools-bg: #5b6572;
  --object-tools-hover-bg: #1d232b;
  --bo-card-bg: #f6f7f9;
  --bo-muted: #5b6572;
  --bo-ok: #2e7d4f;
  --bo-warn: #9a6a00;
  --bo-bad: #b3261e;
  --bo-bar: #39424e;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bo-card-bg: #20262d;
    --bo-muted: #9aa3ad;
    --bo-bar: #9aa3ad;
    --link-fg: #7fb4e6;
    --link-hover-color: #b6d5f2;
  }
}
html[data-theme="dark"] {
  --bo-card-bg: #20262d;
  --bo-muted: #9aa3ad;
  --bo-bar: #9aa3ad;
  --link-fg: #7fb4e6;
  --link-hover-color: #b6d5f2;
}

#site-name a { letter-spacing: 0.02em; }
.bo-mark { font-weight: 800; letter-spacing: 0.12em; color: var(--accent); }

/* --- painel --- */
.bo-dashboard #content { width: auto; max-width: 1280px; }
.bo-dashboard #content-main { float: none; width: 100%; }
.bo-dashboard .app-list { max-width: 720px; }
.bo-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin: 0 0 16px;
}
.bo-kpi {
  background: var(--bo-card-bg);
  border: 1px solid var(--hairline-color);
  border-left: 4px solid var(--primary);
  border-radius: 4px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bo-kpi strong { font-size: 1.7rem; line-height: 1.2; color: var(--body-fg); }
.bo-kpi small { color: var(--bo-muted); }
.bo-kpi-label { text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.06em; color: var(--bo-muted); }
.bo-kpi.bo-ok { border-left-color: var(--bo-ok); }
.bo-kpi.bo-bad { border-left-color: var(--bo-bad); }

.bo-alerts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.bo-alert {
  border: 1px solid var(--hairline-color);
  border-radius: 999px;
  padding: 4px 12px;
  background: var(--bo-card-bg);
}
.bo-alert strong { margin-left: 4px; }
.bo-alert-on { border-color: var(--bo-warn); }
.bo-alert-on strong { color: var(--bo-warn); }

.bo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.bo-card { padding-bottom: 8px; }
.bo-card > p, .bo-card > .bo-curves, .bo-card > .bo-bars { padding: 0 10px; }
.bo-note { color: var(--bo-muted); font-size: 0.85rem; }

.bo-table { width: 100%; border-collapse: collapse; }
.bo-table th, .bo-table td { padding: 5px 8px; text-align: left; border-bottom: 1px solid var(--hairline-color); vertical-align: top; }
.bo-table thead th { white-space: nowrap; }
.bo-table tbody th { font-weight: normal; color: var(--bo-muted); }
.bo-scroll { overflow-x: auto; }
.bo-empty { color: var(--bo-muted); margin: 0; }

/* Barras de Corridas por dia: altura por classe em degraus de 5 % (a CSP não deixa estilo em linha). */
.bo-bars { display: flex; align-items: flex-end; gap: 4px; height: 170px; padding-top: 8px; }
.bo-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; height: 100%; }
.bo-bar-track { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.bo-bar-fill { display: block; width: 100%; background: var(--bo-bar); border-radius: 2px 2px 0 0; min-height: 1px; }
.bo-bar-n { font-size: 0.75rem; }
.bo-bar-day { font-size: 0.65rem; color: var(--bo-muted); }
.bo-h-0 { height: 0; } .bo-h-1 { height: 5%; } .bo-h-2 { height: 10%; } .bo-h-3 { height: 15%; }
.bo-h-4 { height: 20%; } .bo-h-5 { height: 25%; } .bo-h-6 { height: 30%; } .bo-h-7 { height: 35%; }
.bo-h-8 { height: 40%; } .bo-h-9 { height: 45%; } .bo-h-10 { height: 50%; } .bo-h-11 { height: 55%; }
.bo-h-12 { height: 60%; } .bo-h-13 { height: 65%; } .bo-h-14 { height: 70%; } .bo-h-15 { height: 75%; }
.bo-h-16 { height: 80%; } .bo-h-17 { height: 85%; } .bo-h-18 { height: 90%; } .bo-h-19 { height: 95%; }
.bo-h-20 { height: 100%; }

/* --- fichas --- */
.bo-badge { display: inline-block; padding: 1px 8px; border-radius: 3px; border: 1px solid var(--hairline-color); font-size: 0.8rem; }
.bo-badge.bo-bad { border-color: var(--bo-bad); color: var(--bo-bad); }
.bo-badge.bo-warn { border-color: var(--bo-warn); color: var(--bo-warn); }
.bo-json { white-space: pre-wrap; margin: 0; font-size: 0.8rem; }
.object-tools a.bo-danger, input.bo-danger { background: var(--bo-bad); }
.object-tools a.bo-danger:hover, input.bo-danger:hover { background: #7f1a14; }

/* --- ações --- */
.bo-action { max-width: 720px; }
.bo-action textarea { width: 100%; max-width: 32rem; }
.bo-target { font-size: 1.05rem; font-weight: 600; }
.bo-action-danger .bo-target { color: var(--bo-bad); }

/* --- login e 2FA --- */
.bo-qr svg { width: 240px; height: 240px; display: block; margin: 8px auto; background: #fff; shape-rendering: crispEdges; }
.bo-secret { word-break: break-all; }

/* --- telemetria --- */
.bo-curves { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.bo-curve { margin: 0; }
.bo-curve-svg { width: 100%; height: 48px; background: var(--bo-card-bg); }
.bo-curve figcaption { font-size: 0.75rem; color: var(--bo-muted); }
.bo-line { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.bo-axis { stroke: var(--hairline-color); stroke-width: 1; }
.bo-embed { width: 100%; height: 75vh; border: 1px solid var(--hairline-color); }

@media (max-width: 767px) {
  .bo-kpi strong { font-size: 1.35rem; }
  .bo-bars { height: 130px; }
  .bo-bar-day { display: none; }
}

@media (min-width: 900px) {
  .bo-grid > .bo-card-wide { grid-column: span 2; }
}