/**
 * PKF Intelligent Systems - Bright-Mode Theme für ravenmind_ui
 *
 * Quelle: brand/bright/Brand_Guidelines.pdf (Farben, Alata) +
 * brand/dark/brand.md (Inter als Body-Font, gleiche Marke) - siehe dort für
 * den vollständigen Styleguide. Heller Hintergrund, Navy für dunkle Flächen
 * (Navbar, Überschriften), Gold als Akzent. Lädt nach Bootstrap, überschreibt
 * dessen Defaults, ohne die Bootstrap-Klassen im Markup zu ändern.
 */

@import url('https://fonts.googleapis.com/css2?family=Alata&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --pkf-gold: #f0d687;
  --pkf-gold-hover: #eac65a;
  --pkf-gold-soft: #f6e5b4;
  --pkf-navy: #2e3b5b;
  --pkf-navy-light: #3f517d;
  --pkf-white: #ffffff;
  --pkf-ink: #1a1f2b;
  --pkf-muted: #5b6472;
  --pkf-faint: #8d94a1;
  --pkf-line: rgba(46, 59, 91, 0.15);
  --pkf-bg: #f5f5f5;
  --pkf-surface: #ffffff;
  --pkf-f-display: 'Alata', 'Segoe UI', Arial, sans-serif;
  --pkf-f-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}

body {
  background-color: var(--pkf-bg);
  color: var(--pkf-ink);
  font-family: var(--pkf-f-body);
}

h1, h2, h3, h4, h5, h6,
.navbar-brand,
.card-title,
.wordmark {
  font-family: var(--pkf-f-display);
  color: var(--pkf-navy);
  letter-spacing: -0.01em;
}

a {
  color: var(--pkf-navy-light);
}

a:hover {
  color: var(--pkf-navy);
}

.text-muted {
  color: var(--pkf-muted) !important;
}

hr {
  border-color: var(--pkf-line);
  opacity: 1;
}

/* Navbar - bleibt "navbar-dark", Hintergrund wird Navy statt Bootstrap-Schwarz */
.navbar.bg-dark,
.navbar-dark {
  background-color: var(--pkf-navy) !important;
}

.navbar-brand {
  color: var(--pkf-white) !important;
}

/* Icon-only Navbar-Buttons (z.B. Glocke) wirken sonst kleiner/anders
   ausgerichtet als Buttons mit Icon+Text, weil ihnen die Text-Baseline
   fehlt - feste Höhe + zentriertes Icon gleichen das an. */
.navbar .btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2rem;
  line-height: 1;
}

/* Überschriften erben sonst global Navy-Text (siehe h1-h6 weiter unten) -
   auf dunklem Grund (z.B. .card-header.bg-dark) wäre das Navy-auf-Schwarz.
   Dort bei Weiß bleiben. */
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6,
.text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5, .text-white h6 {
  color: var(--pkf-white);
}

/* Primär-Buttons: Gold-Fläche, Navy-Text (Kontrast-sicher) */
.btn-primary {
  background-color: var(--pkf-gold);
  border-color: var(--pkf-gold);
  color: var(--pkf-navy);
  font-weight: 600;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--pkf-gold-hover);
  border-color: var(--pkf-gold-hover);
  color: var(--pkf-navy);
}

.btn-outline-primary {
  color: var(--pkf-navy);
  border-color: var(--pkf-navy);
}

.btn-outline-primary:hover {
  background-color: var(--pkf-navy);
  border-color: var(--pkf-navy);
  color: var(--pkf-white);
}

.btn-outline-secondary {
  color: var(--pkf-muted);
  border-color: var(--pkf-line);
}

.btn-outline-secondary:hover {
  background-color: var(--pkf-navy);
  border-color: var(--pkf-navy);
  color: var(--pkf-white);
}

.btn-outline-light:hover {
  background-color: var(--pkf-gold);
  border-color: var(--pkf-gold);
  color: var(--pkf-navy);
}

/* btn-outline-info kommt im Markup nur in der (Navy-)Navbar vor - hell statt
   Bootstrap-Cyan, analog zu btn-outline-light. */
.btn-outline-info {
  color: var(--pkf-white);
  border-color: rgba(255, 255, 255, 0.5);
}

.btn-outline-info:hover {
  background-color: var(--pkf-gold);
  border-color: var(--pkf-gold);
  color: var(--pkf-navy);
}

/* Die Brand-Palette (Brand_Guidelines.pdf, bright) kennt nur Navy/Gold/Weiß -
   kein Grün/Rot. "Erfolg" (Export, gespeichert) und "Gefahr" (Löschen,
   Logout) werden deshalb beide auf Navy abgebildet statt auf Bootstraps
   Standardgrün/-rot; die Bedeutung kommt über Icon/Text, nicht über Farbe. */
.btn-success,
.btn-danger {
  background-color: var(--pkf-navy);
  border-color: var(--pkf-navy);
  color: var(--pkf-white);
}

.btn-success:hover,
.btn-success:focus,
.btn-danger:hover,
.btn-danger:focus {
  background-color: var(--pkf-navy-light);
  border-color: var(--pkf-navy-light);
  color: var(--pkf-white);
}

.btn-outline-success,
.btn-outline-danger {
  color: var(--pkf-navy);
  border-color: var(--pkf-navy);
}

.btn-outline-success:hover,
.btn-outline-danger:hover {
  background-color: var(--pkf-navy);
  border-color: var(--pkf-navy);
  color: var(--pkf-white);
}

/* Logout sitzt in der (Navy-)Navbar - dort hell statt Navy-auf-Navy. */
.navbar .btn-outline-danger {
  color: var(--pkf-white);
  border-color: rgba(255, 255, 255, 0.5);
}

.navbar .btn-outline-danger:hover {
  background-color: var(--pkf-gold);
  border-color: var(--pkf-gold);
  color: var(--pkf-navy);
}

/* Deaktivierte Buttons: Bootstrap setzt :disabled/.disabled-Farben über
   eigene, spezifischere Selektoren pro Button-Variante - unsere einfachen
   Klassenregeln oben greifen da nicht, Grün/Rot/Bootstrap-Blau blitzt sonst
   wieder durch. */
.btn-outline-primary:disabled, .btn-outline-primary.disabled,
.btn-outline-success:disabled, .btn-outline-success.disabled,
.btn-outline-danger:disabled, .btn-outline-danger.disabled {
  color: var(--pkf-navy);
  border-color: var(--pkf-navy);
  background-color: transparent;
  opacity: 0.5;
}

.btn-primary:disabled, .btn-primary.disabled {
  background-color: var(--pkf-gold);
  border-color: var(--pkf-gold);
  color: var(--pkf-navy);
  opacity: 0.5;
}

.btn-success:disabled, .btn-success.disabled,
.btn-danger:disabled, .btn-danger.disabled {
  background-color: var(--pkf-navy);
  border-color: var(--pkf-navy);
  color: var(--pkf-white);
  opacity: 0.5;
}

/* Feed-View-Tabs (Alle/Neu/Für dich): Navy statt Bootstrap-Blau */
.nav-pills .nav-link {
  color: var(--pkf-navy);
}

.nav-pills .nav-link:hover {
  background-color: var(--pkf-line);
}

.nav-pills .nav-link.active {
  background-color: var(--pkf-navy);
  color: var(--pkf-white);
}

/* Seiten-Pagination: Navy statt Bootstrap-Blau */
.page-link {
  color: var(--pkf-navy);
}

.page-link:hover,
.page-link:focus {
  color: var(--pkf-navy);
  background-color: var(--pkf-gold-soft);
  box-shadow: none;
}

.page-item.active .page-link {
  background-color: var(--pkf-navy);
  border-color: var(--pkf-navy);
  color: var(--pkf-white);
}

.page-item.disabled .page-link {
  color: var(--pkf-faint);
}

/* "neu"-Badge und ähnliche Hervorhebungen: Gold statt Bootstrap-Blau */
.badge.bg-primary {
  background-color: var(--pkf-gold) !important;
  color: var(--pkf-navy) !important;
  font-weight: 600;
}

.card {
  border-color: var(--pkf-line);
  background-color: var(--pkf-surface);
}

.list-group-item {
  border-color: var(--pkf-line);
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--pkf-navy);
}

/* Compact-Feed-Elemente (index.php, user_dashboard.php) */
.feed-time {
  color: var(--pkf-muted);
}

.feed-preview {
  color: var(--pkf-muted);
}

.feed-chevron {
  color: var(--pkf-navy-light);
}

/* AI-Content-Hinweisbanner: Gold statt generisches Indigo */
.ai-content-notice {
  background-color: var(--pkf-gold-soft) !important;
  color: var(--pkf-navy) !important;
  border-bottom: 1px solid var(--pkf-gold) !important;
}

/* Formular-/System-Rückmeldungen (Erfolg, Fehler, Warnung, Info): auch hier
   kein Bootstrap-Grün/-Rot/-Gelb/-Blau. Erfolg/Fehler bleiben optisch
   unterscheidbar (gefüllt vs. umrandet), nicht über Farbton. */
.alert-success {
  background-color: var(--pkf-navy);
  border-color: var(--pkf-navy);
  color: var(--pkf-white);
}

.alert-success .btn-close {
  filter: brightness(0) invert(1);
}

.alert-danger {
  background-color: var(--pkf-white);
  border-color: var(--pkf-navy);
  border-width: 2px;
  color: var(--pkf-navy);
}

.alert-warning {
  background-color: var(--pkf-gold-soft);
  border-color: var(--pkf-gold);
  color: var(--pkf-navy);
}

.alert-info {
  background-color: var(--pkf-line);
  border-color: var(--pkf-navy-light);
  color: var(--pkf-navy);
}

/* Persönliche Collection-Tags (Match-Vorschläge): dezenter als das
   "neu"-Badge (outline statt Gold-Fläche), damit die Hierarchie klar
   bleibt. Klick auf das Label bestätigt den Vorschlag (speichert in die
   Collection), das "x" entfernt nur den Vorschlag selbst - daher visuell
   getrennt klickbar. Gemeinsam genutzt von index.php und item.php. */
.collection-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background-color: transparent;
  color: var(--pkf-navy-light);
  border: 1px solid var(--pkf-line);
  font-weight: 500;
  padding-right: 0.4rem;
}

.collection-tag.collection-tag-saved {
  background-color: var(--pkf-navy-light);
  color: var(--pkf-white);
}

.collection-tag-label {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font-weight: inherit;
  font-size: inherit;
  cursor: pointer;
}

.collection-tag-remove {
  background: none;
  border: none;
  padding: 0;
  line-height: 1;
  font-size: 0.95rem;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
}

.collection-tag-remove:hover {
  opacity: 1;
}

/* "?"-Hinweis an Tags aus noch kleinen (verrauschten) Collections - siehe
   RECOMMENDATION_CONFIDENT_ARTICLES in includes/recommendations.php. */
.collection-tag-unsure {
  font-size: 0.85rem;
  opacity: 0.7;
  cursor: help;
}