/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* Visibilité par état — classes posées sur le dialog par blazor.web.js. */
.components-reconnect-first-attempt-visible[b-z4rgcj70id],
.components-reconnect-repeated-attempt-visible[b-z4rgcj70id],
.components-reconnect-failed-visible[b-z4rgcj70id],
.components-pause-visible[b-z4rgcj70id],
.components-resume-failed-visible[b-z4rgcj70id] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-z4rgcj70id],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-z4rgcj70id],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-z4rgcj70id],
#components-reconnect-modal.components-reconnect-retrying[b-z4rgcj70id],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-z4rgcj70id],
#components-reconnect-modal.components-reconnect-failed[b-z4rgcj70id],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-z4rgcj70id] {
    display: block;
}

#components-reconnect-modal[b-z4rgcj70id] {
    background: var(--white, #fff);
    width: 21rem;
    margin: 20vh auto;
    padding: 28px 28px 24px;
    border: 1px solid var(--border-subtle, #e5e8ec);
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-lg, 0 12px 32px rgba(14, 17, 22, .18));
    font-family: var(--font-sans, system-ui, sans-serif);
    color: var(--text-strong, #171b21);
    opacity: 0;
    transition: display 0.4s allow-discrete, overlay 0.4s allow-discrete;
    animation: reconnect-fade-out-b-z4rgcj70id 0.4s both;
}

#components-reconnect-modal[open][b-z4rgcj70id] {
    animation: reconnect-slide-up-b-z4rgcj70id 0.6s cubic-bezier(.05, .89, .25, 1.02),
               reconnect-fade-in-b-z4rgcj70id 0.4s ease-in-out;
    animation-fill-mode: both;
}

#components-reconnect-modal[b-z4rgcj70id]::backdrop {
    background: rgba(14, 17, 22, 0.55);
    backdrop-filter: blur(2px);
    animation: reconnect-fade-in-b-z4rgcj70id 0.4s ease-in-out;
    opacity: 1;
}

@keyframes reconnect-slide-up-b-z4rgcj70id {
    from { transform: translateY(24px) scale(0.97); }
    to { transform: none; }
}

@keyframes reconnect-fade-in-b-z4rgcj70id { from { opacity: 0; } to { opacity: 1; } }
@keyframes reconnect-fade-out-b-z4rgcj70id { from { opacity: 1; } to { opacity: 0; } }

.components-reconnect-container[b-z4rgcj70id] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

#components-reconnect-modal p[b-z4rgcj70id] {
    margin: 0;
    text-align: center;
    font-size: var(--text-md, 14px);
    line-height: var(--lh-normal, 1.5);
    color: var(--text-muted, #5b6572);
}

#components-reconnect-modal button[b-z4rgcj70id] {
    border: 0;
    background: var(--ink-950, #0e1116);
    color: var(--white, #fff);
    padding: 9px 26px;
    border-radius: var(--radius-sm, 8px);
    font-family: inherit;
    font-size: var(--text-md, 14px);
    font-weight: var(--fw-semibold, 600);
    cursor: pointer;
    transition: opacity 120ms ease-out;
}

#components-reconnect-modal button:hover[b-z4rgcj70id] { opacity: .85; }

/* Logo animé : le carré « AR » de la topbar qui respire, entouré d'ondes
   radar aux couleurs de la marque. */
.reconnect-brand[b-z4rgcj70id] {
    position: relative;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reconnect-mark[b-z4rgcj70id] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm, 8px);
    background: var(--ink-950, #0e1116);
    color: var(--white, #fff);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
    animation: reconnect-mark-bob-b-z4rgcj70id 1.6s ease-in-out infinite;
    z-index: 1;
}

.reconnect-brand[b-z4rgcj70id]::before,
.reconnect-brand[b-z4rgcj70id]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-md, 10px);
    border: 2px solid var(--orange-500, #ec6a2c);
    animation: reconnect-ripple-b-z4rgcj70id 1.6s ease-out infinite;
}

.reconnect-brand[b-z4rgcj70id]::after {
    border-color: var(--ink-950, #0e1116);
    animation-delay: 0.8s;
}

@keyframes reconnect-mark-bob-b-z4rgcj70id {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.1) rotate(-4deg); }
}

@keyframes reconnect-ripple-b-z4rgcj70id {
    0% { transform: scale(0.62); opacity: 0; }
    30% { opacity: .8; }
    100% { transform: scale(1.15); opacity: 0; }
}

.reconnect-title[b-z4rgcj70id] {
    font-family: var(--font-display, inherit);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: var(--ls-tight, -0.01em);
    color: var(--ink-950, #0e1116);
    line-height: 1;
}

.reconnect-title .reconnect-dot[b-z4rgcj70id] { color: var(--orange-500, #ec6a2c); }

@media (prefers-reduced-motion: reduce) {
    .reconnect-mark[b-z4rgcj70id],
    #components-reconnect-modal[b-z4rgcj70id],
    #components-reconnect-modal[open][b-z4rgcj70id] { animation: none; }
    #components-reconnect-modal[b-z4rgcj70id] { opacity: 1; }
    .reconnect-brand[b-z4rgcj70id]::before, .reconnect-brand[b-z4rgcj70id]::after { display: none; }
}
/* /Components/Pages/NouveauDevis.razor.rz.scp.css */
/* Nouveau devis — saisie rapide. Porté du mockup « Nouveau devis - saisie
   rapide.html » (shell d'app et bloc pédagogique retirés — la coquille vient
   de MainLayout). Les tokens sont ceux de wwwroot/css/tokens/*. */

.dv-page[b-oel4c7qx7z] { max-width: 1180px; }
.dv-page:focus[b-oel4c7qx7z] { outline: none; }

/* ---------- En-tête ---------- */
.dv-head[b-oel4c7qx7z] { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.dv-head h1[b-oel4c7qx7z] { margin: 0; font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 800; letter-spacing: -.02em; color: var(--text-strong); }
.dv-head p[b-oel4c7qx7z] { margin: 5px 0 0; font-size: var(--text-md); color: var(--text-muted); }
.dv-head__a[b-oel4c7qx7z] { display: flex; align-items: center; gap: 14px; flex: none; }
.dv-kbd-hint[b-oel4c7qx7z] { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-xs); color: var(--text-muted); }

kbd[b-oel4c7qx7z] { font-family: var(--font-mono); font-size: 11px; line-height: 1; padding: 3px 5px; background: var(--white); border: 1px solid var(--border-default); border-bottom-width: 2px; border-radius: 4px; color: var(--text-body); }

/* ---------- Carte (padding porté par les sections) ---------- */
.dv-card[b-oel4c7qx7z] { background: var(--white); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; }

/* ---------- Sections ---------- */
.dv-sec[b-oel4c7qx7z] { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 22px 0; }
.dv-sec--mid[b-oel4c7qx7z] { border-top: 1px solid var(--border-subtle); margin-top: 20px; padding-top: 18px; }
.dv-eyebrow[b-oel4c7qx7z] { font-size: var(--text-2xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--text-subtle); }
.dv-count[b-oel4c7qx7z] { font-size: var(--text-xs); color: var(--text-muted); }

/* ---------- Grille + champs ---------- */
.dv-grid[b-oel4c7qx7z] { display: grid; grid-template-columns: 1fr 300px; gap: 16px 22px; padding: 14px 22px 0; }
.dv-grid--in[b-oel4c7qx7z] { grid-template-columns: 1fr 1fr; padding: 0; gap: 14px 18px; }
.dv-grid--in1[b-oel4c7qx7z] { grid-template-columns: 1fr; padding: 0; gap: 12px; }
/* Section pleine largeur au niveau carte (garde le padding horizontal de base). */
.dv-grid--full[b-oel4c7qx7z] { grid-template-columns: 1fr; }
.dv-f[b-oel4c7qx7z] { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dv-f--wide[b-oel4c7qx7z] { grid-column: 1 / -1; }
.dv-l[b-oel4c7qx7z] { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-body); }
.dv-req[b-oel4c7qx7z] { color: var(--red-600); margin-left: 3px; }
.dv-hint[b-oel4c7qx7z] { font-size: var(--text-2xs); color: var(--text-subtle); }

/* Inputs / selects / textarea alignés sur le look DS. ::deep : la date de
   création est rendue par <DateInput>, un composant enfant que le CSS isolé
   de la page n'atteindrait pas sinon. */
.dv-f[b-oel4c7qx7z]  input,
.dv-f select[b-oel4c7qx7z],
.dv-f textarea[b-oel4c7qx7z] {
    width: 100%;
    height: var(--control-h-md);
    padding: 0 11px;
    font-family: var(--font-sans);
    font-size: var(--text-md);
    color: var(--text-strong);
    background: var(--white);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
}
.dv-f textarea[b-oel4c7qx7z] { height: auto; padding: 9px 11px; line-height: 1.5; resize: vertical; }
.dv-f[b-oel4c7qx7z]  input:focus,
.dv-f select:focus[b-oel4c7qx7z],
.dv-f textarea:focus[b-oel4c7qx7z] { outline: none; border-color: var(--border-focus); box-shadow: var(--ring); }
.dv-f[b-oel4c7qx7z]  input::placeholder,
.dv-f textarea[b-oel4c7qx7z]::placeholder { color: var(--text-subtle); }

[b-oel4c7qx7z] .dv-mono { font-family: var(--font-mono); }
.dv-f--lg[b-oel4c7qx7z]  input { height: 46px; font-size: var(--text-lg); font-weight: 500; }

/* Inputs des composants enfants (MoneyInput, SearchSelect) : app.css ne leur
   pose bordure/hauteur que sous un ancêtre .field ; ici on est en .dv-f, on
   rétablit le même look que les inputs natifs de la page. */
.dv-money[b-oel4c7qx7z]  .money-input { width: 100%; }
.dv-money[b-oel4c7qx7z]  .money-input input,
[b-oel4c7qx7z] .search-select input {
    width: 100%;
    height: var(--control-h-md);
    padding-left: 12px;
    background: var(--white);
    color: var(--text-strong);
    font-size: var(--text-md);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
}
.dv-money[b-oel4c7qx7z]  .money-input input:focus,
[b-oel4c7qx7z] .search-select input:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: var(--ring);
}
/* Pas de chevrons ↕ en bout de champ client / affaire. */
[b-oel4c7qx7z] .search-select > svg { display: none; }
[b-oel4c7qx7z] .search-select > input { padding-right: 12px; }

/* Dates : création (étroite) + rendu (large, pour ses pastilles) sur une ligne. */
.dv-dates[b-oel4c7qx7z] { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; }
.dv-date[b-oel4c7qx7z] { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }
.dv-today[b-oel4c7qx7z] { flex: none; margin-bottom: 8px; font-size: var(--text-2xs); font-weight: 600; color: var(--green-600); background: var(--status-confirmed-bg); padding: 3px 8px; border-radius: var(--radius-pill); white-space: nowrap; }
.dv-date--rendu .dv-chips--sm[b-oel4c7qx7z] { margin-bottom: 5px; flex: none; }

/* ---------- Pastilles ---------- */
.dv-chips[b-oel4c7qx7z] { display: flex; flex-wrap: wrap; gap: 8px; }
.dv-chips--sm[b-oel4c7qx7z] { gap: 6px; }
.dv-chip[b-oel4c7qx7z] { cursor: pointer; min-height: 36px; padding: 0 14px; background: var(--white); border: 1px solid var(--border-default); border-radius: var(--radius-pill); font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--fw-medium); color: var(--text-body); transition: background 140ms ease-out, border-color 140ms ease-out, color 140ms ease-out; }
.dv-chip:hover[b-oel4c7qx7z] { background: var(--slate-50); border-color: var(--slate-400); }
.dv-chip:focus-visible[b-oel4c7qx7z] { outline: none; box-shadow: var(--ring); }
.dv-chip.is-on[b-oel4c7qx7z] { background: var(--surface-brand-soft); border-color: var(--orange-600); color: var(--orange-700); font-weight: var(--fw-semibold); }
.dv-chip--sm[b-oel4c7qx7z] { min-height: 30px; padding: 0 11px; font-size: var(--text-xs); }

/* ---------- Récents (cascade client) ---------- */
.dv-recents[b-oel4c7qx7z] { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.dv-recents__l[b-oel4c7qx7z] { font-size: var(--text-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--text-subtle); margin-right: 2px; }
.dv-auto[b-oel4c7qx7z] { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: var(--text-2xs); font-weight: 600; color: var(--blue-700); background: var(--blue-50); border: 1px solid var(--blue-100); padding: 2px 7px; border-radius: var(--radius-pill); }

/* ---------- Compléments repliés ---------- */
.dv-folds[b-oel4c7qx7z] { display: flex; flex-direction: column; gap: 8px; padding: 12px 22px 0; }
.dv-fold[b-oel4c7qx7z] { border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--white); overflow: hidden; }
.dv-fold.is-open[b-oel4c7qx7z] { border-color: var(--border-default); }
.dv-fold__h[b-oel4c7qx7z] { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 52px; padding: 10px 14px; background: var(--slate-50); border: none; cursor: pointer; text-align: left; font-family: var(--font-sans); }
.dv-fold.is-open .dv-fold__h[b-oel4c7qx7z] { background: var(--white); border-bottom: 1px solid var(--border-subtle); }
.dv-fold__h:hover[b-oel4c7qx7z] { background: var(--slate-100); }
.dv-fold__h:focus-visible[b-oel4c7qx7z] { outline: none; box-shadow: var(--ring); }
.dv-fold__ic[b-oel4c7qx7z] { width: 28px; height: 28px; flex: none; border-radius: var(--radius-sm); background: var(--white); border: 1px solid var(--border-subtle); display: inline-flex; align-items: center; justify-content: center; color: var(--slate-500); }
.dv-fold__tx[b-oel4c7qx7z] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dv-fold__t[b-oel4c7qx7z] { font-size: var(--text-md); font-weight: 600; color: var(--text-strong); }
.dv-fold__s[b-oel4c7qx7z] { font-size: var(--text-2xs); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-fold__b[b-oel4c7qx7z] { padding: 16px 14px; }
.dv-fold__h[b-oel4c7qx7z]  svg { flex: none; }

.dv-drop[b-oel4c7qx7z] { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 18px; border: 1.5px dashed var(--border-default); border-radius: var(--radius-sm); text-align: center; }
.dv-drop:hover[b-oel4c7qx7z] { border-color: var(--slate-400); background: var(--slate-50); }
.dv-drop span[b-oel4c7qx7z] { font-size: var(--text-sm); color: var(--text-muted); }
.dv-drop small[b-oel4c7qx7z] { font-size: var(--text-2xs); color: var(--text-subtle); }
/* Input fichier en surimpression : capte clic + drop sur toute la zone. */
.dv-drop[b-oel4c7qx7z]  input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

.pending-files[b-oel4c7qx7z] { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pending-files li[b-oel4c7qx7z] { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: var(--text-sm); }
.linklike[b-oel4c7qx7z] { border: none; background: none; cursor: pointer; padding: 0; font: inherit; }
.linklike.danger[b-oel4c7qx7z] { color: var(--red-600); }

/* ---------- Barre d'action ---------- */
.dv-actions[b-oel4c7qx7z] { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 22px; padding: 16px 22px; border-top: 1px solid var(--border-subtle); background: var(--slate-50); }
.dv-shortcuts[b-oel4c7qx7z] { display: inline-flex; align-items: center; gap: 4px; margin-right: auto; font-size: var(--text-2xs); color: var(--text-subtle); white-space: nowrap; }
.dv-actions .btn[b-oel4c7qx7z] { white-space: nowrap; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .dv-grid[b-oel4c7qx7z], .dv-grid--client[b-oel4c7qx7z] { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .dv-grid--in[b-oel4c7qx7z] { grid-template-columns: 1fr; }
    .dv-dates[b-oel4c7qx7z] { grid-template-columns: 1fr; }
    .dv-shortcuts[b-oel4c7qx7z] { width: 100%; margin: 0 0 4px; }
}
@media (prefers-reduced-motion: reduce) {
    *[b-oel4c7qx7z] { transition: none !important; }
}