/*Projektweite CSS-Farbvariable definieren, abrufbar mit var-(--project-primary)*/
:root{
  --project-primary: rgb(30, 67, 105);
  --project-primary-rgb: 30, 67, 105;

  /* Zweite Akzentfarbe: Türkis */
  --project-accent: rgb(32, 156, 166);
  --project-accent-rgb: 32, 156, 166;

  /* Neutrale Flächen */
  --page-bg: #f4f6f9;
  --surface-bg: #ffffff;
  --surface-border: #d7e0ea;
}

/*Projektfarbe für Headlines*/
.headline-accent{ color: var(--project-primary); }

/* Seite leicht grauen Hintergrund */
body{
  background: var(--page-bg);
}

/* Hauptbereich nicht an Navbar klebt */
main{
  padding-top: 1.25rem;
  padding-bottom: 2rem;
}

/* =========================
   Navbar
   ========================= */

/* Navbar: Blau, nicht zu stark */
.navbar{
  background: #244b78;
  border-bottom: 1px solid rgba(255,255,255,.14) !important;
}

nav.navbar.bg-white{
  background-color: #244b78 !important;
}

.navbar .navbar-brand,
.navbar .navbar-brand:hover{
  color: rgba(255,255,255,.95);
}

/* Tabs/Links in der Navbar */
.navbar .nav-link{
  color: rgba(255,255,255,.78);
  border: 1px solid transparent;
  background: transparent;
}

.navbar .nav-link:hover{
  color: rgba(255,255,255,.95);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.14);
}

/* Aktiv: gut sichtbar */
.navbar .nav-link.active,
.navbar .nav-link[aria-current="page"]{
  color: #fff !important;
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.18);
}

/* --- Toggler passend zum dunklen Hintergrund --- */
.navbar-toggler{
  border-color: rgba(255,255,255,.35);
  border-radius: 10px;
  padding: .25rem .45rem;
}

.navbar-toggler:focus{
  box-shadow: 0 0 0 .15rem rgba(255,255,255,.18);
}

/* kleineres Icon */
.navbar-toggler-icon{
  width: 1.1em;
  height: 1.1em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255,255,255,0.92)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 8h22M4 15h22M4 22h22'/%3E%3C/svg%3E");
}

/* Tabs nie umbrechen */
.navbar-nav{
  flex-wrap: nowrap !important;
}

.navbar-nav .nav-link,
.navbar-nav .nav-link span{
  white-space: nowrap !important;
}

/* Abmelden-Button niemals umbrechen */
.btn-outline-danger,
.btn-outline-danger span{
  white-space: nowrap;
}

/* -------------------------
   Buttons in der Navbar
   ------------------------- */

/* Grundlook für Navbar-Buttons */
.navbar .btn:not(.btn-outline-danger){
  background: transparent;
  border-color: rgba(255,255,255,.45);
  color: rgba(255,255,255,.95);
}

.navbar .btn:not(.btn-outline-danger):hover{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.60);
  color: #fff;
}

.navbar .btn:not(.btn-outline-danger):focus{
  box-shadow: 0 0 0 .15rem rgba(255,255,255,.20);
}

/* Runde Icon-Buttons +  leichtes Glas -> damit nicht untergehen */
.navbar .btn.btn-outline-secondary{
  background: rgba(255,255,255,.06);
}
.navbar .btn.btn-outline-secondary:hover{
  background: rgba(255,255,255,.14);
}

/* Logout: IMMER rot */
.navbar .btn-outline-danger{
  background: rgb(220,53,69) !important; 
  border-color: rgb(220,53,69) !important;
  color: #fff !important;
}

/* Icon übernimmt weiß */
.navbar .btn-outline-danger i{
  color: inherit !important;
}

/* Hover bleibt identisch rot */
.navbar .btn-outline-danger:hover,
.navbar .btn-outline-danger:active,
.navbar .btn-outline-danger:focus{
  background: rgb(220,53,69) !important;
  border-color: rgb(220,53,69) !important;
  color: #fff !important;
  box-shadow: 0 0 0 .15rem rgba(220,53,69,.35);
}


/* -------------------------
   Sprachumschalter (nur in der Navbar)
   ------------------------- */

.navbar #navRight .btn-group{
  border: 1px solid rgba(255,255,255,.55) !important;
  background: rgba(255,255,255,.06);
  padding: 3px;
  gap: 4px;
}

.navbar #navRight .btn-group .btn{
  background: transparent !important;
  border: 0 !important;
  color: rgba(255,255,255,.72) !important;
  font-weight: 700;
  min-width: 54px;
  text-align: center;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.navbar #navRight .btn-group .btn:hover{
  background: rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.95) !important;
}

/* Active Segment: weißes Feld + dunkles Blau */
.navbar #navRight .btn-check:checked + .btn{
  background: #fff !important;
  color: #1b3555 !important;
  font-weight: 800;
  box-shadow:
    0 6px 16px rgba(0,0,0,.18),
    0 0 0 1px rgba(255,255,255,.85) inset;
}
/* Logo bekommt eine kleine Karte */
.navbar .navbar-logo{
  background: #fff;
  border: 1px solid #cfd7e3;       
  border-radius: 14px;
  padding: 6px 10px;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}

/* Bild sauber ausrichten */
.navbar .navbar-logo img{
  display: block;
  height: 38px;                    
  width: auto;
}

.navbar .navbar-logo:hover{
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}

/* =========================
   Buttons & Toggles
   ========================= */

/*Buttons-Outlines in Projektfarbe*/
.btn-outline-project{
  color: var(--project-primary);
  border-color: var(--project-primary);
  background: transparent;
}

/*Hover-Effekt: leichtes Projektblau im Hintergrund*/
.btn.btn-outline-project:hover{
  background-color: rgba(var(--project-primary-rgb), 0.10);
}

/* Fokus-Ring für Outline-Button */
.btn-outline-project:focus{
  box-shadow: 0 0 0 0.2rem rgba(var(--project-primary-rgb), 0.25);
}

/*Zugehörige Radio/Checkboxen, wenn checked in Projektfarbe*/
.btn-check:checked + .btn-outline-project{
  background-color: var(--project-primary);
  border-color: var(--project-primary);
  color: #fff;
}

/* Task-Buttongruppe: weißer Hintergrund und klarer abgegrenzt */
.task-toggle{
  background: #fff; 
  border-color: rgba(30,67,105,.18) !important; 
  box-shadow: 0 8px 22px rgba(0,0,0,.05); 
}

/* Damit das Pill-Innere auch wirklich wie „Container“ wirkt */
.task-toggle .btn{
  background: transparent;
}


/* =========================
   Akzentfarbe – nur im Inhaltsbereich
   ========================= */

/* Aktive Toggle/Pill-Buttons im main: Türkis-Highlight statt Blau */
main .btn-check:checked + .btn{
  background: rgba(var(--project-accent-rgb), 0.16);
  color: rgb(var(--project-primary-rgb));
  border-color: rgba(var(--project-accent-rgb), 0.35);
}

/* Hover im main */
main .btn-group .btn:hover{
  background: rgba(var(--project-accent-rgb), 0.10);
}

/* Sprachumschalter Optik */
.btn-group .btn{
  border: 0;
}

.btn-check:checked + .btn{
  background: rgba(var(--project-primary-rgb), 0.12);
  color: var(--project-primary);
  font-weight: 700;
}

/* CTA-Button in Projektfarbe */
.btn-project-cta{
  background-color: var(--project-primary);
  border-color: var(--project-primary);
  color: #fff;
}

.btn-project-cta:hover{
  background-color: rgba(var(--project-primary-rgb), 0.9);
  border-color: rgba(var(--project-primary-rgb), 0.9);
}

/* Projekt-Button Hover */
.btn-project:hover{
  background-color: rgba(var(--project-primary-rgb), 0.9);
  border-color: rgba(var(--project-primary-rgb), 0.9);
  color: #fff;
}

/* Kleinere Schrift für Aufgabentypen */
.task-toggle .btn{
  font-size: 0.95rem;
  padding: 0.375rem 0.5rem;
}

/* Kleineres Close-X nur für Warnhinweise */
.btn-close-sm{
  transform: scale(0.75);   /* Größe */
  opacity: 0.7;             /* etwas dezenter */
}

.btn-close-sm:hover{
  opacity: 1;
}

/* =========================
   Formulare & Inputs
   ========================= */

/* Projekt-Rahmen */
.border-project{
  border: 1px solid var(--project-primary) !important;
}

/* Eingabefelder (Inputs/Selects) im main-Bereich Projektfarbe einfärben. */
main .form-control,
main .form-select{
  border-color: var(--project-primary);
}

main .form-control:focus,
main .form-select:focus{
  border-color: rgba(var(--project-accent-rgb), .75);
  box-shadow: 0 0 0 0.2rem rgba(var(--project-accent-rgb), 0.25);
}

/* Checkboxen in Projektfarbe  */
.form-check-input:checked{
  background-color: var(--project-primary);
  border-color: var(--project-primary);
}

/* Fokus-Ring  */
.form-check-input:focus{
  border-color: var(--project-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--project-primary-rgb), 0.25);
}

/* Dropdown: Projektfarbe für Hover & Active  */
.dropdown-menu .dropdown-item{
  color: #212529; 
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus{
  background-color: rgba(var(--project-primary-rgb), 0.12);
  color: var(--project-primary);
}

.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active{
  background-color: var(--project-primary);
  color: #fff;
}

/* Kleine Select-Variante */
.select-small{
  height: 32px;
  padding-top: 2px;
  padding-bottom: 2px;
  font-size: 14px;
}

/* Textarea*/
textarea.auto-grow{
  resize: none;        /* kein manuelles Ziehen */
}

/* =========================
   Projekt-Range-Slider
   ========================= */

/* WebKit (Chrome, Edge, Safari) */
.project-range::-webkit-slider-runnable-track{
  height: 0.5rem;
  background: rgba(var(--project-primary-rgb), 0.25);
  border-radius: 1rem;
}

.project-range::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  margin-top: -0.3rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--project-primary);
  border: 2px solid #fff;
  box-shadow: 0 0 0 0.15rem rgba(var(--project-primary-rgb), 0.4);
  cursor: pointer;
}

/* Firefox */
.project-range::-moz-range-track{
  height: 0.5rem;
  background: rgba(var(--project-primary-rgb), 0.25);
  border-radius: 1rem;
}

/* =========================
   Karten / Container
   ========================= */

/* Parameter-Container für Parameterboxen */
.params-card{
  background: var(--surface-bg);
  border: 1px solid var(--surface-border);
  border-radius: 0.5rem;
  padding: 1rem;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
}


/* Rechte Bearbeiten-Box: wächst mit links, aber nur bis zur Max-Höhe */
.edit-card{
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 500px;      /* <- bestimmte max Größe der Box */
}

/* Bereich unter der Überschrift nimmt den restlichen Platz ein */
.edit-body{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;         
  align-items: flex-start;
}

/* Textarea füllt alles bis zum Button, danach scrollt sie */
.edit-textarea{
  flex: 1 1 auto;
  min-height: 160px;      /* Startgröße, damit es nicht zu klein wirkt */
  overflow-y: auto;
  resize: none;
}

/* Button bleibt unten, ohne den Layoutfluss zu sprengen */
.edit-btn{
  margin-top: 12px;       /* statt mt-2, pixelgenau steuern kannst */
  flex: 0 0 auto;
}

/* =========================
   Spinner & Tooltips
   ========================= */

/* Spinner immer in Projektfarbe (überschreibt currentColor-Vererbung) */
[data-submit-spinner-el].spinner-border,
.spinner-border[data-submit-spinner-el]{
  color: var(--project-primary) !important;
}

/* Tooltip im Projekt-Style */
.tooltip.project-tooltip .tooltip-inner{
  background: #fff;
  color: #212529;
  border: 1px solid var(--project-primary);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  text-align: left;
  max-width: 260px;
}

/* Pfeilfarbe (weiß) */
.tooltip.project-tooltip .tooltip-arrow::before{
  border-bottom-color: #fff !important;
  border-top-color: #fff !important; 
}

.tooltip.project-tooltip .tt-name{
  font-weight: 700;
  color: var(--project-primary);
  margin-bottom: 6px;
}

.tooltip.project-tooltip .tt-label{
  font-size: .85rem;
  color: #6c757d;
  line-height: 1.1;
}

.tooltip.project-tooltip .tt-value{
  font-size: .95rem;
  color: #212529;
  line-height: 1.2;
}

/* =========================
   Saved-Tabelle / Details-UI
   ========================= */

/* Saved: fixe Spalten + kein Springen beim Aufklappen */
.saved-table{
  table-layout: fixed;   /* erzwingt feste Spaltenbreiten */
  width: 100%;
}

.saved-table td{
  vertical-align: top;
}

/* Lange Inhalte sollen nicht die Spaltenbreite verändern */
.saved-table td:nth-child(2),
.saved-table td:nth-child(3){
  overflow: hidden;
}

/* Details/Summary Layout stabilisieren */
.q-details{
  display: block;
}

.q-summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  list-style: none;      
  cursor: pointer;
  margin: 0;
  padding: 4px 0;
  line-height: 1.2;
}

/* Entfernt den Default-Pfeil im Summary (Browser) */
.q-summary::-webkit-details-marker{ display: none; }
.q-summary::marker{ content: ""; }

/* Linke Seite: Icon + Titel, Titel darf nicht Layout sprengen */
.q-summary-left{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;          
  flex: 1 1 auto;
}

.q-title{
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;      /* verhindert Umbrüche -> kein Springen */
}

/* Rechte Seite: reserviert immer Platz für den Button */
.q-summary-right{
  flex: 0 0 auto;
  width: 44px;              /* fester Platz -> kein Verschieben */
  display: flex;
  justify-content: flex-end;
}

.q-edit{
  width: 40px;              /* Button gleich breit */
  padding-left: 0;
  padding-right: 0;
}

/* Beim Öffnen: Caret drehen */
.q-caret{
  transition: transform .15s ease-in-out;
}

.q-details[open] .q-caret{
  transform: rotate(90deg);
}

/* Detail-Inhalt nicht bis ganz rechts laufen lassen (Platz für Edit-Button/Abstand) */
.q-body{
  margin-top: 8px;
  padding-right: 5px;       
  max-width: 900px;         
  white-space: normal;     
  overflow-wrap: anywhere; 
}

.q-type-label{
  display: inline-block;
  line-height: 1.2;
  padding-top: 0;           /* gleiche “Zeilenhöhe” wie Summary */
}

.saved-table td.q-type-cell{
  padding-top: 14px;        /* exakt wie Checkbox */
}

/* Checkbox sauber auf Höhe der Summary-Zeile */
.saved-table td:first-child{
  padding-top: 14px;
  text-align: center;
}

/* =========================
   Listen / Details
   ========================= */

summary{
  list-style: none; /* Entfernt Bullet- oder Pfeil-Symbol */
}

summary::-webkit-details-marker{
  display: none; /* Entfernt das Standard-Pfeil-Symbol in Chrome/Safari */
}

.upper-alpha-brackets{
  list-style: none;
  counter-reset: alpha;
  padding-left: 1.5rem;
}

.upper-alpha-brackets li{
  counter-increment: alpha;
  position: relative;
  padding-left: 1.5rem;
}

.upper-alpha-brackets li::before{
  content: counter(alpha, upper-alpha) ") ";
  position: absolute;
  left: 0;
  font-weight: 600;
}

/* =========================
   Footer
   ========================= */

   .project-footer{
    background: #244b78; /* gleiches Blau wie Navbar */
    border-top: 1px solid rgba(255,255,255,.14);
    font-size: 0.9rem;
    color: rgba(255,255,255,.78);
  }
  
  /* Text links */
  .footer-text{
    color: rgba(255,255,255,.85);
  }
  
  /* Rechte Meta-Navigation */
  .footer-meta{
    color: rgba(255,255,255,.70);
  }
  
  /* Einzelne Items */
  .footer-item{
    cursor: default;
    transition: color 0.2s ease, opacity 0.2s ease;
    color: rgba(255,255,255,.80);
  }
  
  /* Hover  */
  .footer-item:hover{
    color: #fff;
    opacity: .95;
  }
  
  /* Trennpunkte */
  .footer-separator{
    margin: 0 0.4rem;
    color: rgba(255,255,255,.45);
  }

/* Obere Haupt-2-Spalten: links & rechts gleich hoch wirken */
@media (min-width: 992px){
  .main-top-row{
    align-items: stretch;
  }

  /* Die beiden Cols sind flex */
  .main-top-row > .col-lg-7,
  .main-top-row > .col-lg-5{
    display: flex;
  }

  /* Die Card selbst füllt dann die Spaltenhöhe */
  .main-top-row .params-card{
    width: 100%;
    height: 100%;
  }
}

/* =========================
   Tooltips - Design Anpassung
   ========================= */

   .tooltip{
    --bs-tooltip-opacity: 1;
  }
  
  .tooltip .tooltip-inner{
    background: #fff;
    color: #212529;
    border: 1px solid var(--project-primary);
    border-radius: 14px;
    padding: 10px 12px;
    box-shadow: 0 14px 34px rgba(0,0,0,.18);
    max-width: 350px;
    text-align: left;
    line-height: 1.25;
  }
  
  /* Pfeil je Placement */
  .tooltip[data-popper-placement^="top"] .tooltip-arrow::before{
    border-top-color: #fff !important;
  }
  .tooltip[data-popper-placement^="bottom"] .tooltip-arrow::before{
    border-bottom-color: #fff !important;
  }
  .tooltip[data-popper-placement^="left"] .tooltip-arrow::before{
    border-left-color: #fff !important;
  }
  .tooltip[data-popper-placement^="right"] .tooltip-arrow::before{
    border-right-color: #fff !important;
  }

  /* Nur Tooltips mit tt-nowrap: kein Umbruch */
.tooltip.tt-nowrap .tooltip-inner{
  white-space: nowrap;
  max-width: none;      
}

/* Nur Tooltips mit custom class tt-break bekommen Zeilenumbrüche */
.tooltip.tt-break .tooltip-inner{
  white-space: pre-line;
}