/*
 * Mode hors connexion (offline.js) : seuls éléments propres à ce mode. Les
 * pages elles-mêmes sont les pages ordinaires (app.css), à l'identique.
 * Classes préfixées oq-.
 */

/* Bandeau d'état : flottant en bas de l'écran, il ne déplace rien dans la page. */
.oq-bar {
    position: fixed; z-index: 55; left: 50%; transform: translateX(-50%);
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
    width: max-content; max-width: min(calc(100vw - 32px), 560px); box-sizing: border-box;
    padding: 8px 14px; border-radius: var(--r-full, 999px);
    background: #0F172A; color: #fff; box-shadow: var(--ombre-haute);
    font-size: .84rem; line-height: 1.35;
}
body.has-bottom-nav .oq-bar { bottom: calc(var(--barre-basse, 64px) + env(safe-area-inset-bottom, 0px) + 10px); }
@media (min-width: 1000px) { body.has-bottom-nav .oq-bar { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } }
.oq-inline { margin: 2px 0 0; font-size: .74rem; font-weight: 600; color: #B45309; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oq-inline::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #F59E0B; vertical-align: 1px; }
.oq-inline[data-tone="sync"] { color: #1D4ED8; }
.oq-inline[data-tone="sync"]::before { background: #60A5FA; }
.oq-inline[data-tone="on"] { color: #15803D; }
.oq-inline[data-tone="on"]::before { background: #22C55E; }
html[data-theme="dark"] .oq-inline { color: #FCD34D; }
html[data-theme="dark"] .oq-inline[data-tone="sync"] { color: #93C5FD; }
.oq-bar__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #F59E0B; }
.oq-bar[data-tone="sync"] .oq-bar__dot { background: #60A5FA; }
.oq-bar[data-tone="on"] .oq-bar__dot { background: #22C55E; }
.oq-bar[data-tone="warn"] .oq-bar__dot { background: #F87171; }
.oq-bar__text { min-width: 0; }
.oq-bar__link { color: #fff; font-weight: 600; text-decoration: underline; white-space: nowrap; }
.oq-bar__track { flex: 1 0 100%; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.oq-bar__track i { display: block; height: 100%; background: #60A5FA; transition: width .3s ease; }
/* Le bandeau flottant ne masque jamais la fin d'une page. */
body:has(.oq-bar:not([hidden])) .main { padding-bottom: 64px; }
/* La notification remonte au-dessus du bandeau. */
body:has(.oq-bar:not([hidden])) .toast { margin-bottom: 48px; }

/* « Annuler » dans la notification. */
#toast:has(.oq-toast-undo) { pointer-events: auto; }
.oq-toast-undo { margin-left: 6px; padding: 2px 8px; border: 0; border-radius: 6px; background: rgba(255, 255, 255, .16); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }

/* Liste des envois (page « À envoyer », encart des pages gardées). */
.oq-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.oq-item { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--bordure); border-radius: var(--r-md, 12px); background: var(--surface); }
.oq-item__pic { flex: none; width: 48px; height: 48px; border-radius: 8px; object-fit: cover; background: var(--bordure); }
.oq-item__pic--none { display: block; }
.oq-item__body { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.oq-item__title { overflow-wrap: anywhere; }
.oq-item__meta { font-size: .8rem; color: var(--texte-secondaire); }
.oq-item__error { font-size: .82rem; color: var(--rose, #BE123C); }
.oq-item__actions { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.oq-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .74rem; font-weight: 600; background: var(--ambre-clair, #FEF3C7); color: var(--ambre, #92400E); }
.oq-badge--warn { background: #FFE4E6; color: #9F1239; }
.oq-badge--error { background: #FEE2E2; color: #991B1B; }
.oq-empty { margin: 0; color: var(--texte-secondaire); }
.oq-pending { margin: 0 0 16px; }
.oq-pending__title { margin: 0 0 10px; font-size: 1rem; }
.oq-missing h1 { font-size: 1.3rem; }

/* Profil : interrupteur « Mode hors ligne ». */
.oq-switch { margin: 4px 0 0; padding-top: 10px; border-top: 1px solid var(--bordure); }
.oq-switch__row { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.oq-switch__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.oq-switch__input { appearance: none; flex: none; position: relative; width: 44px; height: 26px; margin: 0; border-radius: 999px; background: var(--bordure); cursor: pointer; transition: background .2s; }
.oq-switch__input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .2s; }
.oq-switch__input:checked { background: var(--bleu-action, #2563EB); }
.oq-switch__input:checked::after { transform: translateX(18px); }
.oq-switch__input:focus-visible { outline: 3px solid var(--bleu-action, #2563EB); outline-offset: 2px; }
.oq-switch__input:disabled { opacity: .6; }
@media (prefers-reduced-motion: reduce) { .oq-switch__input, .oq-switch__input::after { transition: none; } }

/* Profil : carte « Mode hors ligne » (l'interrupteur ouvre la carte, sans filet au-dessus). */
.profile-card .oq-switch { margin: 0; padding-top: 0; border-top: 0; }
.oq-progress { display: flex; flex-direction: column; gap: 6px; }
.oq-progress__label { margin: 0; color: var(--texte-secondaire); font-variant-numeric: tabular-nums; }
.oq-progress .progress__fill { transition: width .3s ease; }

/* Profil : état de la copie sur l'appareil. */
.sync-note { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 0; padding-top: 10px; border-top: 1px solid var(--bordure); font-size: .78rem; color: var(--texte-secondaire); }
.sync-note strong { font-weight: 600; color: var(--texte-secondaire); }
.sync-note__dot { flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--ardoise, #64748B); }
.sync-note[data-state="ok"] .sync-note__dot { background: #22C55E; }
.sync-note[data-state="pending"] .sync-note__dot { background: #F59E0B; }
.sync-note[data-state="warn"] .sync-note__dot { background: var(--rose, #BE123C); }

html[data-theme="dark"] .oq-badge--warn, html[data-theme="dark"] .oq-badge--error { background: rgba(248, 113, 113, .18); color: #FCA5A5; }
html[data-theme="dark"] .oq-badge { background: rgba(245, 158, 11, .18); color: #FCD34D; }

/* Brouillon supprimé ou publié sans réseau : encore affiché, en attente d'envoi. */
.oq-gone > :not(.oq-gone__note) { opacity: .55; }
.oq-gone strong { text-decoration: line-through; }
.oq-gone[data-oq-marked="publier"] strong { text-decoration: none; }
.oq-gone__note { margin: 0; padding: 8px 10px; border-radius: var(--r-md, 12px); font-size: .85rem; font-weight: 600; background: var(--ambre-clair, #FEF3C7); color: var(--ambre, #92400E); opacity: 1; }