/*
 * ===================================
 * UTKDefaultStyle.uss
 * UI Toolkit 공통 기본 스타일시트
 * ===================================
 *
 * 이 파일은 UI Toolkit 컴포넌트들의 기본 스타일을 정의합니다.
 * Unity의 기본 UI 요소들을 커스터마이징하여 일관된 디자인을 적용합니다.
 *
 * [테마 시스템]
 * 테마 전환이 필요한 경우 UTKThemeManager를 사용하세요:
 * - UTKVariables.uss : 공통 레이아웃 변수
 * - UTKThemeDark.uss / UTKThemeLight.uss : 테마별 색상 변수
 * - UTKComponents.uss : 재사용 컴포넌트 클래스
 *
 * 사용법: UTKThemeManager.Instance.RegisterRoot(rootVisualElement);
 *
 * [호환성]
 * 이 파일은 기존 코드 호환성을 위해 모든 변수를 포함합니다.
 * 새로운 컴포넌트는 UTKThemeManager를 통해 테마 스타일시트를 사용하세요.
 *
 * 주요 스타일 섹션:
 * 1. 드롭다운 팝업 스타일
 * 2. TreeView 항목 스타일
 * 3. 컬렉션 뷰 항목 스타일 (선택, 호버)
 * 4. 수직 스크롤바 스타일
 * 5. 수평 스크롤바 스타일
 */

 :root {
    /* 전체 텍스트 요소에 적용 */
    -unity-font-definition: resource('Fonts/Pretendard/Pretendard-Regular');

    /* ===================================
       Base Colors (color-base-*)
       =================================== */
    --color-base-01: #FFFFFF;
    --color-base-02: #F0F0F0;
    --color-base-03: #E7E7E7;
    --color-base-04: #E5E5E5;
    --color-base-05: #D4D4D4;
    --color-base-06: #CCCCCC;
    --color-base-07: #C6C6C6;
    --color-base-08: #BBBBBB;
    --color-base-09: #A0A0A0;
    --color-base-10: #888080;
    --color-base-11: #7F7F7F;
    --color-base-12: #606060;
    --color-base-13: #454545;
    --color-base-14: #3C3C3C;
    --color-base-15: #3A3D41;
    --color-base-16: #333333;
    --color-base-17: #303031;
    --color-base-18: #292929;
    --color-base-19: #252526;
    --color-base-20: #1E1E1E;
    --color-base-21: #000000;

    /* ===================================
       Accent Colors - Blue (color-blue-*)
       =================================== */
    --color-blue-01: #75BEFF;
    --color-blue-02: #4AA6FF;
    --color-blue-03: #3399CC;
    --color-blue-04: #3794FF;
    --color-blue-05: #0897FB;
    --color-blue-06: #087ACC;
    --color-blue-07: #0E639C;
    --color-blue-08: #264F78;
    --color-blue-09: #094771;
    --color-blue-10: #062F4A;
    --color-blue-11: #001F33;

    /* ===================================
       Accent Colors - Red (color-red-*)
       =================================== */
    --color-red-01: #F14C4C;
    --color-red-02: #C74E39;
    --color-red-03: #FF0000;
    --color-red-04: #264F78;

    /* ===================================
       Accent Colors - Green (color-green-*)
       =================================== */
    --color-green-01: #73C991;
    --color-green-02: #40C8AE;
    --color-green-03: #16825D;
    --color-green-04: #327E36;
    --color-green-05: #28632B;

    /* ===================================
       Accent Colors - Purple (color-purple-*)
       =================================== */
    --color-purple-01: #6C6CC4;
    --color-purple-02: #B180D7;
    --color-purple-03: #BC3FBC;
    --color-purple-04: #68217A;

    /* ===================================
       Accent Colors - Yellow (color-yellow-*)
       =================================== */
    --color-yellow-01: #D7BA7D;
    --color-yellow-02: #CCA700;
    --color-yellow-03: #B89500;
    --color-yellow-04: #BF8803;
    --color-yellow-05: #FFFF00;

    /* ===================================
       Accent Colors - Orange (color-orange-*)
       =================================== */
    --color-orange-01: #CC6633;
    --color-orange-02: #EE9D28;
    --color-orange-03: #EA5C00;

    /* ===================================
       Gray Colors (color-gray-*)
       =================================== */
    --color-gray-01: #E4E6F1;
    --color-gray-02: #5F6A79;
    --color-gray-03: #424750;

    /* ===================================
       Seti Colors (color-seti-*)
       =================================== */
    --color-seti-blue: #519ABA;
    --color-seti-green: #8DC149;
    --color-seti-orange: #E37933;
    --color-seti-pink: #F55385;
    --color-seti-red: #CC3E44;
    --color-seti-steel: #7494A3;
    --color-seti-yellow: #CBCB41;
    --color-seti-purple: #A074C4;
    --color-seti-ignore: #41535B;
    --color-seti-white: #D4D7D6;
    --color-seti-gray: #6D8086;

    /* ===================================
       Semantic Colors - Text (color-text-*)
       =================================== */
    --color-text-primary: var(--color-base-03);
    --color-text-secondary: var(--color-base-08);
    --color-text-disabled: var(--color-gray-02);
    --color-text-placeholder: var(--color-base-12);

    /* ===================================
       Semantic Colors - Background (color-bg-*)
       =================================== */
    --color-bg-modal: var(--color-base-18);
    --color-bg-panel: var(--color-base-20);
    --color-bg-input: var(--color-base-19);
    --color-bg-tooltip: rgba(38, 38, 38, 0.95);

    /* ===================================
       Semantic Colors - Border (color-border-*)
       =================================== */
    --color-border: var(--color-base-16);
    --color-border-focus: var(--color-blue-05);
    --color-border-error: var(--color-red-01);

    /* ===================================
       Semantic Colors - Button (color-btn-*)
       =================================== */
    --color-btn-normal: var(--color-base-17);
    --color-btn-hover: #3C3C3D;
    --color-btn-pressed: var(--color-base-19);
    --color-btn-primary: var(--color-blue-05);
    --color-btn-primary-hover: var(--color-blue-06);

    /* ===================================
       Semantic Colors - Calendar (color-calendar-*)
       =================================== */
    --color-calendar-sunday: var(--color-red-01);
    --color-calendar-saturday: var(--color-blue-02);
    --color-calendar-today: var(--color-seti-orange);
    --color-calendar-selected: var(--color-blue-06);

    /* ===================================
       Semantic Colors - State (color-state-*)
       =================================== */
    --color-state-success: var(--color-green-01);
    --color-state-warning: var(--color-orange-02);
    --color-state-error: var(--color-red-01);
    --color-state-info: var(--color-blue-05);

    /* ===================================
       Semantic Colors - Vector (color-vector-*)
       =================================== */
    --color-vector-x: rgba(230, 102, 102, 1);
    --color-vector-y: rgba(102, 230, 102, 1);
    --color-vector-z: rgba(102, 102, 230, 1);

    /* ===================================
       Semantic Colors - Scrollbar (color-scroller-*)
       =================================== */
    --color-scroller-dragger-normal: var(--color-base-16);
    --color-scroller-dragger-hover: #525252;
    --color-scroller-dragger-active: var(--color-base-16);
    --color-scroller-tracker-normal: rgba(0, 0, 0, 0);
    --color-scroller-tracker-hover: rgba(26, 26, 26, 0);

    /* ===================================
       Semantic Colors - Drag Ghost (color-drag-*)
       =================================== */
    --color-drag-ghost-bg: rgba(41, 41, 41, 1);

    /* ===================================
       Semantic Colors - Collection (color-collection-*)
       =================================== */
    --color-collection-item: rgba(37, 37, 38, 0);
    --color-collection-item-hover: var(--color-base-16);
    --color-collection-item-selected: var(--color-blue-07);
    --color-collection-item-selected-hover: #1176b9;

    /* ===================================
       Spacing (space-*)
       =================================== */
    --space-xs: 2px;
    --space-s: 4px;
    --space-m: 8px;
    --space-l: 12px;
    --space-xl: 16px;
    --space-xxl: 24px;

    /* ===================================
       Border Radius (radius-*)
       =================================== */
    --radius-s: 2px;
    --radius-m: 4px;
    --radius-l: 8px;
    --radius-full: 9999px;

    /* ===================================
       Border Width (border-width-*)
       =================================== */
    --border-width: 1px;
    --border-width-thick: 2px;

    /* ===================================
       Font Size (font-size-*)
       =================================== */
    --font-size-h1: 26px;
    --font-size-h2: 14px;
    --font-size-h3: 13px;
    --font-size-h4: 11px;
    --font-size-h5: 11px;
    --font-size-h6: 11px;
    --font-size-body1: 13px;
    --font-size-body2: 12px;
    --font-size-label1: 14px;
    --font-size-label2: 12px;
    --font-size-label3: 11px;
    --font-size-label4: 9px;
    --font-size-code: 12px;

    /* ===================================
       Component Sizes (size-*)
       =================================== */
    --size-btn-height: 24px;
    --size-btn-min-width: 80px;
    --size-input-height: 24px;
    --size-icon-btn: 20px;
    --size-nav-btn: 24px;
    --size-modal-min-width: 300px;

    /* ===================================
       Animation (anim-*)
       =================================== */
    --anim-fast: 100ms;
    --anim-normal: 200ms;
    --anim-slow: 300ms;

    /* ===================================
       Z-Index (z-*)
       =================================== */
    --z-default: 0;
    --z-dropdown: 100;
    --z-modal: 200;
    --z-tooltip: 300;

    /* TreeView 들여쓰기 폭 설정 */
    --unity-item-indent-width: 0px;
 }

/* ===================================
드롭다운 팝업 아이템 스타일
- DropdownField의 팝업 메뉴 항목 스타일
=================================== */



/* 드롭다운 개별 항목 - 패딩 제거 및 어두운 배경색 적용 */
.unity-base-dropdown__item {
    padding: 0px;
    background-color: rgb(40, 44, 52);  /* 어두운 회색 배경 */
    color: rgb(255, 255, 255);          /* 흰색 텍스트 */
}

/* 드롭다운 내부 컨테이너 - 패딩 제거 */
.unity-base-dropdown__container-inner {
    padding: 0px;
}


/* ===================================
TreeView 항목 스타일
- TreeView의 펼치기/접기 토글 버튼 스타일
=================================== */

/* TreeView 펼치기/접기 화살표 토글 - 우측 여백 추가 */
.unity-tree-view__item-toggle {
    margin-right: 0px;
}

#unity-checkmark {
    -unity-background-image-tint-color: rgb(255, 255, 255);
}

#unity-tree-view__item-toggle > VisualElement > VisualElement {
    margin-left: 0;
    margin-right: 0;
    width: 22px;
}

/* ===================================
Textfield 항목 스타일
=================================== */

.unity-base-text-field {
    border-radius: 4px;
    height: 24px;
    width: auto;
    margin-top: 0;
    margin-right: 0;
    margin-left: 0;
    -unity-font-definition: resource('Fonts/Pretendard/Pretendard-Medium');
    /* --unity-selection-color: rgba(54, 98, 160, 0.651);  선택 색상 */
    --unity-cursor-color: rgb(255, 255, 255);  /* 캐럿(커서) 색상 흰색 */
    font-size: 13px;
    color: rgb(204, 204, 204);
}

 .unity-base-text-field__input {
    padding-top: 4px;
    padding-right: 24px;
    padding-bottom: 4px;
    padding-left: 4px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-top-width: 0;
    border-right-width: 0;
    border-bottom-width: 0;
    border-left-width: 0;
    background-color: rgb(60, 60, 60);
}

.unity-base-text-field__input--placeholder {
    -unity-font-style: italic;
}


/* ===================================
컬렉션 뷰 항목 스타일
- ListView, TreeView 등 컬렉션 뷰의 항목 상태별 스타일
- Unity 기본 테마 (.unity-collection-view:focus:enabled .unity-collection-view__item--selected)를
  덮어쓰기 위해 동일하거나 더 높은 specificity 사용
=================================== */

/* 일반 항목의 기본 배경색 */
.unity-collection-view__item {
    background-color: var(--color-collection-item);
}

/* 마우스 오버 시 배경색 변경 - :hover:enabled를 더 높은 specificity로 덮어씀 */
.unity-collection-view__item:hover:enabled {
    background-color: var(--color-collection-item-hover);
}

/* 선택된 항목의 배경색 - Unity 기본 테마의 :focus:enabled 셀렉터를 덮어씀 */
.unity-collection-view:focus:enabled .unity-collection-view__item--selected {
    background-color: var(--color-collection-item-selected);
}

/* 선택된 항목에 마우스 오버 시 배경색 - :hover:enabled를 더 높은 specificity로 덮어씀 */
.unity-collection-view:focus:enabled .unity-collection-view__item--selected:hover:enabled {
    background-color: var(--color-collection-item-selected-hover);
}


/* ===================================
수직 스크롤바 스타일
- 기본 Unity 스크롤바를 슬림하고 미니멀하게 커스터마이징

[주의] 스크롤바 드래거/트래커의 hover/active 색상은 USS :hover/:active
pseudo-class가 제대로 동작하지 않습니다.
드래거는 마우스 이벤트를 직접 받지 않고 트래커가 받기 때문입니다.
hover/active 색상 변경이 필요하면 UTKTreeListWindow.cs의
SetupDraggerEvents() 메서드처럼 코드로 MouseEnterEvent/MouseLeaveEvent 등을
등록하여 구현해야 합니다.
=================================== */

/* 수직 스크롤바 컨테이너 - 폭 6px의 슬림한 스크롤바 */
.unity-scroller--vertical {
    width: 6px;
    margin-right: 4px;
    margin-bottom: 0;
    background-color: rgba(30, 30, 30, 0);  /* 스크롤바 영역 배경색 */
}

/* 스크롤바 트랙 (배경) - 반투명 어두운 배경 */
.unity-scroller--vertical .unity-base-slider__tracker {
    background-color: var(--color-scroller-tracker-normal);
    border-width: 0;
}

/* 드래그 컨테이너 - 좌우 정렬 */
.unity-scroller--vertical .unity-base-slider__drag-container {
    left: 0;
    right: 0;
}

/* 드래거 (스크롤 핸들) - 기본 상태 */
.unity-scroller--vertical .unity-base-slider__dragger {
    background-color: var(--color-scroller-dragger-normal);
    border-width: 0;
    border-radius: 3px;                          /* 둥근 모서리 */
    width: 6px;
    left: 0;
    transition-duration: 0.15s;                  /* 부드러운 전환 효과 */
    transition-property: background-color;
}

/* 상하 화살표 버튼 - 완전히 숨김 처리 */
.unity-scroller--vertical .unity-repeat-button {
    display: none;
    width: 0;
    height: 0;
    min-width: 0;
    min-height: 0;
}

/* 슬라이더 - 여백 제거 */
.unity-scroller--vertical .unity-slider {
    margin: 0;
}

/* 입력 영역 - 폭 6px로 고정 */
.unity-scroller--vertical .unity-base-field__input {
    width: 6px;
    min-width: 6px;
}


/* ===================================
수평 스크롤바 스타일
- 수직 스크롤바와 동일한 디자인을 수평으로 적용
=================================== */

/* 수평 스크롤바 컨테이너 - 높이 6px의 슬림한 스크롤바 */
.unity-scroller--horizontal {
    height: 6px;
    margin-bottom: 4px;
    margin-right: 0;
    background-color: rgba(30, 30, 30, 0);  /* 스크롤바 영역 배경색 */
}

/* 스크롤바 트랙 (배경) - 반투명 어두운 배경 */
.unity-scroller--horizontal .unity-base-slider__tracker {
    background-color: var(--color-scroller-tracker-normal);
    border-width: 0;
}

/* 드래그 컨테이너 - 상하 정렬 */
.unity-scroller--horizontal .unity-base-slider__drag-container {
    top: 0;
    bottom: 0;
}

/* 드래거 (스크롤 핸들) - 기본 상태 */
.unity-scroller--horizontal .unity-base-slider__dragger {
    background-color: var(--color-scroller-dragger-normal);
    border-width: 0;
    border-radius: 3px;                          /* 둥근 모서리 */
    height: 6px;
    top: 0;
    transition-duration: 0.15s;                  /* 부드러운 전환 효과 */
    transition-property: background-color;
}

/* 좌우 화살표 버튼 - 완전히 숨김 처리 */
.unity-scroller--horizontal .unity-repeat-button {
    display: none;
    width: 0;
    height: 0;
    min-width: 0;
    min-height: 0;
}

/* 슬라이더 - 여백 제거 */
.unity-scroller--horizontal .unity-slider {
    margin: 0;
}

/* 입력 영역 - 높이 6px로 고정 */
.unity-scroller--horizontal .unity-base-field__input {
    height: 6px;
    min-height: 6px;
}