/* style.css */

/* [삭제됨] @import 구문 제거 (속도 향상을 위해 header.php로 이동) */

/* [수정] 화면 밀림(CLS) 방지: 스크롤바 공간을 미리 확보하여 로딩 시 덜컥거림 방지 */
/*
html {
    scrollbar-gutter: stable;
}*/

/* 2. 전체 배경, 폰트 적용 */
body {
	/* Pretendard 적용 (시스템 폰트 폴백 포함) */
	font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif !important;
	background-color: #121212 !important;
	/* 깊은 검정 */
	color: #ffffff !important;
	overflow-x: hidden;
}

/* 3. 카드 스타일 */
.card {
	background-color: #1e1e1e !important;
	color: #ffffff !important;
	border: 1px solid #333 !important;
}

.card-header {
	border-bottom: 1px solid #333 !important;
	font-weight: bold;
}

/* 4. 테이블 스타일 */
.table {
	color: #ffffff !important;
	border-color: #333 !important;
	white-space: nowrap;
	/* 기본적으로 줄 바꿈 방지 */
}

.table-dark {
	background-color: #1e1e1e !important;
	--bs-table-bg: #1e1e1e;
	--bs-table-striped-bg: #252525;
	--bs-table-hover-bg: #2c2c2c;
}

thead th {
	background-color: #2c2c2c !important;
	color: #ffffff !important;
	border-bottom: 2px solid #444 !important;
	font-size: 1.1rem;
}

tbody td {
	color: #ffffff !important;
	vertical-align: middle;
}

/* 테이블 스크롤바 (Webkit) */
.table-responsive::-webkit-scrollbar {
	height: 8px;
}

.table-responsive::-webkit-scrollbar-thumb {
	background: #444;
	border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-track {
	background: #1e1e1e;
}

/* 5. 탭(Tab) 메뉴 스타일 */
.nav-tabs {
	border-bottom: 1px solid #333 !important;
}

.nav-tabs .nav-link {
	color: #888 !important;
	border: 1px solid transparent !important;
}

.nav-tabs .nav-link:hover {
	color: #fff !important;
	border-color: #333 #333 #1e1e1e !important;
	background-color: #2c2c2c !important;
}

.nav-tabs .nav-link.active {
	color: #fff !important;
	background-color: #1e1e1e !important;
	border-color: #333 #333 #1e1e1e !important;
	font-weight: bold;
}

/* 6. 입력 폼(Input) 스타일 */
.form-control,
.form-select {
	background-color: #2c2c2c !important;
	border: 1px solid #444 !important;
	color: #fff !important;
}

.form-control::placeholder {
	color: #888 !important;
}

.form-control:focus,
.form-select:focus {
	background-color: #333 !important;
	border-color: #0d6efd !important;
	color: #fff !important;
	box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.form-control:disabled,
.form-select:disabled {
	background-color: #151515 !important;
	color: #888 !important;
	border-color: #333 !important;
	opacity: 1;
}

/* 7. 유틸리티 클래스 */
.text-muted {
	color: #b0b0b0 !important;
}

.text-light {
	color: #e0e0e0 !important;
}

.text-bright {
	color: #ffffff !important;
	font-weight: 500;
}

.text-dim {
	color: #aaaaaa !important;
	font-size: 0.9em;
}

/* 8. 로그인 카드 반응형 [수정됨] */
.login-card {
	width: 90% !important;
	/* 모바일: 화면 폭의 90% 차지 */
	max-width: 420px !important;
	/* PC/태블릿: 최대 420px까지만 커짐 (너무 커짐 방지) */
	margin: 0 auto;
	/* 중앙 정렬 */
}

/* 9. 모바일 미디어 쿼리 */
@media (max-width: 768px) {

	/* 모바일에서는 조금 더 꽉 차게 (95%) */
	.login-card {
		width: 95% !important;
	}

	.container {
		padding-left: 15px;
		padding-right: 15px;
	}

	.table {
		font-size: 0.85rem;
		white-space: normal !important;
		word-break: break-word;
	}

	.two-line-cell {
		white-space: normal !important;
		min-width: 90px;
	}

	thead th {
		font-size: 0.95rem;
	}

	.badge {
		font-size: 0.7em !important;
	}

	.navbar-brand {
		font-size: 1.1rem;
	}

	.card-title {
		font-size: 1.25rem;
	}

	.progress {
		height: 4px !important;
	}

	.nav-tabs .nav-link {
		padding: 8px 10px;
		font-size: 0.9rem;
	}
}

/* ---------------------------------------------------------
   [추가 1] 숫자 입력창 화살표(Spinner) 제거
   --------------------------------------------------------- */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type=number] {
	-moz-appearance: textfield;
	appearance: textfield;
}

/* ---------------------------------------------------------
   [추가 2] dashboard.php 전용 스타일
   --------------------------------------------------------- */
.stat-label {
	font-size: 0.7rem;
	color: #aaa !important;
	margin-bottom: -2px;
}

.stat-value {
	font-size: 0.8rem;
	font-weight: bold;
	letter-spacing: -0.5px;
}

.machine-card {
	height: 100%;
	min-height: 170px;
	cursor: pointer;
	transition: transform 0.2s, box-shadow 0.2s;
}

.machine-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
	border-color: #fff !important;
}

.modal-content {
	background-color: #1e1e1e !important;
	border: 1px solid #444 !important;
	color: #fff !important;
}

.modal-header,
.modal-footer {
	border-color: #444 !important;
}

.progress.bg-secondary {
	background-color: #444 !important;
}