/*
 * Small site-specific overrides, kept separate from the vendor theme
 * (app.min.css) so they survive a theme update.
 */

/* Segmented toggle buttons (Tabelle/Zeitachse, Hatten schon Einsätze/Noch
   nie im Einsatz, Reminder-Kategorien, ...): rendered as separate pill
   buttons instead of Bootstrap's default joined btn-group look, to match
   the purple pill buttons used everywhere else in the app. */
.pill-toggle.btn-group {
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.pill-toggle.btn-group .btn {
    /* !important on both: Bootstrap's .btn-group > .btn:not(:last-child){
       border-top-right-radius:0; ...} (and the matching :not(:first-child)
       rule) targets inner corners specifically and outranks a plain
       .pill-toggle.btn-group .btn selector, so the gap we added between
       pills left their inner edges square instead of rounded. Same story
       for the -1px joining margin. */
    border-radius: 30px !important;
    margin: 0 !important;
    box-shadow: none;
}

.pill-toggle.btn-group .btn.btn-outline-primary {
    background-color: #fff;
    border: 1px solid #9c27b0;
    color: #9c27b0;
}

.pill-toggle.btn-group .btn.btn-outline-primary:hover {
    background-color: rgba(156, 39, 176, .08);
}

.pill-toggle.btn-group .btn.btn-primary.active {
    background-color: #9c27b0;
    border-color: #9c27b0;
    color: #fff;
    box-shadow: 0 2px 2px 0 rgba(156, 39, 176, .14), 0 3px 1px -2px rgba(156, 39, 176, .2), 0 1px 5px 0 rgba(156, 39, 176, .12);
}

/* Winterpneu / Getriebe radio choices in "Neuen Auftrag erfassen"
   (Telefonist:in + Disponent/Einsatzleiter modal): plain unstyled browser
   radio dots there, since this dynamically loaded modal content never gets
   the Material Dashboard widget JS that styles radios elsewhere. Same pill
   look as the toggle buttons above, pure CSS so it works regardless of
   that JS. Scoped by field name so no other radio/checkbox group is
   affected. */
input.form-check-input[name="job[winterTires]"],
input.form-check-input[name="job[gearbox]"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

input.form-check-input[name="job[winterTires]"] + label,
input.form-check-input[name="job[gearbox]"] + label {
    display: inline-block;
    padding: 6px 18px;
    margin: 4px 8px 4px 0;
    border-radius: 30px;
    border: 1px solid #9c27b0;
    background-color: #fff;
    color: #9c27b0;
    font-weight: 400;
    cursor: pointer;
}

input.form-check-input[name="job[winterTires]"]:checked + label,
input.form-check-input[name="job[gearbox]"]:checked + label {
    background-color: #9c27b0;
    color: #fff;
    box-shadow: 0 2px 2px 0 rgba(156, 39, 176, .14), 0 3px 1px -2px rgba(156, 39, 176, .2), 0 1px 5px 0 rgba(156, 39, 176, .12);
}

input.form-check-input[name="job[winterTires]"]:focus-visible + label,
input.form-check-input[name="job[gearbox]"]:focus-visible + label {
    outline: 2px solid #9c27b0;
    outline-offset: 2px;
}