/* ============================================================
   WAF Console — layout and components on top of Bootstrap 5.3.
   Colours come from Bootstrap's CSS variables so light and dark
   mode (data-bs-theme) work without overrides.
   ============================================================ */

:root {
  --waf-sidebar-width: 15rem;
  --waf-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* ── Layout ─────────────────────────────────────────────────── */
.waf-topbar { z-index: 1030; }
.waf-domain-picker { max-width: 22rem; }

@media (min-width: 992px) {
  .waf-sidebar-col { width: var(--waf-sidebar-width); }
  .waf-sidebar {
    position: sticky;
    top: 57px;                       /* below the navbar */
    height: calc(100vh - 57px);
    overflow-y: auto;
  }
}
.waf-sidebar .nav-link { border-radius: var(--bs-border-radius); padding: .45rem .75rem; }
.waf-main { min-width: 0; }          /* allow wide tables to scroll instead of stretching */

.waf-avatar {
  display: inline-grid; place-items: center;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  font-size: .7rem; font-weight: 600;
  background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis);
}

/* ── Page header ────────────────────────────────────────────── */
.waf-page-header { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .75rem; margin-bottom: 1.25rem; }
.waf-page-header h1 { font-size: 1.5rem; margin: 0; }
.waf-page-header p { margin: .15rem 0 0; color: var(--bs-secondary-color); }

/* ── KPI cards ──────────────────────────────────────────────── */
.waf-kpi .card-body { display: flex; align-items: center; gap: .9rem; }
.waf-kpi .waf-kpi-icon {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; border-radius: var(--bs-border-radius-lg);
  font-size: 1.3rem;
}
.waf-kpi .waf-kpi-value { font-size: 1.5rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.waf-kpi .waf-kpi-label { font-size: .8rem; color: var(--bs-secondary-color); text-transform: uppercase; letter-spacing: .04em; }

/* ── Charts ─────────────────────────────────────────────────── */
.waf-chart { position: relative; height: 260px; }
.waf-chart-sm { position: relative; height: 200px; }

/* ── Tables & code ──────────────────────────────────────────── */
.waf-mono, .table .waf-mono { font-family: var(--waf-mono); font-size: .85em; }
.table td.text-truncate, .table th.text-truncate { max-width: 28rem; }
.waf-table-scroll { max-height: 32rem; overflow: auto; }
.waf-table-scroll thead th { position: sticky; top: 0; z-index: 1; background: var(--bs-body-bg); }
pre.waf-code {
  font-family: var(--waf-mono); font-size: .8rem;
  background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius); padding: .75rem; max-height: 28rem; overflow: auto;
  white-space: pre; margin: 0;
}
textarea.waf-code { font-family: var(--waf-mono); font-size: .8rem; }

/* Thin progress bar used inside tables */
.waf-bar { height: .35rem; }

/* Status dot */
.waf-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: var(--bs-secondary); }
.waf-dot.text-bg-success { background: var(--bs-success) !important; }
.waf-dot.text-bg-warning { background: var(--bs-warning) !important; }
.waf-dot.text-bg-danger  { background: var(--bs-danger)  !important; }

/* ── Auth pages (login / change password) ───────────────────── */
.waf-auth { min-height: 100vh; display: grid; place-items: center; padding: 1rem; background: var(--bs-tertiary-bg); }
.waf-auth .card { width: 100%; max-width: 26rem; }