/* B3 tâche 065 — import du référentiel de postes.
 *
 * Portée de `app/views/mockups/pages/admin_taxonomy_imports.html.erb`
 * (bloc <style>, l.19-102), mêmes sélecteurs et mêmes valeurs. La feuille est
 * sortie de la vue parce que le back-office ne porte pas de CSS en ligne ;
 * c'est le même geste que `recruiter_plans.css` (tâche 016).
 *
 * `.tx-wrap` garde `4px 0 32px` là où la maquette écrit `28px 16px 64px` : la
 * maquette est une page nue, l'écran vit dans `layouts/admin` qui pose déjà
 * `px-8 py-8` autour du contenu. Reprendre la valeur de la maquette doublerait
 * la marge. C'est le seul chiffre de cette feuille qui s'écarte de la maquette,
 * et il s'en écarte pour rendre la MÊME marge à l'écran (vérifié le 24/09/2026).
 *
 * Quatre écarts, tous inscrits dans `decisions.md` :
 *
 *   · les six dorés de la maquette passent aux jetons du design system
 *     (--gold-500/600/700, --gold-200, --n-500, --n-700) : le garde-fou
 *     `DesignSystemTest` refuse une feuille neuve qui repart sur ses propres
 *     hexadécimaux, et neuf dorés en circulation ont déjà coûté assez cher.
 *     Les deux neutres CHAUDS de la maquette (#6E6250, #7A6E5A) n'avaient pas
 *     de jeton : repliés sur --n-700 et --n-500 ils viraient au gris froid, et
 *     l'écart se voyait. Ils sont entrés au design system le 24/09/2026 sous
 *     --n-warm-600 et --n-warm-500, ce que le message du garde-fou demande ;
 *   · `.tag-off`, la pastille des postes désactivés par un import ;
 *   · `.lines-scroll`, le conteneur défilant du rapport ligne par ligne, exigé
 *     par R3-MOB.44 à 390 px ;
 *   · `.seg`, le tableau « ce que chaque palier du fichier est devenu ».
 *
 * Le bloc `.pager` / `.pg` de la maquette n'est pas repris : la pagination du
 * back-office est celle de `admin/shared/pagination`, commune à toutes les
 * listes. Recopier une seconde barre de pagination morte n'aurait rien servi.
 */

.page-tx { font-family: 'Geist', system-ui, sans-serif; }
.page-tx * { box-sizing: border-box; }
.page-tx .tx-wrap { max-width: 1100px; margin: 0 auto; padding: 4px 0 32px; }
.page-tx .kick { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-500); font-weight: 700; margin-bottom: 6px; }
.page-tx h1 { font-size: 27px; font-weight: 700; color: #2C2413; margin: 0 0 8px; font-family: 'Playfair Display', serif; }
.page-tx .lede { font-size: 14px; color: var(--n-warm-600); line-height: 1.6; max-width: 760px; margin: 0 0 24px; }
.page-tx h2 { font-size: 18px; font-weight: 700; color: #2C2413; margin: 0 0 4px; }
.page-tx .h2sub { font-size: 13px; color: var(--n-warm-500); line-height: 1.55; margin: 0 0 14px; }
.page-tx section { margin-bottom: 34px; }

.page-tx .card { background: #fff; border: 1px solid #E7E1D6; border-radius: 16px; padding: 20px; }
.page-tx .rule { display: flex; gap: 10px; align-items: flex-start; background: #FBF7EE; border: 1px solid #EADDC2; border-radius: 12px; padding: 12px 14px; font-size: 13px; color: var(--gold-700); line-height: 1.55; margin-bottom: 18px; }
.page-tx .rule svg { flex: none; margin-top: 2px; }
.page-tx .rules-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-bottom: 22px; }
.page-tx .rule-c { background: #fff; border: 1px solid #E7E1D6; border-radius: 14px; padding: 14px 16px; }
.page-tx .rule-c b { display: block; font-size: 13.5px; color: #2C2413; margin-bottom: 5px; }
.page-tx .rule-c span { font-size: 12.5px; color: var(--n-warm-500); line-height: 1.55; }

/* Dépôt */
.page-tx .drop { border: 1.5px dashed #D6C9A8; background: #FDFBF6; border-radius: 16px; padding: 22px; }
.page-tx .drop-g { display: grid; grid-template-columns: 1fr 210px; gap: 14px; align-items: end; }
.page-tx label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--n-warm-600); margin-bottom: 6px; }
.page-tx input[type=file], .page-tx input[type=text], .page-tx select { width: 100%; min-width: 0; padding: 11px 13px; border-radius: 11px; border: 1.5px solid rgba(0, 0, 0, .09); font-size: 13.5px; font-family: inherit; background: #fff; }
.page-tx .hint { font-size: 12px; color: #8E8370; margin-top: 8px; line-height: 1.5; }
.page-tx .btn-gold { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: 999px; border: none; font-size: 13.5px; font-weight: 700; color: var(--on-gold); text-shadow: var(--on-gold-shadow); background: var(--gold-fill); cursor: pointer; font-family: inherit; }
.page-tx .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: 999px; border: 1.5px solid rgba(0, 0, 0, .1); background: #fff; font-size: 13px; font-weight: 600; color: var(--n-warm-600); cursor: pointer; font-family: inherit; text-decoration: none; }

/* Tableau : conteneur à défilement horizontal déclaré */
.page-tx .tscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid #E7E1D6; border-radius: 16px; background: #fff; }
.page-tx table { width: 100%; border-collapse: collapse; min-width: 880px; font-size: 13px; }
.page-tx thead th { background: #FBF7EE; color: var(--gold-700); text-align: left; font-weight: 700; font-size: 11.5px; letter-spacing: .03em; text-transform: uppercase; padding: 11px 14px; white-space: nowrap; }
.page-tx tbody td { padding: 12px 14px; border-top: 1px solid #F0EBE1; color: #3D3527; vertical-align: top; }
.page-tx tbody tr:hover td { background: #FDFBF6; }
.page-tx .num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.page-tx .file { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12px; color: #2C2413; word-break: break-all; }
.page-tx .pill { display: inline-block; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.page-tx .scroll-note { font-size: 11.5px; color: #9C9280; margin-top: 7px; }

/* Rapports */
.page-tx .rep { border-radius: 16px; border: 1px solid #E7E1D6; background: #fff; overflow: hidden; margin-bottom: 16px; }
.page-tx .rep-h { padding: 15px 18px; border-bottom: 1px solid #F0EBE1; }
.page-tx .rep-h.ok { background: #F2F8F4; border-bottom-color: #DCEAE1; }
.page-tx .rep-h.ko { background: #FDF3EE; border-bottom-color: #F2DCD0; }
.page-tx .rep-t { font-size: 15px; font-weight: 700; color: #2C2413; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.page-tx .rep-s { font-size: 12.5px; color: var(--n-warm-600); line-height: 1.55; }
.page-tx .rep-b { padding: 16px 18px; }
.page-tx .counts { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 14px; }
.page-tx .count { border: 1px solid #EDE7DB; border-radius: 11px; padding: 8px 13px; min-width: 104px; }
.page-tx .count b { display: block; font-size: 19px; font-weight: 700; color: #2C2413; font-variant-numeric: tabular-nums; }
.page-tx .count span { font-size: 11px; color: #8E8370; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.page-tx .lines { border: 1px solid #F0EBE1; border-radius: 12px; overflow: hidden; }
.page-tx .line { padding: 11px 13px; border-bottom: 1px solid #F5F1E9; font-size: 12.5px; line-height: 1.55; }
.page-tx .line:last-child { border-bottom: 0; }
.page-tx .line .lk { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11.5px; color: var(--gold-700); word-break: break-all; }
.page-tx .line .lr { color: #8A3E12; font-weight: 700; display: block; margin-top: 3px; }
.page-tx .line .ld { color: var(--n-warm-500); display: block; margin-top: 2px; }
.page-tx .line .ln { display: inline-block; font-weight: 700; color: #2C2413; margin-right: 7px; font-variant-numeric: tabular-nums; }
.page-tx .tag { display: inline-block; border-radius: 6px; padding: 1px 7px; font-size: 10.5px; font-weight: 700; margin-right: 7px; }
.page-tx .tag-new { background: #EAF3EC; color: #2F7A46; }
.page-tx .tag-upd { background: #FBF7EE; color: var(--gold-600); }
.page-tx .tag-off { background: #F3F0EA; color: var(--n-700); }
.page-tx .acts { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 15px; }

/* R3-MOB.44 — le rapport ligne par ligne défile DANS son conteneur, il
   n'allonge pas la page indéfiniment et ne déborde pas à 390 px. */
.page-tx .lines-scroll { max-height: 420px; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* Ce que chaque palier du fichier est devenu. */
.page-tx .seg { border: 1px solid #F0EBE1; border-radius: 12px; overflow: hidden; margin-bottom: 14px; }
.page-tx .seg-r { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 10px 13px; border-bottom: 1px solid #F5F1E9; font-size: 12.5px; color: var(--n-500); line-height: 1.5; }
.page-tx .seg-r:last-child { border-bottom: 0; }
.page-tx .seg-r b { color: #2C2413; font-weight: 700; }
.page-tx .seg-r em { font-style: normal; color: #9C9280; font-variant-numeric: tabular-nums; }
.page-tx .seg-r span { flex: 1 1 100%; }

.page-tx .empty { border: 1px dashed #E3DCCE; border-radius: 14px; padding: 22px; text-align: center; font-size: 13px; color: #8E8370; background: #FDFBF6; line-height: 1.6; }

@media (max-width: 720px) {
  .page-tx .drop-g { grid-template-columns: 1fr; }
  .page-tx h1 { font-size: 23px; }
  .page-tx .count { flex: 1 1 44%; min-width: 0; }
}