/* de-form-extras.css
 * FF3 (Selector Styling, 2026-05-09) — Werktagerechner.de DE-port supplements.
 *
 * Provides styling for selector / toggle / segment patterns introduced in the DE
 * handlers (Bundesland <select>, Werktag/Arbeitstag radio, 3-col pf-grid, generic
 * segment-selector) that the existing FR CSS files do not cover.
 *
 * Strategy: extends the .pf-* namespace from calculatrices-modernes.css with the
 * variants .pf-grid--3, .pf-radio-group, .pf-radio, .pf-form. Adds top-level
 * .segment-selector / .segment-btn so countdown.php, ostern-rechner.php and
 * datumsrechner.php (renamed id #tipo-prazo-selector) render styled.
 *
 * Also normalises bare <select> / <select class="bl-select|form-control|form-select">
 * inside .form-group via global rules (already in bundle-core.css). Here we only add
 * the missing extras.
 *
 * Light + Dark mode rules included.
 */

/* ============================================================
   pf-form: form wrapper (no padding, just spacing scope).
   ============================================================ */
.pf-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
}

/* ============================================================
   pf-grid--3: 3-column variant (responsive).
   Used by arbeitstage-rechner, werktage-rechner, letzter-werktag-im-monat,
   naechster-werktag, arbeitstag-nummer, brueckentage-rechner.
   ============================================================ */
.pf-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 720px) {
    .pf-grid--3 {
        grid-template-columns: 1fr;
    }
}

/* pf-input on <select> needs the appearance reset + chevron, otherwise
   it renders as a native browser dropdown without indicator. */
select.pf-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 36px;
    background-image:
        linear-gradient(45deg, transparent 50%, #475569 50%),
        linear-gradient(135deg, #475569 50%, transparent 50%);
    background-position:
        calc(100% - 18px) calc(50% - 2px),
        calc(100% - 13px) calc(50% - 2px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    cursor: pointer;
}

body.dark-mode select.pf-input {
    background-image:
        linear-gradient(45deg, transparent 50%, #cbd5e1 50%),
        linear-gradient(135deg, #cbd5e1 50%, transparent 50%);
}

/* ============================================================
   pf-radio-group / pf-radio: inline radio toggle for Werktag/Arbeitstag.
   Uses pill style aligned with .pf-chip for visual coherence.
   ============================================================ */
.pf-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    border: 0;
    padding: 0;
    margin: 0;
}

.pf-radio-group > legend.pf-label {
    flex: 0 0 100%;
    margin-bottom: 4px;
    padding: 0;
}

.pf-radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid #cfd8e3;
    border-radius: 999px;
    background: #fff;
    color: #2a3d58;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 120ms, background 120ms, color 120ms, box-shadow 120ms;
    margin: 0 !important;
}

.pf-radio:hover {
    border-color: #0b5cad;
    color: #0b5cad;
    background: #eff5fc;
}

.pf-radio input[type="radio"] {
    margin: 0;
    accent-color: #0b5cad;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.pf-radio:has(input[type="radio"]:checked) {
    border-color: #0b5cad;
    background: #0b5cad;
    color: #fff;
    box-shadow: 0 2px 8px rgba(11, 92, 173, 0.18);
}

.pf-radio:has(input[type="radio"]:focus-visible) {
    outline: 2px solid #0b5cad;
    outline-offset: 2px;
}

body.dark-mode .pf-radio {
    background: #0f172a;
    border-color: #334155;
    color: #cbd5e1;
}

body.dark-mode .pf-radio:hover {
    background: #172033;
    border-color: #7dd3fc;
    color: #bae6fd;
}

body.dark-mode .pf-radio:has(input[type="radio"]:checked) {
    background: #0a84ff;
    border-color: #0a84ff;
    color: #fff;
}

/* ============================================================
   Generic .segment-selector + .segment-btn
   Used by datumsrechner (#tipo-prazo-selector), countdown, ostern-rechner.
   tagezaehler / tage-zwischen-daten already get this via their tool css.
   ============================================================ */
.segment-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid var(--border-color, #d2d2d7);
    background: var(--light-bg, #f5f5f7);
    padding: 4px;
}

.segment-btn {
    flex: 1 1 auto;
    padding: 10px 14px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--secondary-color, #475569);
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
}

.segment-btn.active,
.segment-btn[aria-pressed="true"] {
    background: var(--primary-color, #0b5cad);
    color: #fff;
    box-shadow: 0 2px 8px rgba(11, 92, 173, 0.22);
}

.segment-btn:not(.active):not([aria-pressed="true"]):hover {
    background: rgba(11, 92, 173, 0.08);
    color: var(--primary-color, #0b5cad);
}

.segment-btn:focus-visible {
    outline: 2px solid var(--primary-color, #0b5cad);
    outline-offset: 2px;
}

body.dark-mode .segment-selector {
    border-color: #3a3a3c;
    background: #1c1c1e;
}

body.dark-mode .segment-btn {
    color: #cbd5e1;
}

body.dark-mode .segment-btn.active,
body.dark-mode .segment-btn[aria-pressed="true"] {
    background: #0a84ff;
    color: #fff;
}

body.dark-mode .segment-btn:not(.active):not([aria-pressed="true"]):hover {
    background: rgba(10, 132, 255, 0.18);
    color: #7dd3fc;
}

/* ============================================================
   Fallback styling for plain <select> (bl-select, form-control, form-select)
   not wrapped in .form-group. Keeps native chevron via appearance reset
   and ensures parity with .form-group select rules in bundle-core.css.
   ============================================================ */
.bl-select,
select.form-control,
select.form-select {
    width: 100%;
    padding: 12px 42px 12px 15px;
    border: 1px solid var(--border-color, #d2d2d7);
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 1em;
    background-color: var(--content-bg, #fff);
    color: var(--text-color, #1d1d1f);
    font-family: inherit;
    transition: border-color 200ms ease, box-shadow 200ms ease, background-color 300ms, color 300ms;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, #475569 50%),
        linear-gradient(135deg, #475569 50%, transparent 50%);
    background-position:
        calc(100% - 20px) calc(50% - 2px),
        calc(100% - 14px) calc(50% - 2px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    cursor: pointer;
}

.bl-select:focus,
select.form-control:focus,
select.form-select:focus {
    outline: 2px solid var(--primary-color, #0b5cad);
    outline-offset: 1px;
    border-color: var(--primary-color, #0b5cad);
    box-shadow: 0 0 0 3px rgba(11, 92, 173, 0.30);
}

body.dark-mode .bl-select,
body.dark-mode select.form-control,
body.dark-mode select.form-select {
    background-color: #3a3a3c;
    border-color: #545458;
    color: #f5f5f7;
    background-image:
        linear-gradient(45deg, transparent 50%, #cbd5e1 50%),
        linear-gradient(135deg, #cbd5e1 50%, transparent 50%);
}

/* ============================================================
   .kalender-controls inline selectors
   Used by in-n-tagen.php, tage-im.php, tage-bis-jahresende.php,
   feiertage-deutschland.php (year+BL navigation strip). Inline
   styles already make them visible; this gives them parity.
   ============================================================ */
.kalender-controls {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.kalender-controls label {
    font-weight: 600;
    margin-right: 6px;
    color: var(--text-color, #1d1d1f);
}

.kalender-controls select {
    padding: 8px 36px 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color, #cbd5e1);
    background-color: var(--content-bg, #fff);
    color: var(--text-color, #1d1d1f);
    font-size: 0.95rem;
    font-family: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, #475569 50%),
        linear-gradient(135deg, #475569 50%, transparent 50%);
    background-position:
        calc(100% - 16px) calc(50% - 2px),
        calc(100% - 11px) calc(50% - 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

.kalender-controls select:focus {
    outline: 2px solid var(--primary-color, #0b5cad);
    outline-offset: 1px;
    border-color: var(--primary-color, #0b5cad);
    box-shadow: 0 0 0 3px rgba(11, 92, 173, 0.25);
}

body.dark-mode .kalender-controls select {
    background-color: #3a3a3c;
    border-color: #545458;
    color: #f5f5f7;
    background-image:
        linear-gradient(45deg, transparent 50%, #cbd5e1 50%),
        linear-gradient(135deg, #cbd5e1 50%, transparent 50%);
}

/* ============================================================
   FX5 fix (2026-05-09): Zusammenfassung panel sizing.
   --------------------------------------------------------------
   On datumsrechner / tagezaehler / tage-zwischen-daten the inputs
   column has 5+ form groups (Bundesland, Tagestyp, Optionen, etc.)
   so the column reaches ~600-700px. The summary panel sits in the
   adjacent column inside .sidebar-panel-stack which has a fixed
   min-height: 440px. With grid `align-items: start` the panel
   stops at 440px, leaving the rest of the column empty below.
   Visual symptom (user 2026-05-09): "Zusammenfassung fora do
   lugar / menor, nao cobrindo todo espaco abaixo".
   --------------------------------------------------------------
   Reference (working analog): altersrechner.php only has 3 short
   form groups, so its inputs column is naturally ~440px tall and
   the panel matches by coincidence. Single CSS class touch needed:
   stretch the panel stack to fill its column.
   --------------------------------------------------------------
   Loaded by: datumsrechner, tagezaehler, tage-zwischen-daten
   (all three load de-form-extras.css). NOT loaded by altersrechner
   so the fix is safe for the working reference too.
   ============================================================ */
@media (min-width: 981px) {
    .frist-calculator-grid,
    .zaehler-grid,
    .dias-entre-datas-grid {
        align-items: stretch !important;
    }

    .frist-calendar-column,
    .zaehler-calendar-column,
    .dias-entre-datas-calendar-column {
        height: 100%;
    }

    /* Stretch the panel stack to fill the column height (still keeping
       the 440px floor from each tool CSS via min-height). */
    .frist-calendar-column .sidebar-panel-stack,
    .zaehler-calendar-column .sidebar-panel-stack,
    .dias-entre-datas-calendar-column .sidebar-panel-stack {
        height: 100%;
    }
}