.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

/* ==========================================================================
   Enveloppe CCA
   Les couleurs viennent TOUTES des variables --cca-* écrites par App.razor à
   partir de CcaTheme. Aucune valeur en dur ici : sinon le mode sombre décroche.
   ========================================================================== */

html, body {
    height: 100%;
}

/* Tirer-pour-rafraîchir NATIF de Chrome coupé : il rechargeait toute la page (retour au login).
   Chrome ne le lit que sur l'élément RACINE (html) : sur body seul, il était ignoré. L'app a le sien
   (CcaPullToRefresh), comme le RefreshView du mobile. */
html {
    overscroll-behavior-y: none;
}

body {
    background: var(--cca-surface-primary);
    color: var(--cca-text-primary);
    overscroll-behavior-y: none;
}

/* Le shell occupe l'écran entier et ne défile jamais : ce sont ses sections qui défilent, comme la
   page principale du mobile. */
.cca-shell {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    background: var(--cca-surface-primary);
    padding-bottom: env(safe-area-inset-bottom);
}

/* Conteneur des trois vues ET des feuilles. En position relative : c'est lui qui borne les
   feuilles, ce qui les arrête naturellement au-dessus de la barre du bas. */
.cca-shell-body {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* Les trois vues restent MONTÉES : masquées, elles gardent leur état (défilement, chargement),
   exactement comme le IsVisible du mobile. */
.cca-section {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--cca-surface-primary);
}

.cca-section.is-hidden {
    display: none;
}

/* ----- Barre du bas ----- */

.cca-bottombar {
    flex: 0 0 64px;
    height: 64px;
    display: flex;
    background: var(--cca-surface-card);
    border-top: 1px solid var(--cca-card-outline);
}

.cca-tab {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
    font: inherit;
    color: var(--cca-text-secondary);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.cca-tab.is-selected {
    color: var(--cca-primary);
}

.cca-tab-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.cca-tab-label {
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

/* ----- Bandes d'état ----- */

.cca-offline {
    flex: 0 0 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cca-danger);
    color: var(--cca-surface-card);
    font-size: 12px;
}

.cca-revoked {
    padding: 8px 12px;
    background: var(--cca-danger);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}

/* ----- Écrans pleins (liste, calendrier, poinçons, livraisons) ----- */

/* En position fixe : ils recouvrent la barre du bas, là où le mobile empile une page modale. */
.cca-screen {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    flex-direction: column;
    background: var(--cca-surface-primary);
    padding-bottom: env(safe-area-inset-bottom);
}

.cca-screen-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 10px 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ----- Écrans de garde (ouverture du coffre, page introuvable) ----- */

.cca-gate {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 32px 28px;
    text-align: center;
    background: var(--cca-surface-primary);
    color: var(--cca-text-primary);
}

.cca-gate-title {
    font-size: 1.25rem;
    font-weight: 600;
}

.cca-gate-text {
    font-size: 0.9375rem;
    color: var(--cca-text-secondary);
    max-width: 32ch;
}

/* ----- Invite de mise à jour ----- */

.cca-update {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--cca-surface-card);
    color: var(--cca-text-primary);
    border: 1px solid var(--cca-card-outline);
    box-shadow: var(--cca-soft-shadow);
    z-index: 1600;
}

.cca-update-text {
    flex: 1 1 auto;
    font-size: 0.8125rem;
}

.cca-update-apply,
.cca-update-later {
    background: none;
    border: none;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 4px 6px;
    cursor: pointer;
}

.cca-update-apply {
    color: var(--cca-primary);
}

.cca-update-later {
    color: var(--cca-text-secondary);
}

/* ==========================================================================
   Feuille du bas
   Bornée par .cca-shell-body : elle s'arrête au-dessus de la barre du bas,
   comme sur le mobile où elle vit dans la zone de contenu.
   ========================================================================== */

.cca-sheet-scrim {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: rgba(0, 0, 0, 0.45);
}

/* Deux hauteurs, en fraction du conteneur pour rester justes quel que soit l'appareil. C'est la
   HAUTEUR qui est animée, pas la translation : le pied du contenu reste ainsi collé en bas dans
   les deux positions (cf. le commentaire du composant). */
.cca-sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 21;
    display: flex;
    flex-direction: column;
    background: var(--cca-surface-card);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.18);
    /* Courbe de la maquette : départ franc, arrivée très amortie. */
    transition: height 240ms cubic-bezier(.32, .72, 0, 1);
    animation: cca-sheet-in 240ms cubic-bezier(.32, .72, 0, 1);
}

.cca-sheet.is-reduced { height: 55%; }
.cca-sheet.is-expanded { height: 88%; }

/* Pendant le glissement, la hauteur suit le doigt : toute transition la ferait traîner. */
.cca-sheet.is-dragging {
    transition: none;
    max-height: 100%;
}

@keyframes cca-sheet-in {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* Tirer pour rafraîchir (CcaPullToRefresh) : roue du RefreshView, couleur Primary. Position et tirage posés par
   cca-app.js ; élément dans <body>, en position fixe au-dessus de la zone qui défile.
   z-index au-dessus des écrans pleins (.cca-screen, 1400) : la liste des bons en est un, et à 25 la roue tournait
   dessous, invisible. Reste sous les couches du dessus (pad, éditeur, scanner 1450 ; confirmations 1500). */
.cca-ptr {
    position: fixed;
    z-index: 1410;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--cca-surface-card);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    opacity: 0;
    pointer-events: none;
}

.cca-ptr-spinner {
    width: 22px;
    height: 22px;
    border: 3px solid var(--cca-primary);
    border-right-color: transparent;
    border-radius: 50%;
}

.cca-ptr.is-refreshing .cca-ptr-spinner {
    animation: cca-ptr-spin 800ms linear infinite;
}

@keyframes cca-ptr-spin {
    to { transform: rotate(360deg); }
}

/* Poignée + en-tête : la SEULE zone qui capte le glissement, pour que le contenu défile librement. */
.cca-sheet-drag {
    flex: 0 0 auto;
    touch-action: none;
    cursor: grab;
}

.cca-sheet-grab {
    width: 38px;
    height: 4px;
    border-radius: 2px;
    background: var(--cca-divider);
    margin: 10px auto 0;
}

.cca-sheet-title {
    padding: 10px 16px;
    font-size: 17px;
    font-weight: 700;
    color: var(--cca-text-primary);
}

.cca-sheet-separator {
    flex: 0 0 1px;
    height: 1px;
    background: var(--cca-card-outline);
}

.cca-sheet-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 0 14px 16px;
}

.cca-sheet-pad {
    padding: 14px 0;
}

/* Rangée d'action d'une feuille : même vocabulaire que les cartes du tableau de bord. */
.cca-sheetaction {
    display: flex;
    align-items: center;
    justify-content: flex-start;   /* cf. le piège des <button> flex */
    gap: 11px;
    width: 100%;
    padding: 13px 14px;
    background: var(--cca-surface-card);
    border: 1px solid var(--cca-card-outline);
    border-radius: 14px;
    color: var(--cca-text-primary);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

/* ----- Feuille « Bons de travail » : trois bandes, seule celle du milieu défile ----- */

.cca-womenu {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 14px;
}

.cca-womenu-middle {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cca-womenu-legend {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cca-womenu-legend-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--cca-text-secondary);
}

.cca-womenu-badge {
    padding: 2px 7px;
    border-radius: 9px;
    background: var(--cca-accent-blue-bg);
    color: var(--cca-primary);
    font-size: 12px;
    font-weight: 700;
}

.cca-womenu-unsaved {
    margin-left: auto;
    font-size: 12px;
    color: var(--cca-accent-amber);
}

.cca-womenu-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 4px;
}

.cca-womenu-footer {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--cca-card-outline);
}

/* PIÈGE : dans un conteneur flex en COLONNE qui défile, les enfants ont flex-shrink: 1 par défaut.
   Ils se font donc COMPRIMER pour tenir dans la hauteur visible au lieu de déborder et de faire
   défiler — la dernière ligne d'une fiche se retrouve coupée (la date des bons de travail, par
   exemple). overflow-y: auto n'y change rien : le rétrécissement se décide avant le débordement.
   Tout enfant direct d'une liste défilante doit donc refuser de rétrécir. */
.cca-searchlist > *,
.cca-screen-scroll > *,
.cca-bt-scroll > *,
.cca-womenu-list > *,
.cca-nextrdv-list > *,
.cca-cal-items > *,
.cca-cal-bands > * {
    flex-shrink: 0;
}

/* ==========================================================================
   Cartes et rangées communes
   ========================================================================== */

.cca-card {
    background: var(--cca-surface-card);
    border: 1px solid var(--cca-card-outline);
    border-radius: 8px;
    color: var(--cca-text-primary);
}

/* Rangée d'un bon — la feuille des bons ouverts et la liste de recherche partagent le gabarit. */
.cca-worow {
    display: flex;
    align-items: center;
    justify-content: flex-start;   /* cf. le piège des <button> flex, plus bas */
    gap: 12px;
    width: 100%;
    padding: 13px 14px;
    border-radius: 14px;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

/* Pastille du numéro. Carrée de 38 comme le mobile pour un numéro court (« 70 »), mais elle
   s'allonge plutôt que de laisser le texte se casser sur trois lignes : les numéros de série
   longs (« BT-26-0010 ») font exploser la hauteur de la rangée sinon. */
.cca-worow-numero {
    flex: 0 0 auto;
    min-width: 38px;
    height: 38px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--cca-accent-blue-bg);
    color: var(--cca-primary);
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

.cca-worow-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cca-worow-client {
    font-size: 16px;
    font-weight: 700;
    color: var(--cca-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cca-worow-ville {
    font-size: 13px;
    color: var(--cca-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cca-worow-dirty {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--cca-accent-amber);
}

.cca-worow-dot {
    width: 7px;
    height: 7px;
    border-radius: 4px;
    background: var(--cca-accent-amber);
}

.cca-worow-date {
    flex: 0 0 auto;
    font-size: 13px;
    color: var(--cca-text-secondary);
    white-space: nowrap;
}

/* ----- État vide ----- */

.cca-emptystate {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 26px 20px;
    background: var(--cca-surface-primary);
    border: 1px solid var(--cca-card-outline);
    border-radius: 14px;
    text-align: center;
}

.cca-emptystate-chip {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
}

.cca-emptystate-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--cca-text-primary);
}

.cca-emptystate-text {
    max-width: 230px;
    font-size: 13px;
    color: var(--cca-text-secondary);
}

/* Variante compacte, sur une ligne : l'état vide des cartes du tableau de bord. */
.cca-emptycard {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 12px;
    border-radius: 12px;
    box-shadow: var(--cca-soft-shadow);
    color: var(--cca-text-secondary);
    font-size: 16px;
}

/* ==========================================================================
   Tableau de bord
   ========================================================================== */

.cca-dash {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--cca-surface-primary);
}

.cca-dash-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 16px 16px;
}

.cca-dash-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.cca-dash-identity {
    flex: 1 1 auto;
    min-width: 0;
}

.cca-dash-greeting {
    font-size: 22px;
    font-weight: 700;
    color: var(--cca-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Une seule ligne, comme sur le téléphone : la date et le point gardent leur taille, seul le nom de
   compagnie se laisse rogner. Sans le nowrap, « Mercredi 10 septembre » et le nom de compagnie
   passaient chacun sur deux lignes et l'en-tête doublait de hauteur. */
.cca-dash-subline {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 14px;
    min-width: 0;
    white-space: nowrap;
}

.cca-dash-date {
    flex: 0 0 auto;
    color: var(--cca-text-secondary);
}

.cca-dash-dot {
    flex: 0 0 auto;
    color: var(--cca-text-tertiary);
}

.cca-dash-company {
    flex: 0 1 auto;
    min-width: 0;
    font-weight: 700;
    color: var(--cca-primary);
    overflow: hidden;
    text-overflow: ellipsis;
}

.cca-dash-sync,
.cca-dash-profile {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    box-shadow: var(--cca-soft-shadow);
    -webkit-tap-highlight-color: transparent;
}

.cca-dash-sync {
    border-radius: 12px;
    background: var(--cca-surface-card);
}

.cca-dash-sync:disabled {
    cursor: default;
}

.cca-dash-profile {
    border-radius: 20px;
    background: var(--cca-primary);
}

.cca-dash-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* En-tête et carte groupés : leur écart interne (6) ne doit pas suivre celui des sections (12). */
.cca-dash-section,
.cca-punchcard,
.cca-nextrdv {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cca-nextrdv-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Hors du défilement : ancré en bas plutôt que collé à la suite des cartes quand le contenu est court. */
.cca-dash-footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 16px 10px;
    font-size: 12px;
    color: var(--cca-text-secondary);
}

.cca-dash-lastsync {
    color: var(--cca-text-secondary);
}

/* Envois abandonnés : bande permanente au-dessus du pied, couleur danger — jamais un échec silencieux. */
.cca-dash-failed {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 12px 6px;
    padding: 8px 12px;
    border: 1px solid var(--cca-danger);
    border-radius: 10px;
    background: var(--cca-danger-bg);
    color: var(--cca-danger);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Envois en attente depuis trop longtemps : même gabarit que les échecs, en ambre (avertissement, pas une erreur). */
.cca-dash-failed.cca-dash-stale {
    border-color: var(--cca-accent-amber);
    background: var(--cca-surface-card);
    color: var(--cca-text-primary);
}

.cca-dash-logo {
    height: 14px;
}

.cca-dash-dot-text {
    color: var(--cca-text-tertiary);
}

.cca-spin {
    animation: cca-spin 1.2s linear infinite;
}

@keyframes cca-spin {
    to { transform: rotate(360deg); }
}

/* ----- En-tête de section ----- */

.cca-sectionheader {
    display: flex;
    align-items: center;
    margin: 0 4px;
}

.cca-sectionheader-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--cca-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cca-sectionheader-link {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0;
    background: none;
    border: none;
    font: inherit;
    font-size: 14px;
    color: var(--cca-primary);
    cursor: pointer;
}

/* ----- Carte d'action ----- */

.cca-actioncard {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    box-shadow: var(--cca-soft-shadow);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.cca-actioncard-chip {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.cca-actioncard-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cca-actioncard-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--cca-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cca-actioncard-subtitle {
    font-size: 14px;
    color: var(--cca-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cca-actioncard-value {
    margin-right: 8px;
    font-size: 24px;
    font-weight: 700;
    color: var(--cca-text-primary);
}

/* ----- Fiche de poinçon ----- */

/* Carte qui accueille des rangées de poinçon : une au tableau de bord, toutes sur l'écran des
   poinçons (maquette v4). Rayon 12 et ombre douce ; le filet sépare les rangées, pas les bords. */
.cca-punchrows {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    border-radius: 12px;
    box-shadow: var(--cca-soft-shadow);
}

.cca-punchrows > .cca-worktimerow + .cca-worktimerow {
    border-top: 1px solid var(--cca-hairline);
}

/* Rangée de poinçon en cours : client + chrono, puis point vert + « Bon nº · débuté le… », chevron. */
.cca-worktimerow {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 0 11px 16px;
}

.cca-worktimerow-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cca-worktimerow-top {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.cca-worktimerow-client {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--cca-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Chiffres à chasse fixe : sans ça le compteur fait sautiller la ligne à chaque seconde. */
.cca-worktimerow-chrono {
    flex: 0 0 auto;
    font-size: 16px;
    font-weight: 700;
    color: var(--cca-text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cca-worktimerow-detail {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 13px;
    color: var(--cca-text-secondary);
    font-variant-numeric: tabular-nums;
}

.cca-worktimerow-detailtext {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cca-worktimerow-dot {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cca-accent-green-text);
}

/* Zone tactile de 44 px sur toute la hauteur de la rangée, même si le chevron n'en fait que 20. */
.cca-worktimerow-action {
    flex: 0 0 44px;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* ----- Fiche de rendez-vous ----- */

.cca-rdvcard {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    padding: 0;
    border-radius: 12px;
    box-shadow: var(--cca-soft-shadow);
}

.cca-rdvcard-bar {
    flex: 0 0 6px;
}

.cca-rdvcard-body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cca-rdvcard-client {
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cca-rdvcard-summary {
    font-size: 13px;
}

.cca-rdvcard-subject {
    font-size: 13px;
    color: var(--cca-text-secondary);
}

/* Seule zone active de la fiche : le reste est inerte, comme sur le mobile. */
.cca-rdvcard-action {
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
}

/* ==========================================================================
   Profil et confirmations
   ========================================================================== */

.cca-overlay {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 10vh 5% 0;
    background: rgba(0, 0, 0, 0.45);
}

.cca-profile {
    width: 100%;
    max-width: 500px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--cca-surface-card);
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

.cca-profile-avatar {
    align-self: center;
}

.cca-profile-name {
    font-size: 20px;
    text-align: center;
    color: var(--cca-text-primary);
}

.cca-profile-company {
    font-size: 14px;
    text-align: center;
    color: var(--cca-accent-green-text);
}

.cca-profile-divider {
    height: 1px;
    margin: 10px 0;
    background: var(--cca-border-card);
}

.cca-profile-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;   /* cf. le piège des <button> flex */
    gap: 16px;
    width: 100%;
    padding: 12px 6px;
    background: none;
    border: none;
    font: inherit;
    font-size: 16px;
    color: var(--cca-text-primary);
    text-align: left;
    cursor: pointer;
}

.cca-profile-hint {
    font-size: 12px;
    color: var(--cca-text-secondary);
}

.cca-confirm {
    width: 100%;
    max-width: 420px;
    margin-top: 10vh;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--cca-surface-card);
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

.cca-confirm-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--cca-text-primary);
}

.cca-confirm-text {
    font-size: 14px;
    color: var(--cca-text-secondary);
}

/* Détail des erreurs de sync : une erreur par ligne, texte serveur parfois long → sauts gardés, défilement borné. */
.cca-syncerror-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 50vh;
    overflow-y: auto;
}

/* Envois en échec : une ligne par envoi, « Retirer » à droite ; liste bornée qui défile. */
.cca-failed-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 50vh;
    overflow-y: auto;
    margin: 4px 0 8px;
}

.cca-failed-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cca-failed-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    color: var(--cca-text-primary);
    overflow-wrap: anywhere;
}

.cca-failed-lost {
    margin-top: 2px;
    font-size: 12px;
    color: var(--cca-danger);
}

.cca-confirm-actions {
    display: flex;
    flex-wrap: wrap;   /* trois boutons (Modifications en cours) sur un écran étroit */
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.cca-button-text {
    padding: 10px 12px;
    background: none;
    border: none;
    font: inherit;
    font-weight: 600;
    color: var(--cca-text-secondary);
    cursor: pointer;
}

/* ==========================================================================
   Connexion et activation
   ========================================================================== */

/* Pattern « star-auto-star » du mobile : formulaire au centre, espaces souples qui poussent le logo
   vers le bas de la moitié haute et la version vers le bas de l'écran. */
.cca-login {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background: var(--cca-surface-primary);
}

.cca-login-top {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 28px;
}

.cca-login-logo {
    height: 60px;
}

.cca-login-subtitle {
    margin-top: 4px;
    font-size: 15px;
    color: var(--cca-text-secondary);
}

.cca-login-form {
    flex: 0 0 auto;
    align-self: center;
    width: 100%;
    max-width: 400px;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
}

.cca-field-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--cca-text-primary);
}

.cca-field-label-spaced {
    margin-top: 14px;
}

.cca-field {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    margin-top: 6px;
    padding: 0 14px;
    background: var(--cca-surface-card);
    border: 1px solid var(--cca-border-card);
    border-radius: 10px;
}

.cca-field-input {
    flex: 1 1 auto;
    min-width: 0;
    background: none;
    border: none;
    outline: none;
    font: inherit;
    font-size: 14px;
    color: var(--cca-text-primary);
}

.cca-field-eye {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
}

.cca-button-primary {
    height: 48px;
    margin-top: 20px;
    background: var(--cca-primary);
    border: none;
    border-radius: 10px;
    color: var(--cca-on-primary-action);
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--cca-soft-shadow);
}

.cca-button-primary:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Dans une rangée d'actions : plus de pleine largeur ni de marge du haut. */
.cca-button-inline {
    height: auto;
    margin-top: 0;
    padding: 10px 16px;
}

.cca-login-separator {
    height: 1px;
    margin: 24px 0 16px;
    background: var(--cca-border-card);
}

/* « Se souvenir de moi » : une ligne cliquable entière, 40 px de haut pour le pouce. */
.cca-check {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    margin-top: 10px;
    font-size: 13px;
    color: var(--cca-text-primary);
    cursor: pointer;
    user-select: none;
}

.cca-check input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--cca-primary);
}

/* « Pas vous ? » à droite du libellé Courriel quand l'adresse est préremplie. */
.cca-field-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.cca-field-link {
    padding: 0;
    background: none;
    border: none;
    font: inherit;
    font-size: 12px;
    color: var(--cca-link);
    cursor: pointer;
}

/* ----- Panneau Maintenance (MaintenancePopup du mobile) : petite feuille du bas, à la hauteur de son
   contenu, ouverte par la pastille de version. Voile commun, panneau ancré en bas. ----- */

.cca-overlay-bottom {
    align-items: flex-end;
    padding: 0;
}

.cca-maint {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 500px;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--cca-surface-card);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.18);
}

/* Poignée décorative, comme sur le mobile (32 × 4, BorderCard). */
.cca-maint-grab {
    width: 32px;
    height: 4px;
    margin: 10px auto 6px;
    border-radius: 2px;
    background: var(--cca-border-card);
}

.cca-maint-title {
    padding: 4px 20px 14px;
    font-size: 14px;
    font-weight: 700;
    color: var(--cca-text-primary);
}

.cca-maint-row {
    display: flex;
    align-items: center;
    /* Chrome centre le contenu flex d'un <button> : sans ça, icône et texte flottent au milieu du panneau. */
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    padding: 12px 20px 20px;
    background: none;
    border: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.cca-maint-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--cca-danger-bg);
}

.cca-maint-text {
    font-size: 14px;
    color: var(--cca-text-primary);
}

.cca-maint-sub {
    font-size: 12px;
    color: var(--cca-text-secondary);
}

/* Option « Serveur » (dev) : padding 20,12 et pastille AccentBlueBg de MaintenancePopup, chevron TextTertiary. */
.cca-maint-row.is-server {
    padding: 12px 20px;
}

.cca-maint-icon.is-blue {
    background: var(--cca-accent-blue-bg);
}

.cca-maint-body {
    flex: 1 1 auto;
    min-width: 0;
}

.cca-maint-chevron {
    font-size: 18px;
    color: var(--cca-text-tertiary);
}

.cca-maint-sep {
    height: 1px;
    margin: 0 20px;
    background: var(--cca-border-card);
}

/* Options du choix de serveur, façon DisplayActionSheet. */
.cca-sheet-option {
    display: block;
    width: 100%;
    height: 48px;
    padding: 0 4px;
    background: none;
    border: none;
    border-top: 1px solid var(--cca-border-card);
    font: inherit;
    font-size: 15px;
    text-align: left;
    color: var(--cca-text-primary);
    cursor: pointer;
}

.cca-login-link {
    align-self: center;
    height: 40px;
    margin-top: 10px;
    padding: 0;
    background: none;
    border: none;
    font: inherit;
    font-size: 12px;
    color: var(--cca-link);
    cursor: pointer;
}

.cca-login-error {
    margin-top: 12px;
    font-size: 13px;
    color: var(--cca-danger);
}

.cca-login-hint {
    margin-top: 8px;
    font-size: 13px;
    color: var(--cca-text-secondary);
}

/* Réponse neutre du « mot de passe oublié » : ce n'est pas une erreur, elle ne doit pas en avoir
   la couleur. */
.cca-login-info {
    margin-top: 12px;
    font-size: 13px;
    color: var(--cca-accent-green-text);
}

.cca-login-heading {
    margin-bottom: 4px;
    font-size: 20px;
    font-weight: 700;
    color: var(--cca-text-primary);
}

/* ----- Choix de compagnie ----- */

.cca-companylist {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 12px 0 4px;
    /* Un compte peut appartenir à beaucoup de compagnies : la liste défile plutôt que de pousser
       les boutons d'action hors de l'écran. */
    max-height: 40vh;
    overflow-y: auto;
}

.cca-companylist > * {
    flex-shrink: 0;
}

.cca-companyrow {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 48px;
    padding: 10px 14px;
    background: var(--cca-surface-card);
    border: 1px solid var(--cca-card-outline);
    border-radius: 10px;
    font: inherit;
    font-size: 15px;
    color: var(--cca-text-primary);
    text-align: left;
    cursor: pointer;
}

.cca-companyrow.is-current {
    border-color: var(--cca-primary);
    color: var(--cca-primary);
    font-weight: 700;
}

.cca-companyrow:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Compagnie choisie pendant l'appel : elle garde sa pleine intensité et porte la roue. Sans ça, toutes les
   lignes grisaient ensemble et rien ne disait laquelle avait été touchée, ni que quelque chose se passait. */
.cca-companyrow.is-busy:disabled {
    opacity: 1;
    border-color: var(--cca-primary);
}

/* Recherche de position APRÈS un geste : bandeau du bas, au-dessus de la barre d'onglets, sans rien bloquer.
   Même place que « Hors-ligne » — c'est le même genre d'information : un état, pas une action. */
.cca-geo-searching {
    position: fixed;
    left: 50%;
    bottom: calc(72px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 1500;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-radius: 20px;
    background: var(--cca-primary);
    color: var(--cca-on-primary-action);
    font-size: 13px;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgb(0 0 0 / 25%);
}

/* Fenêtre « enregistré sans position » : des RÉPONSES empilées pleine largeur, pas des liens (Luc, 2026-09-24). */
.cca-geo-choices {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.cca-geo-choice {
    height: auto;
    min-height: 48px;
    margin-top: 0;
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
}

.cca-geo-choice-sub {
    font-size: 12px;
    font-weight: 400;
    opacity: 0.85;
}

/* Deuxième réponse : même forme, contour au lieu du fond — clairement un bouton, clairement secondaire. */
.cca-geo-choice-secondary {
    background: none;
    border: 1.5px solid var(--cca-primary);
    border-radius: 10px;
    color: var(--cca-primary);
    font-family: inherit;
    cursor: pointer;
}

/* « Comment l'activer ? » : lien dans le texte, qui déplie l'aide SOUS le texte sans quitter la question. */
.cca-geo-help-link {
    display: inline;
    margin-left: 4px;
    padding: 0;
    background: none;
    border: none;
    font: inherit;
    font-weight: 600;
    color: var(--cca-primary);
    text-decoration: underline;
    cursor: pointer;
}

.cca-geo-help {
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--cca-surface-primary);
    font-size: 13px;
    color: var(--cca-text-primary);
}

/* Avertissement « des envois restent ailleurs » dans le profil : encadré ambre sous la liste des compagnies. */
.cca-profile-warning {
    margin: 10px 0 4px;
    padding: 10px 12px;
    border: 1px solid var(--cca-accent-amber);
    border-radius: 10px;
    font-size: 13px;
    color: var(--cca-text-primary);
    text-align: left;
}

.cca-profile-warning-text {
    margin-top: 6px;
    color: var(--cca-text-secondary);
}

.cca-companyrow-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}

/* Envois qui n'ont jamais quitté l'appareil pour CETTE compagnie : ambre, comme l'avertissement du tableau de bord. */
.cca-companyrow-pending {
    font-size: 12px;
    color: var(--cca-accent-amber);
}

.cca-companyrow-spinner {
    margin-left: auto;
    flex: 0 0 auto;
}

.cca-login-connecting {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--cca-text-secondary);
    text-align: center;
}

.cca-login-footer {
    flex: 1 1 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 24px calc(16px + env(safe-area-inset-bottom));
}

/* Indicateur du serveur (dev) : point AccentGreen 8 px + nom 11 px TextTertiary, à droite de la pastille. */
.cca-login-server {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    font-size: 11px;
    color: var(--cca-text-tertiary);
}

.cca-login-server-dot {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: var(--cca-accent-green);
}

.cca-login-version {
    /* Un bouton maintenant (ouvre Maintenance, comme sur le mobile) : on neutralise le style natif. */
    border: none;
    font: inherit;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 14px;
    background: var(--cca-surface-elevated);
    font-size: 13px;
    color: var(--cca-text-secondary);
}

/* ==========================================================================
   Recherche de bons
   ========================================================================== */

/* En-tête propre à la recherche : titre à gauche, « ✕ Fermer » libellé à droite (même disposition
   que le PageHeader, mais sans surtitre). */
.cca-searchheader {
    flex: 0 0 64px;
    height: 64px;
    display: flex;
    align-items: center;
    padding: 0 8px 0 16px;
    background: var(--cca-topbar-bg);
    color: var(--cca-on-topbar);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.cca-searchheader-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cca-searchheader-close {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: none;
    border: none;
    font: inherit;
    font-size: 14px;
    color: inherit;
    cursor: pointer;
}

.cca-searchbar-zone {
    flex: 0 0 auto;
    padding: 2px 0 4px;
    background: var(--cca-surface-elevated);
}

.cca-searchbar {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    margin: 2px 8px;
    padding: 0 14px;
    background: var(--cca-input-in-card);
    border: 1px solid var(--cca-border-card);
    border-radius: 10px;
}

.cca-searchbar-input {
    flex: 1 1 auto;
    min-width: 0;
    background: none;
    border: none;
    outline: none;
    font: inherit;
    font-size: 14px;
    color: var(--cca-text-primary);
}

.cca-chips {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    margin: 2px 8px;
    overflow-x: auto;
}

.cca-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    background: var(--cca-surface-card);
    border: 1px solid var(--cca-border-card);
    border-radius: 18px;
    font: inherit;
    font-size: 13px;
    color: var(--cca-text-primary);
    white-space: nowrap;
    cursor: pointer;
}

.cca-chip.is-selected {
    padding-left: 10px;
    background: var(--cca-topbar-bg);
    border-color: var(--cca-topbar-bg);
    color: var(--cca-on-topbar);
}

/* ----- Résultats ----- */

.cca-searchlist {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 1px 0;
    background: var(--cca-surface-list);
}

/* PIÈGE : la feuille de style par défaut de Chrome pose align-items: center ET
   justify-content: center sur tout <button>. Une rangée cliquable bâtie en flex se retrouve donc
   centrée — ici les trois lignes se ramassaient au milieu de la fiche au lieu de commencer à
   gauche. Chaque bouton-rangée doit remettre l'alignement explicitement ; c'est invisible tant
   qu'un enfant porte flex: 1 et absorbe l'espace, ce qui rend le symptôme irrégulier d'une carte
   à l'autre. */
.cca-sr {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    min-height: 72px;
    margin: 1px 4px;
    padding: 8px 12px;
    background: var(--cca-surface-card);
    border: 1px solid var(--cca-card-outline);
    border-radius: 8px;
    color: var(--cca-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.cca-sr-head {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.cca-sr-numero {
    flex: 0 0 auto;
    font-size: 17px;
    font-weight: 700;
    color: var(--cca-primary);
}

.cca-sr-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cca-sr-chevron {
    flex: 0 0 auto;
}

.cca-sr-line {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.cca-sr-address {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    color: var(--cca-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cca-sr-date {
    font-size: 12px;
    font-weight: 700;
    color: var(--cca-accent-green-text);
}

/* Saisie commencée et jamais sauvegardée : même ambre que les envois en attente, parce que c'est la même idée —
   ça n'existe que sur cet appareil. Pastille et non texte libre : elle se repère sans se lire. */
.cca-sr-draft {
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 10px;
    background: var(--cca-accent-amber);
    color: var(--cca-on-primary-action);
    font-size: 11px;
    font-weight: 700;
}

.cca-searchempty {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px 24px;
    font-size: 18px;
    text-align: center;
    color: var(--cca-text-primary);
}

/* ==========================================================================
   Calendrier
   ========================================================================== */

/* ----- Barre du haut et en-tête du mois ----- */

.cca-cal-top {
    flex: 0 0 64px;
    height: 64px;
    display: flex;
    align-items: center;
    padding: 0 8px 0 16px;
    background: var(--cca-topbar-bg);
    color: var(--cca-on-topbar);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.cca-cal-top-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 20px;
}

.cca-cal-top-close {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 12px;
    background: none;
    border: none;
    font: inherit;
    font-size: 16px;
    color: inherit;
    cursor: pointer;
}

/* En-tête compact : le titre est centré sur toute la barre et le sélecteur de vue se pose
   par-dessus, à droite — c'est la disposition du mobile (Label en ColumnSpan 2, bouton en col 1). */
.cca-cal-monthbar {
    position: relative;
    flex: 0 0 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    background: var(--cca-secondary);
    color: var(--cca-on-secondary);
}

.cca-cal-monthbar-title {
    font-size: 18px;
    font-weight: 700;
}

.cca-cal-switch {
    position: absolute;
    right: 8px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
}

/* ----- Corps ----- */

.cca-cal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    background: var(--cca-surface-primary);
}

.cca-cal-grid {
    padding: 8px 8px 4px;
}

.cca-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    height: 28px;
    align-items: center;
}

.cca-cal-weekday {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--cca-text-secondary);
}

/* Six rangées TOUJOURS : la grille garde la même hauteur d'un mois à l'autre, les cases en trop
   portent des dates du mois voisin en gris pâle. */
.cca-cal-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: 56px;
    margin-top: 4px;
}

.cca-cal-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 2px;
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.cca-cal-num {
    width: 34px;
    height: 34px;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    font-size: 16px;
}

.cca-cal-num.is-current {
    color: var(--cca-text-primary);
}

.cca-cal-num.is-other {
    color: var(--cca-text-tertiary);
}

/* Cercle en contour pour aujourd'hui, cercle plein pour la sélection — le second l'emporte. */
.cca-cal-num.is-today {
    color: var(--cca-text-primary);
    box-shadow: inset 0 0 0 1.5px var(--cca-primary);
}

.cca-cal-num.is-selected {
    background: var(--cca-primary);
    color: var(--cca-on-primary-action);
    font-weight: 700;
}

.cca-cal-dots {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 14px;
}

.cca-cal-dot {
    width: 5px;
    height: 5px;
    border-radius: 3px;
}

.cca-cal-more {
    margin-left: 2px;
    font-size: 11px;
    font-weight: 700;
    color: var(--cca-danger);
}

/* ----- Bandeaux multi-jour et liste du jour ----- */

.cca-cal-lists {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 12px 16px;
}

.cca-cal-bands,
.cca-cal-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cca-cal-band,
.cca-cal-item {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    padding: 0;
    border: 1px solid transparent;   /* la couleur vient de l'attribut style, par vendeur */
    border-radius: 10px;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.cca-cal-item {
    border-radius: 8px;
}

.cca-cal-bar {
    flex: 0 0 6px;
}

.cca-cal-band-title {
    flex: 1 1 auto;
    min-width: 0;
    align-self: center;
    margin: 10px 12px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cca-cal-band-range {
    flex: 0 0 auto;
    align-self: center;
    margin: 10px 12px 10px 0;
    font-size: 12px;
}

.cca-cal-item-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
}

.cca-cal-item-client {
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cca-cal-item-time {
    font-size: 13px;
}

.cca-cal-item-chevron {
    align-self: center;
    margin-right: 12px;
}

/* L'en-tête de la journée est cliquable : il descend vers la vue Jour. */
.cca-cal-dayheader {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    margin-top: 4px;
    padding: 0;
    background: none;
    border: none;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    color: var(--cca-text-primary);
    cursor: pointer;
}

.cca-cal-dayheader-chevron {
    margin-left: auto;
    font-size: 22px;
    font-weight: 400;
    color: var(--cca-text-secondary);
}

/* ----- Bande de semaine (vue Jour) ----- */

.cca-cal-weekstrip {
    flex: 0 0 auto;
    display: flex;
    padding: 8px 8px 12px;
    background: var(--cca-surface-primary);
}

.cca-cal-strip-cell {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 0;
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
}

.cca-cal-strip-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--cca-text-secondary);
}

/* Le cercle de sélection est ici PLEIN en couleur de texte, avec le chiffre en couleur de fond —
   différent de la grille du mois, et voulu : la bande vit sur une barre, pas sur la surface. */
.cca-cal-strip-num {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    font-size: 16px;
    color: var(--cca-text-primary);
}

.cca-cal-strip-num.is-today {
    box-shadow: inset 0 0 0 1.5px var(--cca-primary);
}

.cca-cal-strip-num.is-selected {
    background: var(--cca-text-primary);
    color: var(--cca-surface-primary);
    font-weight: 700;
}

.cca-cal-bandeau {
    flex: 0 0 auto;
    padding: 0 12px 8px;
}

.cca-cal-none {
    margin: 12px 0;
    text-align: center;
    font-size: 13px;
    color: var(--cca-text-tertiary);
}

/* ----- Barre du bas ----- */

.cca-cal-bottom {
    flex: 0 0 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
    background: var(--cca-secondary);
    color: var(--cca-on-secondary);
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.2);
}

.cca-cal-nav {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
}

.cca-cal-today {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 16px;
    background: var(--cca-primary);
    border: none;
    border-radius: 18px;
    color: var(--cca-on-primary-action);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

/* ==========================================================================
   Grille horaire (vues Jour et Semaine)
   Les nombres viennent de TimelineGridView : règle de 48, heure de 64,
   carte d'au moins 28 avec 4 d'écart vertical et 2 de marge horizontale.
   ========================================================================== */

.cca-tl {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--cca-surface-primary);
}

.cca-tl-header {
    flex: 0 0 auto;
    display: grid;
    border-bottom: 1px solid var(--cca-card-outline);
}

.cca-tl-dayhead {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 0 8px;
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
}

.cca-tl-dayhead-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--cca-text-secondary);
}

.cca-tl-dayhead-num {
    font-size: 16px;
    color: var(--cca-text-primary);
}

.cca-tl-dayhead-num.is-today {
    color: var(--cca-primary);
    font-weight: 700;
}

.cca-tl-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.cca-tl-grid {
    display: grid;
}

.cca-tl-ruler {
    position: relative;
}

/* Décalé de 7 px vers le haut pour que l'étiquette s'aligne sur son trait d'heure. */
.cca-tl-hour {
    position: absolute;
    right: 6px;
    margin-top: -7px;
    font-size: 11px;
    color: var(--cca-text-secondary);
}

.cca-tl-col {
    position: relative;
    overflow: hidden;   /* une carte mal dimensionnée ne déborde pas sur la colonne voisine */
}

.cca-tl-col.has-separator {
    border-left: 1px solid var(--cca-card-outline);
}

.cca-tl-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--cca-card-outline);
}

.cca-tl-card {
    position: absolute;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    overflow: hidden;
    padding: 0;
    border: 1px solid transparent;   /* la couleur vient du style, par vendeur */
    border-radius: 8px;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.cca-tl-card-bar {
    flex: 0 0 4px;
}

.cca-tl-card-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 6px 4px 8px;
}

.cca-tl-card-title {
    font-size: 13px;
    font-weight: 700;
    /* Trois lignes au plus, comme le MaxLines du mobile. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cca-tl-card-sub {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cca-tl-card-chevron {
    align-self: center;
    margin-right: 8px;
    font-size: 22px;
}

/* Trait de l'heure courante — rouge fixe, il doit se lire quelle que soit la couleur du vendeur. */
.cca-tl-now {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: #FF5252;
}

/* ==========================================================================
   Fenêtres du calendrier (sélecteur de vue, préférences)
   ========================================================================== */

.cca-popup {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--cca-surface-card);
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

.cca-popup-switcher { width: 280px; }

.cca-popup-settings {
    width: 320px;
    gap: 20px;
    padding: 20px;
    margin-top: 12vh;
}

.cca-popup-title {
    margin: 0 0 8px 4px;
    font-size: 16px;
    font-weight: 700;
    color: var(--cca-text-primary);
}

.cca-popup-heading {
    font-size: 20px;
    font-weight: 700;
    color: var(--cca-text-primary);
}

.cca-popup-option,
.cca-popup-action {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 10px 12px;
    background: none;
    border: 1px solid var(--cca-card-outline);
    border-radius: 10px;
    font: inherit;
    font-size: 15px;
    color: var(--cca-text-primary);
    text-align: left;
    cursor: pointer;
}

.cca-popup-action {
    border-color: transparent;
}

.cca-popup-option-label {
    flex: 1 1 auto;
}

.cca-popup-check {
    font-size: 16px;
    font-weight: 700;
    color: var(--cca-primary);
}

.cca-popup-divider {
    height: 1px;
    margin: 4px 0;
    background: var(--cca-card-outline);
}

.cca-popup-close {
    align-self: flex-end;
    margin-top: 8px;
    padding: 8px 4px;
    background: none;
    border: none;
    font: inherit;
    font-weight: 700;
    color: var(--cca-primary);
    cursor: pointer;
}

.cca-setting {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cca-setting-label {
    flex: 1 1 auto;
    font-size: 15px;
    color: var(--cca-text-primary);
}

.cca-setting-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--cca-text-primary);
}

.cca-setting-hint {
    margin-top: -14px;
    font-size: 11px;
    color: var(--cca-text-tertiary);
}

.cca-setting-select {
    width: 120px;
    height: 36px;
    padding: 0 8px;
    background: var(--cca-surface-card);
    border: 1px solid var(--cca-border-card);
    border-radius: 8px;
    font: inherit;
    font-size: 14px;
    color: var(--cca-text-primary);
}

.cca-stepper {
    display: flex;
    gap: 4px;
}

.cca-stepper button {
    width: 36px;
    height: 36px;
    background: var(--cca-surface-elevated);
    border: 1px solid var(--cca-border-card);
    border-radius: 8px;
    font: inherit;
    font-size: 18px;
    color: var(--cca-text-primary);
    cursor: pointer;
}

/* ==========================================================================
   Rendez-vous d'un bon de travail
   ========================================================================== */

.cca-rdvlist {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 0;
    background: var(--cca-surface-elevated);
}

.cca-rdvlist > * {
    flex-shrink: 0;
}

.cca-rdvrow {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    margin: 0 8px;
    background: var(--cca-surface-card);
    border: 1px solid var(--cca-border-card);
    border-radius: 6px;
}

.cca-rdvrow-bar {
    flex: 0 0 6px;
}

.cca-rdvrow-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 10px;
}

.cca-rdvrow-seller {
    font-size: 15px;
    font-weight: 700;
    color: var(--cca-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cca-rdvrow-period {
    font-size: 14px;
    font-weight: 700;
    color: var(--cca-primary);
}

/* État vide plein écran, partagé par les trois écrans du bon de travail. */
.cca-emptyscreen {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    text-align: center;
    font-size: 16px;
    color: var(--cca-text-secondary);
}

/* ==========================================================================
   Saisie de temps d'un bon de travail
   ========================================================================== */

.cca-punchdetails-summary {
    flex: 0 0 auto;
    padding: 10px 12px 2px;
    background: var(--cca-surface-primary);
}

.cca-punchdetails-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 10px;
    background: var(--cca-accent-blue-bg);
    color: var(--cca-primary);
    font-size: 13px;
    font-weight: 700;
}

/* Liste groupée (maquette « Bon de travail mobile ») : une carte par vendeur, 12 px d'écart. */
.cca-punchdetails {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 10px 12px 16px;
    background: var(--cca-surface-primary);
}

.cca-punchdetails > * {
    flex-shrink: 0;
}

/* Carte d'un vendeur : rayon 12 et ombre douce, comme les cartes du bon. */
.cca-sellergroup {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: var(--cca-soft-shadow);
}

.cca-sellergroup-head {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;   /* piège des <button> flex : Chrome centre le contenu par défaut */
    width: 100%;
    min-height: 52px;
    padding: 0;
    background: none;
    border: none;
    color: var(--cca-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.cca-sellergroup-bar {
    flex: 0 0 6px;
}

.cca-sellergroup-name {
    flex: 1 1 auto;
    min-width: 0;
    align-self: center;
    margin-left: 12px;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cca-sellergroup-total {
    align-self: center;
    margin-left: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--cca-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cca-sellergroup-chevron {
    align-self: center;
    margin: 0 10px 0 8px;
    transition: transform 150ms ease;
}

.cca-sellergroup-chevron.is-open {
    transform: rotate(180deg);
}

/* Rangée de poinçon : posée dans la carte, séparée par un filet. Date, heures en gris, durée à droite. */
.cca-punchrow {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px 11px 18px;
    border-top: 1px solid var(--cca-hairline);
}

/* Poinçon en cours : le fond d'accent de la bande du bon, un seul signal. */
.cca-punchrow.is-running { background: var(--cca-accent-blue-bg); }

.cca-punchrow-when {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cca-punchrow-day {
    font-size: 15px;
    font-weight: 600;
}

.cca-punchrow-range {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--cca-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
}

.cca-punchrow-dot {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cca-accent-green-text);
}

.cca-punchrow-live {
    color: var(--cca-accent-green-text);
    font-weight: 600;
}

/* Chiffres à chasse fixe : les durées s'alignent d'une rangée à l'autre et le chrono ne sautille pas. */
.cca-punchrow-duration {
    flex: 0 0 auto;
    font-size: 16px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.cca-punchrow-duration.is-running {
    font-size: 17px;
    font-weight: 700;
}

/* ==========================================================================
   Tâche et commentaires
   ========================================================================== */

.cca-notes {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    background: var(--cca-surface-card);
}

.cca-notes > * {
    flex-shrink: 0;
}

/* Gabarit CCA-X : le CADRE porte la couleur de la note, le corps est un voile posé par-dessus.
   Une recommandation ne change donc que la couleur du cadre — son corps suit tout seul. */
.cca-note {
    background: var(--cca-surface-card);
    border: 1px solid var(--cca-divider);
    border-radius: 4px;
}

.cca-note.is-description {
    margin-bottom: 4px;
    background: var(--cca-secondary);
}

.cca-note.is-recommendation {
    background: var(--cca-accent-amber);
}

.cca-note-head {
    display: flex;
    flex-direction: column;
    padding: 6px 10px;
}

.cca-note-line {
    display: flex;
    align-items: center;
    gap: 4px;
}

.cca-note-date {
    font-size: 12px;
    font-weight: 700;
    color: var(--cca-text-primary);
}

.cca-note-author {
    font-size: 12px;
    font-style: italic;
    color: var(--cca-text-primary);
}

.cca-note-writer {
    font-size: 12px;
    text-decoration: underline;
    color: var(--cca-text-primary);
}

.cca-note-edit {
    padding: 0 4px;
    background: none;
    border: none;
    font: inherit;
    font-size: 13px;
    color: var(--cca-link);
    cursor: pointer;
}

/* Le voile assombrit le fond du cadre, quelle que soit sa couleur. */
.cca-note-body {
    margin: 0 4px 4px;
    padding: 8px 10px;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.13);
    font-size: 14px;
    color: var(--cca-text-primary);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.cca-notes-footer {
    flex: 0 0 auto;
    padding: 8px;
    background: var(--cca-surface-card);
}

.cca-button-footer {
    width: 100%;
    height: 44px;
    margin-top: 0;
    border-radius: 6px;
}

/* Éditeur de commentaire : par-dessus l'écran de la tâche, qui est lui-même par-dessus le shell. */
.cca-noteeditor {
    z-index: 1450;
}

.cca-cal-top-close.is-strong {
    font-weight: 700;
}

.cca-noteeditor-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    margin: 4px;
}

.cca-noteeditor-input {
    flex: 1 1 auto;
    min-height: 0;
    padding: 8px;
    background: var(--cca-surface-card);
    border: 1px solid var(--cca-text-primary);
    border-radius: 8px;
    font: inherit;
    font-size: 15px;
    color: var(--cca-text-primary);
    resize: none;
    outline: none;
}

/* ==========================================================================
   Poinçons en cours
   ========================================================================== */

/* Écran des poinçons en cours (maquette v4) : une carte de rangées sur le fond de page, plus le fond
   gris « creux » ni une carte par poinçon. */
.cca-punchlist {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 12px;
    background: var(--cca-surface-primary);
}

/* Colonne défilante : sans ça la carte rétrécit au lieu de faire défiler (flex-shrink vaut 1). */
.cca-punchlist > * {
    flex-shrink: 0;
}

.cca-punchempty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 24px;
    text-align: center;
    font-size: 18px;
    color: var(--cca-text-secondary);
}

/* ==========================================================================
   Icônes Material Design Icons — la police du mobile, pas celle de MudBlazor.
   ========================================================================== */

@font-face {
    font-family: 'Material Design Icons';
    src: url('../fonts/materialdesignicons-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: block;   /* block, pas swap : un glyphe rendu en police de repli affiche un carré */
}

.mdi {
    font-family: 'Material Design Icons';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    display: inline-block;
    /* Les ligatures et la synthèse de graisse déforment les glyphes d'icônes. */
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   En-tête de page (bon de travail et écrans pleins)
   ========================================================================== */

.cca-pageheader {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 64px;
    flex: 0 0 64px;
    padding: 0 8px 0 16px;
    background: var(--cca-topbar-bg);
    color: var(--cca-on-topbar);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* « ✕ Fermer » à droite, même gabarit que les actions du pad de signature (.cca-sigtop-action). */
.cca-pageheader-close {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 48px;
    padding: 0 12px;
    background: none;
    border: none;
    font: inherit;
    font-size: 14px;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.cca-pageheader-titles {
    flex: 1 1 auto;
    min-width: 0;
}

.cca-pageheader-overline {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    opacity: 0.8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cca-pageheader-title {
    font-size: 20px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cca-pageheader-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

/* ==========================================================================
   Bon de travail
   ========================================================================== */

/* ----- Bande de poinçon ----- */

/* Maquette « Bon de travail mobile » : bande fixe sous l'en-tête, MÊME hauteur dans tous les états
   (actif, inactif, écriture, sans vendeur) — rien ne saute sous le doigt. Couleurs = jetons
   seulement, donc le mode sombre suit : actif sur l'accent bleu pâle, inactif sur la carte. Plus de
   rouge/vert plein écran : un poinçon ouvert dure la journée, ce n'est pas une alarme. */
.cca-punch {
    flex: 0 0 68px;
    height: 68px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 12px 0 16px;
    background: var(--cca-surface-card);
    border-bottom: 1px solid var(--cca-card-outline);
    color: var(--cca-text-primary);
}

.cca-punch.is-running { background: var(--cca-accent-blue-bg); }

.cca-punch-dot {
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--cca-accent-green-text);
}

.cca-punch-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cca-punch-overline {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--cca-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cca-punch.is-running .cca-punch-overline { color: var(--cca-accent-green-text); }

.cca-punch-value {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cca-punch-value.is-chrono {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    /* Chiffres à chasse fixe : sans ça le compteur fait sautiller la ligne à chaque seconde. */
    font-variant-numeric: tabular-nums;
}

/* Largeur minimale réservée : le passage bouton ⇄ indicateur de chargement ne décale pas le texte. */
.cca-punch-action {
    flex: 0 0 auto;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cca-punch-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    min-width: 44px;
    padding: 0 14px;
    border-radius: 10px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.cca-punch-button.is-start {
    background: var(--cca-primary);
    border: 1.5px solid var(--cca-primary);
    color: var(--cca-on-primary-action);
}

.cca-punch-button.is-stop {
    background: transparent;
    border: 1.5px solid var(--cca-danger);
    color: var(--cca-danger);
}

.cca-punch-button:disabled { opacity: 0.5; cursor: default; }

/* ----- Corps défilant ----- */

.cca-bt-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Colonne défilante : sans ça les enfants rétrécissent pour tenir dans la hauteur visible au lieu
   de faire défiler (flex-shrink vaut 1 par défaut). */
.cca-bt-scroll > * { flex-shrink: 0; }

/* Cartes du bon au gabarit du tableau de bord et de la maquette : rayon 12 et ombre douce.
   Portée limitée au bon — .cca-card reste à rayon 8 pour les écrans pas encore refaits. */
.cca-bt-scroll .cca-card {
    border-radius: 12px;
    box-shadow: var(--cca-soft-shadow);
}

.cca-bt-loading,
.cca-bt-empty,
.cca-bt-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 24px;
    color: var(--cca-text-secondary);
    text-align: center;
}

.cca-bt-error { color: var(--cca-danger); }

.cca-bt-contact {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cca-bt-contact-name {
    font-size: 18px;
    font-weight: 700;
}

/* « Aucun appareil associé » (maquette) : la ligne reste affichée, en italique atténué. Texte
   secondaire et non tertiaire : le tertiaire sombre (#555 sur #1E1E1E) serait illisible. */
.cca-bt-noappareil {
    font-size: 15px;
    font-style: italic;
    color: var(--cca-text-secondary);
}

.cca-bt-line {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Largeur réservée même sans icône : sinon les lignes ne s'alignent plus entre elles. */
.cca-bt-lineicon {
    flex: 0 0 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cca-bt-address { display: block; font-size: 15px; }
.cca-bt-city { display: block; font-size: 13px; color: var(--cca-text-secondary); }

.cca-bt-phone { font-size: 15px; color: var(--cca-primary); text-decoration: none; }
.cca-bt-phone.is-empty { color: var(--cca-text-tertiary); }

/* Tuiles « 1 rendez-vous » / « 2 poinçons » (maquette). */
.cca-bt-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.cca-bt-tile {
    display: flex;
    align-items: center;
    justify-content: flex-start;   /* piège des <button> flex : Chrome centre le contenu par défaut */
    gap: 8px;
    min-height: 44px;
    padding: 10px 10px 10px 12px;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.cca-bt-tile-label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Titres « Tâches (N) », « Photos (N) », « Signature » : le SectionHeader du tableau de bord, avec
   un peu d'air au-dessus pour séparer les groupes de la colonne. */
.cca-bt-scroll .cca-sectionheader { margin-top: 6px; }

/* ----- Tâches ----- */

/* Rangée de tâche (maquette) : pastille bleu pâle, nom, aperçu, chevron. Rayon et ombre viennent de
   la règle des cartes du bon, plus de surcharge ici. */
.cca-task {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 10px 10px 10px 12px;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.cca-task-badge {
    flex: 0 0 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--cca-accent-blue-bg);
    color: var(--cca-primary);
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cca-task-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cca-task-name {
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cca-task-preview {
    font-size: 13px;
    color: var(--cca-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cca-task > .mdi { flex: 0 0 auto; }

.cca-bt-notasks {
    align-self: center;
    margin: 4px;
    padding: 6px 8px;
    border-radius: 8px;
    background: var(--cca-accent-amber);
    color: #000;
}

/* ----- Photos ----- */

/* Rangée de photos (maquette) : case Ajouter et vignettes de 80 px posées directement sur le fond,
   sans carte autour. Les vignettes défilent à l'horizontale quand elles débordent. */
.cca-bt-photos {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* border-box : sans lui la bordure pointillée s'ajoute aux 80 px et la case dépasse les vignettes. */
.cca-bt-addphoto {
    position: relative;
    box-sizing: border-box;
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 2px dashed var(--cca-primary);
    border-radius: 10px;
    background: var(--cca-surface-card);
    color: var(--cca-primary);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

/* Marge de 2 px : le contour ambre des photos en attente n'est pas rogné par le défilement. */
.cca-bt-thumbs {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 2px;
}

.cca-bt-thumb {
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--cca-border-card);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Vignette touchable (ouvre la visionneuse) : bouton ou div selon qu'elle porte la croix. */
    border: none;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* ----- Visionneuse de photo — port de VisualizePhotoPrompt ----- */

.cca-photoviewer {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Zone de zoom : le navigateur ne défile ni ne zoome la page, c'est cca-app.js (attachZoom) qui gère les doigts. */
.cca-photoviewer-body {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    touch-action: none;
}

/* Aspect="AspectFit" : l'image entière, ratio préservé. Origine 0,0 pour la transformation du zoom. */
.cca-photoviewer-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform-origin: 0 0;
    user-select: none;
    -webkit-user-select: none;
}

/* Voile sombre (Scrim_Heavy) + roue et texte en italique couleur SurfaceCard, par-dessus la vignette. */
.cca-photoviewer-busy {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(0, 0, 0, 0.6);
    color: var(--cca-surface-card);
    font-style: italic;
}

.cca-bt-thumb img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    display: block;
}

/* ----- Signature ----- */

/* Carte de signature du bon — port de SignatureControl. */
.cca-sigcard {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
}

.cca-sigcard-name {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cca-sigcard-label {
    color: var(--cca-text-secondary);
}

/* Champ posé sur une carte : fond « input dans une carte », pas celui de la page. */
.cca-field.is-incard {
    margin-top: 0;
    background: var(--cca-input-in-card);
}

.cca-sigcard-required {
    font-size: 12px;
    color: var(--cca-danger);
}

/* Fond blanc et bordure noire fixes — le trait est noir quel que soit le thème. */
.cca-sigcard-image {
    position: relative;
    display: flex;
    justify-content: center;
    background: #FFFFFF;
    border: 1px solid #000000;
}

.cca-sigcard-image img {
    display: block;
    max-width: 100%;
    max-height: 150px;
}

/* Voile de mode sombre : transparent en clair, 20 % de noir en sombre. Posé PAR-DESSUS, il adoucit
   le blanc agressif sans éclaircir ni altérer le trait. */
.cca-sigcard-dim {
    position: absolute;
    inset: 0;
    background: var(--cca-signature-dim);
    pointer-events: none;
}

.cca-sigcard-button {
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 8px 4px;
    padding: 10px 16px;
    background: var(--cca-primary);
    border: none;
    border-radius: 8px;
    color: var(--cca-on-primary-action);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

/* Zone « Signer ici » (maquette) : carte de signature vide, pointillé neutre, ouvre le pad. Bouton
   pleine largeur, donc contenu recentré explicitement (piège des <button> flex). */
.cca-sigcard-zone {
    box-sizing: border-box;
    width: 100%;
    height: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0;
    border: 2px dashed var(--cca-card-outline);
    border-radius: 8px;
    background: transparent;
    color: var(--cca-text-secondary);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Signature verrouillée pendant MON poinçon actif (maquette) : remplace le bouton, et le champ nom
   quand la signature est déjà enregistrée. Texte secondaire et non tertiaire : le tertiaire sombre
   (#555 sur #1E1E1E) serait illisible. */
.cca-sigcard-locked {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 0;
    font-size: 14px;
    font-style: italic;
    color: var(--cca-text-secondary);
}

/* Le mobile réserve 100 px sous la signature pour que la barre de sauvegarde ne masque rien. */
.cca-bt-bottomspace { height: 100px; flex: 0 0 100px; }

/* ----- Bouton « Sauvegarder » (SaveButton : bon de travail, livraisons) ----- */

/* Maquette : bouton d'action Primary arrondi, avec des marges, ancré sous la zone qui défile — pour le bon, en bas de
   la SECTION donc au-dessus de la barre d'onglets. Il n'existe que quand il y a quelque chose à écrire. */
.cca-save-button {
    flex: 0 0 48px;
    height: 48px;
    margin: 10px 12px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--cca-primary);
    border: none;
    border-radius: 10px;
    color: var(--cca-on-primary-action);
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--cca-soft-shadow);
    -webkit-tap-highlight-color: transparent;
}

.cca-save-button:disabled {
    opacity: 0.7;
    cursor: default;
}

/* Raison sous « Modifications en cours » quand Enregistrer est grisé. */
.cca-unsaved-reason {
    color: var(--cca-danger);
    font-size: 14px;
}

/* ----- Croix rouge : ce qui n'est pas encore parti ----- */

.cca-note-remove,
.cca-thumb-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: var(--cca-danger);
    border: none;
    border-radius: 12px;
    cursor: pointer;
}

.cca-thumb-remove {
    position: absolute;
    top: 2px;
    right: 2px;
}

.cca-bt-thumb.is-staged {
    position: relative;
    outline: 2px solid var(--cca-accent-amber);
}

/* Photo en préparation : même gabarit que les vignettes, pour que la rangée ne saute pas quand la vraie arrive. */
.cca-bt-thumb.is-pending {
    background: var(--cca-surface-card);
    border: 1px solid var(--cca-card-outline);
    cursor: default;
}

/* Case « Ajouter » pendant la préparation : atténuée, et le champ est désactivé (une seule photo à la fois). */
.cca-bt-addphoto.is-disabled {
    opacity: 0.5;
    cursor: default;
}

/* Le champ de fichier natif est masqué : c'est le label qui porte le visuel et le geste. */
.cca-bt-fileinput {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* ----- Pad de signature — port de SignaturePrompt ----- */

.cca-signature {
    z-index: 1450;
}

/* Barre du haut : titre à gauche, Effacer / Annuler / Confirmer à droite, comme le mobile. */
.cca-sigtop {
    flex: 0 0 64px;
    height: 64px;
    display: flex;
    align-items: center;
    padding: 0 8px 0 16px;
    background: var(--cca-topbar-bg);
    color: var(--cca-on-topbar);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.cca-sigtop-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cca-sigtop-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.cca-sigtop-action {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 48px;
    padding: 0 12px;
    background: none;
    border: none;
    font: inherit;
    font-size: 14px;
    color: inherit;
    cursor: pointer;
}

/* Écart propre à Effacer, pour le détacher du couple Annuler / Confirmer (marge 24 du mobile). */
.cca-sigtop-clear {
    margin-right: 24px;
}

.cca-sigtop-action:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Zone de dessin : suit le THÈME comme le mobile — fond BorderCard, bordure TextPrimary de 2.
   En sombre : pad gris foncé, bordure claire. */
.cca-sigpad {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    margin: 10px;
    background: var(--cca-border-card);
    border: 2px solid var(--cca-text-primary);
}

/* Canvas en absolu sur toute la zone : sa taille doit suivre celle du cadre à la rotation, et un
   canvas n'hérite pas de façon fiable d'une hauteur par étirement flex.
   touch-action: none, sinon le navigateur fait défiler au lieu de laisser dessiner.
   color = couleur du trait À L'ÉCRAN, lue par cca-signature.js (le SVG enregistré reste noir). */
.cca-sigpad-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    color: var(--cca-signature-ink);
    touch-action: none;
}

/* Repli portrait : quand le navigateur refuse le paysage, trois libellés ne tiennent pas à côté du
   titre sur 360 px. On garde les icônes ; le titre reste lisible. */
@media (max-width: 560px) {
    .cca-sigtop-action span { display: none; }
    .cca-sigtop-clear { margin-right: 4px; }
    .cca-sigtop-action { padding: 0 10px; }
}

/* Paysage simulé (iOS : le verrou d'orientation n'existe pas en web). Tant que l'écran est en PORTRAIT, le pad
   pivote de 90° horaire : on tient le téléphone de côté, haut à gauche, comme le paysage du mobile. Si iOS passe
   en vrai paysage, la requête ne s'applique plus et le pivot disparaît de lui-même.
   cca-signature.js lit ce transform pour replacer le doigt : ne pas le changer sans ajuster pointOf.
   Après pivot : bord gauche du pad = haut du téléphone (encoche), bord droit = bas (barre d'accueil). */
@media (orientation: portrait) {
    .cca-signature.is-pseudo-landscape {
        inset: auto;
        top: 0;
        left: 0;
        width: 100dvh;
        height: 100vw;
        transform-origin: top left;
        transform: translateX(100vw) rotate(90deg);
        padding: 0 env(safe-area-inset-bottom) 0 env(safe-area-inset-top);
    }

    /* La largeur utile est maintenant celle de la HAUTEUR du téléphone : les libellés ont la place. */
    .cca-signature.is-pseudo-landscape .cca-sigtop-action span { display: inline; }
    .cca-signature.is-pseudo-landscape .cca-sigtop-clear { margin-right: 24px; }
    .cca-signature.is-pseudo-landscape .cca-sigtop-action { padding: 0 12px; }
}

/* ==========================================================================
   Snackbar — écho de sync, port de MainPage.Receive(SyncStatusMessage)
   ========================================================================== */

/* Ancrage du mobile : zone de notification juste au-dessus de la barre du bas (marge 10). Au ras du
   bas quand il n'y a pas de barre (connexion) ou qu'un écran plein la recouvre. Préfixe body : passer
   devant la règle MudBlazor quel que soit l'ordre de chargement des feuilles. */
body .mud-snackbar-location-bottom-center {
    bottom: 10px;
    width: calc(100% - 16px);
    max-width: 560px;
}

/* Bande pleine largeur d'une ligne, comme le Snackbar CommunityToolkit du mobile — pas la carte
   MudBlazor (288 px min, texte sur deux lignes, bouton en capitales). */
.mud-snackbar.cca-snack-sync,
.mud-snackbar.cca-snack-error {
    width: 100%;
    min-width: 0;
    max-width: none;
    margin-top: 8px;
    padding: 0 8px 0 16px;
    border-radius: 4px;
    font-size: 14px;
}

.mud-snackbar.cca-snack-sync .mud-snackbar-content-message,
.mud-snackbar.cca-snack-error .mud-snackbar-content-message {
    padding: 14px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mud-snackbar.cca-snack-sync .mud-snackbar-content-action > button {
    text-transform: none;
    letter-spacing: 0.5px;
    font-weight: 400;
    font-size: 14px;
}

body:has(.cca-bottombar) .mud-snackbar-location-bottom-center {
    bottom: 74px;
}

body:has(.cca-screen) .mud-snackbar-location-bottom-center {
    bottom: 10px;
}

/* Tertiary / Tertiary_Text du mobile : la palette MudBlazor porte déjà ces valeurs dans les deux thèmes.
   Deux classes : passer devant .mud-alert-filled-normal. Le bouton « Masquer » hérite de la couleur. */
.mud-snackbar.cca-snack-sync {
    background-color: var(--mud-palette-tertiary);
    color: var(--mud-palette-tertiary-text);
}

/* Erreur : Firebrick + blanc du mobile, identiques dans les deux thèmes. */
.mud-snackbar.cca-snack-error {
    background-color: #B22222;
    color: #FFFFFF;
}

/* ==========================================================================
   Paramètres et À propos — pages (SettingsView.xaml, AboutView.xaml)
   ========================================================================== */

.cca-settings {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--cca-surface-card);
}

/* Barre : bouton retour 44 × 44 + titre 20, Padding 8,10 du mobile. */
.cca-settings-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 8px;
}

.cca-settings-back {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 22px;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.cca-settings-title {
    font-size: 20px;
    color: var(--cca-text-primary);
}

.cca-settings-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 4px 0 20px;
}

/* SectionHeader : 13 gras Primary, marge 20,20,20,6. */
.cca-settings-section {
    margin: 20px 20px 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--cca-primary);
}

/* Rangée : icône 24, libellé 16, élément de droite ; Padding 20,14, espacement 16.
   justify-content explicite : Chrome centre le contenu flex d'un <button>. */
.cca-settings-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    width: 100%;
    padding: 14px 20px;
    background: none;
    border: none;
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

div.cca-settings-row {
    cursor: default;
}

.cca-settings-label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 16px;
    color: var(--cca-text-primary);
}

.cca-settings-sep {
    height: 1px;
    margin: 6px 20px;
    background: var(--cca-border-card);
}

/* À propos : contenu centré (CenterAndExpand), Padding 24,10,24,24, Spacing 10. */
.cca-about {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 100%;
    padding: 10px 24px 24px;
    text-align: center;
}

.cca-about-logo {
    width: 120px;
    height: 120px;
    margin: 10px 0;
    object-fit: contain;
}

.cca-about-name {
    font-size: 30px;
    font-weight: 700;
    color: var(--cca-text-primary);
}

.cca-about-version,
.cca-about-dev {
    font-size: 13px;
    color: var(--cca-text-secondary);
}

.cca-about-dev strong {
    color: var(--cca-accent-green);
}

.cca-about-sep {
    align-self: stretch;
    height: 1px;
    margin: 14px 0;
    background: var(--cca-border-card);
}

.cca-about-copy {
    font-size: 12px;
    color: var(--cca-text-secondary);
}

/* Rangée « Licences tierces » : pleine largeur, Padding 4,10, espacement 12, libellé 14 (taille par défaut). */
.cca-about-row {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: flex-start;   /* cf. le piège des <button> flex */
    gap: 12px;
    padding: 10px 4px;
    background: none;
    border: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.cca-about-row-label {
    flex: 1 1 auto;
    font-size: 14px;
    color: var(--cca-text-primary);
}

/* Stockage local : rangée informative (pas un bouton), détail sur une 2e ligne. */
.cca-about-storage {
    cursor: default;
}

.cca-about-storage-detail {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--cca-text-secondary);
}

/* Licences : monospace 13 avec retour à la ligne (LineBreakMode WordWrap), Padding 14,0,14,12.
   Fichier « reflowé » : pre-wrap garde les sauts de paragraphe et laisse le navigateur couper les lignes. */
.cca-licenses {
    padding: 0 14px 12px;
    font-family: monospace;
    font-size: 13px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--cca-text-primary);
}

/* ==========================================================================
   Livraisons — port de InvoiceDeliveryView
   ========================================================================== */

/* Colonne du mobile : marge 10, cartes espacées de 4. Les cartes reprennent le gabarit du bon (.cca-bt-scroll). */
.cca-dlv {
    padding: 10px;
    gap: 6px;
}

/* Saisie (disposition A, 2026-09-17) : numéro pleine largeur, puis rangée colis + Ajouter. Hauteurs 44 px. */
.cca-dlv-entry {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
}

/* Champ numéro : le lecteur de code-barres est un petit bouton teinté à DROITE, dans le champ (près du pouce). */
.cca-dlv-reference {
    height: 44px;
    padding: 0 4px 0 12px;
}

.cca-dlv-scan {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--cca-accent-blue-bg);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.cca-dlv-entry-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cca-dlv-colis-label {
    font-size: 14px;
    color: var(--cca-text-secondary);
}

/* Hybride − / chiffre / + dans un seul contour. Le chiffre (avec chevron) ouvre la liste 1-20.
   flex: 0 0 auto — sans lui, une rangée trop large (texte plus large sur iOS) comprimait le sélecteur et son bord droit,
   donc le +, disparaissait derrière overflow: hidden. C'est « Ajouter » qui cède, pas le sélecteur. */
.cca-dlv-stepper {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
    height: 44px;
    border: 1px solid var(--cca-border-card);
    border-radius: 10px;
    overflow: hidden;
    background: var(--cca-input-in-card);
}

.cca-dlv-step {
    flex: 0 0 40px;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
    color: var(--cca-primary);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.cca-dlv-step:disabled {
    color: var(--cca-text-tertiary);
    cursor: default;
}

.cca-dlv-colis-pick {
    min-width: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 0 6px;
    background: none;
    border: none;
    border-left: 1px solid var(--cca-border-card);
    border-right: 1px solid var(--cca-border-card);
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    color: var(--cca-text-primary);
    cursor: pointer;
}

/* « Ajouter » : l'action du bloc, Primary, poussée à droite. C'est elle qui rétrécit si la place manque. */
.cca-dlv-add {
    flex: 0 1 auto;
    min-width: 0;
    margin-left: auto;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 14px;
    white-space: nowrap;
    background: var(--cca-primary);
    border: none;
    border-radius: 10px;
    color: var(--cca-on-primary-action);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Liste des documents et photo. */
.cca-dlv-docs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 8px;
}

/* État vide standard (EmptyState) posé DANS la carte : sans son propre cadre, sinon double contour. */
.cca-dlv-docs .cca-emptystate {
    padding: 14px 12px 6px;
    background: transparent;
    border: none;
}

.cca-dlv-docs-title {
    font-size: 16px;
    font-style: italic;
    color: var(--cca-text-tertiary);
}

/* Document ajouté : numéro en gras, colis en retrait, croix ronde rouge à droite (standard .cca-note-remove). */
.cca-dlv-doc {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 10px;
    margin: 2px;
    overflow: hidden;
    border: 1px solid var(--cca-card-outline);
    border-radius: 8px;
    background: var(--cca-surface-card);
    box-shadow: var(--cca-soft-shadow);
}

.cca-dlv-doc-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 2px 4px 4px;
}

.cca-dlv-doc-ref {
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cca-dlv-doc-colis {
    padding-left: 20px;
    font-size: 14px;
}

/* La croix ne rétrécit pas quand le numéro est long. */
.cca-dlv-doc-remove {
    flex: 0 0 24px;
}

.cca-dlv-error {
    font-size: 13px;
    color: var(--cca-danger);
    text-align: center;
}

.cca-dlv-choices {
    max-height: 50vh;
    overflow-y: auto;
}

/* ----- Lecteur de codes-barres — port de UpcScanPrompt ----- */

.cca-scanner {
    z-index: 1450;
}

.cca-scanner-view {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    background: #000;
}

/* contain et non cover : l'image n'est pas rognée, donc le carré de visée couvre bien la bande analysée. */
.cca-scanner-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Mêmes proportions que ROI_WIDTH / ROI_HEIGHT de cca-barcode.js. Le voile extérieur est une ombre portée géante :
   pas de deuxième élément à tenir aligné. */
.cca-scanner-frame {
    position: absolute;
    top: 33%;
    left: 4%;
    width: 92%;
    height: 34%;
    border: 2px solid var(--cca-on-topbar);
    border-radius: 10px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
    pointer-events: none;
}


/* Retour du toucher : cercle qui s'estompe à l'endroit touché (le geste demande la mise au point). */
.cca-scanner-focusring {
    position: absolute;
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    border: 2px solid var(--cca-on-topbar);
    border-radius: 50%;
    pointer-events: none;
    animation: cca-focusring 600ms ease-out forwards;
}

@keyframes cca-focusring {
    from { transform: scale(1.3); opacity: 0.9; }
    to { transform: scale(0.85); opacity: 0; }
}

.cca-scanner-error {
    position: absolute;
    inset: auto 16px 16px;
    padding: 12px;
    border-radius: 8px;
    background: var(--cca-surface-card);
    color: var(--cca-danger);
    text-align: center;
}

.cca-scanner-hint {
    flex: 0 0 auto;
    margin: 10px 0;
    text-align: center;
    color: var(--cca-text-primary);
}

/* ==========================================================================
   iOS : zoom automatique au focus
   Safari iOS zoome la page sur tout champ de moins de 16 px qui reçoit le focus, et ne dézoome pas après :
   l'app restait à ~110 %, glissable vers la droite, jusqu'à une rotation. 16 px sur iOS SEULEMENT
   (-webkit-touch-callout n'existe que sur Safari iOS) : Android garde les 14 px du mobile.
   Pas de maximum-scale=1 dans le viewport : sur Android, il bloquerait aussi le zoom à deux doigts.
   EN DERNIER dans la feuille : doit passer devant les définitions de ces champs.
   Nouveau champ de saisie → l'ajouter ici.
   ========================================================================== */
@supports (-webkit-touch-callout: none) {
    .cca-field-input,
    .cca-searchbar-input,
    .cca-setting-select,
    .cca-noteeditor-input {
        font-size: 16px;
    }
}