@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');

/* =============================================
   ANIMATION LOGO SIDEBAR (étendu / réduit)
   - light-logo1 : logo complet, visible quand étendu
   - light-logo  : icône seule, visible quand réduit
   ============================================= */
.side-header .header-brand-img {
    transition: opacity 0.3s ease, transform 0.3s ease, max-width 0.35s ease;
}

/* État étendu : logo complet (light-logo1) visible, icône masquée */
.side-header .header-brand-img.light-logo1 {
    opacity: 1;
    transform: scale(1);
    max-width: 160px;
}
.side-header .header-brand-img.light-logo {
    opacity: 0;
    transform: scale(0.7);
    max-width: 0;
    overflow: hidden;
}

/* État réduit : icône visible, logo complet masqué */
.app.sidebar-mini.sidenav-toggled .app-sidebar .side-header .header-brand-img.light-logo {
    opacity: 1 !important;
    transform: scale(1) !important;
    max-width: 48px !important;
    overflow: visible !important;
}
.app.sidebar-mini.sidenav-toggled .app-sidebar .side-header .header-brand-img.light-logo1 {
    opacity: 0 !important;
    transform: scale(0.7) !important;
    max-width: 0 !important;
    overflow: hidden !important;
}

/* Réouverture au survol (sidenav-toggled-open) : logo complet revient */
.app.sidebar-mini.sidenav-toggled.sidenav-toggled-open .app-sidebar .side-header .header-brand-img.light-logo1 {
    opacity: 1 !important;
    transform: scale(1) !important;
    max-width: 160px !important;
    overflow: visible !important;
}
.app.sidebar-mini.sidenav-toggled.sidenav-toggled-open .app-sidebar .side-header .header-brand-img.light-logo {
    opacity: 0 !important;
    transform: scale(0.7) !important;
    max-width: 0 !important;
    overflow: hidden !important;
}

/* =============================================
   ICÔNES SIDEBAR EN MODE FERMÉ (icônes seules, sans hover-open)
   ============================================= */
@media (min-width: 992px) {

    /* Icône centrée dans les 80px — uniquement quand le menu est vraiment fermé */
    .app.sidebar-mini.sidenav-toggled:not(.sidenav-toggled-open) .side-menu__item {
        justify-content: center;
        padding: 10px 0 !important;
        margin: 2px 8px;
        border-radius: 8px;
        width: calc(100% - 16px);
    }

    .app.sidebar-mini.sidenav-toggled:not(.sidenav-toggled-open) .side-menu .side-menu__icon {
        font-size: 20px;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 0;
        flex-shrink: 0;
    }

    /* Séparateur de groupe : petit trait à la place du label texte */
    .app.sidebar-mini.sidenav-toggled:not(.sidenav-toggled-open) .side-menu .sub-category {
        display: block !important;
        padding: 6px 0 2px;
    }
    .app.sidebar-mini.sidenav-toggled:not(.sidenav-toggled-open) .side-menu .sub-category h3 {
        font-size: 0;
        margin: 0 8px;
        border-top: 1px solid #e9edf4;
    }
}

:root {
  --text-body-color: #282f53;
}

.bg-body-color {background: var(--text-body-color) !important;}
.text-body-color {color: var(--text-body-color) !important;}
.cursor-pointer {cursor: pointer;}
.hover-primary:hover {color: var(--primary-bg-color) !important;}
.hover-danger:hover {color: var(--danger) !important;}

body#espace-client {font-family: 'Archivo' !important;font-size: 0.95em;}
.select2-container--default .select2-selection--single {background: #fff;}
.select2-container--default .select2-selection--single .select2-selection__clear {margin-right: 12px;}

a.graytoprimary {color: #bdbdc7 !important;}
a.graytoprimary:hover {color: var(--primary-bg-color) !important;}

.step-a:hover {text-decoration: underline;}
.detaillink {font-weight: bold}

.ec-form .parsley-error {border-color: var(--danger);}
.ec-form .parsley-errors-list li {color: var(--danger); font-size: 12px;font-weight: 500;padding: 4px;}

.ec-form .list-group-item h5 span.acc-step-number {background: var(--bs-gray-500) !important;}
.ec-form .list-group-item.open h5 span.acc-step-number {background: var(--primary-bg-color) !important;}
.ec-form .list-group-item.previous-step h5 span.acc-step-number {background: var(--primary-bg-color) !important;}


.list-group-item a.btn-outline-primary {color: var(--primary-bg-color);}
.list-group-item a.btn-outline-primary:hover {color: white;}

/* RESERVATION BD */
#eclist-espaces .accordion-button {cursor: pointer;}
.small-breakline br {display: block;line-height: 8px;content: " ";margin: 3px 0;}

#rbd-list-types .list-group-item.active {background: #fff !important;border-color: var(--text-body-color) !important;}
#rbd-list-types .list-group-item.active label.f-label {background: #efefef !important;}

.rbd-table .rbd-table-title {background: #efefef;}
.rbd-table input[type=number] {max-width: 96px !important;display: inline-block;}

#wrap-list-recap.active #heading-recap .rbd-acc-icon::before {content: "\e930";display: block;font-family: "feather" !important;}
#wrap-list-recap #heading-recap .rbd-acc-icon::before {content: "\e92d";display: block;font-family: "feather" !important;}


.ec-list-toggle.ec-toggle-border.active {border: 1px solid var(--text-body-color) !important;}
.ec-list-toggle.active .ec-list-heading .rbd-acc-icon::before {content: "\e930";display: block;font-family: "feather" !important;}
.ec-list-toggle .ec-list-heading .rbd-acc-icon::before {content: "\e92d";display: block;font-family: "feather" !important;}

/* ZONE DROP FILE */
#ec-zone-drop {border: 2px dashed #e9edf4; margin: 2px;position: relative;background: #f6f6fb;}
#ec-zone-drop:hover, #ec-zone-drop.dragged {background: #fff;}
#ec-zone-drop #ec-zone-drop-infos {pointer-events: none;padding: 64px 24px;text-align: center;}
#ec-zone-drop #ec-zone-drop-input {cursor:pointer; position:absolute; top:0; left:0; right:0; bottom:0; opacity:0; width: 100%;}


/*************/
#espace-choice li.list-group-item.yo {border: 1px solid var(--primary-bg-color);background: color-mix(in srgb, var(--primary-bg-color) 8%, #fff);}
#espace-choice li.list-group-item:not(.item-close):hover {background: color-mix(in srgb, var(--primary-bg-color) 8%, #fff);}
#espace-choice .custom-switch:hover {cursor: pointer !important;}

/* Badges neutres (gris) — bg-secondary est bleu dans ce thème, cette classe remplace pour les états neutres (Lu, Annulé, Faible...) */
.badge-muted { background-color: #e9ecef !important; color: #6c757d !important; }

/* =============================================
   BADGES TICKETS — classes personnalisées (palette jaune/orange/rouge/gris)
   ============================================= */

/* Statuts */
.badge-ec-new        { background-color: #fff3cd !important; color: #7a5c00 !important; } /* Non lu — jaune doré */
.badge-ec-read       { background-color: #e9ecef !important; color: #6c757d !important; } /* Lu — gris neutre */
.badge-ec-assigned   { background-color: #ffe8b0 !important; color: #9c6200 !important; } /* Assigné — ambre */
.badge-ec-inprogress { background-color: #ffd08a !important; color: #7a3e00 !important; } /* En cours — orange */
.badge-ec-waiting    { background-color: #ffe0c0 !important; color: #b85a00 !important; } /* Attente retour — orange soutenu */
.badge-ec-resolved   { background-color: #e9ecef !important; color: #555555 !important; } /* Résolu/Fermé — gris (état terminal) */
.badge-ec-cancelled  { background-color: #e9ecef !important; color: #6c757d !important; } /* Annulé — gris */

/* Sévérités */
.badge-ec-sev-low      { background-color: #e9ecef !important; color: #6c757d !important; } /* Faible — gris */
.badge-ec-sev-normal   { background-color: #fff3cd !important; color: #7a5c00 !important; } /* Normal — jaune */
.badge-ec-sev-high     { background-color: #ffe0c0 !important; color: #b85a00 !important; } /* Élevé — orange */
.badge-ec-sev-blocking { background-color: #f8d7da !important; color: #721c24 !important; } /* Bloquant — rouge */

/* Compteur total tickets dans le titre de la card */
.badge-ec-count { background-color: #e9ecef !important; color: #6c757d !important; }

/* =============================================
   THREAD MESSAGES — vue détail ticket
   ============================================= */
.ec-ticket-thread {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
/* Ligne : rail (avatar + trait vertical) + bulle */
.ec-ticket-msg {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    column-gap: 12px;
    align-items: stretch;
}
/* Rail (colonne gauche) */
.ec-ticket-rail {
    position: relative;
    align-self: stretch;
    min-height: 100%;
}
/* Avatar centré dans le rail */
.ec-ticket-avatar {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.83em;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fff;
    background: #7a8297;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #d8dfeb;
    overflow: hidden;
}
.ec-ticket-avatar.has-image { background: #fff; }
.ec-ticket-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ec-ticket-msg.is-internal .ec-ticket-avatar { background: var(--primary-bg-color); }
.ec-ticket-msg.is-customer .ec-ticket-avatar { background: #7a8297; }

/* Trait vertical reliant les messages */
.ec-ticket-rail-line {
    position: absolute;
    left: 50%;
    top: -14px;
    bottom: -14px;
    width: 2px;
    transform: translateX(-50%);
    background: #dfe4ef;
}
.ec-ticket-thread > .ec-ticket-msg:first-child .ec-ticket-rail-line { top: 50%; }
.ec-ticket-thread > .ec-ticket-msg:last-child  .ec-ticket-rail-line { bottom: 50%; }

/* Bulle (colonne droite) */
.ec-ticket-bubble {
    position: relative;
    width: 100%;
    background: #fff;
    border: 1px solid #d8dfeb;
    border-radius: 10px;
    box-sizing: border-box;
    overflow: hidden;
}
/* En-tête coloré */
.ec-ticket-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    font-size: 0.88em;
    border-bottom: 1px solid #dce3ef;
    background: #f2f4f8;
    flex-wrap: wrap;
}
.ec-ticket-msg.is-internal .ec-ticket-meta {
    background: color-mix(in srgb, var(--primary-bg-color) 10%, #fff);
    border-bottom-color: color-mix(in srgb, var(--primary-bg-color) 22%, #fff);
}
.ec-ticket-author { font-weight: 700; color: #1f2435; }
.ec-ticket-date   { font-size: 12px; color: #5f667d; white-space: nowrap; }

/* Contenu HTML du message */
.ec-ticket-content {
    line-height: 1.55;
    word-break: break-word;
    padding: 14px 16px;
    color: #3a3f55;
    font-size: 0.9em;
}
.ec-ticket-content p:last-child { margin-bottom: 0; }
.ec-ticket-content ul,
.ec-ticket-content ol { margin: 0.4em 0 0.7em 1.25em; padding-left: 1em; }
.ec-ticket-content img { max-width: 100%; height: auto; }

/* Message initial — légèrement atténué */
.ec-ticket-msg.is-initial .ec-ticket-bubble { opacity: 0.82; }

/* Pièces jointes */
.ec-ticket-files {
    margin: 0 16px 14px 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ec-ticket-file {
    font-size: 0.83em;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid #d7deea;
    background: #f6f8fc;
    color: #364061;
}
.ec-ticket-file:hover { border-color: #b8c3da; color: #21283c; }

@media screen and (max-width: 600px) {
    .ec-ticket-msg { grid-template-columns: 42px minmax(0, 1fr); }
    .ec-ticket-avatar { width: 34px; height: 34px; font-size: 0.76em; }
}

/* =============================================
   FORMULAIRE RÉPONSE TICKET
   Styles pour les éléments générés par showMessageForm() de Dolibarr
   ============================================= */

/* Séparateur au-dessus du formulaire */
#espace-client .ec-ticket-reply-form {
    border-top: 1px solid #e2e8f0 !important;
}

/* Suppression des bordures du <table> généré par showMessageForm() */
#espace-client .ec-ticket-reply-form table,
#espace-client .ec-ticket-reply-form table tr,
#espace-client .ec-ticket-reply-form table td,
#espace-client .ec-ticket-reply-form table th {
    border: none !important;
    border-collapse: collapse !important;
    background: transparent !important;
}

/* Textarea du message */
#espace-client .ec-ticket-reply-form textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
    font-size: 0.9em !important;
    min-height: 130px !important;
    resize: vertical !important;
    font-family: inherit !important;
    color: #3a3f55 !important;
    background: #f8f9fb !important;
    transition: border-color 0.15s !important;
    margin-top: 0 !important;
}
#espace-client .ec-ticket-reply-form textarea:focus {
    border-color: var(--primary-bg-color) !important;
    background: #fff !important;
    outline: none !important;
}

/* =============================================
   BANDEAU D'INFORMATION DOCUMENTS
   ============================================= */
.ec-docs-alert {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px 14px 18px;
    background: linear-gradient(135deg, #fffbee 0%, #fff7dc 100%);
    border: 1px solid #fce8a0;
    border-left: 4px solid #ffab2d;
    border-radius: 10px;
    box-shadow: 0 2px 14px rgba(255, 171, 45, 0.10);
}

.ec-docs-alert__icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    background: rgba(255, 171, 45, 0.18);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c87900;
    font-size: 1.1rem;
}

.ec-docs-alert__body {
    flex: 1;
    color: #4a3800;
    font-size: 13.5px;
    line-height: 1.55;
    font-weight: 500;
}

.ec-docs-alert__body p {
    margin: 0;
}

.ec-docs-alert__dismiss {
    flex-shrink: 0;
    background: none;
    border: none;
    color: #a07800;
    font-size: 1rem;
    cursor: pointer;
    padding: 5px;
    border-radius: 6px;
    opacity: 0.55;
    transition: opacity 0.15s, background 0.15s;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ec-docs-alert__dismiss:hover {
    opacity: 1;
    background: rgba(255, 171, 45, 0.15);
}

.ec-ticket-reply-form .tabsAction,
#espace-client .ec-ticket-reply-form .fichecenter,
#espace-client .ec-ticket-reply-form .center {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    margin-top: 14px !important;
}
#espace-client .ec-ticket-reply-form input[type="submit"].button:not([name="cancel"]),
#espace-client .ec-ticket-reply-form input[type="submit"].butAction:not([name="cancel"]),
#espace-client .ec-ticket-reply-form a.button:not(.cancel):not(.buttoncancel),
#espace-client .ec-ticket-reply-form a.butAction,
#espace-client .ec-ticket-reply-form button.button:not([name="cancel"]),
#espace-client .ec-ticket-reply-form button.butAction {
    background: var(--primary-bg-color) !important;
    border: 2px solid var(--primary-bg-color) !important;
    color: #fff !important;
    padding: 9px 22px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    font-size: 0.875em !important;
    transition: opacity 0.15s !important;
    text-decoration: none !important;
    display: inline-block !important;
    line-height: 1.3 !important;
    box-shadow: none !important;
}
#espace-client .ec-ticket-reply-form input[type="submit"].button:not([name="cancel"]):hover,
#espace-client .ec-ticket-reply-form input[type="submit"].butAction:not([name="cancel"]):hover,
#espace-client .ec-ticket-reply-form a.button:not(.cancel):not(.buttoncancel):hover,
#espace-client .ec-ticket-reply-form a.butAction:hover { opacity: 0.85 !important; }

/* Bouton Annuler — outline jaune, pas de fond */
#espace-client .ec-ticket-reply-form input[name="cancel"],
#espace-client .ec-ticket-reply-form input[type="submit"].buttoncancel,
#espace-client .ec-ticket-reply-form a.buttoncancel,
#espace-client .ec-ticket-reply-form a.button.cancel {
    background: transparent !important;
    color: var(--primary-bg-color) !important;
    border: 2px solid var(--primary-bg-color) !important;
    padding: 9px 22px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-size: 0.875em !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    display: inline-block !important;
    line-height: 1.3 !important;
    transition: opacity 0.15s !important;
}
#espace-client .ec-ticket-reply-form input[name="cancel"]:hover,
#espace-client .ec-ticket-reply-form a.buttoncancel:hover {
    opacity: 0.75 !important;
}

/* Bouton "Joindre le fichier" — caché, remplacé par la zone drag-drop ddfile.js */
#espace-client .ec-ticket-reply-form #addfile,
#espace-client .ec-ticket-reply-form input[name="addfile"] {
    display: none !important;
}

/* Liste des fichiers attachés (div id="attachfile_X" générée par FormTicket) */
#espace-client .ec-ticket-reply-form [id^="attachfile_"] {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 10px !important;
    margin: 4px 0 !important;
    background: #f8f9fb !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    font-size: 0.875em !important;
    color: #3a3f55 !important;
}
#espace-client .ec-ticket-reply-form [id^="attachfile_"] img {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
}
/* Bouton suppression fichier (input type=image avec icône delete.png) */
#espace-client .ec-ticket-reply-form [id^="attachfile_"] input[type="image"],
#espace-client .ec-ticket-reply-form input.removedfile {
    width: 16px !important;
    height: 16px !important;
    opacity: 0.45 !important;
    cursor: pointer !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    transition: opacity 0.15s !important;
}
#espace-client .ec-ticket-reply-form [id^="attachfile_"] input[type="image"]:hover,
#espace-client .ec-ticket-reply-form input.removedfile:hover {
    opacity: 1 !important;
}

/* =============================================
   BOUTON COULEUR PRIMAIRE CUSTOM (ec-btn-primary)
   Classe indépendante de Bootstrap, utilise directement var(--primary-bg-color).
   À utiliser à la place de btn-outline-primary pour éviter les conflits Bootstrap 5.
   ============================================= */
.ec-btn-primary {
    color: var(--primary-bg-color);
    border: 1px solid var(--primary-bg-color);
    background-color: transparent;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.ec-btn-primary:hover,
.ec-btn-primary:active,
.ec-btn-primary.active,
.ec-btn-primary.dropdown-toggle.show {
    color: #fff;
    background-color: var(--primary-bg-color);
    border-color: var(--primary-bg-color);
}
.ec-btn-primary:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--primary-bg-color) 35%, transparent);
}

/* =============================================
   BOUTON EXPORT
   ============================================= */
.ec-export-btn {
    font-size: 12px;
    padding: 4px 10px;
    white-space: nowrap;
}

/* =============================================
   CSS IMPRESSION (window.print)
   Masque tout sauf la card de la liste de documents
   ============================================= */
@media print {
    /* Masquer sidebar, topbar, filtres, pagination, boutons d'action */
    .app-sidebar,
    .app-header,
    .main-sidebar-header,
    .side-app > .main-container > .col-xl-3,
    .ec-docs-alert,
    .page-header,
    nav[aria-label="Page navigation"],
    .ec-export-btn,
    .card-options .dropdown,
    td:last-child .btn,
    td:last-child .btn-group {
        display: none !important;
    }

    body, html {
        background: #fff !important;
    }

    .page, .page-main, .main-content, .side-app, .main-container {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: none !important;
    }

    .col-xl-9 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    .card {
        border: none !important;
        box-shadow: none !important;
    }

    .card-header {
        border-bottom: 2px solid #dee2e6 !important;
        padding: 8px 0 !important;
    }

    .card-title {
        font-size: 14pt !important;
    }

    table {
        width: 100% !important;
        font-size: 9pt !important;
        border-collapse: collapse !important;
    }

    table th, table td {
        padding: 5px 8px !important;
        border: 1px solid #ccc !important;
    }

    a { color: inherit !important; text-decoration: none !important; }
}

/* Zone de dépôt de fichiers — reprend les propriétés de ddfile.css */
#espace-client .ec-ticket-reply-form .ddfilewrap {
    border: 2px dashed #e2e8f0 !important;
    border-radius: 8px !important;
    background: #f8f9fb !important;
    height: 64px !important;
    position: relative !important;
    display: flex !important;
    cursor: pointer !important;
    margin: 10px 0 !important;
    transition: border-color 0.15s, background 0.15s !important;
}
#espace-client .ec-ticket-reply-form .ddfilewrap:hover,
#espace-client .ec-ticket-reply-form .ddfilewrap.dragged {
    border-color: var(--primary-bg-color) !important;
    background: #fff !important;
}
/* Input file invisible (overlay cliquable) */
#espace-client .ec-ticket-reply-form .ddfilewrap #addedfile {
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    opacity: 0 !important;
    cursor: pointer !important;
    width: 100% !important;
    height: 100% !important;
}
/* Texte indicatif dans la zone drag-drop */
#espace-client .ec-ticket-reply-form .ddfiledropinfos {
    margin: auto !important;
    opacity: 0.6 !important;
    font-weight: 500 !important;
    font-size: 0.9em !important;
    pointer-events: none !important;
    color: #3a3f55 !important;
    text-align: center !important;
}