/* Housekeeper Assist portal — Helpers screen (revamp/screenshots). Uses the hk- kit in src/index.css. */

/* toolbar: search, "N helpers in this household", then Display Disabled + Export on the right */
.hlp-count { font-size: 12px; color: var(--hk-muted); }
.hlp-toolbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hlp-toggle { gap: 7px; font-weight: 500; color: #3d524d; user-select: none; }
.hlp-toggle input { margin: 0; }

/* helper cards */
.hlp-grid { align-items: start; }
@media (min-width: 1600px) { .hlp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hlp-card--off { background: #fbfcfa; }
.hlp-card--off .hk-card-head h3 { color: var(--hk-muted); }
.hlp-head { margin-bottom: 14px; }
.hlp-head .hk-meta h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hlp-head .hk-meta p { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hlp-routine { font-size: 12.5px; color: #859087; margin: 4px 0 8px; display: flex; align-items: center; gap: 8px; min-width: 0; }
.hlp-routine svg { flex: none; color: #97a397; }
.hlp-routine span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hlp-routine b { color: var(--hk-teal); font-weight: 600; }
.hlp-never { color: #99a39d; font-weight: 500; }
.hlp-foot-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* clickable avatar: photo or initials, a camera badge on hover */
.hlp-avatar { position: relative; width: 44px; height: 44px; font-size: 14px; border: none; padding: 0; cursor: pointer; overflow: visible; }
.hlp-avatar img { border-radius: 50%; }
.hlp-avatar:hover { box-shadow: 0 0 0 2px #c4ddd8; }
.hlp-avatar--busy { opacity: .5; cursor: progress; }
.hlp-avatar-cam { position: absolute; right: -2px; bottom: -2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; color: #3d524d; box-shadow: 0 0 0 1px var(--hk-line);
                  display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s; }
.hlp-avatar:hover .hlp-avatar-cam, .hlp-avatar:focus-visible .hlp-avatar-cam { opacity: 1; }

/* ⋯ menu: enable / disable, delete */
.hlp-more { position: relative; }
.hlp-more-btn { width: 30px; height: 30px; background: transparent; }
.hlp-more-menu { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 20; min-width: 170px; background: #fff; border: 1px solid var(--hk-line); border-radius: 9px;
                 box-shadow: 0 10px 30px rgba(20,49,38,.12); padding: 5px; display: flex; flex-direction: column; }
.hlp-more-menu button { display: flex; align-items: center; gap: 8px; text-align: left; background: none; border: none; border-radius: 6px; padding: 9px 11px; font-size: 13px; color: var(--hk-ink); cursor: pointer; white-space: nowrap; }
.hlp-more-menu button:hover:not(:disabled) { background: #f5f8f5; }
.hlp-more-menu button:disabled { opacity: .45; cursor: not-allowed; }
.hlp-more-menu .hlp-more-danger { color: var(--hk-red); }
.hlp-more-menu .hlp-more-danger svg { width: 14px; height: 14px; }

/* empty state */
.hk-empty > svg { color: #9eb49b; }
.hk-empty p { margin: 0 auto 18px; max-width: 380px; }

/* add / edit helper dialog (revamp 09-add-helper) */
.hlp-backdrop { background: rgba(23,55,49,.38); backdrop-filter: blur(3px); }
.hlp-dialog { background: #fff; border-radius: 14px; width: 100%; max-width: 700px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 25px 100px rgba(20,49,38,.27); color: var(--hk-ink); }
.hlp-dialog-head { padding: 22px 28px 18px; border-bottom: 1px solid var(--hk-line); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.hlp-dialog-head h2 { font-size: 18px; font-weight: 650; letter-spacing: -.3px; margin: 0; }
.hlp-dialog-x { background: transparent; }
.hlp-dialog-body { padding: 24px 28px; overflow: auto; }
.hlp-formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 17px; }
.hlp-field { display: block; margin: 0 0 17px; }
.hlp-field .form-input { border-color: #dfe6d9; border-radius: 6px; height: 42px; }
.hlp-checkrow { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--hk-ink); cursor: pointer; margin: 0 0 4px; }
.hlp-dialog .hk-notice svg { flex: none; margin-top: 1px; }
.hlp-access { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 0 8px; }
.hlp-access .hk-label { margin-bottom: 2px; }
.hlp-access small { font-size: 12px; color: var(--hk-muted); }
.hlp-dialog-foot { display: flex; justify-content: flex-end; gap: 9px; border-top: 1px solid var(--hk-line); padding-top: 18px; margin-top: 18px; }

/* sign-in QR code (Invite) */
.hlp-qr { border-radius: 14px; }
.hlp-qr .qr-actions .hk-btn { min-height: 38px; }

@media (max-width: 768px) {
  .hlp-toolbar-right { margin-left: 0; }
  .hlp-count { flex-basis: 100%; order: 3; }
}
@media (max-width: 560px) {
  .hlp-formgrid { grid-template-columns: 1fr; }
  .hlp-dialog-head { padding: 18px 20px; }
  .hlp-dialog-body { padding: 20px; }
  .hlp-foot-actions { gap: 12px; }
}

/* "Choose a picture" (HelperPictureSheet): Take photo / Upload, then the avatar slider,
   as the mobile app's picture sheet */
.hp-sheet { max-width: 480px; width: calc(100% - 32px); }
.hp-help { color: var(--hk-muted); margin: -4px 0 14px; font-size: 13.5px; }
.hp-preview { width: 92px; height: 92px; margin: 0 auto 14px; border-radius: 50%; overflow: hidden; background: #e6eeea; color: var(--hk-teal);
              display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 650; }
.hp-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-preview--avatar { background: transparent; }
.hp-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.hp-slider { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 8px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.hp-tile { position: relative; flex: none; width: 76px; height: 76px; padding: 3px; border-radius: 50%; border: 3px solid transparent;
           background: none; cursor: pointer; scroll-snap-align: center; }
.hp-tile img { width: 100%; height: 100%; display: block; border-radius: 50%; }
.hp-tile:hover { border-color: #c4d4ca; }
.hp-tile--on, .hp-tile--on:hover { border-color: var(--hk-teal); }
.hp-tick { position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; border-radius: 50%; background: var(--hk-teal); color: #fff;
           font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.hp-note { text-align: center; color: var(--hk-muted); font-size: 12.5px; margin: 2px 0 6px; }
.hp-camera video { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; background: #193b38; display: block; transform: scaleX(-1); }
.hp-camera-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }