/* Styles pour simuler l'apparence d'AdminLTE 3 avec Bootstrap 5 */
body {
    font-family: 'Source Sans Pro', sans-serif;
    background-color: #f4f6f9;
    color: #495057;
    min-height: 100vh;
    overflow-x: hidden;
}

.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

.main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    border-bottom: 1px solid #dee2e6;
    z-index: 1030;
    background: #fff;
    height: 57px;
    transition: margin-left .3s ease-in-out;
}

/* Header adjustments based on sidebar state */
body:not(.sidebar-collapse) .main-header {
    margin-left: 250px;
}

body.sidebar-collapse .main-header {
    margin-left: 0;
}

.main-header .nav-link {
    color: rgba(0,0,0,.5);
}

.main-header .nav-link:hover {
    color: rgba(0,0,0,.8);
}

.main-sidebar {
    width: 250px;
    background-color: #343a40; /* Dark sidebar */
    color: #c2c7d0;
    position: fixed;
    top: 0;
    left: 0;
    min-height: 100vh;
    z-index: 1038; /* Lower than navbar, higher than content */
    transition: margin-left .3s ease-in-out,width .3s ease-in-out;
    overflow-y: auto;
}

/* Sidebar collapse states */
body:not(.sidebar-collapse) .main-sidebar {
    margin-left: 0; /* Show sidebar */
}

body.sidebar-collapse .main-sidebar {
    margin-left: -250px; /* Hide sidebar */
}

/* Content adjustments based on sidebar state */
body:not(.sidebar-collapse) .content-wrapper,
body:not(.sidebar-collapse) .main-footer {
    margin-left: 250px; /* Adjust content when sidebar is open */
}

body.sidebar-collapse .content-wrapper,
body.sidebar-collapse .main-footer {
    margin-left: 0; /* Full width content when sidebar is closed */
}


.brand-link {
    display: block;
    padding: .8125rem .5rem;
    font-size: 1.25rem;
    line-height: 1.5;
    color: #fff;
    text-align: center;
    border-bottom: 1px solid #4f5962;
}

/* Marque de l'application : Dento, la mascotte, dans un rond blanc. */
.ez-sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .65rem;
    padding: .8rem 1rem;
    text-decoration: none;
}
.ez-sidebar-brand:hover { color: #fff; }
.ez-sidebar-brand__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .25);
}
.ez-sidebar-brand__mark img {
    display: block;
    width: 100%;
    height: 100%;
}
.ez-sidebar-brand .brand-text {
    font-weight: 700;
    letter-spacing: .02em;
}

.brand-link .brand-image {
    float: left;
    line-height: .8;
    margin-left: .8rem;
    margin-right: .5rem;
    margin-top: -3px;
    max-height: 33px;
    width: auto;
}

.user-panel {
    border-bottom: 1px solid #4f5962;
}

.user-panel .image img {
    width: 2.1rem;
    height: 2.1rem;
}

.user-panel .info a {
    color: #c2c7d0;
    font-size: .875rem;
}

.nav-sidebar .nav-item > .nav-link {
    color: #c2c7d0;
    padding: .75rem 1rem;
}

.nav-sidebar .nav-item > .nav-link:hover,
.nav-sidebar .nav-item > .nav-link.active {
    background-color: #494e53; /* Slightly lighter on hover/active */
    color: #fff;
}
.nav-sidebar .nav-link p {
    margin: 0;
    line-height: 1;
    display: inline-block;
}
.nav-sidebar .nav-icon {
    margin-right: .2rem;
    width: 1.6rem;
    text-align: center;
}

.nav-treeview {
    padding-left: 1rem; /* Indent sub-menu items */
}

.nav-treeview .nav-link {
    padding: .5rem 1rem .5rem 2rem; /* Adjust padding for sub-items */
    font-size: .875rem;
}

.nav-treeview .nav-link:hover,
.nav-treeview .nav-link.active {
    background-color: #52575c;
}

.content-wrapper {
    background-color: #f4f6f9;
    padding-top: 57px; /* Height of the navbar */
    transition: margin-left .3s ease-in-out;
    flex-grow: 1;
    min-height: calc(100vh - 57px);
}

.content-header {
    padding: 15px .5rem;
}

.content-header h1 {
    font-size: 1.8rem;
    margin: 0;
}

.breadcrumb {
    background-color: transparent;
    padding: 0;
    margin-bottom: 0;
}

.main-footer {
    background-color: #fff;
    border-top: 1px solid #dee2e6;
    color: #869099;
    padding: 1rem;
    font-size: .875rem;
    transition: margin-left .3s ease-in-out;
}

/* Small cards for stats */
.small-box {
    border-radius: .25rem;
    box-shadow: 0 0 1px rgba(0,0,0,.125),0 1px 3px rgba(0,0,0,.2);
    display: block;
    margin-bottom: 20px;
    position: relative;
    color: #fff; /* Default text color for small-box */
}

.small-box > .inner {
    padding: 10px;
}

.small-box h3, .small-box p {
    margin: 0;
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.small-box h3 {
    font-size: 2.2rem;
    font-weight: 700;
    margin: 0 0 10px 0;
    padding: 0;
    white-space: nowrap;
}

.small-box p {
    font-size: 1rem;
}

.small-box .icon {
    color: rgba(0,0,0,.15);
    z-index: 0;
}

.small-box .icon > i {
    font-size: 70px; /* Reduced from 90px */
    position: absolute;
    right: 15px;
    top: 15px; /* Adjusted top */
    transition: transform .3s linear;
}

.small-box:hover .icon > i {
    transform: scale(1.1);
}

.small-box > .small-box-footer {
    background-color: rgba(0,0,0,.1);
    color: rgba(255,255,255,.8);
    display: block;
    padding: 3px 0;
    position: relative;
    text-align: center;
    text-decoration: none;
    z-index: 10;
}
.small-box > .small-box-footer:hover {
    background-color: rgba(0,0,0,.15);
    color: #fff;
}

/* Page ouverte dans une fenêtre d'une autre page (embed=1, ezFrame) : ni
 * marge pour le menu latéral, ni place pour la barre du haut. */
body.ez-embed .content-wrapper {
    margin-left: 0 !important;
    padding-top: 1rem;
    min-height: 0;
}

/* Cartes d'une même rangée : même hauteur.
 *
 * Côte à côte, des cartes de hauteurs différentes laissent un bord bas en
 * escalier — la carte « Actions » des rendez-vous, plus basse que les
 * compteurs à sa gauche ; le volet « Bon à savoir », arrêté à mi-hauteur du
 * formulaire voisin. Bootstrap aligne déjà les COLONNES d'une rangée : une
 * carte SEULE dans sa colonne en prend donc toute la hauteur. Deux cartes
 * empilées dans une colonne gardent leur hauteur naturelle.
 *
 * La colonne passe en flex plutôt que la carte en `height: 100%` : celle-ci
 * ajouterait la marge basse de la carte et déborderait sur la rangée
 * suivante. Sur téléphone, chaque colonne est seule sur sa ligne : rien ne
 * change. */
.row > :is(.col, [class*="col-"]):has(> :is(.card, .small-box, .info-box):only-child) {
    display: flex;
    flex-direction: column;
}
.row > :is(.col, [class*="col-"]) > :is(.card, .small-box, .info-box):only-child {
    flex: 1 1 auto;
}
/* Le lien du bas d'un compteur reste en bas quand la boîte s'allonge. */
.small-box {
    display: flex;
    flex-direction: column;
}
.small-box > .inner {
    flex: 1 1 auto;
}

.bg-info { background-color: #17a2b8 !important; }
.bg-success { background-color: #28a745 !important; }
.bg-warning { background-color: #ffc107 !important; color: #1f2d3d !important; } /* Ensure text is readable on yellow */
.bg-danger { background-color: #dc3545 !important; }


/* Responsive adjustments */
@media (max-width: 767.98px) {
    .main-sidebar {
        margin-left: -250px; /* Hide sidebar by default on small screens */
    }
    .sidebar-open .main-sidebar {
        margin-left: 0; /* Show sidebar when toggled */
    }
    .content-wrapper, .main-footer, .main-header {
        margin-left: 0 !important; /* Full width content on small screens */
    }
    .main-header .navbar-nav .nav-item {
        margin: 0 .25rem;
    }
}

/* Push menu JS will toggle this class on body */
.sidebar-collapse .main-sidebar {
    margin-left: -250px;
}
.sidebar-collapse .content-wrapper,
.sidebar-collapse .main-footer,
.sidebar-collapse .main-header {
    margin-left: 0 !important;
}

/* Ensure content is not overlapped by fixed navbar */
body.layout-navbar-fixed .main-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1037;
}

body.layout-navbar-fixed .content-wrapper {
    padding-top: calc(3.5rem + 1px); /* Adjust based on navbar height */
}

/* Sidebar push menu styles */
.nav-link[data-widget="pushmenu"] {
    cursor: pointer;
}

/* Treeview menu */
/* Libellé, pastille et chevron d'un groupe sur une ligne, le chevron calé à
   droite : il dit qu'on déplie, pas qu'on revient en arrière. */
.nav-sidebar .nav-link > p {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: .4rem;
}
.nav-sidebar .nav-link > p > .right {
    margin-left: auto;
    transition: transform .2s ease-in-out;
}
.nav-sidebar .nav-item.menu-open > .nav-link .fa-angle-left {
    transform: rotate(-90deg);
}
.nav-sidebar .nav-item .nav-treeview {
    display: none; /* Hidden by default */
    list-style: none;
    padding: 0;
    margin: 0;
}
.nav-sidebar .nav-item.menu-open > .nav-treeview {
    display: block; /* Show when menu-open class is present */
}

/* User menu in navbar */
.user-menu .user-image {
    height: 2.1rem;
    width: 2.1rem;
    margin-right: .5rem;
    margin-top: -2px;
}
.user-menu .dropdown-menu {
    width: 280px;
}
.user-menu .user-header {
    padding: 10px;
    text-align: center;
}
.user-menu .user-header img {
    z-index: 5;
    height: 90px;
    width: 90px;
    border: 3px solid;
    border-color: transparent;
    border-color: rgba(255,255,255,.2);
}
.user-menu .user-header p {
    z-index: 5;
    color: #fff;
    font-size: 17px;
    margin-top: 10px;
}
.user-menu .user-header p small {
    display: block;
    font-size: 12px;
}
.user-menu .user-footer {
    background-color: #f8f9fa;
    padding: 10px;
}
.user-menu .user-footer::after {
    display: block;
    clear: both;
    content: "";
}

/* Fullscreen toggle */
.nav-link[data-widget="fullscreen"] {
    cursor: pointer;
}

/* Navbar badge */
.navbar-badge {
    font-size: .6rem;
    font-weight: 300;
    padding: 2px 4px;
    position: absolute;
    right: 5px;
    top: 9px;
}

/* ---------------------------------------------------------------------------
   État vide : Dento, une ligne de titre, une explication et une action
   facultatives (incs/mascot.php::dento_empty_state). Centré, dans une carte,
   une cellule de tableau ou un menu déroulant.
   --------------------------------------------------------------------------- */
.ez-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: 1.5rem 1rem;
    text-align: center;
    color: #6c757d;
    white-space: normal;
}
.ez-empty__mascot {
    display: block;
    max-width: 100%;
    height: auto;
    margin-bottom: .25rem;
}
.ez-empty__title {
    margin: 0;
    font-weight: 600;
    color: #495057;
}
.ez-empty__hint {
    max-width: 32rem;
    margin: 0;
    font-size: .875rem;
}
.ez-empty__action {
    margin-top: .5rem;
}
/* Dans un menu déroulant : moins d'air autour. */
.ez-empty--compact {
    padding: .75rem;
    gap: .2rem;
}
/* Une ligne de tableau qui ne contient qu'un état vide ne s'allume pas au
   survol : il n'y a rien à cliquer. */
.table-hover > tbody > tr:hover > td:has(> .ez-empty) {
    --bs-table-bg-state: transparent;
}

/* ---------------------------------------------------------------------------
   Rapports : en-tête d'impression et mise en page papier
   (incs/reports.php::report_toolbar). Le PDF se fait par l'impression du
   navigateur ; seul le rapport s'imprime, sans menu ni filtres.
   --------------------------------------------------------------------------- */
.report-print-header {
    display: none;
}

@media print {
    .main-sidebar,
    .main-header,
    .main-footer,
    .content-header,
    .report-actions,
    .report-filters,
    .alert-dismissible {
        display: none !important;
    }

    body:not(.sidebar-collapse) .content-wrapper,
    .content-wrapper {
        margin-left: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    .report-print-header {
        display: block;
        margin-bottom: 1rem;
        padding-bottom: .5rem;
        border-bottom: 1px solid #000;
    }

    .report-print-header h2 {
        font-size: 16pt;
        margin: .2rem 0;
    }

    .report-print-clinic {
        font-weight: 700;
    }

    .report-root .card {
        box-shadow: none !important;
        border: 1px solid #bbb !important;
        break-inside: avoid;
    }

    /* Les cartes de synthèse colorées s'impriment en noir sur blanc. */
    .report-root .card.text-white,
    .report-root .card.bg-warning {
        background: #fff !important;
        color: #000 !important;
    }
}