/* ========================================
   EyeChartPro - Layout Styles
   전체 레이아웃, 헤더, 사이드바, 메인 영역
   ======================================== */

/* ========================================
   App Container - 앱 컨테이너
   ======================================== */
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* ========================================
   Header - 헤더
   높이: 40px, 배경: 흰색
   ======================================== */
.header {
  height: var(--header-height);
  min-height: var(--header-height);
  max-height: var(--header-height);
  min-width: 960px;
  background: var(--color-bg-white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--spacing-lg);
  position: relative;
  border-bottom: 1px solid var(--color-border);
  z-index: var(--z-header);
}

/* Unused notice styles removed */

/* Header Left - 로고 + 햄버거 */
.header-left {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: var(--sidebar-width);
  padding-left: var(--spacing-xs);
  padding-right: 11px;
  box-sizing: border-box;
}

.logo {
  font-size: 14px;
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  letter-spacing: -0.5px;
}

/* 헤더 뱃지 공통 (연결모드, 평가하기) */
.conn-badge {
  margin-right: 6px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px var(--spacing-sm);
  border-radius: var(--spacing-sm);
  letter-spacing: -0.3px;
  white-space: nowrap;
}

.conn-review {
  background-color: #ede9fe;
  color: #6d28d9;
  border: 1px solid #ddd6fe;
  text-decoration: none;
  margin-left: auto;
  margin-right: 8px;
  cursor: pointer;
}

.conn-review:hover {
  background-color: #ddd6fe;
}

.conn-server {
  background-color: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.conn-local {
  background-color: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}

/* Header Center - 기능 버튼 영역 */
.header-center {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: 0;
  overflow: hidden;
}

/* Header Right - 사용자 영역 */
.header-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.user-area {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-sm);
}

.user-name {
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
}

.divider {
  color: var(--color-text-light);
}

.header-link {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.header-link:hover {
  color: var(--color-text);
  background: var(--color-bg-hover);
}

/* ========================================
   Main Wrapper - 메인 래퍼
   ======================================== */
.main-wrapper {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ========================================
   Sidebar - 사이드바 (LNB)
   배경: 흰색, 축소 시 width: 0
   ======================================== */
.sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  background: var(--color-bg-white);
  transition: all var(--transition-normal);
  overflow: hidden;
  border-right: 1px solid var(--color-border);
}

/* 축소 상태 */
.sidebar.collapsed {
  width: var(--sidebar-width-collapsed);
  min-width: var(--sidebar-width-collapsed);
  border-right: none;
}

.sidebar-nav {
  padding: 0 0 var(--spacing-sm) 0; /* 상단 패딩 제거 */
}

/* ========================================
   Content Area - 컨텐츠 영역
   ======================================== */
.content-area {
  flex: 1;
  min-width: 0; /* flex 자식 축소 허용 */
  display: flex;
  flex-direction: column;
  padding: 6px;
  overflow: hidden;
  background: #fafbfc;
  gap: 0;
}

.crm-grid-container {
  display: grid;
  /*
       User Request: Ratio-based layout with safety limits (minmax).
       Strategy:
       1. Customer (Base 220px) -> 1.08fr (10% reduced)
       2. Vision (Wide table)   -> 1.76fr (10% increased)
       3. Reservation (Table)   -> 1.9fr
       4. Memo (Base 196px)     -> 0.7fr

       minmax ensures columns don't shrink below readable widths.
    */
  grid-template-columns: minmax(220px, 1.08fr) minmax(288px, 1.76fr) minmax(
      390px,
      1.9fr
    ) minmax(196px, 0.7fr);
  grid-template-rows: 1fr;
  gap: 6px;
  flex: 1;
  min-height: 0;
}

/* LNB 축소 시 — 1~3열은 현재 비율 유지, 메모&SMS(4열)만 남는 공간 흡수 */
.sidebar.collapsed ~ .content-area .crm-grid-container {
  grid-template-columns: minmax(220px, 1.08fr) minmax(288px, 1.76fr) minmax(
      390px,
      1.9fr
    ) minmax(280px, 1fr);
}

/* 시력&수술 정보 세로 2분할 컬럼 */
.vision-column {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
}

.vision-column > div {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.vision-column .crm-panel {
  height: 100%;
}

/* 예약정보/응대관리/고객기타관리 세로 3분할 컬럼 */
.reservation-column {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
}

.reservation-column > div {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.reservation-column .crm-panel {
  height: 100%;
}

/* 고객정보/메모 컬럼 — 그리드 셀 높이 제한 (콘텐츠 오버플로 방지) */
#customer-info-container,
#memo-info-container {
  min-height: 0;
  overflow: hidden;
}

#customer-info-container .crm-panel,
#memo-info-container .crm-panel {
  height: 100%;
}

/* 태블릿 대응: 헤더 datetime 숨김으로 공간 확보 */
@media (max-width: 1280px) {
  .header-datetime {
    display: none;
  }
}

@media (max-width: 1600px) {
  .crm-grid-container {
    /* On smaller screens, allow slightly tighter minimums or adjust ratios */
    grid-template-columns: minmax(225px, 0.97fr) 1.49fr 1fr minmax(250px, 1fr);
  }
}

@media (max-width: 1400px) {
  .crm-grid-container {
    /* Collapse memo or adjust columns */
    grid-template-columns: 178px 1.65fr 1fr 240px;
  }
}

@media (max-width: 1200px) {
  .crm-grid-container {
    /* Stack to 2x2 on medium screens */
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .crm-grid-container,
  .sidebar.collapsed ~ .content-area .crm-grid-container {
    /* Stack all on mobile — collapsed sidebar 규칙(0,4,0)보다 높은 specificity 필요 */
    grid-template-columns: 1fr !important;
    grid-template-rows: auto;
    overflow-y: auto;
    overflow-x: hidden;
    min-width: 0;
    max-width: 100%;
  }

  /* 그리드 아이템(셀): min-width:auto 해제 → 콘텐츠보다 좁아질 수 있도록 */
  .crm-grid-container > * {
    min-width: 0;
    max-width: 100%;
  }

  /* 패널: 외곽 핏, 내부만 스크롤 */
  .crm-panel {
    height: auto !important;
    max-height: 70vh;
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .crm-panel .panel-content {
    overflow-x: auto !important;
    overflow-y: auto !important;
    max-height: calc(70vh - 34px);
    min-width: 0;
    -webkit-overflow-scrolling: touch;
  }

  /* 세로 분할 컬럼: 모바일에서 세로 스택 (flex → block) */
  .vision-column,
  .reservation-column {
    display: block !important;
    min-height: auto;
  }

  /* 자식 div: flex:1/overflow:hidden 해제 → 콘텐츠 높이대로 표시 */
  .vision-column > div,
  .reservation-column > div {
    flex: none;
    min-height: auto;
    overflow: visible;
    margin-bottom: 6px;
  }

  /* 패널 높이: 그리드 셀 100% → auto */
  .vision-column .crm-panel,
  .reservation-column .crm-panel {
    height: auto !important;
  }

  /* 고객정보/메모 컨테이너도 overflow 해제 */
  #customer-info-container,
  #memo-info-container {
    min-height: auto;
    overflow: visible;
  }

  #customer-info-container .crm-panel,
  #memo-info-container .crm-panel {
    height: auto !important;
  }
}

/* ========================================
   모바일 레이아웃 (≤768px)
   Safari 100vh 이슈 대응 + 헤더/사이드바 반응형
   ======================================== */
@media (max-width: 768px) {
  /* Safari 주소창 대응: 100vh → 100dvh (Dynamic Viewport Height) */
  .app-container {
    height: 100dvh;
    height: 100vh; /* dvh 미지원 폴백 */
  }

  @supports (height: 100dvh) {
    .app-container {
      height: 100dvh;
    }
  }

  /* 헤더: min-width 제거, 좌우 패딩 축소 */
  .header {
    min-width: 0;
    padding: 0 8px;
    overflow: visible;
  }

  /* 헤더 좌측: 로고만, 고정 너비 해제 */
  .header-left {
    width: auto;
    padding-right: 4px;
  }

  /* 헤더 우측: 간격 축소 */
  .header-right {
    gap: 2px;
  }

  /* 날짜/시간, 도움말, 전체화면, 언어, 구분선 숨김 */
  #headerDateTime,
  .header-datetime,
  .header-right .header-divider,
  .header-right .lang-selector,
  .header-right #helpBtn,
  .header-right #fullscreenBtn {
    display: none !important;
  }

  /* 알림, 설정: 모바일 컴팩트 아이콘 */
  .header-right .header-icon-btn {
    width: 26px;
    height: 26px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .header-right .header-icon-btn svg {
    width: 15px;
    height: 15px;
  }

  /* 사용자 영역: 이름 자르기 + 컴팩트 */
  .header-right .user-area {
    font-size: 11px;
    max-width: 90px;
  }

  .header-right .user-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 50px;
  }

  /* 부서 뱃지 숨김 (공간 확보) */
  .header-right .user-dept-badge {
    display: none !important;
  }

  /* 사이드바: 기본 숨김, 토글 시 오버레이 */
  .sidebar {
    position: fixed;
    top: var(--header-height);
    left: 0;
    bottom: 0;
    z-index: 1000;
    width: 200px;
    min-width: 200px;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: none;
  }

  .sidebar.mobile-open {
    transform: translateX(0);
    box-shadow: 4px 0 12px rgba(0, 0, 0, 0.15);
  }

  /* 사이드바 오버레이 (바깥 클릭 시 닫기용) */
  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    top: var(--header-height);
    background: rgba(0, 0, 0, 0.3);
    z-index: 999;
  }

  .sidebar-overlay.active {
    display: block;
  }

  /* collapsed 상태에서도 모바일 토글 가능 */
  .sidebar.collapsed {
    width: 200px;
    min-width: 200px;
  }

  /* 헤더 센터: 액션 버튼 숨김 (하단 툴바로 이동) */
  .header-center {
    min-width: 0;
    overflow: hidden;
  }

  .header-buttons,
  .conn-badge,
  .toolbar-btn,
  .toolbar-select,
  .toolbar-divider {
    display: none !important;
  }

  /* 프로세스 바: 모바일에서 숨김 (고객정보 패널에서 확인 가능) */
  .process-bar {
    display: none !important;
  }

  /* 콘텐츠 영역: 전체 너비 사용 + 스크롤 활성화 */
  .content-area {
    padding: 4px;
    overflow-y: auto;
    overflow-x: hidden;
    min-width: 0;
    max-width: 100%;
  }

  /* 최근고객 바: 가로 스크롤 */
  .recent-customers-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }

  .recent-customers-bar::-webkit-scrollbar {
    display: none;
  }

}

/* ========================================
   모바일 액션 메뉴 (헤더 드롭다운)
   데스크탑 숨김, 모바일(≤768px)에서만 표시
   ======================================== */
.mobile-action-menu {
  display: none;
}

@media (max-width: 768px) {
  .mobile-action-menu {
    display: block;
    position: relative;
  }

  .mobile-action-dropdown {
    min-width: 140px;
    right: 0;
    left: auto;
  }

  .mobile-action-dropdown__title {
    padding: 8px 10px 6px;
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    border-bottom: 1px solid #f3f4f6;
  }
}

/* ========================================
   태블릿 레이아웃 (≤1024px)
   ======================================== */
@media (max-width: 1024px) {
  .header {
    min-width: 0;
  }

  /* 불필요한 헤더 요소 숨김 */
  .header-right .header-divider,
  .header-right .lang-selector,
  .header-right #fullscreenBtn,
  .header-right #helpBtn {
    display: none;
  }
}

/* ========================================
   CRM Toolbar (Functionality & Tabs)
   ========================================*/
.crm-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex-shrink: 0;
  padding: 0 0 4px 0; /* 상단 0, 하단 4px */
}

/* Function Buttons in Header */
.header-buttons {
  display: flex;
  gap: 4px; /* Tight gap */
  align-items: center;
}

/* Function Buttons Row (Toolbar) - 최근조회와 정렬 */
.function-buttons-row {
  display: flex;
  gap: 4px;
  align-items: center;
}

.toolbar-btn {
  height: 22px;
  padding: 0 8px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #000;
  font-size: 11px;
  font-weight: 500;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  min-width: unset;
}

.toolbar-btn:hover {
  background: #374151;
  color: #fff;
  border-color: #374151;
}

.toolbar-btn:active {
  transform: translateY(1px);
}

.toolbar-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.toolbar-divider {
  width: 1px;
  height: 16px;
  background: #e5e7eb;
  margin: 0 6px;
}

/* 연동기능 셀렉트박스 */
.toolbar-select {
  height: 22px;
  width: auto;
  padding-right: 20px;
  font-size: 11px;
  -webkit-appearance: menulist;
  appearance: menulist;
  margin-left: 4px;
}

/* Recent Customers Bar - Label Style */
.recent-customers-bar {
  display: flex;
  align-items: center;
  background: transparent; /* 투명 배경 */
  border-bottom: none;
  padding: 0;
  height: auto; /* 라벨 높이에 맞게 자동 조정 */
  gap: 6px;
}

.customer-label-title {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  margin-right: 4px;
}

.customer-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: #fff; /* 흰색 배경 */
  border: 1px solid #d1d5db;
  border-radius: 12px; /* Rounded pill/label shape */
  font-size: 11px;
  color: #000; /* 검정 텍스트 */
  cursor: pointer;
  transition: all 0.2s;
}

.customer-label:hover {
  background: #374151; /* 반전: 어두운 배경 */
  color: #fff; /* 반전: 흰색 텍스트 */
  border-color: #374151;
}

.customer-label.active {
  background: #374151; /* 반전: 어두운 배경 */
  color: #fff; /* 반전: 흰색 텍스트 */
  border-color: #374151;
  font-weight: 600;
}

.label-close {
  font-size: 14px;
  line-height: 1;
  color: #9ca3af;
  margin-left: 2px;
}

.label-close:hover {
  color: #ef4444;
}

/* Customer Process Bar (헤더 내 고객프로세스 — 단일 뱃지) */
.process-bar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  margin-right: 6px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 8px;
  white-space: nowrap;
  letter-spacing: -0.3px;
  background-color: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.process-bar-label {
  color: #374151;
  margin-right: 2px;
}

.process-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.process-badge-title {
  color: inherit;
  opacity: 0.7;
}

.process-badge-value {
  color: inherit;
}

.tab-overflow-container {
  margin-left: auto;
  display: flex;
  align-items: center;
  /* padding-bottom: 4px; -- Removed as per new .recent-customers-bar */
}

.tab-overflow-select {
  height: 22px;
  padding: 0 4px;
  border: 1px solid #d1d5db;
  border-radius: 3px;
  font-size: 11px;
  background: #fff;
  color: #475569;
}