/* 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:
    radial-gradient(circle at 50% 28%, rgba(76, 225, 182, 0.18), transparent 38%),
    linear-gradient(180deg, #030712 0%, #06130f 54%, #020403 100%);
  color: #f8fafc;
  isolation: isolate;
}

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

.rn-startup-splash {
  position: relative;
  z-index: 1;
  width: min(100%, 360px);
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top, 0px) 28px env(safe-area-inset-bottom, 0px);
  opacity: 0;
  gap: 13px;
  animation: rnFadeIn 180ms ease forwards;
}

.rn-startup-logo-wrap {
  position: relative;
  width: 118px;
  height: 118px;
  display: grid;
  place-items: center;
  border-radius: 34px;
}

.rn-startup-logo-glow {
  position: absolute;
  inset: 18px;
  border-radius: 32px;
  background: rgba(76, 225, 182, 0.28);
  filter: blur(24px);
  animation: rnLogoBreathe 900ms ease-in-out infinite alternate;
}

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

.rn-startup-progress {
  width: 166px;
  max-width: 100%;
  margin-top: 0;
}

.rn-startup-progress-bar {
  height: 3px !important;
  border-radius: 999px;
  overflow: hidden;
  background-color: rgba(148, 163, 184, 0.18) !important;
  box-shadow: none;
}

.rn-startup-progress-bar .MuiLinearProgress-bar {
  border-radius: inherit;
  background: linear-gradient(90deg, #4ce1b6 0%, #a7f3d0 100%);
}

.rn-startup-progress-bar .MuiLinearProgress-bar2Indeterminate {
  display: none;
}

.rn-startup-message {
  margin-top: 13px !important;
  color: rgba(226, 232, 240, 0.78) !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  text-align: center;
}

@keyframes rnLogoBreathe {
  from {
    opacity: 0.56;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1.06);
  }
}

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

@keyframes rnStartupExit {
  to {
    opacity: 0;
    transform: scale(0.99);
  }
}

/* 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;
}

html.capacitor-android {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.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;
}