/* Main Layout Styles - matches existing design */
/* Prevent horizontal scrolling on mobile */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

.layout {
  display: flex;
  min-height: 100vh;
  position: relative;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

.container__wrap {
  padding-left: 0;
  padding-top: 50px;
  padding-bottom: 0;
  min-height: 100vh;
  transition: padding-left 0.3s, background-color 0.3s ease;
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.theme-light .container__wrap {
  background: #f2f4f7;
}

.theme-dark .container__wrap {
  background: #12151c;
}

/* Desktop: Add padding when sidebar is open */
@media screen and (min-width: 576px) {
  .container__wrap {
    padding-left: 250px;
  }
}

/* When layout is collapsed, reduce padding */
.layout.layout--collapse > .container__wrap {
  padding-left: 0;
}

@media screen and (min-width: 576px) {
  .layout.layout--collapse > .container__wrap {
    padding-left: 60px;
  }
}

.container {
  flex: 1;
  padding: 20px;
  width: 100%;
  max-width: 1630px;
  margin: 0 auto;
  transition: width 0.3s, max-width 0.3s, background-color 0.3s ease;
  box-sizing: border-box;
}

/* Card styles reset to Bootstrap defaults - removed custom overrides */

@media screen and (min-width: 768px) {
  .container {
    width: 100%;
    max-width: 1630px;
  }
}

/* Responsive adjustments for cards */
.layout.layout--collapse .container {
  width: 100%;
}

/* Remove padding from topbar avatar */
.topbar__avatar {
  padding: 0 !important;
}

/* Topbar profile styles */
.topbar__profile {
  margin-bottom: 0;
  margin-left: 20px;
}

/* Remove margin from row */
.row {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

/* Logo alignment fix */
.topbar__logo {
  height: 50px;
  margin: auto 0px;
  text-decoration: none;
  line-height: 1;
}

.topbar__logo img {
  width: 40%;
  height: 50px;
  object-fit: contain;
  object-position: left center;
  display: block;
  vertical-align: middle;
  margin: 0;
  padding: 0;
}

/* Remove underline from sidebar links */
.sidebar__block a {
  text-decoration: none;
  color: inherit;
}

.sidebar__block a:hover {
  text-decoration: none;
}

/* Ensure collapse dropdowns are hidden by default */
.topbar__collapse-content.collapse:not(.show) {
  display: none;
}

.topbar__collapse-content.collapse.show {
  display: block;
}

.topbar__menu-wrap.collapse:not(.show) {
  display: none;
}

.topbar__menu-wrap.collapse.show {
  display: block;
}

/* Global theme transitions for smooth theme switching */
.theme-light,
.theme-dark {
  transition: background-color 0.3s ease;
}

/* Smooth transitions for sidebar and topbar */
.sidebar,
.topbar {
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Smooth transitions for text colors */
.sidebar__link-title,
.topbar__hotel-name,
.topbar__hotel-details {
  transition: color 0.3s ease;
}

/* Remove padding from Material-UI Toolbar */
.css-1brtlba {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Apply width to Material-UI generated class */
.css-1942dxq {
  width: 20% !important;
}

/* Remove min-height and padding from Material-UI Toolbar */
.css-i6s8oy {
  min-height: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Remove min-height from all MUI Toolbar instances */
.MuiToolbar-root {
  min-height: 0 !important;
}

/* Remove min-height at various breakpoints */
@media (min-width: 0px) {
  @media (orientation: landscape) {
    .css-i6s8oy,
    .MuiToolbar-root {
      min-height: 0 !important;
    }
  }
}

@media (min-width: 600px) {
  .css-i6s8oy,
  .MuiToolbar-root {
    min-height: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

.rn-startup-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(180deg, #030712 0%, #07130f 48%, #020403 100%);
  color: #f8fafc;
  isolation: isolate;
}

.rn-startup-overlay--exit {
  animation: rnStartupExit 300ms ease forwards;
}

.rn-startup-bg,
.rn-startup-grid,
.rn-startup-radial {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.rn-startup-bg {
  opacity: 0;
  animation: rnFadeIn 420ms ease forwards;
}

.rn-startup-grid {
  background-image:
    linear-gradient(rgba(76, 225, 182, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76, 225, 182, 0.048) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.72), transparent 84%);
  animation: rnGridDrift 6s linear infinite;
}

.rn-startup-radial--one {
  background: radial-gradient(circle at 50% 24%, rgba(76, 225, 182, 0.24), transparent 40%);
  filter: blur(10px);
  animation: rnGlowBreathe 2400ms ease-in-out infinite alternate;
}

.rn-startup-radial--two {
  background: radial-gradient(circle at 50% 72%, rgba(20, 184, 166, 0.15), transparent 44%);
  animation: rnGlowBreathe 3200ms ease-in-out infinite alternate-reverse;
}

.rn-startup-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: #4ce1b6;
  box-shadow: 0 0 14px rgba(76, 225, 182, 0.9);
  opacity: 0;
  animation: rnParticleFloat 4s ease-in-out infinite;
}

.rn-startup-launch,
.rn-startup-splash,
.rn-startup-auth {
  position: relative;
  z-index: 1;
  width: min(100%, 460px);
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top, 0px) 22px env(safe-area-inset-bottom, 0px);
}

.rn-startup-launch {
  align-items: flex-start;
  padding-top: calc(env(safe-area-inset-top, 0px) + 62px);
}

.rn-startup-launch img {
  width: 86px;
  height: 86px;
  object-fit: contain;
  filter: drop-shadow(0 0 26px rgba(76, 225, 182, 0.52));
  animation: rnLogoFadeAtTop 420ms ease forwards;
}

.rn-startup-splash {
  flex-direction: column;
  justify-content: flex-start;
  padding-top: calc(env(safe-area-inset-top, 0px) + 62px);
  opacity: 0;
  animation: rnFadeIn 380ms ease forwards;
}

.rn-startup-logo-wrap {
  position: relative;
  width: 102px;
  height: 102px;
  display: grid;
  place-items: center;
  transform: scale(0.96);
  animation: rnLogoFadeAtTop 520ms ease forwards;
}

.rn-startup-logo-glow {
  position: absolute;
  inset: 10px;
  border-radius: 28px;
  background: rgba(76, 225, 182, 0.24);
  filter: blur(22px);
  opacity: 0;
  animation: rnDoorPulse 1800ms ease-in-out 400ms infinite;
}

.rn-startup-logo {
  position: relative;
  width: 86px;
  height: 86px;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(76, 225, 182, 0.62));
}

.rn-startup-wordmark {
  margin-top: 12px !important;
  font-size: clamp(44px, 13vw, 68px) !important;
  line-height: 0.92 !important;
  font-weight: 900 !important;
  letter-spacing: -0.07em !important;
  color: #5bd8cf !important;
  background: linear-gradient(180deg, #9ce9e2 0%, #4fc9bf 42%, #178f82 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 16px rgba(72, 210, 199, 0.42), 0 9px 24px rgba(0, 0, 0, 0.86);
  opacity: 0;
  transform: translateY(18px);
  animation: rnSlideUp 520ms cubic-bezier(0.22, 1, 0.36, 1) 700ms forwards;
}

.rn-startup-tag {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 7px;
  border: 1px solid rgba(76, 225, 182, 0.32);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(76, 225, 182, 0.12), rgba(7, 19, 15, 0.72)),
    rgba(2, 6, 7, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 24px rgba(76, 225, 182, 0.14);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #9df8e3;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0;
  animation: rnFadeIn 420ms ease 700ms forwards;
}

.rn-startup-tag-icon {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #34f4cf, #0f766e);
  color: #02110e;
  box-shadow: 0 0 18px rgba(76, 225, 182, 0.48);
}

.rn-startup-subtitle {
  margin-top: 14px !important;
  color: rgba(226, 232, 240, 0.72) !important;
  font-size: 17px !important;
  letter-spacing: 0.02em !important;
  opacity: 0;
  animation: rnFadeIn 420ms ease 850ms forwards;
}

.rn-startup-stage {
  position: relative;
  width: min(340px, 82vw);
  height: 250px;
  margin-top: 26px;
}

.rn-startup-orbit {
  position: absolute;
  inset: 8px 8px 18px;
  border: 1px dashed rgba(76, 225, 182, 0.34);
  border-radius: 50% 50% 44% 44%;
  opacity: 0;
  animation: rnFadeIn 420ms ease 1200ms forwards, rnOrbitRotate 12s linear 1200ms infinite;
}

.rn-startup-orbit-icon {
  position: absolute;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(76, 225, 182, 0.3);
  border-radius: 999px;
  background: rgba(3, 13, 18, 0.72);
  color: #4ce1b6;
  box-shadow: 0 0 22px rgba(76, 225, 182, 0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.rn-startup-orbit-icon--0 { top: -20px; left: calc(50% - 24px); }
.rn-startup-orbit-icon--1 { left: -10px; top: 76px; }
.rn-startup-orbit-icon--2 { right: -10px; top: 76px; }
.rn-startup-orbit-icon--3 { right: 24px; bottom: 14px; }

.rn-startup-hotel {
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 190px;
  height: 164px;
  transform: translateX(-50%);
  opacity: 0;
  animation: rnHotelBuild 700ms cubic-bezier(0.22, 1, 0.36, 1) 1000ms forwards;
}

.rn-startup-hotel-glow {
  position: absolute;
  inset: 34px 10px 0;
  background: radial-gradient(circle, rgba(76, 225, 182, 0.42), transparent 65%);
  filter: blur(20px);
}

.rn-startup-hotel-building {
  position: absolute;
  bottom: 18px;
  border: 1px solid rgba(76, 225, 182, 0.28);
  background: linear-gradient(160deg, rgba(20, 184, 166, 0.28), rgba(8, 17, 26, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 18px 40px rgba(0, 0, 0, 0.45);
}

.rn-startup-hotel-building--back {
  left: 16px;
  width: 72px;
  height: 88px;
  transform: skewY(-12deg);
}

.rn-startup-hotel-building--front {
  right: 22px;
  width: 104px;
  height: 126px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 9px;
  padding: 44px 14px 16px;
  transform: skewY(-8deg);
}

.rn-startup-hotel-window {
  border-radius: 2px;
  background: rgba(248, 224, 130, 0.82);
  box-shadow: 0 0 12px rgba(248, 224, 130, 0.48);
}

.rn-startup-hotel-label {
  position: absolute;
  top: 14px;
  left: 20px;
  color: #9df8e3 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.12em !important;
}

.rn-startup-hotel-base {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(76, 225, 182, 0.22), transparent 68%);
}

.rn-startup-progress {
  width: min(300px, 74vw);
  margin-top: 22px;
  opacity: 0;
  animation: rnFadeIn 260ms ease 1600ms forwards;
}

.rn-startup-progress-track {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.18);
}

.rn-startup-progress-bar {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #14b8a6, #4ce1b6, #9df8e3);
  box-shadow: 0 0 18px rgba(76, 225, 182, 0.86);
  transform-origin: left;
  animation: rnProgressFill 900ms ease-out 1600ms forwards;
}

.rn-startup-message {
  margin-top: 18px !important;
  color: rgba(248, 250, 252, 0.84) !important;
  font-size: 15px !important;
  text-align: center;
}

.rn-startup-auth-card {
  position: relative;
  width: min(370px, 86vw);
  padding: 26px 24px 24px;
  overflow: hidden;
  border: 1px solid rgba(157, 248, 227, 0.22);
  border-radius: 30px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.024)),
    radial-gradient(circle at 50% 0%, rgba(76, 225, 182, 0.12), transparent 48%),
    linear-gradient(180deg, rgba(3, 7, 18, 0.94), rgba(2, 6, 7, 0.86));
  box-shadow:
    0 26px 80px rgba(0, 0, 0, 0.56),
    0 0 0 1px rgba(255, 255, 255, 0.035),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 42px rgba(76, 225, 182, 0.1);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  animation: rnAuthCardIn 450ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.rn-startup-auth-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.1) 18%, transparent 36%),
    radial-gradient(circle at 12% 14%, rgba(157, 248, 227, 0.14), transparent 24%);
  transform: translateX(-42%);
  animation: rnAuthCardSheen 2200ms ease-in-out 350ms infinite;
  pointer-events: none;
}

.rn-startup-auth-card-glow {
  position: absolute;
  left: 50%;
  top: -58px;
  width: 210px;
  height: 120px;
  border-radius: 999px;
  background: rgba(76, 225, 182, 0.16);
  filter: blur(32px);
  transform: translateX(-50%);
  pointer-events: none;
}

.rn-startup-auth-badge {
  position: relative;
  z-index: 1;
  width: fit-content;
  margin: 0 auto 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid rgba(76, 225, 182, 0.25);
  background: rgba(3, 13, 18, 0.46);
  color: #9df8e3;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.rn-startup-auth-logo {
  position: relative;
  z-index: 1;
  width: 70px;
  height: 70px;
  margin: 0 auto 13px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: radial-gradient(circle, rgba(76, 225, 182, 0.12), transparent 70%);
}

.rn-startup-auth-logo img {
  width: 62px;
  height: 62px;
  object-fit: contain;
  filter: drop-shadow(0 0 16px rgba(76, 225, 182, 0.62));
}

.rn-startup-auth-title {
  position: relative;
  z-index: 1;
  color: #f8fafc !important;
  font-size: 1.35rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  text-align: center;
}

.rn-startup-auth-subtitle {
  position: relative;
  z-index: 1;
  max-width: 270px;
  margin: 6px auto 0 !important;
  color: rgba(203, 213, 225, 0.78) !important;
  font-size: 0.78rem !important;
  line-height: 1.45 !important;
  text-align: center;
}

.rn-startup-auth-steps {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.rn-startup-auth-step {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 9px 11px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
  opacity: 0;
  transform: translateY(8px);
  animation: rnAuthStepIn 260ms ease forwards;
  animation-delay: calc(var(--step-index) * 210ms);
}

.rn-startup-auth-step p {
  color: rgba(226, 232, 240, 0.94);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.rn-startup-auth-check {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #04120e;
  background: linear-gradient(135deg, #9df8e3, #4ce1b6);
  box-shadow: 0 0 18px rgba(76, 225, 182, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.rn-startup-auth-progress {
  position: relative;
  z-index: 1;
  height: 5px;
  margin-top: 20px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.18);
}

.rn-startup-auth-progress > div {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #14b8a6, #4ce1b6, #9df8e3);
  box-shadow: 0 0 18px rgba(76, 225, 182, 0.7);
  transform-origin: left;
  animation: rnAuthProgress 1200ms ease-out forwards;
}

.rn-startup-auth-route {
  position: relative;
  z-index: 1;
  margin-top: 14px !important;
  color: rgba(157, 248, 227, 0.88) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-align: center;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.login-page--mobile-dark .mobile-auth-logo-stage {
  animation: rnLoginFade 520ms ease both;
}

.login-page--mobile-dark .mobile-auth-card-stage {
  animation: rnLoginCard 620ms cubic-bezier(0.22, 1, 0.36, 1) 120ms both;
}

.login-page--mobile-dark .mobile-auth-card-stage form > * {
  animation: rnLoginField 420ms ease both;
}

.login-page--mobile-dark .mobile-auth-card-stage form > *:nth-child(1) { animation-delay: 220ms; }
.login-page--mobile-dark .mobile-auth-card-stage form > *:nth-child(2) { animation-delay: 300ms; }
.login-page--mobile-dark .mobile-auth-card-stage form > *:nth-child(3) { animation-delay: 380ms; }
.login-page--mobile-dark .mobile-auth-card-stage form > *:nth-child(4) { animation-delay: 460ms; }

.rn-hotel-card-enter {
  animation: rnHotelCardEnter 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--hotel-card-delay, 0ms);
}

.rn-dashboard-enter .rn-dashboard-part,
.mobile-app-shell > .rn-dashboard-part {
  animation: rnDashboardPart 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--dashboard-delay, 0ms);
}

@keyframes rnFadeIn {
  to { opacity: 1; }
}

@keyframes rnStartupExit {
  to { opacity: 0; transform: scale(1.02); visibility: hidden; }
}

@keyframes rnLogoSpring {
  0% { opacity: 0; transform: scale(0.7); }
  72% { opacity: 1; transform: scale(1.07); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes rnLogoFadeAtTop {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes rnDoorPulse {
  0%, 100% { opacity: 0.25; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.18); }
}

@keyframes rnSlideUp {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes rnHotelBuild {
  from { opacity: 0; transform: translateX(-50%) translateY(42px) scaleY(0.76); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scaleY(1); }
}

@keyframes rnOrbitRotate {
  to { transform: rotate(360deg); }
}

@keyframes rnProgressFill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes rnGridDrift {
  to { background-position: 42px 42px; }
}

@keyframes rnGlowBreathe {
  to { opacity: 0.6; transform: scale(1.08); }
}

@keyframes rnParticleFloat {
  0%, 100% { opacity: 0; transform: translate3d(0, 12px, 0) scale(0.8); }
  35%, 72% { opacity: 0.85; }
  50% { transform: translate3d(8px, -26px, 0) scale(1.2); }
}

@keyframes rnAuthCardIn {
  from { opacity: 0; transform: translateY(18px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes rnAuthCardSheen {
  0%, 42% { transform: translateX(-60%); opacity: 0; }
  58% { opacity: 0.9; }
  100% { transform: translateX(72%); opacity: 0; }
}

@keyframes rnAuthStepIn {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes rnAuthProgress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes rnLoginFade {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes rnLoginCard {
  from { opacity: 0; transform: translateY(34px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes rnLoginField {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes rnHotelCardEnter {
  from { opacity: 0; transform: translateY(34px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes rnDashboardPart {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .rn-startup-overlay *,
  .rn-hotel-card-enter,
  .rn-dashboard-enter .rn-dashboard-part,
  .mobile-app-shell > .rn-dashboard-part,
  .login-page--mobile-dark .mobile-auth-card-stage,
  .login-page--mobile-dark .mobile-auth-card-stage form > *,
  .login-page--mobile-dark .mobile-auth-logo-stage {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
}

/* Capacitor native shell adjustments */
:root {
  --mobile-shell-bg: #030712;
  --mobile-shell-gradient: linear-gradient(165deg, #030712 0%, #0a1a14 38%, #050505 100%);
}

html.capacitor-native,
html.capacitor-native body {
  background: var(--mobile-shell-gradient);
  background-color: var(--mobile-shell-bg);
  min-height: 100dvh;
}

.capacitor-native .container__wrap {
  padding-top: calc(50px + env(safe-area-inset-top));
}

.capacitor-native .container {
  padding: 12px;
  max-width: 100%;
}

.capacitor-native .page-layout--native {
  padding-bottom: env(safe-area-inset-bottom);
}

.capacitor-native body {
  padding-top: 0;
  padding-bottom: 0;
}

.capacitor-native .capacitor-ios body {
  -webkit-overflow-scrolling: touch;
}

.capacitor-native .sidebar,
.capacitor-native .topbar {
  padding-top: env(safe-area-inset-top);
}

.capacitor-native .login-page--mobile-dark {
  min-height: 100dvh;
  padding-top: 0;
}

.mobile-app-shell {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  background: transparent !important;
  background-color: transparent !important;
}

.mobile-app-shell .container__wrap {
  padding-top: 0;
}

.mobile-app-shell .container {
  padding: 0;
  max-width: 100%;
}

.mobile-app-shell main {
  -webkit-overflow-scrolling: touch;
}

.mobile-shell-theme,
.mobile-app-shell {
  color: #f8fafc;
}

.mobile-shell-theme .theme-light,
.mobile-app-shell.theme-light {
  --text-primary: #f8fafc;
  --text-secondary: rgba(148, 163, 184, 0.92);
}

.mobile-app-shell .dashboard-nav-title,
.mobile-app-shell .MuiTypography-h4,
.mobile-app-shell .MuiTypography-h5,
.mobile-app-shell .MuiTypography-h6 {
  color: #f8fafc !important;
}

.mobile-app-shell .main-dashboard,
.mobile-app-shell .dashboards {
  background: transparent !important;
  color: #f8fafc;
}

.mobile-app-shell .card,
.mobile-app-shell .panel,
.mobile-app-shell .table {
  background: linear-gradient(155deg, rgba(0, 0, 0, 0.72) 0%, rgba(3, 7, 18, 0.88) 100%) !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
  color: #e2e8f0 !important;
}

/* Hide scrollbars on mobile shell — scrolling still works when content overflows */
html.mobile-shell-theme,
html.mobile-shell-theme body,
.mobile-app-shell,
.mobile-app-shell *,
.mobile-route-surface,
.mobile-route-surface * {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html.mobile-shell-theme::-webkit-scrollbar,
html.mobile-shell-theme body::-webkit-scrollbar,
.mobile-app-shell::-webkit-scrollbar,
.mobile-app-shell *::-webkit-scrollbar,
.mobile-route-surface::-webkit-scrollbar,
.mobile-route-surface *::-webkit-scrollbar {
  display: none;
  width: 0 !important;
  height: 0 !important;
  background: transparent;
}

html.mobile-shell-theme,
html.mobile-shell-theme body {
  overflow: hidden;
  height: 100dvh;
  max-height: 100dvh;
  background: var(--mobile-shell-gradient);
  background-color: var(--mobile-shell-bg);
}

html.mobile-shell-theme #root {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

.mobile-app-shell .mobile-shell-graph-backdrop {
  z-index: 0;
  position: fixed;
  inset: 0;
}

.mobile-app-shell .dashboard-nav-header,
.mobile-app-shell .landing-panel-surface,
.mobile-app-shell .landing-panel-surface > .MuiBox-root {
  background: transparent !important;
  background-color: transparent !important;
}

.mobile-app-shell main {
  position: relative;
  z-index: 1;
  background: transparent !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.mobile-app-shell .mobile-route-surface > .MuiBox-root,
.mobile-app-shell .page-layout,
.mobile-app-shell .page-layout--mobile-dark,
.mobile-app-shell .main-dashboard,
.mobile-app-shell .dashboards {
  background: transparent !important;
  background-color: transparent !important;
}

.mobile-app-shell .MuiPaper-root,
.mobile-app-shell .MuiCard-root {
  background-image: linear-gradient(155deg, rgba(0, 0, 0, 0.72) 0%, rgba(3, 7, 18, 0.88) 100%) !important;
  background-color: rgba(3, 7, 18, 0.88) !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
  color: #f8fafc !important;
}

.mobile-app-shell .MuiTypography-root {
  color: inherit;
}

.mobile-app-shell .MuiTypography-h4,
.mobile-app-shell .MuiTypography-h5,
.mobile-app-shell .MuiTypography-h6 {
  color: #f8fafc !important;
}

.mobile-app-shell .MuiInputBase-root,
.mobile-app-shell .MuiOutlinedInput-root {
  background-color: rgba(15, 23, 42, 0.65) !important;
  color: #f8fafc !important;
}

.mobile-app-shell .MuiInputLabel-root {
  color: rgba(148, 163, 184, 0.9) !important;
}

.mobile-app-shell .MuiToggleButtonGroup-root .MuiToggleButton-root {
  color: rgba(148, 163, 184, 0.92);
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.mobile-app-shell .MuiToggleButtonGroup-root .MuiToggleButton-root.Mui-selected {
  background-color: rgba(76, 225, 182, 0.16) !important;
  color: #4ce1b6 !important;
}

.landing-page-shell {
  min-height: 100dvh;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  background: transparent !important;
  background-color: transparent !important;
}

.landing-page-shell main,
.landing-page-shell .landing-panel-surface {
  background: transparent !important;
  background-color: transparent !important;
}

/* Keep portaled drawers/dialogs inside the mobile frame (notch + home indicator). */
html.capacitor-native .MuiDrawer-root > .MuiPaper-root,
html.mobile-shell-theme .MuiDrawer-root > .MuiPaper-root {
  top: env(safe-area-inset-top, 0px) !important;
  height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
  box-sizing: border-box;
}

html.capacitor-native .MuiDrawer-root > .MuiPaper-root.MuiDrawer-paperAnchorBottom,
html.mobile-shell-theme .MuiDrawer-root > .MuiPaper-root.MuiDrawer-paperAnchorBottom {
  top: auto !important;
  bottom: env(safe-area-inset-bottom, 0px) !important;
  height: auto !important;
  max-height: calc(92dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
}

html.capacitor-native .MuiDialog-root .MuiDialog-paperFullScreen,
html.mobile-shell-theme .MuiDialog-root .MuiDialog-paperFullScreen {
  top: env(safe-area-inset-top, 0px) !important;
  height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
  margin: 0 !important;
  box-sizing: border-box;
}

html.capacitor-native .MuiDrawer-root,
html.mobile-shell-theme .MuiDrawer-root,
html.capacitor-native .MuiDialog-root,
html.mobile-shell-theme .MuiDialog-root {
  z-index: 1700 !important;
}

/* Native tablet (iPad / large Android) — desktop chrome with safe areas */
html.capacitor-tablet.capacitor-native {
  background: #12151c;
}

html.capacitor-tablet.capacitor-native body {
  background: #12151c;
}

html.capacitor-tablet.capacitor-native .MuiDrawer-paper {
  padding-top: calc(60px + env(safe-area-inset-top)) !important;
}