:root{--primary:#8b7185;--secondary:#c7adb6;--bg:#f8f5f7;--ink:#29242a;--muted:#817781}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Poppins,sans-serif;padding-bottom:86px}button,input,textarea{font:inherit}.login-shell{min-height:100vh;display:flex;flex-direction:column;justify-content:center;max-width:430px;margin:auto;padding:32px}.brand-mark{width:64px;height:64px;border-radius:22px;background:var(--primary);color:#fff;display:grid;place-items:center}.brand-mark span{font-size:34px}.eyebrow{margin:18px 0 3px;color:var(--primary);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700}.login-shell h1,.content h1{font-family:"Cormorant Garamond",serif;font-size:2.35rem;margin:0}.sub{color:var(--muted);font-size:.86rem;line-height:1.55}.login-shell form,.form{display:grid;gap:15px;margin-top:24px}label{display:grid;gap:6px;font-size:.75rem;font-weight:600}input,textarea{width:100%;border:1px solid #ddd3da;border-radius:12px;padding:13px;background:#fff;color:var(--ink)}button{border:0;border-radius:12px;padding:13px 16px;background:var(--primary);color:#fff;font-weight:700;cursor:pointer}button:disabled{opacity:.55}header{padding:22px 20px 18px;background:#fff;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #eee7ec}header .eyebrow{margin:0}header h2{margin:2px 0 0;font-size:1.1rem}header span{font-size:.72rem;color:var(--muted)}.avatar{width:46px;height:46px;border-radius:50%;background:#eee7ec;display:grid;place-items:center;overflow:hidden}.avatar img,.profile-photo img{width:100%;height:100%;object-fit:cover}.content{max-width:680px;margin:auto;padding:22px 18px}.hero{border-radius:20px;padding:22px;background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff}.hero p{margin:0;font-size:.75rem}.hero h1{font-size:2.6rem}.hero span{font-size:.8rem}.content h3{font-size:.82rem;margin:24px 0 10px}.shift,.request{background:#fff;border:1px solid #e9e1e7;border-radius:14px;padding:13px;margin-bottom:9px;display:flex;align-items:center;justify-content:space-between;gap:10px}.shift div,.request div{display:grid;gap:2px}.shift strong,.request strong{font-size:.82rem}.shift span,.request span{font-size:.7rem;color:var(--muted)}.shift b{font-size:.72rem;text-align:right}.icon{padding:7px;background:transparent;color:var(--primary)}.icon span{font-size:19px}.empty{padding:28px 14px;text-align:center;color:#9b9199;background:#fff;border:1px dashed #ddd2da;border-radius:14px;font-size:.8rem}.section-title{display:flex;align-items:center;justify-content:space-between}.section-title .eyebrow{margin-top:0}.round{width:44px;height:44px;padding:0;border-radius:50%;display:grid;place-items:center}.card{background:#fff;border:1px solid #e9e1e7;border-radius:16px;padding:16px}.request b{font-size:.68rem;text-transform:capitalize;padding:6px 8px;border-radius:999px}.request b.pending{background:#f5efe4;color:#8a6a2e}.request b.approved{background:#edf4ed;color:#4c704f}.request b.denied{background:#f7eaea;color:#925050}.profile-photo{width:112px;height:112px;border-radius:50%;margin:18px auto;background:#eee7ec;display:grid;place-items:center;overflow:hidden}.profile-photo span{font-size:56px;color:var(--primary)}.secondary{background:#eee7ec;color:var(--primary)}.details{display:grid;gap:4px;margin-top:18px}.details small{font-size:.62rem;color:var(--muted);margin-top:10px}.details strong{font-size:.86rem}.logout{width:100%;margin-top:18px;background:transparent;color:#8a5960;border:1px solid #e5d2d6}nav{position:fixed;z-index:20;left:0;right:0;bottom:0;height:76px;padding-bottom:env(safe-area-inset-bottom);background:#fff;border-top:1px solid #e8e0e6;display:grid;grid-template-columns:repeat(4,1fr)}nav button{background:transparent;color:#918791;border-radius:0;padding:8px 2px;display:grid;place-items:center;align-content:center;gap:2px}nav button.on{color:var(--primary)}nav small{font-size:.58rem}.overlay{position:fixed;z-index:50;inset:0;background:#0007;display:grid;place-items:end center;padding:16px}.modal{width:min(100%,500px);background:#fff;border-radius:22px;padding:20px;display:grid;gap:14px}.modal h2{margin:0;font-family:"Cormorant Garamond",serif}.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.toast{position:fixed;z-index:100;left:50%;bottom:92px;transform:translateX(-50%);background:#352f35;color:#fff;padding:11px 15px;border-radius:12px;font-size:.76rem;max-width:calc(100vw - 30px);box-shadow:0 10px 30px #0003}.toast.error{background:#8d4545}@media(min-width:700px){nav{left:50%;width:680px;transform:translateX(-50%);border-left:1px solid #e8e0e6;border-right:1px solid #e8e0e6}.overlay{place-items:center}.modal{border-radius:20px}}
.push-button{width:100%;margin-top:10px}.push-button .material-symbols-outlined{vertical-align:middle;margin-right:5px}

/* =========================================================
   PawPrint Staff App — Production Mobile Hardening
   ========================================================= */

html {
  min-height: 100%;
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: calc(82px + env(safe-area-inset-bottom));
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

button,
input,
textarea,
select {
  font-size: 16px;
}

button {
  min-height: 46px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

input,
textarea,
select {
  min-height: 48px;
}

.login-shell {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  padding:
    calc(28px + env(safe-area-inset-top))
    max(24px, env(safe-area-inset-right))
    calc(28px + env(safe-area-inset-bottom))
    max(24px, env(safe-area-inset-left));
}

.content {
  width: 100%;
  padding:
    22px
    max(18px, env(safe-area-inset-right))
    28px
    max(18px, env(safe-area-inset-left));
}

header {
  padding:
    calc(18px + env(safe-area-inset-top))
    max(20px, env(safe-area-inset-right))
    18px
    max(20px, env(safe-area-inset-left));
}

nav {
  height: calc(76px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
}

nav button {
  min-width: 0;
  min-height: 60px;
}

nav .material-symbols-outlined {
  font-size: 23px;
}

.hero,
.card,
.shift,
.request {
  max-width: 100%;
}

.shift,
.request {
  flex-wrap: wrap;
}

.profile-photo {
  width: 116px;
  height: 116px;
}

.secondary.push-button,
#photoComing {
  width: 100%;
  margin-top: 10px;
}

.overlay {
  padding:
    16px
    max(16px, env(safe-area-inset-right))
    calc(16px + env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
}

.modal {
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.toast {
  bottom: calc(90px + env(safe-area-inset-bottom));
}

@media (max-width: 420px) {
  .login-shell {
    padding-left: 22px;
    padding-right: 22px;
  }

  .login-shell h1,
  .content h1 {
    font-size: 2.1rem;
  }

  .hero {
    padding: 19px;
  }

  .hero h1 {
    font-size: 2.25rem;
  }

  .content {
    padding-left: 15px;
    padding-right: 15px;
  }

  .shift,
  .request {
    padding: 12px;
  }

  .actions {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 700px) {
  nav {
    left: 50%;
    right: auto;
    width: 680px;
    transform: translateX(-50%);
    border-left: 1px solid #e8e0e6;
    border-right: 1px solid #e8e0e6;
  }
}

@media (display-mode: standalone) {
  body {
    user-select: none;
  }

  input,
  textarea {
    user-select: text;
  }
}


/* =========================================================
   Staff Profile — Contact & Emergency Information
   ========================================================= */

.profile-section-title {
  margin-top: 24px;
}

.profile-section-title h3 {
  margin: 2px 0 0;
  font-size: 1rem;
}

.profile-edit-form {
  display: grid;
  gap: 16px;
  margin-top: 10px;
}

.profile-edit-form label {
  gap: 7px;
}

.profile-edit-form input {
  width: 100%;
}

.profile-address-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px 92px;
  gap: 10px;
  align-items: end;
}

.profile-form-divider {
  height: 1px;
  background: #eee7ec;
  margin: 4px 0 0;
}

.profile-form-heading {
  margin: 0 !important;
  font-size: .9rem !important;
}

#saveProfile {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 2px;
}

#saveProfile .material-symbols-outlined {
  font-size: 20px;
}

#saveProfile:disabled {
  cursor: wait;
}

@media (max-width: 420px) {
  .profile-edit-form {
    padding: 15px;
    gap: 14px;
  }

  .profile-address-row {
    grid-template-columns: minmax(0, 1fr) 68px 84px;
    gap: 8px;
  }
}

@media (max-width: 350px) {
  .profile-address-row {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   Staff First Login — Welcome & Workplace Acknowledgment
   ========================================================= */

.staff-welcome-shell {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding:
    max(20px, env(safe-area-inset-top))
    18px
    max(20px, env(safe-area-inset-bottom));
  background: var(--bg);
}

.staff-welcome-card {
  width: min(100%, 470px);
  background: #fff;
  border: 1px solid #e9e1e7;
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 18px 50px #29242a14;
}

.staff-welcome-icon {
  width: 58px;
  height: 58px;
  border-radius: 19px;
  display: grid;
  place-items: center;
  background: var(--primary);
  color: #fff;
}

.staff-welcome-icon.small {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  flex: 0 0 auto;
}

.staff-welcome-icon .material-symbols-outlined {
  font-size: 30px;
}

.staff-welcome-icon.small .material-symbols-outlined {
  font-size: 25px;
}

.staff-welcome-card .eyebrow {
  margin-top: 18px;
}

.staff-welcome-card h1 {
  margin: 3px 0 10px;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2rem, 9vw, 2.7rem);
  line-height: .98;
}

.staff-welcome-copy {
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.65;
  margin: 14px 0 22px;
}

#continueWelcome,
#submitAcknowledgment {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
}

.agreement-heading {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 16px;
}

.agreement-heading .eyebrow {
  margin: 0 0 2px;
}

.agreement-heading h1 {
  font-size: 1.55rem;
  line-height: 1.05;
  margin: 0;
}

.agreement-points {
  display: grid;
  gap: 8px;
}

.agreement-points > div {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 8px;
  align-items: start;
}

.agreement-points .material-symbols-outlined {
  color: var(--primary);
  font-size: 18px;
  margin-top: 1px;
}

.agreement-points p {
  margin: 0;
  font-size: .75rem;
  line-height: 1.4;
}

.agreement-note {
  margin: 13px 0;
  padding: 10px 11px;
  border-radius: 11px;
  background: var(--bg);
  color: var(--muted);
  font-size: .68rem;
  line-height: 1.45;
}

.agreement-checkbox {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 9px;
  align-items: start;
  padding: 11px;
  border: 1px solid #e5dce3;
  border-radius: 12px;
  background: #fff;
  font-size: .72rem;
  line-height: 1.4;
}

.agreement-checkbox input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--primary);
}

.signature-section {
  margin: 13px 0;
}

.signature-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
}

.signature-title div {
  display: grid;
  gap: 1px;
}

.signature-title strong {
  font-size: .76rem;
}

.signature-title small {
  color: var(--muted);
  font-size: .62rem;
}

.signature-clear {
  width: auto;
  padding: 4px 8px;
  background: transparent;
  color: var(--primary);
  font-size: .67rem;
}

#signaturePad {
  display: block;
  width: 100%;
  height: 105px;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg,#e4d9e1,#f0e9ee) border-box;
  border: 1px solid transparent;
  border-radius: 12px;
  touch-action: none;
}

#submitAcknowledgment:disabled {
  cursor: wait;
}

@media (max-height: 720px) {
  .staff-agreement-shell {
    place-items: start center;
  }

  .staff-agreement-card {
    padding: 18px;
  }

  .agreement-points {
    gap: 6px;
  }

  #signaturePad {
    height: 85px;
  }
}


/* =========================================================
   Staff Navigation — Strong Active Tab
   ========================================================= */

nav button {
  color: #9b929a;
  transition: color .18s ease, transform .18s ease;
}

nav button.on {
  color: var(--primary) !important;
  font-weight: 700;
}

nav button.on .material-symbols-outlined {
  color: var(--primary) !important;
  font-variation-settings: "FILL" 1, "wght" 600, "GRAD" 0, "opsz" 24;
}

nav button.on small {
  color: var(--primary) !important;
  font-weight: 700;
}

nav button:active {
  transform: scale(.96);
}


/* =========================================================
   Staff Navigation — Active Purple Tile
   ========================================================= */

nav button {
  margin: 7px 6px;
  padding: 7px 3px;
  border-radius: 12px;
  color: #9b929a;
  transition:
    background-color .18s ease,
    color .18s ease,
    transform .18s ease;
}

nav button.on {
  background: var(--primary) !important;
  color: #fff !important;
  font-weight: 700;
}

nav button.on .material-symbols-outlined {
  color: #fff !important;
  font-variation-settings:
    "FILL" 1,
    "wght" 600,
    "GRAD" 0,
    "opsz" 24;
}

nav button.on small {
  color: #fff !important;
  font-weight: 700;
}

nav button:active {
  transform: scale(.96);
}


/* =========================================================
   Staff Profile Photo Cropper
   ========================================================= */

.staff-photo-overlay {
  z-index: 150;
  place-items: center;
}

.staff-photo-modal {
  width: min(100%, 430px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
}

.staff-photo-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.staff-photo-heading .eyebrow {
  margin: 0 0 3px;
}

.staff-photo-heading h2 {
  margin: 0;
}

.staff-photo-heading .sub {
  margin: 4px 0 0;
}

.staff-photo-close {
  flex: 0 0 auto;
}

.staff-photo-crop {
  width: min(100%, 340px);
  aspect-ratio: 1;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 22px;
  background: #eee7ec;
  border: 3px solid var(--primary);
  touch-action: none;
}

.staff-photo-crop canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}

.staff-photo-crop canvas:active {
  cursor: grabbing;
}

.staff-photo-zoom {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  font-size: .76rem;
}

.staff-photo-zoom input {
  padding: 0;
  border: 0;
  accent-color: var(--primary);
}

#saveStaffPhoto {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

#saveStaffPhoto .material-symbols-outlined {
  font-size: 20px;
}

@media (max-height: 720px) {
  .staff-photo-modal {
    padding: 16px;
  }

  .staff-photo-crop {
    width: min(100%, 280px);
  }
}


/* =========================================================
   Staff Portal — Login Branding
   ========================================================= */

.staff-login-brand {
  display: flex;
  justify-content: center;
  margin: 0 auto 10px;
}

.staff-login-daisy-logo {
  display: block;
  width: min(190px, 55vw);
  max-height: 150px;
  object-fit: contain;
}

.staff-login-powered {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px auto 0;
  padding-top: 16px;
  border-top: 1px solid rgba(139,113,133,.14);
}

.staff-login-powered img {
  display: block;
  width: min(185px, 52vw);
  max-height: 72px;
  object-fit: contain;
  opacity: .72;
}