/* ---------------------- */
/* 1. Variables globales */
/* ---------------------- */

:root {
    /* Variables de couleurs */
    --color-link: #7E9EBD; /* Couleur par défaut pour les liens */
    --color-primary: #7E9EBD;
    --color-info: #91C4F2;
    --color-success: #8FBC94;
    --color-warning: #F2D0A4;
    --color-danger: #F2B5A7;

    --color-current: #6B8AA8;
    --color-active: #6B8AA8;

    /* Application des couleurs à Bulma */
    --bulma-primary: var(--color-primary);
    --bulma-info: var(--color-info);
    --bulma-success: var(--color-success);
    --bulma-warning: var(--color-warning);
    --bulma-danger: var(--color-danger);
    --bulma-current: var(--color-current);
    --bulma-active: var(--color-active);
    --bulma-link: var(--color-link);

    /* Polices globales */
    --bulma-family-primary: "SF Pro", Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica Neue, Helvetica, Arial, sans-serif;
    --bulma-family-code: 'Courier New', monospace;

    --bulma-warning-h: 33;
    --bulma-warning-s: 71%;
    --bulma-warning-l: 79%;

    --bulma-success-h: 127;
    --bulma-success-s: 29%;
    --bulma-success-l: 65%;

    /* Variables boutons avec contraste très élevé */
    --button-primary: #2c4a62; /* Très sombre */
    --button-info: #3d7db8; /* Bleu plus intense */
    --button-link: #007CBD; /* Très sombre */
    --button-success: #4d7a52; /* Vert foncé */
    --button-warning: #b8904f; /* Orange foncé */
    --button-danger: #b56b5b; /* Rouge foncé */
}

[data-theme=ub], .theme-ub {
    @font-face {
        font-family: 'Brixslab';
        src: url("../fonts/brixslab-regular-zln9y4o.ttf");
    }

    @font-face {
        font-family: 'Brixslab';
        font-style: italic;
        src: url("../fonts/brixslab-regularitalic-hrHYCVo.ttf");
    }

    @font-face {
        font-family: 'Brixslab';
        font-weight: bold;
        src: url("../fonts/brixslab-bold-Ed9nYLt.ttf");
    }
}

/* ---------------------- */
/* 2. Styles globaux */
/* ---------------------- */

a {
    color: var(--bulma-link);
}

a:hover {
    color: hsl(var(--bulma-link-h), var(--bulma-link-s), calc(var(--bulma-link-l) - 15%));
}

tr.htmx-swapping td {
    opacity: 0;
    transition: opacity 1s ease-out;
}

/* HTMX Indicators and Animations */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator {
    display: inline-flex;
    align-items: center;
    margin-left: 10px;
}

.htmx-request .htmx-indicator .icon {
    margin-right: 5px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ---------------------- */
/* 3. Modificateurs spécifiques */
/* ---------------------- */

.is-current {
    background-color: var(--bulma-current);
    color: #fff;
}

a.is-current {
    background-color: var(--bulma-current);
    color: #fff !important;
}

.button.is-current {
    background-color: var(--bulma-current);
    color: #fff;
}

.button.is-current.is-outlined {
    background-color: transparent;
    border-color: var(--bulma-current);
    color: var(--bulma-current);
}

.button.is-link {
    background-color: var(--bulma-link);
}


.menu-item.is-current {
    background-color: var(--bulma-current);
    color: #fff;
}

.pagination-link.is-current {
    background-color: var(--bulma-current);
    border-color: var(--bulma-current);
    color: #fff;
}

.menu-list a.is-active {
    background-color: var(--bulma-active); /* Bleu très clair */
}

/* ---------------------- */
/* 4. Composants spécifiques */
/* ---------------------- */

.button.is-primary {
    background-color: var(--bulma-primary);
}

.button.is-info {
    background-color: var(--bulma-info);
}

.button.is-success {
    background-color: var(--bulma-success);
}

.button.is-warning {
    background-color: var(--bulma-warning);
}

a.is-warning:hover {
    background-color: #e9bb86;
    color: black;
}


.button.is-danger {
    background-color: var(--bulma-danger);
}

.message.is-link .message-header {
    background-color: var(--bulma-link);
}

.message.is-link .message-body {
    border-color: var(--bulma-link);
}

.message.is-primary .message-header {
    background-color: var(--bulma-primary);
}

.message.is-info .message-header {
    background-color: var(--bulma-info);
}

.message.is-success .message-header {
    background-color: var(--bulma-success);
}

.message.is-warning .message-header {
    background-color: var(--bulma-warning);
}

.message.is-danger .message-header {
    background-color: var(--bulma-danger);
}

.message.evenement .message-body * {
    color: var(--bulma-text);
}

.notification.is-link {
    background-color: var(--bulma-link);
}

.notification.is-primary {
    background-color: var(--bulma-primary);
}

.notification.is-info {
    background-color: var(--bulma-info);
}

.notification.is-success {
    background-color: var(--bulma-success);
}

.notification.is-warning {
    background-color: var(--bulma-warning);
}

.notification.is-danger {
    background-color: var(--bulma-danger);
}

.tag.is-link {
    background-color: var(--bulma-link);
}

.tag.is-primary {
    background-color: var(--bulma-primary);
}

.tag.is-info {
    background-color: var(--bulma-info);
}

.tag.is-success {
    background-color: var(--bulma-success);
}

.tag.is-warning {
    background-color: var(--bulma-warning);
}

.tag.is-danger {
    background-color: var(--bulma-danger);
}

/* ---------------------- */
/* 5. Thèmes spécifiques */
/* ---------------------- */

html[data-theme=ub] {
    --bulma-family-primary: Brixslab, Inter, SF Pro, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica Neue, Helvetica, Arial, sans-serif;
    --bulma-family-secondary: Brixslab, Inter, SF Pro, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica Neue, Helvetica, Arial, sans-serif;
    --bulma-family-code: Inconsolata, Hack, SF Mono, Roboto Mono, Source Code Pro, Ubuntu Mono, monospace;
}

html.theme-light[data-theme=ub] {
    --bulma-link-h: 201deg;
    --bulma-link-s: 100%;
    --bulma-link-l: 37%;
}

html.theme-dark[data-theme=ub] {
    --bulma-link-h: 201deg;
    --bulma-link-s: 80%;
    --bulma-link-l: 50%;
}

/* ---------------------- */
/* 6. Media queries */
/* ---------------------- */

@media screen and (max-width: 1023px) {
    .burger-menu {
        position: fixed;
        top: 0;
        left: -100%;
        height: 100vh;
        width: 80%;
        max-width: 300px;
        background-color: white;
        z-index: 1000;
        padding: 1rem;
        overflow-y: auto;
        transition: left 0.3s ease-in-out;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    }

    .burger-menu.is-active {
        left: 0;
    }

    html.theme-dark .burger-menu {
        background-color: rgb(20, 22, 26);
    }
}

/* ---------------------- */
/* 7. Styles divers */
/* ---------------------- */

/* Tooltips */
[data-tooltip] {
    position: relative;
    cursor: pointer;
}

[data-tooltip]:before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.5rem;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 99999;
    font-size: 0.75rem;
}

[data-tooltip]:hover:before {
    opacity: 1;
    visibility: visible;
}

.message .table {
    background-color: inherit;
    color: currentColor;
}

.evenement.simple {
    max-width: 500px;
}

.evenement img.qr_code {
    width: 150px;
    min-width: 150px;
    aspect-ratio: 1 / 1;
}

#event_is_draft_message.hidden,
#event_cancelled_message.hidden {
    display: none;
}

.modal {
    display: flex;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
}

.modal:target {
    opacity: 1;
    pointer-events: auto;
}

div.evenement.message div.column {
    min-width: fit-content;
}

.label.required:after {
    content: " *";
    margin-left: 2px;
}

html.theme-light .hero.is-info.is-very-light {
    background-color: #f0f7ff;
}

html.theme-dark .hero.is-info.is-very-light {
    background-color: #1a2634;
}

html.theme-dark .hero.is-info.is-very-light .title,
html.theme-dark .hero.is-info.is-very-light .subtitle {
    color: #e6e6e6;
}

.page-container {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.content-wrap {
    flex: 1 0 auto;
    /* Supprimez le padding-bottom fixe */
}

.footer {
    flex-shrink: 0; /* Empêche le footer de se rétrécir */
    /* Supprimez position: absolute et bottom */
    width: 100%;
    /* Gardez height: 70px si nécessaire */
    padding: 1rem;
}

body {
    margin: 0;
    padding: 0;
}

.logo {
    height: 60px;
    width: auto;
}

html.theme-dark img.logo.light {
    display: none;
}

html.theme-light img.logo.dark {
    display: none;
}

/* Only highlight labels in active criteria instead of the entire field */
.critere-actif label {
    font-weight: 600;
    color: var(--bulma-info-dark);
    background-color: var(--bulma-info-light);
    padding: 2px 4px;
    border-radius: 3px;
}

/* Keep border styling for inputs in active criteria */
.critere-actif select,
.critere-actif input[type="date"],
.critere-actif input[type="text"] {
    border-color: var(--bulma-info);
}

div#searchCriteriaContainer div.field {
    padding: 0.3rem 0.5rem;
    border-radius: 0.375rem;
}

/* Styles for the search criteria message component */
.message.search-criteria-box .message-body {
    transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
    overflow: hidden;
}

/* Compact search form styles */
.message.search-criteria-box .field.is-grouped-multiline {
    margin-bottom: 0.5rem;
}

.message.search-criteria-box .control {
    margin-right: 0.75rem;
    margin-bottom: 0.5rem;
}

.message.search-criteria-box .control label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
}

.message.search-criteria-box .control select,
.message.search-criteria-box .control input {
    height: 2.25rem;
}

/* Make the toggle icon rotate smoothly */
#toggleIcon {
    transition: transform 0.3s ease;
}

#toggleSearchCriteria:not(.collapsed) #toggleIcon {
    transform: rotate(180deg);
}

/* Hero content styles for search forms */
.hero-content {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 1rem;
    border-radius: 6px;
    max-width: 1200px;
    margin: 0 auto;
}

.hero-content .field.is-grouped-multiline {
    justify-content: center;
}

.hero-content .control {
    margin-right: 0.75rem;
    margin-bottom: 0.5rem;
}

.hero-content label {
    color: #fff;
    font-weight: 500;
}

.hero-content .notification {
    margin-bottom: 1rem;
}

/* Style for criteria summary */
#criteresSynthese {
    transition: opacity 0.3s ease;
    padding: 0.75rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

#criteresSynthese .tags {
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-bottom: 0;
    display: flex;
}

#criteresSynthese .tag {
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    background-color: #f5f5f5;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.collection-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.collection-item {
    margin-bottom: 0.5rem;
}

.gap-2 {
    gap: 0.5rem;
}

.control.is-expanded {
    flex-grow: 1;
}

#criteresSynthese .tag.is-warning {
    background-color: var(--bulma-warning);
}

.user-details .button.is-small {
    padding-left: 0.5em;
    padding-right: 0.5em;
    height: 1.7em;
}

.user-details .button.is-small .icon.is-small {
    height: 1em;
    width: 1em;
}

.user-details .button.is-small .icon:first-child:last-child {
    margin-left: -0.25em;
    margin-right: -0.25em;
}

#resultats_recherche.htmx-swapping {
    opacity: 0.1;
    transition: opacity 150ms ease-out;
}

#resultats_recherche.htmx-settling {
    opacity: 1;
    transition: opacity 150ms ease-in;
}


[data-tooltip]:not(a):not(button):not(.clickable) {
    cursor: default;
}

/* Pour les éléments qui devraient avoir un curseur d'aide */
.help-tooltip[data-tooltip] {
    cursor: help;
}

/* ---------------------- */
/* 8. Accessibility styles */
/* ---------------------- */

/* Skip link for keyboard navigation */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #00d1b2;
    color: white;
    padding: 8px;
    z-index: 100;
    transition: top 0.3s;
}

.skip-link:focus {
    top: 0;
}

/* Improve focus visibility */
a:focus, button:focus, input:focus, select:focus, textarea:focus {
    outline: 2px solid #00d1b2;
    outline-offset: 2px;
}

/* Screen reader only text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
    display: inline-block;
    left: -9999px;
    top: -9999px;
    pointer-events: none;
    font-size: 0;
    line-height: 0;
    visibility: hidden;
    opacity: 0;
}


form label::first-letter {
    text-transform: uppercase;
}

button[type="submit"]::first-letter {
    text-transform: uppercase;
}

select[name=utilisateur] {
    text-transform: none;
}


select option::first-letter {
    text-transform: uppercase;
}

input[type=checkbox]::first-letter {
    text-transform: uppercase;
}

label.checkbox.required::after {
    content: " *";
    margin-left: 2px;
    text-transform: none;
}

button[type="submit"].is-primary, a.pagination-link.is-current {
    background-color: var(--button-link);
    color: white;
}


/*button[type="submit"] {*/
/*    text-transform: capitalize;*/
/*}*/

/***
 * Modifs de contraste
 */

.button.is-link, .menu-list a.is-active {
    background-color: var(--button-link);
    color: white !important;
    border-color: var(--button-link);
}

.button.is-success {
    background-color: var(--button-success);
    color: white !important;
    border-color: var(--button-success);
}

.button.is-warning {
    background-color: var(--button-warning);
    color: white !important;
    border-color: var(--button-warning);
}

.button.is-danger {
    background-color: var(--button-danger);
    color: white !important;
    border-color: var(--button-danger);
}

.button.is-current {
    background-color: #546d85;
    color: white !important;
    border-color: #546d85;
}

.table thead th a {
    font-weight: 700;
}

.theme-light .table thead th a {
    color: var(--button-primary);
}

.theme-dark .table thead th a {
    color: inherit;
}

.table thead th a:hover {
    color: #007CBD !important;
}

#modal header.modal-card-head.has-background-danger {
    background-color: var(--button-danger) !important;
    color: white !important;
}

/* Fix for SVG icons in Safari */
.icon svg {
    height: 100%;
    width: 100%;
    display: block;
}