/**
 * K-Worker 시스템 v11 — 관공서(행정포털) 스타일 폴리시 레이어
 *
 * 컴파일된 Tailwind(theme.css) 위에 얹는 커스텀 클래스 모음.
 * 모든 클래스는 kfs- 접두사를 사용하며, 기존 색상 체계
 * (navy #16295c / sidebar #02244e / blue #1a6ef2 / bg #f3f6fb)를 유지한다.
 */

/* ============================================================
 * 레이아웃 프레임 (사이드바 / 메인 / 탑바)
 * ========================================================== */

.kfs-sidebar {
	background: linear-gradient(180deg, #02244e 0%, #032a5c 55%, #04356f 100%);
}

/* 활성 메뉴 좌측 인디케이터 바 */
.kfs-sidebar nav a {
	position: relative;
}
.kfs-sidebar nav a.bg-\[\#0a60e5\]::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 9px;
	bottom: 9px;
	width: 3px;
	border-radius: 2px;
	background: #8fb9ff;
}

.kfs-topbar {
	position: sticky;
	box-shadow: 0 1px 3px rgba(2, 36, 78, 0.06);
}
/* 탑바 하단 2px 공식 액센트 라인 */
.kfs-topbar::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: linear-gradient(90deg, #16295c 0%, #1a6ef2 55%, #6aa3f7 100%);
}

.kfs-clock {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11.5px;
	font-weight: 600;
	color: #5c6b85;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ============================================================
 * 페이지 헤더 (공문서 스타일 타이틀 바)
 * ========================================================== */

.kfs-pagehead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 20px;
	background: #ffffff;
	border: 1px solid #e3eaf6;
	border-left: 4px solid #16295c;
	border-radius: 10px;
	padding: 14px 20px;
}

.kfs-crumb {
	font-size: 11px;
	font-weight: 600;
	color: #8ea0bf;
	letter-spacing: 0.01em;
}
.kfs-crumb b {
	color: #44577e;
	font-weight: 700;
}

.kfs-pagehead-title {
	margin-top: 3px;
	font-size: 19px;
	font-weight: 800;
	color: #16295c;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

.kfs-pagehead-sub {
	margin-top: 2px;
	font-size: 12px;
	color: #8ea0bf;
}

.kfs-stamp {
	flex: none;
	text-align: right;
	font-size: 10.5px;
	font-weight: 600;
	color: #8ea0bf;
	line-height: 1.5;
}
.kfs-stamp b {
	display: block;
	font-size: 12.5px;
	font-weight: 800;
	color: #16295c;
	font-variant-numeric: tabular-nums;
}

/* ============================================================
 * KPI 통계 카드 (공식 인장형 아이콘)
 * ========================================================== */

.kfs-stat {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: #ffffff;
	border: 1px solid #e3eaf6;
	border-radius: 10px;
	padding: 16px;
	transition: box-shadow 0.2s, border-color 0.2s;
}
.kfs-stat:hover {
	border-color: #c9d8f2;
	box-shadow: 0 6px 18px rgba(2, 36, 78, 0.08);
}

.kfs-stat-icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	color: #ffffff;
	background: linear-gradient(135deg, var(--kfs-c1, #16295c), var(--kfs-c2, #1a6ef2));
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 2px 6px rgba(2, 36, 78, 0.18);
}

.kfs-stat-body {
	flex: 1;
	min-width: 0;
}

.kfs-stat-label {
	font-size: 11.5px;
	font-weight: 700;
	color: #5c6b85;
}

.kfs-stat-value {
	margin-top: 3px;
	font-size: 24px;
	font-weight: 800;
	line-height: 1.1;
	color: #16295c;
	font-variant-numeric: tabular-nums;
}
.kfs-stat-value small {
	margin-left: 2px;
	font-size: 12px;
	font-weight: 700;
	color: #8ea0bf;
}

.kfs-stat-sub {
	margin-top: 5px;
	font-size: 10.5px;
	font-weight: 600;
	color: #8ea0bf;
	line-height: 1.45;
}

/* ============================================================
 * 섹션 카드 / 타이틀
 * ========================================================== */

.kfs-card {
	background: #ffffff;
	border: 1px solid #e3eaf6;
	border-radius: 10px;
	padding: 16px;
}

.kfs-card-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 800;
	color: #16295c;
}
.kfs-card-title::before {
	content: "";
	flex: none;
	width: 4px;
	height: 14px;
	border-radius: 2px;
	background: #1a6ef2;
}
.kfs-card-title .kfs-card-extra {
	margin-left: auto;
	font-size: 11px;
	font-weight: 700;
	color: #1a6ef2;
	text-decoration: none;
}
.kfs-card-title .kfs-card-extra:hover {
	text-decoration: underline;
}

/* ============================================================
 * 행정표 (government table)
 * ========================================================== */

.kfs-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12px;
}
.kfs-table th {
	padding: 8px 12px;
	background: #f5f8fd;
	border: 1px solid #dde5f1;
	border-bottom: 2px solid #16295c;
	font-weight: 700;
	color: #33415e;
	text-align: left;
	white-space: nowrap;
}
.kfs-table td {
	padding: 8px 12px;
	border: 1px solid #dde5f1;
	color: #33415e;
	vertical-align: middle;
}
.kfs-table tbody tr:nth-child(even) td {
	background: #fafcff;
}
.kfs-table tbody tr:hover td {
	background: #f0f6ff;
}

/* ============================================================
 * 상태 배지 (1px 볼더 칩)
 * ========================================================== */

.kfs-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 700;
	white-space: nowrap;
	line-height: 1.5;
}
.kfs-badge--blue {
	color: #1a56c4;
	background: #e8f0fe;
	border-color: #bcd3f7;
}
.kfs-badge--green {
	color: #15803d;
	background: #f0fdf4;
	border-color: #bbf7d0;
}
.kfs-badge--orange {
	color: #c2410c;
	background: #fff7ed;
	border-color: #fed7aa;
}
.kfs-badge--red {
	color: #b91c1c;
	background: #fef2f2;
	border-color: #fecaca;
}
.kfs-badge--gray {
	color: #5c6b85;
	background: #f3f6fb;
	border-color: #dde5f1;
}

/* ============================================================
 * 지역 분포 수평 바
 * ========================================================== */

.kfs-rbar {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
}
.kfs-rbar-name {
	flex: none;
	width: 64px;
	font-weight: 700;
	color: #33415e;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.kfs-rbar-track {
	flex: 1;
	height: 14px;
	overflow: hidden;
	background: #eef2f9;
	border-radius: 4px;
}
.kfs-rbar-fill {
	display: block;
	height: 100%;
	border-radius: 4px;
	background: linear-gradient(90deg, #1a6ef2, #6aa3f7);
	transition: width 0.9s cubic-bezier(0.22, 0.8, 0.36, 1);
}
.kfs-rbar-val {
	flex: none;
	width: 78px;
	text-align: right;
	font-weight: 800;
	color: #16295c;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.kfs-rbar-val small {
	font-size: 10px;
	font-weight: 600;
	color: #8ea0bf;
}

/* ============================================================
 * 상태별 누적 바 (stacked bar)
 * ========================================================== */

.kfs-stack {
	display: flex;
	height: 16px;
	overflow: hidden;
	background: #eef2f9;
	border-radius: 6px;
}
.kfs-stack > span {
	display: block;
	height: 100%;
}

/* ============================================================
 * 알림 박스 (MOU 만료 경고 등)
 * ========================================================== */

.kfs-alert {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid #fed7aa;
	border-radius: 8px;
	background: #fffaf3;
	font-size: 12px;
	color: #33415e;
}
.kfs-alert--red {
	border-color: #fecaca;
	background: #fef6f6;
}
.kfs-alert--ok {
	border-color: #bbf7d0;
	background: #f4fdf7;
}

/* ============================================================
 * 빈 상태 / 빠른 바로가기
 * ========================================================== */

.kfs-empty {
	padding: 24px 12px;
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	color: #8ea0bf;
}

.kfs-quick {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	background: #ffffff;
	border: 1px solid #e3eaf6;
	border-radius: 10px;
	font-size: 12.5px;
	font-weight: 700;
	color: #16295c;
	text-decoration: none;
	transition: border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.kfs-quick:hover {
	border-color: #1a6ef2;
	color: #1a6ef2;
	box-shadow: 0 4px 12px rgba(26, 110, 242, 0.1);
}
.kfs-quick svg {
	flex: none;
	color: #1a6ef2;
}

/* 빠른 바로가기 그리드 (theme.css에 lg:grid-cols-4가 없어 커스텀) */
.kfs-quick-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}
@media (min-width: 1024px) {
	.kfs-quick-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* 말줄임 셀 */
.kfs-ellipsis {
	max-width: 180px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ============================================================
 * 테이블 한 줄 렌더링 — 모든 셀 기본 nowrap + 말줄임
 * (날짜/협약명/수치가 두 줄로 깨지는 문제 방지)
 * ========================================================== */

.kfs-main table th,
.kfs-main table td {
	white-space: nowrap;
}
.kfs-main table td {
	max-width: 260px;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 정렬 헬퍼 */
.kfs-num {
	text-align: right;
}
.kfs-center {
	text-align: center;
}

/* 비고/내용 등 긴 본문 셀은 줄바꿈 허용 (nowrap 해제용) */
.kfs-wrap {
	white-space: normal !important;
}

/* ============================================================
 * 반응형 — 1024px 미만에서는 사이드바 숨김
 * ========================================================== */

@media (max-width: 1023px) {
	.kfs-sidebar {
		display: none;
	}
	.kfs-main {
		margin-left: 0 !important;
	}
	.kfs-clock {
		display: none;
	}
}

/* ============================================================
 * 근태 관리 — 미등록 배지 / 미니 캘린더
 * ========================================================== */

/* 그리드 헬퍼 (theme.css에 없는 반응형 그리드 보완) */
.kfs-grid-sidenav {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}
@media (min-width: 1024px) {
	.kfs-grid-sidenav {
		grid-template-columns: 280px minmax(0, 1fr);
	}
}

.kfs-grid-2col {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}
@media (min-width: 1024px) {
	.kfs-grid-2col {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.kfs-stat-grid-4,
.kfs-stat-grid-5 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}
@media (min-width: 768px) {
	.kfs-stat-grid-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.kfs-stat-grid-5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

.kfs-badge--outline {
	color: #8ea0bf;
	background: #ffffff;
	border-color: #c8d3e6;
	border-style: dashed;
}

.kfs-cal {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 6px;
}

.kfs-cal-cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-height: 46px;
	padding: 5px 2px;
	border: 1px solid #e3eaf6;
	border-radius: 8px;
	background: #fafcff;
}

.kfs-cal-cell--today {
	outline: 2px solid #1a6ef2;
	outline-offset: 1px;
}

.kfs-cal-day {
	font-size: 11px;
	font-weight: 800;
	color: #33415e;
	font-variant-numeric: tabular-nums;
}

.kfs-cal-status {
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
}

.kfs-cal-cell--work {
	background: #f0fdf4;
	border-color: #bbf7d0;
}
.kfs-cal-cell--work .kfs-cal-status { color: #15803d; }

.kfs-cal-cell--late {
	background: #fff7ed;
	border-color: #fed7aa;
}
.kfs-cal-cell--late .kfs-cal-status { color: #c2410c; }

.kfs-cal-cell--absent {
	background: #fef2f2;
	border-color: #fecaca;
}
.kfs-cal-cell--absent .kfs-cal-status { color: #b91c1c; }

.kfs-cal-cell--off {
	background: #f3f6fb;
	border-color: #dde5f1;
}
.kfs-cal-cell--off .kfs-cal-status { color: #8ea0bf; }

.kfs-cal-cell--train {
	background: #e8f0fe;
	border-color: #bcd3f7;
}
.kfs-cal-cell--train .kfs-cal-status { color: #1a56c4; }

/* ============================================================
 * 인쇄 (통계 보고서 공문서 출력)
 * ========================================================== */

@media print {
	.kfs-sidebar,
	.kfs-topbar,
	.kfs-quick,
	button {
		display: none !important;
	}
	.kfs-main {
		margin: 0 !important;
	}
	.kfs-report {
		border: none;
	}
}

/* ============================================================
 * CCTV 라이브 영상 타일 (기숙사/농가 상세·등록 화면 공통)
 * ========================================================== */

.kfs-cctv {
	position: relative;
	overflow: hidden;
	background: #0b1220;
}
.kfs-cctv video,
.kfs-cctv__still {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.kfs-cctv video {
	filter: saturate(.85) contrast(1.05);
}
.kfs-cctv__still {
	filter: saturate(.55) contrast(1.02) brightness(.8);
}
.kfs-cctv__scan {
	position: absolute;
	inset: 0;
	z-index: 6;
	background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px);
	pointer-events: none;
}
.kfs-cctv__rec {
	position: absolute;
	left: 6px;
	top: 6px;
	z-index: 10;
	display: flex;
	align-items: center;
	gap: 4px;
	pointer-events: none;
}
.kfs-cctv__rec-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #ef4444;
	animation: kfsCctvRec 1.2s steps(2, start) infinite;
}
@keyframes kfsCctvRec {
	0%, 50% { opacity: 1; }
	50.01%, 100% { opacity: .15; }
}
.kfs-cctv__rec-txt {
	font-size: 8px;
	font-weight: 700;
	letter-spacing: .14em;
	color: #ef4444;
}
.kfs-cctv__name {
	position: absolute;
	left: 6px;
	bottom: 4px;
	z-index: 10;
	margin: 0;
	font-size: 9.5px;
	font-weight: 700;
	color: #e2e8f0;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .65);
	pointer-events: none;
}
.kfs-cctv__time {
	position: absolute;
	right: 6px;
	bottom: 4px;
	z-index: 10;
	font-size: 9px;
	font-weight: 600;
	color: #cbd5e1;
	font-variant-numeric: tabular-nums;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .65);
	pointer-events: none;
}
.kfs-cctv__state {
	position: absolute;
	inset: 0;
	z-index: 8;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	font-size: 11px;
	font-weight: 700;
	pointer-events: none;
}
.kfs-cctv__state--check {
	background: rgba(15, 23, 42, .55);
	color: #fbbf24;
}
.kfs-cctv__state--off {
	background: #0b1220;
	color: #64748b;
}