html,
body {
  background:
    linear-gradient(
      105deg,
      #2a1d19 0%,
      #49352f 34%,
      #170f0d 70%,
      #050505 100%
    ) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-color: #291e18 !important;
}

.login-page {
  padding-top: calc(36px + env(safe-area-inset-top, 0px));
}

/* Authenticated PWA only: dark header region, light-gray canvas below it.
   Keep the login gradient and the existing header/navigation layout untouched. */
html:has(body.bg-gray-100),
body.bg-gray-100 {
  background-color: #f3f4f6 !important;
  background-size: 100% var(--web-header-height, 124px) !important;
}

/* Authenticated header only: blend from the opaque iOS status-bar color
   into the existing ClockingPro brown-to-black horizontal gradient. */
body.bg-gray-100 .ios-web-header {
  background-image:
    linear-gradient(to bottom, #291e18 0px, rgba(41,30,24,0) 64px),
    var(--web-header-gradient) !important;
  background-size: 100% 100%, 100% 100% !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}