/* ============================================================
   v61: PWA fixed modals + bottom nav hard attach + compact app typography
   ============================================================ */

/* ---------- Mobile/PWA compact typography across all pages ---------- */
@media(max-width:860px){
  html{
    -webkit-text-size-adjust:100%!important;
    text-size-adjust:100%!important;
  }

  body{
    font-size:14px!important;
    line-height:1.35!important;
    overflow-x:hidden!important;
    background:#f3f7fc!important;
  }

  h1{font-size:26px!important;line-height:1.04!important;letter-spacing:-.045em!important;}
  h2{font-size:22px!important;line-height:1.08!important;letter-spacing:-.035em!important;}
  h3{font-size:18px!important;line-height:1.12!important;}

  .page-title,
  .topbar-title,
  .hero-title,
  .salary-v5-title,
  .salary-v5-hero h1,
  .admin-hero h1,
  .card h2,
  .section-title{
    font-size:22px!important;
    line-height:1.08!important;
    letter-spacing:-.035em!important;
  }

  .topbar-subtitle,
  .page-subtitle,
  .hero-subtitle,
  .salary-v5-hero p,
  .card p,
  .muted,
  .hint,
  .salary-v5-card__head p{
    font-size:13px!important;
    line-height:1.34!important;
  }

  .label,
  label,
  .salary-v5-label,
  .field label,
  .form-label{
    font-size:13px!important;
    line-height:1.22!important;
    font-weight:800!important;
  }

  .btn,
  button,
  .salary-v5-btn,
  .custom-select__trigger,
  .salary-v5-select__trigger,
  input,
  textarea,
  select,
  .salary-v5-input,
  .salary-v5-textarea{
    font-size:15px!important;
  }

  .salary-v5-input,
  .salary-v5-select__trigger,
  .custom-select__trigger,
  input:not([type="checkbox"]):not([type="radio"]),
  textarea,
  select{
    min-height:48px!important;
    border-radius:16px!important;
  }

  .card,
  .salary-v5-card,
  .panel,
  .stat-card{
    border-radius:24px!important;
  }

  .mobile-bottom a{
    font-size:12px!important;
  }

  .mobile-bottom svg{
    width:24px!important;
    height:24px!important;
  }
}

/* ---------- Bottom nav: hard attached to physical bottom ---------- */
@media(max-width:860px){
  .mobile-bottom,
  .mobile-bottom.is-pwa-fixed{
    position:fixed!important;
    left:0!important;
    right:0!important;
    top:auto!important;
    bottom:-2px!important;
    width:100vw!important;
    max-width:100vw!important;
    min-height:calc(94px + env(safe-area-inset-bottom, 0px))!important;
    height:calc(94px + env(safe-area-inset-bottom, 0px))!important;
    padding:7px 8px calc(20px + 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 -14px 34px rgba(15,23,42,.10)!important;
    -webkit-backdrop-filter:saturate(160%) blur(18px)!important;
    backdrop-filter:saturate(160%) blur(18px)!important;
    contain:layout paint style!important;
  }

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

  .mobile-bottom a,
  .mobile-bottom a.active{
    min-height:62px!important;
    height:62px!important;
    padding:6px 4px!important;
    border-radius:17px!important;
  }

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

  body.pvz-select-v50-open .mobile-bottom,
  body.pvz-picker-v50-open .mobile-bottom,
  body.pvz-v61-modal-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;
  }
}

/* ---------- Mandatory fixed modals: only modal content scrolls ---------- */
:root{
  --pvz-v61-vh:100dvh;
  --pvz-v61-top:0px;
}

html.pvz-v61-modal-open,
body.pvz-v61-modal-open{
  overflow:hidden!important;
  overscroll-behavior:none!important;
}

body.pvz-v61-modal-open{
  touch-action:none!important;
}

/* Backdrop is fixed to visible viewport */
.modal-backdrop,
.salary-v5-modal-backdrop,
.pvz-modal-backdrop,
.pvz-confirm-backdrop,
.pvz-confirm-overlay,
.confirm-backdrop{
  position:fixed!important;
  left:0!important;
  right:0!important;
  top:var(--pvz-v61-top)!important;
  bottom:auto!important;
  width:100vw!important;
  height:var(--pvz-v61-vh)!important;
  min-height:var(--pvz-v61-vh)!important;
  z-index:900000!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:16px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
  touch-action:none!important;
  background:rgba(15,23,42,.43)!important;
  -webkit-backdrop-filter:blur(10px)!important;
  backdrop-filter:blur(10px)!important;
}

.modal,
.salary-v5-modal,
.modal-card,
.pvz-modal,
.pvz-confirm,
.confirm-dialog,
dialog[open]{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  transform:none!important;
  width:min(760px, calc(100vw - 32px))!important;
  max-width:calc(100vw - 32px)!important;
  max-height:calc(var(--pvz-v61-vh) - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))!important;
  margin:0!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  border-radius:26px!important;
  background:#fff!important;
  box-sizing:border-box!important;
  overscroll-behavior:contain!important;
  touch-action:auto!important;
  box-shadow:0 28px 86px rgba(15,23,42,.26)!important;
}

/* Modal header fixed */
.modal-head,
.modal-header,
.salary-v5-modal__head,
.pvz-modal__head,
.pvz-confirm__head{
  flex:0 0 auto!important;
  position:relative!important;
  top:auto!important;
  z-index:5!important;
  background:#fff!important;
  border-bottom:1px solid #e8eef7!important;
}

/* Modal body is the only scroll area */
.modal-body,
.modal-content,
.salary-v5-modal__body,
.pvz-modal__body,
.pvz-confirm__body{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow:auto!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior:contain!important;
  touch-action:pan-y!important;
  box-sizing:border-box!important;
}

/* Forms cannot overflow horizontally */
.modal form,
.modal .form-grid,
.modal>.form-grid,
.salary-v5-form-grid,
.form-grid{
  min-width:0!important;
  max-width:100%!important;
  width:100%!important;
  box-sizing:border-box!important;
}

.modal form > *,
.salary-v5-form-grid > *,
.form-grid > *{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}

/* Footer/actions fixed below modal body */
.modal-actions,
.salary-v5-modal__actions,
.pvz-modal__actions,
.pvz-confirm__actions{
  flex:0 0 auto!important;
  position:relative!important;
  bottom:auto!important;
  z-index:6!important;
  background:#fff!important;
  border-top:1px solid #eef2f7!important;
  padding:12px 18px calc(14px + env(safe-area-inset-bottom,0px))!important;
  margin:0!important;
  box-sizing:border-box!important;
}

/* Avoid iOS zoom and field overflow */
.modal input,
.modal textarea,
.modal select,
.salary-v5-modal input,
.salary-v5-modal textarea,
.salary-v5-modal select,
.modal-card input,
.modal-card textarea,
.modal-card select,
.pvz-modal input,
.pvz-modal textarea,
.pvz-modal select{
  font-size:16px!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}

/* Salary shift modal compact/fixed layout */
.salary-v5-modal--shift .salary-v5-modal__body{
  display:flex!important;
  flex-direction:column!important;
  padding:0!important;
  overflow:hidden!important;
  min-height: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:16px 18px 16px!important;
  box-sizing:border-box!important;
}

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

.salary-v5-modal--shift .salary-v5-form-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
  align-items:start!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-choice{
  grid-column:1 / -1!important;
}

/* New add / not add buttons */
.salary-v5-modal--shift .salary-v5-period-choice{
  width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
  box-sizing:border-box!important;
}

.salary-v5-modal--shift .salary-v5-period-choice__option{
  position:relative!important;
  min-width:0!important;
  width:100%!important;
  min-height:74px!important;
  display:grid!important;
  grid-template-columns:30px minmax(0,1fr)!important;
  align-items:center!important;
  gap:9px!important;
  padding:11px 12px!important;
  border-radius:18px!important;
  border:1px solid #dbe7ff!important;
  background:#f8fbff!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  cursor:pointer!important;
}

.salary-v5-modal--shift .salary-v5-period-choice__option input{
  position:absolute!important;
  opacity:0!important;
  pointer-events:none!important;
}

.salary-v5-modal--shift .salary-v5-period-choice__icon{
  width:30px!important;
  height:30px!important;
  border-radius:11px!important;
  display:grid!important;
  place-items:center!important;
  background:#fff!important;
  border:2px solid #cfd8e7!important;
  color:transparent!important;
  font-size:18px!important;
  font-weight:900!important;
}

.salary-v5-modal--shift .salary-v5-period-choice__text{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:3px!important;
}

.salary-v5-modal--shift .salary-v5-period-choice__text strong{
  font-size:15px!important;
  line-height:1.13!important;
  font-weight:900!important;
  color:#172033!important;
  overflow-wrap:anywhere!important;
}

.salary-v5-modal--shift .salary-v5-period-choice__text small{
  font-size:12px!important;
  line-height:1.22!important;
  color:#667085!important;
  overflow-wrap:anywhere!important;
}

.salary-v5-modal--shift .salary-v5-period-choice__option--include:has(input:checked),
.salary-v5-modal--shift .salary-v5-period-choice__option.is-checked.salary-v5-period-choice__option--include{
  border-color:#b9d0ff!important;
  background:#eef4ff!important;
}

.salary-v5-modal--shift .salary-v5-period-choice__option--include:has(input:checked) .salary-v5-period-choice__icon,
.salary-v5-modal--shift .salary-v5-period-choice__option.is-checked.salary-v5-period-choice__option--include .salary-v5-period-choice__icon{
  background:#2f6bff!important;
  border-color:#2f6bff!important;
  color:#fff!important;
}

.salary-v5-modal--shift .salary-v5-period-choice__option--exclude{
  border-color:#ffd7d4!important;
  background:#fff7f6!important;
}

.salary-v5-modal--shift .salary-v5-period-choice__option--exclude:has(input:checked),
.salary-v5-modal--shift .salary-v5-period-choice__option.is-checked.salary-v5-period-choice__option--exclude{
  border-color:#fda29b!important;
  background:#fff0ef!important;
}

.salary-v5-modal--shift .salary-v5-period-choice__option--exclude:has(input:checked) .salary-v5-period-choice__icon,
.salary-v5-modal--shift .salary-v5-period-choice__option.is-checked.salary-v5-period-choice__option--exclude .salary-v5-period-choice__icon{
  background:#d92d20!important;
  border-color:#d92d20!important;
  color:#fff!important;
}

.salary-v5-modal--shift .salary-v5-period-toggle{
  display:none!important;
}

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

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

@media(max-width:860px){
  .modal-backdrop,
  .salary-v5-modal-backdrop,
  .pvz-modal-backdrop,
  .pvz-confirm-backdrop,
  .pvz-confirm-overlay,
  .confirm-backdrop{
    padding:calc(10px + env(safe-area-inset-top,0px)) 10px calc(10px + env(safe-area-inset-bottom,0px))!important;
  }

  .modal,
  .salary-v5-modal,
  .modal-card,
  .pvz-modal,
  .pvz-confirm,
  .confirm-dialog,
  dialog[open]{
    width:calc(100vw - 20px)!important;
    max-width:calc(100vw - 20px)!important;
    max-height:calc(var(--pvz-v61-vh) - 20px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))!important;
    border-radius:26px!important;
  }

  .modal-head,
  .salary-v5-modal__head,
  .modal-header{
    padding:16px 16px 12px!important;
  }

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

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

  .salary-v5-modal--shift .salary-v5-period-choice{
    grid-template-columns:1fr!important;
    gap:9px!important;
  }

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

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