/* =============================================================
   dk-buttons.css  –  Dschungelkompass Button System v2
   Master-Datei: gilt für BEIDE Apps (mobile + internet)
   Einbinden NACH dem PrimeFaces/Saga-Theme-CSS.
   Keine Form-ID-Qualifier nötig.
   =============================================================

   KLASSEN-ÜBERSICHT
   -----------------
   Typ          styleClass (in XHTML)
   ──────────── ─────────────────────────────────────────────
   Primär       dk-btn-primary
   Outline      dk-btn-outline
   Segment      dk-btn-segment   (+  is-active  für aktiven Tab)
   Chip         dk-btn-chip      (+  is-active  für gewählte Option)
   Link         dk-btn-link      (kein Hintergrund, nur grüner Text)

   Modifier (kombinierbar):
   dk-btn--full    width: 100%
   dk-btn--lg      grösser  (font 20px, padding 18px 32px)
   dk-btn--sm      kleiner  (font 14px, padding 8px 18px)

   Hover-Verhalten:
   primary  →  wird zu outline  (Negativ-Tausch)
   outline  →  wird zu primary  (Negativ-Tausch)
   segment  →  kein Hover-Tausch (sind Tab-Schalter)
   chip     →  leichter grüner Tint beim Hover

   MIGRATION (alte Klassen → neue)
   --------------------------------
   buttonLightGreen      →  dk-btn-primary
   btnBerechnen          →  dk-btn-primary
   dk-btnPrimary         →  dk-btn-primary
   dk-calcProto__submitBtn →  dk-btn-primary
   buttonLight           →  dk-btn-outline
   dk-btnOutline         →  dk-btn-outline
   dk-calcProto__segmentBtn → dk-btn-segment
   dk-calcProto__chipBtn →  dk-btn-chip
   dk-btnLink            →  dk-btn-link
   ============================================================= */


/* -------------------------------------------------------------
   0. CSS CUSTOM PROPERTIES  (falls noch nicht in overrides.css)
   ------------------------------------------------------------- */
:root {
  --dk-green:        #339900;
  --dk-green-hover:  #2a7d00;     /* etwas dunkler für active/focus */
  --dk-green-tint:   #E0F0D9;
  --dk-btn-radius:   999px;       /* Pill-Form */
  --dk-btn-border:   2px;         /* Border-Stärke für Outline-Buttons */
  --dk-btn-font:     "Rubik", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --dk-btn-weight:   800;
  --dk-btn-size:     18px;        /* Standard-Schriftgrösse */
  --dk-btn-pad-v:    14px;        /* vertikal */
  --dk-btn-pad-h:    28px;        /* horizontal */
  --dk-btn-transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}


/* -------------------------------------------------------------
   0b. SAGA-RESET  –  verhindert grün-auf-grün in Internet-App
   Saga setzt auf .ui-button standardmässig eine Hintergrundfarbe
   und Textfarbe aus dem Theme. Dieser Reset stellt einen neutralen
   Ausgangspunkt her, bevor unsere Klassen greifen.
   ------------------------------------------------------------- */
.ui-button,
button.ui-button,
button.ui-button.ui-state-default,
.ui-commandlink.ui-button {
  background:    #fff;
  color:         var(--dk-text, #1D1D1D);
  border:        2px solid #d9d9d9;
  border-radius: var(--dk-btn-radius);
  box-shadow:    none;
  font-family:   var(--dk-btn-font);
  font-weight:   var(--dk-btn-weight);
  letter-spacing: .2px;
  padding:       var(--dk-btn-pad-v) var(--dk-btn-pad-h);
  transition:    var(--dk-btn-transition);
}

/* .ui-button-text bekommt die Farbe vom Elternelement */
.ui-button .ui-button-text {
  color:   inherit;
  padding: 0;
}

/* Saga hover/focus reset */
.ui-button.ui-state-hover,
.ui-button:hover {
  background: #f5f5f5;
  color:      var(--dk-text, #1D1D1D);
  box-shadow: none;
}

.ui-button.ui-state-focus,
.ui-button:focus {
  box-shadow: 0 0 0 3px rgba(51,153,0,.22);
  outline:    none;
}


/* -------------------------------------------------------------
   1. GEMEINSAME BASIS  (alle Button-Typen erben dies)
   ------------------------------------------------------------- */
button.ui-button.dk-btn-primary,
button.ui-button.dk-btn-outline,
button.ui-button.dk-btn-segment,
button.ui-button.dk-btn-chip,
button.ui-button.dk-btn-link,
.ui-button.dk-btn-primary,
.ui-button.dk-btn-outline,
.ui-button.dk-btn-segment,
.ui-button.dk-btn-chip,
.ui-button.dk-btn-link,
a.dk-btn-primary,
a.dk-btn-outline,
a.dk-btn-segment,
a.dk-btn-chip,
a.dk-btn-link{
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--dk-btn-font);
  font-size:       var(--dk-btn-size);
  font-weight:     var(--dk-btn-weight);
  letter-spacing:  0.2px;
  line-height:     1.2;
  padding:         var(--dk-btn-pad-v) var(--dk-btn-pad-h);
  border-radius:   var(--dk-btn-radius);
  cursor:          pointer;
  box-shadow:      none;
  transition:      var(--dk-btn-transition);
  text-decoration: none;
}

/* .ui-button-text erbt die Farbe immer vom Button selbst */
button.ui-button.dk-btn-primary .ui-button-text,
button.ui-button.dk-btn-outline .ui-button-text,
button.ui-button.dk-btn-segment .ui-button-text,
button.ui-button.dk-btn-chip    .ui-button-text,
button.ui-button.dk-btn-link    .ui-button-text,
.ui-button.dk-btn-primary .ui-button-text,
.ui-button.dk-btn-outline .ui-button-text,
.ui-button.dk-btn-segment .ui-button-text,
.ui-button.dk-btn-chip    .ui-button-text,
.ui-button.dk-btn-link    .ui-button-text {
  color:   inherit;
  padding: 0;             /* kein Extra-Padding vom PF-Theme */
}


/* -------------------------------------------------------------
   2. PRIMARY  –  grün gefüllt, weisse Schrift
   ------------------------------------------------------------- */
button.ui-button.dk-btn-primary,
.ui-button.dk-btn-primary,
a.dk-btn-primary{
  background:   var(--dk-green);
  border:       var(--dk-btn-border) solid var(--dk-green);
  color:        #fff;
}

button.ui-button.dk-btn-primary:hover,
button.ui-button.dk-btn-primary.ui-state-hover,
.ui-button.dk-btn-primary:hover,
.ui-button.dk-btn-primary.ui-state-hover,
a.dk-btn-primary:hover,
a.dk-btn-primary.ui-state-hover{
  background:   #fff;
  border-color: var(--dk-green);
  color:        var(--dk-green);
}

button.ui-button.dk-btn-primary:active,
button.ui-button.dk-btn-primary.ui-state-active,
.ui-button.dk-btn-primary:active {
  background:   var(--dk-green-hover);
  border-color: var(--dk-green-hover);
  color:        #fff;
}

button.ui-button.dk-btn-primary:focus,
button.ui-button.dk-btn-primary.ui-state-focus,
.ui-button.dk-btn-primary:focus {
  outline:    none;
  box-shadow: 0 0 0 3px rgba(51, 153, 0, 0.28);
}

/* dk-offerBtn--mini: kompaktere Grösse für Buttons in Result-Cards
   dk-btn-primary setzt font-size: 18px – zu gross für den Mini-Button.
   dk-results.css überschreibt nur padding, nicht font-size → hier korrigieren. */
button.ui-button.dk-btn-primary.dk-offerBtn--mini,
button.ui-button.dk-btn-primary.dk-offerBtn,
.ui-button.dk-btn-primary.dk-offerBtn--mini,
.ui-button.dk-btn-primary.dk-offerBtn {
  font-size: 14px;
}


/* -------------------------------------------------------------
   3. OUTLINE  –  weisser Hintergrund, grüner Rand + Text
   ------------------------------------------------------------- */
button.ui-button.dk-btn-outline,
.ui-button.dk-btn-outline,
a.dk-btn-outline{
  background:   #fff;
  border:       var(--dk-btn-border) solid var(--dk-green);
  color:        var(--dk-green);
}

button.ui-button.dk-btn-outline:hover,
button.ui-button.dk-btn-outline.ui-state-hover,
.ui-button.dk-btn-outline:hover,
.ui-button.dk-btn-outline.ui-state-hover,
a.dk-btn-outline:hover,
a.dk-btn-outline.ui-state-hover{
  background:   var(--dk-green);
  border-color: var(--dk-green);
  color:        #fff;
}

button.ui-button.dk-btn-outline:active,
button.ui-button.dk-btn-outline.ui-state-active,
.ui-button.dk-btn-outline:active {
  background:   var(--dk-green-hover);
  border-color: var(--dk-green-hover);
  color:        #fff;
}

button.ui-button.dk-btn-outline:focus,
button.ui-button.dk-btn-outline.ui-state-focus,
.ui-button.dk-btn-outline:focus {
  outline:    none;
  box-shadow: 0 0 0 3px rgba(51, 153, 0, 0.28);
}


/* -------------------------------------------------------------
   4. SEGMENT  –  Tab-/Kontextschalter (Schweiz / Ausland / Roaming)
   Inaktiv: grauer Rand, dunkler Text
   Aktiv (.is-active): grün gefüllt
   KEIN Hover-Tausch (verhindert visuelles Flackern bei Tab-Gruppen)
   ------------------------------------------------------------- */
button.ui-button.dk-btn-segment,
.ui-button.dk-btn-segment {
  background:   #fff;
/*  border:       var(--dk-btn-border) solid #d9d9d9;*/
  border:       1px solid #d9d9d9;
  /*color:        #4b4b4b;*/
  color:        var(--dk-green);
  font-weight:  700;
  padding:      8px 14px;    /* etwas kompakter als Primary */
  font-size:    14px;
}

button.ui-button.dk-btn-segment:hover,
button.ui-button.dk-btn-segment.ui-state-hover,
.ui-button.dk-btn-segment:hover {
  background:   #fff             !important;  /* kein Saga-#f5f5f5 */
  border-color: var(--dk-green)  !important;
  color:        var(--dk-green)  !important;
}
button.ui-button.dk-btn-segment:hover .ui-button-text,
button.ui-button.dk-btn-segment.ui-state-hover .ui-button-text,
.ui-button.dk-btn-segment:hover .ui-button-text {
  color: var(--dk-green) !important;
}

/* Aktiver Segment-Button */
button.ui-button.dk-btn-segment.is-active,
button.ui-button.dk-btn-segment.ui-state-active,
.ui-button.dk-btn-segment.is-active,
.ui-button.dk-btn-segment.ui-state-active {
  background:   var(--dk-green) !important;
  border-color: var(--dk-green) !important;
  color:        #fff            !important;
}
button.ui-button.dk-btn-segment.is-active .ui-button-text,
.ui-button.dk-btn-segment.is-active .ui-button-text {
  color: #fff !important;
}

button.ui-button.dk-btn-segment.is-active:hover,
.ui-button.dk-btn-segment.is-active:hover {
  background: var(--dk-green) !important;
  color:      #fff            !important;
}
button.ui-button.dk-btn-segment.is-active:hover .ui-button-text,
.ui-button.dk-btn-segment.is-active:hover .ui-button-text {
  color: #fff !important;
}

button.ui-button.dk-btn-segment-big,
.ui-button.dk-btn-segment-big {
/*  background:   #fff;
  border:       var(--dk-btn-border) solid #d9d9d9;
  border:       1px solid #d9d9d9;
  color:        #4b4b4b;
  color:        var(--dk-green);
  font-weight:  700;*/
  padding:      10px 14px;    
color: rgb(75, 75, 75);
  font-size:    clamp(14px, 3.6vw, 24px) !important
}

/* -------------------------------------------------------------
   5. CHIP  –  Option-Buttons (rechteckig abgerundet, Auswahl)
   Gleiche Logik wie Segment, aber quadratischere Form
   ------------------------------------------------------------- */
button.ui-button.dk-btn-chip,
.ui-button.dk-btn-chip {
  background:    #fff;
  border:        1px solid #d9d9d9;
  color:         #4b4b4b;
  border-radius: 10px;      /* nicht Pill, sondern abgerundetes Rechteck */
  font-size:     16px;
  font-weight:   700;
  padding:       10px 14px;
  width:         100%;
  min-height:    52px;
}

button.ui-button.dk-btn-chip:hover,
.ui-button.dk-btn-chip:hover {
  border-color: var(--dk-green);
  background:   var(--dk-green-tint);
}

button.ui-button.dk-btn-chip.is-active,
button.ui-button.dk-btn-chip.ui-state-active,
.ui-button.dk-btn-chip.is-active {
  background:   var(--dk-green);
  border-color: var(--dk-green);
  color:        #fff;
}


/* -------------------------------------------------------------
   6. LINK-STYLE  –  kein Hintergrund, kein Rand, grüner Text
   ------------------------------------------------------------- */
button.ui-button.dk-btn-link,
.ui-button.dk-btn-link {
  background:   transparent;
  border:       none;
  color:        var(--dk-green);
  padding:      0;
  font-weight:  400;
  text-decoration: underline;
}

button.ui-button.dk-btn-link:hover,
.ui-button.dk-btn-link:hover {
  color:           #1D1D1D;
  text-decoration: none;
}


/* -------------------------------------------------------------
   7. MODIFIER
   ------------------------------------------------------------- */

/* Volle Breite */
button.ui-button.dk-btn--full,
.ui-button.dk-btn--full {
  width:   100%;
  display: flex;    /* statt inline-flex damit es wirklich 100% füllt */
}

/* Gross  (Berechnen-Buttons etc.) */
button.ui-button.dk-btn--lg,
.ui-button.dk-btn--lg {
  font-size: 20px;
  padding:   18px 36px;
}

/* Klein  (Filter-Buttons etc.) */
button.ui-button.dk-btn--sm,
.ui-button.dk-btn--sm {
  font-size:   14px;
  font-weight: 700;
  padding:     8px 18px;
}


/* -------------------------------------------------------------
   8. DISABLED  –  gilt für alle Button-Typen
   ------------------------------------------------------------- */
button.ui-button[disabled],
button.ui-button.ui-state-disabled,
.ui-button.ui-state-disabled {
  opacity: 0.50;
  cursor:  not-allowed;
  pointer-events: none;
}


/* -------------------------------------------------------------
   9. KONTEXT-OVERRIDES
   Spezifische Korrekturen für bestimmte Verwendungsorte.
   ------------------------------------------------------------- */

/* dk-offerBtn--mini: kleiner Abo-Button in Results-Cards/-Table.
   dk-results.css setzt padding: 8px 12px !important – das greift.
   Aber unsere Basis setzt font-size: 18px → Button zu hoch.
   Hier auf 14px reduzieren damit der Mini-Button wirklich mini bleibt. */
.ui-button.dk-btn-primary.dk-offerBtn--mini,
button.ui-button.dk-btn-primary.dk-offerBtn--mini {
  font-size: 14px !important;
  padding:   8px 16px !important;
}
.ui-button.dk-btn-primary.dk-offerBtn--mini .ui-button-text,
button.ui-button.dk-btn-primary.dk-offerBtn--mini .ui-button-text {
  color: #fff !important;
}
.ui-button.dk-btn-primary.dk-offerBtn--mini:hover .ui-button-text,
button.ui-button.dk-btn-primary.dk-offerBtn--mini:hover .ui-button-text {
  color: var(--dk-green) !important;
}