
/* ============================================================
   v59: safe PWA splash + modal buttons/fields + bottom nav seal
   Splash is non-blocking and auto-fades by CSS even if JS fails.
   ============================================================ */

:root{
  --pvz-v59-vh:100dvh;
  --pvz-v59-top:0px;
}

/* ---------- Safe app-like startup splash ---------- */
.pvz-app-splash{
  position:fixed;
  inset:0;
  z-index:2147483600;
  display:grid;
  place-items:center;
  pointer-events:none!important;
  background:
    radial-gradient(circle at 50% 18%, rgba(47,107,255,.18), transparent 34%),
    linear-gradient(180deg,#f8fbff 0%,#edf4fc 100%);
  opacity:1;
  transition:opacity .42s ease, visibility .42s ease;
  animation:pvzSplashAutoFade 2.2s ease forwards;
}

.pvz-app-splash.is-hidden{
  opacity:0!important;
  visibility:hidden!important;
}

.pvz-app-splash__card{
  width:min(78vw, 340px);
  min-height:178px;
  border-radius:34px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  background:rgba(255,255,255,.86);
  box-shadow:0 30px 90px rgba(15,23,42,.16), inset 0 0 0 1px rgba(219,229,242,.94);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  transform:translateY(0) scale(1);
  animation:pvzSplashCard 1.35s cubic-bezier(.2,.8,.2,1) infinite alternate;
}

.pvz-app-splash__logo{
  position:relative;
  width:74px;
  height:74px;
  border-radius:24px;
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(135deg,#2f6bff,#1952d8);
  box-shadow:0 18px 40px rgba(47,107,255,.34);
  overflow:hidden;
}

.pvz-app-splash__logo::before{
  content:"";
  position:absolute;
  inset:-35%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);
  transform:translateX(-90%) rotate(18deg);
  animation:pvzSplashShine 1.45s ease-in-out infinite;
}

.pvz-app-splash__logo svg{
  position:relative;
  width:38px;
  height:38px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.1;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.pvz-app-splash__title{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  text-align:center;
}

.pvz-app-splash__title strong{
  color:#172033;
  font:900 25px/1.05 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  letter-spacing:-.04em;
}

.pvz-app-splash__title span{
  color:#667085;
  font:700 13px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}

.pvz-app-splash__bar{
  width:132px;
  height:6px;
  border-radius:999px;
  overflow:hidden;
  background:#e4ebf6;
}

.pvz-app-splash__bar i{
  display:block;
  width:42%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#2f6bff,#7aa2ff);
  animation:pvzSplashBar 1.15s ease-in-out infinite;
}

@keyframes pvzSplashAutoFade{
  0%,72%{opacity:1;visibility:visible}
  100%{opacity:0;visibility:hidden}
}
@keyframes pvzSplashCard{
  from{transform:translateY(3px) scale(.992)}
  to{transform:translateY(-3px) scale(1)}
}
@keyframes pvzSplashShine{
  0%{transform:translateX(-95%) rotate(18deg)}
  54%,100%{transform:translateX(95%) rotate(18deg)}
}
@keyframes pvzSplashBar{
  0%{transform:translateX(-115%)}
  55%,100%{transform:translateX(250%)}
}

/* ---------- Bottom nav: sealed to bottom ---------- */
@media(max-width:860px){
  html,
  body{
    background:#f3f7fc!important;
    overflow-x:hidden!important;
  }

  .mobile-bottom,
  .mobile-bottom.is-pwa-fixed{
    position:fixed!important;
    left:0!important;
    right:0!important;
    top:auto!important;
    bottom:0!important;
    width:100vw!important;
    max-width:100vw!important;
    min-height:calc(90px + env(safe-area-inset-bottom, 0px))!important;
    height:calc(90px + env(safe-area-inset-bottom, 0px))!important;
    padding:8px 8px calc(18px + env(safe-area-inset-bottom, 0px))!important;
    margin:0!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    align-items:center!important;
    transform:translate3d(0,0,0)!important;
    -webkit-transform:translate3d(0,0,0)!important;
    z-index:2147483000!important;
    background:#fff!important;
    border-top:1px solid rgba(219,229,242,.95)!important;
    box-shadow:0 -12px 34px rgba(15,23,42,.10)!important;
    -webkit-backdrop-filter:saturate(160%) blur(18px)!important;
    backdrop-filter:saturate(160%) blur(18px)!important;
  }

  .mobile-bottom::before{
    content:"";
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:-120px!important;
    height:122px!important;
    background:#fff!important;
    pointer-events:none!important;
    z-index:-1!important;
  }

  .mobile-bottom a,
  .mobile-bottom a.active{
    min-height:64px!important;
    height:64px!important;
    padding:7px 4px!important;
    border-radius:18px!important;
  }

  .main{
    padding-bottom:calc(142px + env(safe-area-inset-bottom, 0px))!important;
  }

  body.pvz-select-v50-open .mobile-bottom,
  body.pvz-picker-v50-open .mobile-bottom,
  body.pvz-v57-modal-open .mobile-bottom,
  body.modal-is-open .mobile-bottom,
  body.lock-scroll .mobile-bottom,
  body.pvz-dialog-open .mobile-bottom{
    display:none!important;
  }
}

/* ---------- Salary shift modal layout ---------- */
.salary-v5-modal--shift{
  overflow:hidden!important;
}

.salary-v5-modal--shift .salary-v5-modal__body{
  display:flex!important;
  flex-direction:column!important;
  min-height:0!important;
  overflow:hidden!important;
  padding:0!important;
}

.salary-v5-modal--shift #salaryV5ShiftForm{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow:auto!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior:contain!important;
  padding:18px 20px 18px!important;
  box-sizing:border-box!important;
  width:100%!important;
  max-width:100%!important;
}

.salary-v5-modal--shift .salary-v5-modal__actions--fixed{
  flex:0 0 auto!important;
  position:relative!important;
  bottom:auto!important;
  display:flex!important;
  gap:10px!important;
  justify-content:flex-end!important;
  padding:14px 20px calc(16px + env(safe-area-inset-bottom, 0px))!important;
  margin:0!important;
  border-top:1px solid #eef2f7!important;
  background:#fff!important;
  box-shadow:0 -12px 28px rgba(15,23,42,.06)!important;
  z-index:5!important;
  box-sizing:border-box!important;
}

.salary-v5-modal--shift .salary-v5-modal__actions--fixed .salary-v5-btn{
  min-height:50px!important;
  margin:0!important;
}

/* Full containment: no field can leave modal frame */
.salary-v5-modal--shift .salary-v5-form-grid{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
  box-sizing:border-box!important;
}

.salary-v5-modal--shift .salary-v5-form-grid > *,
.salary-v5-modal--shift .salary-v5-field,
.salary-v5-modal--shift .salary-v5-input-wrap,
.salary-v5-modal--shift .salary-v5-input,
.salary-v5-modal--shift .salary-v5-textarea,
.salary-v5-modal--shift .salary-v5-select,
.salary-v5-modal--shift .salary-v5-select__trigger,
.salary-v5-modal--shift .custom-select,
.salary-v5-modal--shift .custom-select__trigger{
  min-width:0!important;
  max-width:100%!important;
  width:100%!important;
  box-sizing:border-box!important;
}

.salary-v5-modal--shift .salary-v5-form-grid > .full,
.salary-v5-modal--shift .salary-v5-field.full,
.salary-v5-modal--shift .salary-v5-field--full,
.salary-v5-modal--shift .salary-v5-period-toggle{
  grid-column:1 / -1!important;
}

.salary-v5-modal--shift .salary-v5-period-toggle{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr)!important;
  align-items:start!important;
  gap:12px!important;
  width:100%!important;
  max-width:100%!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}

.salary-v5-modal--shift .salary-v5-period-toggle span,
.salary-v5-modal--shift .salary-v5-period-toggle strong,
.salary-v5-modal--shift .salary-v5-period-toggle small{
  min-width:0!important;
  max-width:100%!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}

.salary-v5-modal--shift .salary-v5-period-toggle input{
  flex:0 0 auto!important;
  width:26px!important;
  height:26px!important;
  margin-top:2px!important;
}

.salary-v5-modal--shift input[type="time"]{
  text-align:left!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  padding-left:14px!important;
  padding-right:14px!important;
}

.salary-v5-modal--shift input[type="time"]::-webkit-date-and-time-value{
  text-align:left!important;
}

.salary-v5-modal--shift .salary-v5-input,
.salary-v5-modal--shift .salary-v5-textarea,
.salary-v5-modal--shift .salary-v5-select__trigger,
.salary-v5-modal--shift .custom-select__trigger{
  font-size:16px!important;
  min-height:52px!important;
}

.salary-v5-modal--shift .salary-v5-label{
  font-size:14px!important;
  line-height:1.25!important;
}

@media(max-width:860px){
  .salary-v5-modal--shift{
    max-height:calc(var(--pvz-v57-vh, 100dvh) - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))!important;
  }

  .salary-v5-modal--shift .salary-v5-modal__head{
    padding:18px 18px 14px!important;
  }

  .salary-v5-modal--shift #salaryV5ShiftForm{
    padding:16px 16px 18px!important;
  }

  .salary-v5-modal--shift .salary-v5-form-grid{
    grid-template-columns:1fr!important;
    gap:13px!important;
  }

  .salary-v5-modal--shift .salary-v5-modal__actions--fixed{
    flex-direction:column!important;
    align-items:stretch!important;
    padding:12px 16px calc(16px + env(safe-area-inset-bottom, 0px))!important;
  }

  .salary-v5-modal--shift .salary-v5-modal__actions--fixed .salary-v5-btn{
    width:100%!important;
  }

  .salary-v5-modal--shift .salary-v5-period-toggle{
    padding:14px!important;
  }

  .salary-v5-modal--shift .salary-v5-period-toggle strong{
    font-size:20px!important;
    line-height:1.18!important;
  }

  .salary-v5-modal--shift .salary-v5-period-toggle small{
    font-size:16px!important;
    line-height:1.32!important;
  }
}

body.pvz-select-v50-open .salary-v5-modal--shift .salary-v5-modal__actions--fixed{
  opacity:.22!important;
  pointer-events:none!important;
}
