/* ============================================================================
   Cabinet Bruno — DESIGN SYSTEM moderne (Lot 5).
   Chargé EN DERNIER pour gagner la cascade. Restyle les composants partagés
   (Bootstrap/Sneat) via leurs classes existantes, sans modifier le DOM.
   Objectif : un rendu moderne ET COMPACT (densité pro), sur toutes les vues
   (connexion, top bar, sidebar, accueil, cartes, tableaux, formulaires).
   ============================================================================ */

:root {
    --bs-primary: #eb7f15;
    --bs-primary-rgb: 235, 127, 21;

    --cb-orange: #eb7f15;
    --cb-orange-2: #f59a3c;
    --cb-orange-dark: #cf6f0c;
    /* Neutres CHAUDS (refonte design Ben 18/08/2026) : plus de bleu-gris froid.
       Encre, gris, filets et fond réchauffés ; ombres douces couleur terre. */
    --cb-ink: #2b2823;
    --cb-muted: #8b8073;
    --cb-line: #ece6dd;
    --cb-bg: #f6f3ee;
    --cb-shadow-sm: 0 1px 2px rgba(72, 56, 38, .05), 0 2px 8px rgba(72, 56, 38, .05);
    --cb-shadow-md: 0 6px 22px rgba(72, 56, 38, .10);
    --cb-shadow-lg: 0 18px 44px rgba(72, 56, 38, .14);
}

/* ------------------------------- DENSITÉ GÉNÉRALE -------------------------- */
/* Fond CHAUD avec une lumière d'ambiance très douce (orange à 5-6 %) : donne
   de la profondeur et un rendu « fluide » sans nuire à la lisibilité des tableaux. */
body {
    background-color: var(--cb-bg);
    background-image:
        radial-gradient(1200px 520px at 100% -8%, rgba(235, 127, 21, .06), transparent 60%),
        radial-gradient(940px 520px at -8% 108%, rgba(235, 127, 21, .05), transparent 55%);
    background-attachment: fixed;
    font-size: 13.5px;
    color: #3a352e;
}
.text-muted { color: var(--cb-muted) !important; }
h1, .h1 { font-size: 1.6rem; }
h2, .h2 { font-size: 1.3rem; }
h3, .h3 { font-size: 1.12rem; }
h4, .h4 { font-size: 1.02rem; }
h5, .h5 { font-size: .95rem; }
/* Marges verticales de contenu resserrées. */
.container-p-y { padding-top: 1.1rem !important; padding-bottom: 1.1rem !important; }
.card-body { padding: 1rem 1.1rem; }
small, .small { font-size: 82%; }

/* ================================ TOP BAR ================================= */
.layout-navbar.bg-primary,
.layout-navbar.bg-navbar-theme {
    background: linear-gradient(90deg, var(--cb-orange) 0%, var(--cb-orange-2) 100%) !important;
    box-shadow: 0 5px 16px rgba(235, 127, 21, .25) !important;
    border: 0 !important;
    border-radius: 12px !important;
    min-height: 52px;
    padding-top: .25rem; padding-bottom: .25rem;
}
.layout-navbar .dropdown-user .avatar img,
.layout-navbar .avatar img {
    border: 2px solid rgba(255, 255, 255, .9);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
    background: #fff;
    width: 34px !important; height: 34px !important;
}
.layout-navbar .nav-link i { color: #fff; }
/* CORRECTIF DEBORDEMENT top bar : neutralise les hacks margin-left (60%/80%) de topBar.php
   qui poussaient l'avatar HORS de la barre (~19px). Le contenu droit s'aligne proprement. */
.layout-navbar .ms-auto { margin-left: auto !important; }
.layout-navbar .dropdown-user { margin-left: 0 !important; }
.layout-navbar table { width: 100% !important; }
.layout-navbar table td:last-child { text-align: right !important; }
.layout-navbar table td:last-child .navbar-nav { justify-content: flex-end !important; }
#cbImmSelect + .select2-container .select2-selection--single,
#cbImmSelect { height: 34px !important; box-shadow: 0 2px 6px rgba(0, 0, 0, .10) !important; }
#cbImmSelect + .select2-container .select2-selection--single { padding-top: 2px !important; padding-bottom: 2px !important; }
#cbImmSelect + .select2-container { max-width: 380px !important; }

/* ================================ SIDEBAR ================================= */
/* Compacte + colorée + modules repliables. */
#layout-menu .app-brand.demo { padding-top: 6px !important; padding-bottom: 4px !important; }
#layout-menu .app-brand.demo .app-brand-logo img { max-height: 44px !important; }
#layout-menu .menu-inner { padding-top: .25rem; }
#layout-menu .menu-inner > .menu-item { margin: .04rem .5rem !important; }
#layout-menu .menu-link {
    padding: .4rem .7rem !important;
    font-size: 13px;
    min-height: 33px;
    border-radius: 9px;
    position: relative;
}
/* ===== SIDEBAR FIXE sur toutes les pages (desktop) =====
   Le gabarit n'active pas le mode « menu fixe » de Sneat : sur une page longue (fiche
   immeuble, grands tableaux) la sidebar defilait et sortait de l'ecran. On la rend
   COLLANTE (sticky) dans le conteneur flex, sans toucher au calcul de largeur (donc
   aucun debordement du contenu). Desktop uniquement : en mobile la sidebar reste le
   panneau escamotable natif de Sneat. Ben, 2026-08-13. */
@media (min-width: 1200px) {
    #layout-menu.layout-menu {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 0;
        align-self: flex-start;
        height: 100vh;
        max-height: 100vh;
        overflow-y: auto;
    }
}
#layout-menu .menu-icon { font-size: 1.1rem !important; margin-right: .5rem !important; width: 1.25rem; color: var(--cb-orange); }
/* Modules de 1er niveau : libellé foncé, survol et état ouvert colorés. */
#layout-menu .menu-inner > .menu-item > .menu-link { color: #46536b; font-weight: 600; }
#layout-menu .menu-inner > .menu-item > .menu-link:hover { background: #fff4eb; color: var(--cb-orange-dark); }
#layout-menu .menu-inner > .menu-item.open > .menu-link { background: rgba(235, 127, 21, .10); color: var(--cb-orange-dark); }
/* Élément ACTIF de 1er niveau : pastille orange pleine, texte blanc lisible.
   IMPORTANT : scoper à .menu-inner > (1er niveau) — sinon la règle attrape aussi
   les sous-items actifs et leur impose color:#fff !important => texte blanc sur
   fond clair (invisible). Les sous-items actifs ont leur propre règle plus bas. */
#layout-menu .menu-inner > .menu-item.active > .menu-link {
    background: linear-gradient(135deg, var(--cb-orange), var(--cb-orange-2));
    color: #fff !important;
    font-weight: 700;
}
#layout-menu .menu-inner > .menu-item.active > .menu-link .menu-icon { color: #fff !important; }
/* Sous-items : indentés, avec puce. */
#layout-menu .menu-sub .menu-link { padding: .32rem .7rem .32rem 2.15rem !important; font-size: 12.5px; min-height: 29px; }
#layout-menu .menu-sub .menu-link::before {
    content: ""; position: absolute; left: 1.35rem; top: 50%; transform: translateY(-50%);
    width: 5px; height: 5px; border-radius: 50%; background: #d7deea;
}
/* Sous-item ACTIF : fond orange pâle + texte orange foncé LISIBLE (jamais blanc).
   color en !important pour rester net même si une règle Sneat plus large repasse dessus. */
#layout-menu .menu-sub .menu-item.active > .menu-link { background: rgba(235, 127, 21, .14); color: var(--cb-orange-dark) !important; font-weight: 700; box-shadow: inset 3px 0 0 var(--cb-orange); }
#layout-menu .menu-sub .menu-item.active > .menu-link .menu-icon { color: var(--cb-orange-dark) !important; }
#layout-menu .menu-sub .menu-item.active > .menu-link::before { background: var(--cb-orange); }
#layout-menu .menu-header { padding: .75rem .9rem .25rem; font-size: 10px; letter-spacing: .5px; color: var(--cb-muted); }
/* Boutons 3D de l'espace copro : compacts. */
#layout-menu .copro-rub-lien { padding: 7px 11px !important; font-size: 12px !important; }
#layout-menu .copro-menu-item { margin: 0 0 5px 0 !important; }

/* ================================ CARTES ================================= */
.card {
    border: 1px solid var(--cb-line) !important;
    border-radius: 16px !important;
    box-shadow: var(--cb-shadow-sm) !important;
    background: #fffdfb !important;
    transition: box-shadow .2s ease, transform .2s ease;
}
.card:hover { box-shadow: var(--cb-shadow-md) !important; }
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--cb-line);
    font-weight: 700;
    color: var(--cb-ink);
    padding: .85rem 1.25rem;
    min-height: auto;
}
.card-body { padding: 1.05rem 1.25rem; }

/* --- Cartes de l'accueil (.card-2) : COMPACTES et vivantes ---------------- */
.card-2 {
    background: #fff !important;
    border: 1px solid var(--cb-line) !important;
    border-top: 3px solid var(--cb-orange) !important;
    border-radius: 12px !important;
    box-shadow: var(--cb-shadow-sm) !important;
    min-height: 118px !important;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
a:hover .card-2, .card-2:hover {
    transform: translateY(-3px);
    box-shadow: var(--cb-shadow-md) !important;
    border-top-color: var(--cb-orange-dark) !important;
}
.card-2 .card-body { width: 100%; padding: .85rem .7rem; }

/* --- Nouvelle structure de tuile d'accueil : icône + numéro coin + libellé --- */
.cb-tuile-lien { display: block; height: 100%; text-decoration: none !important; }
.cb-tuile-num {
    position: absolute; top: 8px; left: 10px; z-index: 2;
    min-width: 21px; height: 21px; padding: 0 6px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; background: #fff4eb; color: var(--cb-orange-dark);
    font-size: 11px; font-weight: 800; border: 1px solid #ffd9b3; line-height: 1;
}
.cb-tuile-lien .card-body {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 9px; padding: 1.1rem .7rem;
}
.cb-tuile-ico {
    width: 50px; height: 50px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 13px; background: linear-gradient(135deg, #fff2e2, #ffe1c2); color: var(--cb-orange-dark);
    box-shadow: inset 0 0 0 1px #ffdcbb; transition: background .16s ease, color .16s ease;
}
.cb-tuile-ico i { font-size: 27px; }
.cb-tuile-lbl { font-size: 13.5px; font-weight: 700; color: var(--cb-ink); text-align: center; line-height: 1.3; }
.cb-tuile-lien:hover .cb-tuile-ico { background: linear-gradient(135deg, var(--cb-orange), var(--cb-orange-2)); color: #fff; box-shadow: 0 6px 14px rgba(235,127,21,.35); }
.card-2 .fw-semibold { font-size: 13.5px; font-weight: 700 !important; color: var(--cb-ink); line-height: 1.35; }
/* Le badge numéroté (span inline) : pastille pleine compacte. */
.card-2 .card-body > span > span:first-child {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border: 0 !important; border-radius: 50% !important;
    background: linear-gradient(135deg, var(--cb-orange), var(--cb-orange-2)) !important;
    color: #fff !important; font-size: 14px;
    box-shadow: 0 4px 10px rgba(235, 127, 21, .3);
    padding: 0 !important; margin-bottom: 2px;
}
/* Le séparateur inline sous le badge : on le neutralise (redondant). */
.card-2 .card-body > span > div[style*="border-bottom"] { display: none !important; }
a:has(.card-2) { text-decoration: none !important; }

/* ================================ BOUTONS ================================ */
.btn { border-radius: 9px; font-size: 13.5px; }
.btn-primary {
    background: linear-gradient(135deg, var(--cb-orange), var(--cb-orange-2)) !important;
    border: 0 !important;
    box-shadow: 0 3px 10px rgba(235, 127, 21, .26);
    font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(135deg, var(--cb-orange-dark), var(--cb-orange)) !important;
    box-shadow: 0 5px 14px rgba(235, 127, 21, .36);
}
.btn-outline-primary { color: var(--cb-orange-dark) !important; border-color: var(--cb-orange) !important; }
.btn-outline-primary:hover { background: var(--cb-orange) !important; color: #fff !important; }
.btn-sm { font-size: 12px; padding: .28rem .6rem; }

/* ============================== FORMULAIRES ============================== */
.form-control, .form-select { border-radius: 9px; border-color: #dfe4ec; font-size: 13.5px; }
.form-control:focus, .form-select:focus {
    border-color: var(--cb-orange);
    box-shadow: 0 0 0 .18rem rgba(235, 127, 21, .18);
}
.form-label { font-size: 12.5px; font-weight: 600; color: var(--cb-ink); margin-bottom: .3rem; }

/* ================================ TABLEAUX =============================== */
.table { font-size: 13px; }
.table > thead th {
    text-transform: uppercase; font-size: 11px; letter-spacing: .4px;
    color: var(--cb-muted); border-bottom: 1px solid var(--cb-line); font-weight: 700;
    padding: .55rem .6rem;
}
.table > tbody > tr { border-color: var(--cb-line); }
.table > tbody > td, .table > tbody > tr > td { padding: .5rem .6rem; vertical-align: middle; }
.table-hover > tbody > tr:hover > * { background-color: #fff7ef; }

/* ================================ BADGES ================================ */
/* Palette CHAUDE Cabinet Bruno : orange + vert + ambre + taupe + brique.
   AUCUN bleu ni cyan (Ben 18/08/2026). Les badges Bootstrap (bg-info, bg-primary...)
   sont recolorés ici pour toute l'application, pas seulement les nouveaux écrans. */
:root {
    --cb-green:   #2e9e5b; --cb-green-bg:  #e7f6ec;
    --cb-amber:   #e0932b; --cb-amber-bg:  #fdf1de; --cb-amber-ink: #8a5a10;
    --cb-taupe:   #7a6d5f; --cb-taupe-bg:  #efeae4; --cb-taupe-ink: #5b5147;
    --cb-brick:   #d0492f;
}
.badge {
    border-radius: 999px; font-weight: 700; letter-spacing: .2px; font-size: 10.5px;
    padding: .36em .74em;
}
/* « info » et « primary » (attente, sollicité, en cours) -> pastille orange douce */
.badge.bg-primary, .badge.bg-info,
.bg-label-primary { background: #fff0df !important; color: var(--cb-orange-dark) !important; }
/* succès (retenue, attribuée, créé) -> vert chaud plein */
.badge.bg-success { background: var(--cb-green) !important; color: #fff !important; }
/* en cours d'action (devis déposé, échéance proche) -> ambre/or */
.badge.bg-warning { background: var(--cb-amber) !important; color: #3f2c07 !important; }
/* danger (retard, erreur) -> brique, s'harmonise avec l'orange */
.badge.bg-danger  { background: var(--cb-brick) !important; color: #fff !important; }
/* neutre -> taupe chaud, jamais de gris bleuté */
.badge.bg-secondary, .badge.bg-label-secondary { background: var(--cb-taupe-bg) !important; color: var(--cb-taupe-ink) !important; }
.badge.bg-dark    { background: #4a4038 !important; color: #fff !important; }
.badge.bg-light   { background: #f4f1ec !important; color: var(--cb-taupe-ink) !important; }

/* ============================ PAGE DE CONNEXION ========================== */
.authentication-wrapper {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(1100px 460px at 100% -10%, rgba(235, 127, 21, .16), transparent 60%),
        radial-gradient(820px 460px at -10% 110%, rgba(235, 127, 21, .12), transparent 55%),
        var(--cb-bg);
}
.authentication-wrapper .authentication-inner { width: 100%; max-width: 400px; }
.authentication-wrapper .card { border: 0 !important; border-radius: 16px !important; box-shadow: var(--cb-shadow-lg) !important; overflow: hidden; }
.authentication-wrapper .card::before { content: ""; display: block; height: 4px; background: linear-gradient(90deg, var(--cb-orange), var(--cb-orange-2)); }
.authentication-wrapper .card .card-body { padding: 24px 26px 26px; }
.authentication-wrapper .app-brand-logo img { max-height: 58px; width: auto; }
.authentication-wrapper h4 { font-weight: 800; color: var(--cb-ink); }
.authentication-wrapper .form-control { background: #fff !important; border: 1px solid #dfe4ec !important; }
.authentication-wrapper .form-control:focus { border-color: var(--cb-orange) !important; box-shadow: 0 0 0 .18rem rgba(235, 127, 21, .18) !important; }