:root{
  --primary-dark:#a46026;--primary-light:#d18237;--secondary-dark:#1b4a19;--secondary-light:#256f22;
  --accent-dark:#1f6f8b;--accent-light:#53b8bb;--alert-success:#3a8337;--alert-warning:#cf9a24;--alert-error:#b33f33;
  --white:#fff;--grey:#a3a3a3;--light-grey:#e9e9e9;--text:#2e2e2e;--black:#181818;
  --bg-primary:#d1823740;--bg-secondary:#256f2240;--bg-accent:#1f6f8b40;
  --ft-logo:"Helvetica Now","Helvetica Neue",Arial,sans-serif;--ft-primary:"Nunito Sans","Inter","Helvetica Neue",Arial,sans-serif;
  --shadow-card:0 1.25rem 3.25rem rgba(27,74,25,.14);--shadow-soft:0 .75rem 1.75rem rgba(24,24,24,.08);
}
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent;min-width:0}
html,body{margin:0;min-height:100%;height:100%;max-width:100%;overflow-x:hidden;touch-action:manipulation;-webkit-text-size-adjust:100%;font-family:var(--ft-primary);color:var(--text);background:radial-gradient(circle at top left,rgba(209,130,55,.22),transparent 35%),radial-gradient(circle at bottom right,rgba(37,111,34,.20),transparent 42%),#f6f8f4}
body{min-height:100vh;min-height:100dvh;overscroll-behavior:none;-webkit-user-select:none;user-select:none}
button,input,textarea{font:inherit;max-width:100%;-webkit-user-select:text;user-select:text}button{cursor:pointer;border:0;-webkit-user-select:none;user-select:none}button:disabled{opacity:.58;cursor:not-allowed}button:not(:disabled):active{transform:scale(.98)}[hidden]{display:none!important}
.appShell{width:min(100%,48rem);max-width:100%;min-height:100vh;min-height:100dvh;margin:0 auto;padding:calc(env(safe-area-inset-top) + .625rem) .875rem calc(env(safe-area-inset-bottom) + 6.25rem);overflow-x:hidden;display:flex;flex-direction:column}
.appHeader{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:4.75rem;padding:.5rem 0 .75rem;backdrop-filter:blur(1rem);background:linear-gradient(to bottom,rgba(246,248,244,.94),rgba(246,248,244,.62))}
.brandMark{display:flex;align-items:center;gap:.75rem;background:transparent;padding:0;text-align:left;color:inherit;min-width:0;overflow:visible}.brandMark__logo{width:3.375rem;height:3.375rem;object-fit:contain;flex:0 0 auto;filter:drop-shadow(0 .375rem .75rem rgba(0,0,0,.14))}.brandMark__copy{display:grid;gap:.15rem;min-width:0}.brandMark__eyebrow,.eyebrow,.label{display:block;color:#687164;font-size:.6875rem;line-height:1.1;font-weight:900;text-transform:uppercase;letter-spacing:.12em}.brandMark__title{font-family:var(--ft-logo);font-size:clamp(1.55rem,7vw,2.25rem);line-height:1;color:var(--secondary-dark);letter-spacing:-.06em;white-space:nowrap}
.headerStatus{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem .7rem;border-radius:999rem;background:rgba(255,255,255,.74);box-shadow:var(--shadow-soft);color:var(--secondary-dark);font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;font-weight:1000;flex:0 0 auto}#headerStatusDot{width:.56rem;height:.56rem;border-radius:999rem;background:var(--alert-warning)}#headerStatusDot.is-ok{background:var(--alert-success)}#headerStatusDot.is-bad{background:var(--alert-error)}
.main{flex:1 1 auto;display:grid;align-items:stretch;max-width:100%;overflow-x:hidden}.screen,.appPage{display:grid;gap:.875rem;max-width:100%;overflow-x:hidden;align-content:start;min-height:calc(100dvh - 12rem)}.screen{animation:pageIn .24s ease both}.screenInstall,.screenPair{min-height:calc(100dvh - 7rem);align-content:center}@keyframes pageIn{from{opacity:0;transform:translateX(.875rem)}to{opacity:1;transform:translateX(0)}}
.panelCard,.heroCard,.clockPanel,.statusStrip,.employeePanel,.queueInfoCard,.queueTips,.todaySummary,.historyList,.serviceGrid button,.quickGrid button{background:rgba(255,255,255,.80);border:1px solid rgba(255,255,255,.85);box-shadow:var(--shadow-card);border-radius:1.75rem;padding:1.125rem}.panelCard h1,.panelCard h2,.pageTitle h2,.heroCard h2{margin:.25rem 0;color:var(--secondary-dark);letter-spacing:-.045em;line-height:1.05}.panelCard p,.pageTitle p,.queueTips li,.quickGrid span,.serviceGrid span{color:#677063;line-height:1.45}.panelCard--center{text-align:center}.installLogo{width:9rem;height:9rem;object-fit:contain;margin:0 auto .75rem;display:block}
.bigButton,.button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:999rem;font-weight:1000;letter-spacing:-.02em;transition:.18s ease}.bigButton{width:100%;min-height:3.5rem;padding:1rem 1.25rem;font-size:1.05rem}.button{padding:.8rem 1rem;background:rgba(255,255,255,.9);color:var(--secondary-dark);box-shadow:var(--shadow-soft)}.bigButton--green{background:linear-gradient(135deg,var(--secondary-light),var(--secondary-dark));color:var(--white);box-shadow:0 .875rem 1.75rem rgba(27,74,25,.24)}.button--soft{background:#fff;color:var(--secondary-dark)}.button--danger{background:#fff3f1;color:var(--alert-error)}.is-loading{position:relative;pointer-events:none;filter:saturate(.7)}
.helpBox{margin-top:1rem;text-align:left;background:#f7f3ec;border:1px solid rgba(209,130,55,.18);border-radius:1.25rem;padding:1rem}.helpBox ol{margin:.5rem 0 0;padding-left:1.25rem}.securityFacts{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0}.securityFacts span{padding:.45rem .7rem;border-radius:999rem;background:rgba(37,111,34,.10);color:var(--secondary-dark);font-size:.75rem;font-weight:900}
.scannerShell{margin-top:1rem}.scannerTop{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.scannerTop button{background:#fff;border-radius:999rem;padding:.5rem .8rem;color:var(--alert-error);font-weight:900}.scannerBox{position:relative;overflow:hidden;border-radius:1.5rem;background:#111;min-height:16rem}.scannerBox video,#qr-reader-runtime{width:100%!important;min-height:16rem}.scannerFrame{position:absolute;inset:2rem;border:.2rem solid rgba(255,255,255,.8);border-radius:1.5rem;pointer-events:none}.scannerHint{font-size:.85rem}.manualPairBox{margin-top:1rem}.manualPairBox textarea{width:100%;border:1px solid var(--light-grey);border-radius:1rem;padding:.85rem;resize:vertical;background:#fff;margin:.5rem 0 1rem}
.heroCard{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:linear-gradient(135deg,rgba(255,255,255,.86),rgba(37,111,34,.12))}.heroCard h2{font-size:clamp(1.7rem,8vw,2.75rem)}.timeOrb{width:7rem;height:7rem;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 20%,#fff,var(--bg-secondary));color:var(--secondary-dark);font-weight:1000;box-shadow:inset 0 0 0 .4rem rgba(255,255,255,.65),var(--shadow-soft)}
.tapGrid{display:grid;grid-template-columns:1fr 1fr;gap:.875rem}.tapButton{min-height:10rem;border-radius:2rem;padding:1rem;color:#fff;box-shadow:var(--shadow-card);display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;text-align:left;overflow:hidden;position:relative}.tapButton span{font-size:1.5rem;font-weight:1000;letter-spacing:-.05em}.tapButton small{opacity:.88;font-weight:800}.tapButton::before{content:"";position:absolute;width:8rem;height:8rem;border-radius:50%;background:rgba(255,255,255,.14);right:-2rem;top:-2rem}.tapButton--in{background:linear-gradient(135deg,var(--secondary-light),var(--secondary-dark))}.tapButton--out{background:linear-gradient(135deg,var(--primary-light),var(--primary-dark))}.tapButton--toggle{grid-column:1/-1;min-height:6rem;background:linear-gradient(135deg,var(--accent-light),var(--accent-dark))}
.statusStrip{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.statusStrip strong{display:block;margin-top:.25rem;color:var(--secondary-dark)}.quickGrid,.serviceGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}.quickGrid button,.serviceGrid button{text-align:left;color:var(--secondary-dark)}.quickGrid b,.serviceGrid b{display:block;font-size:1rem}.quickGrid span,.serviceGrid span{display:block;margin-top:.25rem;font-size:.78rem}
.pageTitle{padding:.25rem .25rem}.historyToolbar,.queueActions,.diagActions{display:flex;gap:.6rem;flex-wrap:wrap}.todaySummary{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.summaryBox{padding:1rem;border-radius:1.25rem;background:#fff}.summaryBox strong{display:block;color:var(--secondary-dark);font-size:1.25rem}.historyList,.queueList{display:grid;gap:.65rem}.listItem{display:flex;align-items:center;justify-content:space-between;gap:.75rem;background:#fff;border-radius:1.25rem;padding:.9rem 1rem;box-shadow:var(--shadow-soft)}.listItem b{color:var(--secondary-dark)}.listItem small{display:block;color:#687164;margin-top:.2rem}.pill{display:inline-flex;align-items:center;border-radius:999rem;padding:.35rem .6rem;font-size:.7rem;font-weight:1000;text-transform:uppercase;background:rgba(37,111,34,.10);color:var(--secondary-dark)}.pill--warn{background:rgba(207,154,36,.15);color:#8c6416}.pill--bad{background:rgba(179,63,51,.15);color:var(--alert-error)}
.employeePanel{display:flex;align-items:center;gap:1rem}.employeeAvatar{width:4rem;height:4rem;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--secondary-light),var(--secondary-dark));color:#fff;font-size:1.4rem;font-weight:1000}.employeePanel strong{display:block;color:var(--secondary-dark);font-size:1.15rem}.employeePanel p{margin:.2rem 0 0;color:#687164}.diagGrid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.diagItem{background:#fff;border-radius:1.25rem;padding:.9rem;box-shadow:var(--shadow-soft)}.diagItem strong{display:block;margin-top:.25rem;color:var(--secondary-dark);font-size:.9rem;word-break:break-word}.debugLog{white-space:pre-wrap;max-height:18rem;overflow:auto;background:#111;color:#e6ffe7;border-radius:1.25rem;padding:1rem;font-size:.72rem;user-select:text;-webkit-user-select:text}.queueTips ul{padding-left:1.15rem;margin:.5rem 0 0}.requestShell{box-shadow:var(--shadow-soft)}
.bottomNav{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + .75rem);transform:translateX(-50%);z-index:30;width:min(calc(100% - 1rem),48rem);display:grid;grid-template-columns:repeat(5,1fr);gap:.35rem;background:rgba(255,255,255,.86);backdrop-filter:blur(1rem);border:1px solid rgba(255,255,255,.9);border-radius:1.5rem;padding:.45rem;box-shadow:0 1.25rem 3.25rem rgba(24,24,24,.18)}.bottomNav button{height:3rem;border-radius:1rem;background:transparent;color:#687164;font-size:.75rem;font-weight:1000}.bottomNav button.is-active{background:linear-gradient(135deg,var(--secondary-light),var(--secondary-dark));color:#fff;box-shadow:var(--shadow-soft)}
.loadingOverlay{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(246,248,244,.72);backdrop-filter:blur(.75rem)}.loadingCard{width:min(20rem,calc(100% - 2rem));padding:1.5rem;border-radius:1.75rem;background:#fff;box-shadow:var(--shadow-card);text-align:center}.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 5.25rem);transform:translateX(-50%);z-index:80;width:min(calc(100% - 2rem),34rem);background:#111;color:#fff;border-radius:1.25rem;padding:.9rem 1rem;text-align:center;font-weight:900;box-shadow:0 1rem 2rem rgba(0,0,0,.25)}.appSplash{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:#f6f8f4;transition:opacity .3s ease,visibility .3s ease}.appSplash.is-hidden{opacity:0;visibility:hidden}.appSplash__card{text-align:center}.appSplash__logo{width:8rem;height:8rem;object-fit:contain}.appSplash__eyebrow{font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;color:#687164;font-weight:1000}.appSplash__title{font-size:2rem;line-height:1;color:var(--secondary-dark);font-weight:1000;letter-spacing:-.06em}.appSplash__loader{width:2.5rem;height:2.5rem;border-radius:50%;border:.25rem solid rgba(37,111,34,.18);border-top-color:var(--secondary-dark);animation:spin .8s linear infinite;margin:1rem auto 0}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:520px){.quickGrid,.serviceGrid{grid-template-columns:1fr}.diagGrid,.todaySummary,.statusStrip{grid-template-columns:1fr}.tapButton{min-height:8.5rem}.heroCard{align-items:stretch}.timeOrb{width:5.75rem;height:5.75rem}.bottomNav button{font-size:.68rem}}


/*/////////////////////////////////////////////////////// PWA QR SCANNER v7.6 STABLE
   Important: keep the proven html5-qrcode engine. These styles only control UX. */
.scannerShell {
  margin-top: 1rem;
}

.scannerShell[hidden] {
  display: none !important;
}

.scannerTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.scannerTop strong {
  font-size: 1.05rem;
}

.scannerTop button {
  background: #fff;
  border-radius: 999rem;
  padding: 0.65rem 1rem;
  color: var(--alert-error);
  font-weight: 900;
  box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.06);
}

.scannerBox {
  width: min(82vw, 20rem);
  aspect-ratio: 1 / 1;
  min-height: 0 !important;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  border-radius: 1.4rem;
  background: #071107;
  box-shadow: 0 1rem 2.5rem rgba(0,0,0,0.18);
}

.scannerBox video,
#qr-reader-runtime,
#qr-reader-runtime video,
#qr-reader-runtime canvas {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: cover !important;
  border: 0 !important;
}

#qr-reader-runtime {
  position: absolute !important;
  inset: 0 !important;
  display: block;
  background: #071107;
}

#qr-reader-runtime__scan_region,
#qr-reader-runtime__scan_region video {
  width: 100% !important;
  height: 100% !important;
}

#qr-reader-runtime__dashboard,
#qr-reader-runtime__header_message,
#qr-reader-runtime__status_span {
  display: none !important;
}

.scannerFrame {
  position: absolute;
  inset: 0.65rem;
  border: 0.18rem solid rgba(255,255,255,0.86);
  border-radius: 1.15rem;
  pointer-events: none;
  z-index: 5;
  box-shadow: inset 0 0 0 999rem rgba(0,0,0,0.08);
}

.scannerFrame::before,
.scannerFrame::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

/* animated scan line */
.scannerFrame::before {
  left: 10%;
  right: 10%;
  height: 0.14rem;
  top: 12%;
  border-radius: 999rem;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 0 0.65rem rgba(255,255,255,0.85);
  animation: lgsScanLine 1.45s ease-in-out infinite alternate;
}

/* chunky corner accents */
.scannerFrame::after {
  inset: -0.42rem;
  border-radius: 1.25rem;
  background:
    linear-gradient(#fff,#fff) left top / 2.5rem 0.42rem no-repeat,
    linear-gradient(#fff,#fff) left top / 0.42rem 2.5rem no-repeat,
    linear-gradient(#fff,#fff) right top / 2.5rem 0.42rem no-repeat,
    linear-gradient(#fff,#fff) right top / 0.42rem 2.5rem no-repeat,
    linear-gradient(#fff,#fff) left bottom / 2.5rem 0.42rem no-repeat,
    linear-gradient(#fff,#fff) left bottom / 0.42rem 2.5rem no-repeat,
    linear-gradient(#fff,#fff) right bottom / 2.5rem 0.42rem no-repeat,
    linear-gradient(#fff,#fff) right bottom / 0.42rem 2.5rem no-repeat;
}

@keyframes lgsScanLine {
  from { transform: translateY(0); opacity: 0.55; }
  to   { transform: translateY(13.7rem); opacity: 1; }
}

.scannerHint {
  width: min(82vw, 20rem);
  margin: 0.75rem auto 0;
  font-size: 0.9rem;
  text-align: center;
  color: var(--text-muted, #6f786e);
}

/* After QR detection, do not leave the user staring at a dead black camera box. */
.scannerShell.is-detected .scannerBox {
  display: grid;
  place-items: center;
  background: radial-gradient(circle at center, rgba(24, 119, 42, 0.20), rgba(7,17,7,1));
  box-shadow: 0 0 0 0.35rem rgba(31, 128, 47, 0.18), 0 1rem 2.5rem rgba(0,0,0,0.16);
}

.scannerShell.is-detected #qr-reader-runtime,
.scannerShell.is-detected .scannerBox video,
.scannerShell.is-detected .scannerFrame {
  display: none !important;
}

.scannerShell.is-detected .scannerBox::after {
  content: "✓ QR detected\ARegistering device…";
  white-space: pre-line;
  color: #ffffff;
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 900;
  text-align: center;
  letter-spacing: 0.01em;
}

.scannerShell.is-detected .scannerHint {
  color: var(--primary, #14551d);
  font-weight: 800;
}

.scannerShell.is-error .scannerHint {
  color: var(--alert-error, #b7443e);
  font-weight: 800;
}

@media (max-width: 420px) {
  .scannerBox,
  .scannerHint {
    width: min(84vw, 18.75rem);
  }

  @keyframes lgsScanLine {
    from { transform: translateY(0); opacity: 0.55; }
    to   { transform: translateY(12.7rem); opacity: 1; }
  }
}


/*/////////////////////////////////////////////////////// v7.9 BRAND + SCANNER RESTART WAIT PATCH */
.appSplash {
  background:
    radial-gradient(circle at 50% 35%, rgba(207,154,36,0.16), transparent 32rem),
    linear-gradient(145deg, #f6f8f4 0%, #eaf1e8 100%);
}

.appSplash__card {
  width: min(20rem, calc(100% - 2rem));
  padding: 2rem 1.5rem;
  border-radius: 2rem;
  background: rgba(255,255,255,0.68);
  border: 1px solid rgba(255,255,255,0.78);
  box-shadow: 0 1.25rem 3rem rgba(27,74,25,0.14);
  backdrop-filter: blur(0.9rem);
}

.appSplash__logo {
  width: 9.25rem;
  height: 9.25rem;
  object-fit: contain;
  filter: drop-shadow(0 0.9rem 1.15rem rgba(27,74,25,0.16));
}

.brandMark__logo,
.installLogo {
  object-fit: contain;
}

.scannerShell.is-waiting .scannerBox {
  display: grid;
  place-items: center;
  background: radial-gradient(circle at center, rgba(179,68,62,0.16), rgba(7,17,7,1));
}

.scannerShell.is-waiting #qr-reader-runtime,
.scannerShell.is-waiting .scannerBox video,
.scannerShell.is-waiting .scannerFrame {
  display: none !important;
}

.scannerShell.is-waiting .scannerBox::after {
  content: "Reset camera position";
  color: #ffffff;
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 900;
  text-align: center;
  letter-spacing: 0.01em;
}

.scannerShell.is-waiting .scannerHint {
  color: var(--alert-error, #b7443e);
  font-weight: 900;
}


/* WebAuthn recovery add-on */
.recoverBox {
  margin-top: 0.85rem;
}
.recoverBox .miniNote {
  margin: 0.65rem 0;
  font-size: 0.85rem;
  color: var(--text-muted, rgba(255,255,255,0.72));
}
.recoverBox input {
  width: 100%;
  box-sizing: border-box;
  margin-top: 0.35rem;
  padding: 0.85rem 0.95rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  color: inherit;
  outline: none;
}
.recoverBox input:focus {
  border-color: rgba(95,111,181,0.75);
  box-shadow: 0 0 0 3px rgba(95,111,181,0.22);
}

/*/////////////////////////////////////////////////////// v7.9.13 SAFE-AREA STICKY SHELL PATCH */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --header-h: 5.8rem;
  --bottom-nav-h: 4.45rem;
}

html,
body {
  min-height: 100%;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
}

body {
  min-height: 100svh;
  min-height: 100dvh;
  padding: 0;
  overscroll-behavior-y: contain;
}

.appShell {
  width: min(100%, 48rem);
  max-width: 100%;
  min-height: auto;
  margin: 0 auto;
  padding: 0 .875rem calc(var(--safe-bottom) + var(--bottom-nav-h) + 1rem);
  overflow: visible;
  display: flex;
  flex-direction: column;
}

.appHeader {
  position: sticky;
  top: 0;
  z-index: 50;
  margin: 0 -.875rem;
  min-height: var(--header-h);
  padding: calc(var(--safe-top) + .625rem) .875rem .75rem;
  background: linear-gradient(to bottom, rgba(246,248,244,.98), rgba(246,248,244,.94));
  border-bottom: 1px solid rgba(27,74,25,.08);
  box-shadow: 0 .8rem 1.8rem rgba(27,74,25,.08);
  backdrop-filter: blur(1rem);
  -webkit-backdrop-filter: blur(1rem);
}

.main {
  flex: 1 1 auto;
  display: block;
  max-width: 100%;
  padding-top: .875rem;
  overflow: visible;
}

.screen,
.appPage {
  min-height: auto;
  padding-bottom: .25rem;
}

.screenInstall,
.screenPair {
  min-height: auto;
  align-content: start;
  padding-top: .5rem;
}

.bottomNav {
  bottom: calc(var(--safe-bottom) + .75rem);
  z-index: 70;
  max-height: calc(100svh - var(--safe-top) - 1rem);
}

.toast {
  bottom: calc(var(--safe-bottom) + var(--bottom-nav-h) + 1rem);
}

@supports (padding: max(0px)) {
  .appHeader {
    padding-top: max(calc(var(--safe-top) + .625rem), .875rem);
  }

  .bottomNav {
    bottom: max(calc(var(--safe-bottom) + .75rem), .75rem);
  }
}


/*/////////////////////////////////////////////////////// v7.9.13 IOS VISUAL VIEWPORT + FIRST LOAD PATCH */
:root {
  --app-height: 100svh;
  --app-width: 100vw;
}

html,
body {
  min-height: var(--app-height);
  background:
    radial-gradient(circle at top left, rgba(209,130,55,.22), transparent 35%),
    radial-gradient(circle at bottom right, rgba(37,111,34,.20), transparent 42%),
    #f6f8f4;
}

body {
  min-height: var(--app-height);
}

.appSplash {
  min-height: var(--app-height);
  height: var(--app-height);
}

.appShell {
  min-height: var(--app-height);
  padding-bottom: calc(var(--safe-bottom) + 1rem);
}

body.hasBottomNav .appShell {
  padding-bottom: calc(var(--safe-bottom) + var(--bottom-nav-h) + 1rem);
}

.screenPair .panelCard {
  margin-bottom: 0;
}

/* Prevent the white/safe-area strip on iOS first paint before visualViewport settles. */
body::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--safe-bottom) + 1.5rem);
  pointer-events: none;
  z-index: -1;
  background: #f6f8f4;
}


/*/////////////////////////////////////////////////////// v7.9.16 STICKY HEADER + NATIVE BOTTOM NAV SLIDER
   Keeps the app header locked to the top during page scroll and adds a native-style
   sliding selected state for the bottom menu. */
:root {
  --header-h: 5.85rem;
  --bottom-nav-items: 5;
  --bottom-nav-pad: .45rem;
  --bottom-nav-gap: .35rem;
  --bottom-nav-pill-x: 2;
}

body {
  scroll-padding-top: calc(var(--safe-top) + var(--header-h));
}

.appShell {
  padding-top: calc(var(--safe-top) + var(--header-h) + .875rem);
}

.appHeader {
  position: fixed;
  top: 0;
  left: 50%;
  right: auto;
  width: min(100%, 48rem);
  transform: translateX(-50%);
  z-index: 90;
  margin: 0;
  padding: calc(var(--safe-top) + .625rem) .875rem .75rem;
  min-height: calc(var(--safe-top) + var(--header-h));
  background: linear-gradient(to bottom, rgba(246,248,244,.98), rgba(246,248,244,.92));
  border-bottom: 1px solid rgba(27,74,25,.08);
  box-shadow: 0 .8rem 1.8rem rgba(27,74,25,.08);
  backdrop-filter: blur(1rem) saturate(1.18);
  -webkit-backdrop-filter: blur(1rem) saturate(1.18);
}

.main {
  padding-top: 0;
}

.bottomNav {
  position: fixed;
  isolation: isolate;
  overflow: hidden;
  grid-template-columns: repeat(var(--bottom-nav-items), minmax(0, 1fr));
  gap: var(--bottom-nav-gap);
  padding: var(--bottom-nav-pad);
}

.bottomNav::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: var(--bottom-nav-pad);
  bottom: var(--bottom-nav-pad);
  left: var(--bottom-nav-pad);
  width: calc((100% - (var(--bottom-nav-pad) * 2) - (var(--bottom-nav-gap) * (var(--bottom-nav-items) - 1))) / var(--bottom-nav-items));
  border-radius: 1rem;
  background: linear-gradient(135deg, var(--secondary-light), var(--secondary-dark));
  box-shadow: var(--shadow-soft);
  transform: translateX(calc(var(--bottom-nav-pill-x) * (100% + var(--bottom-nav-gap))));
  transition: transform .34s cubic-bezier(.2,.9,.2,1), width .24s ease, opacity .2s ease;
  will-change: transform;
}

.bottomNav[data-active="queue"] { --bottom-nav-pill-x: 0; }
.bottomNav[data-active="attendance"] { --bottom-nav-pill-x: 1; }
.bottomNav[data-active="home"] { --bottom-nav-pill-x: 2; }
.bottomNav[data-active="requests"] { --bottom-nav-pill-x: 3; }
.bottomNav[data-active="security"] { --bottom-nav-pill-x: 4; }

.bottomNav button {
  position: relative;
  z-index: 1;
  background: transparent !important;
  box-shadow: none !important;
  color: #687164;
  transform: translateZ(0);
  transition: color .2s ease, transform .22s ease, opacity .2s ease;
}

.bottomNav button.is-active {
  color: #fff;
}

.bottomNav button:not(.is-active):active {
  transform: scale(.96);
}

.bottomNav button.is-active span {
  display: inline-block;
  transform: translateY(-.02rem);
}

@media (prefers-reduced-motion: reduce) {
  .bottomNav::before,
  .bottomNav button {
    transition: none !important;
  }
}


/*/////////////////////////////////////////////////////// v7.9.17 LOCATION RECOVERY SHEET
   Friendly location permission recovery, with review-safe fallback for denied GPS. */
.recoverySheet {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  align-items: end;
  padding: 1rem;
  padding-bottom: calc(var(--safe-bottom) + 1rem);
}

.recoverySheet[hidden] {
  display: none;
}

.recoverySheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 27, 12, .48);
  backdrop-filter: blur(.35rem);
  -webkit-backdrop-filter: blur(.35rem);
}

.recoverySheet__card {
  position: relative;
  z-index: 1;
  width: min(100%, 44rem);
  margin: 0 auto;
  padding: 1.15rem;
  border-radius: 1.45rem;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 1.4rem 3.25rem rgba(16, 37, 14, .24);
  border: 1px solid rgba(27, 74, 25, .10);
  transform: translateY(1.25rem);
  opacity: 0;
  transition: transform .24s cubic-bezier(.2,.9,.2,1), opacity .2s ease;
}

.recoverySheet.is-open .recoverySheet__card {
  transform: translateY(0);
  opacity: 1;
}

.recoverySheet__card h2 {
  margin: .25rem 0 .45rem;
  font-size: 1.35rem;
}

.recoverySheet__card p {
  margin: 0;
  color: #4c5a49;
  line-height: 1.45;
}

.recoverySheet__tap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: .9rem 0;
  padding: .8rem .9rem;
  border-radius: 1rem;
  background: #f4f7f1;
}

.recoverySheet__tap span {
  font-size: .78rem;
  color: #6a7567;
}

.recoverySheet__tap strong {
  color: var(--primary-dark);
}

.recoverySheet__actions {
  display: grid;
  gap: .6rem;
  margin-top: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .recoverySheet__card {
    transition: none !important;
  }
}


/*/////////////////////////////////////////////////////// v7.9.41 LOGS PAGE CLEANUP
   Single source of truth for the Attendance History page. The global .appHeader stays
   fixed exactly like the rest of the PWA; only the logs tab rail sticks below it. */

body.is-attendance-page .appShell,
body.is-attendance-page .main,
body.is-attendance-page .screen,
body.is-attendance-page .appPage,
body.is-attendance-page #attendancePage {
  overflow: visible !important;
  contain: none !important;
}

body.is-attendance-page #attendancePage {
  gap: .78rem;
  padding-top: 0;
}

body.is-attendance-page #attendancePage .pageTitle--logs {
  margin: 0;
  padding: .15rem .125rem .25rem;
}

body.is-attendance-page #attendancePage .pageTitle--logs h2 {
  margin-bottom: .28rem;
  font-size: clamp(1.65rem, 7vw, 2.2rem);
  letter-spacing: -.055em;
}

body.is-attendance-page #attendancePage .pageTitle--logs p {
  max-width: 30rem;
  margin: 0;
  color: #667363;
  font-size: .94rem;
  line-height: 1.38;
}

body.is-attendance-page #attendancePage .logsFilterBar {
  --tab-left: 0px;
  --tab-width: 4rem;
  position: sticky;
  top: var(--logs-sticky-top, calc(var(--safe-top) + var(--header-h)));
  z-index: 85;
  display: flex;
  align-items: flex-end;
  gap: 0;
  min-height: 3.28rem;
  margin: 0 -.875rem;
  padding: 0 .875rem;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: linear-gradient(to bottom, rgba(246,248,244,.99), rgba(246,248,244,.96));
  border-top: 1px solid rgba(27,74,25,.04);
  border-bottom: 1px solid rgba(27,74,25,.10);
  box-shadow: 0 .55rem 1.05rem rgba(27,74,25,.065);
  backdrop-filter: blur(1rem) saturate(1.08);
  -webkit-backdrop-filter: blur(1rem) saturate(1.08);
}

body.is-attendance-page #attendancePage .logsFilterBar::-webkit-scrollbar {
  display: none;
}

body.is-attendance-page #attendancePage .logsFilterBar::before {
  content: "";
  position: absolute;
  left: var(--tab-left);
  bottom: 0;
  width: var(--tab-width);
  height: .18rem;
  border-radius: 999rem 999rem 0 0;
  background: #08783e;
  box-shadow: 0 -.12rem .65rem rgba(8,120,62,.22);
  transition: left .24s cubic-bezier(.2,.9,.2,1), width .24s cubic-bezier(.2,.9,.2,1);
  pointer-events: none;
}

body.is-attendance-page #attendancePage .logsFilterBar::after {
  content: "";
  flex: 0 0 .875rem;
}

body.is-attendance-page #attendancePage .logsFilter {
  flex: 1 0 auto;
  min-width: max-content;
  height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  margin: 0;
  appearance: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(28,52,31,.64);
  font-size: .92rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.025em;
  white-space: nowrap;
  transform: none;
}

body.is-attendance-page #attendancePage .logsFilter.is-active {
  color: #075f36;
}

body.is-attendance-page #attendancePage .historyToolbar--logs,
body.is-attendance-page #attendancePage .logsSyncNote--updating,
body.is-attendance-page #attendancePage .logsSyncNote--loading {
  display: none !important;
}

body.is-attendance-page #attendancePage .logsSyncNote {
  margin: .05rem 0 .35rem;
  padding: .62rem .8rem;
  border-radius: 1rem;
  border: 1px solid rgba(27,74,25,.08);
  background: rgba(255,255,255,.72);
  color: #5e695b;
  box-shadow: none;
  font-size: .78rem;
  font-weight: 800;
}

body.is-attendance-page #attendancePage .logsPullRefresh {
  height: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
}

body.is-attendance-page #attendancePage .historyList--logs {
  display: flex;
  flex-direction: column;
  gap: .58rem;
  width: 100%;
  max-width: 100%;
  margin-top: .82rem;
  padding: .15rem 0 calc(var(--bottom-nav-h) + 1.5rem);
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: translateY(calc(var(--pull-y, 0px) * .2));
  transition: transform .18s ease;
  animation: none !important;
  will-change: auto;
}

body.is-attendance-page #attendancePage .historyList--logs.is-slide-from-right,
body.is-attendance-page #attendancePage .historyList--logs.is-slide-from-left,
body.is-attendance-page #attendancePage .historyList--logs.is-swipe-right,
body.is-attendance-page #attendancePage .historyList--logs.is-swipe-left {
  animation: none !important;
  transform: translateY(calc(var(--pull-y, 0px) * .2));
}

body.is-attendance-page #attendancePage .logDateGroup {
  position: sticky;
  top: calc(var(--logs-sticky-top, calc(var(--safe-top) + var(--header-h))) + 3.3rem);
  z-index: 70;
  align-self: flex-start;
  margin: .3rem 0 .1rem;
  padding: .34rem .68rem;
  border-radius: 999rem;
  background: rgba(234,244,235,.94);
  color: #48634c;
  font-size: .72rem;
  font-weight: 1000;
  letter-spacing: .01em;
  box-shadow: 0 .3rem .9rem rgba(19,59,31,.065);
  backdrop-filter: blur(.55rem);
  -webkit-backdrop-filter: blur(.55rem);
}

body.is-attendance-page #attendancePage .logItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .85rem;
  width: 100%;
  padding: .92rem .95rem;
  border: 1px solid rgba(27,74,25,.09);
  border-radius: 1.25rem;
  background: rgba(255,255,255,.90);
  box-shadow: 0 .55rem 1.3rem rgba(18,50,25,.06);
}

body.is-attendance-page #attendancePage .logItem__main {
  min-width: 0;
}

body.is-attendance-page #attendancePage .logItem b {
  display: block;
  color: var(--secondary-dark);
  font-size: 1.02rem;
  line-height: 1.08;
  letter-spacing: -.025em;
  text-transform: none;
}

body.is-attendance-page #attendancePage .logItem small {
  display: block;
  margin-top: .3rem;
  color: #667363;
  line-height: 1.32;
  font-size: .82rem;
}

body.is-attendance-page #attendancePage .logItem__review {
  color: #87645e !important;
  font-weight: 800;
}

body.is-attendance-page #attendancePage .logItem .pill {
  flex: 0 0 auto;
  padding: .38rem .62rem;
  font-size: .66rem;
  letter-spacing: .015em;
  white-space: nowrap;
}

body.is-attendance-page #attendancePage .logItem .pill--bad {
  background: rgba(179,63,51,.12);
  color: #a73b32;
}

body.is-attendance-page #attendancePage .logItem .pill--warn {
  background: rgba(207,154,36,.14);
  color: #866112;
}

body.is-attendance-page #attendancePage .logEmpty {
  opacity: 1;
}

body.is-attendance-page #attendancePage .logEmpty .pill {
  display: none;
}

@media (max-width: 420px) {
  body.is-attendance-page #attendancePage .logsFilter {
    padding-inline: .72rem;
    font-size: .84rem;
  }

  body.is-attendance-page #attendancePage .logItem {
    align-items: flex-start;
  }

  body.is-attendance-page #attendancePage .logItem .pill {
    margin-top: .05rem;
  }
}

/*/////////////////////////////////////////////////////// v7.9.45 ENTERPRISE POLISH RESET
   Restores the premium/native feel without gradients. This is intentionally
   appended as a single source of truth so older visual patches do not arm-wrestle. */
:root{
  --app-bg:#f4f7f1;
  --app-bg-deep:#e9f0e5;
  --surface:#ffffff;
  --surface-warm:#fffaf2;
  --surface-green:#eef6ed;
  --surface-blue:#edf8f8;
  --line-soft:rgba(27,74,25,.105);
  --line-strong:rgba(27,74,25,.18);
  --text-main:#233025;
  --text-muted:#667363;
  --header-h:5.85rem;
  --shadow-card:0 .9rem 2.1rem rgba(21,55,22,.105);
  --shadow-soft:0 .45rem 1.15rem rgba(24,36,22,.075);
  --shadow-lift:0 1.2rem 2.9rem rgba(16,44,18,.145);
  --motion-enter:cubic-bezier(.16,1,.3,1);
}

html,
body{
  background:var(--app-bg) !important;
  color:var(--text-main);
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:var(--app-bg) !important;
}

body::after{
  background:var(--app-bg) !important;
}

.appShell,
.main,
.screen,
.appPage{
  overflow:visible !important;
  contain:none !important;
}

.appShell{
  width:min(100%,48rem);
  padding-left:1rem !important;
  padding-right:1rem !important;
}

.screen,
.appPage{
  gap:1rem;
  animation:pageRise .28s var(--motion-enter) both !important;
}

@keyframes pageRise{
  from{opacity:0;transform:translate3d(0,.7rem,0) scale(.992)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}

.appHeader{
  display:grid !important;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  column-gap:.75rem;
  left:50% !important;
  right:auto !important;
  width:min(100%,48rem) !important;
  transform:translateX(-50%) !important;
  padding:calc(var(--safe-top) + .65rem) 1rem .75rem !important;
  background:rgba(244,247,241,.965) !important;
  background-image:none !important;
  border-bottom:1px solid var(--line-soft) !important;
  box-shadow:0 .6rem 1.6rem rgba(18,42,18,.075) !important;
  backdrop-filter:blur(1rem) saturate(1.12);
  -webkit-backdrop-filter:blur(1rem) saturate(1.12);
}

.brandMark{
  grid-column:2;
  justify-self:center;
  justify-content:center;
  text-align:left;
  max-width:min(18rem,64vw);
}

.brandMark__logo{
  width:3.25rem;
  height:3.25rem;
  filter:drop-shadow(0 .35rem .65rem rgba(20,50,20,.14));
}

.brandMark__eyebrow,
.eyebrow,
.label{
  color:#6d7969;
  letter-spacing:.13em;
}

.brandMark__title{
  color:var(--secondary-dark);
  text-shadow:none;
}

.headerStatus{
  grid-column:3;
  justify-self:end;
  background:#fff !important;
  border:1px solid rgba(27,74,25,.11);
  box-shadow:var(--shadow-soft) !important;
}

.panelCard,
.heroCard,
.clockPanel,
.statusStrip,
.employeePanel,
.queueInfoCard,
.queueTips,
.todaySummary,
.historyList,
.serviceGrid button,
.quickGrid button,
.listItem,
.diagItem,
.summaryBox,
.requestShell,
.loadingCard,
.logItem{
  background:var(--surface) !important;
  background-image:none !important;
  border:1px solid var(--line-soft) !important;
  box-shadow:var(--shadow-card) !important;
}

.panelCard,
.heroCard,
.clockPanel,
.statusStrip,
.employeePanel,
.queueInfoCard,
.queueTips,
.todaySummary,
.historyList,
.requestShell{
  border-radius:1.55rem !important;
}

.quickGrid button,
.serviceGrid button,
.listItem,
.diagItem,
.summaryBox,
.logItem{
  border-radius:1.2rem !important;
}

.panelCard h1,
.panelCard h2,
.pageTitle h2,
.heroCard h2{
  color:var(--secondary-dark) !important;
  letter-spacing:-.05em;
}

.panelCard p,
.pageTitle p,
.queueTips li,
.quickGrid span,
.serviceGrid span,
.employeePanel p,
.logItem small{
  color:var(--text-muted) !important;
}

.heroCard{
  background:var(--surface-green) !important;
  border-color:rgba(27,74,25,.12) !important;
}

.timeOrb{
  background:#fff !important;
  background-image:none !important;
  border:1px solid rgba(27,74,25,.11);
  color:var(--secondary-dark);
  box-shadow:inset 0 0 0 .38rem rgba(37,111,34,.075), var(--shadow-soft) !important;
}

.bigButton,
.button,
.scanButton{
  border:1px solid rgba(27,74,25,.12);
  box-shadow:var(--shadow-soft) !important;
}

.bigButton--green,
.tapButton--in,
.bottomNav button.is-active,
.bottomNav::before{
  background:var(--secondary-dark) !important;
  background-image:none !important;
  color:#fff !important;
}

.tapButton--out{
  background:var(--primary-dark) !important;
  background-image:none !important;
  color:#fff !important;
}

.tapButton--toggle{
  background:var(--accent-dark) !important;
  background-image:none !important;
  color:#fff !important;
}

.tapButton{
  box-shadow:var(--shadow-lift) !important;
  transform:translateZ(0);
  transition:transform .18s var(--motion-enter), box-shadow .18s var(--motion-enter), filter .18s ease;
}

.tapButton:not(:disabled):active,
.bigButton:not(:disabled):active,
.button:not(:disabled):active,
.quickGrid button:not(:disabled):active,
.serviceGrid button:not(:disabled):active{
  transform:scale(.985) translateY(.03rem);
}

.tapButton::before{
  display:block !important;
  background:rgba(255,255,255,.11) !important;
}

.employeeAvatar{
  background:var(--secondary-dark) !important;
  background-image:none !important;
  box-shadow:inset 0 0 0 .2rem rgba(255,255,255,.18), var(--shadow-soft) !important;
}

.quickGrid,
.serviceGrid,
.diagGrid,
.todaySummary,
.statusStrip,
.tapGrid{
  gap:.85rem;
}

.quickGrid button,
.serviceGrid button{
  min-height:5.75rem;
  transition:transform .18s var(--motion-enter), box-shadow .18s var(--motion-enter), border-color .18s ease;
}

.quickGrid button:active,
.serviceGrid button:active{
  box-shadow:var(--shadow-soft) !important;
}

.listItem,
.logItem{
  transition:transform .18s var(--motion-enter), box-shadow .18s var(--motion-enter);
}

.pill{
  background:rgba(37,111,34,.105) !important;
  color:var(--secondary-dark) !important;
}

.pill--warn{
  background:rgba(207,154,36,.16) !important;
  color:#815a11 !important;
}

.pill--bad{
  background:rgba(179,63,51,.14) !important;
  color:var(--alert-error) !important;
}

.bottomNav{
  background:rgba(255,255,255,.94) !important;
  border:1px solid rgba(27,74,25,.12) !important;
  box-shadow:0 .9rem 2.35rem rgba(16,44,18,.155) !important;
  backdrop-filter:blur(1rem) saturate(1.08);
  -webkit-backdrop-filter:blur(1rem) saturate(1.08);
}

.bottomNav::before{
  box-shadow:0 .35rem 1.05rem rgba(27,74,25,.24) !important;
  transition:transform .32s var(--motion-enter), width .22s ease, opacity .18s ease !important;
}

.bottomNav button{
  transition:color .18s ease, transform .18s var(--motion-enter);
}

.loadingOverlay,
.appSplash{
  background:rgba(244,247,241,.92) !important;
}

/* Logs page, fixed header + sticky tabs that do not get swallowed by overflow. */
body.is-attendance-page .appHeader{
  position:fixed !important;
  top:0 !important;
}

body.is-attendance-page #attendancePage{
  overflow:visible !important;
  padding-bottom:calc(var(--bottom-nav-h, 4.5rem) + 1rem);
}

body.is-attendance-page #attendancePage .logsFilterBar{
  position:sticky !important;
  top:var(--logs-sticky-top, calc(var(--safe-top) + var(--header-h))) !important;
  z-index:88 !important;
  margin:0 -1rem !important;
  padding:0 1rem !important;
  background:rgba(244,247,241,.975) !important;
  background-image:none !important;
  border-top:1px solid rgba(27,74,25,.04) !important;
  border-bottom:1px solid var(--line-soft) !important;
  box-shadow:0 .55rem 1.3rem rgba(18,42,18,.07) !important;
  backdrop-filter:blur(1rem) saturate(1.08);
  -webkit-backdrop-filter:blur(1rem) saturate(1.08);
}

body.is-attendance-page #attendancePage .logsFilterBar::before{
  background:var(--secondary-dark) !important;
  box-shadow:0 -.1rem .6rem rgba(27,74,25,.22) !important;
}

body.is-attendance-page #attendancePage .logsFilter{
  color:rgba(35,48,37,.64) !important;
}

body.is-attendance-page #attendancePage .logsFilter.is-active{
  color:var(--secondary-dark) !important;
}

body.is-attendance-page #attendancePage .logDateGroup{
  background:rgba(244,247,241,.96) !important;
  background-image:none !important;
  border:1px solid rgba(27,74,25,.09) !important;
  box-shadow:0 .3rem .85rem rgba(18,42,18,.055) !important;
}

body.is-attendance-page #attendancePage .logsSyncNote{
  background:#fff !important;
  border:1px solid var(--line-soft) !important;
  box-shadow:var(--shadow-soft) !important;
}

/* Remove visible gradients while preserving premium color weight. */
.bigButton--green,
.heroCard,
.tapButton,
.tapButton--in,
.tapButton--out,
.tapButton--toggle,
.employeeAvatar,
.timeOrb,
.bottomNav::before,
.bottomNav button.is-active,
.appHeader,
body.is-attendance-page #attendancePage .logsFilterBar,
html,
body{
  background-image:none !important;
}

@media (max-width:420px){
  .appShell{padding-left:.875rem !important;padding-right:.875rem !important;}
  .appHeader{padding-left:.875rem !important;padding-right:.875rem !important;}
  .brandMark{max-width:62vw;}
  .brandMark__logo{width:3rem;height:3rem;}
  .brandMark__title{font-size:clamp(1.35rem,6.2vw,1.9rem);}
  .headerStatus{font-size:.61rem;padding:.48rem .58rem;}
  body.is-attendance-page #attendancePage .logsFilterBar{margin-left:-.875rem !important;margin-right:-.875rem !important;padding-left:.875rem !important;padding-right:.875rem !important;}
}


/*/////////////////////////////////////////////////////// v7.9.45 HOME + HEADER POLISH PATCH
   Restore left-aligned enterprise header, make home time dominant, icon-only home nav,
   and force the splash to clean solid white. */
.appHeader{
  display:flex !important;
  grid-template-columns:none !important;
  justify-content:space-between !important;
  align-items:center !important;
  text-align:left !important;
}

.brandMark{
  grid-column:auto !important;
  justify-self:start !important;
  justify-content:flex-start !important;
  text-align:left !important;
  max-width:min(22rem,68vw) !important;
  margin-right:auto !important;
}

.headerStatus{
  grid-column:auto !important;
  justify-self:end !important;
  margin-left:auto !important;
}

#homePage .heroCard{
  align-items:center !important;
  gap:1.15rem !important;
  padding:1.25rem !important;
}

#homePage .heroCard > div:first-child{
  flex:1 1 auto;
}

#homePage #todayText{
  font-size:clamp(1.15rem,4.4vw,1.65rem) !important;
  letter-spacing:-.035em !important;
  opacity:.88;
}

#homePage #employeeGreeting{
  margin-top:.3rem !important;
}

#homePage .timeOrb{
  width:clamp(8.25rem,34vw,11.25rem) !important;
  height:clamp(8.25rem,34vw,11.25rem) !important;
  flex:0 0 auto !important;
  border-radius:2.15rem !important;
  box-shadow:inset 0 0 0 .42rem rgba(37,111,34,.075), var(--shadow-card) !important;
}

#homePage .timeOrb span,
#timeText{
  font-size:clamp(2rem,9.6vw,3.45rem) !important;
  line-height:.95 !important;
  letter-spacing:-.085em !important;
  font-weight:1000 !important;
  font-variant-numeric:tabular-nums;
}

.bottomNav button[data-route="home"]{
  display:grid !important;
  place-items:center !important;
}

.bottomNav button[data-route="home"] .navHomeIcon{
  display:grid !important;
  place-items:center !important;
  width:1.8rem;
  height:1.8rem;
  font-size:1.55rem;
  line-height:1;
  font-weight:1000;
  transform:translateY(-.03rem);
}

.bottomNav button[data-route="home"].is-active .navHomeIcon{
  transform:translateY(-.05rem) scale(1.03);
}

.appSplash,
.loadingOverlay.appSplash{
  background:#ffffff !important;
  background-image:none !important;
}

.appSplash__card{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.appSplash__logo{
  filter:drop-shadow(0 .9rem 1.25rem rgba(27,74,25,.16)) !important;
}

@media(max-width:520px){
  #homePage .heroCard{
    display:grid !important;
    grid-template-columns:1fr !important;
  }

  #homePage .timeOrb{
    width:100% !important;
    height:auto !important;
    min-height:8.5rem !important;
    border-radius:1.75rem !important;
  }

  #homePage .timeOrb span,
  #timeText{
    font-size:clamp(3rem,17vw,4.75rem) !important;
  }
}


/*/////////////////////////////////////////////////////// v7.9.45 LGS HOME DASHBOARD PATCH
   Build the home screen around the clock, using LGS enterprise colors and a solid native-style home icon. */
#homePage{
  gap:1rem !important;
}

#homePage .homeIntro{
  padding:.2rem .15rem .1rem !important;
}

#homePage .homeIntro h2{
  margin:0 !important;
  color:#10223f !important;
  font-size:clamp(1.35rem,5.8vw,2rem) !important;
  line-height:1.08 !important;
  letter-spacing:-.045em !important;
  font-weight:1000 !important;
}

#homePage .homeIntro p{
  margin:.45rem 0 0 !important;
  color:#5f6b7a !important;
  font-size:1rem !important;
  font-weight:800 !important;
}

#homePage .clockPanel--home{
  position:relative !important;
  overflow:visible !important;
  display:grid !important;
  gap:1rem !important;
  padding:1.35rem 1.15rem 1.2rem !important;
  border-radius:1.45rem !important;
  background:#ffffff !important;
  border:1px solid rgba(16,34,63,.12) !important;
  box-shadow:0 1rem 2.25rem rgba(16,34,63,.12), 0 .2rem .65rem rgba(27,74,25,.06) !important;
}

#homePage .clockPanel__label{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:.65rem !important;
  color:#1b4a19 !important;
  font-size:1rem !important;
  font-weight:1000 !important;
}

#homePage .clockPanel__icon{
  width:2.35rem !important;
  height:2.35rem !important;
  display:grid !important;
  place-items:center !important;
  border-radius:999rem !important;
  color:#256f22 !important;
  background:#eef7ed !important;
  box-shadow:inset 0 0 0 .22rem rgba(37,111,34,.12) !important;
}

#homePage .clockPanel__icon svg{
  width:1.55rem !important;
  height:1.55rem !important;
  fill:currentColor !important;
}

#homePage .clockPanel__timeRow{
  display:flex !important;
  align-items:baseline !important;
  justify-content:center !important;
  gap:.55rem !important;
  min-height:5.7rem !important;
  padding:.1rem .25rem .35rem !important;
  border-bottom:1px solid rgba(16,34,63,.10) !important;
  white-space:nowrap !important;
}

#homePage #timeText{
  display:inline-block !important;
  color:#102c57 !important;
  font-size:clamp(3.15rem,14.6vw,5.55rem) !important;
  line-height:.9 !important;
  letter-spacing:-.09em !important;
  font-weight:1000 !important;
  font-variant-numeric:tabular-nums !important;
  max-width:100% !important;
}

#homePage #timeMeridiem{
  color:#10223f !important;
  font-size:clamp(1rem,4.2vw,1.6rem) !important;
  line-height:1 !important;
  letter-spacing:-.04em !important;
  font-weight:1000 !important;
}

#homePage .clockPanel__dateRow{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:.65rem !important;
  color:#64748b !important;
  font-size:clamp(.92rem,3.8vw,1.1rem) !important;
  font-weight:900 !important;
}

#homePage .clockPanel__dateIcon{
  color:#8090a8 !important;
  font-size:1rem !important;
  transform:translateY(-.02rem);
}

#homePage .homeSectionTitle{
  margin:.55rem .1rem -.25rem !important;
  color:#10223f !important;
  font-size:1.18rem !important;
  line-height:1.1 !important;
  letter-spacing:-.035em !important;
  font-weight:1000 !important;
}

#homePage .tapGrid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:.75rem !important;
}

#homePage .tapButton{
  min-height:7.75rem !important;
  border-radius:1.25rem !important;
  padding:.9rem .8rem !important;
  justify-content:center !important;
  align-items:center !important;
  text-align:center !important;
  background:#fff !important;
  color:#10223f !important;
  border:1px solid rgba(16,34,63,.10) !important;
  box-shadow:0 .8rem 1.75rem rgba(16,34,63,.09) !important;
}

#homePage .tapButton::before{
  display:none !important;
}

#homePage .tapButton span{
  font-size:clamp(1rem,4.5vw,1.18rem) !important;
  line-height:1.05 !important;
  letter-spacing:-.035em !important;
}

#homePage .tapButton small{
  margin-top:.28rem !important;
  font-size:.72rem !important;
  opacity:.88 !important;
}

#homePage .tapButton--in{
  background:#eef8f0 !important;
  color:#138329 !important;
  border-color:rgba(19,131,41,.18) !important;
}

#homePage .tapButton--out{
  background:#fff1ed !important;
  color:#b33f33 !important;
  border-color:rgba(179,63,51,.18) !important;
}

#homePage .tapButton--toggle{
  grid-column:auto !important;
  background:#eef6fb !important;
  color:#1f6f8b !important;
  border-color:rgba(31,111,139,.18) !important;
}

.bottomNav button[data-route="home"] .navHomeIcon{
  width:1.85rem !important;
  height:1.85rem !important;
  display:grid !important;
  place-items:center !important;
  transform:translateY(-.02rem) !important;
}

.bottomNav button[data-route="home"] .navHomeIcon svg{
  width:1.85rem !important;
  height:1.85rem !important;
  display:block !important;
  fill:currentColor !important;
  filter:none !important;
}

.bottomNav button[data-route="home"].is-active .navHomeIcon{
  transform:translateY(-.03rem) scale(1.02) !important;
}

@media(max-width:420px){
  #homePage .clockPanel--home{
    padding:1.25rem .9rem 1.15rem !important;
  }

  #homePage .clockPanel__timeRow{
    min-height:5rem !important;
    gap:.4rem !important;
  }

  #homePage #timeText{
    font-size:clamp(2.75rem,15.2vw,4.25rem) !important;
  }

  #homePage #timeMeridiem{
    font-size:clamp(.9rem,4.2vw,1.18rem) !important;
  }

  #homePage .tapGrid{
    grid-template-columns:1fr 1fr !important;
  }

  #homePage .tapButton--toggle{
    grid-column:1/-1 !important;
    min-height:5.2rem !important;
  }
}


/*/////////////////////////////////////////////////////// v7.9.46 HOME POLISH PATCH
   Clock glyphs, solid tap actions, and Recent Logs home card. No gradients. */
#homePage .clockPanel__icon{
  background:#eef7ed !important;
  color:#1b6f2a !important;
}

#homePage .clockPanel__icon svg,
#homePage .clockPanel__dateIcon svg{
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:2.15 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

#homePage .clockPanel__timeRow{
  gap:.9rem !important;
  min-height:6.2rem !important;
  padding:.2rem .35rem .55rem !important;
  overflow:visible !important;
}

#homePage #timeText{
  font-size:clamp(3rem,13vw,5.1rem) !important;
  letter-spacing:-.035em !important;
  line-height:.98 !important;
}

#homePage #timeMeridiem{
  min-width:2.4ch !important;
  transform:translateY(-.12rem) !important;
}

#homePage .clockPanel__dateIcon{
  width:1.35rem !important;
  height:1.35rem !important;
  display:grid !important;
  place-items:center !important;
}

#homePage .clockPanel__dateIcon svg{
  width:1.25rem !important;
  height:1.25rem !important;
}

#homePage .tapButton{
  border:0 !important;
  box-shadow:0 1rem 1.8rem rgba(16,34,63,.14), inset 0 0 0 1px rgba(255,255,255,.18) !important;
  color:#ffffff !important;
}

#homePage .tapButton span,
#homePage .tapButton small{
  color:#ffffff !important;
  text-shadow:0 .08rem .18rem rgba(0,0,0,.16) !important;
}

#homePage .tapButton--in{
  background:#176b25 !important;
}

#homePage .tapButton--out{
  background:#a93228 !important;
}

#homePage .tapButton--toggle{
  background:#155f77 !important;
}

#homePage .tapButton:not(:disabled):active{
  transform:translateY(.08rem) scale(.985) !important;
  box-shadow:0 .45rem 1rem rgba(16,34,63,.16), inset 0 0 0 1px rgba(255,255,255,.12) !important;
}

#homePage .homeRecentLogs{
  display:grid !important;
  gap:.85rem !important;
  padding:1rem !important;
  border-radius:1.45rem !important;
  background:#ffffff !important;
  border:1px solid rgba(16,34,63,.10) !important;
  box-shadow:0 1rem 2rem rgba(16,34,63,.10), 0 .15rem .55rem rgba(27,74,25,.05) !important;
  overflow:visible !important;
}

#homePage .homeRecentLogs__head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:1rem !important;
}

#homePage .homeRecentLogs__head h3{
  margin:0 !important;
  color:#10223f !important;
  font-size:1.05rem !important;
  letter-spacing:-.035em !important;
  line-height:1.1 !important;
  font-weight:1000 !important;
}

#homePage .homeRecentLogs__view{
  appearance:none !important;
  border:0 !important;
  background:#eef7ed !important;
  color:#176b25 !important;
  border-radius:999rem !important;
  padding:.5rem .75rem !important;
  font-size:.78rem !important;
  font-weight:1000 !important;
  cursor:pointer !important;
}

#homePage .homeRecentLogs__list{
  display:grid !important;
  gap:.65rem !important;
}

#homePage .homeRecentLog{
  display:grid !important;
  grid-template-columns:auto 1fr auto !important;
  align-items:center !important;
  gap:.75rem !important;
  min-height:3.35rem !important;
  padding:.72rem .78rem !important;
  border-radius:1rem !important;
  background:#f8faf8 !important;
  border:1px solid rgba(16,34,63,.07) !important;
}

#homePage .homeRecentLog.is-empty{
  grid-template-columns:1fr !important;
}

#homePage .homeRecentLog__mark{
  width:.85rem !important;
  height:.85rem !important;
  border-radius:999rem !important;
  background:#176b25 !important;
  box-shadow:0 0 0 .35rem rgba(23,107,37,.10) !important;
}

#homePage .homeRecentLog__mark.is-out{
  background:#a93228 !important;
  box-shadow:0 0 0 .35rem rgba(169,50,40,.10) !important;
}

#homePage .homeRecentLog b{
  display:block !important;
  color:#10223f !important;
  font-size:.92rem !important;
  line-height:1.15 !important;
  font-weight:1000 !important;
}

#homePage .homeRecentLog small{
  display:block !important;
  margin-top:.15rem !important;
  color:#64748b !important;
  font-size:.76rem !important;
  font-weight:800 !important;
}

#homePage .homeRecentLog em{
  font-style:normal !important;
  color:#176b25 !important;
  background:#e8f5eb !important;
  border-radius:999rem !important;
  padding:.34rem .55rem !important;
  font-size:.68rem !important;
  font-weight:1000 !important;
  white-space:nowrap !important;
}

#homePage .homeRecentLog em.pill--warn,
#homePage .homeRecentLog em.pill--bad{
  color:#9a4b00 !important;
  background:#fff3df !important;
}

@media(max-width:420px){
  #homePage .clockPanel__timeRow{
    gap:.58rem !important;
    min-height:5.4rem !important;
  }

  #homePage #timeText{
    font-size:clamp(2.6rem,13.4vw,3.85rem) !important;
  }

  #homePage #timeMeridiem{
    font-size:clamp(.82rem,3.8vw,1.05rem) !important;
  }

  #homePage .tapButton{
    min-height:7.15rem !important;
  }
}


/*/////////////////////////////////////////////////////// v7.9.47 HOME CLEANUP + LGS TEXT COLOR PATCH
   Remove home-page mini dashboard feel and keep normal copy in LGS neutral/navy text.
   Action colors, menu colors, and status colors stay untouched. */
:root{
  --lgs-text-main:#10223f;
  --lgs-text-soft:#5f6b7a;
  --lgs-text-muted:#687164;
}

/* Home should end after recent logs, no extra shortcut tiles. */
#homePage > .quickGrid{
  display:none !important;
}

/* General readable app copy: navy for titles, neutral slate for helper text. */
.appMain .screen :where(h1,h2,h3,h4):not(.status-badge):not(.pill):not(.tapButton *):not(.bottomNav *){
  color:var(--lgs-text-main) !important;
}

.appMain .screen :where(p,small,li):not(.status-badge):not(.pill):not(.tapButton *):not(.bottomNav *){
  color:var(--lgs-text-soft) !important;
}

/* Labels should be muted, not heavy green. */
.appMain .screen :where(.eyebrow,.label):not(.status-badge):not(.pill){
  color:var(--lgs-text-muted) !important;
}

/* Home-specific text hierarchy. */
#homePage .homeIntro h2,
#homePage .homeSectionTitle,
#homePage .homeRecentLogs__head h3,
#homePage .homeRecentLog b,
#homePage #timeText,
#homePage #timeMeridiem{
  color:var(--lgs-text-main) !important;
}

#homePage .homeIntro p,
#homePage .clockPanel__dateRow,
#homePage .homeRecentLog small{
  color:var(--lgs-text-soft) !important;
}

/* Current Time label uses LGS text, while icon remains brand-colored. */
#homePage .clockPanel__label{
  color:var(--lgs-text-main) !important;
}

/* Non-status values inside ordinary cards should not default to green. */
.statusStrip strong,
.summaryBox strong,
.diagItem strong,
.employeePanel strong,
.listItem b{
  color:var(--lgs-text-main) !important;
}

.employeePanel p,
.listItem small,
.queueTips li,
.panelCard p,
.pageTitle p{
  color:var(--lgs-text-soft) !important;
}

/*/////////////////////////////////////////////////////// v7.9.48 LEAVE REQUEST SELF-SERVICE */
.pageTitle--withAction{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.leaveToolbar{display:flex;gap:.65rem;flex-wrap:wrap;margin:.25rem 0 1rem}.leaveSplit{display:grid;grid-template-columns:minmax(0,1fr);gap:.85rem}.leaveList{display:grid;gap:.65rem}.leaveListItem{width:100%;display:flex;align-items:center;justify-content:space-between;gap:.75rem;text-align:left;background:#fff;border-radius:1.25rem;padding:.95rem 1rem;box-shadow:var(--shadow-soft);color:var(--text)}.leaveListItem b{display:block;color:var(--secondary-dark)}.leaveListItem small{display:block;margin-top:.25rem;color:#687164}.leaveDetail{margin-top:0}.leaveDetailContent p{margin:.25rem 0;color:#687164}.leaveDetailGrid{display:grid;grid-template-columns:minmax(7rem,.42fr) 1fr;gap:.65rem .85rem;align-items:center}.leaveDetailGrid span{font-size:.78rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:#687164}.leaveDetailGrid b{font-size:.92rem;color:var(--secondary-dark);word-break:break-word}.leaveRemarksBox{margin-top:1rem;padding:1rem;border-radius:1.25rem;background:rgba(37,111,34,.06);display:grid;gap:.65rem}.leaveRemarksBox b{color:var(--secondary-dark)}.leaveRemarksBox p{margin:0}.leaveRemarksBox textarea,.leaveForm textarea,.leaveForm input,.leaveForm select{width:100%;border:1px solid rgba(37,111,34,.16);border-radius:1rem;background:#fff;padding:.85rem .9rem;color:var(--text);outline:none}.leaveRemarksBox textarea:focus,.leaveForm textarea:focus,.leaveForm input:focus,.leaveForm select:focus{border-color:var(--secondary-light);box-shadow:0 0 0 .25rem rgba(37,111,34,.10)}.leaveFormPanel{margin-top:1rem}.leaveFormHead{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.leaveForm{display:grid;gap:.85rem;margin-top:.75rem}.leaveForm label{display:grid;gap:.4rem;font-weight:900;color:var(--secondary-dark)}.leaveForm label small{font-weight:700;color:#687164;line-height:1.35}.leaveFormGrid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.leavePolicyNote{padding:.85rem 1rem;border-radius:1.15rem;background:rgba(209,130,55,.10);color:var(--secondary-dark)}.leavePolicyNote:empty{display:none}.leavePolicyNote b{display:block}.leavePolicyNote small{display:block;margin-top:.25rem;color:#687164;font-weight:800}.leaveDetail .pill,.leaveDetailGrid .pill{font-size:.68rem}
@media(min-width:760px){.leaveSplit{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}.leaveDetail{position:sticky;top:5.75rem}}
@media(max-width:520px){.pageTitle--withAction{align-items:stretch;flex-direction:column}.leaveFormGrid,.leaveDetailGrid{grid-template-columns:1fr}.leaveToolbar .bigButton,.leaveToolbar .button{width:100%}}


/* Leave requests / credits tabs */
.leaveTabs{display:flex;gap:.5rem;padding:.35rem;background:rgba(37,111,34,.06);border-radius:1.2rem;margin:.35rem 0 .85rem;position:sticky;top:4.85rem;z-index:5;backdrop-filter:blur(10px)}
.leaveTab{flex:1;border:0;border-radius:.95rem;padding:.85rem 1rem;background:transparent;color:var(--secondary-dark);font-weight:900;letter-spacing:.02em}
.leaveTab.is-active{background:#fff;box-shadow:var(--shadow-soft);color:var(--primary-dark)}
.leaveTabPanel[hidden]{display:none!important}
.leaveCreditItem .pill{min-width:4.25rem;text-align:center}
.leaveCreditSummary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;margin:.25rem 0 1rem}
.leaveCreditSummary article{padding:.85rem .95rem;border-radius:1.1rem;background:rgba(37,111,34,.06);display:grid;gap:.15rem}
.leaveCreditSummary span{font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:#687164}
.leaveCreditSummary b{font-size:1.15rem;color:var(--secondary-dark)}
.leaveHistoryTimeline{display:grid;gap:.55rem}
.leaveHistoryItem{display:flex;justify-content:space-between;align-items:flex-start;gap:.75rem;padding:.75rem .8rem;border-radius:1rem;background:#fff;border:1px solid rgba(37,111,34,.08)}
.leaveHistoryItem b{display:block;text-transform:capitalize;color:var(--secondary-dark)}
.leaveHistoryItem small{display:block;margin-top:.15rem;color:#687164;line-height:1.35}
.leaveHistoryItem>span{text-align:right;white-space:nowrap}
.leaveHistoryItem>span strong{display:block;color:var(--primary-dark)}
@media(max-width:520px){.leaveTabs{top:4.25rem}.leaveCreditSummary{grid-template-columns:1fr}.leaveHistoryItem{align-items:stretch}.leaveHistoryItem>span{text-align:left}}

/*/////////////////////////////////////////////////////// PWA rule: pull-to-refresh only + native full-page leave */
body.is-full-page.hasBottomNav {
  padding-bottom: 0;
}

body.is-leave-page .appHeader {
  display: none !important;
}

body.is-leave-page .bottomNav {
  display: none !important;
}

body.is-leave-page .main {
  padding-top: calc(env(safe-area-inset-top) + .55rem);
  padding-bottom: calc(env(safe-area-inset-bottom) + 1rem);
}

.leavePage {
  min-height: calc(100dvh - env(safe-area-inset-top));
  transform: translateY(calc(var(--pull-y, 0px) * .16));
  transition: transform .18s ease;
}

.nativePageBar {
  position: sticky;
  top: calc(env(safe-area-inset-top) + .25rem);
  z-index: 75;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem .15rem .8rem;
  background: rgba(248, 251, 247, .86);
  backdrop-filter: blur(.85rem);
  -webkit-backdrop-filter: blur(.85rem);
}

.nativePageBar h2 {
  margin: 0;
  color: var(--secondary-dark);
  font-size: 1.45rem;
  letter-spacing: -.04em;
}

.nativeBackBtn {
  width: 2.65rem;
  height: 2.65rem;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999rem;
  background: #fff;
  color: var(--secondary-dark);
  border: 1px solid rgba(27, 74, 25, .08);
  box-shadow: 0 .55rem 1.3rem rgba(27, 74, 25, .10);
}

.nativeBackBtn svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.leavePage .leaveToolbar {
  position: sticky;
  top: calc(env(safe-area-inset-top) + 8.85rem);
  z-index: 60;
  margin: .45rem 0 .85rem;
  padding: .25rem 0 .55rem;
  background: rgba(248, 251, 247, .84);
  backdrop-filter: blur(.8rem);
  -webkit-backdrop-filter: blur(.8rem);
}

.leavePage .leaveToolbar .bigButton {
  width: 100%;
}

.leavePullRefresh {
  height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  color: #5e695b;
  font-size: .78rem;
  font-weight: 900;
  transform: translateY(calc(var(--pull-y, 0px) - 2rem));
  opacity: calc(min(var(--pull-y, 0px), 70px) / 70);
  pointer-events: none;
}

.leavePullRefresh.is-ready {
  color: var(--secondary-dark);
}

.leavePullRefresh.is-refreshing .logsPullRefresh__spinner {
  animation: spin .75s linear infinite;
}

.leaveSheet[hidden] {
  display: none !important;
}

.leaveSheet {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 .75rem env(safe-area-inset-bottom);
}

.leaveSheetBackdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: rgba(12, 24, 14, .38);
  backdrop-filter: blur(.45rem);
  -webkit-backdrop-filter: blur(.45rem);
}

.leaveSheetCard {
  --sheet-y: 0px;
  position: relative;
  z-index: 1;
  width: min(100%, 46rem);
  height: min(70dvh, 46rem);
  max-height: calc(100dvh - env(safe-area-inset-top) - .8rem);
  margin: 0;
  overflow: auto;
  border-radius: 1.75rem 1.75rem 0 0;
  transform: translateY(var(--sheet-y));
  transition: height .22s ease, border-radius .22s ease, transform .18s ease;
  box-shadow: 0 -1rem 3rem rgba(12, 24, 14, .22);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.leaveSheetCard.is-dragging {
  transition: none;
}

.leaveSheetCard.is-fullscreen {
  height: calc(100dvh - env(safe-area-inset-top) - .3rem);
  border-radius: 1.35rem 1.35rem 0 0;
}

.leaveSheetHandle {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: .35rem 0 .65rem;
  background: linear-gradient(to bottom, #fff 72%, rgba(255,255,255,0));
  touch-action: none;
}

.leaveSheetHandle::before {
  content: "";
  width: 3.15rem;
  height: .32rem;
  border-radius: 999rem;
  background: rgba(27, 74, 25, .24);
}

body.is-leave-sheet-open {
  overflow: hidden;
}

body.is-leave-sheet-open .leavePage {
  transform: none;
}

@media (min-width: 760px) {
  body.is-leave-page .leaveDetail {
    top: calc(env(safe-area-inset-top) + 9.5rem);
  }
}

@media (max-width: 520px) {
  body.is-leave-page .main {
    padding-left: .8rem;
    padding-right: .8rem;
  }

  .nativePageBar {
    top: calc(env(safe-area-inset-top) + .15rem);
  }

  .leavePage .leaveTabs {
    top: calc(env(safe-area-inset-top) + 4.15rem);
  }

  .leavePage .leaveToolbar {
    top: calc(env(safe-area-inset-top) + 7.6rem);
  }

  .leaveSheet {
    padding-left: 0;
    padding-right: 0;
  }

  .leaveSheetCard {
    width: 100%;
    border-radius: 1.55rem 1.55rem 0 0;
  }
}


/*/////////////////////////////////////////////////////// v7.9.52 Leave layout polish + stable bottom sheet gesture */
body.is-leave-page .appShell {
  width: min(100%, 48rem);
  min-height: 100dvh;
  padding-top: 0 !important;
  padding-left: .875rem !important;
  padding-right: .875rem !important;
  padding-bottom: calc(env(safe-area-inset-bottom) + 1rem) !important;
}

body.is-leave-page .main {
  padding-top: 0 !important;
  display: block;
}

body.is-leave-page .screen,
body.is-leave-page .appPage {
  animation: none !important;
}

.leavePage {
  min-height: 100dvh;
  padding-top: calc(env(safe-area-inset-top) + .75rem);
  gap: .8rem;
}

.nativePageBar {
  top: 0;
  margin: 0 -.125rem;
  padding: .35rem .1rem .55rem;
  min-height: 3.75rem;
  background: linear-gradient(to bottom, rgba(246,248,244,.98), rgba(246,248,244,.86));
}

.nativePageBar .eyebrow {
  font-size: .68rem;
  letter-spacing: .16em;
}

.nativePageBar h2 {
  font-size: 1.7rem;
}

.nativeBackBtn {
  width: 2.85rem;
  height: 2.85rem;
}

.leavePage .leaveTabs {
  position: sticky;
  top: calc(env(safe-area-inset-top) + 4.25rem);
  z-index: 64;
  margin: .25rem 0 .75rem;
  border-radius: 1.25rem;
}

.leavePage .leaveToolbar {
  position: static;
  margin: 0 0 .85rem;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.leavePage .leaveToolbar .bigButton {
  min-height: 3.85rem;
  border-radius: 999rem;
}

.leaveSplit {
  gap: .8rem;
}

.leaveListItem,
.leavePage .panelCard {
  border: 1px solid rgba(27,74,25,.08);
}

.leaveSheet {
  padding: 0;
  align-items: flex-end;
}

.leaveSheetBackdrop {
  background: rgba(10,20,11,.28);
  backdrop-filter: blur(.55rem);
  -webkit-backdrop-filter: blur(.55rem);
}

.leaveSheetCard {
  width: min(100%, 48rem);
  height: 70dvh;
  max-height: calc(100dvh - env(safe-area-inset-top));
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1.85rem 1.85rem 0 0;
  touch-action: pan-y;
  will-change: transform, height;
}

.leaveSheetCard.is-fullscreen {
  height: calc(100dvh - env(safe-area-inset-top));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.leaveSheetHandle {
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  padding: .65rem 0 .5rem;
  cursor: grab;
}

.leaveSheetCard.is-dragging .leaveSheetHandle {
  cursor: grabbing;
}

.leaveFormHead {
  flex: 0 0 auto;
  padding: .15rem 0 .35rem;
}

.leaveForm {
  flex: 1 1 auto;
  min-height: 0;
  padding-bottom: calc(env(safe-area-inset-bottom) + 1rem);
  overflow: visible;
}

.leaveSheetCard:not(.is-fullscreen) .leaveForm {
  overflow: hidden;
}

.leaveSheetCard.is-fullscreen .leaveForm {
  overflow: visible;
}

.leaveForm label {
  font-size: 1rem;
}

.leaveForm textarea,
.leaveForm input,
.leaveForm select {
  min-height: 3.45rem;
  font-size: 1rem;
  border-radius: 1.15rem;
}

.leaveForm textarea {
  min-height: 8rem;
}

@media (max-width: 520px) {
  body.is-leave-page .appShell {
    padding-left: .8rem !important;
    padding-right: .8rem !important;
  }

  .leavePage {
    padding-top: calc(env(safe-area-inset-top) + .55rem);
  }

  .nativePageBar {
    top: 0;
    padding-top: .25rem;
  }

  .leavePage .leaveTabs {
    top: calc(env(safe-area-inset-top) + 3.9rem);
  }

  .leaveSheetCard {
    width: 100%;
    border-radius: 1.7rem 1.7rem 0 0;
  }
}


/*/////////////////////////////////////////////////////// v7.9.52 Bottom sheet entrance animation */
.leaveSheet {
  pointer-events: none;
}

.leaveSheet.is-open,
.leaveSheet.is-closing {
  pointer-events: auto;
}

.leaveSheetBackdrop {
  opacity: 0;
  transition: opacity .22s ease;
}

.leaveSheet.is-open .leaveSheetBackdrop {
  opacity: 1;
}

.leaveSheet.is-closing .leaveSheetBackdrop {
  opacity: 0;
}

.leaveSheetCard {
  --sheet-y: 0px;
  transform: translateY(calc(100% + 2rem));
  transition:
    transform .34s cubic-bezier(.2,.9,.2,1),
    height .22s ease,
    border-radius .22s ease;
}

.leaveSheet.is-open .leaveSheetCard {
  transform: translateY(var(--sheet-y));
}

.leaveSheet.is-closing .leaveSheetCard {
  transform: translateY(calc(100% + 2rem));
}

.leaveSheetCard.is-dragging {
  transition: none !important;
}


/*/////////////////////////////////////////////////////// v7.9.58 Leave compact sheet + fullscreen details */
.leaveSheetCard:not(.is-fullscreen) {
  height: 70dvh;
}

.leaveSheetCard:not(.is-fullscreen) .sheetFullOnly {
  display: none !important;
}

.leaveSheetCard:not(.is-fullscreen) .leaveSheetHandle {
  padding: .48rem 0 .3rem;
}

.leaveSheetCard:not(.is-fullscreen) .leaveFormHead {
  align-items: center;
  padding-bottom: .2rem;
}

.leaveSheetCard:not(.is-fullscreen) .leaveFormHead .eyebrow {
  font-size: .62rem;
  letter-spacing: .15em;
}

.leaveSheetCard:not(.is-fullscreen) .leaveFormHead h3 {
  font-size: 1.28rem;
  line-height: 1.08;
  margin-top: .12rem;
}

.leaveSheetCard:not(.is-fullscreen) #leaveCancelBtn {
  min-height: 2.65rem;
  padding: .68rem 1rem;
  border-radius: 999rem;
}

.leaveSheetCard:not(.is-fullscreen) .leaveForm {
  display: flex;
  flex-direction: column;
  gap: .58rem;
  margin-top: .45rem;
  min-height: 0;
  overflow: hidden;
}

.leaveSheetCard:not(.is-fullscreen) .leaveForm label {
  gap: .22rem;
  font-size: .82rem;
  line-height: 1.05;
}

.leaveSheetCard:not(.is-fullscreen) .leaveFormGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
}

.leaveSheetCard:not(.is-fullscreen) .leaveForm textarea,
.leaveSheetCard:not(.is-fullscreen) .leaveForm input,
.leaveSheetCard:not(.is-fullscreen) .leaveForm select {
  min-height: 2.85rem;
  padding: .68rem .8rem;
  border-radius: .98rem;
  font-size: .88rem;
}

.leaveSheetCard:not(.is-fullscreen) .leaveForm textarea {
  min-height: 4.15rem;
  max-height: 4.15rem;
  resize: none;
}

.leaveSheetCard:not(.is-fullscreen) #leaveHoursWrap[hidden] {
  display: none !important;
}

.leaveSheetCard:not(.is-fullscreen) #leaveSubmitBtn {
  margin-top: auto;
  min-height: 3.15rem;
  border-radius: 999rem;
  font-size: .92rem;
  flex: 0 0 auto;
}

.leaveSheetCard.is-fullscreen .sheetFullOnly {
  display: block;
}

.leaveSheetCard.is-fullscreen .leaveForm {
  padding-bottom: calc(env(safe-area-inset-bottom) + 1.25rem);
}

.leaveSheetCard.is-fullscreen #leaveSubmitBtn {
  position: sticky;
  bottom: calc(env(safe-area-inset-bottom) + .75rem);
  z-index: 4;
  box-shadow: 0 1rem 2rem rgba(24,24,24,.16);
}

.leaveSheetCard.is-fullscreen .leaveForm textarea {
  min-height: 8rem;
  max-height: none;
}

@media (max-width: 520px) {
  .leaveSheetCard:not(.is-fullscreen) {
    height: 70dvh;
  }

  .leaveSheetCard:not(.is-fullscreen) .leaveFormGrid {
    grid-template-columns: 1fr 1fr;
  }

  .leaveSheetCard:not(.is-fullscreen) .leaveFormGrid label {
    min-width: 0;
  }

  .leaveSheetCard:not(.is-fullscreen) .leaveFormHead {
    gap: .65rem;
  }
}

@media (max-height: 760px) {
  .leaveSheetCard:not(.is-fullscreen) .leaveForm {
    gap: .44rem;
  }

  .leaveSheetCard:not(.is-fullscreen) .leaveForm textarea,
  .leaveSheetCard:not(.is-fullscreen) .leaveForm input,
  .leaveSheetCard:not(.is-fullscreen) .leaveForm select {
    min-height: 2.55rem;
    padding-top: .55rem;
    padding-bottom: .55rem;
  }

  .leaveSheetCard:not(.is-fullscreen) .leaveForm textarea {
    min-height: 3.3rem;
    max-height: 3.3rem;
  }

  .leaveSheetCard:not(.is-fullscreen) #leaveSubmitBtn {
    min-height: 2.85rem;
  }
}

.leaveCreditMeta{display:flex;flex-direction:column;gap:.35rem;margin:.15rem 0 1rem;padding:.9rem 1rem;border-radius:1.1rem;background:rgba(164,96,38,.08);color:#687164;font-weight:800}
.leaveCreditMeta span{font-size:.86rem;line-height:1.35}.leaveCreditMeta b{color:var(--secondary-dark)}
.leaveHistoryItem.is-credit span strong{color:var(--secondary-dark)}
.leaveHistoryItem.is-debit span strong{color:var(--alert-error)}
.leaveHistoryItem div small+small{margin-top:.2rem;color:#7d8479}


/* v7.9.58 Leave detail pages */
.leaveSubPage {
  display: grid;
  gap: 1rem;
  padding-bottom: calc(env(safe-area-inset-bottom) + 2rem);
}

.leaveDetail--page {
  margin-top: 0;
}

.leaveDetail--page .leaveCreditSummary {
  margin-top: .25rem;
}

.leaveDetail--page .leaveRemarksBox {
  margin-top: 1rem;
}

.leaveSyncBanner {
  display: grid;
  gap: .25rem;
  padding: .9rem 1rem;
  border-radius: 1.1rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(37,111,34,.12);
  background: rgba(37,111,34,.07);
}

.leaveSyncBanner b {
  color: var(--secondary-dark);
}

.leaveSyncBanner small {
  color: #687164;
  font-weight: 800;
  line-height: 1.35;
}

.leaveSyncBanner.is-pending {
  background: rgba(209,130,55,.10);
  border-color: rgba(209,130,55,.18);
}

.leaveSyncBanner.is-pending b {
  color: var(--primary-dark);
}

@media (max-width: 760px) {
  .leaveSplit {
    display: grid;
    grid-template-columns: 1fr;
  }

  .leaveSplit > .leaveDetail {
    display: none !important;
  }

  .leaveSubPage .nativePageBar {
    margin-bottom: .25rem;
  }
}


/*/////////////////////////////////////////////////////// v7.9.58 Leave navigation cleanup + refined create form */
.leaveList--full {
  display: grid;
  gap: .75rem;
}

.leaveSubPage {
  padding-top: .15rem;
}

.leaveDetail--page {
  display: grid;
  gap: 1rem;
}

.leaveDetail--page > .eyebrow {
  margin-bottom: -.55rem;
}

.leaveDetail--page > h2 {
  margin: 0;
  color: var(--secondary-dark);
  font-size: clamp(1.4rem, 5vw, 2rem);
  line-height: 1.05;
}

.leaveSheetCard {
  box-sizing: border-box;
}

.leaveSheetCard .leaveFormHead,
.leaveSheetCard .leaveForm,
.leaveSheetCard .leaveSheetHandle {
  width: 100%;
  box-sizing: border-box;
}

.leaveFormHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .9rem;
}

.leaveFormHead > div {
  min-width: 0;
}

.leaveFormHead h3 {
  margin: .18rem 0 0;
}

.leaveForm {
  width: 100%;
  box-sizing: border-box;
}

.leaveFormGrid {
  align-items: end;
}

.leaveFormGrid:has(#leaveHoursWrap[hidden]) {
  grid-template-columns: 1fr;
}

.leaveForm label {
  min-width: 0;
}

.leaveForm textarea,
.leaveForm input,
.leaveForm select {
  box-sizing: border-box;
  display: block;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  line-height: 1.25;
}

.leaveForm input[type="date"] {
  min-width: 0;
}

.leaveForm input[type="file"] {
  min-height: auto;
  padding: .8rem;
  border-style: dashed;
}

.leaveSheetCard:not(.is-fullscreen) .leaveFormHead {
  min-height: 3.05rem;
}

.leaveSheetCard:not(.is-fullscreen) .leaveFormHead h3 {
  font-size: 1.22rem;
}

.leaveSheetCard:not(.is-fullscreen) .leaveForm {
  gap: .64rem;
}

.leaveSheetCard:not(.is-fullscreen) .leaveForm label {
  font-size: .86rem;
}

.leaveSheetCard:not(.is-fullscreen) .leaveForm textarea,
.leaveSheetCard:not(.is-fullscreen) .leaveForm input,
.leaveSheetCard:not(.is-fullscreen) .leaveForm select {
  height: 2.95rem;
  min-height: 2.95rem;
}

.leaveSheetCard:not(.is-fullscreen) .leaveForm textarea {
  height: 4.25rem;
  min-height: 4.25rem;
  max-height: 4.25rem;
}

.leaveSheetCard:not(.is-fullscreen) #leaveSubmitBtn {
  width: 100%;
  margin-top: .3rem;
}

@media (max-width: 520px) {
  .leaveDetail--page {
    border-radius: 1.55rem;
  }

  .leaveSheetCard:not(.is-fullscreen) .leaveFormGrid,
  .leaveFormGrid:has(#leaveHoursWrap[hidden]) {
    grid-template-columns: 1fr;
    gap: .64rem;
  }

  .leaveSheetCard:not(.is-fullscreen) {
    padding-left: 1.05rem;
    padding-right: 1.05rem;
  }
}