/* ============================================================================
   IPR Topo — Refonte graphique inspirée d'Infrabel
   Refonte PUREMENT visuelle, centralisée dans ce fichier.
   Les parties FONCTIONNELLES (scrollbars synchronisées, largeurs de colonnes,
   en-têtes collants, lignes désactivées, Tom Select) sont préservées et
   simplement recolorées selon la palette.
   ============================================================================ */

:root {
    /* Palette Infrabel */
    --ipr-primary:        #0069B4;
    --ipr-primary-dark:   #003A5D;
    --ipr-primary-darker: #183B56;
    --ipr-accent:         #00B5E2;
    --ipr-accent-light:   #E6F7FC;
    --ipr-bg:             #F3F8FB;
    --ipr-surface:        #FFFFFF;
    --ipr-border:         #DCE7EE;
    --ipr-text:           #193B52;
    --ipr-muted:          #6B7F8F;
    --ipr-success:        #00A878;
    --ipr-warning:        #F5A623;
    --ipr-danger:         #E84A5F;

    /* Alias rétro-compatibles (anciennes variables encore référencées) */
    --ipr-secondary:      #00B5E2;
    --ipr-light:          #E6F7FC;

    --ipr-radius:         14px;
    --ipr-radius-sm:      10px;
    --ipr-shadow:         0 8px 24px rgba(0, 58, 93, .06);
    --ipr-shadow-nav:     0 4px 18px rgba(0, 0, 0, .12);
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
body {
    background: var(--ipr-bg);
    color: var(--ipr-text);
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    font-size: 0.95rem;
}

.container, .container-fluid {
    padding-top: 28px;
    padding-bottom: 40px;
}
/* Largeur raisonnable sur très grands écrans pour les pages "container" */
@media (min-width: 1400px) {
    .container { max-width: 1240px; }
}

h1, h2, h3, h4, h5 { color: var(--ipr-primary-darker); font-weight: 700; }
h1 { letter-spacing: -.3px; }
a { color: var(--ipr-primary); text-decoration: none; }
a:hover { color: var(--ipr-primary-dark); }
.text-muted { color: var(--ipr-muted) !important; }
hr { border-color: var(--ipr-border); opacity: 1; }

/* ── Classes utilitaires héritées (utilisées dans les templates) ──────────── */
.bg-ipr  { background-color: var(--ipr-primary-darker) !important; }
.text-ipr { color: var(--ipr-primary) !important; }
.btn-ipr {
    background-color: var(--ipr-primary);
    color: #fff;
    border-color: var(--ipr-primary);
    border-radius: var(--ipr-radius-sm);
    font-weight: 600;
}
.btn-ipr:hover {
    background-color: var(--ipr-primary-dark);
    border-color: var(--ipr-primary-dark);
    color: #fff;
}

/* ── Navbar ───────────────────────────────────────────────────────────────── */
.navbar.bg-ipr, .navbar {
    background: var(--ipr-primary-darker) !important;
    min-height: 72px;
    box-shadow: var(--ipr-shadow-nav);
}
.navbar-brand {
    font-weight: 800;
    color: #fff !important;
    letter-spacing: .2px;
    display: inline-flex;
    align-items: center;
    padding-top: 4px;
    padding-bottom: 4px;
}
/* Logo TrackRef dans la navbar (version blanche, contraste garanti sur bleu nuit) */
.navbar-logo {
    height: 38px;
    width: auto;
    max-width: 210px;
    object-fit: contain;
    display: block;
}
.navbar .nav-link {
    color: rgba(255, 255, 255, .82) !important;
    font-weight: 500;
    transition: color .15s ease;
}
.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: #fff !important;
}
/* Soulignement cyan discret sur le lien actif */
.navbar .nav-link.active {
    border-bottom: 2px solid var(--ipr-accent);
}
.navbar .dropdown-menu {
    border: 1px solid var(--ipr-border);
    border-radius: var(--ipr-radius-sm);
    box-shadow: var(--ipr-shadow);
}
.navbar .dropdown-item:active,
.navbar .dropdown-item.active { background-color: var(--ipr-primary); }
.navbar-text { color: rgba(255, 255, 255, .9) !important; }

/* ── Cartes ───────────────────────────────────────────────────────────────── */
.card {
    border: 1px solid var(--ipr-border);
    border-radius: var(--ipr-radius);
    box-shadow: var(--ipr-shadow);
    background: var(--ipr-surface);
}
.card-header {
    background: var(--ipr-surface);
    border-bottom: 1px solid var(--ipr-border);
    border-top-left-radius: var(--ipr-radius) !important;
    border-top-right-radius: var(--ipr-radius) !important;
    font-weight: 600;
    color: var(--ipr-primary-darker);
}
.card-header.bg-ipr {
    background: var(--ipr-primary-darker) !important;
    color: #fff;
    border-bottom: none;
}

/* ── Boutons ──────────────────────────────────────────────────────────────── */
.btn { border-radius: var(--ipr-radius-sm); font-weight: 600; }

.btn-primary {
    background: var(--ipr-primary);
    border-color: var(--ipr-primary);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--ipr-primary-dark);
    border-color: var(--ipr-primary-dark);
}
.btn-outline-primary {
    color: var(--ipr-primary);
    border-color: var(--ipr-primary);
}
.btn-outline-primary:hover {
    background: var(--ipr-primary);
    border-color: var(--ipr-primary);
    color: #fff;
}
.btn-success {
    background: var(--ipr-success);
    border-color: var(--ipr-success);
}
.btn-success:hover { background: #008f66; border-color: #008f66; }
.btn-outline-success { color: var(--ipr-success); border-color: var(--ipr-success); }
.btn-outline-success:hover { background: var(--ipr-success); border-color: var(--ipr-success); color: #fff; }

.btn-danger {
    background: var(--ipr-danger);
    border-color: var(--ipr-danger);
}
.btn-danger:hover { background: #d83a4f; border-color: #d83a4f; }
.btn-outline-danger { color: var(--ipr-danger); border-color: var(--ipr-danger); }
.btn-outline-danger:hover { background: var(--ipr-danger); border-color: var(--ipr-danger); color: #fff; }

.btn-warning {
    background: var(--ipr-warning);
    border-color: var(--ipr-warning);
    color: #fff;
}
.btn-warning:hover { background: #e0951a; border-color: #e0951a; color: #fff; }
.btn-outline-warning { color: #c9820f; border-color: var(--ipr-warning); }
.btn-outline-warning:hover { background: var(--ipr-warning); border-color: var(--ipr-warning); color: #fff; }

.btn-secondary {
    background: var(--ipr-muted);
    border-color: var(--ipr-muted);
}
.btn-secondary:hover { background: #59707f; border-color: #59707f; }
.btn-outline-secondary { color: var(--ipr-muted); border-color: var(--ipr-border); }
.btn-outline-secondary:hover { background: var(--ipr-muted); border-color: var(--ipr-muted); color: #fff; }

.btn-info {
    background: var(--ipr-accent);
    border-color: var(--ipr-accent);
    color: #fff;
}
.btn-info:hover { background: #00a0c9; border-color: #00a0c9; color: #fff; }

.btn-light { background: #fff; border-color: var(--ipr-border); color: var(--ipr-text); }
.btn-outline-light:hover { color: var(--ipr-primary-darker); }

/* ── Formulaires ──────────────────────────────────────────────────────────── */
.form-control, .form-select {
    border-radius: var(--ipr-radius-sm);
    border-color: var(--ipr-border);
    color: var(--ipr-text);
}
.form-control:focus, .form-select:focus {
    border-color: var(--ipr-accent);
    box-shadow: 0 0 0 .2rem rgba(0, 181, 226, .18);
}
.form-label { font-weight: 600; color: var(--ipr-primary-darker); }
.form-text { color: var(--ipr-muted); }
.form-check-input:checked {
    background-color: var(--ipr-primary);
    border-color: var(--ipr-primary);
}
.form-check-input:focus {
    border-color: var(--ipr-accent);
    box-shadow: 0 0 0 .2rem rgba(0, 181, 226, .18);
}
.input-group-text {
    background: var(--ipr-accent-light);
    border-color: var(--ipr-border);
    color: var(--ipr-primary-dark);
}

/* ── Tableaux ─────────────────────────────────────────────────────────────── */
.table { color: var(--ipr-text); }
.table thead th {
    background: var(--ipr-primary-darker);
    color: #fff;
    border-color: var(--ipr-primary-darker);
    font-weight: 700;
    vertical-align: middle;
}
.table.table-light thead th,
.table thead.table-light th {
    background: var(--ipr-primary-darker);
    color: #fff;
}
.table tbody tr:hover { background: var(--ipr-accent-light); }
.table td, .table th { border-color: var(--ipr-border); }
.table-bordered { border-color: var(--ipr-border); }

/* Lignes "danger"/désactivées : rouge très pâle */
.table tbody tr.table-danger,
.table tbody tr.table-warning,
tr.point-inactif {
    --bs-table-bg: transparent;
}
.table tbody tr.table-warning { background: #FFF7E6 !important; }
.table tbody tr.table-danger,
tr.point-inactif { background: #FDEBEC !important; }

/* ── Alertes ──────────────────────────────────────────────────────────────── */
.alert { border-radius: var(--ipr-radius-sm); border: 1px solid transparent; }
.alert-success {
    background: #E6F7F1; color: #036b4d; border-color: #B8E8D7;
}
.alert-warning {
    background: #FDF3E0; color: #8a5a08; border-color: #F7DDB0;
}
.alert-danger {
    background: #FDEBEC; color: #a32433; border-color: #F5C2C8;
}
.alert-info {
    background: var(--ipr-accent-light); color: #056a80; border-color: #BDEBF6;
}

/* ── Badges + rôles ───────────────────────────────────────────────────────── */
.badge { font-size: 0.75em; font-weight: 600; border-radius: 6px; }
/* Variantes Bootstrap recolorées */
.badge.bg-primary   { background-color: var(--ipr-primary) !important; }
.badge.bg-success   { background-color: var(--ipr-success) !important; }
.badge.bg-danger    { background-color: var(--ipr-danger) !important; }
.badge.bg-warning   { background-color: var(--ipr-warning) !important; color: #fff !important; }
.badge.bg-info      { background-color: var(--ipr-accent) !important; color: #fff !important; }
/* Rôles : ADMIN = bleu nuit (bg-secondary), SUPER_USER = cyan (bg-info),
   USER = gris bleuté (bg-light) — surcharge sans toucher aux templates */
.badge.bg-secondary { background-color: var(--ipr-primary-darker) !important; color: #fff !important; }
.badge.bg-light     { background-color: #E3ECF2 !important; color: var(--ipr-primary-darker) !important; }

/* ── Modales ──────────────────────────────────────────────────────────────── */
.modal-content {
    border: 1px solid var(--ipr-border);
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(0, 58, 93, .18);
}
.modal-header {
    border-bottom: 1px solid var(--ipr-border);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}
.modal-title { color: var(--ipr-primary-darker); font-weight: 700; }
.modal-footer { border-top: 1px solid var(--ipr-border); }

/* ── Pagination ───────────────────────────────────────────────────────────── */
.page-link { color: var(--ipr-primary); border-color: var(--ipr-border); }
.page-link:hover { background: var(--ipr-accent-light); color: var(--ipr-primary-dark); }
.page-item.active .page-link {
    background: var(--ipr-primary);
    border-color: var(--ipr-primary);
}

/* ── Page de connexion ────────────────────────────────────────────────────── */
.ipr-login-wrapper {
    min-height: calc(100vh - 72px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ipr-login-card { max-width: 420px; width: 100%; }
/* Logo TrackRef couleur sur la page de connexion (fond clair) */
.ipr-login-logo {
    max-width: 240px;
    width: 100%;
    height: auto;
    object-fit: contain;
}
.ipr-login-title { color: var(--ipr-primary-darker); font-weight: 800; }
.ipr-login-subtitle { color: var(--ipr-muted); }

/* ── Tableau de bord ──────────────────────────────────────────────────────── */
/* Surcharge des utilitaires Bootstrap pour aligner les cartes stat sur la palette */
.text-primary   { color: var(--ipr-primary) !important; }
.text-success   { color: var(--ipr-success) !important; }
.text-info      { color: var(--ipr-accent) !important; }
.text-warning   { color: var(--ipr-warning) !important; }
.text-secondary { color: var(--ipr-muted) !important; }
.text-danger    { color: var(--ipr-danger) !important; }
.border-primary   { border-color: var(--ipr-primary) !important; }
.border-success   { border-color: var(--ipr-success) !important; }
.border-info      { border-color: var(--ipr-accent) !important; }
.border-warning   { border-color: var(--ipr-warning) !important; }
.border-secondary { border-color: var(--ipr-border) !important; }
.border-danger    { border-color: var(--ipr-danger) !important; }
/* Carte stat : léger liseré coloré à gauche pour un rendu corporate */
.card[class*="border-"] { border-left-width: 4px; }

.ipr-stat-card .ipr-stat-number { font-size: 2rem; font-weight: 800; line-height: 1; }
.ipr-stat-card .ipr-stat-label  { color: var(--ipr-muted); font-size: .9rem; }
.ipr-stat-card .ipr-stat-icon   { font-size: 1.6rem; opacity: .85; }
.ipr-stat-primary .ipr-stat-number { color: var(--ipr-primary-darker); }
.ipr-stat-accent  .ipr-stat-number { color: var(--ipr-accent); }
.ipr-stat-success .ipr-stat-number { color: var(--ipr-success); }
.ipr-stat-warning .ipr-stat-number { color: var(--ipr-warning); }

/* =====================================================================
   PARTIES FONCTIONNELLES PRÉSERVÉES (recolorées selon la palette)
   ===================================================================== */

.table th { white-space: nowrap; }
.sticky-top { z-index: 1; }

/* Lignes désactivées — visibles uniquement pour ADMIN */
.ligne-desactivee {
    background-color: #FDEBEC !important;
    color: #8a8f95;
}
.ligne-desactivee a { color: #9aa3aa; }
.ligne-desactivee > td {
    background-color: #FDEBEC !important;
    color: #777 !important;
}

/* ── Double barre de défilement horizontal (recherche) — synchronisée ─────── */
.table-scrollbar-top {
    overflow-x: auto;
    overflow-y: hidden;
    height: 18px;
    margin-bottom: 2px;
    border-left: 1px solid var(--ipr-border);
    border-right: 1px solid var(--ipr-border);
    font-size: 0;
    line-height: 0;
    color: transparent;
}
.table-scrollbar-top::-webkit-scrollbar { height: 6px; }
.table-scrollbar-top::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.table-scrollbar-top::-webkit-scrollbar-track { background: #EDF3F7; }
.table-scrollbar-top::-webkit-scrollbar-thumb { background: #AFC2D0; border-radius: 3px; }
.table-scrollbar-top-inner { height: 1px; }

.resultats-table-wrapper {
    height: 60vh;
    min-height: 500px;
    max-height: 70vh;
    overflow: auto;
    border: 1px solid var(--ipr-border);
    border-radius: var(--ipr-radius-sm);
    width: 100%;
    position: relative;
    padding-bottom: 24px;
    scrollbar-gutter: stable;
}
.resultats-table-wrapper table {
    width: max-content;
    min-width: unset;
    table-layout: auto;
    margin-bottom: 24px;
    white-space: nowrap;
}
.resultats-table-wrapper thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background-color: var(--ipr-primary-darker);
    color: #fff;
}

/* Largeurs minimales des colonnes (recherche) */
.table-recherche th,
.table-recherche td           { min-width:  90px; }
.table-recherche .col-id      { min-width:  50px; }
.table-recherche .col-nom     { min-width: 160px; }
.table-recherche .col-date    { min-width: 110px; }
.table-recherche .col-coord   { min-width: 110px; }
.table-recherche .col-bk      { min-width:  70px; }
.table-recherche .col-existe  { min-width:  80px; }

/* ── Tableau historique ───────────────────────────────────────────────────── */
.historique-table-wrapper {
    height: 65vh;
    min-height: 500px;
    max-height: 75vh;
    overflow: auto;
    border: 1px solid var(--ipr-border);
    border-radius: var(--ipr-radius-sm);
    width: 100%;
    position: relative;
    padding-bottom: 24px;
    scrollbar-gutter: stable;
}
.historique-table-wrapper table {
    min-width: 1800px;
    width: max-content;
    margin-bottom: 24px;
    white-space: nowrap;
}
.historique-table-wrapper thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background-color: var(--ipr-primary-darker);
    color: #fff;
}
.table-historique th,
.table-historique td          { white-space: nowrap; min-width: 120px; }
.table-historique td.col-desc,
.table-historique td.col-val  { white-space: normal; min-width: 250px; max-width: 450px; }

.historique-scrollbar-top {
    overflow-x: auto;
    overflow-y: hidden;
    height: 18px;
    margin-bottom: 2px;
    border-left: 1px solid var(--ipr-border);
    border-right: 1px solid var(--ipr-border);
}
.historique-scrollbar-top-inner { height: 1px; }

/* ── Tom Select : intégration Bootstrap + accents cyan ────────────────────── */
.ts-wrapper.form-control, .ts-wrapper.form-select { padding: 0; }
.ts-control {
    border: 1px solid var(--ipr-border);
    border-radius: var(--ipr-radius-sm);
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    min-height: calc(1.5em + 0.75rem + 2px);
}
.ts-wrapper.focus .ts-control {
    border-color: var(--ipr-accent);
    box-shadow: 0 0 0 .2rem rgba(0, 181, 226, .18);
}
.ts-dropdown {
    font-size: 0.875rem;
    border-radius: var(--ipr-radius-sm);
    border-color: var(--ipr-border);
    box-shadow: 0 0.5rem 1rem rgba(0, 58, 93, .12);
}
.ts-dropdown .option:hover, .ts-dropdown .option.active {
    background-color: var(--ipr-primary);
    color: #fff;
}