/* =========================================================================
   Doxeni - couche de style applicative
   Bootstrap 5 fournit la grille et les composants ; ce fichier ne redéfinit
   que l'habillage (couleurs, rayons, ombres, densité) pour toute l'app.
   Les styles propres à la liste des documents vivent dans documents.html.
   ========================================================================= */

:root {
    --ex-bg:        #f4f6f9;
    --ex-surface:   #ffffff;
    --ex-border:    #e3e8ef;
    --ex-border-str:#cdd5e0;
    --ex-text:      #1a2231;
    --ex-muted:     #66748a;
    /* Bleu de marque Doxeni : #105491, echantillonne sur le logo (voir CLAUDE.md).
       Toute l'echelle est exposee en variables parce que les <style> des templates
       codaient ces teintes en dur - c'est ce qui avait laisse la palette deriver
       vers le bleu Bootstrap/Tailwind (#2563eb, #0d6efd, #1e40af). */
    --ex-primary:    #105491;
    --ex-primary-d:  #0b3c6b;   /* survol d'un bouton, texte d'icone active */
    --ex-primary-ink:#0e4478;   /* texte sur fond clair : chips, tags */
    --ex-primary-t:  #dbe8f4;   /* tint fort : fond d'un etat actif */
    --ex-primary-t2: #eaf1f8;   /* tint clair : fond de chip, survol d'une zone */
    --ex-primary-br: #bcd4ea;   /* bordure posee sur un tint */
    --ex-radius:    10px;
    --ex-radius-lg: 14px;
    --ex-shadow:    0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    --ex-shadow-md: 0 4px 12px rgba(16, 24, 40, .08);
    --ex-shadow-lg: 0 12px 32px rgba(16, 24, 40, .16);
}

body {
    background-color: var(--ex-bg) !important;
    color: var(--ex-text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Chiffres alignés en colonne (montants, dates, pourcentages) */
table, .font-numeric { font-variant-numeric: tabular-nums; }

/* Échelle typographique resserrée : les titres Bootstrap par défaut (2.5rem)
   écrasent des écrans de saisie où le contenu compte plus que le titre. */
h1, .h1 { font-size: 1.7rem; font-weight: 650; letter-spacing: -.02em; }
h2, .h2 { font-size: 1.3rem; font-weight: 640; letter-spacing: -.01em; }
h3, .h3 { font-size: 1.1rem; font-weight: 620; }

/* Slogan de la marque : « Photographiez. Votre comptable a déjà tout reçu. »
   Même phrase que la vitrine, à l'accueil et sur la page de connexion. Bleu de
   marque via la variable, jamais un hexadécimal (cf. CLAUDE.md). */
.brand-slogan {
    color: var(--ex-primary);
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

/* ── En-tête applicatif ────────────────────────────────────────────────── */

.app-navbar {
    background-color: var(--ex-surface);
    border-bottom: 1px solid var(--ex-border);
    padding-top: .55rem;
    padding-bottom: .55rem;
}

.app-navbar .navbar-brand {
    font-weight: 650;
    letter-spacing: -.015em;
    color: var(--ex-text);
    /* Le lockup remplace le texte : padding vertical a zero pour que la hauteur de
       la navbar reste celle des liens, et `display: block` sur l'image pour supprimer
       la ligne de base qui ajouterait quelques pixels sous elle. */
    padding-top: 0;
    padding-bottom: 0;
}

.app-navbar .navbar-brand img { display: block; height: 24px; width: auto; }

.app-navbar .nav-link {
    color: var(--ex-muted);
    font-size: .9rem;
    font-weight: 500;
    padding: .35rem .7rem;
    border-radius: 8px;
}

.app-navbar .nav-link:hover { color: var(--ex-text); background-color: #eef1f6; }

.app-navbar .nav-link.active {
    color: var(--ex-text);
    background-color: var(--ex-primary-t);
    font-weight: 600;
}

/* Sélecteur de société active : discret, il n'est pas une action mais un contexte */
.societe-picker {
    max-width: 210px;
    font-size: .85rem;
    background-color: #f4f6f9;
    border-color: var(--ex-border);
    color: var(--ex-text);
}

/* ── Composants ───────────────────────────────────────────────────────── */

.card {
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius-lg);
    box-shadow: var(--ex-shadow);
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--ex-border);
    font-weight: 600;
}

.btn {
    --bs-btn-border-radius: var(--ex-radius);
    font-weight: 500;
}

.btn-primary {
    --bs-btn-bg: var(--ex-primary);
    --bs-btn-border-color: var(--ex-primary);
    --bs-btn-hover-bg: var(--ex-primary-d);
    --bs-btn-hover-border-color: var(--ex-primary-d);
}

.form-control, .form-select {
    border-radius: var(--ex-radius);
    border-color: var(--ex-border-str);
    color: var(--ex-text);
}

.form-control:focus, .form-select:focus {
    border-color: var(--ex-primary);
    box-shadow: 0 0 0 3px rgba(16, 84, 145, .14);
}

.form-label { font-weight: 500; color: var(--ex-muted); }

.badge { font-weight: 600; border-radius: 6px; }

.alert { border-radius: var(--ex-radius); border: 1px solid transparent; }

.table { --bs-table-border-color: var(--ex-border); }
.table > :not(caption) > * > * { padding: .55rem .6rem; }

/* En-têtes sombres des tableaux de référentiels : un bleu profond de la famille
   de #105491, et non l'ardoise neutre d'avant - deux familles de sombres dans la
   même page se lisaient comme un accident. */
.table-dark { --bs-table-bg: #123a5f; --bs-table-border-color: #1d5080; }
.table-dark th { font-weight: 600; letter-spacing: .03em; }

.pagination {
    --bs-pagination-border-color: var(--ex-border);
    --bs-pagination-color: var(--ex-muted);
    --bs-pagination-active-bg: var(--ex-primary);
    --bs-pagination-active-border-color: var(--ex-primary);
    --bs-pagination-border-radius: 8px;
}

.modal-content { border: 0; border-radius: var(--ex-radius-lg); box-shadow: var(--ex-shadow-lg); }

/* ── Barre de recherche d'un référentiel (filtre client) ──────────────── */

.table-toolbar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
                 margin-bottom: .6rem; }
.table-search { position: relative; flex: 1 1 260px; max-width: 360px; }
.table-search input { padding-right: 2rem; }
.table-search .search-clear { position: absolute; right: .3rem; top: 50%;
                              transform: translateY(-50%); border: 0; background: none;
                              color: var(--ex-muted); line-height: 1; padding: .2rem .35rem;
                              border-radius: 6px; }
.table-search .search-clear:hover { background: #eef1f6; color: var(--ex-text); }
.filter-result { font-size: .82rem; color: var(--ex-muted); }
.filter-empty td { text-align: center; color: var(--ex-muted); padding: 2rem 1rem; }

/* ── Confirmation partagée ────────────────────────────────────────────── */

.confirm-dialog { max-width: 420px; }
.confirm-icon { display: inline-flex; align-items: center; justify-content: center;
                width: 44px; height: 44px; border-radius: 50%;
                background: #fdecec; color: #d93a3a; margin-bottom: .75rem; }
.confirm-title { font-size: 1.05rem; font-weight: 620; margin: 0 0 .35rem; }
.confirm-text { color: var(--ex-muted); font-size: .9rem; margin: 0; }

/* ── Zone de dépôt (page d'accueil) ───────────────────────────────────── */

.border-dashed {
    border-style: dashed !important;
}

/* Etat survol pendant un glisser-deposer. Selecteur de classe et non `#dropzone` :
   la page porte deux zones (`drop-zone` et `drop-zone-zip`), aucune nommee
   `dropzone` - cette regle ne s'appliquait donc a rien, et le JS d'index.html
   ecrivait les couleurs en style inline. Il pose maintenant cette classe. */
.dragover {
    background-color: var(--ex-primary-t2) !important;
    border-color: var(--ex-primary) !important;
}