/* Page-specific styles split from hongyi-mobile.css: people */

.person-list article div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.page[data-panel="people"] > .full-action {
  height: 42px;
  margin-top: 14px;
  border-color: rgba(155, 107, 32, 0.48);
  border-radius: 14px;
  background: linear-gradient(135deg, #f1c45b 0%, #bf7a16 100%);
  color: #071225;
  box-shadow:
    0 10px 20px rgba(88, 52, 10, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.page[data-panel="people"] .person-list {
  gap: 10px;
  grid-template-columns: 1fr !important;
  margin-top: 12px;
}

.page[data-panel="people"] .staff-review-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.page[data-panel="people"] .staff-review-group + .staff-review-group {
  margin-top: 14px;
}

.page[data-panel="people"] .staff-review-group > header {
  display: flex;
  grid-column: 1 / -1;
  min-height: 32px;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
  border-bottom: 1px solid rgba(201, 190, 174, 0.72);
}

.page[data-panel="people"] .staff-review-group h3 {
  margin: 0;
  color: #071225;
  font-size: 15px;
  font-weight: 950;
}

.page[data-panel="people"] .staff-review-group > header span {
  color: #806033;
  font-size: 12px;
  font-weight: 900;
}

.page[data-panel="people"] .staff-review-group > article.empty {
  grid-column: 1 / -1;
}

.page[data-panel="people"] .person-list article {
  display: grid;
  gap: 7px;
  padding: 13px;
  border-color: rgba(201, 190, 174, 0.72);
  border-radius: 16px;
  background: #fffaf2;
  box-shadow: 0 10px 24px rgba(71, 54, 31, 0.08);
}

.page[data-panel="people"] .person-list strong {
  color: #071225;
  font-size: 15px;
  line-height: 1.25;
}

.page[data-panel="people"] .person-list span,
.page[data-panel="people"] .person-list small {
  color: #59677a;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.5;
}

.page[data-panel="people"] .person-list article div {
  gap: 8px;
  margin-top: 4px;
}

.page[data-panel="people"] .person-list button:not(.staff-card-avatar) {
  height: 34px;
  border: 1px solid rgba(201, 190, 174, 0.88);
  border-radius: 12px;
  background: #fffdf8;
  color: #071225;
  box-shadow: none;
}

.page[data-panel="people"] .person-list button:not(.staff-card-avatar):first-child {
  border-color: #071225;
  background: #071225;
  color: #fff7dd;
}

@media (max-width: 720px) {
  .page[data-panel="people"] .staff-review-group {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .page[data-panel="people"] {
    padding-inline: 8px;
  }

  .page[data-panel="people"] .person-list {
    display: block;
    margin-top: 10px;
    padding-bottom: 86px;
  }

  .page[data-panel="people"] .staff-management-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
    padding: 12px;
    border-radius: 14px;
  }

  .page[data-panel="people"] .staff-management-title {
    min-width: 0;
  }

  .page[data-panel="people"] .staff-management-title strong {
    display: inline;
    font-size: 15px;
    line-height: 1.2;
    white-space: nowrap;
  }

  .page[data-panel="people"] .staff-management-title span {
    display: inline;
    margin-left: 4px;
    font-size: 11px;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .page[data-panel="people"] .staff-management-actions {
    justify-self: end;
  }

  .page[data-panel="people"] .staff-management-actions .primary {
    min-height: 40px;
    padding: 0 13px;
    border-radius: 10px;
    font-size: 13px;
    white-space: nowrap;
  }

  .page[data-panel="people"] .staff-filter-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .page[data-panel="people"] .staff-filter-row input,
  .page[data-panel="people"] .staff-filter-row select,
  .page[data-panel="people"] .staff-filter-row button {
    width: 100%;
    min-height: 38px;
    border-radius: 10px;
    font-size: 13px;
  }

  .page[data-panel="people"] .staff-filter-row button {
    min-height: 42px;
  }

  .page[data-panel="people"] .staff-search-count {
    grid-column: 1 / -1;
    display: block;
    margin-top: -2px;
    font-size: 12px;
    text-align: left;
  }

  .page[data-panel="people"] .staff-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .page[data-panel="people"] .staff-status-section + .staff-status-section {
    margin-top: 16px;
  }

  .page[data-panel="people"] .staff-status-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 10px;
    padding: 0 2px 8px;
    border-bottom: 1px solid rgba(213, 226, 240, 0.95);
    font-size: 13px;
    font-weight: 950;
  }

  .page[data-panel="people"] .staff-status-section-header span {
    color: #9b6b20;
    font-size: 12px;
    font-weight: 900;
  }

  .page[data-panel="people"] .staff-member-card {
    position: relative;
    min-height: auto;
    padding: 12px;
    border-radius: 14px;
  }

  .page[data-panel="people"] .staff-member-card.is-pending {
    border-color: rgba(245, 158, 11, 0.45);
    background: linear-gradient(180deg, #fffaf1 0%, #fff 100%);
  }

  .page[data-panel="people"] .staff-card-menu {
    display: none !important;
  }

  .page[data-panel="people"] .staff-card-main {
    display: grid !important;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding-right: 0;
  }

  .page[data-panel="people"] .staff-card-avatar {
    display: flex !important;
    width: 104px;
    height: 104px;
    max-width: 104px;
    max-height: 104px;
    min-width: 104px;
    min-height: 104px;
    aspect-ratio: 1 / 1;
    flex: 0 0 104px;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    border: 0;
    background: linear-gradient(135deg, #f8e6b7 0%, #d6a13a 100%);
    color: #7a4c0f;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.1;
  }

  .page[data-panel="people"] button.staff-card-avatar {
    padding: 0;
    width: 104px;
    height: 104px;
    min-width: 104px;
    min-height: 104px;
    border: 0;
    appearance: none;
    font: inherit;
    cursor: zoom-in;
  }

  .page[data-panel="people"] .staff-card-avatar.has-photo {
    border: 0;
    background: #f8fafc;
    box-shadow: none;
  }

  .page[data-panel="people"] .staff-card-avatar img {
    width: 100% !important;
    min-width: 100%;
    height: 100% !important;
    min-height: 100%;
    border-radius: 22px;
    object-fit: cover;
    display: block;
  }

  .page[data-panel="people"] .staff-card-copy {
    display: block !important;
    min-width: 0;
    padding-top: 2px;
  }

  .page[data-panel="people"] .staff-card-name {
    display: flex !important;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 17px;
    line-height: 1.25;
  }

  .page[data-panel="people"] .staff-owner-mark {
    padding: 2px 6px;
    font-size: 11px;
  }

  .page[data-panel="people"] .staff-card-role {
    margin-top: 5px;
    font-size: 13px;
  }

  .page[data-panel="people"] .staff-card-department,
  .page[data-panel="people"] .staff-card-phone {
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.35;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .page[data-panel="people"] .staff-card-footer {
    margin-top: 12px;
    gap: 6px;
    font-size: 12px;
  }

  .page[data-panel="people"] .staff-card-footer small {
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .page[data-panel="people"] .staff-card-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 10px;
  }

  .page[data-panel="people"] .staff-card-actions button {
    min-height: 40px;
    border-radius: 10px;
    font-size: 14px;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal {
    width: min(100vw - 12px, 430px);
    max-height: calc(100dvh - 12px);
    border-radius: 16px;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-header,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-header {
    position: relative;
    display: block;
    min-height: 98px !important;
    padding: 24px 12px 12px !important;
    border-bottom: 1px solid rgba(224, 211, 194, 0.9);
    background: #fffdf8;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-header > div:first-child,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-header > div:first-child {
    padding-right: 158px;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-header > div:first-child p,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-header > div:first-child p {
    margin: 0 0 3px !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-header h2,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-header h2 {
    display: block !important;
    margin: 0 !important;
    color: #071225 !important;
    font-size: 22px !important;
    line-height: 1.18 !important;
    white-space: nowrap;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-header-actions,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-header-actions {
    position: absolute;
    top: 22px;
    right: 10px;
    display: flex;
    gap: 6px;
    align-items: center;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-header-actions button,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-header-actions button {
    min-width: 46px;
    height: 36px;
    padding: 0 9px;
    border: 1px solid rgba(201, 190, 174, 0.95);
    border-radius: 9px;
    background: #fffdf8;
    color: #071225;
    font-size: 13px;
    font-weight: 900;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-header-actions .primary,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-header-actions .primary {
    border-color: rgba(155, 107, 32, 0.45);
    background: linear-gradient(135deg, #f1c45b 0%, #bf7a16 100%);
    color: #071225;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-header-actions .staff-editor-delete,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-header-actions .staff-editor-delete {
    border-color: rgba(239, 68, 68, 0.4);
    background: #fff7f7;
    color: #dc2626;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-header-actions .staff-editor-close,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-header-actions .staff-editor-close {
    min-width: 32px;
    width: 32px;
    padding: 0;
    font-size: 22px;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-shell,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-shell {
    display: block;
    min-height: 0;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-sidebar,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-sidebar {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 7px 12px;
    align-items: center;
    padding: 16px;
    border-right: 0;
    border-bottom: 1px solid #eadfce;
    background: #f7efe4;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-photo,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-photo {
    display: flex;
    grid-row: span 3;
    width: 88px;
    height: 88px;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    background: linear-gradient(135deg, #f8e6b7 0%, #d6a13a 100%);
    color: #7a4c0f;
    font-size: 19px;
    font-weight: 950;
    overflow: visible;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-photo img,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-photo img {
    width: 100%;
    height: 100%;
    border-radius: 22px;
    object-fit: cover;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-photo button,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-photo button {
    right: 4px;
    bottom: 4px;
    width: 24px;
    height: 24px;
    font-size: 11px;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal [data-staff-editor-name],
  .mobile-modal[data-modal="staff-create"].staff-editor-modal [data-staff-editor-name] {
    align-self: end;
    font-size: 19px;
    line-height: 1.2;
    text-align: left;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-role-pill,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-role-pill {
    justify-self: start;
    min-height: 24px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #fff7df;
    color: #9b6b20;
    font-size: 12px;
    font-weight: 900;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-status,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-status {
    justify-self: start;
    color: #176d3a;
    font-size: 12px;
    font-weight: 850;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-nav,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-nav {
    grid-column: 1 / -1;
    display: flex;
    margin-top: 8px;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-nav button,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-nav button {
    min-height: 36px;
    padding: 0 13px;
    border: 0;
    border-radius: 10px;
    background: #fff8ea;
    color: #7a4c0f;
    font-size: 13px;
    font-weight: 900;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-content,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-content {
    max-height: calc(100dvh - 274px);
    padding: 14px 16px 24px;
    background: #fffdf8;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .form-section,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .form-section {
    padding: 14px;
    border: 1px solid rgba(201, 190, 174, 0.72);
    border-radius: 14px;
    background: #fff;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-content h3,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-content h3 {
    margin-bottom: 14px;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-basic-grid,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-editor-basic-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-profit-access-field,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-profit-access-field {
    grid-column: auto;
    min-height: 72px;
    padding: 12px 13px;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-profit-defaults-field,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-profit-defaults-field {
    grid-column: auto;
    grid-template-columns: 1fr;
    gap: 12px;
    min-height: 0;
    padding: 12px 13px;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-profit-default-inputs,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-profit-default-inputs {
    gap: 8px;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-profit-default-inputs label,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-profit-default-inputs label {
    grid-template-columns: 1fr auto;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-profit-default-inputs label span,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .staff-profit-default-inputs label span {
    grid-column: 1 / -1;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .mobile-field.wide,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .mobile-field.wide {
    grid-column: auto;
  }

  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .mobile-field input,
  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .mobile-field select,
  body.desktop-page .mobile-modal[data-modal="staff-create"].staff-editor-modal .mobile-field textarea,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .mobile-field input,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .mobile-field select,
  .mobile-modal[data-modal="staff-create"].staff-editor-modal .mobile-field textarea {
    min-height: 42px;
    font-size: 14px;
  }
}