/* ============================================
   Admin Dashboard Styles
   Desktop-focused professional design
   ============================================ */

/* Admin Layout */
.admin-layout {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.admin-header {
    background: var(--gradient-header);
    color: white;
    padding: var(--spacing-md) var(--spacing-xl);
    box-shadow: var(--shadow-md);
    position: sticky;
    top: 0;
    z-index: 100;
}

.admin-header-content {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.admin-logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    font-size: 1.25rem;
    font-weight: 700;
}

.admin-logo-icon {
    font-size: 1.5rem;
}

.admin-user-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.admin-username {
    font-size: 0.875rem;
    opacity: 0.9;
}

.admin-logout {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    text-decoration: none;
}

.admin-logout:hover {
    background: rgba(255, 255, 255, 0.3);
    color: white;
}

/* Navigation */
.admin-nav {
    background: white;
    border-bottom: 1px solid var(--gray-200);
    padding: 0 var(--spacing-xl);
}

.admin-nav-content {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    gap: 0;                      /* 항목 사이 경계는 구분선(::after)이 맡는다 */
    overflow-x: auto;            /* 메뉴가 더 늘어나면 줄바꿈 대신 가로 스크롤 */
    scrollbar-width: thin;
}

/* 넓은 화면에서 스크롤바가 나타나 nav 높이를 밀지 않도록 얇게 */
.admin-nav-content::-webkit-scrollbar {
    height: 4px;
}

.admin-nav-content::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: var(--radius-full);
}

.admin-nav-link {
    position: relative;
    flex: 0 0 auto;              /* 좁혀지지 않게 — 좁아지면 글자가 두 줄로 접힌다 */
    white-space: nowrap;         /* 메뉴명은 항상 한 줄 */
    padding: 0.875rem 1.125rem;
    font-size: 0.9375rem;
    color: var(--gray-600);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 3px solid transparent;
    transition: all var(--transition-fast);
}

/* 메뉴 구분선 — 항목 경계를 뚜렷하게 */
.admin-nav-link::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 18px;
    background: var(--gray-300);
}

.admin-nav-link:last-child::after {
    display: none;
}

.admin-nav-link:hover {
    color: var(--primary-500);
    background: var(--primary-50);
}

.admin-nav-link.active {
    color: var(--primary-600);
    background: var(--primary-50);
    border-bottom-color: var(--primary-500);
    font-weight: 700;
}

/* Main content */
.admin-main {
    flex: 1;
    padding: var(--spacing-xl);
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-xl);
}

.page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.page-title-icon {
    font-size: 1.75rem;
}

/* Stats cards */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.stat-card {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-md);
    text-align: center;
}

.stat-icon {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-md);
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--gray-900);
}

.stat-label {
    font-size: 0.875rem;
    color: var(--gray-600);
    margin-top: var(--spacing-xs);
}

.stat-card.primary .stat-value {
    color: var(--primary-600);
}

.stat-card.success .stat-value {
    color: var(--success-600);
}

.stat-card.warning .stat-value {
    color: var(--warning-600);
}

.stat-card.danger .stat-value {
    color: var(--danger-600);
}

/* Data table */
.data-table-container {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.data-table-header {
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.data-table-title {
    font-weight: 600;
    color: var(--gray-900);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    padding: var(--spacing-md) var(--spacing-lg);
    text-align: left;
    border-bottom: 1px solid var(--gray-200);
}

.data-table th {
    background: var(--gray-50);
    font-weight: 600;
    color: var(--gray-700);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.data-table tr:hover {
    background: var(--gray-50);
}

.data-table tr:last-child td {
    border-bottom: none;
}

/* Status badge in table */
.table-status {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 500;
}

.table-status.completed {
    background: var(--success-50);
    color: var(--success-600);
}

.table-status.pending {
    background: var(--gray-200);
    color: var(--gray-600);
}

.table-status.in-progress {
    background: var(--warning-50);
    color: var(--warning-600);
}

.table-status.exception {
    background: #FFF3E0;
    color: #E65100;
}

/* Photo thumbnail */
.photo-thumbnail {
    width: 60px;
    height: 45px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: transform var(--transition-fast);
}

.photo-thumbnail:hover {
    transform: scale(1.1);
}

/* Upload area */
.upload-area {
    border: 3px dashed var(--gray-300);
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl);
    text-align: center;
    background: var(--gray-50);
    transition: all var(--transition-fast);
    cursor: pointer;
}

.upload-area:hover {
    border-color: var(--primary-400);
    background: var(--primary-50);
}

.upload-area.dragover {
    border-color: var(--primary-500);
    background: var(--primary-100);
}

.upload-icon {
    font-size: 4rem;
    margin-bottom: var(--spacing-lg);
}

.upload-text {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: var(--spacing-sm);
}

.upload-hint {
    font-size: 0.875rem;
    color: var(--gray-500);
}

/* Search/Filter section */
.filter-section {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--shadow-md);
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr) auto;
    gap: var(--spacing-md);
    align-items: end;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.filter-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-700);
}

/* Driver management */
.driver-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
}

.driver-card {
    background: white;
    border-radius: var(--radius-xl);
    padding: 16px;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    min-width: 0;
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.driver-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

.driver-card:focus-visible {
    outline: 3px solid var(--primary-200);
    outline-offset: 2px;
}

.driver-avatar {
    width: 48px;
    height: 48px;
    min-width: 48px;
    background: var(--primary-100);
    color: var(--primary-600);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    flex-shrink: 0;
}

.driver-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.driver-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.driver-vehicle {
    font-size: 0.8125rem;
    color: var(--gray-600);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.driver-status {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    white-space: nowrap;
    flex-shrink: 0;
}

.driver-status.active {
    background: var(--success-50);
    color: var(--success-600);
}

.driver-status.inactive {
    background: var(--gray-200);
    color: var(--gray-600);
}

.driver-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.driver-action-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--gray-300);
    background: white;
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.driver-action-btn:hover {
    background: var(--gray-100);
}

.driver-action-btn.delete:hover {
    background: var(--danger-50);
    border-color: var(--danger-500);
    color: var(--danger-500);
}

/* Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
}

.modal-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.modal {
    background: white;
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow: auto;
    box-shadow: var(--shadow-xl);
    transform: translateY(20px);
    transition: transform var(--transition-normal);
}

.modal-overlay.visible .modal {
    transform: translateY(0);
}

.modal-header {
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-title {
    font-size: 1.125rem;
    font-weight: 600;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--gray-500);
    line-height: 1;
}

.modal-close:hover {
    color: var(--gray-700);
}

.modal-body {
    padding: var(--spacing-lg);
}

.modal-footer {
    padding: var(--spacing-lg);
    border-top: 1px solid var(--gray-200);
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
}

/* Login page admin specific */
.admin-login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    padding: var(--spacing-lg);
}

.admin-login-card {
    width: 100%;
    max-width: 420px;
    background: white;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

.admin-login-header {
    padding: var(--spacing-2xl);
    text-align: center;
    background: var(--gradient-header);
    color: white;
}

.admin-login-form {
    padding: var(--spacing-2xl);
}

/* Responsive */
/* 메뉴가 컨테이너(1400px)에 빠듯해지는 구간 — 여백·글자를 줄여 한 줄을 유지한다 */
@media (max-width: 1440px) {
    .admin-nav {
        padding: 0 var(--spacing-md);
    }

    .admin-nav-link {
        padding: 0.875rem 0.875rem;
        font-size: 0.875rem;
    }
}

@media (max-width: 1200px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .filter-grid {
        grid-template-columns: 1fr;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
    }
}

/* ══════════════════════════════════════════════
   모바일 반응형 보완 (2026-06 QA)
   네비 가로스크롤 / 데이터테이블 가로스크롤 / 헤더 세로스택
   ══════════════════════════════════════════════ */

/* 헤더 — 모바일 한 줄화(2026-10-01, 0단계 급한 수정)
   기존에는 로고·사용자정보를 세로로 쌓아 헤더 하나가 93px까지 늘어났다(캡처 확인).
   좁은 화면에서도 한 줄에 다 넣기 위해 이름 표시는 접고, 버튼은 짧게 줄인다.
   PC(1400px 폭 예산) 쪽 모양은 이 미디어쿼리 밖이라 그대로다. */
@media (max-width: 480px) {
    .admin-header { padding: 0.5rem 0.75rem; }
    .admin-header-content {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.35rem;
    }
    .admin-logo { font-size: 0.82rem; gap: 0.3rem; overflow: hidden; white-space: nowrap; }
    .admin-logo-icon { font-size: 1rem; }
    .admin-user-info { font-size: 0.72rem; gap: 0.3rem; flex-shrink: 0; }
    /* 이름은 좁을 때 숨긴다 — 로그인 화면에서 이미 본인을 확인했으므로 필수 정보는 아니다 */
    .admin-username { display: none; }
    .admin-logout { padding: 0.35rem 0.5rem; font-size: 0.72rem; white-space: nowrap; }
    .admin-main { padding: 0.75rem; }
}

/* 내비게이션 — 줄바꿈 뭉침 대신 가로 스크롤 탭 */
@media (max-width: 768px) {
    .admin-nav { padding: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    /* 스크롤은 .admin-nav가 맡는다 — 여기서도 잡으면 이중 스크롤 컨테이너가 된다 */
    .admin-nav-content { flex-wrap: nowrap; padding: 0 0.5rem; gap: 0; overflow-x: visible; }
    .admin-nav-link { white-space: nowrap; padding: 0.75rem 0.75rem; font-size: 0.8rem; }
}

/* 데이터 테이블 — 우측 컬럼 잘림 방지(가로 스크롤 래퍼화) */
@media (max-width: 768px) {
    .data-table-container { overflow: visible; }
    .data-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    .data-table th, .data-table td { padding: 0.5rem 0.5rem; font-size: 0.78rem; }
}

/* 통계(회수관제) 표·차트 — 가로 스크롤 + 카드 축소 */
@media (max-width: 768px) {
    .ct-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .ct-table { min-width: 480px; }
    .ct-table th, .ct-table td { padding: 0.35rem 0.4rem; font-size: 0.78rem; }
    .chart-wrap { height: 220px; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .stat-card { padding: var(--spacing-md); }
    .stat-icon { font-size: 1.8rem; }
    .stat-value { font-size: 1.5rem; }
}

/* 타임라인 카드(.timeline-*)의 480px 규칙은 admin/timeline.html 자체 <style>로
   옮겼다(2026-10-01) — 그 클래스들은 이 페이지 소유이고, 여기 두면 admin.css가
   <link>로 먼저 로드돼 페이지 안 무조건 규칙(같은 우선순위·더 뒤 순서)에 항상
   덮여 실제로는 적용되지 않는 죽은 코드였다. */