/*
 * Klienz CRM — Custom Styles
 * Floating navbar + Sidebar personalizado
 * No afecta compact-view-active
 */

/* ============================================
   FLOATING NAVBAR
   ============================================ */

@media (min-width: 991px) {

    /* Navbar flotante — solo cuando NO hay compact-view activo */
    body:not(.compact-view-active) .navbar-custom {
        top: 0.85rem !important;
        left: calc(250px + 1.2rem) !important;
        right: 1.2rem !important;
        width: auto !important;
        border-radius: 0.5rem;
        box-shadow: 0 4px 24px 0 rgba(34, 41, 47, 0.12);
        border-bottom: none !important;
        padding: 0 0.5rem !important;
        min-height: 62px;
        transition: left 0.3s ease, width 0.3s ease;
        z-index: 1006;
    }

    /* Sidebar colapsado — navbar se ajusta */
    body.sidebar-toggled:not(.compact-view-active) .navbar-custom {
        left: calc(70px + 1.2rem) !important;
    }

    /* Contenido empieza mas abajo para no taparse con navbar flotante */
    body:not(.compact-view-active) .page-container {
        padding-top: 14px !important;
    }
}


/* ============================================
   SIDEBAR — Personalizado
   ============================================ */

@media (min-width: 991px) {

    /* Sin borde derecho + esquina redondeada superior */
    body:not(.compact-view-active) .sidebar {
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
        border-right: none !important;
        border-top-right-radius: 16px !important;
    }

    /* Area del logo: fondo coral suave */
    body:not(.compact-view-active) .sidebar .sidebar-brand,
    body:not(.compact-view-active) .sidebar-brand {
        background-color: #fff9f6 !important;
        border: none !important;
    }

    /* Scrollbar oculto en sidebar */
    .sidebar-scroll {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    .sidebar-scroll::-webkit-scrollbar {
        display: none !important;
    }
}


/* ============================================
   SIDEBAR — Active state Klienz
   ============================================ */

/* Light mode: active item con color magenta suave */
.sidebar-menu li.active > a {
    color: #a22749 !important;
    background-color: rgba(162, 39, 73, 0.08) !important;
}

/* Light mode: active submenu */
.sidebar-menu li.active-submenu > a {
    color: #a22749 !important;
    background-color: rgba(162, 39, 73, 0.06) !important;
}

/* Mantener color del icono cuando esta activo (no heredar magenta) */
.sidebar-menu li.active > a .menu-icon-colored,
.sidebar-menu li.active > a .menu-icon-colored .icon {
    opacity: 1;
}


/* ============================================
   SIDEBAR — Iconos y puntos de color
   ============================================ */

/* Iconos del menu principal a 16px */
.sidebar-menu li a .menu-icon-colored .icon,
.sidebar-menu li a .menu-icon-colored svg {
    width: 16px !important;
    height: 16px !important;
}

/* Punto de color en submenus */
.sidebar-menu ul li a .sub-icon-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 8px;
    flex-shrink: 0;
    vertical-align: middle;
}

/* Submenus con flex para alinear badge */
.sidebar-menu li ul li a {
    display: flex !important;
    align-items: center;
}
.sidebar-menu li ul li a .badge {
    float: none !important;
    margin-left: 8px !important;
    margin-top: 0 !important;
}

/* Ocultar icono minus legacy en submenus */
.sidebar-menu ul li a [data-feather="minus"] {
    display: none !important;
}


/* ============================================
   DARK MODE — Overrides
   ============================================ */

@media (min-width: 991px) {

    /* Navbar: sombra mas intensa en dark */
    body[data-color="1E202D"]:not(.compact-view-active) .navbar-custom,
    body[data-color="1d2632"]:not(.compact-view-active) .navbar-custom,
    body[data-color="2e4053"]:not(.compact-view-active) .navbar-custom {
        box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.25);
    }

    /* Sidebar logo area en dark */
    body[data-color="1E202D"]:not(.compact-view-active) .sidebar .sidebar-brand,
    body[data-color="1E202D"]:not(.compact-view-active) .sidebar-brand,
    body[data-color="1d2632"]:not(.compact-view-active) .sidebar .sidebar-brand,
    body[data-color="1d2632"]:not(.compact-view-active) .sidebar-brand,
    body[data-color="2e4053"]:not(.compact-view-active) .sidebar .sidebar-brand,
    body[data-color="2e4053"]:not(.compact-view-active) .sidebar-brand {
        background-color: #1C1F26 !important;
        border: none !important;
    }
}

/* Dark mode active state */
body[data-color="1E202D"] .sidebar-menu li.active > a,
body[data-color="1d2632"] .sidebar-menu li.active > a,
body[data-color="2e4053"] .sidebar-menu li.active > a {
    color: #fff !important;
    background-color: rgba(162, 39, 73, 0.25) !important;
}

body[data-color="1E202D"] .sidebar-menu li.active-submenu > a,
body[data-color="1d2632"] .sidebar-menu li.active-submenu > a,
body[data-color="2e4053"] .sidebar-menu li.active-submenu > a {
    color: #e2e8f0 !important;
    background-color: rgba(162, 39, 73, 0.15) !important;
}