/* ── Application Shell Layout ── */

.app-shell {
  direction: rtl;
  font-family: var(--font-sans);
  min-height: 100vh;
  background-color: var(--color-appbg);
  overflow-x: hidden;
  max-width: 100vw;
  position: relative;
}

/* ── Desktop Sidebar ── */
.desktop-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--sidebar-full-width);
  transition: width 0.22s ease;
  background: #FFFFFF;
  border-left: 1px solid var(--color-bdr);
  display: flex;
  flex-direction: column;
  z-index: 40;
  overflow-y: auto;
  overflow-x: hidden;
}

.desktop-sidebar.collapsed {
  width: var(--sidebar-collapsed-width);
}

/* ── Mobile Sidebar ── */
.mobile-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(85vw, 340px);
  background: #FFFFFF;
  border-left: 1px solid var(--color-bdr);
  display: flex;
  flex-direction: column;
  z-index: 50;
  overflow-y: auto;
  overflow-x: hidden;
  transform: translateX(100%);
  transition: transform 0.24s ease;
  box-shadow: none;
}

.mobile-sidebar.open {
  transform: translateX(0);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.18);
}

/* ── Mobile Backdrop ── */
.mobile-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 45;
  display: none;
  animation: fadeIn 0.2s ease;
}

.mobile-backdrop.open {
  display: block;
}

/* ── Content Area & TopNav wrapper ── */
.main-content-wrapper {
  margin-right: var(--sidebar-full-width);
  transition: margin-right 0.22s ease;
}

.main-content-wrapper.sidebar-collapsed {
  margin-right: var(--sidebar-collapsed-width);
}

/* ── Top Navigation Bar ── */
.topnav {
  position: fixed;
  top: 0;
  left: 0;
  right: var(--sidebar-full-width);
  transition: right 0.22s ease;
  height: var(--topnav-height);
  background: #FFFFFF;
  border-bottom: 1px solid var(--color-bdr);
  display: flex;
  align-items: center;
  padding: 0 16px;
  z-index: 30;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
  padding-top: env(safe-area-inset-top, 0px);
}

.topnav.sidebar-collapsed {
  right: var(--sidebar-collapsed-width);
}

/* ── Main Content Area ── */
.main-content {
  padding-top: var(--topnav-height);
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  min-width: 0;
}