/* ============================================================================
   WACOMM — habillage back-office
   Chargé APRÈS le bundle Encore (bootstrap) pour pouvoir l'affiner.
   Fichier CSS simple et volontairement hors pipeline Encore : le build npm est
   actuellement cassé (node-sass 6 incompatible Node 18), et ce fichier se
   déploie par simple FTP.
   Couleur principale conservée : #009999.
   ========================================================================= */

:root {
    --wa-primary: #009999;
    --wa-primary-600: #008080;
    --wa-primary-700: #006b6b;
    --wa-primary-050: #e8f6f6;
    --wa-primary-100: #d3ecec;

    --wa-ink: #16303a;
    --wa-muted: #62777f;
    --wa-bg: #eef2f4;
    --wa-surface: #d7e9e8;
    --wa-border: #e0e7ea;

    --wa-danger: #c0392b;
    --wa-warning: #b8860b;

    --wa-radius: 14px;
    --wa-radius-sm: 9px;
    --wa-shadow-sm: 0 1px 2px rgba(16, 42, 50, .06);
    --wa-shadow: 0 1px 2px rgba(16, 42, 50, .2), 0 10px 28px rgba(16, 42, 50, .2);
}

/* ---------- Base ---------- */

body {
    background-color: var(--wa-bg);
    color: var(--wa-ink);
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

h1 {
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -.01em;
    margin-bottom: 1.25rem;
    color: var(--wa-ink);
}

a { text-decoration: none; }

/* ---------- Barre de navigation ---------- */

.wa-navbar {
    background: var(--wa-primary);
    box-shadow: var(--wa-shadow-sm);
}

.wa-navbar .navbar-brand img {
    width: 190px;
    height: auto;
    display: block;
}

.wa-navbar .nav-link {
    color: rgba(255, 255, 255, .88);
    font-weight: 500;
    padding: .55rem .9rem;
    border-radius: var(--wa-radius-sm);
    transition: background-color .15s ease, color .15s ease;
    white-space: nowrap;
}

.wa-navbar .nav-link:hover,
.wa-navbar .nav-link:focus {
    color: #fff;
    background: rgba(255, 255, 255, .14);
}

.wa-navbar .nav-link.active {
    color: #fff;
    background: rgba(255, 255, 255, .22);
}

.wa-navbar .nav-link i { opacity: .9; margin-right: .35rem; }

.wa-navbar .dropdown-menu {
    border: 1px solid var(--wa-border);
    border-radius: var(--wa-radius-sm);
    box-shadow: var(--wa-shadow);
    padding: .4rem;
    margin-top: .4rem;
}

.wa-navbar .dropdown-item {
    border-radius: 7px;
    padding: .5rem .7rem;
    font-size: .94rem;
    color: var(--wa-ink);
}

.wa-navbar .dropdown-item:hover,
.wa-navbar .dropdown-item:focus {
    background: var(--wa-primary-050);
    color: var(--wa-primary-700);
}

/* ---------- Contenu ---------- */

.wa-main { padding: 1.5rem 0 3rem; }

.wa-surface {
    background: var(--wa-surface);
    border: 1px solid var(--wa-border);
    border-radius: var(--wa-radius);
    box-shadow: var(--wa-shadow);
    padding: 1.5rem 1.6rem 1.75rem;
}

/* Fil d'ariane */
.breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 1rem;
    font-size: .88rem;
}

.breadcrumb-item, .breadcrumb-item a { color: var(--wa-muted); }
.breadcrumb-item a:hover { color: var(--wa-primary-700); }
.breadcrumb-item.active { color: var(--wa-ink); font-weight: 500; }

/* ---------- Boutons ---------- */

/* .btn-viridian était défini dans assets/styles/app.css, jamais compilé
   (app.scss ne l'importe pas) : tous ces boutons s'affichaient sans couleur. */
.btn-viridian {
    color: #fff;
    background-color: var(--wa-primary);
    border-color: var(--wa-primary);
    font-weight: 500;
}

.btn-viridian:hover,
.btn-viridian:focus {
    color: #fff;
    background-color: var(--wa-primary-600);
    border-color: var(--wa-primary-600);
}

.btn-viridian:focus-visible,
.btn:focus-visible {
    outline: 3px solid var(--wa-primary-100);
    outline-offset: 1px;
    box-shadow: none;
}

.btn { border-radius: var(--wa-radius-sm); }
.btn-lg { border-radius: var(--wa-radius); }

/* Les gros boutons "tuiles" (listes d'aires, etc.) */
.wa-navbar .nav-item .btn-viridian { box-shadow: none; }

/* ---------- Tableaux ---------- */

.table {
    --bs-table-hover-bg: var(--wa-primary-050);
    border-color: var(--wa-border);
    margin-bottom: 0;
}

.table > thead > tr > th {
    background: #f7fafb;
    color: var(--wa-muted);
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--wa-border);
    padding: .7rem .6rem;
    white-space: nowrap;
}

.table > tbody > tr > td {
    padding: .65rem .6rem;
    vertical-align: middle;
    border-color: #eff3f5;
}

.table > tfoot > tr > th {
    border-top: 1px solid var(--wa-border);
    padding: .6rem;
    font-weight: 500;
}

/* ---------- Vue compteurs par aire (Eau | Elec) ---------- */

/* Teinte des colonnes : Eau côté cyan (thème), Elec côté ambre pour contraste.
   La classe supplémentaire l'emporte sur le fond d'en-tête générique. */
.table.wa-compteurs .wa-col-eau  { background: #eef7f9; }
.table.wa-compteurs .wa-col-elec { background: #fbf4e6; }

.table.wa-compteurs > thead > tr > th.wa-col-eau  { background: #dcecf0; color: var(--wa-ink); }
.table.wa-compteurs > thead > tr > th.wa-col-elec { background: #f4ead2; color: var(--wa-ink); }

/* Séparateur visuel entre le bloc Eau et le bloc Elec */
.table.wa-compteurs .wa-col-elec:first-of-type { border-left: 2px solid var(--wa-border); }
.table.wa-compteurs th.wa-col-elec:first-child,
.table.wa-compteurs tr > .wa-col-elec:nth-of-type(1) { border-left: 2px solid #cfd8dc; }

.table.wa-compteurs th { vertical-align: middle; }

/* ---------- Badges / alertes ---------- */

.badge { font-weight: 600; letter-spacing: .02em; padding: .4em .65em; border-radius: 999px; }

.alert {
    border: 1px solid transparent;
    border-radius: var(--wa-radius-sm);
    box-shadow: var(--wa-shadow-sm);
}

.alert-success { background: var(--wa-primary-050); border-color: var(--wa-primary-100); color: var(--wa-primary-700); }
.alert-danger  { background: #fdecea; border-color: #f7d2cd; color: var(--wa-danger); }

/* ---------- Formulaires ---------- */

.form-control, .form-select {
    border-radius: var(--wa-radius-sm);
    border-color: var(--wa-border);
    padding: .6rem .8rem;
}

.form-control:focus, .form-select:focus {
    border-color: var(--wa-primary);
    box-shadow: 0 0 0 3px var(--wa-primary-100);
}

.form-label { font-weight: 500; font-size: .9rem; color: var(--wa-muted); margin-bottom: .35rem; }

/* ---------- DataTables (bs5) ---------- */

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border-radius: var(--wa-radius-sm);
    border: 1px solid var(--wa-border);
    padding: .35rem .6rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--wa-primary) !important;
    border-color: var(--wa-primary) !important;
    color: #fff !important;
    border-radius: var(--wa-radius-sm);
}

/* ---------- Page de connexion ---------- */

.wa-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background:
        radial-gradient(1100px 520px at 50% -18%, rgba(0, 153, 153, .16), transparent 65%),
        var(--wa-bg);
}

.wa-login-card {
    width: 100%;
    max-width: 400px;
    background: var(--wa-surface);
    border: 1px solid var(--wa-border);
    border-radius: 18px;
    box-shadow: var(--wa-shadow);
    padding: 2.25rem 2rem;
}

.wa-login-card img {
    width: 200px;
    height: auto;
    display: block;
    margin: 0 auto 1.25rem;
}

.wa-login-title {
    text-align: center;
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--wa-ink);
    margin-bottom: .25rem;
}

.wa-login-sub {
    text-align: center;
    font-size: .88rem;
    color: var(--wa-muted);
    margin-bottom: 1.5rem;
}

.wa-login-card .btn { width: 100%; padding: .7rem 1rem; font-weight: 600; }

.wa-login-foot {
    text-align: center;
    margin-top: 1.4rem;
    font-size: .8rem;
    color: var(--wa-muted);
}

/* ---------- Divers ---------- */

.text-muted { color: var(--wa-muted) !important; }

@media (max-width: 991.98px) {
    .wa-navbar .navbar-brand img { width: 150px; }
    .wa-surface { padding: 1.1rem 1rem 1.35rem; }
}