/* Multi-level Sidebar Navigation 
   Inspired by the reference images provided 
*/

:root {
  --sidebar-transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  --sidebar-bg: #f6f1e5;
  --sidebar-text: #5b3d0f;
  --sidebar-accent: #1b7b89;
}

/* Multi-level navigation container */
.multi-level-nav {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Each screen in the navigation */
.nav-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--sidebar-bg);
  transition: var(--sidebar-transition);
  transform: translateX(100%);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Force visibility for debugging */
  opacity: 1;
  visibility: visible;
}

/* Screens states */
.nav-screen.active {
  transform: translateX(0) !important;
  z-index: 3 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.nav-screen.previous {
  transform: translateX(-30%);
  z-index: 1;
}

/* Main screen (home) */
.nav-screen.home {
  transform: translateX(0) !important;
  z-index: 2 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.nav-screen.home.shifted {
  transform: translateX(-30%) !important;
  z-index: 1 !important;
}

/* Screen header */
.screen-header {
  display: flex;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid rgba(91, 61, 15, 0.1);
  background-color: rgba(246, 241, 229, 0.95);
  position: sticky;
  top: 0;
  z-index: 10;
}

.back-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--sidebar-text);
  font-size: 20px;
  padding: 5px;
  margin-right: 10px;
  cursor: pointer;
  transition: color 0.2s ease;
}

.back-button:hover {
  color: var(--sidebar-accent);
}

.screen-title {
  font-family: var(--font-Montserrat);
  font-size: 16px;
  font-weight: 600;
  color: var(--sidebar-text);
  margin: 0;
  flex: 1;
}

/* Navigation items */
.nav-item-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  border-bottom: 1px solid rgba(91, 61, 15, 0.05);
}

.nav-item-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  font-family: var(--font-Montserrat);
  font-size: 14px;
  color: var(--sidebar-text);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-item-link:hover,
.nav-item-link:active {
  background-color: rgba(27, 123, 137, 0.05);
  color: var(--sidebar-accent);
  text-decoration: none;
}

.nav-item-text {
  font-weight: 500;
}

.nav-arrow {
  font-size: 12px;
  color: var(--sidebar-accent);
  transition: transform 0.2s ease;
}

/* For direct links without children */
.nav-item-link.direct-link {
  padding-right: 16px;
}

/* Sub-item styling */
.nav-sub-item {
  padding-left: 8px;
}

/* Animation for screen transitions */
@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes slideOutRight {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

@keyframes slideInLeft {
  from { transform: translateX(-30%); }
  to { transform: translateX(0); }
}

@keyframes slideOutLeft {
  from { transform: translateX(0); }
  to { transform: translateX(-30%); }
}

.nav-screen.slide-in-right {
  animation: slideInRight 0.3s forwards;
}

.nav-screen.slide-out-right {
  animation: slideOutRight 0.3s forwards;
}

.nav-screen.slide-in-left {
  animation: slideInLeft 0.3s forwards;
}

.nav-screen.slide-out-left {
  animation: slideOutLeft 0.3s forwards;
}

/* Icon styles */
.category-icon {
  margin-right: 8px;
  width: 16px;
  text-align: center;
  color: var(--sidebar-accent);
}

/* Main categories indicators */
.main-category-label {
  display: block;
  padding: 12px 16px 8px;
  font-family: var(--font-Montserrat);
  font-size: 12px;
  font-weight: 600;
  color: var(--sidebar-accent);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background-color: rgba(27, 123, 137, 0.03);
}