@import './styles/variables.css';

/* ────────────────────────────────────────────────
   기본 리셋
──────────────────────────────────────────────── */
html, body, #root {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont,
               'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕',
               system-ui, sans-serif;
  font-size: 15px;
  background: var(--ga-gray-50);
  color: var(--ga-gray-800);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ────────────────────────────────────────────────
   숫자 등폭 — 금액/날짜 컬럼 정렬
──────────────────────────────────────────────── */
.ga-tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* 금액 표시 공통 */
.ga-amount {
  font-feature-settings: 'tnum';
  font-variant-numeric: tabular-nums;
}

/* ────────────────────────────────────────────────
   페이지 컨테이너 최대 폭
──────────────────────────────────────────────── */
.ga-page-container {
  max-width: var(--ga-page-max-width);
  margin: 0 auto;
}

/* ────────────────────────────────────────────────
   사이드바 — 토스 활성 메뉴 인디케이터
──────────────────────────────────────────────── */
.ant-menu-item-selected {
  position: relative;
}

.ant-menu-item-selected::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 60%;
  width: 4px;
  background: var(--ga-primary);
  border-radius: 0 4px 4px 0;
}

/* ────────────────────────────────────────────────
   Ant Design Table — 토스 스타일
──────────────────────────────────────────────── */
.ant-table-thead > tr > th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--ga-gray-50) !important;
  font-weight: 600;
  font-size: 13px;
  color: var(--ga-gray-600);
  border-bottom: 1px solid var(--ga-gray-200) !important;
}

/* zebra 줄무늬 제거 — 토스는 hover 만 */
.ant-table-tbody > tr > td {
  height: 56px;
  font-size: 14px;
  color: var(--ga-gray-800);
}

.ant-table-tbody > tr:hover > td {
  background: var(--ga-gray-50) !important;
}

/* ────────────────────────────────────────────────
   Ant Design Pagination — 토스풍
──────────────────────────────────────────────── */
.ant-table-pagination.ant-pagination {
  justify-content: flex-end !important;
  margin-top: 16px !important;
}

.ant-pagination-item {
  border-radius: 8px !important;
  border-color: var(--ga-gray-200) !important;
}

.ant-pagination-item-active {
  background: var(--ga-primary) !important;
  border-color: var(--ga-primary) !important;
}

.ant-pagination-item-active a {
  color: #ffffff !important;
}

.ant-pagination-prev .ant-pagination-item-link,
.ant-pagination-next .ant-pagination-item-link {
  border-radius: 8px !important;
}

/* ────────────────────────────────────────────────
   AG Grid — quartz 테마 토스 커스터마이징
──────────────────────────────────────────────── */
.ag-theme-quartz {
  --ag-font-family: 'Pretendard', -apple-system, system-ui, sans-serif;
  --ag-font-size: 14px;
  --ag-header-height: 44px;
  --ag-row-height: 56px;
  --ag-header-background-color: var(--ga-gray-50);
  --ag-header-foreground-color: var(--ga-gray-600);
  --ag-header-column-separator-color: var(--ga-gray-200);
  --ag-odd-row-background-color: #ffffff;
  --ag-even-row-background-color: #ffffff;
  --ag-row-hover-color: var(--ga-gray-50);
  --ag-selected-row-background-color: var(--ga-primary-light);
  --ag-border-color: var(--ga-gray-200);
  --ag-cell-horizontal-padding: 16px;
  --ag-borders: solid 1px;
  --ag-border-radius: 0;
}

/* AG Grid 합계행 강조 */
.ag-theme-quartz .ag-row-pinned {
  background: var(--ga-primary-light) !important;
  font-weight: 700;
  color: var(--ga-gray-800);
}

/* AG Grid 헤더 폰트 통일 */
.ag-theme-quartz .ag-header-cell-label {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0;
}

/* ────────────────────────────────────────────────
   Ant Design Card — 토스 카드 스타일
──────────────────────────────────────────────── */
.ant-card {
  box-shadow: var(--ga-shadow-sm) !important;
  border: 1px solid var(--ga-gray-100) !important;
  border-radius: 16px !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.ant-card-head {
  border-bottom-color: var(--ga-gray-100) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
}

/* ────────────────────────────────────────────────
   검색 폼 영역 — filled 톤
──────────────────────────────────────────────── */
.ant-pro-table-search {
  background: #ffffff !important;
  border: 1px solid var(--ga-gray-100) !important;
  border-radius: var(--ga-radius-lg) !important;
  box-shadow: var(--ga-shadow-sm) !important;
  margin-bottom: var(--ga-space-4) !important;
}

/* ────────────────────────────────────────────────
   입력창 — filled 배경 (토스 스타일 옵션)
──────────────────────────────────────────────── */
.ga-input-filled .ant-input,
.ga-input-filled .ant-input-affix-wrapper,
.ga-input-filled .ant-select-selector,
.ga-input-filled .ant-picker {
  background: var(--ga-gray-100) !important;
  border-color: transparent !important;
}

.ga-input-filled .ant-input:focus,
.ga-input-filled .ant-input-affix-wrapper-focused,
.ga-input-filled .ant-select-focused .ant-select-selector,
.ga-input-filled .ant-picker-focused {
  background: #ffffff !important;
  border-color: var(--ga-primary) !important;
}

/* ────────────────────────────────────────────────
   버튼 — 토스 느낌 (hover 어두워짐)
──────────────────────────────────────────────── */
.ant-btn {
  transition: all 0.2s ease !important;
  font-weight: 600 !important;
}

.ant-btn-primary:hover {
  filter: brightness(0.93) !important;
}

.ant-btn:not(.ant-btn-primary):hover {
  border-color: var(--ga-gray-300) !important;
  color: var(--ga-gray-800) !important;
}

/* ────────────────────────────────────────────────
   모달 — 큰 라운드
──────────────────────────────────────────────── */
.ant-modal-content {
  border-radius: 20px !important;
  overflow: hidden;
}

.ant-modal {
  max-width: 720px;
}

/* ────────────────────────────────────────────────
   Drawer
──────────────────────────────────────────────── */
.ant-drawer-content-wrapper {
  max-width: 720px;
}

.ant-drawer-content {
  border-radius: 0;
}

/* ────────────────────────────────────────────────
   Toast 메시지 위치 통일
──────────────────────────────────────────────── */
.ant-message {
  top: 16px !important;
  right: 16px !important;
  left: auto !important;
}

/* ────────────────────────────────────────────────
   폼 라벨
──────────────────────────────────────────────── */
.ant-form-item-label > label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ga-gray-600) !important;
}

/* ────────────────────────────────────────────────
   태그/칩 — 토스 둥글둥글
──────────────────────────────────────────────── */
.ant-tag {
  border-radius: 999px !important;
  font-weight: 500;
  border: none !important;
  padding: 2px 10px !important;
}

/* ────────────────────────────────────────────────
   Skeleton 로딩 공통
──────────────────────────────────────────────── */
.ga-skeleton-card {
  padding: 24px;
  background: #ffffff;
  border-radius: var(--ga-radius-lg);
  border: 1px solid var(--ga-gray-100);
}

/* ────────────────────────────────────────────────
   빈 상태 (EmptyState)
──────────────────────────────────────────────── */
.ga-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  color: var(--ga-gray-400);
}

/* ────────────────────────────────────────────────
   KPI 카드 트렌드 화살표
──────────────────────────────────────────────── */
.ga-kpi-trend-up   { color: var(--ga-success); }
.ga-kpi-trend-down { color: var(--ga-danger); }
.ga-kpi-trend-flat { color: var(--ga-gray-500); }

/* ────────────────────────────────────────────────
   링크 색상
──────────────────────────────────────────────── */
a {
  color: var(--ga-primary);
  transition: color 0.2s ease;
}
a:hover {
  color: var(--ga-primary-hover);
}

/* ────────────────────────────────────────────────
   페이지 헤더 (ProPageContainer)
──────────────────────────────────────────────── */
.ant-pro-page-container-warp-page-header {
  background: var(--ga-gray-50) !important;
  border-bottom: 1px solid var(--ga-gray-100) !important;
}

/* ────────────────────────────────────────────────
   스크롤바
──────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--ga-gray-50);
}

::-webkit-scrollbar-thumb {
  background: var(--ga-gray-300);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--ga-gray-400);
}

/* ────────────────────────────────────────────────
   전환 효과 통일
──────────────────────────────────────────────── */
.ant-modal,
.ant-drawer {
  transition: all 0.2s ease;
}
