/* AR — styles applicatifs, en complément de Bootstrap 5.3. */

:root {
    --ar-radius: .75rem;

    /* Palette de l'identité : bleu nuit et vert menthe. */
    --ar-navy:        #1C2B3A;
    --ar-navy-light:  #2A3E52;
    --ar-navy-dark:   #141F2A;
    --ar-mint:        #5FD3A8;
    --ar-mint-dark:   #3FB88C;

    /* Le vert est réservé aux confirmations : badge « Signé », message
       d'enregistrement, coche du PDF. Il garde ainsi sa valeur de signal. */

    /* Bootstrap pilote ses composants par ces variables : les redéfinir
       habille boutons, liens et onglets sans surcharger chaque classe. */
    --bs-primary:            #1C2B3A;
    --bs-primary-rgb:        28, 43, 58;
    --bs-link-color:         #1C2B3A;
    --bs-link-hover-color:   #2A3E52;
    --bs-success:            #3FB88C;
    --bs-success-rgb:        63, 184, 140;
    --bs-focus-ring-color:   rgba(28, 43, 58, .25);
}

/* Boutons principaux. */
.btn-primary {
    --bs-btn-bg:              var(--ar-navy);
    --bs-btn-border-color:    var(--ar-navy);
    --bs-btn-hover-bg:        var(--ar-navy-light);
    --bs-btn-hover-border-color: var(--ar-navy-light);
    --bs-btn-active-bg:       var(--ar-navy-dark);
    --bs-btn-active-border-color: var(--ar-navy-dark);
    --bs-btn-disabled-bg:     var(--ar-navy);
    --bs-btn-disabled-border-color: var(--ar-navy);
}

.btn-outline-secondary {
    --bs-btn-color:        var(--ar-navy);
    --bs-btn-border-color: rgba(28, 43, 58, .3);
    --bs-btn-hover-bg:     var(--ar-navy);
    --bs-btn-hover-border-color: var(--ar-navy);
}

/* Confirmation : le vert ne sert qu'à signaler un succès. */
.badge.text-bg-success {
    background-color: var(--ar-mint-dark) !important;
    color: #fff !important;
}

.alert-success {
    --bs-alert-bg:          rgba(95, 211, 168, .14);
    --bs-alert-border-color: rgba(63, 184, 140, .35);
    --bs-alert-color:       #1F6B51;
}

.form-check-input:checked {
    background-color: var(--ar-mint-dark);
    border-color: var(--ar-mint-dark);
}

.form-control:focus,
.form-check-input:focus {
    border-color: rgba(28, 43, 58, .5);
    box-shadow: 0 0 0 .25rem rgba(28, 43, 58, .15);
}

/* Onglets de l'historique. */
.nav-tabs .nav-link {
    color: var(--bs-secondary-color);
}

.nav-tabs .nav-link.active {
    color: var(--ar-navy);
    font-weight: 600;
    border-bottom-color: transparent;
    box-shadow: inset 0 -2px 0 var(--ar-navy);
}

/* En-tête. */
.ar-navbar {
    background: var(--ar-navy) !important;
    border-bottom: 0 !important;
}

.ar-navbar .btn-outline-light {
    --bs-btn-border-color: rgba(255, 255, 255, .35);
}

.ar-logo-img {
    height: 26px;
    width: auto;
}

/* Zone de signature : touch-action none est indispensable, sinon le doigt
   fait défiler la page au lieu de tracer. */
.ar-signature-canvas {
    touch-action: none;
    width: 100%;
    height: 180px;
    background: #fff;
    border: 1px dashed var(--bs-border-color);
    border-radius: var(--ar-radius);
    cursor: crosshair;
}

/* Marges de sécurité pour l'app installée sur iOS. */
body {
    padding-bottom: env(safe-area-inset-bottom);
}

/* ── Écran de connexion ──────────────────────────────────── */
.ar-login-wrap {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: var(--ar-navy);
}

.ar-login-card {
    width: 100%;
    max-width: 26rem;
    background: #fff;
    border: 0;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .25);
}

.ar-login-logo {
    width: 100%;
    max-width: 15rem;
    height: auto;
}

/* Surlignage d'un accusé récent : vert, comme toute confirmation. */

/* Saisie du code : chiffres espacés, lisibles d'un coup d'œil. */
.ar-code-input {
    letter-spacing: .5em;
    text-align: center;
    font-size: 1.5rem;
    font-variant-numeric: tabular-nums;
}

/* Vignette de signature dans l'historique. Fond blanc : le PNG est
   transparent, il serait illisible sur une carte sombre. */
.ar-signature-thumb {
    max-height: 60px;
    max-width: 100%;
    background: #fff;
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
    padding: .25rem;
}

/* Aperçu de la photo avant envoi. */
.ar-photo-preview {
    max-height: 140px;
    max-width: 100%;
    border-radius: var(--ar-radius);
    border: 1px solid var(--bs-border-color);
}

/* Vignette de photo dans l'historique. */
.ar-photo-thumb {
    height: 60px;
    width: 60px;
    object-fit: cover;
    border-radius: .375rem;
    border: 1px solid var(--bs-border-color);
}

/* Mise en évidence brève d'un accusé qui vient d'être créé ou signé :
   sans elle, l'ajout d'une carte en tête de liste passe inaperçu. */
@keyframes ar-flash {
    from { background-color: rgba(95, 211, 168, .22); }
    to   { background-color: transparent; }
}

.ar-flash {
    animation: ar-flash 1.6s ease-out;
    border-color: var(--ar-mint-dark);
}

/* Respecte le réglage système de réduction des animations. */
@media (prefers-reduced-motion: reduce) {
    .ar-flash {
        animation: none;
        border-color: var(--ar-mint-dark);
    }
}

/* ── Navigation principale, en bas ───────────────────────── */
.ar-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    background: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
    /* Marge de sécurité pour l'indicateur d'accueil des iPhone récents. */
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -.125rem .5rem rgba(0, 0, 0, .04);
}

.ar-nav-btn {
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .125rem;
    padding: .5rem .25rem .625rem;
    background: none;
    border: 0;
    color: var(--bs-secondary-color);
    font-size: .75rem;
    line-height: 1.2;
    /* Cible tactile confortable, au-delà du minimum recommandé. */
    min-height: 3.25rem;
}

.ar-nav-btn.active {
    color: var(--ar-navy);
    font-weight: 600;
    box-shadow: inset 0 2px 0 var(--ar-navy);
}

.ar-nav-icon {
    font-size: 1.25rem;
    line-height: 1;
}

.ar-nav-badge {
    position: absolute;
    top: .25rem;
    left: 50%;
    margin-left: .5rem;
    min-width: 1.1rem;
    padding: 0 .3rem;
    border-radius: .75rem;
    background: var(--ar-mint-dark);
    color: #fff;
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1.1rem;
    text-align: center;
}

/* La barre fixe recouvrirait le bas du contenu sans cette réserve. */
.ar-main {
    padding-bottom: 5.5rem !important;
}

/* Sur grand écran, la barre reste en bas mais se centre avec le contenu. */
@media (min-width: 768px) {
    .ar-bottom-nav {
        justify-content: center;
        gap: 2rem;
    }

    .ar-nav-btn {
        flex: 0 0 auto;
        flex-direction: row;
        gap: .5rem;
        padding: .75rem 1.5rem;
        font-size: .875rem;
    }

    .ar-nav-badge {
        position: static;
        margin-left: .25rem;
    }
}

/* ── État de la connexion ────────────────────────────────── */
.ar-status-bar {
    position: sticky;
    top: 0;
    z-index: 1035;
    padding: .5rem 1rem;
    background: var(--ar-navy-light);
    color: #fff;
    font-size: .8125rem;
    text-align: center;
}

.ar-status-bar.ar-status-sync {
    background: var(--ar-mint-dark);
}

/* Accusé saisi hors ligne, pas encore transmis. */
.ar-badge-queued {
    background: rgba(28, 43, 58, .1);
    color: var(--ar-navy);
    font-weight: 500;
}

/* Séparateur « ou » entre les deux modes de connexion. */
.ar-sep {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1rem 0;
    color: var(--bs-secondary-color);
    font-size: .8125rem;
}

.ar-sep::before,
.ar-sep::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--bs-border-color);
}

/* ── Invitation à installer l'application ────────────────── */
.ar-install-bar {
    position: fixed;
    left: .75rem;
    right: .75rem;
    /* Au-dessus de la barre de navigation quand elle est présente. */
    bottom: calc(.75rem + env(safe-area-inset-bottom));
    z-index: 1040;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .875rem 1rem;
    border-radius: var(--ar-radius);
    background: var(--ar-navy);
    color: #fff;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .3);
    animation: ar-install-in .3s ease-out;
}

/* Sur l'écran connecté, la barre de navigation occupe déjà le bas :
   le bandeau se place au-dessus. La classe est posée en JavaScript,
   :has() n'étant pas reconnu par les Safari antérieurs à 15.4. */
.ar-install-bar.ar-above-nav {
    bottom: calc(4.5rem + env(safe-area-inset-bottom));
}

@keyframes ar-install-in {
    from { transform: translateY(1rem); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .ar-install-bar { animation: none; }
}

.ar-install-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .125rem;
    font-size: .8125rem;
    line-height: 1.35;
}

.ar-install-text strong { font-size: .875rem; }
.ar-install-text span   { color: rgba(255, 255, 255, .75); }

.ar-share-icon {
    display: inline-block;
    padding: 0 .25rem;
    border-radius: .25rem;
    background: rgba(255, 255, 255, .18);
    font-size: .9em;
}

.ar-install-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
}

.ar-install-close {
    padding: 0 .375rem;
    border: 0;
    background: none;
    color: rgba(255, 255, 255, .6);
    font-size: 1.5rem;
    line-height: 1;
}

/* Nom de l'entreprise, sous le titre : indique dans quel périmètre on
   travaille, ce qui compte dès qu'un compte peut changer de société. */
.ar-company-name {
    font-size: .75rem;
    color: rgba(255, 255, 255, .6);
    font-weight: 400;
}