/*
 * 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);
}

/* ---- Checkboxes, radios y switches ----
 * La paleta amarilla podía dejar el estado marcado casi blanco sobre fondos
 * claros. Se fuerza un contraste alto y un check negro visible en ambos temas. */
.form-check-input {
    --bs-form-check-bg: var(--bs-body-bg, #fff);
    background-color: var(--bs-form-check-bg) !important;
    border: 2px solid color-mix(in srgb, var(--bs-body-color, #212529) 62%, transparent) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bs-body-bg, #fff) 35%, transparent);
    cursor: pointer;
    opacity: 1;
}

.form-check-input:hover:not(:disabled),
.form-check-input:focus-visible {
    border-color: var(--itebre-secondary) !important;
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--itebre-primary) 35%, transparent) !important;
}

.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--itebre-primary) !important;
    border-color: color-mix(in srgb, var(--itebre-primary) 62%, #111) !important;
    opacity: 1;
}

.form-check-input:checked[type="checkbox"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23111' stroke-linecap='round' stroke-linejoin='round' stroke-width='3.2' d='m5 10 3.2 3.2L15.5 6'/%3e%3c/svg%3e");
    background-image: var(--bs-form-check-bg-image) !important;
}

.form-check-input[type="checkbox"]:indeterminate {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23111' stroke-linecap='round' stroke-width='3.2' d='M5 10h10'/%3e%3c/svg%3e");
    background-image: var(--bs-form-check-bg-image) !important;
}

.form-check-input:checked[type="radio"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.2' fill='%23111'/%3e%3c/svg%3e");
    background-image: var(--bs-form-check-bg-image) !important;
}

.form-switch .form-check-input {
    background-position: left center;
    min-width: 2.25em;
}

.form-switch .form-check-input:checked {
    background-position: right center;
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23111'/%3e%3c/svg%3e");
    background-image: var(--bs-form-switch-bg) !important;
}

.form-check-input:disabled {
    cursor: not-allowed;
    opacity: .55;
}

[data-bs-theme="dark"] .form-check-input:not(:checked) {
    --bs-form-check-bg: #25282b;
    border-color: #adb5bd !important;
}

/* ---- 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);
}