/*
Template Name: Adminto Dashboard
Author: CoderThemes
Email: coderthemes@gmail.com
File: Menu
*/

:root {
    --header-height: 73px;
    --main-orange: #ff9800; /* 変数がない場合のための予備 */
}

/* --- 全サイズ共通：レイアウトの土台 --- */
.topbar {
    display: flex !important; /* ロゴとサイドメニューを横に並べる */
    align-items: center;
    width: 100% !important;
    background: #fff;
    position: fixed;
    top: 0;
    z-index: 1001;
}

.topbar-left {
    width: auto !important; /* 250px固定を解除 */
    flex-shrink: 0;
}

/* メニュー本体を内包するエリア */
.side-menu {
    position: static !important;
    display: flex !important;
    width: auto !important;
    height: var(--header-height) !important;
    background: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    flex-grow: 1;
}

.content-page {
    margin-left: 0 !important;
}

/* --- PC版（769px以上）：三本線を隠し、メニューを横並びに --- */
@media (min-width: 769px) {
    /* 三本線アイコンを完全に消す */
    .menu-toggle, #js-menu-toggle {
        display: none !important;
    }

    /* メニューを常に表示 */
    #js-nav-content {
        display: block !important;
        visibility: visible !important;
    }

    #sidebar-menu {
        width: 100%;
    }

    #sidebar-menu ul {
        display: flex !important;
        flex-direction: row !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #sidebar-menu ul li a {
        line-height: var(--header-height) !important;
        padding: 0 15px !important;
        display: block;
        color: #333;
        border-left: none !important;
    }

    .user-box {
        display: none !important;
    }
}

/* --- スマホ版（768px以下）：三本線を表示し、メニューを隠す --- */
@media (max-width: 768px) {
    /* 三本線アイコンをロゴの右側に配置 */
    .menu-toggle {
        display: block !important;
        position: fixed;
        right: 20px;
        top: 20px;
        z-index: 1002;
        background: none;
        border: none;
    }

    .menu-toggle span {
        display: block;
        width: 25px;
        height: 3px;
        background-color: var(--color-mainOrange, var(--main-orange));
        margin-bottom: 5px;
    }

    /* メニュー本体を浮かせて、初期状態は隠す */
    .side-menu {
        position: fixed !important;
        top: var(--header-height) !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        display: block !important;
        z-index: 1000;
    }

    #js-nav-content {
        display: none !important; /* 初期は非表示 */
    }

    /* JSでクラスが付与されたら表示 */
    #js-nav-content.is-open {
        display: block !important;
    }

    #sidebar-menu ul {
        display: block !important;
        background: #fff;
    }

    #sidebar-menu ul li a {
        padding: 15px 20px !important;
        border-bottom: 1px solid #eee;
    }
}