/* cf-review Design-System — Grundlayout-Redesign (2026-08)
   Baut auf Bootstrap 5.3 CSS-Variablen auf, kein zusaetzliches Framework. */

:root {
  --brand-orange: #ea4e00;
  --brand-orange-dark: #c43f00;
  --brand-green-slate: #457b5b;

  --color-bg: #f3f2f2;
  --color-surface: #ffffff;
  --color-border: #e2dfde;
  --color-text: #211f1e;
  --color-text-muted: #726e6d;

  --radius: 8px;
  --radius-sm: 5px;

  --sidebar-width: 76px;
  --sidebar-width-expanded: 240px;
  --topbar-height: 60px;

  /* Bootstrap-Variablen ueberschreiben -> wirkt automatisch auf Buttons, Links,
     Badges, Formularfokus, Pagination, nav-pills usw. auf allen bestehenden Seiten. */
  --bs-primary: var(--brand-orange);
  --bs-primary-rgb: 234, 78, 0;
  --bs-link-color: var(--brand-orange);
  --bs-link-color-rgb: 234, 78, 0;
  --bs-link-hover-color: var(--brand-orange-dark);
  --bs-link-hover-color-rgb: 196, 63, 0;
  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--color-text);
  --bs-border-radius: var(--radius);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: 10px;
  --bs-font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
}

.btn-primary {
  --bs-btn-bg: var(--brand-orange);
  --bs-btn-border-color: var(--brand-orange);
  --bs-btn-hover-bg: var(--brand-orange-dark);
  --bs-btn-hover-border-color: var(--brand-orange-dark);
  --bs-btn-active-bg: var(--brand-orange-dark);
  --bs-btn-active-border-color: var(--brand-orange-dark);
}

.nav-pills .nav-link.active {
  background-color: var(--brand-orange);
}

/* ---------- App-Shell: Topbar + Icon-Rail-Sidebar ---------- */

.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.app-body {
  display: flex;
  flex: 1;
  min-height: 0;
}

.sidebar {
  flex: 0 0 var(--sidebar-width);
  width: var(--sidebar-width);
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  position: sticky;
  top: var(--topbar-height);
  height: calc(100vh - var(--topbar-height));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: .5rem 0;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width .15s ease, flex-basis .15s ease;
  /* Bootstraps .card setzt position:relative und liegt im DOM nach der
     Sidebar -- ohne eigenen z-index wuerde jede Karte im Content (z.B.
     Settings-Seiten) das Sidebar-Dropdown ueberdecken, da fixed-positionierte
     Nachfahren den Stacking-Kontext ihres Elternelements nicht verlassen. */
  z-index: 20;
}

html.sidebar-expanded .sidebar {
  flex-basis: var(--sidebar-width-expanded);
  width: var(--sidebar-width-expanded);
}

.rail-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0 auto .5rem;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.rail-toggle:hover {
  background: rgba(33, 31, 30, .06);
  color: var(--color-text);
}

.rail-toggle svg {
  width: 16px;
  height: 16px;
  transition: transform .15s ease;
}

html.sidebar-expanded .rail-toggle {
  margin: 0 .5rem .5rem auto;
}

html.sidebar-expanded .rail-toggle svg {
  transform: rotate(180deg);
}

.rail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: .6rem .25rem;
  margin: .1rem .4rem;
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.15;
  border-radius: var(--radius-sm);
  border-left: 3px solid transparent;
  background: none;
  border-top: none;
  border-right: none;
  border-bottom: none;
  cursor: pointer;
}

.rail-item svg {
  width: 20px;
  height: 20px;
  flex: none;
}

.rail-item span {
  display: none;
}

html.sidebar-expanded .rail-item {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: .6rem;
  padding: .55rem .75rem;
}

html.sidebar-expanded .rail-item span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-align: left;
}

.rail-item:hover {
  background: rgba(33, 31, 30, .04);
  color: var(--color-text);
}

.rail-item.active {
  color: var(--brand-orange);
  background: rgba(234, 78, 0, .08);
  border-left-color: var(--brand-orange);
}

.rail-divider {
  flex: none;
  height: 1px;
  margin: .5rem .75rem;
  background: var(--color-border);
}

.rail-spacer {
  flex: 1;
}

.rail-version {
  flex: 0 0 auto;
  padding: .5rem .75rem;
  font-size: .7rem;
  color: var(--color-text-muted, #888);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html:not(.sidebar-expanded) .rail-version {
  font-size: .6rem;
}

.topbar {
  width: 100%;
  height: var(--topbar-height);
  flex: 0 0 var(--topbar-height);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 0 1.25rem;
  position: sticky;
  top: 0;
  z-index: 1030;
}

.topbar-logo {
  display: flex;
  align-items: center;
  height: 40px;
  max-width: 170px;
}

.topbar-logo img {
  max-height: 40px;
  max-width: 170px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.topbar-tenant-label {
  font-size: .85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
}

.tenant-switch {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.topbar-link {
  font-size: .85rem;
  color: var(--color-text-muted);
  text-decoration: none;
}

.topbar-link:hover {
  color: var(--brand-orange);
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: none;
  border: 1px solid var(--color-border);
}

.user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--brand-green-slate);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
}

.content {
  padding: 1.5rem;
  flex: 1;
}

/* ---------- Karten & Tabellen ---------- */

.card {
  border: 1px solid var(--color-border);
  box-shadow: 0 1px 2px rgba(33, 31, 30, .04);
}

.table thead th {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-muted);
  font-weight: 700;
  border-bottom-width: 1px;
}

/* ---------- KPI-Karten (fuer zukuenftige Dashboard-Kacheln) ---------- */

.kpi-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
}

.kpi-card .kpi-label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-muted);
  font-weight: 700;
}

.kpi-card .kpi-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
}

.kpi-card .kpi-delta-up {
  color: #2f9e44;
}

.kpi-card .kpi-delta-down {
  color: #e03131;
}

/* ---------- Bestehende Badge-/Farb-Klassen (aus base.html uebernommen) ---------- */

.badge-locale-de-DE { background: #0d6efd; color: #fff; }
.badge-locale-de-AT { background: #dc3545; color: #fff; }
.badge-locale-de-CH { background: #198754; color: #fff; }
.badge-locale-en-INT { background: #6c757d; color: #fff; }

.opp-type-striking_distance { color: #0d6efd; }
.opp-type-ctr_leak { color: #fd7e14; }
.opp-type-cannibalization { color: #dc3545; }
.opp-type-blog_decline { color: #6c757d; }
.opp-type-informational_gap { color: #20c997; }
.opp-type-orphan_page { color: #6610f2; }
.opp-type-broken_link { color: #d63384; }
.opp-type-ai_citation_gap { color: #087990; }
.opp-type-competitor_keyword_gap { color: #b02a37; }

/* table-dark-Kopfzeilen: die globale .table thead th-Regel (color: muted) macht sie auf
   dunklem Grund unleserlich -- hier wieder auf hellen Text zurueckholen. */
.table > thead.table-dark th,
.table > thead.table-dark td {
  color: rgba(255, 255, 255, .85);
}

.kanban-col { min-width: 200px; max-width: 260px; }
.kanban-card { font-size: .85rem; }

/* ---------- Grafana-Embedding (Issue #160) ---------- */

.grafana-embed {
  width: 100%;
  border: 0;
  display: block;
}

.grafana-embed-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.grafana-embed-row .grafana-embed {
  flex: 1 1 260px;
  height: 220px;
}