/* Important info & emergency contacts (ImportantInfo.jsx): the helper's view, the manager's list
   with Shared / Private, the New information form, the profile panel's button. Uses the hk- kit. */

.ii-muted { color: var(--hk-muted); font-size: 12.5px; }
.ii-grow { flex: 1; }

/* the square tinted icon of a section or an item */
.ii-tile { flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--hk-mint); color: var(--hk-teal);
           display: inline-flex; align-items: center; justify-content: center; }
.ii-tile--sm { width: 34px; height: 34px; border-radius: 9px; }
.ii-tile--lg { width: 54px; height: 54px; border-radius: 14px; margin-bottom: 10px; }

/* the thin terracotta line under a heading */
.ii-rule { height: 1.5px; background: var(--hk-terracotta); opacity: .55; margin: 12px 0; border-radius: 1px; }
.ii-rule--top { margin: 22px 0 16px; }

/* the profile panel's highlighted button */
.ii-profile-btn { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer; font: inherit; color: var(--hk-ink);
                  border: 1.5px solid var(--hk-teal) !important; padding: 12px 14px; background: #fff; }
.ii-profile-btn:hover { background: #f7fbf9; }
.ii-profile-btn > svg { color: var(--hk-muted); flex: none; }
.ii-profile-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ii-profile-text strong { font-size: 14px; font-weight: 650; }

/* the helper's view: one card per section */
.ii-read { display: flex; flex-direction: column; gap: 14px; }
.ii-section { background: #fff; border: 1px solid var(--hk-line); border-radius: 14px; padding: 16px; box-shadow: 0 3px 10px rgba(20,49,38,.05); }
.ii-section-head { display: flex; align-items: center; gap: 12px; }
.ii-section-head h4 { margin: 0; font-size: 17px; font-weight: 700; color: var(--hk-ink); }
.ii-sep { height: 1px; background: var(--hk-line); margin: 14px 0; }
.ii-item { display: flex; flex-direction: column; gap: 6px; }
.ii-item-top { display: flex; align-items: center; gap: 10px; }
.ii-item-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ii-item-who strong { font-size: 14.5px; }
.ii-addr { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; }
.ii-addr svg { color: var(--hk-terracotta); flex: none; margin-top: 1px; }
.ii-notes { white-space: pre-wrap; }
.ii-actions { display: flex; gap: 10px; margin-top: 6px; }
.ii-action { flex: 1; justify-content: center; text-decoration: none; gap: 7px; }
.ii-phone { color: var(--hk-muted); font-weight: 400; }
.ii-view { gap: 6px; white-space: nowrap; }
.ii-actions > .ii-view { flex: 1; justify-content: center; }
.ii-note { display: flex; gap: 10px; align-items: flex-start; background: #f8ece7; border: 1px solid rgba(199,119,91,.25); border-radius: 11px;
           padding: 11px 12px; font-size: 13px; }
.ii-note > svg { color: var(--hk-terracotta); flex: none; }
.ii-note-title { font-weight: 600; }
.ii-note .hk-textbtn { margin-top: 4px; }
.ii-empty { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ii-empty p { max-width: 320px; }

/* Edit helper's section and the manager's list */
.ii-edit-section h3 { margin: 0; font-size: 16px; font-weight: 650; }
.ii-edit-section > .ii-muted { margin: 3px 0 12px; }
.ii-editor { display: flex; flex-direction: column; gap: 8px; }
.ii-row { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--hk-line); border-radius: 11px; padding: 9px 8px 9px 11px; }
.ii-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ii-row-text strong { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ii-pill { border: none; border-radius: 20px; padding: 3px 10px; font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.ii-pill--shared { background: var(--hk-mint); color: var(--hk-teal); }
.ii-pill--private { background: #f8ece7; color: var(--hk-accent); }
.ii-add { width: 100%; justify-content: center; gap: 7px; }

/* New information / Edit */
.ii-form { background: #eef6f3; border: 1px solid rgba(18,92,88,.2); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ii-form h4 { margin: 0; font-size: 15px; font-weight: 650; }
.ii-form .form-input { background: #fff; }
.ii-cats .hlp-chip { display: inline-flex; align-items: center; gap: 5px; }
.ii-more { align-self: flex-start; gap: 5px; }
.ii-photo-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ii-thumb { width: 52px; height: 52px; border-radius: 8px; border: 1px solid var(--hk-line); background: #fff; padding: 0; overflow: hidden; cursor: pointer;
            display: inline-flex; align-items: center; justify-content: center; color: var(--hk-muted); }
.ii-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ii-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 600; font-size: 13.5px; cursor: pointer; }
.ii-switch-input { appearance: none; -webkit-appearance: none; width: 40px; height: 22px; border-radius: 11px; background: #cfd8d3; position: relative; cursor: pointer;
                   transition: background .15s; flex: none; margin: 0; }
.ii-switch-input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; }
.ii-switch-input:checked { background: var(--hk-teal); }
.ii-switch-input:checked::after { left: 21px; }
.ii-switch-input:focus-visible { outline: 2px solid var(--hk-teal); outline-offset: 2px; }
.ii-form-foot { display: flex; align-items: center; gap: 8px; }

/* the profile panel's Important info */
.ii-panel .asg-head h3 { margin: 0 30px 2px 0; }
.ii-tabs { display: flex; gap: 6px; margin-top: 10px; }
.ii-tabs .hlp-chip { display: inline-flex; align-items: center; gap: 5px; }
.ii-panel-body { padding-bottom: 24px; }

/* a photo full size */
.ii-lightbox { flex-direction: column; gap: 14px; cursor: zoom-out; z-index: 1100; }
.ii-lightbox img { max-width: 92vw; max-height: calc(100vh - 110px); object-fit: contain; border-radius: 8px; background: #fff; cursor: default; }
.ii-lightbox-wait { color: #fff; }

@media (max-width: 520px) {
  .ii-actions { flex-direction: column; }
  .ii-item-top { flex-wrap: wrap; }
}