/*
 * components.css - 파일 처리 시스템 컴포넌트 스타일
 * 카드, 테이블, 버튼 등 재사용 가능한 컴포넌트 스타일을 정의합니다
 */

/* 카드 스타일 */
.card {
    border: none;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s, box-shadow 0.2s;
    margin-bottom: 1.5rem;
}

.card-header {
    padding: 1rem 1.25rem;
    font-weight: var(--font-weight-medium);
    border-bottom: none;
    background-color: var(--beige-light);

}

.card-header h4, .card-header h5 {
    margin: 0;
    color: var(--text-dark);
    font-weight: var(--font-weight-bold);
}

.results-result-file-card .card-header {
    background-color: var(--beige);
}

/*.general-file-card .card-header {*/
/*    background-color: var(--beige-lightest);*/
/*}*/


/*.manufacturer-file-card .card-header {*/
/*    background-color: var(--beige-light);*/
/*}*/

/*.recent-results-card .card-header {*/
/*    background-color: var(--beige);*/
/*}*/



/* 네비게이션 항목 스타일 */
.nav-item-link {
    position: relative;
    transition: color 0.3s ease;
    border-radius: var(--border-radius-sm);
}

.nav-item-link:hover {
    color: var(--blue-dark) !important;
}

.nav-item-link.active {
    color: var(--blue-dark) !important;
    font-weight: var(--font-weight-bold);
}

.nav-item-link.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--blue-dark);
    border-radius: 1.5px;
}

/* 버튼 스타일 */
.btn-primary {
    background-color: var(--blue-dark);
    border-color: var(--blue-dark);
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--blue);
    border-color: var(--blue);
}

.btn-secondary {
    background-color: var(--beige-dark);
    border-color: var(--beige-dark);
}

.btn-secondary:hover, .btn-primary:focus {
    background-color: var(--beige-median);
    border-color: var(--beige-median);
}

.btn-success {
    background-color: #7bac7e;
    border-color: #7bac7e;
}

.btn-success:hover, .btn-success:focus {
    background-color: #6c9a6f;
    border-color: #6c9a6f;
}

.btn-outline-primary {
    border-color: var(--blue-dark);
    color: var(--blue-dark);
}

.btn-outline-primary:hover {
    background-color: var(--blue-dark);
    border-color: var(--blue-dark);
    color: var(--beige-lightest);
}

.btn-outline-secondary {
    color: var(--beige-dark);
    border-color: var(--beige-dark);
}

.btn-outline-secondary:hover {
    background-color: var(--beige);
    border-color: var(--beige-dark);
    color: var(--text-dark);
}

.btn-danger{
    background-color: var(--red);
    border-color: var(--red);
}

/* 테이블 스타일 */
.table {
    border-collapse: separate;
    border-spacing: 0;
}

.table thead th {
    background-color: var(--blue-light);
    border-bottom: none;
    color: var(--text-dark);
    font-weight: var(--font-weight-medium);
}

.table tbody tr:hover {
    background-color: var(--beige-light);
}

/* 뱃지 스타일 */
.badge.bg-success {
    background-color: #7bac7e !important;
}

.badge.bg-danger {
    background-color: #d9534f !important;
}

.badge.bg-warning {
    background-color: #e0a800 !important;
    color: #212529;
}

.badge.bg-secondary {
    background-color: var(--text-light) !important;
}

/* 폼 컨트롤 */
.form-control {
    border-color: var(--beige);
    border-radius: var(--border-radius-sm);
    padding: 0.6rem 1rem;
}

.form-control:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 0.25rem rgba(184, 208, 229, 0.25);
}

/* 파일 항목 */
.file-item {
    transition: background-color 0.3s;
    border-radius: var(--border-radius-sm);
    padding: 0.75rem;
}

.file-item:hover {
    background-color: var(--beige-light);
}

/* 진행 상태 컨테이너 */
.progress-container {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.progress {
    height: 0.75rem;
    background-color: var(--beige-light);
    border-radius: 1rem;
    overflow: hidden;
}

.progress-bar {
    background-color: var(--blue-dark);
}

/* 상태별 배경색 */
.uploading {
    background-color: var(--blue-light);
}

.processing {
    background-color: var(--warning-bg);
}

.completed {
    background-color: var(--success-bg);
}

.failed {
    background-color: var(--danger-bg);
}