/* Startseite "Arbeitsplatz" (ang/afsearchMintArbeitsplatz.aff.html).
   Nur Anordnung; Farben und Schrift kommen aus dem Stream streams/mint. */

/* Aktionen: eine Leiste ganz oben; Seltenes rechts abgesetzt. */
.mint-arbeitsplatz .mint-aktionen {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin: 0 0 1.5rem;
}
.mint-arbeitsplatz .mint-aktionen .btn { margin: 0; }
.mint-arbeitsplatz .mint-aktionen-rechts { display: flex; gap: .5rem; margin-left: auto; }

/* Suchfelder nebeneinander, gleich breit, ueber die volle Breite der Kachel. */
.mint-arbeitsplatz .mint-suche-felder {
  display: flex; flex-wrap: wrap; gap: 1rem;
}
.mint-arbeitsplatz .mint-suche-felder > af-field { flex: 1 1 16rem; min-width: 0; }
.mint-arbeitsplatz .mint-suche-felder input { width: 100%; max-width: none; }
.mint-arbeitsplatz .mint-suche .help { margin: .5rem 0 .75rem; }

/* Kacheln in einer Zeile gleich hoch -- nur wenn sie nebeneinander stehen
   (Bootstrap md ab 992px). Darunter stapeln sie sich in voller Breite. */
@media (min-width: 992px) {
  .mint-arbeitsplatz .row { display: flex; flex-wrap: wrap; }
  .mint-arbeitsplatz .row > [class*="col-"] { display: flex; flex-direction: column; }
  .mint-arbeitsplatz .row > [class*="col-"] > .mint-kachel { flex: 1; }
}
/* Tabellen fuellen ihre Kachel. */
.mint-arbeitsplatz .mint-kachel table { width: 100%; }

/* Gleich hohe Kacheln: der weisse Inhalt waechst mit, nicht nur der Rahmen. */
@media (min-width: 992px) {
  .mint-arbeitsplatz .mint-kachel { display: flex; flex-direction: column; }
  .mint-arbeitsplatz .mint-kachel > .panel-body { flex: 1; }
}
/* Datum und Aktions-Links nicht mitten im Wort umbrechen ("Proto-koll"). */
.mint-arbeitsplatz td.text-right,
.mint-arbeitsplatz td.text-right a { white-space: nowrap; hyphens: none; }
.mint-arbeitsplatz td a { hyphens: none; }
.mint-arbeitsplatz .mint-nowrap { white-space: nowrap; }
/* RiverLea trennt Text automatisch; in schmalen Tabellenspalten zerlegt das
   Kopfzeilen und Namen ("Kon-takt", "Inak-tiv"). Hier nicht. */
.mint-arbeitsplatz table { hyphens: manual; }
/* Auswahlfelder (Typ, Art) so breit wie die Textfelder. */
.mint-arbeitsplatz .mint-suche-felder select,
.mint-arbeitsplatz .mint-suche-felder .select2-container { width: 100% !important; }

/* Ehrung: Kriterien als Balken. Die Zelle traegt mint-balken-<0..100>
   (Anteil an der Hoechstpunktzahl, Zehnerschritte). Farbe aus dem Stream. */
.mint-arbeitsplatz td.mint-balken { min-width: 10rem; background-repeat: no-repeat; background-size: calc(100% - 1rem) .75rem; background-position: .5rem center;
  background-image: linear-gradient(to right, var(--crm-c-primary, #007a66) var(--mint-anteil, 0%), var(--crm-c-background3, #e7e5e0) var(--mint-anteil, 0%)); }
.mint-arbeitsplatz td.mint-balken-0 { --mint-anteil: 0%; }
.mint-arbeitsplatz td.mint-balken-10 { --mint-anteil: 10%; }
.mint-arbeitsplatz td.mint-balken-20 { --mint-anteil: 20%; }
.mint-arbeitsplatz td.mint-balken-30 { --mint-anteil: 30%; }
.mint-arbeitsplatz td.mint-balken-40 { --mint-anteil: 40%; }
.mint-arbeitsplatz td.mint-balken-50 { --mint-anteil: 50%; }
.mint-arbeitsplatz td.mint-balken-60 { --mint-anteil: 60%; }
.mint-arbeitsplatz td.mint-balken-70 { --mint-anteil: 70%; }
.mint-arbeitsplatz td.mint-balken-80 { --mint-anteil: 80%; }
.mint-arbeitsplatz td.mint-balken-90 { --mint-anteil: 90%; }
.mint-arbeitsplatz td.mint-balken-100 { --mint-anteil: 100%; }
.mint-ehrungen-aktuell table { margin-bottom: 0; }
/* Breite Tabellen scrollen in ihrer Kachel statt ueber den Rand zu ragen. */
.mint-arbeitsplatz .panel-body { overflow-x: auto; }

/* Kachelkopf mit Aktion rechts (z. B. "Ehrungsliste" an der Signets-Kachel). */
.mint-arbeitsplatz .mint-kopf-mit-aktion { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }

/* Oeffentliche Startseite und Formulare. */
.mint-start { max-width: 60rem; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); box-sizing: border-box; }
.mint-start-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.mint-start-kopf .lead { margin: 0; font-size: 1.15rem; }
.mint-start-team { text-align: right; font-size: .9rem; margin-top: 1rem; }

/* Formulare (Botschafter-Registrierung): schmale, zentrierte Spalte; die
   Abschnitte ("Ihre Angaben", "Ueber Sie") sind die Karten -- kein Rahmen
   aussen herum. Innenabstand der Karten bleibt erhalten. */
.mint-formular { max-width: 46rem; margin: 0 auto; }
.mint-formular fieldset.af-container { padding: 1.5rem 1.75rem 1rem !important; margin: 0 0 1.25rem !important; border-radius: 6px; }
.mint-formular fieldset.af-container > legend, .mint-formular .af-title { font-size: 1.15rem; font-weight: 700; margin: 0 0 1rem; padding: 0; }
.mint-formular .af-layout-inline, .mint-formular [af-join] { padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
.mint-formular .af-layout-inline { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0 1.25rem !important; }
@media (max-width: 600px) { .mint-formular .af-layout-inline { grid-template-columns: 1fr !important; } }
.mint-formular .af-layout-inline > af-field { width: auto !important; max-width: none !important; flex: none !important; margin-right: 0 !important; }
.mint-formular af-field { display: block; margin: 0 0 1rem !important; }
.mint-formular af-field .form-group { margin: 0 !important; }
.mint-formular af-field label { margin-bottom: .3rem; }
.mint-formular af-field > div, .mint-formular af-field .crm-af-field,
.mint-formular af-field .form-control, .mint-formular af-field input:not([type=checkbox]), .mint-formular af-field select,
.mint-formular af-field textarea, .mint-formular af-field .select2-container { width: 100% !important; max-width: none !important; box-sizing: border-box; }
.mint-formular textarea { min-height: 7rem; }
.mint-formular .af-button { margin: .25rem 0 0 1.75rem; }

/* Auswertungen: Diagramme in zwei Spalten, auf schmalen Bildschirmen eine. */
.mint-auswertungen .mint-diagramme { display: grid; grid-template-columns: repeat(auto-fit, minmax(36rem, 1fr)); gap: 1.5rem; }
.mint-auswertungen .mint-diagramme > * { min-width: 0; overflow-x: auto; }

/* Danke-Seite nach dem Absenden. */
.mint-danke-karte { text-align: center; padding: 2.5rem 2rem; border-radius: 6px; background: var(--crm-c-success-light, #e6f6f1);
  border: 1px solid var(--crm-c-primary, #007a66); }
.mint-danke-karte > .crm-i { font-size: 3rem; color: var(--crm-c-primary, #007a66); }
.mint-danke-karte h2 { margin: .75rem 0 .5rem; font-size: 1.6rem; }
.mint-danke-karte p { font-size: 1.1rem; max-width: 34rem; margin: 0 auto 1rem; }

/* Startseite auf dem Handy: Veranstaltungen als Karten statt Tabelle, damit
   "Anmelden" nicht aus dem Bildschirm laeuft. */
@media (max-width: 640px) {
  .mint-start .panel-body { padding: 1rem; }
  .mint-start table thead { display: none; }
  .mint-start table, .mint-start table tbody, .mint-start table tr, .mint-start table td { display: block; width: 100%; box-sizing: border-box; }
  .mint-start table tr { padding: .9rem 1rem; border-bottom: 1px solid var(--crm-c-divider, #dcd8d0); background: transparent !important; }
  .mint-start table td { padding: .1rem 0 !important; border: 0 !important; text-align: left !important; white-space: normal; }
  .mint-start table td:first-child { font-size: .9rem; color: var(--crm-c-gray-700, #56656c); }
  .mint-start table td:nth-child(2) { font-weight: 600; font-size: 1.05rem; }
  .mint-start table td.crm-search-col-type-buttons { margin-top: .5rem; }
  .mint-start table td.crm-search-col-type-buttons .btn { width: 100%; justify-content: center; }
  .mint-start-kopf .btn { width: 100%; white-space: normal; }
  .mint-start-team { text-align: center; }
  .mint-formular { padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); }
  .mint-formular fieldset.af-container { padding: 1.1rem 1rem .5rem !important; }
  .mint-formular .af-button { margin-left: 0; width: 100%; }
}

/* Arbeitsplatz-Kopf auf dem Handy: zwei Menues ("Neu anlegen", "Mehr")
   statt acht bildschirmbreiter Knoepfe. Natives <details>, kein JavaScript. */
.mint-arbeitsplatz .mint-aktionen-handy { display: none; }
@media (max-width: 640px) {
  .mint-arbeitsplatz .mint-aktionen-handy ~ .mint-aktionen { display: none; }
  .mint-arbeitsplatz .mint-aktionen-handy { display: flex; gap: .5rem; position: relative; margin: 0 0 1rem; }
  .mint-menue { flex: 1 1 0; min-width: 0; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
  .mint-menue > summary::before, .mint-menue > summary::after { content: none !important; display: none !important; }
  .mint-menue > summary { padding: .55rem .5rem !important; white-space: nowrap; overflow: hidden; box-sizing: border-box; display: flex !important; width: 100% !important; min-width: 0 !important; max-width: none !important; font-size: .95rem; justify-content: center; align-items: center; gap: .35rem; list-style: none; cursor: pointer; margin: 0; }
  .mint-menue > summary::-webkit-details-marker { display: none; }
  .mint-menue > summary .crm-i { width: auto !important; min-width: 0 !important; flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; }
  .mint-menue[open] > summary .fa-caret-down { transform: rotate(180deg); }
  .mint-menue-liste { position: absolute; left: 0; right: 0; top: calc(100% + .35rem); z-index: 20;
    background: var(--crm-c-page-background, #fff); border: 1px solid var(--crm-c-divider, #dcd8d0); border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0,0,0,.15); padding: .25rem 0; }
  .mint-menue-liste a { display: flex; align-items: center; gap: .75rem; padding: .8rem 1rem; text-decoration: none; font-size: 1.05rem; }
  .mint-menue-liste a + a { border-top: 1px solid var(--crm-c-divider, #dcd8d0); }
  .mint-menue-liste a .crm-i { width: 1.25rem; text-align: center; color: var(--crm-c-primary, #007a66); }

  /* Tabellen als Karten: erste Spalte fett, der Rest klein darunter, mit
     Punkt getrennt. Kopfzeile (und damit Sortieren) entfaellt auf dem Handy. */
  .mint-handy-karten .mint-kachel .panel-body { padding: .75rem; overflow-x: visible; }
  .mint-handy-karten .mint-kachel table thead { display: none; }
  .mint-handy-karten .mint-kachel table, .mint-handy-karten .mint-kachel table tbody { display: block; width: 100%; }
  .mint-handy-karten .mint-kachel table tr { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .5rem; row-gap: .1rem;
    padding: .7rem .25rem; border-bottom: 1px solid var(--crm-c-divider, #dcd8d0); }
  .mint-handy-karten .mint-kachel table td { display: block; padding: 0 !important; border: 0 !important; background: transparent !important;
    text-align: left !important; white-space: normal !important; overflow-wrap: anywhere; min-width: 0; font-size: .92rem; }
  .mint-handy-karten .mint-kachel table td:first-child { flex: 1 0 100%; font-weight: 600; font-size: 1rem; }
  .mint-handy-karten .mint-kachel table td:not(:first-child):not(:last-child):not(:empty)::after { content: "·"; margin-left: .5rem; color: var(--crm-c-gray-500, #8a9499); }
  .mint-handy-karten .mint-kachel table td:empty { display: none; }
  .mint-handy-karten .mint-kachel table td:has(+ td.crm-search-col-type-links)::after,
  .mint-handy-karten .mint-kachel table td:has(+ td.crm-search-col-type-buttons)::after,
  .mint-handy-karten .mint-kachel table td:has(+ td.crm-search-col-type-menu)::after { content: none !important; }
  .mint-handy-karten .mint-kachel table td.crm-search-col-type-links,
  .mint-handy-karten .mint-kachel table td.crm-search-col-type-buttons,
  .mint-handy-karten .mint-kachel table td.crm-search-col-type-menu { flex-basis: 100%; }
  .mint-handy-karten .mint-kachel table td[colspan] { flex-basis: 100%; font-weight: normal; }
  .mint-handy-karten .mint-kachel table td input[type=checkbox] { margin-right: .5rem; }
}

/* Ehrungsliste auf dem Handy: Haken + Schule in eine Zeile, dann nur das
   Wesentliche (Ort, Auszeichnung, Jahr, Bewerbung, Ergebnis, gueltig bis).
   Region, Stufe, Punkte, Adresse, E-Mail stehen im Export. */
@media (max-width: 640px) {
  .mint-ehrungsliste .mint-kachel table td:first-child { flex: 0 0 auto; font-weight: normal; }
  .mint-ehrungsliste .mint-kachel table td:nth-child(2),
  .mint-ehrungsliste .mint-kachel table td:nth-child(8),
  .mint-ehrungsliste .mint-kachel table td:nth-child(10),
  .mint-ehrungsliste .mint-kachel table td:nth-child(n+12) { display: none; }
  .mint-ehrungsliste .mint-kachel table td:nth-child(3) { flex: 1 1 calc(100% - 2.5rem); font-weight: 600; font-size: 1rem; }
  .mint-ehrungsliste .mint-kachel table td:nth-child(3)::after,
  .mint-ehrungsliste .mint-kachel table td:nth-child(11)::after { content: none !important; }
}

/* Ehrung: Notizen ohne Tabellenkopf und Rahmen. */
.mint-notizen table thead { display: none; }
.mint-notizen table, .mint-notizen .crm-search-display { border: 0 !important; box-shadow: none !important; background: none !important; }
.mint-notizen table td { border: 0 !important; padding: 0 !important; }