/* F75 BAT Manager — Frontend CSS — v1.0.3 */

:root {
    --f75-bat-primary:  #0073aa;
    --f75-bat-success:  #388e3c;
    --f75-bat-danger:   #d32f2f;
    --f75-bat-warning:  #f57c00;
    --f75-bat-border:   #e0e0e0;
    --f75-bat-radius:   8px;
    --f75-bat-shadow:   0 2px 12px rgba(0,0,0,.08);
}

/* ─── Wrapper : pleine largeur, pas de max-width ─────────────────────────────── */
.f75-bat-validation {
    padding: 0 0 40px;
    font-family: inherit;
}

/* ─── Notices ────────────────────────────────────────────────────────────────── */
.f75-bat-notice { padding: 16px 20px; border-radius: var(--f75-bat-radius); margin: 24px 0; }
.f75-bat-notice--error   { background: #ffebee; border-left: 4px solid var(--f75-bat-danger);  color: var(--f75-bat-danger); }
.f75-bat-notice--success { background: #e8f5e9; border-left: 4px solid var(--f75-bat-success); color: var(--f75-bat-success); }

/* ─── En-tête ────────────────────────────────────────────────────────────────── */
.f75-bat-validation__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 0 20px;
    border-bottom: 1px solid var(--f75-bat-border);
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.f75-bat-validation__header-left  { flex: 1; min-width: 0; }
.f75-bat-validation__header-right { flex-shrink: 0; display: flex; align-items: flex-start; padding-top: 4px; }

.f75-bat-validation__salon    { font-size: 22px; font-weight: 700; margin: 0 0 6px; text-align: left; }
.f75-bat-validation__exhibitor,
.f75-bat-validation__version  { margin: 4px 0; color: #555; font-size: 15px; text-align: left; }

/* ─── Bouton télécharger PDF ─────────────────────────────────────────────────── */
.f75-bat-btn-download {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    border-radius: 999px;
    background: #f0f6fc;
    border: 1.5px solid #c0d8f0;
    color: #0C447C;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s, color .2s;
    white-space: nowrap;
}
.f75-bat-btn-download:hover {
    background: #0C447C;
    border-color: #0C447C;
    color: #fff;
    text-decoration: none;
}

/* ─── Layout 2 colonnes ──────────────────────────────────────────────────────── */
.f75-bat-two-col {
    display: grid;
    grid-template-columns: 1fr 540px;
    gap: 28px;
    align-items: start;
}
@media (max-width: 960px) {
    .f75-bat-two-col { grid-template-columns: 1fr; }
}

.f75-bat-col-pdf  { min-width: 0; position: sticky; top: 32px; }
.f75-bat-col-form { min-width: 0; }

/* ─── Visionneuse PDF ────────────────────────────────────────────────────────── */
.f75-bat-pdf-viewer {
    background: var(--f75-bat-bg-light, #f8f9fa);
    border: 1px solid var(--f75-bat-border);
    border-radius: var(--f75-bat-radius);
    overflow: hidden;
    box-shadow: var(--f75-bat-shadow);
}
.f75-bat-pdf-viewer__toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 10px 16px;
    background: #fff;
    border-bottom: 1px solid var(--f75-bat-border);
}
.f75-bat-pdf-viewer__page-info { font-size: 14px; color: #444; min-width: 80px; text-align: center; }
.f75-bat-pdf-viewer__canvas-wrap {
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 200px;
}
#f75-bat-pdf-canvas { max-width: 100%; box-shadow: 0 2px 16px rgba(0,0,0,.15); border-radius: 2px; }
.f75-bat-pdf-viewer__loading { text-align: center; color: #888; padding: 40px 0; font-style: italic; }
.f75-bat-pdf-viewer__error   { text-align: center; color: var(--f75-bat-danger); padding: 40px 0; }

/* ─── Historique échanges (front) ────────────────────────────────────────────── */
.f75-bat-history-section { margin-bottom: 24px; }
.f75-bat-history-section__title {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 10px;
    color: #1a1a2e;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.f75-bat-history-list { display: flex; flex-direction: column; gap: 8px; }

.f75-bat-history-item {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
}

/* You (exposant) — bleu clair */
.f75-bat-history-item--exhibitor {
    background: #e8f4fd;
    border-left: 3px solid #0073aa;
}
/* TEAM EXPO (réponse admin) — vert */
.f75-bat-history-item--reply {
    background: #f0f8f2;
    border-left: 3px solid #388e3c;
}
/* BAT envoyé — vert aussi, même équipe */
.f75-bat-history-item--bat {
    background: #f0f8f2;
    border-left: 3px solid #388e3c;
}

.f75-bat-history-item__meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}
.f75-bat-history-item__author {
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.f75-bat-history-item--exhibitor .f75-bat-history-item__author { color: #0073aa; }
.f75-bat-history-item--reply     .f75-bat-history-item__author { color: #388e3c; }
.f75-bat-history-item--bat       .f75-bat-history-item__author { color: #388e3c; }

.f75-bat-history-item__date { font-size: 11px; color: #aaa; white-space: nowrap; }
.f75-bat-history-item__desc { margin: 0; color: #333; word-break: break-word; }

/* ─── Formulaire de réponse ──────────────────────────────────────────────────── */
.f75-bat-response-form {
    background: #fff;
    border: 1px solid var(--f75-bat-border);
    border-radius: var(--f75-bat-radius);
    padding: 24px;
    box-shadow: var(--f75-bat-shadow);
}
.f75-bat-response-form h3 { margin: 0 0 20px; font-size: 16px; font-weight: 700; }

/* ─── Choix A1/A2/A3 ─────────────────────────────────────────────────────────── */
.f75-bat-response-form__choices { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }

.f75-bat-choice {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    border: 2px solid var(--f75-bat-border);
    border-radius: var(--f75-bat-radius);
    cursor: pointer;
    transition: border-color .2s, background .2s;
    user-select: none;
}
.f75-bat-choice:hover { border-color: var(--f75-bat-primary); background: #f0f6fc; }
.f75-bat-choice input[type="radio"] { margin-top: 2px; flex-shrink: 0; }
.f75-bat-choice.is-selected { border-color: var(--f75-bat-primary); background: #e8f4fd; }
.f75-bat-choice--a1.is-selected { border-color: var(--f75-bat-success); background: #f1f8f2; }
.f75-bat-choice--a2.is-selected { border-color: var(--f75-bat-danger);  background: #fff5f5; }
.f75-bat-choice--a3.is-selected { border-color: var(--f75-bat-warning); background: #fff8f0; }
.f75-bat-choice__icon { font-size: 20px; line-height: 1; flex-shrink: 0; }
.f75-bat-choice__text small { color: #777; font-size: 12px; }

/* ─── Commentaire ────────────────────────────────────────────────────────────── */
.f75-bat-response-form__comment { margin-bottom: 16px; }
.f75-bat-response-form__comment label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 14px;
}
.f75-bat-response-form__comment label .required { color: var(--f75-bat-danger); margin-left: 4px; }
.f75-bat-response-form__comment textarea {
    width: 100%;
    border: 1px solid var(--f75-bat-border);
    border-radius: var(--f75-bat-radius);
    padding: 12px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    min-height: 120px;
    transition: border-color .2s;
    box-sizing: border-box;
}
.f75-bat-response-form__comment textarea:focus {
    border-color: var(--f75-bat-primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,115,170,.15);
}

/* ─── Certification ──────────────────────────────────────────────────────────── */
.f75-bat-response-form__certify { margin-bottom: 20px; }
.f75-bat-certify-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    cursor: pointer;
    line-height: 1.5;
}
.f75-bat-certify-label input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; width: 18px; height: 18px; }

/* ─── Bouton submit ──────────────────────────────────────────────────────────── */
.f75-bat-response-form__submit { display: flex; align-items: center; gap: 12px; }
.f75-bat-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 28px;
    border-radius: var(--f75-bat-radius);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background .2s, transform .1s;
    text-decoration: none;
}
.f75-bat-btn--primary { background: var(--f75-bat-primary); color: #fff; }
.f75-bat-btn--primary:hover { background: #005f8d; transform: translateY(-1px); }
.f75-bat-btn--primary:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.f75-bat-btn--secondary {
    background: transparent;
    color: var(--f75-bat-primary);
    border: 2px solid var(--f75-bat-primary);
    margin-top: 14px;
}
.f75-bat-btn--secondary:hover { background: #f0f7fb; transform: translateY(-1px); }

/* ─── Spinner ────────────────────────────────────────────────────────────────── */
.f75-bat-spinner {
    display: inline-block;
    width: 20px; height: 20px;
    border: 2px solid #ddd;
    border-top-color: var(--f75-bat-primary);
    border-radius: 50%;
    animation: f75BatSpin .7s linear infinite;
}
@keyframes f75BatSpin { to { transform: rotate(360deg); } }

/* ─── Messages réponse ───────────────────────────────────────────────────────── */
.f75-bat-response-form__message {
    padding: 14px 18px;
    border-radius: var(--f75-bat-radius);
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.5;
}
.f75-bat-response-form__message--success { background: #e8f5e9; border-left: 4px solid var(--f75-bat-success); color: #1b5e20; }
.f75-bat-response-form__message--error   { background: #ffebee; border-left: 4px solid var(--f75-bat-danger);  color: #b71c1c; }

/* ─── Confirmation finale ────────────────────────────────────────────────────── */
.f75-bat-confirmation { text-align: center; padding: 40px 20px; }
.f75-bat-confirmation__icon { font-size: 60px; margin-bottom: 16px; display: block; }
.f75-bat-confirmation h3 { font-size: 22px; margin: 0 0 12px; }

/* ─── Decision badges (Approved / Refused / Question) ────────────────────────── */
.f75-bat-decision-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    margin-top: 4px;
}
.f75-bat-decision-badge--approved {
    background: #e8f5e9;
    color: #2e7d32;
}
.f75-bat-decision-badge--refused {
    background: #ffebee;
    color: #c62828;
}
.f75-bat-decision-badge--question {
    background: #e3f2fd;
    color: #1565c0;
}

/* ─── Approved banner (Fix 1) ────────────────────────────────────────────────── */
.f75-bat-approved-banner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #e8f5e9;
    border-left: 5px solid #388e3c;
    padding: 16px 24px;
    margin-bottom: 20px;
    border-radius: 0 6px 6px 0;
}
.f75-bat-approved-banner__icon { font-size: 24px; flex-shrink: 0; }
.f75-bat-approved-banner strong { display: block; color: #1b5e20; font-size: 15px; }
.f75-bat-approved-banner span { color: #388e3c; font-size: 13px; }

/* ─── Salon logo (Fix 2) ─────────────────────────────────────────────────────── */
.f75-bat-salon-logo {
    max-height: 78px;
    max-width: 220px;
    object-fit: contain;
    display: block;
    margin-bottom: 10px;
}

/* ─── Proof version link (Fix 3) ─────────────────────────────────────────────── */
.f75-bat-proof-version-link {
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    color: var(--f75-bat-primary);
    text-decoration: none;
    margin-top: 6px;
    letter-spacing: .2px;
}
.f75-bat-proof-version-link:hover { text-decoration: underline; }

/* ─── Proof Sent card ────────────────────────────────────────────────────────── */
.f75-bat-history-item__bat-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}
.f75-bat-proof-version {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a2e;
}
.f75-bat-proof-filename {
    font-size: 12px;
    color: #666;
    font-family: monospace;
    word-break: break-all;
}
.f75-bat-btn-download-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 7px 14px;
    background: var(--f75-bat-primary);
    color: #fff;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    width: fit-content;
    transition: background .2s;
}
.f75-bat-btn-download-inline:hover { background: #005f8d; color: #fff; }

/* ─── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .f75-bat-response-form { padding: 16px; }
    .f75-bat-choice { padding: 10px 12px; }
    .f75-bat-pdf-viewer__toolbar { flex-wrap: wrap; gap: 8px; }
}

/* ─── Mod 2 : header redesign ─────────────────────────────────────────────── */
.f75-bat-validation__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 0 20px;
    border-bottom: 1px solid var(--f75-bat-border);
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.f75-bat-validation__header-left  { flex: 1; min-width: 0; }
.f75-bat-validation__header-center { flex-shrink: 0; text-align: center; }
.f75-bat-validation__header-right  { flex-shrink: 0; display: flex; align-items: center; }

.f75-bat-validation__page-title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #888;
    margin: 0 0 4px;
}
.f75-bat-validation__salon-name {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 6px;
}
.f75-bat-salon-logo--large {
    max-height: 96px;
    max-width: 260px;
    object-fit: contain;
    display: block;
}

/* ─── Mod 2 : bannière approved avec bouton certificate ──────────────────── */
.f75-bat-approved-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #e8f5e9;
    border-left: 5px solid #388e3c;
    padding: 16px 24px;
    margin-bottom: 20px;
    border-radius: 0 6px 6px 0;
}
.f75-bat-approved-banner__icon { font-size: 24px; flex-shrink: 0; }
.f75-bat-approved-banner__text { flex: 1; min-width: 0; }
.f75-bat-approved-banner__text strong { display: block; color: #1b5e20; font-size: 15px; }
.f75-bat-approved-banner__text span { color: #388e3c; font-size: 13px; }

.f75-bat-btn-certificate {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 999px;
    background: #fff;
    border: 1.5px solid #388e3c;
    color: #1b5e20;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .2s, color .2s;
}
.f75-bat-btn-certificate:hover {
    background: #388e3c;
    color: #fff;
    text-decoration: none;
}