/**
 * /css/admin-table.css
 * ============================================================
 * 관리자 공통 테이블/리스트 디자인 스타일시트
 * ============================================================
 * - 기준 디자인: /admin/monthly_closing_list.php 의 .closing-table 스타일
 * - 원칙: 최소 컬러, 컴팩트 패딩, 명확한 행 구분, 가독성 우선
 * - 사용법: <table class="admin-table"> 또는 기존 테이블에 클래스 추가
 * - header.php 에서 전역 로드되므로 별도 <link> 불필요
 * ============================================================
 */

/* ──────────────────────────────────────────────────────────
   1. 기본 테이블 구조
──────────────────────────────────────────────────────────── */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;              /* 기본 폰트 크기 */
    color: #374151;               /* gray-700 */
    background: #fff;
}

/* 헤더 셀 */
.admin-table thead th {
    background: #f3f4f6;          /* gray-100 — 연한 회색, 컬러 최소화 */
    color: #6b7280;               /* gray-500 */
    font-size: 11px;
    font-weight: 600;
    padding: 7px 8px;
    text-align: center;
    border: 1px solid #e5e7eb;   /* gray-200 */
    white-space: nowrap;
    /* Tailwind의 uppercase tracking-wider 제거 → 한글 가독성 향상 */
    letter-spacing: 0;
    text-transform: none;
}

/* 일반 데이터 셀 */
.admin-table tbody td {
    padding: 5px 8px;
    border: 1px solid #e5e7eb;
    font-size: 12px;
    vertical-align: middle;
    white-space: nowrap;
    color: #374151;
}

/* ──────────────────────────────────────────────────────────
   2. 행 스타일
──────────────────────────────────────────────────────────── */
/* 짝수 행 배경 (zebra stripe - 선택 적용) */
/* .admin-table tbody tr:nth-child(even) td { background: #fafafa; } */

/* 행 호버 - 연한 중립 배경 (파란색 최소화) */
.admin-table tbody tr:hover td {
    background: #f8fafc !important; /* slate-50 — 중립적 */
}

/* ──────────────────────────────────────────────────────────
   3. 정렬 헬퍼 클래스
──────────────────────────────────────────────────────────── */
/* 숫자/금액 우정렬 */
.admin-table .col-num,
.admin-table td.num {
    text-align: right;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 11px;
}

/* 중앙정렬 */
.admin-table .col-center,
.admin-table td.center,
.admin-table th.center {
    text-align: center;
}

/* 좌정렬 (기본이지만 명시가 필요한 경우) */
.admin-table .col-left { text-align: left; }

/* ──────────────────────────────────────────────────────────
   4. 특수 행 스타일
──────────────────────────────────────────────────────────── */
/* 합계/소계 행 */
.admin-table .sum-row td,
.admin-table tr.sum-row td {
    background: #f9fafb !important; /* gray-50 — 강한 색상 피하고 구분만 */
    font-weight: 700;
    border-top: 2px solid #d1d5db; /* 합계행 상단 구분선 */
}

/* 비어있음 행 */
.admin-table .empty-row td {
    text-align: center;
    padding: 36px 0;
    color: #9ca3af;               /* gray-400 */
    font-size: 13px;
}

/* 강조 행 (경고/오류 등 필요시) */
.admin-table tr.row-warn td { background: #fffbeb; } /* amber-50 */
.admin-table tr.row-danger td { background: #fff1f2; } /* rose-50 */
.admin-table tr.row-muted td { color: #9ca3af; opacity: 0.8; }

/* ──────────────────────────────────────────────────────────
   5. 상태 뱃지 (status badge) — 최소 컬러 원칙
──────────────────────────────────────────────────────────── */
.admin-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
}

/* 공통 상태 색상 */
.admin-badge.active   { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.admin-badge.pending  { background: #fefce8; color: #854d0e; border-color: #fef08a; }
.admin-badge.inactive { background: #f9fafb; color: #6b7280; border-color: #e5e7eb; }
.admin-badge.danger   { background: #fff1f2; color: #be123c; border-color: #fecdd3; }
.admin-badge.info     { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.admin-badge.purple   { background: #faf5ff; color: #6d28d9; border-color: #ddd6fe; }
.admin-badge.gray     { background: #f3f4f6; color: #374151; border-color: #d1d5db; }

/* ──────────────────────────────────────────────────────────
   6. 액션 버튼 (테이블 내 소형 버튼)
──────────────────────────────────────────────────────────── */
.admin-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s, box-shadow 0.15s;
    text-decoration: none;
    white-space: nowrap;
}
.admin-btn:hover { opacity: 0.85; }

/* 기본(Indigo) */
.admin-btn-primary {
    background: #4f46e5;
    color: #fff;
    border-color: #4f46e5;
}
.admin-btn-primary:hover { background: #4338ca; color: #fff; }

/* 보조(회색 링) */
.admin-btn-secondary {
    background: #fff;
    color: #374151;
    border-color: #d1d5db;
}
.admin-btn-secondary:hover { background: #f9fafb; }

/* 위험(빨강) */
.admin-btn-danger {
    background: #fff1f2;
    color: #be123c;
    border-color: #fecdd3;
}
.admin-btn-danger:hover { background: #ffe4e6; }

/* 성공(초록) */
.admin-btn-success {
    background: #f0fdf4;
    color: #15803d;
    border-color: #bbf7d0;
}
.admin-btn-success:hover { background: #dcfce7; }

/* ──────────────────────────────────────────────────────────
   7. 테이블 래퍼 카드
──────────────────────────────────────────────────────────── */
/* 테이블을 감싸는 흰색 카드 컨테이너 */
.admin-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    border: 1px solid #e5e7eb;
    overflow: hidden;           /* 테이블 모서리 클리핑 */
    margin-bottom: 1.5rem;
}

/* 카드 헤더 바 */
.admin-card-header {
    padding: 10px 16px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.admin-card-header h3,
.admin-card-header .title {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

/* 카드 내 테이블 래퍼 (가로 스크롤 허용) */
.admin-card .table-wrap {
    overflow-x: auto;
    /* iOS 스크롤 가속 - 최신 브라우저에서는 자동 처리 */
}

/* ──────────────────────────────────────────────────────────
   8. 검색 필터 패널 공통 스타일
──────────────────────────────────────────────────────────── */
/* 검색 필터 카드 */
.admin-filter-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.admin-filter-header {
    padding: 10px 16px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}
.admin-filter-header:hover { background: #f3f4f6; }
.admin-filter-body {
    padding: 14px 16px;
}

/* ──────────────────────────────────────────────────────────
   9. 기존 Tailwind divide-y 테이블 오버라이드 (호환성)
   — .admin-table을 추가하면 기존 divide-y 스타일 위에 적용됨
──────────────────────────────────────────────────────────── */
/* Tailwind의 divide-y로 생성된 border를 admin-table 표준으로 통일 */
.admin-table thead {
    border-bottom: none; /* admin-table의 th/td border로 대체 */
}
.admin-table tbody tr {
    border-bottom: none; /* td border로 대체 */
}

/* ──────────────────────────────────────────────────────────
   10. 반응형 처리
──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .admin-table thead th,
    .admin-table tbody td {
        font-size: 11px;
        padding: 4px 6px;
    }
}

@media print {
    .admin-table thead th {
        background: #e5e7eb !important;
        color: #111827 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .admin-table .sum-row td {
        background: #f3f4f6 !important;
    }
}