/* =============================================================================
   www/muc-brand.css - Stufe 1 "Poster-Look" (04.09.2026)
   =============================================================================
   Alle Farben kommen als var(--muc-*) aus R/app_theme.R (MUC_PALETTE). Diese Datei
   enthaelt NUR Regeln - keine eigenen Hex-Werte. Zum Experimentieren gewinnt
   weiterhin www/muc-palette-override.css (wird nach dieser Datei geladen).

   Stufe 1 = Seitengrund, Panels, Hero, Lesbarkeit ausserhalb der Panels.
   Stufe 2 (Formsprache Navbar/DT/Modals/Plotly) folgt nach Abnahme.
   Jeder Block ist einzeln revertierbar.
   ============================================================================ */

/* ── 1. Seitengrund und Grundtext ─────────────────────────────────────────── */
body {
  background: var(--muc-papier);          /* dunkler Grund */
  color: var(--muc-text-on-dunkel);       /* Text AUSSERHALB der Panels hell */
}

/* Alles, was auf dem dunklen Grund liegt und keine Panel-Flaeche ist */
h1, h2, h3, h4, h5, h6 { color: inherit; }
hr { border-color: var(--muc-rand-on-dunkel); opacity: 1; }
a  { color: var(--muc-akzent); }
a:hover { color: var(--muc-akzent-tief); }

/* Bootstrap setzt text-muted mit !important -> gleiche Waffe */
.text-muted { color: var(--muc-sekundaer-on-dunkel) !important; }

/* ── 2. Panels: Karten-/Dialogflaechen weiss, innen dunkle Tinte ──────────── */
.card,
.modal-content,
.dropdown-menu,
.popover,
.offcanvas,
.toast,
.alert,
.list-group,
.accordion-item,
.muc-hero {
  color: var(--muc-tinte);
}
.card .text-muted,
.modal-content .text-muted,
.dropdown-menu .text-muted,
.muc-hero .text-muted,
.alert .text-muted { color: var(--muc-sekundaer) !important; }

.card a, .modal-content a, .muc-hero a, .nav-tabs + .tab-content a {
  color: var(--muc-akzent);
  text-decoration: underline;               /* 04.09.: Links nicht nur farbig kennzeichnen */
  text-underline-offset: 2px;
}
.card a:hover, .modal-content a:hover, .muc-hero a:hover { color: var(--muc-brand-hover); }
.card a.btn, .modal-content a.btn { text-decoration: none; }   /* Buttons bleiben Buttons */

/* Poster-Box: weiss, runde Ecken, oranger Rand. EINE Regel - revertierbar. */
.card, .bslib-value-box {
  background: var(--muc-flaeche);
  border: 1px solid var(--muc-rand);       /* 04.09. Patrick: kein Orange-Rand um Kacheln */
  border-radius: 14px;
  box-shadow: none;
}
.card > .card-header {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom: 1px solid var(--muc-rand);
}
.modal-content {
  border: 1px solid var(--muc-rand);        /* 04.09.: gleiche Haarlinie wie Cards/Hero */
  border-radius: 14px;
}

/* Formulare, Tabellen, Karten: innen immer dunkle Tinte, auch ausserhalb Cards */
.form-control, .form-select, .selectize-input, .selectize-dropdown,
.leaflet-container, .plotly, pre,
.nav-tabs .nav-link.active, .nav-pills .nav-link.active {
  color: var(--muc-tinte);
}
/* Tabellen und Codebloecke bekommen ihre eigene weisse Flaeche - so bleiben
   sie lesbar, auch wenn sie NICHT in einer Card stehen */
.dataTables_wrapper, pre {
  background: var(--muc-flaeche);
  color: var(--muc-tinte);
  border-radius: 10px;
  padding: 8px 10px;
}
.card .dataTables_wrapper, .modal-content .dataTables_wrapper { padding: 0; border-radius: 0; }
.dataTables_wrapper .text-muted { color: var(--muc-sekundaer) !important; }

/* ── 3. Hero auf der Startseite (ersetzt den Flatly-Farbverlauf) ─────────── */
.muc-hero {
  background: var(--muc-flaeche);
  border: 1px solid var(--muc-rand);        /* 04.09. Patrick: kein Orange-Rand mehr */
  border-radius: 14px;
}
.muc-hero h1 { color: var(--muc-tinte); }
.muc-hero .fs-6 { color: var(--muc-sekundaer); }

/* ── 4. Navbar: dunkel wie der Grund, orange Signaturlinie darunter ───────── */
/* 04.09. Patrick: Tab-Icons weg - ruhigere Leiste. Revertierbar: Block loeschen. */
.navbar .navbar-nav .nav-link > .fa,
.navbar .navbar-nav .nav-link > .fas,
.navbar .navbar-nav .nav-link > svg.fa,
.navbar .navbar-nav .nav-link > i { display: none; }
.navbar.bg-primary, .navbar {
  background: var(--muc-navbar-bg) !important;
  border-bottom: 0;
  box-shadow: none !important;
  position: relative;
}
/* 04.09. Patrick: Signaturlinie = Temperaturskala RdYlBu wie im Poster
   (blau - gelb - orange - rot); Verlauf kommt aus MUC_TEMPBAR in app_theme.R */
.navbar::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 4px;
  background: var(--muc-tempbar-gradient);
}
/* 04.09. Patrick: mUC-Logo groesser, auf Augenhoehe mit dem Innovation-Logo.
   Hoehere Spezifitaet als die gestaffelten !important-Regeln in ui.R. */
.navbar .navbar-brand img { height: 56px !important; }
#unibe_nav_logo img       { height: 40px !important; }
@media (min-width: 1401px) and (max-width: 1650px) {
  .navbar .navbar-brand img { height: 52px !important; }
  #unibe_nav_logo img       { height: 37px !important; }
}
@media (min-width: 1201px) and (max-width: 1400px) {
  .navbar .navbar-brand img { height: 46px !important; }
  #unibe_nav_logo img       { height: 33px !important; }
}
@media (min-width: 992px) and (max-width: 1200px) {
  .navbar .navbar-brand img { height: 40px !important; }
  #unibe_nav_logo img       { height: 29px !important; }
}
.navbar .navbar-brand { display: flex; align-items: center; }
#unibe_nav_logo        { display: flex; align-items: center; }
.navbar .nav-link, .navbar .navbar-brand, .navbar .navbar-text {
  color: var(--muc-navbar-text) !important;
}
.navbar .nav-link:hover { color: var(--muc-akzent) !important; }
.navbar .nav-link.active {
  color: var(--muc-akzent) !important;
  box-shadow: inset 0 -3px 0 var(--muc-akzent);
}
.navbar-toggler { border-color: var(--muc-rand-on-dunkel); }

/* ── 5. Unter-Tabs (navset_tab) auf dunklem Grund ─────────────────────────── */
.nav-tabs { border-bottom-color: var(--muc-rand-on-dunkel); }
.nav-tabs .nav-link { color: var(--muc-sekundaer-on-dunkel); border-color: transparent; }
.nav-tabs .nav-link:hover { color: var(--muc-text-on-dunkel); border-color: var(--muc-rand-on-dunkel); }
.nav-tabs .nav-link.active {
  background: var(--muc-flaeche);
  color: var(--muc-tinte);
  border-color: var(--muc-rand) var(--muc-rand) var(--muc-flaeche);
  border-radius: 10px 10px 0 0;
}
/* Inhalt unter aktivem Unter-Tab als Panel, damit er nicht auf dem Grund schwimmt */
.nav-tabs + .tab-content {
  background: var(--muc-flaeche);
  color: var(--muc-tinte);
  border: 1px solid var(--muc-rand);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  padding: 12px;
}
.nav-tabs + .tab-content .text-muted { color: var(--muc-sekundaer) !important; }
/* ... aber innerhalb von Cards/Modals (navset_card_tab) gelten die hellen Werte */
.card .nav-tabs, .modal-content .nav-tabs { border-bottom-color: var(--muc-rand); }
.card .nav-tabs .nav-link, .modal-content .nav-tabs .nav-link { color: var(--muc-sekundaer); }
.card .nav-tabs .nav-link:hover, .modal-content .nav-tabs .nav-link:hover {
  color: var(--muc-tinte); border-color: var(--muc-rand);
}
.card .nav-tabs + .tab-content, .modal-content .nav-tabs + .tab-content {
  border: 0; padding: 0; border-radius: 0;
}

/* ── 6. Buttons: Primaer dunkel, Outline-Primaer auf dunklem Grund hell ───── */
.btn-outline-primary {
  color: var(--muc-akzent);
  border-color: var(--muc-akzent);
}
.btn-outline-primary:hover {
  background: var(--muc-akzent);
  border-color: var(--muc-akzent);
  color: var(--muc-tinte);
}
.card .btn-outline-primary, .modal-content .btn-outline-primary {
  color: var(--muc-akzent-tief);
  border-color: var(--muc-akzent-tief);
}
/* 04.09. Patrick: Primaer-Buttons (dunkel) mit ORANGER Schrift - Muster
   entstand bei den Ometer-Link-Buttons (<a class=btn> erbt .card a) und
   gilt jetzt einheitlich fuer alle btn-primary, auch <button>/actionButton.
   Revertierbar: diesen Block loeschen. */
.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary:disabled, .btn-primary.disabled,
.card a.btn-primary, .modal-content a.btn-primary, .muc-hero a.btn-primary {
  color: var(--muc-akzent);
}
.btn-primary:hover { background: var(--muc-grund-dunkel-hell); border-color: var(--muc-grund-dunkel-hell); }
.btn-primary .fa, .btn-primary .fas, .btn-primary svg { color: inherit; }

.btn-primary:focus, .form-control:focus, .form-select:focus {
  box-shadow: 0 0 0 .2rem rgba(var(--muc-akzent-rgb), .35);
  border-color: var(--muc-akzent);
}

/* ── 7. Fussnoten / Kleingedrucktes ausserhalb der Panels ─────────────────── */
.small, small { color: inherit; }

/* Nachtrag 04.09.: Seitengrund hart setzen - bslib/Flatly ueberschrieben body */
html, body, .bslib-page-navbar, .bslib-page-fill, .tab-content > .tab-pane {
  background: var(--muc-papier) !important;
}
/* 04.09. (Patrick): innerhalb von Cards/Modals bleiben Reiter-Inhalte WEISS -
   die Regel oben faerbte auch die Tab-Panes im Analyse-Werkzeug anthrazit
   (schwarze Schrift auf dunklem Grund). */
.card .tab-content > .tab-pane, .modal-content .tab-content > .tab-pane {
  background: var(--muc-flaeche) !important;
  color: var(--muc-tinte);
}
.card .tab-content label, .card .tab-content .control-label,
.card .tab-content .form-check-label { color: var(--muc-tinte); }

/* Kennzahl-Kacheln: weiss, Zahl orange, Icon gedeckt; klickbar (Popup nach Stadt) */
.muc-kpi { cursor: pointer; transition: border-color .15s ease; }
.muc-kpi:hover, .muc-kpi:focus-visible { border-color: var(--muc-akzent); }
.muc-kpi .value-box-title::after {
  content: "  Details \203A";
  font-size: .8em; color: var(--muc-akzent); white-space: nowrap;
}
.bslib-value-box .value-box-value    { color: var(--muc-akzent-tief); font-weight: 600; }
.bslib-value-box .value-box-title    { color: var(--muc-sekundaer); }
.bslib-value-box .value-box-showcase { color: var(--muc-sekundaer); opacity: .6; }

/* ── 8. Analyse-Werkzeug (04.09.): Fragen links als Pill-Liste, Sichten
   rechts als flache Reiter - alles in EINER weissen Card ─────────────────── */
.muc-werkzeug .nav-pills .nav-link {
  color: var(--muc-tinte); border-radius: 10px; padding: .55rem .9rem;
  margin-bottom: .25rem; font-weight: 600;
}
.muc-werkzeug .nav-pills .nav-link:hover { background: var(--muc-brand-flaeche); }
.muc-werkzeug .nav-pills .nav-link.active {
  background: var(--muc-akzent); color: var(--muc-tinte);
}
.muc-werkzeug > .card-body > .row > .col-sm-2 {
  border-right: 1px solid var(--muc-rand); padding-right: .5rem;
}
.muc-werkzeug .nav-tabs { border-bottom-color: var(--muc-rand); }
.muc-werkzeug .nav-tabs .nav-link { color: var(--muc-sekundaer); }
.muc-werkzeug .nav-tabs .nav-link.active {
  color: var(--muc-tinte); font-weight: 600;
  border-color: var(--muc-rand) var(--muc-rand) var(--muc-flaeche);
}

/* ── 9. Tabellen (DT) im Poster-Look (04.09.): weiss, Tinte, keine
   Tuerkis-Markierung; Sortierpfeile gedeckt ────────────────────────────── */
.dataTables_wrapper table.dataTable,
.dataTables_wrapper table.dataTable th,
.dataTables_wrapper table.dataTable td { color: var(--muc-tinte); }
table.dataTable thead th { background: var(--muc-flaeche); border-bottom: 2px solid var(--muc-rand); }
table.dataTable.stripe > tbody > tr.odd > *,
table.dataTable.display > tbody > tr.odd > * { box-shadow: inset 0 0 0 9999px #FAF9F7; }
table.dataTable.hover > tbody > tr:hover > *,
table.dataTable.display > tbody > tr:hover > * { box-shadow: inset 0 0 0 9999px var(--muc-brand-flaeche); }
table.dataTable > tbody > tr.selected > * {
  box-shadow: inset 0 0 0 9999px var(--muc-brand-flaeche2); color: var(--muc-tinte);
}

/* ── 10. Lade-Hinweis (04.09.): waehrend ein Widget neu rechnet, erscheint
   ein kleines Schild - verschwindet mit dem fertigen Plot ─────────────── */
.html-widget-output.recalculating, .shiny-plot-output.recalculating { position: relative; opacity: .45; }
.html-widget-output.recalculating::after, .shiny-plot-output.recalculating::after {
  content: "Wird berechnet \2026";
  position: absolute; top: 14px; left: 14px; z-index: 5;
  padding: 6px 12px; border-radius: 8px;
  background: var(--muc-flaeche); border: 1px solid var(--muc-rand);
  color: var(--muc-sekundaer); font-size: .9rem;
}

/* Seitennavigation der Tabellen (04.09.): weiss/Tinte statt Flatly-Gruen,
   aktive Seite orange, keine Link-Unterstriche */
.dataTables_wrapper .pagination .page-link,
.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--muc-tinte) !important; background: var(--muc-flaeche) !important;
  border: 1px solid var(--muc-rand) !important; text-decoration: none !important;
  box-shadow: none !important;
}
.dataTables_wrapper .pagination .page-item.active .page-link,
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--muc-akzent) !important; border-color: var(--muc-akzent) !important;
  color: var(--muc-tinte) !important; font-weight: 600;
}
.dataTables_wrapper .pagination .page-link:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--muc-brand-flaeche) !important; color: var(--muc-tinte) !important;
}
.dataTables_wrapper .pagination .page-item.disabled .page-link,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  color: var(--muc-sekundaer) !important; background: var(--muc-flaeche) !important;
}
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label { color: var(--muc-sekundaer); }

/* ── 11. Intern-Bereich (10.09.): Unter-Reiter-Inhalte bleiben WEISS, auch
   ohne Card darum. Verschachtelte Navs (Inventar, Feldarbeit) im Card-Look,
   Ueberschriften und Labels in Tinte, Bootstrap-Buntfarben gedeckt. ─────── */
.nav-tabs + .tab-content > .tab-pane,
.nav-tabs + .tab-content .tab-content > .tab-pane {
  background: var(--muc-flaeche) !important;
  color: var(--muc-tinte);
}
.nav-tabs + .tab-content h1, .nav-tabs + .tab-content h2, .nav-tabs + .tab-content h3,
.nav-tabs + .tab-content h4, .nav-tabs + .tab-content h5, .nav-tabs + .tab-content h6,
.nav-tabs + .tab-content label, .nav-tabs + .tab-content .control-label,
.nav-tabs + .tab-content .form-check-label, .nav-tabs + .tab-content p {
  color: var(--muc-tinte);
}
.nav-tabs + .tab-content .text-muted, .nav-tabs + .tab-content .small { color: var(--muc-sekundaer) !important; }
/* Pills innerhalb (Feldarbeit, Inventar): weisser Grund, aktiv orange */
.nav-tabs + .tab-content .nav-pills .nav-link {
  color: var(--muc-tinte); border-radius: 10px; padding: .55rem .9rem; font-weight: 600;
}
.nav-tabs + .tab-content .nav-pills .nav-link:hover { background: var(--muc-brand-flaeche); }
.nav-tabs + .tab-content .nav-pills .nav-link.active { background: var(--muc-akzent); color: var(--muc-tinte); }
/* Verschachtelte Reiter (Inventar: Lagerbestand / Produkte / ...) flach und hell */
.nav-tabs + .tab-content .nav-tabs { border-bottom-color: var(--muc-rand); }
.nav-tabs + .tab-content .nav-tabs .nav-link { color: var(--muc-sekundaer); text-decoration: none; }
.nav-tabs + .tab-content .nav-tabs .nav-link:hover { color: var(--muc-tinte); border-color: var(--muc-rand); }
.nav-tabs + .tab-content .nav-tabs .nav-link.active {
  color: var(--muc-tinte); font-weight: 600; background: var(--muc-flaeche);
  border-color: var(--muc-rand) var(--muc-rand) var(--muc-flaeche);
}
.nav-tabs + .tab-content .nav-tabs + .tab-content { border: 0; padding: 0; border-radius: 0; }
/* Cards im Intern-Bereich mit sichtbarem Rand, Kopf in Brand-Tint */
.nav-tabs + .tab-content .card { border: 1px solid var(--muc-rand); box-shadow: none; }
.nav-tabs + .tab-content .card-header {
  background: var(--muc-brand-flaeche); color: var(--muc-tinte); border-bottom: 1px solid var(--muc-rand);
}
/* Bootstrap-Buntknoepfe (gruen/blau) auf den Primaer-Look bringen */
.nav-tabs + .tab-content .btn-success, .nav-tabs + .tab-content .btn-info,
.nav-tabs + .tab-content .btn-primary {
  background: var(--muc-papier); border-color: var(--muc-papier); color: var(--muc-akzent);
}
.nav-tabs + .tab-content .btn-success:hover, .nav-tabs + .tab-content .btn-info:hover,
.nav-tabs + .tab-content .btn-primary:hover { background: var(--muc-grund-dunkel-hell); border-color: var(--muc-grund-dunkel-hell); color: var(--muc-akzent); }
.nav-tabs + .tab-content .btn-outline-primary { color: var(--muc-akzent-tief); border-color: var(--muc-akzent); }
.nav-tabs + .tab-content .btn-outline-primary:hover { background: var(--muc-brand-flaeche); color: var(--muc-tinte); }
/* Kennzahl-Kacheln der Module (Inventar): farbige Icon-Flaechen gedeckt, Zahl orange */
.nav-tabs + .tab-content .value-box-value, .nav-tabs + .tab-content .stat-value { color: var(--muc-akzent-tief); }

/* ── 12. Hover-Popup auf den Karten (10.09.): dunkel wie beim Bernometer ── */
.leaflet-tooltip.muc-tip {
  background: var(--muc-papier); color: var(--muc-text-on-dunkel);
  border: 1px solid var(--muc-rand-on-dunkel); border-left: 4px solid var(--muc-akzent);
  border-radius: 10px; padding: 8px 12px 7px; box-shadow: 0 6px 18px rgba(0,0,0,.35);
  font-family: inherit; white-space: nowrap;
}
.leaflet-tooltip.muc-tip .t-name { font-weight: 600; font-size: 14px; line-height: 1.2; }
.leaflet-tooltip.muc-tip .t-val  { color: var(--muc-akzent); font-weight: 700; font-size: 22px; line-height: 1.15; margin: 2px 0; }
.leaflet-tooltip.muc-tip .t-val .t-na { color: var(--muc-sekundaer-on-dunkel); font-weight: 500; font-size: 13px; }
.leaflet-tooltip.muc-tip .t-sub  { color: var(--muc-sekundaer-on-dunkel); font-size: 11.5px; }
.leaflet-tooltip-top.muc-tip:before    { border-top-color: var(--muc-papier); }
.leaflet-tooltip-bottom.muc-tip:before { border-bottom-color: var(--muc-papier); }
.leaflet-tooltip-left.muc-tip:before   { border-left-color: var(--muc-papier); }
.leaflet-tooltip-right.muc-tip:before  { border-right-color: var(--muc-papier); }

/* ── 13. Uebersicht (10.09.): Boxen behalten ihre Proportion. Die vier
   Kacheln teilen sich weiter die Breite, wachsen aber in der Hoehe mit;
   Schrift und Icon skalieren ueber Container-Einheiten (cqw) - auf dem
   grossen Bildschirm gross, auf dem Laptop normal. ─────────────────────── */
.muc-home-kpis .bslib-value-box {
  aspect-ratio: 1.7 / 1; container-type: inline-size; min-height: 0;
}
.muc-home-kpis .bslib-value-box .value-box-title    { font-size: clamp(.85rem, 5cqw, 1.25rem); }
.muc-home-kpis .bslib-value-box .value-box-value    { font-size: clamp(1.6rem, 13cqw, 3.6rem); line-height: 1.1; }
.muc-home-kpis .bslib-value-box .value-box-showcase { font-size: clamp(1.6rem, 12cqw, 3.4rem); }
.muc-home-kpis .bslib-value-box .value-box-area     { padding: clamp(.6rem, 4cqw, 1.4rem) clamp(.8rem, 5cqw, 1.8rem); }

/* Textkarten "Was Sie hier finden": KEIN festes Verhaeltnis (Patrick 10.09.) -
   Hoehe folgt dem Text, alle vier gleich hoch (heights_equal), Knopf unten */
.muc-home-cards .card { aspect-ratio: auto; min-height: 0; }
.muc-home-cards .card .card-body   { display: flex; flex-direction: column; line-height: 1.5; }
.muc-home-cards .card .card-body p { flex: 1 1 auto; }
.muc-home-cards .card .btn         { align-self: flex-start; }
/* Aussenkanten buendig mit dem Hero: keine eigene Breitenbegrenzung der
   Reihen (eine zentrierte max-width versetzte sie auf grossen Schirmen
   nach innen). Die Proportion haelt aspect-ratio, die Schrift skaliert. */
.muc-home-kpis, .muc-home-cards { max-width: none; margin-left: 0; margin-right: 0; }

/* 14  Hinweis Aufbauphase (18.09.2026), nur Startseite, wegklickbar.
   Warnfarbe gedaempft, damit der Hinweis sachlich bleibt und nicht schreit. */
.muc-aufbau {
  background: #fff8e6;
  border: 1px solid #e8c774;
  border-left: 5px solid var(--muc-orange, #e8791e);
  color: #4a3a12;
  border-radius: .5rem;
}
.muc-aufbau .fa-triangle-exclamation { color: var(--muc-orange, #e8791e); }
.muc-aufbau a { color: #8a4b0a; text-decoration: underline; }
@media (max-width: 575.98px) {
  .muc-aufbau { font-size: .95rem; }
  .muc-aufbau .fs-4 { font-size: 1.1rem !important; }
}