/* RESET */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, sans-serif;
}

/* ================= HEADER ================= */
.header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:50px;
    background:#ffffff;
    border-bottom:1px solid #ddd;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:1000;
     
}

.header-center{
    display:flex;
    align-items:center;
    gap:8px;
}

.header-logo{
    width:26px;
    height:26px;
}

.system-title{
    font-size:20px;
    font-weight:600;
}

/* Clock */
.header-clock{
    position:absolute;
    right:15px;
    font-size:20px;
    color:rgb(0, 0, 0);
}

/* ================= SIDEBAR ================= */
.sidebar {
    position: fixed;
    top: 50px;
    left: 0;
    width: 140px;
    height: calc(100% - 50px);
    background: #ffffff;
    border-right: 1px solid #ddd;
    padding: 16px 0;           /* more breathing room top/bottom */
    transition: transform 0.3s ease;
    z-index: 1001;

    display: flex;             /* ← added */
    flex-direction: column;    /* ← added */
    gap: 8px;                  /* ← controls vertical spacing between logo, links, etc. */
    align-items: stretch;      /* makes items full width */
}

.sidebar-logo{
    text-align:center;
    margin-bottom:10px;
}

.sidebar-logo img{
    width:28px;
}

.cms-text{
    font-size:20px;
    font-weight:bold;
    margin-top:4px;
}

.sidebar a{
    display:flex;
    align-items:center;
    gap:8px;
     
    font-size:15px;
    color:#333;
    text-decoration:none;
    margin: 3px ;
}

.sidebar a:hover{
    background:#f3f3f3;
}

.sidebar svg{
    width:15px;
    height:15px;
    fill:#444;
}

/* ================= MAIN CONTENT ================= */
.main{
    margin-left:130px;
    margin-top:50px;
    padding:20px;
}

.box{
    height:300px;
    background:#f4f4f4;
    margin-top:20px;
    border-radius:4px;
}

/* ================= BURGER MENU ================= */
.burger{
    display:none;
    position:fixed;
    top:10px;
    right:10px; /* burger on right */
    font-size:28px;
    cursor:pointer;
    z-index:1002;
}

/* ================= OVERLAY ================= */
.overlay{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.4);
    z-index:1000;
}

.overlay.overlay-show{
    display:block;
}
/* Submenu hidden by default */
.menu-item .submenu{
    display:none;
    flex-direction: column;
    padding-left:20px;
}

.menu-item .submenu a{
    font-size:15px;
    padding:4px 0;
    color:#555;
}

/* Arrow styling */
.menu-item a .arrow{
    margin-left:auto;
    transition: transform 0.3s ease;
}

/* Open submenu */
.menu-item.open .submenu{
    display:flex;
}

.menu-item.open a .arrow{
    transform: rotate(90deg); /* arrow points right when open */
}

/* Optional: hover effect for submenu links */
.menu-item .submenu a:hover{
    background:#f3f3f3;
    border-radius:4px;
    padding-left:5px;
}
/* ================= RESPONSIVE ================= */
@media (max-width:768px){
    /* Hide header */
    .header{
        display:none;
    }

    /* Show burger menu */
    .burger{
        display:block;
    }

    /* Sidebar slides in from the right */
    .sidebar{
        top:0;
        right:0;
        left:auto;
        height:100%;
        width:200px;
        transform:translateX(220px); /* hidden by default */
        border-left:1px solid #ddd;
        border-right:none;
    }

    .sidebar.sidebar-open{
        transform:translateX(0); /* slide in */
    }

    /* Hide sidebar text if desired (ultra-compact) */
    /* .sidebar a span, .cms-text{
        display:none;
    } */

    /* Overlay shows when sidebar open */
    .overlay.overlay-show{
        display:block;
    }

    /* Main content full width */
    .main{
        margin-left:0;
        margin-top:0;
        padding:10px;
    }
}