/* -------------------------------
   Base Page Styles (Body)
--------------------------------- */
body {
  margin: 0;
  font-family: var(--font-family-base, Arial, sans-serif);
  display: flex;
  flex-direction: column;
  height: 100vh;
}

header,
footer {
  background-color: var(--color-primary, #333);
  color: var(--text-primary-light);
  text-align: center;
  padding: var(--spacing-small, 10px) 0;
  flex-shrink: 0;
}

.content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.nav,
.profile,
.main {
  padding: var(--spacing-small, 10px);
  box-sizing: border-box;
}

.nav {
  background-color: var(--bg-secondary);
  width: var(--nav-width);
  min-width: 150px;
}

.main {
  flex: 1;
  background-color: var(--bg-primary);
  overflow-y: auto;
}

.profile {
  background-color: var(--bg-tertiary);
  width: var(--profile-width);
  min-width: 150px;
}

@media (max-width: 768px) {
  .content {
    flex-direction: column;
  }

  .nav,
  .profile {
    width: 100%;
    min-width: unset;
  }
}

/* Stylize the menu items as circular app-like icons */
#menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

#menu li {
  margin: 10px 0;
  text-align: center;
}

/* Removed circular design styles for the menu */

/* Dropdown menu styling */
#menu .ui-menu {
  width: auto;
}

#menu .ui-menu-item {
  margin: 5px 0;
}

#menu .ui-menu-item div {
  width: auto;
  height: auto;
  line-height: normal;
  border-radius: 0;
  padding: 5px 10px;
}

/* Remove list style from sub-menu items */
#menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#menu ul li {
  margin: 5px 0;
}

#menu ul li div {
  background-color: #007bff;
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  transition: background-color 0.3s ease;
  margin-left: -38px;
}

#menu ul li div:hover {
  background-color: #0056b3;
}

/* Moved layout-driven styles from _boot_styles.css */

#back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  z-index: 1001;
}