/* Parc — styles applicatifs, en complément de Bootstrap 5.3.
   Palette reprise de Bqt : ardoise bleutée sur fond blanc, accent vert. */

:root {
    --parc-radius: .625rem;

    /* #546a76 porte du texte blanc à 5,68:1 (WCAG AA exige 4,5:1). */
    --parc-slate:       #546a76;
    --parc-slate-light: #65808e;
    --parc-slate-dark:  #44565f;
    --parc-accent:      #3FB88C;

    --parc-line:      #DDE2E8;
    --parc-line-soft: #EDF0F3;
    --parc-head-bg:   #F7F8FA;
    --parc-today-bg:  rgba(63, 184, 140, .07);

    /* Bootstrap pilote ses composants par ces variables : les redéfinir
       habille boutons, liens et champs sans surcharger chaque classe. */
    --bs-primary:          #546a76;
    --bs-primary-rgb:      84, 106, 118;
    --bs-link-color:       #44565f;
    --bs-link-hover-color: #546a76;
    --bs-focus-ring-color: rgba(84, 106, 118, .3);
}

body {
    background: #fff;
    /* Encoche iOS en mode plein écran. */
    padding-bottom: env(safe-area-inset-bottom);
}

.btn-primary {
    --bs-btn-bg:                    var(--parc-slate);
    --bs-btn-border-color:          var(--parc-slate);
    --bs-btn-hover-bg:              var(--parc-slate-light);
    --bs-btn-hover-border-color:    var(--parc-slate-light);
    --bs-btn-active-bg:             var(--parc-slate-dark);
    --bs-btn-active-border-color:   var(--parc-slate-dark);
    --bs-btn-disabled-bg:           var(--parc-slate);
    --bs-btn-disabled-border-color: var(--parc-slate);
}

.form-control:focus, .form-select:focus {
    border-color: var(--parc-slate-light);
    box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
}

/* ── Barre supérieure ───────────────────────────────────── */
.parc-topbar {
    background: var(--parc-slate);
    color: #fff;
    padding: .5rem .75rem;
    padding-top: calc(.5rem + env(safe-area-inset-top));
}
.parc-topbar .btn-outline-light { --bs-btn-border-color: rgba(255,255,255,.35); }

.parc-brand {
    font-weight: 600;
    letter-spacing: .02em;
}

/* Onglets de navigation, dans le bandeau. */
.parc-nav .btn {
    --bs-btn-color: rgba(255,255,255,.75);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(255,255,255,.12);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--parc-slate);
    --bs-btn-active-bg: #fff;
    --bs-btn-active-border-color: #fff;
    font-weight: 500;
}

/* ── Conteneur ──────────────────────────────────────────── */
.parc-wrap {
    max-width: 780px;
    margin: 0 auto;
    padding: 1rem .75rem 3rem;
}

/* ── Écran de connexion ─────────────────────────────────── */
.parc-login {
    max-width: 380px;
    margin: 3rem auto;
    padding: 0 1rem;
}
.parc-login-logo {
    width: 64px; height: 64px;
    border-radius: 16px;
    background: var(--parc-slate);
    color: #fff;
    display: grid; place-items: center;
    font-size: 1.75rem; font-weight: 700;
    margin: 0 auto 1rem;
}
/* Code à six chiffres : chasse fixe et lettres espacées, pour qu'on
   puisse relire ce qu'on a tapé sans compter les caractères. */
.parc-code-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.5rem;
    letter-spacing: .5em;
    text-align: center;
    padding-left: .5em;   /* compense le letter-spacing du dernier signe */
}

/* ── Formulaire de saisie ───────────────────────────────── */
.parc-card {
    border: 1px solid var(--parc-line);
    border-radius: var(--parc-radius);
    background: #fff;
}
.parc-card-head {
    background: var(--parc-head-bg);
    border-bottom: 1px solid var(--parc-line);
    border-radius: var(--parc-radius) var(--parc-radius) 0 0;
    padding: .625rem .875rem;
    font-weight: 600;
    color: var(--parc-slate-dark);
}

/* Autocomplétion : liste posée sous le CHAMP, pas sous le bloc.
   Ancrée au conteneur, elle se retrouvait sous le texte d'aide et
   recouvrait le champ Remarque. Le champ est donc repéré par sa propre
   position, calculée en JS via --suggest-top. */
.parc-suggest-wrap { position: relative; }
.parc-suggest {
    position: absolute;
    inset-inline: 0;
    top: var(--suggest-top, calc(100% + 2px));
    z-index: 30;
    background: #fff;
    border: 1px solid var(--parc-line);
    border-radius: var(--parc-radius);
    box-shadow: 0 8px 20px rgba(0,0,0,.09);
    max-height: 15rem;
    overflow-y: auto;
    padding: .25rem;
}
.parc-suggest button {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: none;
    padding: .5rem .625rem;
    border-radius: .375rem;
    font-size: .95rem;
}
.parc-suggest button:hover,
.parc-suggest button[aria-selected="true"] {
    background: var(--parc-line-soft);
}

/* ── Liste des tickets ──────────────────────────────────── */
/* En-tête de mois : bouton d'accordéon, collé en haut pendant le
   défilement — sur un long historique, on doit toujours savoir quel mois
   on lit. */
.parc-month {
    position: sticky;
    top: 0;
    z-index: 10;
    width: 100%;
    background: var(--parc-head-bg);
    border: 1px solid var(--parc-line);
    border-radius: var(--parc-radius);
    padding: .5rem .75rem;
    margin: 1.25rem 0 .5rem;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .5rem;
    /* Remise à plat du style de bouton par défaut du navigateur. */
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.parc-month:hover { background: var(--parc-line-soft); }
.parc-month:focus-visible {
    outline: 2px solid var(--parc-slate-light);
    outline-offset: 2px;
}
.parc-month.is-current { background: var(--parc-today-bg); }
.parc-month.is-current:hover { background: rgba(63, 184, 140, .14); }

/* Chevron : pointe à droite fermé, vers le bas ouvert. */
.parc-chevron {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--parc-slate);
    transition: transform .15s ease;
}
.parc-month[aria-expanded="true"] .parc-chevron { transform: rotate(90deg); }

@media (prefers-reduced-motion: reduce) {
    .parc-chevron { transition: none; }
}

.parc-month-name {
    font-weight: 600;
    text-transform: capitalize;
    color: var(--parc-slate-dark);
}
.parc-month-sum {
    font-size: .85rem;
    color: #6c757d;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Le total passe à la ligne sur écran étroit plutôt que d'écraser le
   nom du mois. */
@media (max-width: 380px) {
    .parc-month { flex-wrap: wrap; }
    .parc-month-sum { flex-basis: 100%; margin-left: 1.25rem !important; }
}

.parc-row {
    display: grid;
    grid-template-columns: 5.5rem 1fr 3.5rem auto;
    gap: .5rem;
    align-items: center;
    padding: .625rem .75rem;
    border-bottom: 1px solid var(--parc-line-soft);
}
.parc-row:last-child { border-bottom: 0; }

.parc-date {
    font-variant-numeric: tabular-nums;
    font-size: .9rem;
    color: #6c757d;
    white-space: nowrap;
}
.parc-company {
    font-weight: 500;
    overflow-wrap: anywhere;
}
.parc-note {
    display: block;
    font-size: .82rem;
    color: #6c757d;
    font-weight: 400;
}
/* Pastille du nombre : la colonne que l'on vient lire en priorité. */
.parc-qty {
    justify-self: end;
    min-width: 2.25rem;
    text-align: center;
    background: var(--parc-slate);
    color: #fff;
    border-radius: 999px;
    padding: .15rem .5rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Les actions restent sur la ligne : les renvoyer en dessous doublait
   la hauteur de chaque ticket, et une liste de trente lignes devenait
   deux fois plus longue à parcourir. */
.parc-actions .btn {
    --bs-btn-padding-x: .45rem;
    --bs-btn-padding-y: .15rem;
    line-height: 1;
}
.parc-actions svg { display: block; }

@media (max-width: 480px) {
    .parc-row {
        grid-template-columns: 4.25rem 1fr auto auto;
        gap: .35rem;
        padding: .5rem .5rem;
    }
    .parc-date { font-size: .82rem; }
}

.parc-empty {
    text-align: center;
    color: #6c757d;
    padding: 2.5rem 1rem;
}

/* ── Toast ──────────────────────────────────────────────── */
.parc-toast {
    position: fixed;
    left: 50%;
    bottom: calc(1.25rem + env(safe-area-inset-bottom));
    transform: translateX(-50%) translateY(1rem);
    background: var(--parc-slate-dark);
    color: #fff;
    padding: .625rem 1.125rem;
    border-radius: 999px;
    font-size: .925rem;
    box-shadow: 0 6px 18px rgba(0,0,0,.2);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    z-index: 1080;
    max-width: calc(100vw - 2rem);
    text-align: center;
}
.parc-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.parc-toast.is-error { background: #b02a37; }
.parc-toast.is-ok    { background: var(--parc-accent); }

/* Respecte le réglage système « réduire les animations ». */
@media (prefers-reduced-motion: reduce) {
    .parc-toast { transition: none; }
}