body {
    background-color: white;
}

h1 > span {
    color: var(--bs-primary);
}

.btn-delete {
    float: right;
    background-color: var(--bs-danger) !important;
    color: white !important;
}

/* Crayon devant le texte de tous les boutons « Modifier » (glyphe .bi-pencil de bootstrap-icons) */
.btn-edit::before {
    content: "\f4cb";
    display: inline-block;
    margin-right: .25rem;
    font-family: bootstrap-icons;
    font-weight: normal;
    line-height: 1;
    vertical-align: -.125em;
}

.btn-add {

}

.btn-back {

}

.btn-show {

}

img.svg_thumb {
    height: 80px;
}

.table-fiche th {
    white-space: nowrap;
    width: 15%;
}

.table-fiche-fixed th {
    white-space: normal;
    width: 300px;
}

/* Clé de licence (cartes "Mes bornes") : hauteur fixe pour que la ligne garde la même taille, que la clé se replie ou non */
.table-fiche td.licence-key-cell {
    height: 3.2rem;
    vertical-align: top;
    word-break: break-all;
}

/* Ligne de titre regroupant plusieurs lignes d'une fiche */
.table-fiche tr.table-fiche-section th {
    width: auto;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    padding-left: 1.5rem;
    background-color: var(--bs-secondary-bg);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}


td.preview svg { height: 250px; width: auto; border:1px solid #999}
td.preview2 svg { height: 250px; width: auto;}


.select-multiple-2cols, .select-multiple-3cols {
    border: 1px solid #DDD;
    border-radius: 5px;
    padding: 8px;
    max-height: 20em;
    overflow-y: scroll;
    /* max-width: 60em; */
}

.select-multiple-2cols div.form-check {
    display: inline-block;
    width: 48%;
}

.select-multiple-3cols div.form-check {
    display: inline-block;
    width: 31%;
}

.licence-unavailable {
    opacity: 0.35;
    cursor: not-allowed;
}

.licence-overlap-warning {
    font-size: 0.85em;
    cursor: help;
}

.template-svg-preview * {
    max-width: 900px;
    max-height: 900px;
}

/* Astérisque rouge pour les champs obligatoires */
label.required::after {
    content: " *";
    color: #dc3545;
}

/* Gabarit preview styles */
.svg-preview, .png-preview {
    border: 2px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
    background-color: #f8f9fa;
    display: inline-block;
    max-width: 100%;
}

.svg-preview svg, .png-preview img {
    max-width: 100%;
    height: auto;
    border: 1px solid #adb5bd;
    background-color: white;
}

.preview-content {
    display: none;
}

.preview-content.active {
    display: block;
}

/* Gabarit tag autocomplete */
.gabarit-settings-panel .ts-wrapper .ts-control .item {
    background: #fff !important;
    color: #303030 !important;
    border: 1px solid #dddddd !important;
    box-shadow: none !important;
}

.gabarit-settings-panel .ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
    border-left: 1px solid #dddddd;
}

/* Gabarit card list */
.gabarit-list .card-body-preview {
    height: 256px;
    background-color: #f8f9fa;
}

.gabarit-list .card-body-preview img {
    max-width: 100%;
    max-height: 100%;
    border: 1px solid #dddddd;
}

.gabarit-list .card-footer .btn {
    font-size: 0.75rem;
    padding: 0.15rem 0.4rem;
}

/* Gabarit source badges (S = system, P = personal) */
.gabarit-badge-system {
    background-color: #6c757d;
}

.gabarit-badge-personal {
    background-color: #0dcaf0;
}

/* Formulaire compact : labels larges, champs réduits */
.form-compact .col-sm-2 {
    width: 40%;
}

.form-compact .col-sm-10 {
    width: 60%;
}

/* Variante pour une carte pleine largeur : labels moins larges */
.form-compact.form-compact-narrow .col-sm-2 {
    width: 25%;
}

.form-compact.form-compact-narrow .col-sm-10 {
    width: 75%;
}

span.tag {
    border: 1px solid #dddddd;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
}

/* Navbar search (Tom Select) */
.navbar-search {
    width: 250px;
}

.navbar-dark .nav-link-strong {
    color: #fff;
    font-weight: 600;
}

.navbar-dark .nav-link-strong:hover,
.navbar-dark .nav-link-strong:focus {
    color: rgba(255, 255, 255, 0.85);
}

.navbar-search .ts-wrapper .ts-control {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: 0.375rem;
    min-height: 0;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

.navbar-search .ts-wrapper .ts-control input {
    color: #fff;
}

.navbar-search .ts-wrapper .ts-control input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.navbar-search .ts-wrapper .ts-control:focus-within {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: none;
}

.navbar-search .ts-wrapper .ts-dropdown {
    font-size: 0.875rem;
}

.navbar-search .ts-wrapper .ts-dropdown .no-results {
    padding: 0.5rem 0.75rem 0.5rem 1.5rem;
    color: #6c757d;
    font-style: italic;
}

@media (max-width: 991.98px) {
    .navbar-search {
        width: 100%;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }
}

.banner-color-picker {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.banner-color-picker__swatch {
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #adb5bd;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    flex-shrink: 0;
}

.banner-color-picker__swatch input[type="color"] {
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    cursor: pointer;
    transform: scale(1.5);
}

.banner-color-picker__hex {
    max-width: 9rem;
    font-family: monospace;
    text-transform: lowercase;
}

/* Sous-options affichées sous leur champ Oui/Non déclencheur : légèrement décalées à droite */
.form-row-sub {
    padding-left: 1.5rem;
}

.table-fiche tr.table-fiche-sub th {
    padding-left: 2rem;
}

/* Titre regroupant plusieurs champs d'un formulaire */
.form-section-title {
    margin: 1.75rem 0 1rem;
    padding: 0.5rem 0.75rem 0.5rem 1.5rem;
    background-color: var(--bs-secondary-bg);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.form-section-title:first-child {
    margin-top: 0;
}

/* Onglets de la fiche événement : bordure un peu plus foncée que celle de Bootstrap */
#photoEventTabs {
    --bs-nav-tabs-border-color: var(--bs-gray-500);
    --bs-nav-tabs-link-hover-border-color: var(--bs-gray-500) var(--bs-gray-500) var(--bs-gray-500);
    --bs-nav-tabs-link-active-border-color: var(--bs-gray-500) var(--bs-gray-500) var(--bs-body-bg);
}

/* Onglets secondaires (alignés à droite) : fond gris pâle pour les distinguer des onglets de paramétrage */
.nav-tabs .nav-item-secondary .nav-link:not(.active) {
    background-color: var(--bs-gray-200);
    border-color: var(--bs-nav-tabs-border-color);
}

/* Calendrier : réservations (couleur par état, annulées hachurées et barrées) */
.fc-event.fc-reservation {
    border-style: dashed;
}
.fc-event.fc-reservation-cancelled {
    background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.08) 0 6px, transparent 6px 12px);
    opacity: 0.8;
}
.fc-event.fc-reservation-cancelled .fc-event-title {
    text-decoration: line-through;
}
.fc-event .fc-reservation-comment {
    font-size: 0.75em;
    font-style: italic;
    opacity: 0.85;
    white-space: pre-line;
    overflow: hidden;
    padding: 0 2px;
}
.fc-daygrid-event .fc-reservation-comment {
    display: none;
}
.calendar-legend-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

/* Couleur de la borne (formulaire licence) : nuancier de pastilles, radios masqués */
.booth-color-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 0.25rem;
}

.booth-color-picker__swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.15);
    cursor: pointer;
    flex-shrink: 0;
}

.booth-color-picker__swatch--none {
    background: linear-gradient(to top right, #fff calc(50% - 1px), var(--bs-danger) 50%, #fff calc(50% + 1px));
}

.booth-color-picker__input:checked + .booth-color-picker__swatch {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--bs-gray-800);
}

.booth-color-picker__input:focus-visible + .booth-color-picker__swatch {
    outline: 2px solid var(--bs-primary);
    outline-offset: 4px;
}

/* ---- Onglet Configuration de la fiche événement ---- */

/* Grand bloc Événement */
/* Bloc Événement en édition : les autres blocs de l'onglet Configuration sont masqués (config-block-edit) */
.config-editing > :not(.config-hero):not(#config-warnings) {
    display: none !important;
}

.config-hero {
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: 1rem;
    overflow: hidden;
    background: var(--bs-body-bg);
    box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .05);
}

.config-hero-header {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: .75rem;
    padding: 1.25rem 1.25rem 1rem;
    background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), .12), rgba(var(--bs-primary-rgb), .02));
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.config-hero-kicker {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bs-primary);
}

.config-hero-title {
    margin: .15rem 0 .35rem;
    font-size: 1.5rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.config-hero-dates {
    color: var(--bs-secondary-color);
}

.config-hero-dates strong {
    color: var(--bs-body-color);
    font-weight: 600;
}

/* État de l'événement, à droite du titre de la page */
.event-status-pill {
    display: inline-flex;
    align-items: center;
    padding: .3rem .85rem;
    border-radius: 2rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    font-weight: 600;
    white-space: nowrap;
}

/* Colonne droite de l'en-tête : crayon puis bornes */
.config-hero-aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .75rem;
    flex-shrink: 0;
    max-width: 50%;
}

.config-hero-body {
    padding: 1.25rem;
}

.config-hero-label {
    margin-bottom: .5rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

/* Blocs repliables */
.config-block {
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: .75rem;
    overflow: hidden;
    background: var(--bs-body-bg);
    transition: box-shadow .15s ease-in-out;
}

.config-block:hover {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .06);
}

.config-block-header {
    display: flex;
    align-items: center;
}

.config-block-header:has(.config-block-toggle:not(.collapsed)) {
    background: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.config-block-toggle {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
}

/* Interrupteur de la barre de titre : posé sur le bouton de repli, juste avant son chevron */
.config-block-header {
    position: relative;
}

.config-block-toggle.has-switch .config-block-heading {
    padding-right: 3.5rem;
}

.config-block-header-switch {
    position: absolute;
    top: 50%;
    right: 2.75rem;
    transform: translateY(-50%);
}

.config-block-toggle:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
}


.config-block-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .6rem;
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
    font-size: 1.1rem;
}

.config-block-heading {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin-right: auto;
}

.config-block-title {
    font-weight: 600;
}

.config-block-summary {
    font-size: .85rem;
    color: var(--bs-secondary-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.config-block-chevron {
    flex-shrink: 0;
    color: var(--bs-secondary-color);
    transition: transform .2s ease-in-out;
}

.config-block-toggle:not(.collapsed) .config-block-chevron {
    transform: rotate(180deg);
}

.config-block-body .table {
    margin-bottom: 0;
}

/* Tableaux de données (Reporting) : cellules décollées du bord du bloc */
.config-block-body .table > :not(caption) > tr > :first-child {
    padding-left: 1rem;
}

.config-block-body .table > :not(caption) > tr > :last-child {
    padding-right: 1rem;
}

.config-block-body .table tr:not(.table-fiche-sub) > th {
    padding-left: 1rem;
}

.config-block-body .table tr.table-fiche-sub > th {
    padding-left: 2.25rem;
}

.config-block-body .table tr:last-child > * {
    border-bottom: 0;
}

/* Oui / Non en lecture seule (components/_yes_no_switch.html.twig), même dessin que .form-switch */
.switch-display {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: 2.5em;
    height: 1.3em;
    border: 1px solid var(--bs-border-color);
    border-radius: 2em;
    background: var(--bs-body-bg);
    vertical-align: middle;
    /* Lecture seule, pas cliquable */
    opacity: .75;
    cursor: default;
}

.switch-display::after {
    content: '';
    position: absolute;
    top: 50%;
    left: .2em;
    width: .9em;
    height: .9em;
    border-radius: 50%;
    background: var(--bs-secondary-color);
    opacity: .5;
    transform: translateY(-50%);
}

/* Oui en gris (lecture seule) : seuls les interrupteurs des formulaires sont bleus */
.switch-display.is-on {
    border-color: var(--bs-secondary);
    background: var(--bs-secondary);
}

.switch-display.is-on::after {
    left: auto;
    right: .2em;
    background: #fff;
    opacity: 1;
}

@media (max-width: 575.98px) {
    .config-block-body .table-fiche-fixed th {
        width: 40%;
    }
}

/* « Supprimer cet événement », en bas à gauche de l'onglet Configuration */
.event-delete {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .25rem;
    padding: 0 1rem 1rem;
}

/* Petit bouton État des lieux de l'onglet Configuration */
.config-small-btn {
    padding: .1rem .45rem;
    font-size: .8rem;
    line-height: 1.4;
}

.config-small-btn .badge {
    font-size: .7rem;
}

/* Formulaire d'un bloc modifié sur place */
.config-edit-body {
    padding: 1rem 1rem .25rem;
}

.config-hero-editor .config-edit-body {
    padding: 1.25rem 1.25rem .5rem;
}

.config-edit-footer {
    display: flex;
    justify-content: flex-start;
    gap: .5rem;
    padding: .75rem 1rem;
    background: var(--bs-tertiary-bg);
    border-top: 1px solid var(--bs-border-color-translucent);
}

/* Interrupteur Oui/Non (App\Form\Type\SwitchType) */
.switch-field {
    display: flex;
    align-items: center;
    min-height: calc(1.5em + .75rem + 2px);
    margin-bottom: 0;
    padding-left: 0;
}

.switch-field .form-check-input {
    float: none;
    width: 2.5em;
    height: 1.3em;
    margin: 0;
    cursor: pointer;
}

/* Interrupteurs de la fiche, hors formulaire : sans la hauteur d'un champ */
.config-switch {
    min-height: auto;
}

/* Champ de la fiche enregistré à la sortie (event-switch) : coche quelques instants une fois enregistré */
.config-field .form-control {
    width: 8rem;
}

.config-field.is-saving {
    opacity: .6;
}

.config-field-text .form-control {
    width: 100%;
}

.config-field-actions .btn {
    padding: .1rem .45rem;
    font-size: .75rem;
}

.config-field.is-saving .form-control {
    opacity: .6;
}

.config-field-saved {
    opacity: 0;
    transition: opacity .2s ease-in-out;
}

.config-field.is-saved .config-field-saved,
.config-booth-hours-day.is-saved .config-field-saved {
    opacity: 1;
}

.config-field .form-control.is-invalid ~ .config-field-saved {
    display: none;
}

.config-field:has(.is-invalid) .invalid-feedback {
    display: block;
}

/* Horaires de la borne : lignes serrées sous les interrupteurs, message sous la grille sans champ marqué en erreur */
.config-block-body .config-booth-hours tr > * {
    padding-top: .1rem;
    padding-bottom: .1rem;
    border-bottom: 0;
    font-weight: normal;
}

/* Jours calés à droite de leur colonne, contre les heures */
.config-block-body .config-booth-hours tr > th {
    text-align: right;
}

.config-booth-hours-day {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1rem;
    row-gap: .1rem;
}

.config-booth-hours-day .config-field-saved {
    align-self: center;
}

.config-booth-hours-period {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    width: 11.5rem;
}

.config-field .config-booth-hours-period .form-control {
    width: 5.5rem;
    padding: .05rem .25rem;
    min-height: 0;
}

.config-booth-hours .invalid-feedback:not(:empty) {
    display: block;
}

/* Interrupteur en cours d'enregistrement (event-switch) */
.config-switch.is-saving .form-check-input {
    animation: config-switch-saving 1s ease-in-out infinite;
}

@keyframes config-switch-saving {
    50% {
        opacity: .25;
    }
}

/* Modes dans le formulaire du bloc Événement : grandes cases avec leur interrupteur */
.config-mode-edit {
    cursor: pointer;
    transition: border-color .15s ease-in-out, background-color .15s ease-in-out;
}

.config-mode-edit:has(.form-check-input:checked) {
    border-color: var(--bs-success);
    background: var(--bs-success-bg-subtle);
}

.config-mode-edit .form-switch {
    justify-content: center;
    min-height: auto;
}

.config-mode-edit .form-switch .form-check-input {
    float: none;
    margin-left: 0;
}


/* Reporting : boutons « Ouvrir » de la galerie, à droite de leur URL, de même largeur */
.gallery-open-btn {
    flex-shrink: 0;
    width: 13rem;
}

/* Bloc de l'onglet Configuration déjà enregistré au moins une fois (PhotoEvent.modifiedSections) : filet gris un peu
   plus foncé que celui des blocs jamais modifiés */
.config-block.config-block-modified,
.config-hero.config-block-modified {
    border-color: var(--bs-gray-600);
}

/* … et le même filet autour de l'icône de son en-tête */
.config-block-modified .config-block-icon {
    border: 1px solid var(--bs-gray-600);
}

/* Bloc de l'onglet Configuration qui vient d'être enregistré (?saved=) : ouvert, grosse bordure grise jusqu'au
   prochain chargement de la page */
.config-block.config-block-saved,
.config-hero.config-block-saved {
    border: 2px solid var(--bs-gray-700);
}