/*
 * GE Expertise : small additions on top of the reference template (app.css + custom.css of ge2).
 * Keep this file short : the look must stay the one of ge2.betterandmore.net.
 */

/* Lists (Admin / Clients) : same horizontal scroll wrapper as ge2's admin page */
.admin-table-scroll { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.admin-table-scroll table { width: 100% !important; table-layout: auto; }
.admin-table-scroll th, .admin-table-scroll td { padding-left: .5rem; padding-right: .5rem; }
.admin-table-scroll td { white-space: normal; overflow-wrap: anywhere; }
.admin-table-scroll th { white-space: nowrap; }
.admin-table-scroll td:last-child { white-space: nowrap; }
.admin-table-scroll th:first-child, .admin-table-scroll td:first-child { width: 1% !important; min-width: 48px; white-space: nowrap; text-align: center; }
@media (max-width: 991.98px) { .admin-table-scroll table { min-width: 760px; } }
#users-datatable_wrapper > .row, #applications-datatable_wrapper > .row, #audit-datatable_wrapper > .row { margin-left: 0; margin-right: 0; }

/* ---------- Hidden shortcut to all.php (renderQuickAccessButton) : shown when the mouse is in the top right zone ---------- */
.quick-access-btn { position: fixed; top: 8px; right: 8px; z-index: 2000; display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; color: #fff; background: #047a8a; font-size: 12px; font-weight: 600; text-decoration: none; box-shadow: 0 4px 12px rgba(4, 122, 138, .3); opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity .15s ease, transform .15s ease; }
.quick-access-btn.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.quick-access-btn:hover { color: #fff; background: #006f7c; }

/* ---------- Login page : « Expertise » column on the left, login block on the right ---------- */
.auth-aside { background: linear-gradient(160deg, #e6f2f3 0%, #f7f3ec 100%); }
.auth-aside__inner { height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 40px; }
.auth-aside__icon { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; color: #fff; background: #047a8a; font-size: 28px; box-shadow: 0 6px 16px rgba(4, 122, 138, .25); }
.auth-aside__title { font-size: 24px; font-weight: 700; color: #3f4650; margin-bottom: 10px; }
.auth-aside__text { color: #5c6573; margin-bottom: 16px; }
.auth-aside__list { list-style: none; padding: 0; margin: 0 0 24px; }
.auth-aside__list li { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; color: #4c4c5c; }
.auth-aside__list i { color: #078892; font-size: 17px; line-height: 1.2; }
.auth-main { border-left: 1px solid #e7e9eb; }
@media (max-width: 991.98px) { .auth-main { border-left: 0; border-bottom: 1px solid #e7e9eb; } .auth-aside__inner { padding: 28px; } }

/* ---------- Public pages (landing_page.php, application.php logged out) ---------- */
.public-topbar { position: sticky; top: 0; z-index: 1020; background: #fff; box-shadow: 0 1px 4px rgba(130, 143, 163, .15); }
.public-topbar .container { min-height: 64px; }
.public-topbar__logo img { height: 48px; }
.public-topbar__nav { gap: 22px; margin-left: 18px; }
.public-topbar__nav a { color: #4c4c5c; font-weight: 600; text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.public-topbar__nav a.active, .public-topbar__nav a:hover { color: #047a8a; border-bottom-color: #047a8a; }
.public-main { min-height: calc(100vh - 64px - 56px); padding: 28px 0 40px; }
.public-main .container, .public-topbar .container, .public-footer .container { max-width: 1000px; }
.public-footer { padding: 18px 0; color: #6c757d; background: #fff; border-top: 1px solid #e7e9eb; }
.public-title { font-size: 26px; font-weight: 700; color: #3f4650; margin-bottom: 10px; }
.public-section-title { font-size: 18px; font-weight: 700; color: #3f4650; margin: 30px 0 14px; }
.app-form-intro { margin-bottom: 20px; }

/* Landing page */
.landing-hero .card-body { padding: 32px; }
.landing-hero__question { font-size: 15px; font-weight: 700; margin: 18px 0 12px; }
.landing-hero__icon { width: 170px; height: 170px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #e6f2f3; color: #047a8a; font-size: 90px; }
.landing-step { margin-bottom: 12px; }
.landing-step__title { font-size: 16px; font-weight: 700; color: #047a8a; margin: 6px 0 6px; }
.landing-duo { background: #f7f3ec; border-radius: 6px; padding: 12px 16px; font-size: 13px; }
.landing-cta { margin-top: 24px; border-left: 4px solid #047a8a; }
.landing-cta h3 { font-size: 16px; font-weight: 700; color: #3f4650; }
.quick-card { transition: box-shadow .15s ease, transform .15s ease; }
.quick-card:hover { box-shadow: 0 4px 14px rgba(4, 122, 138, .18); transform: translateY(-1px); }

/* ---------- Steps of the request form : numbered steps of ge2's Gem Finder (grey = locked, teal = active / done) ---------- */
.app-step { margin-bottom: 20px; transition: opacity .2s ease; }
.app-step__head { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: #f7f3ec; border-radius: 4px 4px 0 0; }
.app-step__number { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; color: #fff; background: #a7b3bf; font-weight: 600; }
.app-step.is-active .app-step__number, .app-step.is-complete .app-step__number, .app-step__number.is-on { background: #078892; }
.app-step__title { font-size: 16px; font-weight: 700; color: #3f4650; margin: 0; }
.app-step__subtitle { margin: 2px 0 0; color: #6c757d; font-size: 12px; }
.app-step.is-disabled { opacity: .45; }
.app-step.is-disabled fieldset { pointer-events: none; }
.app-step fieldset { border: 0; min-width: 0; }
.app-short { max-width: 180px; }
.app-choice { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.app-sub { margin-top: 12px; padding: 12px 16px; background: #f7f9fa; border-left: 3px solid #047a8a; border-radius: 0 6px 6px 0; }
.app-check { padding: 12px 16px 12px 40px; background: #f7f9fa; border-radius: 6px; }
/* Photo drop zone + thumbnails : component of ge2's Gem Finder (gemscustom.css .gem-finder-info-dropzone / -preview) */
.app-dropzone { display: grid; place-items: center; min-height: 140px; padding: 18px; border: 1px dashed #c9dde2; border-radius: 4px; color: #8a93a0; background: #fff; text-align: center; cursor: pointer; transition: border-color .16s ease, background .16s ease; }
.app-dropzone:hover, .app-dropzone.is-dragover { border-color: #078892; background: #f3fbfc; }
.app-dropzone input { display: none; }
.app-dropzone > i { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-bottom: 8px; border-radius: 50%; color: #05a5bd; background: #ddf7fa; font-size: 17px; }
.app-dropzone strong { color: #5a6470; font-size: 14px; font-weight: 600; }
.app-dropzone span { display: block; color: #9aa3ad; font-size: 13px; font-style: italic; }
.app-dropzone b { display: inline-flex; align-items: center; min-height: 24px; margin-top: 12px; padding: 5px 10px; border: 1px solid #dfe5eb; border-radius: 2px; color: #313944; background: #fff; font-size: 12px; font-weight: 600; line-height: 1; }
.app-photo-preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)); gap: 8px; }
.app-photo-preview.is-empty { display: none; }
.app-photo-preview article { position: relative; min-width: 0; border: 1px solid #dfe7ec; border-radius: 3px; background: #fff; overflow: hidden; }
.app-photo-preview img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #f1f3f5; }
.app-photo-preview span { display: block; padding: 6px 7px; color: #5c6670; font-size: 10px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-photo-preview button { position: absolute; top: 4px; right: 4px; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; color: #fff; background: rgba(42, 51, 61, .78); line-height: 1; }
.app-photo-preview button:hover { background: #9c1d3a; }
.app-recap dt { font-weight: 600; color: #6c757d; }
.app-recap dd { margin-bottom: 6px; }

/* Step « Votre compte » : two halves separated by a vertical line, the inactive half dimmed */
.app-account__side { padding: 4px 28px; transition: opacity .2s ease; }
.app-account__side + .app-account__side { border-left: 1px solid #e7e9eb; }
.app-account__side.is-inactive { opacity: .4; }
.app-account__title { font-size: 15px; font-weight: 700; margin-bottom: 14px; }
.app-or { display: flex; align-items: center; gap: 10px; color: #a7b3bf; font-size: 12px; text-transform: uppercase; }
.app-or::before, .app-or::after { content: ""; flex: 1; border-top: 1px solid #e7e9eb; }
.app-google { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #fff; cursor: not-allowed; }
@media (max-width: 767.98px) {
    .app-account__side { padding: 4px 4px 20px; }
    .app-account__side + .app-account__side { border-left: 0; border-top: 1px solid #e7e9eb; padding-top: 20px; }
}

/* ---------- Request sheet : journey timeline (same numbered circles) ---------- */
.app-timeline { display: flex; gap: 8px; }
.app-timeline__item { flex: 1; text-align: center; position: relative; color: #6c757d; font-size: 12px; font-weight: 600; }
.app-timeline__item:not(:last-child)::after { content: ""; position: absolute; top: 18px; left: calc(50% + 24px); right: calc(-50% + 24px); height: 2px; background: #cbd3db; }
.app-timeline__item.is-done:not(:last-child)::after { background: #078892; }
.app-timeline__item .app-step__number { margin-bottom: 6px; }
.app-timeline__item.is-done .app-step__number { background: #078892; }
.app-timeline__item.is-current .app-step__number { background: #fff; color: #078892; box-shadow: inset 0 0 0 2px #078892; }
.app-timeline__item.is-current { color: #3f4650; }
.app-photo { width: 110px; height: 110px; object-fit: cover; border-radius: 6px; }

/* Process steps : each step coloured by ITS OWN status (done teal, in progress orange, failed / refused red) */
.app-timeline__state { font-size: 11px; font-weight: 400; color: #8a93a0; margin-top: 2px; }
.app-timeline__item.is-progress .app-step__number { background: #f2a33a; }
.app-timeline__item.is-blocked .app-step__number { background: #9c1d3a; }
.app-timeline__item.is-done .app-timeline__state { color: #078892; }
.app-timeline__item.is-progress .app-timeline__state { color: #c7811c; }
.app-timeline__item.is-blocked .app-timeline__state { color: #9c1d3a; }
.app-step__number--sm { width: 26px; height: 26px; flex-basis: 26px; font-size: 12px; }
.app-step__number.is-progress { background: #f2a33a; }
.app-step__number.is-blocked { background: #9c1d3a; }
.app-steps-table td { vertical-align: middle; }

/* Deposit blocks : photos / videos, private note */
.app-media { width: 120px; height: 120px; object-fit: cover; border-radius: 6px; background: #000; }
.app-private-note { padding: 8px 12px; background: #fff8ec; border-left: 3px solid #f2a33a; border-radius: 0 6px 6px 0; }
.app-photo-preview article.is-video video { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #000; }
.app-photo-preview article.is-video::after { content: "\eb40"; font-family: tabler-icons; position: absolute; left: 6px; top: 6px; color: #fff; font-size: 16px; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.list-photo-lg { width: 64px; height: 64px; object-fit: cover; }
/* Tables of requests (many columns) : headers and long status badges may wrap */
.admin-table-scroll .app-list-table th, .admin-table-scroll #users-datatable th { white-space: normal; }
.app-list-table .badge { white-space: normal; text-align: left; line-height: 1.3; }

/* ---------- Traceability table (ge2 « Historique » : table + « Voir les détails » with the changed fields) ---------- */
.audit-log-table td { vertical-align: top; }
.audit-details-cell { min-width: 220px; font-size: 12px; }
.audit-details summary { cursor: pointer; list-style-position: inside; }
.audit-details .audit-hide-label { display: none; }
.audit-details[open] .audit-show-label { display: none; }
.audit-details[open] .audit-hide-label { display: inline; }
.audit-table { table-layout: fixed; width: 100%; }
.audit-table th, .audit-table td { white-space: normal; overflow-wrap: anywhere; }
.audit-table th:first-child, .audit-table td:first-child { width: 28%; }

/* Photo of a list row (ge2 : img-thumbnail 40 x 40) */
.list-photo { width: 40px; height: 40px; object-fit: cover; }

/* Empty pages of the client menu (to be built) */
.page-placeholder { min-height: 260px; }

/* Dashboard blocks : style block of ge2's dashboard page, copied as is (dashboard-stat-card, dashboard-chart-card) */
.geogems-dashboard {
    --dashboard-teal: #047a8a;
    --dashboard-teal-dark: #006f7c;
    --dashboard-mint: #28c7aa;
    --dashboard-aqua: #8ce7df;
    --dashboard-surface: #ffffff;
    --dashboard-border: #e9edf3;
    --dashboard-muted: #9aa5b1;
    --dashboard-text: #5c6573;
    max-width: 1040px;
    padding: 16px 0 24px;
}

.geogems-dashboard .dashboard-stat-card,
.geogems-dashboard .dashboard-chart-card {
    background: var(--dashboard-surface);
    border: 1px solid var(--dashboard-border);
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(18, 38, 63, 0.03);
}

.geogems-dashboard .dashboard-stat-card {
    min-height: 70px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 17px 22px;
}

.geogems-dashboard .stat-icon {
    width: 34px;
    min-width: 34px;
    color: #8a96a6;
    font-size: 28px;
    line-height: 1;
}

.geogems-dashboard .stat-content {
    min-width: 0;
    flex: 1;
}

.geogems-dashboard .stat-title {
    color: #626b78;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
}

.geogems-dashboard .stat-subtitle {
    color: var(--dashboard-muted);
    font-size: 11px;
    line-height: 1.2;
    margin-top: 3px;
}

.geogems-dashboard .stat-value {
    color: #4f5968;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
    margin-left: auto;
    white-space: nowrap;
}

.geogems-dashboard .dashboard-chart-card {
    height: 100%;
    padding: 14px 16px 12px;
}

.geogems-dashboard .chart-title {
    color: #5d6674;
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 8px;
}

.geogems-dashboard .donut-chart {
    width: 100%;
    height: 245px;
}

.geogems-dashboard .bar-chart {
    width: 100%;
    height: 285px;
}

.geogems-dashboard .chart-row {
    --bs-gutter-x: 20px;
    --bs-gutter-y: 20px;
}

.geogems-dashboard .stat-row {
    --bs-gutter-x: 20px;
    --bs-gutter-y: 16px;
    margin-bottom: 18px;
}

.geogems-dashboard .bar-card {
    margin-top: 20px;
}

@media (max-width: 767.98px) {
    .geogems-dashboard {
        padding-top: 12px;
    }

    .geogems-dashboard .dashboard-stat-card {
        padding: 15px 16px;
    }

    .geogems-dashboard .stat-value {
        font-size: 18px;
    }

    .geogems-dashboard .donut-chart {
        height: 230px;
    }

    .geogems-dashboard .bar-chart {
        height: 320px;
    }
}

/* Process steps : payment documents (section Règlement), delivery file templates and analysis form (07/10/2026) */
.app-photo-preview__doc { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; aspect-ratio: 1; color: #078892; background: #f3fbfc; }
.app-photo-preview__doc i { font-size: 26px; }
.app-photo-preview__doc b { color: #5a6470; font-size: 11px; }
.app-file-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 120px; height: 120px; padding: 8px; border-radius: 6px; color: #5a6470; background: #f3fbfc; text-align: center; text-decoration: none; }
.app-file-tile i { color: #078892; font-size: 28px; }
.app-file-tile b { font-size: 11px; }
.app-file-tile span { width: 100%; font-size: 10px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-file-tile:hover { color: #078892; border-color: #078892 !important; }
/* Document cards (templates of the Analyse tab, delivery documents) : title big on top, preview (image of the first
   page, uploaded PDF in a small frame, photo thumbnail) under a transparent zoom button, then file name + buttons */
.app-doc-card { overflow: hidden; }
.app-doc-card .card-header .card-title { font-size: 1.15rem; font-weight: 700; }
.app-doc-card__preview { position: relative; height: 230px; border-bottom: 1px solid #e7e9eb; background: #f1f2f7; overflow: hidden; }
.app-doc-card__preview img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.app-doc-card__preview img.is-photo { object-position: center; }
.app-doc-card__preview iframe { display: block; width: calc(100% + 18px); height: calc(100% + 18px); border: 0; pointer-events: none; background: #fff; } /* +18px : scrollbars of the PDF viewer hidden */
.app-doc-card__zoom { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; width: 100%; padding: 0; border: 0; background: transparent; color: #fff; font-size: 34px; cursor: zoom-in; transition: background-color .15s; }
.app-doc-card__zoom i { opacity: 0; transition: opacity .15s; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.app-doc-card__zoom:hover, .app-doc-card__zoom:focus-visible { background: rgba(7, 136, 146, .28); }
.app-doc-card__zoom:hover i, .app-doc-card__zoom:focus-visible i { opacity: 1; }
/* Document viewer modal (#docViewerModal) : PDF in a frame or image in big */
.app-doc-viewer { background: #f1f2f7; }
.app-template-frame { display: block; width: 100%; height: 78vh; border: 0; background: #525659; }
.app-doc-viewer img { display: block; max-width: calc(100% - 24px); max-height: 78vh; margin: 12px auto; }
/* Welcome modal of the client area : image of the left menu (Expertise selected) + its text */
.app-welcome-tip { padding: 12px; background: #f3fbfc; border-radius: 6px; }
.app-welcome-tip__image { width: 210px; max-width: 100%; flex-shrink: 0; border: 1px solid #e1e5ea; border-radius: 6px; background: #fff; box-shadow: 0 2px 8px rgba(30, 40, 50, .08); }
/* Avancé (ge2 advanced page) : inactive buttons of the « Divers » box */
.advanced-page .app-option-disabled { cursor: not-allowed; }
.advanced-page .app-option-disabled:hover { background-color: transparent; }
.advanced-page .app-option-disabled .metric-title { color: #adb5bd; }
.advanced-page .btn-go:disabled, .advanced-page .btn-go:disabled:hover { opacity: .45; cursor: not-allowed; background: transparent; border-color: #e7eaec; color: #047A8A; }
/* Avancé : cards reached by an anchor (#EM-003, #quote.sent…) stay below the fixed topbar */
.app-anchor, .app-anchor-row { scroll-margin-top: 90px; }
.app-anchor-row:target td { background-color: #fff8ec; }
/* Avancé › E-mails : preview of an email as received */
.app-email-preview { border: 1px solid #e1e5ea; border-radius: 6px; background: #fff; }
.app-email-preview__head { padding: 10px 14px; border-bottom: 1px solid #e1e5ea; background: #f8f9fa; font-size: 13px; }
.app-email-preview__head div + div { margin-top: 2px; }
.app-email-preview__body { padding: 14px 18px; }
.app-email-preview__body a { pointer-events: none; }
/* Rich text shown to the client / admin (delivery notes, includes/richtext.php) : the formatting of the editor is kept */
.app-richtext > :last-child { margin-bottom: 0; }
.app-richtext p { margin-bottom: .5rem; }
.app-richtext blockquote { margin: 0 0 .5rem; padding: 4px 12px; border-left: 3px solid #cfd8dc; color: #5a6470; }
.app-richtext pre { padding: 8px 10px; background: #f6f7f9; border-radius: 4px; white-space: pre-wrap; }
.app-richtext table { width: auto; max-width: 100%; margin-bottom: .5rem; border-collapse: collapse; }
.app-richtext table td, .app-richtext table th { padding: 4px 8px; border: 1px solid #dee2e6; }
.app-richtext ul, .app-richtext ol { margin-bottom: .5rem; padding-left: 1.4rem; }
.app-richtext hr { margin: .75rem 0; }
.note-editor.note-frame { margin-bottom: 0; }
/* RGPD policy (modal of the footer, privacy.php) */
.app-legal h6 { margin: 1.1rem 0 .4rem; color: #047a8a; font-weight: 700; }
.app-legal p, .app-legal li { font-size: 13.5px; line-height: 1.6; }
.app-legal ul { padding-left: 1.2rem; }
/* Step 5 of the request form : signature pad (assets/js/signature-pad.js) */
.app-signature-pad { position: relative; max-width: 560px; height: 200px; border: 2px dashed #b9c4cc; border-radius: 8px; background: #fff; touch-action: none; }
.app-signature-pad canvas { display: block; width: 100%; height: 100%; cursor: crosshair; border-radius: 8px; }
.app-signature-pad__hint { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font-size: 12px; color: #9aa5ae; pointer-events: none; }
.app-signature-pad.has-signature .app-signature-pad__hint { display: none; }
.app-signature-pad.is-invalid { border-color: #d63939; }
/* Signatures : profile (box next to the photo), signatories of the delivery modal */
.app-signature-box { display: flex; align-items: center; justify-content: center; width: 180px; height: 80px; padding: 6px; border: 1px dashed #cfd8dc; border-radius: 6px; background: #fff; }
.app-signature-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
.app-signature-slot { min-height: 24px; }
.app-client-signature { display: block; max-width: 260px; max-height: 90px; padding: 4px 8px; border: 1px solid #e1e5ea; border-radius: 6px; background: #fff; object-fit: contain; }
.app-signature-slot img { display: block; max-width: 220px; max-height: 70px; padding: 4px 8px; border: 1px solid #e1e5ea; border-radius: 6px; background: #fff; object-fit: contain; }
/* Client dashboard : banner while the email address is not validated (« Envoyez-moi l'e-mail à nouveau ») */
.app-verify-banner > i { line-height: 1; }
/* Delivery : note of the experts to the client */
.app-delivery-note { padding: 12px 16px; background: #f3fbfc; border-left: 3px solid #078892; border-radius: 0 6px 6px 0; }
.app-analysis-nav { position: sticky; top: 90px; }
.app-analysis-nav ol { margin: 0 0 12px; padding: 0; list-style: none; }
.app-analysis-nav li a { display: block; padding: 5px 10px; border-radius: 4px; color: #4c4c5c; font-size: 13px; text-decoration: none; }
.app-analysis-nav li a:hover { color: #078892; background: #f3fbfc; }
.app-analysis-step { padding: 4px 0 12px; margin-bottom: 18px; border-bottom: 1px solid #e7e9eb; scroll-margin-top: 90px; }
.app-analysis-step h5 { margin-bottom: 14px; padding: 8px 12px; background: #f7f3ec; border-radius: 4px; }
.app-analysis-form .btn-check + .btn-outline-secondary { font-weight: 500; }
.app-analysis-photo { width: 120px; }
/* Saving indicator + warning of the analysis form (assets/js/pages/analysis-form.js) : « Enregistrer » grey and
   disabled until a modification, then green with the warning that nothing is saved automatically */
.app-save-status { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #2e7d4f; }
.app-save-status.is-unsaved { color: #b26a00; }
.app-save-status.is-saving { color: #6c757d; }
.app-save-warning { display: flex; gap: 6px; margin-top: 8px; padding: 6px 8px; font-size: 12px; line-height: 1.4; color: #7a4a00; background: #fff8ec; border-left: 3px solid #f2a33a; border-radius: 0 4px 4px 0; }
.app-save-warning > i { margin-top: 1px; color: #e8590c; }
.app-save-warning.d-none { display: none !important; }
.app-save-status.is-saving i { animation: app-spin 1s linear infinite; }
.app-save-status.is-error { color: #d63939; }
@keyframes app-spin { to { transform: rotate(360deg); } }
/* Workflow, Liste tab : the summary buttons scroll to the lists below the fixed topbar */
.card[id^="list-"] { scroll-margin-top: 90px; }

/* Age tags « il y a … » (timeAgoBadge(), TIME_AGE_LEVELS) : mauve (1 day or less) -> bright red (more than 7 days) */
.badge.app-age { color: #fff; font-weight: 600; }
.app-age--1 { background-color: #9b59b6; }
.app-age--2 { background-color: #b0409a; }
.app-age--3 { background-color: #c92a73; }
.app-age--4 { background-color: #e01e48; }
.app-age--5 { background-color: #ff1a1a; }
.app-age-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
/* Help bubble « ? » (shown at once on mouse over or keyboard focus, not a title attribute) */
.app-help { position: relative; display: inline-flex; align-items: center; color: #078892; font-size: 18px; font-weight: 400; cursor: help; outline: none; }
.app-help__content { display: none; position: absolute; top: calc(100% + 6px); left: -10px; z-index: 30; width: 360px; max-width: 80vw; padding: 10px 12px; border: 1px solid #dfe7ec; border-radius: 6px; background: #fff; box-shadow: 0 6px 18px rgba(30, 40, 50, .15); color: #4c4c5c; font-size: 13px; line-height: 1.5; text-transform: none; letter-spacing: normal; white-space: normal; }
.app-help:hover .app-help__content, .app-help:focus .app-help__content, .app-help:focus-within .app-help__content { display: block; }
/* Fold / unfold button of a list : the chevron turns when the list is folded */
.app-collapse-toggle i { transition: transform .15s ease; }
.app-collapse-toggle[aria-expanded="false"] i { transform: rotate(180deg); }
/* Scrollable modals whose body is inside a <form> (Dépôt, Règlement, Devis…) : the form must be the flex column of the
   modal so that .modal-body scrolls between the fixed header and footer (otherwise the content is cut, no scroll) */
.modal-dialog-scrollable .modal-content > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.modal-dialog-scrollable .modal-content > form > .modal-body { overflow-y: auto; }

/* Livraison tab : payment banner (green = paid, red = not paid yet), full width of the tab content */
.app-pay-banner { display: flex; align-items: center; gap: 12px; margin-bottom: 1.5rem; padding: 12px 16px; border: 1px solid; border-radius: 6px; }
.app-pay-banner > i { font-size: 24px; line-height: 1; }
.app-pay-banner--ok { background: #e6f4ea; border-color: #b7dfc4; color: #1e5e36; }
.app-pay-banner--ok > i { color: #146c35; }
.app-pay-banner--ko { background: #fdecea; border-color: #f5c2c0; color: #8a1f1b; }
.app-pay-banner--ko > i { color: #e8590c; }
/* Delivery documents (admin and client) and template preview icon of the delivery modal */
.app-delivery-files li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 0; border-bottom: 1px solid #e7e9eb; }
.app-delivery-files li > i { font-size: 20px; }
.app-preview-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; color: #078892; background: #f3fbfc; text-decoration: none; }
.app-preview-icon:hover { color: #fff; background: #078892; }
/* Payment blocks in the quote follow-up (steps 3 and 4) */
.app-payment-entry { padding: 6px 0; border-top: 1px dashed #e1e5ea; }
.app-payment-entry:first-child { border-top: 0; padding-top: 0; }
.app-media--sm { width: 56px; height: 56px; }
.app-file-tile--sm { width: 56px; height: 56px; padding: 4px; }
.app-file-tile--sm i { font-size: 18px; }
/* Devis tab (08/10/2026) : two clearly separated parts — the quote on the left, its follow-up on the right (tinted card,
   teal top border) ; invoice block ; QR code of the « Partage » tab */
.app-follow-card { background: #f5fafb; border-top: 3px solid #078892 !important; }
.app-follow-card > .card-header { background: transparent; }
.app-follow-card .table { --bs-table-bg: transparent; }
.app-invoice-link { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #b7dfc4; border-radius: 6px; background: #f1faf4; }
.app-qr-code { max-width: 240px; }
.app-qr-code svg { display: block; width: 100%; height: auto; }
/* Public page of a shared analysis (share.php) */
.share-page { max-width: 1140px; margin: 0 auto; }
.share-hero { border-top: 4px solid #078892; }
.share-hero__logo { height: 56px; width: auto; }
.share-hero__title { margin: 4px 0; font-size: 26px; font-weight: 700; color: #047a8a; }
.share-photo-main { display: block; width: 100%; max-height: 420px; object-fit: contain; border-radius: 6px; background: #f7f3ec; }
.share-result { border-left: 4px solid #9c1d3a; }
.share-step { margin: 0 0 8px; padding: 6px 10px; border-radius: 4px; background: #f7f3ec; color: #9c1d3a; font-weight: 700; }
/* Public analysis page (share.php, 08/10/2026 (2)) : certificate of authenticity, owner, photo thumbnails, print layout.
   custom.css of ge2 hides every element when printing (body * { visibility: hidden } except #printContent) : the public
   page makes everything visible again and hides only the top bar, the footer and the buttons. */
.share-certificate { border-left: 4px solid #1c7c43; }
.share-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.share-thumbs img { width: 84px; height: 84px; object-fit: cover; border-radius: 4px; }
@media print {
    @page { size: A4; margin: 12mm; }
    body.public-page { background: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    body.public-page * { visibility: visible !important; }
    body.public-page .public-topbar, body.public-page .public-footer, body.public-page .quick-access-btn, body.public-page .modal,
    body.public-page .share-no-print { display: none !important; }
    body.public-page .public-main { min-height: 0; padding: 0; }
    body.public-page .public-main .container { max-width: none; padding: 0; }
    .share-page { max-width: none; font-size: 12px; }
    .share-page .card { box-shadow: none !important; border: 1px solid #dfe3e7 !important; margin-bottom: 10px !important; break-inside: avoid; page-break-inside: avoid; }
    .share-page .share-data { break-inside: auto; page-break-inside: auto; }
    .share-page .share-step-block { break-inside: avoid; page-break-inside: avoid; }
    .share-page .card-header { padding: 8px 14px !important; }
    .share-page .card-body { padding: 10px 14px !important; } /* app.css of Inspinia sets 0 !important when printing */
    .share-hero__logo { height: 44px; }
    .share-hero__title { font-size: 22px; }
    .share-photo-main { max-height: 300px; }
    .share-thumbs img { width: 120px; height: 120px; }
}
/* Admin Dashboard (08/10/2026 (2)) : « Notifications » block on the right, scrollable when it gets long */
.app-dash-notifications { max-height: 720px; overflow-y: auto; }
/* « Enregistrer » of the analysis form while nothing has changed (08/10/2026) : GREY background, also when disabled
   (btn-secondary is blue in Inspinia, and Bootstrap fades a disabled button : opacity kept at 1) */
.app-btn-idle {
    --ins-btn-color: #fff; --ins-btn-bg: #a1a9b1; --ins-btn-border-color: #a1a9b1;
    --ins-btn-hover-color: #fff; --ins-btn-hover-bg: #8a969c; --ins-btn-hover-border-color: #8a969c;
    --ins-btn-active-color: #fff; --ins-btn-active-bg: #8a969c; --ins-btn-active-border-color: #8a969c;
    --ins-btn-disabled-color: #fff; --ins-btn-disabled-bg: #a1a9b1; --ins-btn-disabled-border-color: #a1a9b1;
    --ins-btn-disabled-opacity: 1;
}