/* MediMind Lite — 관리 화면(재고 백업 · 설정) 배치 전용.
 * 색 · 테두리 색 · 배경 · 아이콘(.a-banner, .a-effect-*, .a-dialog*, .a-skeleton 막대 색 …)은 style.css 의 공용 부품이 맡습니다.
 * 이 파일은 자리 · 크기 · 간격만 정하고 색을 정의하지 않습니다 (디자인 명세 §9.1). */
[hidden] { display: none !important; }

/* 파일 선택 버튼과 파일 이름 (E4, §5.3) */
.a-file-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.a-file-name { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 재고 백업: 위 두 카드(2열, 900px 이하 1열), 미리보기가 있으면 불러오기 카드가 두 칸을 씀 (§6.7) */
.a-backup-card.is-previewing { grid-column: 1 / -1; }
.a-backup-snapshots .a-block-head { flex-wrap: wrap; }
.a-backup-snapshots .a-block-head .a-search { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.a-backup-snapshots .a-block-head .a-search .a-input { width: 320px; max-width: 100%; }

/* 불러오기 미리보기 (E1, §5.16): 순서대로 쌓고 12px 간격 */
.a-preview > * + * { margin-top: 12px; }
.a-preview .a-banner { margin-top: 0; }
.a-preview .a-banner + * { margin-top: 12px; }
.a-preview-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.a-preview-actions + .a-hint { margin-top: 8px; }

/* 영향 타일: 3칸(가져오기는 4 · 5칸), 휴대폰 2×2, 480px 이하 1칸 (§5.15) */
.a-effect-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.a-effect-tiles[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.a-effect-tiles[data-count="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.a-effect-tile { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px; border-radius: 6px; }
.a-effect-tile b { font-size: 24px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.a-effect-tile span { font-size: 12.5px; font-weight: 600; line-height: 1.4; }

/* 숨겨질 품목 블록: 목록은 늘 펼침, 최대 240px (§5.16) */
.a-preview-hide { padding: 10px 12px 12px 14px; border-radius: 6px; }
.a-preview-hide .a-preview-h { margin-top: 0; }
.a-preview-hide .a-preview-list { max-height: 240px; overflow: auto; }
.a-preview-block summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; }

/* 영향 목록 줄: 왼쪽 장소 · 이름, 오른쪽 수량 (36px) */
.a-effect-list ul, .a-preview-hide ul { list-style: none; margin: 0; padding: 0; }
.a-effect-list li, .a-preview-hide li { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 36px; }
.a-effect-list li > span:first-child, .a-preview-hide li > span:first-child { min-width: 0; overflow-wrap: anywhere; word-break: keep-all; }
.a-effect-list h3 { font-size: 13.5px; font-weight: 700; margin: 8px 0 4px; }
.a-effect-more, .a-effect-none { margin: 4px 0 0; }
.a-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.a-arrow { margin: 0 2px; }

/* 불러오는 중: 고정된 막대 3개(92 · 76 · 60%), 반짝임 없음 (§5.21) */
.a-skeleton { display: grid; gap: 8px; margin-top: 8px; }
.a-skeleton span { display: block; height: 12px; border-radius: 3px; width: 92%; }
.a-skeleton span:nth-child(2) { width: 76%; }
.a-skeleton span:nth-child(3) { width: 60%; }

/* 되돌리기 영향 확인 (E2, §5.15): 620px, 본문만 스크롤 */
#rollback-dialog { width: min(620px, calc(100vw - 32px)); max-width: none; max-height: 86dvh; }
#rollback-dialog .a-dialog-in { display: flex; flex-direction: column; gap: 12px; max-height: calc(86dvh - 2px); overflow: auto; }
#rollback-dialog .a-dialog-in > * { margin: 0; }
#rollback-dialog .a-dialog-actions { margin-top: 4px; }
.a-dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }

/* 설정 → 직원 한도 도달 배너 */
.a-staff-full { margin: 0 0 12px; }

/* 직원 표 · 스냅샷 표: 휴대폰에서 이름표 달린 카드 (E3, §5.17). 카드 테두리 · 배경 색은 style.css 가 정합니다. */
@media (max-width: 700px) {
  .a-staff-table tr { border-radius: 6px; padding: 8px 12px; margin-bottom: 8px; }
  .a-staff-table td { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 8px; align-items: center; min-height: 36px; padding: 2px 0; }
  .a-staff-table td::before { white-space: normal; }
  .a-staff-table td.a-cell-title, .a-staff-table td.a-cell-act, .a-staff-table td[colspan] { display: block; }
  .a-staff-table td.a-cell-title::before, .a-staff-table td.a-cell-act::before, .a-staff-table td[colspan]::before { content: none; }
  .a-staff-table td.a-cell-title { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; padding-bottom: 4px; }
  .a-staff-table td.a-cell-act { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; padding-top: 8px; }
  .a-staff-table td.a-cell-act .a-btn { width: 100%; min-height: 44px; justify-content: center; }
  .a-staff-table td select, .a-staff-table td .a-select { width: 100%; min-height: 44px; }

  /* 직원 등록: 이메일 한 줄, 역할 + 등록 버튼 한 줄 (§6.6) */
  .a-staff-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
  .a-staff-add > .a-field:first-child { grid-column: 1 / -1; }
  .a-staff-add .a-input { width: 100%; min-height: 48px; }
  .a-staff-add .a-btn { min-height: 48px; }
  .a-field-spacer { display: none; }

  .a-backup-snapshots .a-block-head .a-search { width: 100%; }
  .a-backup-snapshots .a-block-head .a-search .a-input { flex: 1 1 200px; width: auto; }
  .a-effect-tiles[data-count="4"], .a-effect-tiles[data-count="5"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a-dialog-actions { flex-direction: column-reverse; }
  .a-dialog-actions .a-btn { width: 100%; }
}
@media (max-width: 480px) { .a-effect-tiles { grid-template-columns: minmax(0, 1fr); } }