/* =========================================================
   overrides.css  –  Dschungelkompass PrimeFaces Theme Overrides
   Basis: Saga

   WAS HIER DRIN IST:
   – CSS Custom Properties (Design Tokens)
   – Typography
   – Inputs (inputText, textarea, spinner, autocomplete)
   – SelectOneMenu
   – ToggleSwitch
   – Checkbox / RadioButton
   – Slider
   – DataTable / Paginator
   – Accordion
   – OverlayPanel
   – Diverses (hidden-accessible)

   WAS NICHT MEHR HIER IST:
   – Buttons → jetzt vollständig in dk-buttons.css
   ========================================================= */


/* ---------------------------------------------------------
   CSS CUSTOM PROPERTIES  (Design Tokens)
   --------------------------------------------------------- */
:root {
  --dk-green:        #339900;
  --dk-green-hover:  #2a7d00;
  --dk-green-tint:   #E0F0D9;
  --dk-text:         #1D1D1D;
  --dk-muted:        #878787;

  --dk-radius:       16px;       /* Inputs, Cards */
  --dk-radius-pill:  999px;      /* Buttons */

  --dk-shadow:       0 10px 20px rgba(0,0,0,.08);
  --dk-ring:         0 0 0 3px rgba(51,153,0,.22);  /* Fokus-Ring */

  --dk-border-w:     1px;        /* Border-Stärke – mobile default */
  --dk-border:       1px;        /* Alias für dk-inputs.css Kompatibilität */
}

@media (min-width: 768px) {
  :root {
    --dk-border-w: 2px;
    --dk-border:   2px;          /* desktop */
  }
}


/* ---------------------------------------------------------
   TYPOGRAPHY  (global)
   --------------------------------------------------------- */
html, body,
.ui-widget {
  font-family: "Rubik", "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  color: var(--dk-text);
}


/* ---------------------------------------------------------
   INPUTS  (inputText, textarea, spinner, autocomplete)
   --------------------------------------------------------- */
.ui-inputfield,
.ui-inputtext,
.ui-autocomplete-input,
.ui-spinner-input,
textarea.ui-inputfield {
  border-radius: var(--dk-radius) !important;
  border:        var(--dk-border-w) solid rgba(29,29,29,.22) !important;
  box-shadow:    none !important;
  background:    #fff !important;
  color:         var(--dk-text) !important;
  font-size:     18px !important;
  line-height:   1.2 !important;
  padding:       18px 16px !important;
}

.ui-inputfield::placeholder,
.ui-inputtext::placeholder {
  color: rgba(135,135,135,.9) !important;
}

.ui-inputfield:focus,
.ui-inputtext:focus,
.ui-spinner-input:focus,
textarea.ui-inputfield:focus {
  border-color: var(--dk-green) !important;
  box-shadow:   var(--dk-ring) !important;
  outline:      none !important;
}

/* Disabled – gilt für Inputs UND andere Elemente (nicht Buttons, die haben eigene Regel) */
.ui-state-disabled.ui-inputfield,
.ui-state-disabled.ui-inputtext,
.ui-state-disabled.ui-selectonemenu,
.ui-state-disabled.ui-toggleswitch,
.ui-state-disabled.ui-slider {
  opacity: .55 !important;
}


/* ---------------------------------------------------------
   SELECTONEMENU  (p:selectOneMenu)

   Aufbau: .ui-selectonemenu (Wrapper) enthält
           .ui-selectonemenu-label  (Text)
           .ui-selectonemenu-trigger (Pfeil-Button)
   Das sichtbare Border sitzt auf dem Wrapper.
   Saga zeichnet einen eigenen Wrapper-Border als .ui-widget –
   den überschreiben wir gezielt mit unseren Werten.
   --------------------------------------------------------- */

/* Wrapper – Standard (Border + min-height auf dem Wrapper) */
.ui-selectonemenu.ui-widget {
  border-radius: var(--dk-radius) !important;
  border:        var(--dk-border-w) solid rgba(29,29,29,.22) !important;
  box-shadow:    none !important;
  background:    #fff !important;
  min-height:    56px !important;
}

/* compareSelectOneMenu: Sonderfall aus dk-inputs.css –
   der sichtbare Border sitzt auf dem INNER LABEL, nicht dem Wrapper.
   Wrapper muss transparent bleiben, sonst doppelter Rahmen + extra Höhe. */
.ui-selectonemenu.compareSelectOneMenu.ui-widget,
.ui-selectonemenu.compareSelectOneMenu {
  border:     none !important;
  min-height: 0    !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* Focus/Active-Zustand: unsere allgemeine Focus-Regel (gleiche Spezifität,
   aber später im File) würde sonst den Wrapper-Border wieder einschalten.
   Hier mit (0,4,0) überschreiben: */
.ui-selectonemenu.compareSelectOneMenu.ui-widget.ui-state-focus,
.ui-selectonemenu.compareSelectOneMenu.ui-widget.ui-state-active,
.ui-selectonemenu.compareSelectOneMenu.ui-state-focus,
.ui-selectonemenu.compareSelectOneMenu.ui-state-active {
  border:     none !important;
  box-shadow: none !important;
}
/* Höhere Spezifität (0,3,0) schlägt die allgemeine Label-Regel (0,2,0) weiter unten.
   Padding und font-size exakt aus dk-inputs.css wiederherstellen: */
.compareSelectOneMenu.ui-selectonemenu .ui-selectonemenu-label,
.compareSelectOneMenu .ui-selectonemenu-label {
  padding:   14px 54px 14px 18px !important;
  font-size: 16px !important;
}

/* Hover */
.ui-selectonemenu.ui-widget.ui-state-hover {
  border-color: rgba(135,135,135,.9) !important;
}

/* Fokus / Offen */
.ui-selectonemenu.ui-widget.ui-state-focus,
.ui-selectonemenu.ui-widget.ui-state-active {
  border-color: var(--dk-green) !important;
  box-shadow:   var(--dk-ring) !important;
}

/* Label (gewählter Wert) */
.ui-selectonemenu .ui-selectonemenu-label {
  padding:     16px 52px 16px 16px !important;
  font-size:   18px !important;
  line-height: 1.2 !important;
  color:       var(--dk-text) !important;
}

/* Pfeil-Button */
.ui-selectonemenu .ui-selectonemenu-trigger {
  width:       46px !important;
  border-left: none !important;
  background:  transparent !important;
}

/* Dropdown-Panel */
.ui-selectonemenu-panel {
  border-radius: 14px !important;
  box-shadow:    0 18px 60px rgba(0,0,0,.18) !important;
  border:        1px solid rgba(0,0,0,.12) !important;
  overflow:      hidden !important;
}

.ui-selectonemenu-panel .ui-selectonemenu-items-wrapper {
  /*padding: 6px 0 !important;*/
}

.ui-selectonemenu-panel .ui-selectonemenu-item {
  padding:   14px 16px !important;
  font-size: 18px !important;
}

/* Ausgewählter Eintrag: hellgrüner Hintergrund + linker Accent */
.ui-selectonemenu-panel .ui-selectonemenu-item.ui-state-highlight {
  background:  var(--dk-green-tint) !important;
  color:       var(--dk-text) !important;
  border-left: 3px solid var(--dk-green) !important;
}


/* ---------------------------------------------------------
   TOGGLESWITCH  (p:toggleSwitch)
   --------------------------------------------------------- */
.ui-toggleswitch .ui-toggleswitch-slider {
  border-radius: 999px !important;
  height:        28px !important;
  width:         56px !important;
  background:    #fff !important;
  border:        var(--dk-border-w) solid rgba(29,29,29,.22) !important;
  box-shadow:    none !important;
}

.ui-toggleswitch .ui-toggleswitch-handle {
  width:         22px !important;
  height:        22px !important;
  top:           50% !important;
  transform:     translateY(-50%) !important;
  left:          4px !important;
  border-radius: 999px !important;
  background:    #fff !important;
  border:        var(--dk-border-w) solid rgba(29,29,29,.22) !important;
}

.ui-toggleswitch.ui-toggleswitch-checked .ui-toggleswitch-slider {
  background:   var(--dk-green) !important;
  border-color: var(--dk-green) !important;
}

.ui-toggleswitch.ui-toggleswitch-checked .ui-toggleswitch-handle {
  left:         30px !important;
  border-color: #fff !important;
}


/* ---------------------------------------------------------
   CHECKBOX  (p:selectBooleanCheckbox, p:selectManyCheckbox)
   Eckig mit grünem Haken
   --------------------------------------------------------- */
.ui-chkbox .ui-chkbox-box {
  width:         26px !important;
  height:        26px !important;
  border-radius: 6px !important;
  border:        var(--dk-border-w) solid rgba(29,29,29,.22) !important;
  background:    #fff !important;
  box-shadow:    none !important;
}

.ui-chkbox .ui-chkbox-box.ui-state-hover {
  border-color: var(--dk-green) !important;
}

.ui-chkbox .ui-chkbox-box.ui-state-active,
.ui-chkbox .ui-chkbox-box.ui-state-active.ui-state-hover {
  background:   var(--dk-green) !important;
  border-color: var(--dk-green) !important;
}

.ui-chkbox .ui-chkbox-icon {
  color:     #fff !important;
  font-size: 16px !important;
}


/* ---------------------------------------------------------
   RADIOBUTTON  (p:selectOneRadio)
   Rund, aktiv: dicker grüner Ring, kein Innenpunkt
   --------------------------------------------------------- */
.ui-radiobutton .ui-radiobutton-box {
  width:         26px !important;
  height:        26px !important;
  border-radius: 999px !important;
  border:        2px solid rgba(29,29,29,.22) !important;
  background:    #fff !important;
  box-shadow:    none !important;
}

.ui-radiobutton .ui-radiobutton-box.ui-state-hover {
  border-color: var(--dk-green) !important;
}

.ui-radiobutton .ui-radiobutton-box.ui-state-active,
.ui-radiobutton .ui-radiobutton-box.ui-state-active.ui-state-hover {
  background:  #fff !important;
  border:      4px solid var(--dk-green) !important;
  box-shadow:  none !important;
}

/* PrimeFaces-eigenes Icon ausblenden (wir nutzen nur den Ring) */
.ui-radiobutton .ui-radiobutton-icon {
  display: none !important;
}

.ui-radiobutton .ui-radiobutton-box::after {
  content: none !important;
}


/* ---------------------------------------------------------
   SLIDER  (p:slider)
   --------------------------------------------------------- */
.ui-slider {
  height:        14px !important;
  border-radius: 999px !important;
  background:    rgba(135,135,135,.18) !important;
  border:        none !important;
  box-shadow:    none !important;
}

.ui-slider .ui-slider-range {
  background:    var(--dk-green) !important;
  border-radius: 999px !important;
}

.ui-slider .ui-slider-handle {
  width:      30px !important;
  height:     30px !important;
  top:        -10px !important;
  background: #fff !important;
  border:     var(--dk-border-w) solid var(--dk-green) !important;
  box-shadow: 0 10px 20px rgba(0,0,0,.12) !important;
}

.ui-slider .ui-slider-handle:focus {
  box-shadow: var(--dk-ring), 0 10px 20px rgba(0,0,0,.12) !important;
  outline:    none !important;
}


/* ---------------------------------------------------------
   DATATABLE  (p:dataTable)
   --------------------------------------------------------- */
.ui-datatable {
  border-radius: 18px !important;
  overflow:      hidden !important;
  box-shadow:    var(--dk-shadow) !important;
  border:        1px solid rgba(0,0,0,.10) !important;
}

.ui-datatable thead th {
  font-weight:  800 !important;
  color:        var(--dk-text) !important;
  background:   #fff !important;
  border-color: rgba(0,0,0,.06) !important;
}

.ui-datatable .ui-datatable-tbody > tr:hover {
  background: var(--dk-green-tint) !important;
}

.ui-datatable .ui-sortable-column.ui-state-highlight,
.ui-datatable .ui-sortable-column.ui-state-highlight .ui-sortable-column-icon {
  color: var(--dk-green) !important;
}

/* Paginator */
.ui-paginator .ui-paginator-pages .ui-paginator-page.ui-state-active {
  background:    var(--dk-green) !important;
  border-color:  var(--dk-green) !important;
  color:         #fff !important;
  border-radius: 999px !important;
}


/* ---------------------------------------------------------
   ACCORDION  (p:accordion)
   --------------------------------------------------------- */
body .ui-accordion .ui-accordion-header,
body .ui-accordion .ui-accordion-header-active,
body .ui-accordion .ui-accordion-header.ui-state-active {
  background-color: #fff;
  color:            var(--dk-green) !important;
}


/* ---------------------------------------------------------
   OVERLAYPANEL  (p:overlayPanel)
   --------------------------------------------------------- */
body .ui-overlaypanel .ui-overlaypanel-close {
  color:            #fff;
  background-color: #000;
}

body .ui-overlaypanel .ui-overlaypanel-close:hover {
  background-color: #000;
}


/* ---------------------------------------------------------
   DIVERSES
   --------------------------------------------------------- */

/* PrimeFaces Accessibility-Helper verstecken */
.ui-helper-hidden-accessible select {
  width:   1px !important;
  height:  1px !important;
  opacity: 0 !important;
}