/*
 * ItebreBrand - Overrides de marca sobre FlexyTheme.
 * Carga DESPUÉS de styles.min.css y flexy.min.css (vía AssetManager), así que gana.
 * Consume las variables generadas en itebre-vars.css desde el panel de ajustes.
 */

/* ---- Área de contenido ----
 * El tema mantiene el body inmóvil. Esta es la única zona que debe desplazarse,
 * incluidas las vistas de plugins que heredan MenuTemplate directamente. */
.body-wrapper {
    min-height: 0;
}

.body-wrapper-inner {
    min-height: 0;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* ---- Sidebar (aside.left-sidebar.bg-dark) ---- */
.left-sidebar {
    background-color: var(--itebre-sidebar-bg) !important;
    background-image: var(--itebre-navbar-image) !important;
    color: var(--itebre-sidebar-text) !important;
    display: flex !important;
    flex-direction: column;
    height: 100dvh !important;
    overflow: hidden;
    top: 0;
}

/* La cabecera y el menú ocupan el espacio disponible, reservando siempre
 * sitio para la marca inferior. min-height: 0 permite que SimpleBar reduzca
 * correctamente el área desplazable sin empujar el logo fuera del viewport. */
.left-sidebar > div:first-child {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    padding-bottom: 112px;
}

.left-sidebar .scroll-sidebar {
    flex: 1 1 auto;
    height: auto !important;
    min-height: 0;
}

.left-sidebar .sidebar-link,
.left-sidebar .sidebar-nav .sidebar-item .sidebar-link {
    color: var(--itebre-sidebar-text) !important;
}

/* Hover de enlaces del menú */
.left-sidebar .sidebar-nav ul .sidebar-item .sidebar-link:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
}

/* Elemento activo del menú -> color primario de marca */
.left-sidebar .sidebar-nav ul .sidebar-item.selected > .sidebar-link,
.left-sidebar .sidebar-nav ul .sidebar-item .sidebar-link.active,
.left-sidebar .sidebar-nav ul .sidebar-item.active > .sidebar-link {
    background-color: var(--itebre-primary) !important;
    color: #111 !important;
    font-weight: 600;
}

/* ---- Datos de contacto Itebre al pie del sidebar ---- */
.left-sidebar .itebre-sidebar-contact {
    background: var(--itebre-sidebar-bg, #0b0b0b);
    border-top: 1px solid rgba(255, 255, 255, .12);
    bottom: 0 !important;
    color: #ffd43b !important;
    left: 24px !important;
    margin: 0 !important;
    opacity: 1 !important;
    padding: 13px 2px calc(15px + env(safe-area-inset-bottom, 0px));
    position: absolute !important;
    right: 24px !important;
    text-align: center;
    transform: none !important;
    visibility: visible !important;
    width: auto !important;
    z-index: 3;
}

.left-sidebar .itebre-sidebar-contact a {
    color: #ffd43b !important;
    text-decoration: none;
}

.itebre-sidebar-contact-name {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 6px;
}

.itebre-sidebar-contact-details {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.itebre-sidebar-contact-details a {
    display: block;
    font-size: .7rem;
    line-height: 1.3;
    opacity: .72;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-bs-theme="light"] .left-sidebar .itebre-sidebar-contact,
[data-bs-theme="light"] .left-sidebar .itebre-sidebar-contact a {
    color: #ffd43b !important;
}

.itebre-sidebar-contact a:hover,
.itebre-sidebar-contact a:focus-visible {
    color: var(--itebre-primary) !important;
    opacity: 1;
}

/* ---- Botones primarios ---- */
.btn-primary {
    --bs-btn-bg: var(--itebre-button);
    --bs-btn-border-color: var(--itebre-button);
    --bs-btn-hover-bg: var(--itebre-secondary);
    --bs-btn-hover-border-color: var(--itebre-secondary);
    --bs-btn-active-bg: var(--itebre-secondary);
    --bs-btn-active-border-color: var(--itebre-secondary);
    --bs-btn-disabled-bg: var(--itebre-button);
    --bs-btn-disabled-border-color: var(--itebre-button);
    --bs-btn-color: #111;
    --bs-btn-hover-color: var(--itebre-primary);
    --bs-btn-active-color: var(--itebre-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--itebre-button);
    --bs-btn-border-color: var(--itebre-button);
    --bs-btn-hover-bg: var(--itebre-button);
    --bs-btn-hover-border-color: var(--itebre-button);
    --bs-btn-active-bg: var(--itebre-button);
    --bs-btn-active-border-color: var(--itebre-button);
}

/* ---- Enlaces y texto ---- */
.text-primary {
    color: var(--itebre-link) !important;
}

a {
    color: var(--itebre-link);
}

a:hover {
    color: var(--itebre-secondary);
}

/* ---- Radio de bordes extra (además de --bs-border-radius) ---- */
.btn,
.card,
.form-control,
.form-select {
    border-radius: var(--itebre-radius) !important;
}

/* ---- Componentes varios ---- */
.badge.bg-primary,
.bg-primary {
    background-color: var(--itebre-primary) !important;
    color: #111 !important;
}

.page-item.active .page-link {
    background-color: var(--itebre-primary);
    border-color: var(--itebre-primary);
    color: #111;
}

.nav-tabs .nav-link.active {
    border-bottom-color: var(--itebre-primary);
    color: var(--itebre-link);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--itebre-primary);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--itebre-primary) 25%, transparent);
}

/* ---- Cabecera y selector de modo ---- */
.itebre-theme-toggle {
    cursor: pointer;
}

.itebre-theme-toggle:hover,
.itebre-theme-toggle:focus-visible {
    color: var(--itebre-primary) !important;
}

/* ---- Modo oscuro ---- */
[data-bs-theme="dark"] .app-header,
[data-bs-theme="dark"] .app-header .navbar,
[data-bs-theme="dark"] .body-wrapper,
[data-bs-theme="dark"] .page-wrapper {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .app-header .text-dark,
[data-bs-theme="dark"] .app-header .nav-link {
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .list-group-item {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] a:not(.btn):not(.sidebar-link) {
    color: var(--itebre-primary);
}

[data-bs-theme="dark"] a:not(.btn):not(.sidebar-link):hover {
    color: var(--itebre-accent);
}

[data-bs-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--bs-body-color);
    --bs-table-border-color: var(--bs-border-color);
}