/* 최근 보강 — 검색칸·닫기 버튼
   (admin.css 1496–1546 행에서 분리. CSS 는 순서가 우선순위라 로드 순서를 지켜야 한다) */

/* 전체리스트 검색칸 — 힌트 문구가 잘려 안 보이던 문제 */
.total-search {
	display: flex;
	align-items: center;
	gap: 10px;
}
.total-search input[name="keyword"] {
	flex: 1 1 auto;
	min-width: 320px;
	max-width: 560px;
	font-size: 15px;
	padding: 12px 16px;
}
.total-search input[name="keyword"]::placeholder {
	font-size: 14px;
	color: var(--muted);
	opacity: 0.85;
}


/* 닫기 버튼을 확실히 보이게 — 레이어가 화면을 거의 덮어 바깥 클릭이 어렵다 */
.admin-modal .modal-close {
	position: absolute;
	top: 14px;
	right: 16px;
	z-index: 5;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--card);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}
.admin-modal .modal-close:hover {
	background: var(--admin-accent, #7f1f2e);
	border-color: var(--admin-accent, #7f1f2e);
	color: #fff;
}
.admin-modal .modal-close:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 2px;
}
/* 전체리스트 상단 우측 닫기 (표가 길 때 위로 스크롤하지 않아도 되게) */
.total-foot-top {
	display: flex;
	justify-content: flex-end;
	margin: 0 0 10px;
}


/* 전체리스트 삭제 도구 — 체크박스 칸이 생겨 컬럼이 13개가 됐다 */
.total-tools {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 12px 0;
}
.total-tools .select-all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 800;
	color: var(--muted);
	white-space: nowrap;
}
.total-tools .sel-count {
	font-size: 13px;
	font-weight: 800;
	color: var(--admin-accent, #7f1f2e);
	min-width: 80px;
}
.total-tools [data-action="close-modal"] { margin-left: auto; }
.button.danger {
	background: #b3261e;
	border-color: #b3261e;
	color: #fff;
}
.button.danger:hover { background: #8c1d18; border-color: #8c1d18; }

/* 체크박스가 브라우저 기본값으로 거대해지지 않게 */
.total-table input[type="checkbox"],
.total-tools input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--admin-accent, #7f1f2e);
	cursor: pointer;
}
.total-table .col-check { width: 3%; text-align: center; }
.total-table td.row-actions button {
	padding: 3px 10px;
	font-size: 12px;
	white-space: nowrap;
}

/* 컬럼이 12 -> 13 개가 되어 폭 지정을 한 칸씩 밀어준다 */
.total-table th:nth-child(1),  .total-table td:nth-child(1)  { width: 3%; }
.total-table th:nth-child(2),  .total-table td:nth-child(2)  { width: 4%; }
.total-table th:nth-child(3),  .total-table td:nth-child(3)  { width: 5%; }
.total-table th:nth-child(4),  .total-table td:nth-child(4)  { width: 9%; }
.total-table th:nth-child(5),  .total-table td:nth-child(5)  { width: 5%; }
.total-table th:nth-child(6),  .total-table td:nth-child(6)  { width: 7%; }
.total-table th:nth-child(7),  .total-table td:nth-child(7)  { width: 7%; }
.total-table th:nth-child(8),  .total-table td:nth-child(8)  { width: 10%; }
.total-table th:nth-child(9),  .total-table td:nth-child(9)  { width: 8%; }
.total-table th:nth-child(10), .total-table td:nth-child(10) { width: auto; }
.total-table th:nth-child(11), .total-table td:nth-child(11) { width: 5%; }
.total-table th:nth-child(12), .total-table td:nth-child(12) { width: 5%; }
.total-table th:nth-child(13), .total-table td:nth-child(13) { width: 7%; }

/* 미러 모드에서 삭제를 못 쓰는 이유를 그 자리에서 알린다.
   눌렀다가 경고창이 뜨면 그 창이 클릭을 흡수해 "닫기가 안 먹는다"처럼 보였다. */
.total-tools .tools-note {
	font-size: 12.5px;
	color: var(--muted);
	font-weight: 700;
	line-height: 1.5;
}
.total-tools button[disabled],
.total-table button[disabled] {
	opacity: 0.42;
	cursor: not-allowed;
}
.total-table input[type="checkbox"][disabled],
.total-tools input[type="checkbox"][disabled] {
	opacity: 0.4;
	cursor: not-allowed;
}

/* 닫힌 dialog 는 반드시 사라져야 한다.
   .wide 에 display:flex 를 걸어놨더니 브라우저 기본값 dialog:not([open]){display:none}
   을 덮어써서, 닫아도 배경 흐림만 걷히고 레이어는 화면에 그대로 남았다.
   [open] 일 때만 flex 를 준다. */
dialog:not([open]) {
	display: none !important;
}
.admin-modal.reservation-modal.wide[open] {
	display: flex;
	flex-direction: column;
}

/* 이 서버에만 있는 예약 — 기존 시스템(MSSQL)에는 없다.
   섞여 있으면 어느 게 원장에 없는 예약인지 알 수 없어 이중예약이 난다. */
.slot-row.local-only,
.total-table tr.local-only {
	background: rgba(29, 78, 216, 0.06);
}
.slot-row.local-only .cell-name::after,
.total-table tr.local-only .cell-name::after {
	content: "이 서버";
	display: inline-block;
	margin-left: 5px;
	padding: 1px 5px;
	border-radius: 999px;
	background: #1d4ed8;
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	vertical-align: middle;
	white-space: nowrap;
}