/**
 * 연차 관리 시스템 - 반응형 스타일
 * Mobile-first, Breakpoints: 576 | 768 | 992 | 1200
 */

/* ===== Base: overflow 방지 ===== */
html, body { overflow-x: hidden; }
.app-layout { overflow-x: hidden; min-height: 100vh; min-height: 100dvh; background: #fff; }

/* ===== 모바일 메뉴 (< 992px) ===== */
@media (max-width: 991.98px) {
  /* 헤더에 타이틀 있으므로 콘텐츠 영역 타이틀 숨김 */
  .page-title-wrap { display: none !important; }
  .page-header .page-title,
  .page-header { display: none !important; }
  .app-sidebar {
    /* 모바일: 오프셋·라운드·overflow 초기화, 전체 높이로 슬라이드 */
    top: 0;
    left: 0;
    height: 100vh;
    border-radius: 0;
    overflow: hidden;
    width: min(280px, calc(100vw - 48px));
    max-width: 100%;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.28s;
    z-index: 300;
    box-shadow: none;
    will-change: transform;
  }
  .app-sidebar.is-open {
    transform: translateX(0);
    box-shadow: 16px 0 48px rgba(0, 0, 0, 0.2);
  }
  .app-sidebar-brand {
    position: relative;
    padding-right: 52px;
    border-radius: 0;
  }
  .sidebar-close {
    display: flex !important;
    position: absolute;
    right: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
  }
  .header-menu-btn {
    display: flex !important;
    flex-shrink: 0;
  }
  .app-main {
    margin-left: 0;
    min-width: 0;
  }
  .app-header {
    padding: 0 var(--space-4);
    gap: var(--space-2);
  }
  .app-header-title {
    font-size: 1rem;
    font-weight: 600;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .app-header-user-name { display: none; }
  .app-content {
    padding: var(--space-4);
    min-width: 0;
  }
}

/* ===== 모바일 (< 768px) ===== */
@media (max-width: 767.98px) {
  .app-content { padding: var(--space-3); }
  .app-header { padding: 0 var(--space-3); }
  .app-header-title { font-size: 0.9375rem; }
  .app-header-user .btn {
    padding: var(--space-2) var(--space-3);
    font-size: 0.8125rem;
  }
  .card, .card-body, .card-header {
    padding: 10px !important;
  }
  .page-header {
    margin-bottom: var(--space-5);
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }
  .page-header-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .page-header-actions .btn { width: 100%; justify-content: center; }
  .page-title { font-size: 1.25rem; }
  .page-subtitle { font-size: 0.8125rem; }
  .table th, .table td {
    padding: var(--space-3) var(--space-3);
    font-size: 0.8125rem;
  }
  .table-docs thead th {
    padding: 0.625rem 0.75rem;
    font-size: 0.625rem;
  }
  .table-docs tbody td {
    padding: 0.625rem 0.75rem;
    font-size: 0.8125rem;
  }
  .form-group { margin-bottom: var(--space-4); }
  .btn-lg {
    padding: var(--space-3) var(--space-5);
    font-size: 0.9375rem;
    width: 100%;
  }
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .mb-6 { margin-bottom: var(--space-5); }
  .mb-4 { margin-bottom: var(--space-4); }
}

/* ===== 초소형 (< 576px) ===== */
@media (max-width: 575.98px) {
  .app-content { padding: var(--space-3); }
  .app-sidebar { width: calc(100vw - 32px); max-width: 280px; }
  .page-title { font-size: 1.125rem; }
  .empty-state { padding: var(--space-6); }
  .table th, .table td { padding: var(--space-2) var(--space-3); font-size: 0.75rem; }
  .table-docs thead th { padding: 0.5rem 0.625rem; font-size: 0.6rem; }
  .table-docs tbody td { padding: 0.5rem 0.625rem; font-size: 0.75rem; }
}

/* ===== 테이블: 가로 스크롤 ===== */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table { min-width: 560px; }
.table-docs { min-width: 600px; }

/* 대시보드 테이블: min-width 제거 → 모바일 가로 스크롤 최소화 */
.dashboard-page .table-docs { min-width: 0; }
.dashboard-page .table-docs thead th,
.dashboard-page .table-docs tbody td {
  white-space: nowrap;
}

/* 연차 승인 테이블: 버튼 영역 */
@media (max-width: 767.98px) {
  .table td .btn-sm { padding: var(--space-1) var(--space-2); font-size: 0.7rem; }
  .table td .btn + .btn { margin-left: var(--space-1); }
}

/* 대시보드 테이블 모바일: 패딩 축소 + 관리 버튼 아이콘만 표시 */
@media (max-width: 767.98px) {
  .dashboard-page .table-docs thead th { padding: 0.45rem 0.55rem; font-size: 0.6rem; }
  .dashboard-page .table-docs tbody td { padding: 0.5rem 0.55rem;  font-size: 0.75rem; }

  /* 관리 버튼: 텍스트 숨기고 아이콘만 표시 */
  .dashboard-page .leave-manage-btn { padding: 0 8px; gap: 0; }
  .dashboard-page .leave-manage-btn > i { font-size: 0.9rem; }
  .dashboard-page .leave-manage-btn > i + * { display: none; }
  .dashboard-page .leave-manage-btns { gap: 4px; }
}

/* ===== 모달 반응형 ===== */
[id$="Modal"] {
  max-height: 90vh;
  overflow-y: auto;
}
@media (max-width: 575.98px) {
  [id$="Modal"] {
    left: var(--space-3);
    right: var(--space-3);
    width: auto;
    max-width: none;
    top: 50%;
    transform: translateY(-50%);
    max-height: 85vh;
  }
}

/* ===== 대시보드 반응형 ===== */
@media (max-width: 991.98px) {
  .dashboard-page .admin-rate-row {
    grid-template-columns: 1fr 1fr;
  }
  .dashboard-page .admin-stat-top {
    grid-template-columns: 1fr 1fr;
  }
  .dashboard-page .admin-stat-top > *:first-child {
    grid-column: 1 / -1;
  }
  .dashboard-page .admin-stat-sub {
    grid-template-columns: 1fr 1fr;
  }
  .dashboard-page .stat-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
  }
  .dashboard-page .page-header { flex-wrap: wrap; gap: var(--space-4); }
  .dashboard-page .page-title-wrap { flex-wrap: wrap; }
  .dashboard-page .dash-form-company { max-width: 100%; }
}
@media (max-width: 767.98px) {
  .dashboard-page .admin-rate-row {
    grid-template-columns: 1fr;
  }
  .dashboard-page .admin-stat-top {
    grid-template-columns: 1fr;
  }
  .dashboard-page .admin-stat-sub {
    grid-template-columns: 1fr;
  }
  .dashboard-page .stat-value-lg { font-size: 1.4rem; }
  .dashboard-page .stat-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
  }
  .dashboard-page .stat-grid-leave-row {
    grid-template-columns: 1fr;
  }
  .dashboard-page .page-title { font-size: 1.25rem; }
  .dashboard-page .page-title-icon { width: 40px; height: 40px; font-size: 1.1rem; }
  .dashboard-page .stat-value { font-size: 1.5rem; }
  .dashboard-page .stat-card {
    min-height: 120px;
    padding: var(--space-4) !important;
  }
  .dashboard-page .stat-card-leave { min-height: 140px; }
  .dashboard-page .dash-action-btn {
    min-height: 48px;
    padding: 12px 20px;
    font-size: 0.9rem;
  }
  .dashboard-page .mini-donut { width: 56px; height: 56px; }
  .dashboard-page .donut-wrapper { width: 56px; height: 56px; }
  .dashboard-page .donut-wrapper.donut-wrapper-lg { width: 80px; height: 80px; }
  .dashboard-page .donut-wrapper .donut-center { font-size: 0.72rem; }
  .dashboard-page .donut-wrapper-lg .donut-center { font-size: 0.9rem; }
  .dashboard-page .status-circle { width: 56px; height: 56px; }
  .dashboard-page .status-value { font-size: 1rem; }
  .dashboard-page .dash-card .card-header-light,
  .dashboard-page .dash-card .card-body {
    padding: 10px !important;
  }
  .dashboard-page .card-header-light.flex-between {
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .dashboard-page .dash-main-single {
    grid-template-columns: 1fr;
  }
  .dashboard-page .dash-main-single > .dash-card:only-child {
    grid-column: 1;
  }
  /* 연차 신청: 모바일 1열 */
  .leave-apply-body {
    grid-template-columns: 1fr;
  }
  /* 잔여현황 카드: 모바일 2열 */
  .leave-balance-grid-row {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ── 연차현황 달력 카드: 패딩 최소화 ── */
  .status-cal-card.card,
  .status-cal-card .card-body {
    padding: 8px 6px !important;
  }
  .leave-cal-wrap {
    padding: 0 !important;
  }
  .leave-cal-header {
    gap: 0.75rem;
    margin-bottom: 6px;
    padding: 0 2px;
  }
  .leave-cal-header .leave-cal-title {
    font-size: 0.95rem;
  }
  .leave-cal-grid,
  .sc-cal-grid {
    gap: 2px;
  }
  .leave-cal-dow {
    font-size: 0.62rem;
    padding: 0.18rem 0;
  }
  .leave-cal-day,
  .sc-day {
    font-size: 0.72rem;
    min-height: 42px;
    padding: 3px 2px 2px;
  }
  .sc-day.admin-day {
    min-height: 72px;
  }
  .sc-day-label {
    font-size: 0.56rem;
    margin-top: 2px;
  }
  .sc-chip { font-size: 0.52rem; padding: 1px 3px; }
  .sc-chip-more { font-size: 0.5rem; }
  .sc-legend {
    margin-top: 6px;
    gap: 0.6rem;
    font-size: 0.7rem;
  }
}
@media (max-width: 575.98px) {
  .dashboard-page .stat-value { font-size: 1.35rem; }
  .dashboard-page .stat-card { min-height: 110px; }
}

/* ===== 로그인 페이지 ===== */
@media (max-width: 575.98px) {
  .login-page { padding: var(--space-4); }
  .login-card-header { padding: var(--space-6); }
  .login-card-body { padding: var(--space-6); }
  .login-title { font-size: 1.25rem; }
}

/* ===== 폼: 시간 입력 모바일 ===== */
@media (max-width: 575.98px) {
  .form-row-time { flex-direction: column; align-items: stretch; }
  .form-row-time .form-input-flex { flex: none; }
}

/* ===== PC: 햄버거/닫기 숨김 ===== */
@media (min-width: 992px) {
  .sidebar-backdrop.is-visible { display: none !important; }
  .app-sidebar.is-open { transform: none; }
}

/* ===== Settings 모바일 ===== */
@media (max-width: 575.98px) {
  .settings-card-header { padding: 16px 16px 0; }
  .settings-card-body { padding: 12px 16px 20px; }
  .settings-row { gap: 12px; }
  .settings-sub-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .settings-time-range { flex-wrap: wrap; }
  .settings-time-range .fl-group { width: 100px; }
}