/* ===== APPAREL EIS Custom Styles ===== */

/* ===== 헤더 타이틀 스타일 ===== */
.app-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem; /* 70% 축소 */
  letter-spacing: 0.5px; /* 대문자용 자간 조정 */
}

/* Light 모드 타이틀 (기본) */
.app-title .light-mode-title {
  display: inline;
  color: #1a1a2e; /* 다크 네이비 */
}

/* Dark 모드 타이틀 (기본 숨김) */
.app-title .dark-mode-title {
  display: none;
  color: #f8f9fa; /* 밝은 화이트 */
}

/* Dark 모드일 때 */
[data-theme-mode="dark"] .app-title .light-mode-title {
  display: none;
}

[data-theme-mode="dark"] .app-title .dark-mode-title {
  display: inline;
}

/* 헤더 배경색에 따른 타이틀 색상 조정 */
[data-header-styles="dark"] .app-title .light-mode-title,
[data-header-styles="color"] .app-title .light-mode-title {
  color: #f8f9fa;
}

[data-header-styles="gradient"] .app-title .light-mode-title {
  color: #ffffff;
}

/* 반응형 - 작은 화면에서 타이틀 숨김 */
@media (max-width: 991px) {
  .app-title {
    display: none;
  }
}

/* ===== 사이드바 타이틀 스타일 ===== */
.main-sidebar-header .sidebar-title {
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem; /* 70% 축소 (1.5rem * 0.7) */
  letter-spacing: 0.5px; /* 대문자용 자간 조정 */
  color: var(--primary-color, #845adf); /* 기본 프라이머리 색상 */
  transition: color 0.3s ease;
}

/* 사이드바 축소시 짧은 타이틀 표시 */
.sidebar-title-full {
  display: inline;
}

.sidebar-title-short {
  display: none;
}

/* 사이드바 축소 상태 (icon-click, icon-hover, closed) */
[data-toggled="icon-click"] .sidebar-title-full,
[data-toggled="icon-hover"] .sidebar-title-full,
[data-toggled="close"] .sidebar-title-full,
[data-toggled="icon-overlay-close"] .sidebar-title-full {
  display: none;
}

[data-toggled="icon-click"] .sidebar-title-short,
[data-toggled="icon-hover"] .sidebar-title-short,
[data-toggled="close"] .sidebar-title-short,
[data-toggled="icon-overlay-close"] .sidebar-title-short {
  display: inline;
  font-size: 0.85rem; /* 70% 축소 */
}

/* 사이드바 호버시 전체 타이틀 표시 */
[data-toggled="icon-hover"] .app-sidebar:hover .sidebar-title-full {
  display: inline;
}

[data-toggled="icon-hover"] .app-sidebar:hover .sidebar-title-short {
  display: none;
}

/* Light 모드 사이드바 */
.main-sidebar-header .sidebar-title {
  color: #1a1a2e;
}

/* Dark 모드 사이드바 */
[data-theme-mode="dark"] .main-sidebar-header .sidebar-title {
  color: #f8f9fa;
}

/* 메뉴 스타일에 따른 색상 */
[data-menu-styles="dark"] .main-sidebar-header .sidebar-title {
  color: #f8f9fa;
}

[data-menu-styles="color"] .main-sidebar-header .sidebar-title {
  color: #ffffff;
}

[data-menu-styles="gradient"] .main-sidebar-header .sidebar-title {
  color: #ffffff;
}

[data-menu-styles="transparent"] .main-sidebar-header .sidebar-title {
  color: #1a1a2e;
}

[data-theme-mode="dark"][data-menu-styles="transparent"] .main-sidebar-header .sidebar-title {
  color: #f8f9fa;
}

/* ===== MudBlazor DateRangePicker/DatePicker 팝오버 스타일 ===== */
/* 캘린더가 잘리지 않고 전체가 표시되도록 overflow 및 너비 수정 */

/* MudPopover 기본 스타일 덮어쓰기 - 최상위 레벨 */
.mud-popover-paper {
  overflow: visible !important;
  max-width: none !important;
}

/* DatePicker/DateRangePicker 팝오버 Paper */
.mud-picker-inline-paper {
  min-width: 330px !important;
  max-width: none !important;
  overflow: visible !important;
  width: auto !important;
}

/* DatePicker 컨테이너 */
.mud-picker-container,
.mud-picker-inline {
  overflow: visible !important;
  width: auto !important;
}

/* 캘린더 콘텐츠 영역 - 너비 확보 */
.mud-picker-content {
  min-width: 310px !important;
  width: auto !important;
  overflow: visible !important;
}

/* 캘린더 그리드 영역 */
.mud-picker-calendar-content {
  overflow: visible !important;
  width: auto !important;
}

/* 캘린더 컨테이너 - 7열 그리드를 위한 최소 너비 */
.mud-picker-calendar-container {
  min-width: 300px !important;
  width: auto !important;
}

/* 캘린더 헤더 (년월 표시) */
.mud-picker-calendar-header {
  min-width: 280px !important;
}

/* 개별 캘린더 그리드 - 7열 확보 */
.mud-picker-calendar {
  min-width: 280px !important;
  width: auto !important;
}

/* 캘린더 월 변환 컨테이너 */
.mud-picker-calendar-transition {
  min-width: 280px !important;
  overflow: visible !important;
}

/* 캘린더 날짜 그리드 행 */
.mud-picker-calendar-row {
  width: 100% !important;
}

/* MudPicker의 Dialog Paper */
.mud-picker-dialog {
  min-width: 330px !important;
  max-width: 400px !important;
}

/* picker paper (DateRange) */
.mud-picker-paper {
  min-width: 330px !important;
  overflow: visible !important;
}

/* 년도/월 선택 팝오버 */
.mud-picker-year-container,
.mud-picker-month-container {
  overflow: visible !important;
}

/* DatePicker 버튼 영역 */
.mud-picker-datepicker-toolbar {
  min-width: 280px !important;
}