/* SPA 통합 단계 1 — 어레인지가 #page-arrange로 통합됨.
   전역 reset/body 룰은 styles.css가 담당하므로 여기서는 제거. */

/* ── 헤더 ── */

.ar-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 24px;
  background: #fff;
  border-bottom: 1px solid #e5e5e7;
  position: sticky; top: 0; z-index: 10;
}
.ar-header-left, .ar-header-center, .ar-header-right {
  display: flex; align-items: center; gap: 10px;
}
.ar-title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.ar-back {
  color: var(--accent); text-decoration: none; font-size: 13px; font-weight: var(--fw-semibold);
}
.ar-back:hover { text-decoration: underline; }

.ar-date-input {
  padding: 6px 10px;
  border: 1px solid #d2d2d7; border-radius: var(--r-md);
  font: inherit; font-size: 13px;
  background: #fff;
}
.ar-date-input:focus { outline: none; border-color: var(--accent); }

.ar-icon-btn, .ar-pill-btn {
  padding: 6px 12px;
  background: #f5f5f7; color: #1d1d1f;
  border: 1px solid #d2d2d7; border-radius: var(--r-md);
  font: inherit; font-size: 13px;
  cursor: pointer;
  transition: background .15s;
}
.ar-icon-btn { width: 32px; padding: 6px 0; text-align: center; }
.ar-icon-btn:hover, .ar-pill-btn:hover { background: #ececef; }

.ar-stats {
  font-size: 12px; color: #424245;
  font-variant-numeric: tabular-nums;
  padding: 4px 10px;
  background: #f5f5f7; border-radius: var(--r-sm);
}
.ar-user { font-size: 12px; color: #6e6e73; }

/* ── 메인 ── */

/* page 컨테이너 안에서 헤더 다음 남는 공간을 main이 차지, 그 안의 wrap-outer가 다 채움 */
.ar-main {
  padding: 20px 24px;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ar-header { flex-shrink: 0; }

.ar-banner {
  margin-bottom: 16px;
  padding: 12px 16px;
  background: #fff8e1; color: #ad6800;
  border: 1px solid #ffe082; border-radius: var(--r-md);
  font-size: 13px;
}
.ar-banner.ar-banner--info {
  background: #f5f5f7; color: #424245;
  border-color: #e5e5e7;
  text-align: center;
}

/* ── 격자 ── */

/* ── 구조: outer (flex + 세로 스크롤) > [room-column | grid-wrap] ── */
/* sticky가 grid 안에 갇히는 문제 해결을 위해 룸 라벨을 grid 밖으로 분리. */
.ar-wrap-outer {
  display: flex;
  background: #fff;
  border: 1px solid #e5e5e7;
  border-radius: var(--r-lg);
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  min-height: 0;
}

.ar-room-column {
  width: 100px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: #fafafa;
  border-right: 1px solid #e5e5e7;
}

.ar-grid-wrap {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
}

.ar-grid {
  display: grid;
  /* 시간 슬롯만: 60px × 66 = 3960px. grid-template-rows는 JS에서 동적 설정 */
  grid-template-columns: repeat(66, 60px);
  width: 3960px;
}

/* 좌상단 코너 — room-column 안. 세로 스크롤 시 outer 기준 top:0에 고정 */
.ar-corner {
  height: 40px;
  background: #fafafa;
  border-bottom: 1px solid #e5e5e7;
  position: sticky;
  top: 0;
  z-index: 30;
}

/* 시간 헤더 — grid 안. 세로 스크롤 시 outer 기준 top:0에 고정 */
.ar-time-cell {
  font-size: 10px; color: #6e6e73;
  padding: 8px 0 8px 4px;
  text-align: left;
  border-bottom: 1px solid #e5e5e7;
  border-left: 1px solid #f5f5f7;
  background: #fafafa;
  position: sticky;
  top: 0;
  z-index: 20;
  white-space: nowrap;
  overflow: hidden;
}
.ar-time-cell--hour {
  border-left-color: #d2d2d7;
  font-weight: 600;
  color: #424245;
}

/* 룸 라벨 — JS가 인라인 height로 격자 행 높이와 동기화 (renderGrid의 rowH) */
.ar-room-label {
  height: 56px;
  background: #fafafa;
  border-bottom: 1px solid #e5e5e7;
  padding: 0 12px;
  font-size: 13px; font-weight: var(--fw-semibold);
  display: flex; align-items: center;
  flex-shrink: 0;
}
.ar-room-label--closed { color: #b0b0b3; background: #f5f5f7; }

/* 시간 슬롯 셀 (배경 그리드) */
.ar-cell {
  border-left: 1px solid #f5f5f7;
  border-bottom: 1px solid #e5e5e7;
  /* JS의 grid-template-rows가 우선이지만, var 참조로 안전망 (rowH 미설정 시 56px) */
  min-height: var(--ar-row-h, 56px);
  background: #fff;
}
.ar-cell--hour { border-left-color: #d2d2d7; }
.ar-cell--closed {
  background: repeating-linear-gradient(
    -45deg,
    #f5f5f7 0px,
    #f5f5f7 4px,
    #fafafa 4px,
    #fafafa 8px
  );
}

/* arrangement 카드 (격자 위에 spanning) */
.ar-card {
  margin: 4px 2px;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  font-size: 11px;
  line-height: 1.3;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  cursor: default;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ar-card-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ar-card-proc {
  color: #424245;
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 카테고리 색깔 */
.ar-card--photo { background: #FEF3C7; }
.ar-card--laser { background: #FEE2E2; }
.ar-card--injection { background: #DBEAFE; }
.ar-card--care { background: #D1FAE5; }
.ar-card--surgery { background: #EDE9FE; }
.ar-card--other { background: #F3F4F6; }
.ar-card--program {
  background: #F5F3FF;
  border-color: rgba(124, 58, 237, 0.2);
}

/* 휴무 오버레이 */
.ar-closed-day {
  margin: 0 0 16px;
  padding: 48px 24px;
  background: #fff;
  border: 2px dashed #d2d2d7;
  border-radius: var(--r-lg);
  text-align: center;
  font-size: 20px; color: #6e6e73; font-weight: var(--fw-semibold);
}
.ar-closed-day-sub {
  font-size: 13px; color: #86868b; font-weight: 400;
  margin-top: 8px;
}

/* ── 완료 숨기기 토글 ── */

.ar-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: #424245;
  padding: 4px 10px;
  background: #f5f5f7; border-radius: var(--r-sm);
  cursor: pointer;
  user-select: none;
}
.ar-toggle input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}

/* ── 카드 상태 ── */

.ar-card { cursor: pointer; transition: opacity .15s, box-shadow .15s; }
.ar-card:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.1); }

.ar-card.status-scheduled {
  /* 기본 — 카테고리 색 그대로 */
}

.ar-card.status-in-progress {
  border-left: 4px solid var(--accent);
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.15);
  animation: ar-pulse 2s ease-in-out infinite;
}

@keyframes ar-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.15); }
  50% { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25); }
}

.ar-card.status-completed {
  background: #f3f4f6 !important;
  opacity: 0.55;
}
.ar-card.status-completed .ar-card-name,
.ar-card.status-completed .ar-card-proc {
  text-decoration: line-through;
  color: #6e6e73;
}
.ar-card.status-completed::after {
  content: '✓';
  position: absolute;
  top: 2px; right: 4px;
  font-size: 10px;
  color: var(--success);
  font-weight: 700;
}
.ar-card { position: relative; }  /* ::after 기준점 */

.ar-card.status-cancelled {
  background: repeating-linear-gradient(
    -45deg,
    #f3f4f6 0px, #f3f4f6 4px,
    #e5e7eb 4px, #e5e7eb 8px
  ) !important;
  opacity: 0.4;
}
.ar-card.status-cancelled .ar-card-name,
.ar-card.status-cancelled .ar-card-proc {
  text-decoration: line-through;
  color: #6e6e73;
}

/* 완료 숨기기 모드 */
body.hide-completed .ar-card.status-completed { display: none; }

/* ── 모달 ── */

.ar-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
}
.ar-modal[hidden] { display: none; }

.ar-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

.ar-modal-panel {
  position: relative;
  background: #fff;
  border-radius: var(--r-lg);
  width: 420px;
  max-width: calc(100vw - 40px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.ar-modal-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 18px 20px 12px;
  border-bottom: 1px solid #e5e5e7;
}
.ar-modal-title {
  font-size: 16px; font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.4;
  padding-right: 8px;
}
.ar-modal-x {
  background: none; border: none;
  font-size: 16px; color: #6e6e73;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--r-sm);
}
.ar-modal-x:hover { background: #f5f5f7; color: #1d1d1f; }

.ar-modal-body {
  padding: 14px 20px;
  display: flex; flex-direction: column; gap: 6px;
}
.ar-modal-row {
  font-size: 13px; color: #424245;
  line-height: 1.55;
}
.ar-modal-status {
  font-weight: 600;
}
.ar-modal-status[data-status="scheduled"] { color: var(--accent); }
.ar-modal-status[data-status="in_progress"] { color: var(--accent); }
.ar-modal-status[data-status="completed"] { color: var(--success); }
.ar-modal-status[data-status="cancelled"] { color: #6e6e73; }

.ar-modal-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 14px 20px 18px;
  border-top: 1px solid #e5e5e7;
  background: #fafafa;
}
.ar-btn {
  flex: 1;
  padding: 9px 14px;
  border: 1px solid #d2d2d7;
  border-radius: var(--r-md);
  background: #fff; color: #1d1d1f;
  font: inherit; font-size: 13px; font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background .15s, transform .12s, opacity .15s;
}
.ar-btn:active { transform: scale(0.97); }
.ar-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ar-btn--start { background: var(--accent); color: #fff; border-color: transparent; }
.ar-btn--start:hover:not(:disabled) { background: var(--accent-hover); }
.ar-btn--complete { background: var(--success); color: #fff; border-color: transparent; }
.ar-btn--complete:hover:not(:disabled) { background: #128a3e; }
.ar-btn--ghost { background: #f5f5f7; }
.ar-btn--ghost:hover { background: #ececef; }
.ar-btn[hidden] { display: none; }

.ar-modal-msg {
  padding: 0 20px 14px;
  font-size: 12px;
  min-height: 16px;
}
.ar-modal-msg.error { color: var(--danger); }
.ar-modal-msg.success { color: var(--success); }

/* ── Phase 2: 배치 계산 버튼, 미배치 배지, 토스트, 미배치 리스트 ── */

.ar-pill-btn--primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 600;
}
.ar-pill-btn--primary:hover { background: var(--accent-hover); }
.ar-pill-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.ar-unmatched-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: #fef3c7;
  color: #92400e;
  font-size: 12px; font-weight: var(--fw-semibold);
  border-radius: var(--r-sm);
  border: 1px solid #fcd34d;
  cursor: pointer;
  font-family: inherit;
}
.ar-unmatched-badge:hover { background: #fde68a; }

.ar-toast {
  position: fixed;
  bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1d1d1f;
  color: #fff;
  padding: 12px 22px;
  border-radius: var(--r-md);
  font-size: 13px; font-weight: var(--fw-semibold);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  opacity: 0;
  transition: opacity .2s, transform .2s;
  z-index: 200;
  pointer-events: none;
  white-space: pre-line;
}
.ar-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.ar-toast--error { background: var(--danger); }
.ar-toast--success { background: var(--success); }

#arUnmatchedList {
  margin: 0; padding: 0 0 0 18px;
  list-style: disc;
  font-size: 13px;
  line-height: 1.7;
  max-height: 50vh;
  overflow-y: auto;
}
#arUnmatchedList li { margin-bottom: 4px; }
#arUnmatchedList .um-reason { color: #86868b; font-size: 11.5px; }

/* ── Phase 3 Part 1: 짧은 카드 표시 ── */

.ar-card.is-short {
  padding: 2px 4px;
  font-size: 11px;
}
.ar-card.is-short .ar-card-name {
  font-size: 11.5px;
  line-height: 1.15;
}
.ar-card.is-short .ar-card-proc { display: none; }

/* ── Phase 3 Part 2: 드래그앤드롭 시각 피드백 ── */

.ar-card[draggable="true"] { cursor: grab; }
.ar-card.is-dragging {
  opacity: 0.4;
  cursor: grabbing;
}

/* 드래그 중인 카드 자신은 pointer-events 유지 (안 그러면 드래그 끊김).
   다른 카드만 통과시켜 셀 hit-test가 카드에 가리지 않게. 자기 영역 안
   호버 시 셀이 안 잡히는 문제는 JS의 elementsFromPoint로 우회. */
body.is-dragging-card .ar-card:not(.is-dragging) {
  pointer-events: none;
}

/* 카드 오른쪽 끝 리사이즈 핸들 (시술 길이 조절) */
.ar-card-resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 100%;
  cursor: ew-resize;
  z-index: 5;
}
.ar-card-resize-handle:hover {
  background: rgba(0, 0, 0, 0.12);
}
body.is-resizing-card,
body.is-resizing-card * {
  cursor: ew-resize !important;
  user-select: none;
}

.ar-cell.can-drop {
  background: rgba(0, 102, 204, 0.08);
  box-shadow: inset 0 0 0 2px rgba(0, 102, 204, 0.35);
}
.ar-cell.can-drop.ar-cell--closed {
  background: rgba(255, 138, 0, 0.08);
  box-shadow: inset 0 0 0 2px rgba(255, 138, 0, 0.35);
}

/* 같은 환자 카드 위 호버 → swap 가능 표시 */
.ar-card.can-swap {
  box-shadow: 0 0 0 3px #a855f7, 0 2px 8px rgba(168, 85, 247, 0.3);
  z-index: 5;
}

/* ── Phase 3 Part 3: manual 카드 시각 구분 ── */

.ar-card[data-arranged-by="manual"]::before {
  content: '✋';
  position: absolute;
  top: 2px; left: 4px;
  font-size: 9px;
  opacity: 0.55;
  pointer-events: none;
}
/* status-in-progress와 status-completed의 ::after는 우상단이라 충돌 없음 */

/* SPA 통합 후 styles.css의 `header { display: none !important }` 룰이 .ar-header까지
   숨겨버리는 문제 우회. !important로 덮어쓰기. */
#page-arrange header.ar-header {
  display: flex !important;
}