/* ---------------------------------------------------------------------------
 * Kapazitaetsplanung FFB (Brackenheim) - Gestaltung
 *
 * Gilt AUSSCHLIESSLICH fuer templates/brackenheim/kappaplanungFFB.html.twig.
 * Wird dort am Ende des body-Blocks eingebunden, NICHT in base.html.twig -
 * die uebrigen Standorte bleiben dadurch unveraendert.
 *
 * Grundlage: FEURER Corporate Identity - ruhige industrielle B2B-Aesthetik,
 * helle Flaechen, blaugraue Struktur, Rot ausschliesslich als Statusakzent.
 * ------------------------------------------------------------------------- */

/* Die Werte stehen auf :root und nicht auf .kp-page, weil Bootstrap die
 * Dialogfenster ausserhalb des Seiten-Containers einhaengt - dort waeren sie
 * sonst nicht sichtbar. Diese Datei wird nur von kappaplanungFFB.html.twig
 * geladen, die uebrigen Seiten sehen diese Werte also nie. */
:root {
    /* Flaechen */
    --kp-plane:      #f4f6f7;   /* Seitenhintergrund               */
    --kp-surface:    #fbfcfc;   /* Karten, Diagrammflaeche         */
    --kp-surface-2:  #eef1f3;   /* zurueckgenommene Flaeche        */

    /* Schrift */
    --kp-ink:        #17222a;   /* Haupttext                       */
    --kp-ink-2:      #4a5b66;   /* Nebentext                       */
    --kp-ink-muted:  #7a8d9b;   /* Achsen, Hilfstexte - FEURER-Blaugrau */

    /* Linien */
    --kp-line:       #e3e8ea;   /* Raster, feine Trenner           */
    --kp-line-2:     #c7d0d5;   /* Rahmen, Achsen                  */

    /* Status - nur hier ist Rot erlaubt */
    --kp-critical:   #d03b3b;
    --kp-warning:    #fab219;
    --kp-good:       #0ca30c;

    --kp-radius:     6px;
    --kp-shadow:     0 1px 2px rgba(23, 34, 42, .06), 0 1px 8px rgba(23, 34, 42, .04);
}

.kp-page {
    background: var(--kp-plane);
    color: var(--kp-ink);
    min-height: calc(100vh - 90px);
    padding-bottom: 1rem;
}

/* --- Kopfleiste --------------------------------------------------------- */

.kp-toolbar {
    display: flex;
    align-items: flex-end;
    gap: .75rem;
    flex-wrap: wrap;
    background: var(--kp-surface);
    border: 1px solid var(--kp-line);
    border-radius: var(--kp-radius);
    box-shadow: var(--kp-shadow);
    padding: .75rem 1rem;
    margin-bottom: .75rem;
}

/* Markenblock.
 *
 * Die Flaeche ist in beiden Themen weiss. Grund: die Originaldateien haben
 * weissen bzw. transparenten Hintergrund, und die CI verbietet ausdruecklich,
 * Logos umzufaerben oder freizustellen. Weiss ist zugleich der bevorzugte
 * Hintergrund beider Marken - auf dunklem Grund waere das FLEXILITY-JPEG sonst
 * ein weisser Kasten mitten im Layout.
 *
 * Die Hoehen sind so gewaehlt, dass beide Wortmarken gleich gross wirken:
 * das FEURER-Asset ist randlos (362x91), das FLEXILITY-Asset traegt rund
 * zwei Drittel Weissraum als Schutzzone (Inhalt 2408x328 in 3000x910).
 */
.kp-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: #ffffff;
    border: 1px solid #e3e8ea;
    border-radius: var(--kp-radius);
    padding: .3rem .7rem;
    flex: 0 0 auto;
}

.kp-brand img {
    display: block;
    width: auto;
    max-width: 100%;
}

.kp-brand__feurer {
    height: 26px;
}

.kp-brand__flexility {
    height: 36px;
}

.kp-brand__sep {
    width: 1px;
    align-self: stretch;
    margin: .15rem 0;
    background: #dde2e5;
}

.kp-toolbar__title {
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--kp-ink);
    margin: 0 auto 0 .25rem;
    line-height: 2.4rem;
    white-space: nowrap;
}

.kp-toolbar__group {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
}

/* Trenner zwischen Bedien- und Nebenfunktionen */
.kp-toolbar__sep {
    width: 1px;
    align-self: stretch;
    background: var(--kp-line);
    margin: 0 .25rem;
}

.kp-range {
    min-width: 230px;
}

.kp-range .form-label {
    font-size: .75rem;
    font-weight: 500;
    color: var(--kp-ink-2);
    margin-bottom: .25rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.kp-range .form-label span {
    font-variant-numeric: tabular-nums;
    color: var(--kp-ink);
    font-weight: 600;
}

.kp-page .form-range {
    height: 1.4rem;
}

.kp-page .form-range::-webkit-slider-thumb { background: var(--kp-ink-muted); }
.kp-page .form-range::-moz-range-thumb     { background: var(--kp-ink-muted); border: 0; }
.kp-page .form-range::-webkit-slider-runnable-track { background: var(--kp-line); height: .3rem; }
.kp-page .form-range::-moz-range-track              { background: var(--kp-line); height: .3rem; }

/* --- Schaltflaechen ------------------------------------------------------ */

.kp-page .btn {
    --bs-btn-font-size: .8125rem;
    --bs-btn-font-weight: 500;
    --bs-btn-padding-y: .4rem;
    --bs-btn-padding-x: .85rem;
    --bs-btn-border-radius: var(--kp-radius);
    box-shadow: none;
}

/* Eine Hauptaktion, der Rest zurueckgenommen - statt vier bunter Knoepfe */
.kp-page .btn-primary {
    --bs-btn-bg: #1654a9;
    --bs-btn-border-color: #1654a9;
    --bs-btn-hover-bg: #11468d;
    --bs-btn-hover-border-color: #11468d;
    --bs-btn-active-bg: #0e3c7a;
}

.kp-page .btn-outline-secondary {
    --bs-btn-color: var(--kp-ink-2);
    --bs-btn-border-color: var(--kp-line-2);
    --bs-btn-bg: var(--kp-surface);
    --bs-btn-hover-color: var(--kp-ink);
    --bs-btn-hover-bg: var(--kp-surface-2);
    --bs-btn-hover-border-color: var(--kp-ink-muted);
    --bs-btn-active-bg: var(--kp-surface-2);
    --bs-btn-active-color: var(--kp-ink);
    --bs-btn-active-border-color: var(--kp-ink-muted);
}

.kp-page .btn-link {
    --bs-btn-color: var(--kp-ink-muted);
    --bs-btn-hover-color: var(--kp-ink);
    text-decoration: none;
    font-size: .8125rem;
}

/* --- Diagrammflaeche ----------------------------------------------------- */

.kp-chart-card {
    background: var(--kp-surface);
    border: 1px solid var(--kp-line);
    border-radius: var(--kp-radius);
    box-shadow: var(--kp-shadow);
    padding: .5rem .5rem .25rem;
}

.kp-page .highcharts-figure {
    margin: 0;
}

/* --- Klickbarkeit der Bloecke -------------------------------------------
 *
 * Alles, was ueber einem Balken liegen kann, muss fuer die Maus durchlaessig
 * sein - sonst faengt es den Klick ab und der Balken laesst sich nicht oeffnen.
 *
 * Der wichtigste Fall ist der Tooltip: main.css gibt ihm
 * `pointer-events: auto !important`, damit man seinen Text markieren kann.
 * Er wird oberhalb des Balkens gezeichnet; ist dort kein Platz, klemmt
 * Highcharts ihn an den oberen Rand - und dann liegt er AUF dem Balken.
 * Betroffen war vor allem die oberste Zeile. Frueher wurde das mit einer
 * leeren Fuellzeile ganz oben umgangen; diese Loesung haengt aber davon ab,
 * wie viele Personen angezeigt werden und wie hoch der Tooltip gerade ist.
 *
 * Ein eigener Positionierer half nicht: Highcharts verwirft dessen Ergebnis,
 * wenn der Tooltip sonst aus dem Diagramm ragen wuerde. Deshalb wird der
 * Tooltip hier grundsaetzlich fuer die Maus durchlaessig gemacht. Er bleibt
 * vollstaendig sichtbar und lesbar - nur Text markieren geht in ihm nicht
 * mehr. Dieselben Angaben stehen im Bearbeiten-Dialog in einer Tabelle und
 * sind dort markierbar.
 */
.kp-page .highcharts-tooltip,
.kp-page .highcharts-tooltip.selectable-tooltip,
.kp-page .highcharts-tooltip.selectable-tooltip * {
    pointer-events: none !important;
}

/* Gitterlinien und Beschriftungen liegen ueber den Bloecken, damit die
   Tagestrennung sichtbar bleibt. Fuer die Maus muessen sie durchlaessig sein -
   sonst laesst sich ein schmaler Block genau dort nicht anklicken. */
.kp-page .highcharts-grid-line,
.kp-page .highcharts-axis-line,
.kp-page .highcharts-tick,
.kp-page .highcharts-data-label,
.kp-page .highcharts-data-label text {
    pointer-events: none;
}

/* Feiertagsfahne: das globale main.css faerbt sie beerenrot ein.
   Hier zurueckgenommen, damit Rot dem Status vorbehalten bleibt. */
.kp-page .hc-holiday-band-label {
    background: rgba(250, 178, 25, .18);
    color: #7a5300;
    box-shadow: 0 0 0 1px rgba(250, 178, 25, .45) inset;
    font-weight: 500;
}

/* Tooltip der Plantafel */
.kp-page .highcharts-tooltip > span {
    background: var(--kp-surface);
    border: 1px solid var(--kp-line-2);
    border-radius: var(--kp-radius);
    box-shadow: 0 4px 16px rgba(23, 34, 42, .14);
    padding: .5rem .65rem;
    color: var(--kp-ink);
    font-size: .8125rem;
    line-height: 1.45;
}

/* --- Dialogfenster ------------------------------------------------------- */

.kp-modal .modal-content {
    border: 1px solid var(--kp-line-2);
    border-radius: var(--kp-radius);
    box-shadow: 0 12px 40px rgba(23, 34, 42, .18);
    background: var(--kp-surface);
}

.kp-modal .modal-header {
    background: var(--kp-surface);
    border-bottom: 1px solid var(--kp-line);
    padding: .85rem 1.15rem;
}

.kp-modal .modal-title {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--kp-ink);
    letter-spacing: -.01em;
}

.kp-modal .modal-body {
    padding: 1.15rem;
}

.kp-modal .modal-footer {
    background: var(--kp-surface-2);
    border-top: 1px solid var(--kp-line);
    padding: .75rem 1.15rem;
}

/* Feldgruppen - das ist der eigentliche Gewinn an Uebersicht:
   statt neun gleichrangiger Felder untereinander vier benannte Bloecke. */
.kp-fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 1.15rem;
}

.kp-fieldset:last-of-type {
    margin-bottom: 0;
}

.kp-fieldset__legend {
    float: none;
    width: auto;
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--kp-ink-muted);
    padding: 0 0 .4rem;
    margin: 0 0 .65rem;
    border-bottom: 1px solid var(--kp-line);
}

.kp-modal .form-label {
    font-size: .75rem;
    font-weight: 500;
    color: var(--kp-ink-2);
    margin-bottom: .25rem;
}

.kp-modal .form-control,
.kp-modal .form-select {
    border-color: var(--kp-line-2);
    border-radius: 4px;
    color: var(--kp-ink);
    font-size: .8125rem;
}

.kp-modal .form-control:focus,
.kp-modal .form-select:focus {
    border-color: #1654a9;
    box-shadow: 0 0 0 3px rgba(22, 84, 169, .16);
}

.kp-modal .form-text {
    font-size: .75rem;
    color: var(--kp-ink-muted);
}

/* Titel des ausgewaehlten Auftrags */
.kp-modal .edit-order-title {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    color: var(--kp-ink);
    padding-bottom: .85rem;
    margin-bottom: 1.15rem;
    border-bottom: 1px solid var(--kp-line);
}

/* Vorschau der Zeile, die nach Abas geschrieben wird */
.kp-modal .abas-preview {
    min-height: 2.1rem;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: .75rem;
    line-height: 1.5;
    white-space: pre-wrap;
    color: var(--kp-ink-2);
    background: var(--kp-surface-2);
    border: 1px solid var(--kp-line);
    border-radius: 4px;
    padding: .45rem .6rem;
}

.kp-modal .create-time-preview {
    min-height: 2.1rem;
    color: var(--kp-ink-2);
    border-left: 2px solid var(--kp-line-2);
    padding: .1rem 0 .1rem .7rem;
    margin-top: 1.6rem;
}

/* Der Schalter "Mail an PV" - vorher eine grosse Wippe mitten im Formular */
.kp-switch {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .7rem;
    background: var(--kp-surface-2);
    border: 1px solid var(--kp-line);
    border-radius: 4px;
}

.kp-modal .kp-switch .form-check-input {
    width: 2.1rem;
    height: 1.1rem;
    margin: 0;
    flex: 0 0 auto;
    border-color: var(--kp-line-2);
}

.kp-modal .kp-switch .form-check-input:checked {
    background-color: #1654a9;
    border-color: #1654a9;
}

.kp-modal .kp-switch .form-check-label {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--kp-ink);
    margin: 0;
}

/* Zusammenklappbarer Bereich fuer selten gebrauchte Angaben */
.kp-details > summary {
    cursor: pointer;
    list-style: none;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--kp-ink-muted);
    padding: .45rem 0;
    border-top: 1px solid var(--kp-line);
}

.kp-details > summary::-webkit-details-marker {
    display: none;
}

.kp-details > summary::before {
    content: "›";
    display: inline-block;
    width: 1rem;
    font-size: 1rem;
    line-height: 1;
    transition: transform .15s ease;
}

.kp-details[open] > summary::before {
    transform: rotate(90deg);
}

/* Detailtabelle der Datenbankfelder */
.kp-modal .detail-table {
    font-size: .75rem;
    margin-bottom: 0;
}

.kp-modal .detail-table th,
.kp-modal .detail-table td {
    border-color: var(--kp-line);
    padding: .4rem .6rem;
    vertical-align: top;
}

.kp-modal .detail-table th {
    width: 34%;
    font-weight: 500;
    color: var(--kp-ink-2);
    background: var(--kp-surface-2);
}

/* Tabelle "Veraltete Auftraege" - vorher ein dunkles Fenster mitten in einer hellen Anwendung */
.kp-modal .kp-stale-table {
    font-size: .8125rem;
    margin-bottom: 0;
}

.kp-modal .kp-stale-table thead th {
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--kp-ink-muted);
    background: var(--kp-surface-2);
    border-bottom: 1px solid var(--kp-line-2);
    white-space: nowrap;
}

.kp-modal .kp-stale-table td {
    border-color: var(--kp-line);
    color: var(--kp-ink);
}

.kp-modal .kp-stale-table tbody tr:hover td {
    background: var(--kp-surface-2);
}

/* Fehlermeldungen */
.kp-modal .alert-danger {
    background: rgba(208, 59, 59, .08);
    border: 1px solid rgba(208, 59, 59, .32);
    color: #8d2020;
    border-radius: 4px;
    font-size: .8125rem;
    padding: .5rem .7rem;
}

/* --- Kleine Bildschirme -------------------------------------------------- */

@media (max-width: 767.98px) {
    .kp-toolbar {
        align-items: stretch;
    }

    /* Auf schmalen Bildschirmen die Marken etwas kleiner, aber im Verhaeltnis */
    .kp-brand__feurer   { height: 22px; }
    .kp-brand__flexility { height: 30px; }

    .kp-toolbar__title {
        margin-bottom: .25rem;
    }

    .kp-toolbar__group {
        flex-wrap: wrap;
    }

    .kp-toolbar__sep {
        display: none;
    }

    .kp-range {
        min-width: 100%;
    }
}

/* --- Druck --------------------------------------------------------------- */

@media print {
    .kp-page {
        background: #fff;
    }

    .kp-toolbar {
        display: none;
    }

    .kp-chart-card {
        border: 0;
        box-shadow: none;
        padding: 0;
    }
}