/* ==========================================================================
   bs5-adminbsb-fix.css
   Ajustes de compatibilidad entre el tema AdminBSB (hecho para Bootstrap 3)
   y Bootstrap 5.3.8. Se carga DESPUES del bootstrap.min.css de BS5 y del
   style.css del tema, para ganar la cascada.

   Se ira ampliando a medida que aparezcan mas choques BS3 -> BS5.
   ========================================================================== */

/* --------------------------------------------------------------------------
   INPUT GROUPS + form-line de AdminBSB
   Problema: BS5 usa flexbox en .input-group y espera el input como hijo
   directo. AdminBSB envuelve el input en .form-line, que BS5 trata como
   bloque de ancho completo -> el icono queda encima del campo.
   Fix: que .form-line se comporte como hijo flex que ocupa el resto.
   -------------------------------------------------------------------------- */
.input-group {
    flex-wrap: nowrap;              /* que no salte de linea */
    align-items: center;
}

.input-group > .form-line {
    flex: 1 1 auto;                 /* ocupa el espacio restante junto al icono */
    min-width: 0;                   /* permite que el input encoja sin desbordar */
}

.input-group > .form-line .form-control {
    width: 100%;
}

/* El "addon" del icono (persona / candado). En BS5 es .input-group-text */
.input-group-text {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --------------------------------------------------------------------------
   NAVBAR (top bar) de AdminBSB en BS5 — ajuste final
   - Quita las lineas negras arriba/abajo (borde/margen que mete BS5)
   - Bloque usuario/fecha/logout apilado vertical y a la derecha
   -------------------------------------------------------------------------- */
.navbar {
    margin-bottom: 0 !important;      /* BS3 metia margen inferior; BS5 lo muestra como linea */
    border: 0 !important;             /* quita el borde que se ve como linea negra */
    border-radius: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
}

.navbar .container-fluid {
    padding-top: 0;
    padding-bottom: 0;
}

/* El colapse a la derecha */
.navbar #navbar-collapse {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center;
}

/* Bloque de usuario/fecha/logout: apilado VERTICAL y alineado a la derecha */
.navbar #navbar-collapse .nav {
    display: flex !important;
    flex-direction: column !important;   /* uno debajo del otro */
    align-items: flex-end !important;    /* pegados a la derecha */
    margin: 0;
    padding: 6px 15px;
    list-style: none;
}

.navbar #navbar-collapse .nav .text {
    padding: 0;
    line-height: 1.3;
}

/* --------------------------------------------------------------------------
   SIDEBAR (menu lateral) en BS5
   - BS5 subraya los links y cambia el tamano por su reboot/reset
   -------------------------------------------------------------------------- */
.sidebar .menu .list a,
.sidebar a {
    text-decoration: none !important;   /* quita el subrayado que mete BS5 */
}

.sidebar .menu .list {
    padding-left: 0;                    /* BS5 agrega padding a las <ul> */
    margin: 0;
    list-style: none;
}

.sidebar .menu .list li a {
    font-size: 14px;                    /* tamano original de AdminBSB */
    line-height: 1.4;
}

/* --------------------------------------------------------------------------
   GRAFICOS (Highcharts / morris / flot / chartjs) en BS5
   Problema: el grafico calcula su ancho segun el contenedor. Si BS5 cambio
   el ancho de la card al iniciar, el grafico queda desplazado/cortado.
   Fix CSS: que nunca superen el ancho de su card.
   -------------------------------------------------------------------------- */
.card svg,
.card canvas,
.card .body svg,
.card .body canvas {
    max-width: 100% !important;
    height: auto;
}

/* Contenedores tipo Highcharts (#container000, etc.) */
[id^="container"] {
    max-width: 100% !important;
}