/**
 * Shared app phone-frame — matches login page atmosphere.
 * Loaded on all client pages.
 */
:root {
  --app-frame-max: 480px;
  --app-frame-radius: 20px;
  --app-frame-pad: 14px;
  --app-frame-shadow: 0 24px 60px rgba(18, 18, 18, 0.16);
  --app-frame-border: 1px solid rgba(18, 18, 18, 0.08);
  --app-atmosphere:
    radial-gradient(1200px 700px at 12% -10%, rgba(14, 107, 92, 0.20), transparent 55%),
    radial-gradient(900px 600px at 110% 20%, rgba(18, 18, 18, 0.14), transparent 50%),
    radial-gradient(700px 500px at 50% 120%, rgba(196, 165, 116, 0.16), transparent 55%),
    linear-gradient(160deg, #ebe7e1 0%, #d9e2e0 42%, #cfd8dc 100%);
}

html {
  min-height: 100%;
  background: var(--app-atmosphere);
  background-attachment: fixed;
}

body {
  min-height: 100vh !important;
  background: var(--app-atmosphere) !important;
  background-attachment: fixed !important;
  margin: 0 !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.32;
  background-image:
    linear-gradient(rgba(18, 18, 18, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 18, 18, 0.04) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse at center, #000 35%, transparent 80%);
}

/* Main app column */
#app,
.register-container,
.login-shell {
  position: relative;
  z-index: 1;
}

#app {
  max-width: var(--app-frame-max) !important;
  width: 100% !important;
  margin: var(--app-frame-pad) auto !important;
  min-height: calc(100vh - (var(--app-frame-pad) * 2)) !important;
  border-radius: var(--app-frame-radius) !important;
  box-shadow: var(--app-frame-shadow) !important;
  border: var(--app-frame-border) !important;
  overflow-x: hidden;
  background: #f5f7fa !important;
  box-sizing: border-box !important;
}

/* Sticky header sits inside frame */
#app .modern-app-header-wrap {
  border-radius: calc(var(--app-frame-radius) - 1px) calc(var(--app-frame-radius) - 1px) 0 0;
}

/* Bottom nav aligns to frame */
.modern-footer-container,
.app-footer-wrap {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  max-width: var(--app-frame-max) !important;
  bottom: var(--app-frame-pad) !important;
  z-index: 1000 !important;
  box-sizing: border-box !important;
  padding: 0 !important;
}

.modern-footer {
  border-radius: 0 0 calc(var(--app-frame-radius) - 1px) calc(var(--app-frame-radius) - 1px) !important;
}

/* Register — same framed shell */
.register-container {
  max-width: var(--app-frame-max) !important;
  margin: var(--app-frame-pad) auto !important;
  padding: 28px 20px 36px !important;
  background: rgba(255, 252, 247, 0.94) !important;
  border-radius: var(--app-frame-radius) !important;
  box-shadow: var(--app-frame-shadow) !important;
  border: var(--app-frame-border) !important;
  box-sizing: border-box !important;
  min-height: calc(100vh - (var(--app-frame-pad) * 2));
}

.register-container .company-logo-img {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  width: min(220px, 70%) !important;
}

/* Soften pages that force flat body colors */
body.bg-\[\#000\],
body[style] {
  background: var(--app-atmosphere) !important;
}

@media (max-width: 360px) {
  :root {
    --app-frame-pad: 8px;
    --app-frame-radius: 14px;
  }
}