/* Positions du menu principal (Thèmes → Menu principal) */

html[data-menu-position="left"] .sidebar {
    /* défaut déjà dans style.css */
}

/* ——— En haut ——— */
@media (min-width: 769px) {
    html[data-menu-position="top"] .app-layout {
        flex-direction: column;
    }

    html[data-menu-position="top"] .sidebar {
        width: 100%;
        height: var(--menu-top-bar-height, 56px);
        min-height: var(--menu-top-bar-height, 56px);
        max-height: var(--menu-top-bar-height, 56px);
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        flex-direction: row;
        align-items: center;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: 0 4px 20px rgba(8, 47, 73, 0.1);
        overflow: visible;
        z-index: 200;
    }

    html[data-menu-position="top"] {
        --menu-top-bar-height: 56px;
        --menu-top-nav-inset: 6px;
        --menu-top-btn-height: calc(var(--menu-top-bar-height) - (2 * var(--menu-top-nav-inset)));
        --menu-top-font-size: 0.68rem;
        --menu-top-icon: 24px;
        --menu-top-svg: 12px;
        --menu-top-pad-y: 0.28rem;
        --menu-top-pad-x: 0.38rem;
        --menu-top-gap: 0.28rem;
        --menu-top-brand-icon: 28px;
        --menu-top-brand-svg: 14px;
        --menu-top-brand-font: 0.82rem;
    }

    /* Menu haut : pas de masquage / repli du menu */
    html[data-menu-position="top"] .sidebar-toggle-btn {
        display: none !important;
    }

    html[data-menu-position="top"] .sidebar-brand {
        flex: 0 0 auto;
        min-width: 7.5rem;
        max-width: 9.5rem;
        height: 100%;
        border-bottom: none;
        border-right: 1px solid rgba(255, 255, 255, 0.1);
        padding: 0 0.65rem;
        justify-content: center;
        align-items: center;
    }

    html[data-menu-position="top"] .brand-text {
        font-size: var(--menu-top-brand-font);
        line-height: 1.15;
    }

    html[data-menu-position="top"] .brand-icon {
        width: var(--menu-top-brand-icon);
        height: var(--menu-top-brand-icon);
    }

    html[data-menu-position="top"] .brand-icon svg {
        width: var(--menu-top-brand-svg);
        height: var(--menu-top-brand-svg);
    }

    html[data-menu-position="top"] .sidebar-nav {
        flex: 1 1 auto;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.06rem;
        overflow-x: hidden;
        overflow-y: hidden;
        height: 100%;
        padding: var(--menu-top-nav-inset) 0.4rem;
        -webkit-overflow-scrolling: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    html[data-menu-position="top"] .sidebar-nav::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    html[data-menu-position="top"] .nav-section {
        display: none;
    }

    html[data-menu-position="top"] .nav-group {
        flex: 0 0 auto;
        height: 100%;
        display: flex;
        align-items: center;
    }

    html[data-menu-position="top"] .nav-link,
    html[data-menu-position="top"] .nav-group-toggle {
        width: auto;
        height: var(--menu-top-btn-height);
        min-height: var(--menu-top-btn-height);
        max-height: var(--menu-top-btn-height);
        box-sizing: border-box;
        white-space: nowrap;
        gap: var(--menu-top-gap);
        padding: var(--menu-top-pad-y) var(--menu-top-pad-x);
        font-size: var(--menu-top-font-size);
        font-weight: 500;
        letter-spacing: -0.01em;
        align-items: center;
    }

    html[data-menu-position="top"] .nav-label {
        flex: 0 0 auto;
        font-size: var(--menu-top-font-size);
        line-height: 1.2;
        overflow: visible;
        text-overflow: clip;
    }

    html[data-menu-position="top"] .nav-icon {
        width: var(--menu-top-icon);
        height: var(--menu-top-icon);
        border-radius: 7px;
    }

    html[data-menu-position="top"] .nav-icon svg,
    html[data-menu-position="top"] .nav-chevron svg {
        width: var(--menu-top-svg);
        height: var(--menu-top-svg);
    }

    html[data-menu-position="top"] .nav-chevron {
        margin-left: 0;
    }

    html[data-menu-position="top"] .nav-submenu {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 12rem;
        background: var(--sidebar-bg-deep);
        border-radius: 0 0 10px 10px;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
        z-index: 250;
    }

    html[data-menu-position="top"] .nav-group {
        position: relative;
    }

    html[data-menu-position="top"] .sidebar-footer {
        flex: 0 0 auto;
        flex-direction: row;
        align-items: center;
        gap: 0.35rem;
        height: 100%;
        border-top: none;
        border-left: 1px solid rgba(255, 255, 255, 0.1);
        padding: var(--menu-top-nav-inset) 0.55rem;
    }

    html[data-menu-position="top"] .sidebar-footer .nav-link,
    html[data-menu-position="top"] .sidebar-footer .btn,
    html[data-menu-position="top"] .sidebar-footer button {
        height: var(--menu-top-btn-height);
        min-height: var(--menu-top-btn-height);
        max-height: var(--menu-top-btn-height);
        box-sizing: border-box;
        font-size: var(--menu-top-font-size);
        padding: var(--menu-top-pad-y) var(--menu-top-pad-x);
        align-items: center;
    }

    html[data-menu-position="top"] .main-content {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

    html[data-menu-position="top"] .sidebar-specialite,
    html[data-menu-position="top"] #sidebar-specialite-wrap,
    html[data-menu-position="top"] .brand-sub,
    html[data-menu-position="top"] #sidebar-brand-specialite {
        display: none !important;
    }

    html[data-menu-position="top"].sidebar-collapsed .sidebar {
        width: 100%;
        background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-deep) 100%) !important;
        color: #f8fafc;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    html[data-menu-position="top"].sidebar-collapsed .main-content {
        margin-left: 0;
    }

    html[data-menu-position="top"].sidebar-collapsed .nav-label,
    html[data-menu-position="top"].sidebar-collapsed .brand-text {
        display: inline !important;
    }

    /* Variantes visuelles menu haut (aperçu / base) */
    html[data-menu-position="top"][data-menu-top-style="03"] .sidebar,
    html[data-menu-position="top"][data-menu-top-style="07"] .sidebar,
    html[data-menu-position="top"][data-menu-top-style="20"] .sidebar {
        background: linear-gradient(90deg, #0b1220 0%, #0f172a 55%, #111827 100%);
    }

    html[data-menu-position="top"][data-menu-top-style="01"] .sidebar {
        width: calc(100% - 2rem);
        margin: 0.65rem 1rem 0;
        border-radius: 999px;
        border-bottom: none;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
    }

    html[data-menu-position="top"][data-menu-top-style="04"] .nav-link,
    html[data-menu-position="top"][data-menu-top-style="04"] .nav-group-toggle,
    html[data-menu-position="top"][data-menu-top-style="08"] .nav-link,
    html[data-menu-position="top"][data-menu-top-style="08"] .nav-group-toggle,
    html[data-menu-position="top"][data-menu-top-style="16"] .nav-link,
    html[data-menu-position="top"][data-menu-top-style="16"] .nav-group-toggle {
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.08);
    }

    html[data-menu-position="top"][data-menu-top-style="02"] .nav-link.active,
    html[data-menu-position="top"][data-menu-top-style="05"] .nav-link.active,
    html[data-menu-position="top"][data-menu-top-style="17"] .nav-link.active {
        background: transparent;
        box-shadow: inset 0 -3px 0 var(--sidebar-active);
        border-radius: 0;
    }

    html[data-menu-position="top"][data-menu-top-style="11"] .sidebar,
    html[data-menu-position="top"][data-menu-top-style="19"] .sidebar {
        background: linear-gradient(90deg, #0c1a3a, #132a52);
        border-bottom: 2px solid #d4a017;
    }

    html[data-menu-position="top"][data-menu-top-style="13"] .nav-link,
    html[data-menu-position="top"][data-menu-top-style="13"] .nav-group-toggle {
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.1);
        margin: 0 0.1rem;
    }
}

/* ——— À droite ——— */
@media (min-width: 769px) {
    html[data-menu-position="right"] .app-layout {
        flex-direction: row-reverse;
    }

    html[data-menu-position="right"] .sidebar {
        left: auto;
        right: 0;
        border-right: none;
        border-left: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: -4px 0 24px rgba(8, 47, 73, 0.12);
    }

    html[data-menu-position="right"] .main-content {
        margin-left: 0;
        margin-right: var(--sidebar-width);
    }

    html[data-menu-position="right"].sidebar-collapsed .main-content {
        margin-left: 0;
        margin-right: var(--sidebar-collapsed-width);
    }

    html[data-menu-position="right"].sidebar-collapsed .sidebar {
        left: auto;
        right: 0;
        border-left: 1px solid #e2e8f0;
        border-right: none;
    }
}

/* ——— En bas ——— */
@media (min-width: 769px) {
    html[data-menu-position="bottom"] .app-layout {
        flex-direction: column-reverse;
    }

    html[data-menu-position="bottom"] .sidebar {
        width: 100%;
        height: auto;
        position: sticky;
        bottom: 0;
        top: auto;
        left: 0;
        flex-direction: row;
        align-items: stretch;
        border-right: none;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: 0 -4px 20px rgba(8, 47, 73, 0.1);
        z-index: 200;
    }

    html[data-menu-position="bottom"] .sidebar-brand {
        flex: 0 0 auto;
        border-bottom: none;
        border-right: 1px solid rgba(255, 255, 255, 0.1);
        padding: 0.55rem 1rem;
    }

    html[data-menu-position="bottom"] .sidebar-nav {
        flex: 1 1 auto;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.06rem;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0.3rem 0.4rem;
    }

    html[data-menu-position="bottom"] .nav-section {
        display: none;
    }

    html[data-menu-position="bottom"] .nav-group {
        position: relative;
        flex: 0 0 auto;
    }

    html[data-menu-position="bottom"] .nav-link,
    html[data-menu-position="bottom"] .nav-group-toggle {
        width: auto;
        white-space: nowrap;
        gap: var(--menu-top-gap, 0.28rem);
        padding: var(--menu-top-pad-y, 0.28rem) var(--menu-top-pad-x, 0.38rem);
        font-size: var(--menu-top-font-size, 0.68rem);
    }

    html[data-menu-position="bottom"] .nav-label {
        flex: 0 0 auto;
        font-size: var(--menu-top-font-size, 0.68rem);
        overflow: visible;
        text-overflow: clip;
    }

    html[data-menu-position="bottom"] .nav-icon {
        width: var(--menu-top-icon, 24px);
        height: var(--menu-top-icon, 24px);
        border-radius: 7px;
    }

    html[data-menu-position="bottom"] .nav-icon svg,
    html[data-menu-position="bottom"] .nav-chevron svg {
        width: var(--menu-top-svg, 12px);
        height: var(--menu-top-svg, 12px);
    }

    html[data-menu-position="bottom"] .nav-submenu {
        position: absolute;
        bottom: 100%;
        left: 0;
        min-width: 12rem;
        background: var(--sidebar-bg-deep);
        border-radius: 10px 10px 0 0;
        box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.18);
        z-index: 250;
    }

    html[data-menu-position="bottom"] .sidebar-footer {
        flex: 0 0 auto;
        flex-direction: row;
        border-top: none;
        border-left: 1px solid rgba(255, 255, 255, 0.1);
        padding: 0.45rem 0.85rem;
    }

    html[data-menu-position="bottom"] .main-content {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

    html[data-menu-position="bottom"].sidebar-collapsed .sidebar {
        width: 100%;
        background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-deep) 100%) !important;
        color: #f8fafc;
    }

    html[data-menu-position="bottom"].sidebar-collapsed .main-content {
        margin-left: 0;
    }
}