/* Shell layout for the authenticated admin area. Provides the structure that
   react-admin previously rendered via MUI, while the 1:1 visual styling lives in
   appbar.css and menu.css. */

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
}

.admin_root {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* Top application bar */
header.appbar-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 56px;
    min-height: 56px;
    padding: 0 16px;
    box-sizing: border-box;
    flex-shrink: 0;
    z-index: 1200;
}

.appbar_spacer {
    flex: 1;
}

/* Body: sidebar + content */
.admin_body {
    display: flex;
    flex: 1;
    min-height: 0;
}

.admin_sidebar {
    background: #F2F2EF;
    flex-shrink: 0;
    transition: width 0.2s ease;
    overflow-x: hidden;
    overflow-y: auto;
}

#main-content {
    flex: 1;
    min-width: 0;
    overflow: auto;
    background: #F2F2EF;
}

/* Sidebar collapse toggle button in the app bar */
.appbar_menu_toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--white);
}

/* Profile dropdown menu */
.appbar_profile_wrap {
    position: relative;
}

.profile_menu {
    position: absolute;
    top: calc(100% + 13px);
    right: 0;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    min-width: 220px;
    z-index: 1300;
}

.profile_menu li {
    list-style: none;
    padding: 8px 16px;
    cursor: pointer;
}

.profile_menu li a,
.profile_menu li > div,
.profile_menu li .appbar_logout_button {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 171%;
    color: var(--gray-medium);
    text-decoration: none;
    display: block;
}

/* Logout is a real submit button posting to /auth/logout; strip native button chrome. */
.profile_menu li .appbar_logout_button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.profile_menu li:hover {
    background: var(--gray-background);
}

.profile_menu li:hover a,
.profile_menu li:hover > div,
.profile_menu li:hover .appbar_logout_button {
    color: var(--green-hover);
}

.profile_menu ul {
    margin: 0;
    padding: 0;
}

/* Sub-menu links act as anchors in the React app; keep them styled as plain links */
.sub_menu_wrap a,
.menu_wrap a {
    text-decoration: none;
}