/*
 * bb-recon — thin theme layer over Bootstrap 5 (loaded from CDN).
 * Maps the app's existing semantic classes onto Bootstrap's CSS variables so
 * every view picks up the Bootstrap dark look without per-view markup changes.
 */

h1 { font-size: 1.6rem; margin-bottom: .25rem; }
h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: .04em;
     color: var(--bs-secondary-color); margin: 1.75rem 0 .75rem; }
.subtle { color: var(--bs-secondary-color); }
.mono-muted { font-family: var(--bs-font-monospace); color: var(--bs-secondary-color); font-size: .85em; }
.secret { color: var(--bs-danger); word-break: break-all; font-family: var(--bs-font-monospace); }

/* Stat cards (dashboard) */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin: 1rem 0 1.5rem; }
.stat { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
        border-radius: var(--bs-border-radius-lg); padding: 1rem; }
.stat .num { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.stat .label { color: var(--bs-secondary-color); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
.stat.danger .num { color: var(--bs-danger); }
.stat.ok .num { color: var(--bs-success); }

/* Tables (bare <table> wrapped in .table-wrap) — Bootstrap-like styling */
.table-wrap { overflow-x: auto; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); }
.table-wrap table { width: 100%; border-collapse: collapse; margin: 0; font-size: .9rem; }
.table-wrap th, .table-wrap td { padding: .5rem .6rem; border-bottom: 1px solid var(--bs-border-color); text-align: left; vertical-align: top; }
.table-wrap thead th { background: var(--bs-tertiary-bg); color: var(--bs-secondary-color);
                       font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; }
.table-wrap tbody tr:last-child td { border-bottom: 0; }
.table-wrap tbody tr:hover td { background: var(--bs-tertiary-bg); }

/* Badges — reuse Bootstrap .badge base, add semantic colors */
.badge { font-weight: 600; }
.badge.ok { background-color: var(--bs-success) !important; color: #fff; }
.badge.warn { background-color: var(--bs-warning) !important; color: #000; }
.badge.danger { background-color: var(--bs-danger) !important; color: #fff; }
.badge.verified { background-color: var(--bs-danger) !important; color: #fff; }
.badge:not(.ok):not(.warn):not(.danger):not(.verified) { background-color: var(--bs-secondary) !important; color: #fff; }

/* Buttons / inputs — style bare buttons and submit inputs as Bootstrap buttons */
button, input[type="submit"], .btn {
  display: inline-block; background: var(--bs-primary); color: #fff;
  border: 1px solid var(--bs-primary); padding: .375rem .75rem;
  border-radius: var(--bs-border-radius); font-size: .875rem; cursor: pointer; line-height: 1.4;
}
button:hover, input[type="submit"]:hover, .btn:hover { filter: brightness(1.08); color: #fff; }
.btn.secondary, button.secondary {
  background: var(--bs-secondary-bg); color: var(--bs-body-color); border-color: var(--bs-border-color);
}
button_to, form.button_to { display: inline; }

input[type="text"], select {
  background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); color: var(--bs-body-color);
  padding: .375rem .5rem; border-radius: var(--bs-border-radius); font-size: .875rem;
}

/* Layout helpers */
.actions, .filters { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: .75rem 0; }
form.inline { display: inline-flex; gap: .5rem; align-items: center; margin: 0; }
.actions form.button_to { margin: 0; }

pre.raw { background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color);
          border-radius: var(--bs-border-radius); padding: .75rem; overflow-x: auto; font-size: .85rem; }

code { color: var(--bs-info); }