/* ==============================
   MRB GIS Layout - 레이아웃 전용 CSS
   퍼블리싱 CSS(sys_mrb.css, sys_uis.css, core_component.css)와 함께 사용
   주의: 퍼블리싱 스타일을 최대한 존중하고 레이아웃 위치만 조정
   ============================== */

/* ==============================
   Header Recipe Name
   레시피 로드 시 헤더에 표시되는 레시피 이름
   ============================== */
#headerRecipeName {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    max-width: 400px;
    cursor: pointer;
}

#headerRecipeName .recipe-label {
    color: var(--krds-light-color-text-basic-inverse);
    font-size: 1.4rem;
    font-weight: 400;
    white-space: nowrap;
    opacity: 0.8;
}

#headerRecipeName .recipe-name {
    color: var(--krds-light-color-text-basic-inverse);
    font-size: 1.4rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==============================
   Toolbar - Viewer Mode Icon
   ============================== */
.map_tools_btn.ico-viewer {
    background: url("/static/mrb_gis/images/common/toolbar/tool-full.svg") no-repeat center;
}

/* ==============================
   Map Content Wrapper
   main.jsp의 contentBody wrapper - flex 레이아웃 적용
   ============================== */
.map_content_wrapper {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
}

.map_sidebar .tab {
    margin-top: unset !important;
}


/* 사이드바 내부 탭 영역 - 항상 보이게 */
.map_sidebar.active .map_sidebar_tabs {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ==============================
   Map Canvas (지도 영역)
   ============================== */
#mapContainer {
    position: fixed;
    top: 48px;
    bottom: 32px;
    left: 0;
    right: 0;
}

#map {
    width: 100%;
    height: 100%;
    background: none !important;
}

/* ==============================
   Global Upload Loading Overlay
   ============================== */
.global-upload-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    backdrop-filter: blur(4px);
}

.global-upload-loading-content {
    background: white;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    text-align: center;
    min-width: 300px;
    max-width: 500px;
}

.global-upload-loading-spinner {
    width: 60px;
    height: 60px;
    border: 6px solid #f3f4f6;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: global-upload-spin 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes global-upload-spin {
    to {
        transform: rotate(360deg);
    }
}

.global-upload-loading-text {
    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
}

.global-upload-loading-subtext {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 24px;
}

.global-upload-cancel-btn {
    background-color: #ef4444;
    color: white;
    padding: 10px 24px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.global-upload-cancel-btn:hover {
    background-color: #dc2626;
}

.global-upload-cancel-btn:active {
    background-color: #b91c1c;
}

/* ==============================
   Pagination 페이지 정보 스타일
   ============================== */
.pagination-wrapper .page-info {
    display: block;
    text-align: center;
    font-size: 12px;
    color: #6b7280;
    margin-top: 8px;
}

/* ==============================
   Layer Group 커서 스타일 오버라이드
   ============================== */
.layer-group {
    cursor: pointer;
}

.layer-group:not(:last-child) {
    margin-bottom: unset !important;
}

/* ==============================
   Active Layers - Text Truncation
   ============================== */
#activeLayersContent .layer-header-label {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    /* Crucial for flex item truncation */
    overflow: hidden;
}

#activeLayersContent .ellipsis-1 {
    display: block;
    /* Required for text-overflow to work */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    width: 100%;
}

/* ==============================
   Style Panel - 스타일 편집 패널 전용 스타일
   ============================== */

/* 스타일 패널 에러 메시지 */
.map_rightbar #styleNameDuplicateMessage,
.map_rightbar #minZoomInputError,
.map_rightbar #maxZoomInputError,
.map_rightbar #graduatedMinZoomInputError,
.map_rightbar #graduatedMaxZoomInputError,
.map_rightbar #categorizedMinZoomInputError,
.map_rightbar #categorizedMaxZoomInputError,
.map_rightbar .form-error {
    color: var(--krds-color-light-secondary) !important;
    font-size: 1.1rem;
    margin-top: 0.4rem;
}

/* 스타일 패널 탭 컨텐츠 표시/숨김 */
.map_rightbar .tab-conts {
    display: none;
}

.map_rightbar .tab-conts.active {
    display: block;
}

/* ==============================
   색상 팔레트 미리보기 - 부드러운 그라데이션
   ============================== */
.palette-preview-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.palette-preview {
    display: flex;
    flex-shrink: 0;
    width: 100px;
    height: 20px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--krds-color-border-normal, #464c53);
}

/* 부드러운 그라데이션 바 */
.palette-preview .gradient-bar {
    width: 100%;
    height: 100%;
}

/* 기존 color-box 호환성 유지 (숨김 처리) */
.palette-preview .color-box {
    display: none;
}

/* 색상 프리뷰 박스 */
.color-preview {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid var(--krds-color-border-normal);
}

/* 아이콘 이미지 */
.icon-img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* 아이콘 그리드 */
.icon-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
}

.icon-grid .icon-btn {
    aspect-ratio: 1;
    padding: 4px;
    min-width: 32px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-grid .icon-btn i {
    font-size: 14px;
    color: var(--krds-light-color-text-basic-inverse, #fff);
}

.icon-grid .icon-btn:hover {
    background-color: var(--krds-light-color-element-primary, #3b82f6);
    border-color: var(--krds-light-color-element-primary, #3b82f6);
}

.icon-grid .icon-btn:hover i {
    color: #fff;
}

/* 선택된 아이콘 버튼 */
.icon-grid .icon-btn.active {
    outline: 2px solid var(--krds-light-color-element-primary, #3b82f6);
    outline-offset: -2px;
    background-color: var(--krds-light-color-element-primary, #3b82f6);
}

.icon-grid .icon-btn.active i {
    color: #fff;
}

/* 아이콘 이미지 (업로드된 아이콘용) */
.icon-grid .icon-btn .icon-img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* 아이콘 미리보기 박스 */
.icon-preview-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background-color: var(--krds-high-contrast-color-surface-gray-subtle, #1e2124);
    border: 1px solid var(--krds-high-contrast-color-surface-disabled, #464c53);
    border-radius: 4px;
}

.icon-preview-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* ==============================
   AG-Grid 다크 테마 공통 스타일
   KRDS .table.dark 스타일 기반
   사용법: AG Grid 컨테이너에 .ag-grid-dark 클래스 추가
   ============================== */

/* AG Grid 컨테이너 - KRDS high-contrast 변수 사용 */
.ag-grid-dark {
    --ag-background-color: var(--krds-high-contrast-color-divider-gray-light, #33363d);
    --ag-header-background-color: var(--krds-high-contrast-color-surface-white, #000000);
    --ag-odd-row-background-color: var(--krds-high-contrast-color-divider-gray-light, #33363d);
    --ag-row-hover-color: var(--krds-high-contrast-color-surface-gray-subtle, #1e2124);
    --ag-selected-row-background-color: var(--krds-high-contrast-color-surface-gray-subtle, #1e2124);
    --ag-foreground-color: var(--krds-light-color-surface-gray-subtle, #f3f4f6);
    --ag-header-foreground-color: var(--krds-light-color-surface-gray-subtle, #f3f4f6);
    --ag-border-color: var(--krds-high-contrast-color-surface-disabled, #464c53);
    --ag-row-border-color: var(--krds-high-contrast-color-surface-disabled, #464c53);
}

/* 헤더 스타일 - .table.dark thead th 기반 */
.ag-grid-dark .ag-header {
    background-color: var(--krds-high-contrast-color-surface-white, #000000);
    border-bottom: 0.1rem solid var(--krds-high-contrast-color-surface-disabled, #464c53);
}

.ag-grid-dark .ag-header-cell {
    color: var(--krds-light-color-surface-gray-subtle, #f3f4f6);
    font-size: var(--krds-pc-font-size-body-xsmall, 1.2rem);
    font-weight: bold;
    padding: 0.42rem var(--krds-gap-5, 1rem);
    text-align: center;
    white-space: nowrap;
}

.ag-grid-dark .ag-header-cell:not(:last-child) {
    border-right: 0.1rem solid var(--krds-high-contrast-color-surface-disabled, #464c53);
}

/* 행 스타일 - .table.dark tbody td 기반 */
.ag-grid-dark .ag-row {
    background-color: var(--krds-high-contrast-color-divider-gray-light, #33363d);
    border-top: 0.1rem solid var(--krds-high-contrast-color-surface-disabled, #464c53);
}

.ag-grid-dark .ag-row:hover {
    background-color: var(--krds-high-contrast-color-surface-gray-subtle, #1e2124);
}

.ag-grid-dark .ag-row-selected {
    background-color: var(--krds-high-contrast-color-surface-gray-subtle, #1e2124);
}

/* 셀 스타일 - .table.dark tbody td 기반 */
.ag-grid-dark .ag-cell {
    color: var(--krds-light-color-surface-gray-subtle, #f3f4f6);
    font-size: var(--krds-pc-font-size-label-xsmall, 1.1rem);
    font-weight: 400;
    padding: var(--krds-gap-2, 0.4rem) var(--krds-gap-5, 1rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ag-grid-dark .ag-cell:not(:last-child) {
    border-right: 0.1rem solid var(--krds-high-contrast-color-surface-disabled, #464c53);
}

/* 셀 포커스 제거 */
.ag-grid-dark .ag-cell:focus,
.ag-grid-dark .ag-cell-focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* 고정 행 (pinned top) 스타일 - 하이라이트 */
.ag-grid-dark .ag-floating-top {
    background-color: var(--krds-color-light-primary-50, #3b82f6);
    border-bottom: 2px solid var(--krds-color-light-primary-50, #3b82f6);
}

.ag-grid-dark .ag-floating-top .ag-row {
    background-color: var(--krds-color-light-primary-50, #3b82f6);
}

.ag-grid-dark .ag-floating-top .ag-cell {
    color: #ffffff !important;
    font-weight: 500;
}

/* 스크롤바 스타일 */
.ag-grid-dark ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.ag-grid-dark ::-webkit-scrollbar-track {
    background: var(--krds-high-contrast-color-divider-gray-light, #33363d);
}

.ag-grid-dark ::-webkit-scrollbar-thumb {
    background: var(--krds-high-contrast-color-surface-disabled, #464c53);
    border-radius: 4px;
}

.ag-grid-dark ::-webkit-scrollbar-thumb:hover {
    background: var(--krds-color-high-contrast-gray-50, #6d7882);
}

/* ==============================
   LayerEmptyState - 공통 빈 상태 컴포넌트
   ============================== */
.layer-empty-text {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.layer-empty-text.show {
    display: flex;
}

.layer-empty-text.hidden {
    display: none;
}

.layer-empty-text .empty-icon .svg-icon {
    width: 2.4rem;
    height: 2.4rem;
    opacity: 0.4;
}

.layer-empty-text .empty-text {
    color: var(--krds-color-text-disabled, #9ca3af);
    font-size: var(--krds-pc-font-size-body-small, 1.3rem);
}

/* ==============================
   LayerGroupWrapper - 공통 레이어 목록 컨테이너
   ============================== */
.layer-group-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.layer-group-wrapper .layer-group {
    width: 100%;
    flex-shrink: 0;
}

/* ==============================
   Layer Button Active State
   패널이 열려있을 때 아이콘 흰색 표시
   ============================== */
.krds-btn.layer-button-active .svg-icon.layer-add {
    background: url("/static/mrb_gis/images/MRB/icons/ico-layer-add-white.svg") no-repeat center;
}

.krds-btn.layer-button-active .svg-icon.layer-edit {
    background: url("/static/mrb_gis/images/MRB/icons/ico-layer-edit-white.svg") no-repeat center;
}

.krds-btn.layer-button-active .svg-icon.layer-magic {
    background: url("/static/mrb_gis/images/MRB/icons/ico-magic-stick-white.svg") no-repeat center;
}

.krds-btn.layer-button-active .svg-icon.layer-filter {
    background: url("/static/mrb_gis/images/MRB/icons/ico-filter-white.svg") no-repeat center;
}

.krds-btn.layer-button-active .svg-icon.layer-tag {
    background: url("/static/mrb_gis/images/MRB/icons/ico-tag-white.svg") no-repeat center;
}

.svg-icon.ico-refresh {
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#refreshMyLayerBtn {
    font-size: 1.1rem;
}

.footer {
    z-index: 2 !important;
}

/* ==============================
   Left Expand Panel - 하단 버튼 고정 레이아웃
   ============================== */

/* 패널 콘텐츠 영역 flex 레이아웃 */
#leftExpandContent {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    max-height: 93%;
}

/* 스타일 목록 패널 - 스크롤 영역 */
#leftExpandContent>.box-group.scroll {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* 하단 고정 버튼 영역 */
#styleListFooter,
#stylePanelFooter {
    flex-shrink: 0;
}

/* ==============================
   범례(Legend) 스타일
   layer-group 퍼블리싱 구조 적용
   ============================== */
#legendContent .layer-group {
    flex-shrink: 0;
}

#legendContent .layer-group.has-header {
    padding: 8px 12px;
    border-radius: var(--krds-radius-medium1);
}

#legendContent .layer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#legendContent .layer-header.has-layer-icon.has-ellipsis {
    gap: var(--krds-gap-3);
    background-color: unset;
}

#legendContent .layer-header-label {
    display: flex;
    align-items: center;
    font-size: 1.4rem;
    color: var(--krds-color-light-gray-0);
    font-weight: 700;
    column-gap: 0.8rem;
}

#legendContent .layer-button-group .legend-expand-btn {
    transform: rotate(0deg);
    transition: transform 0.2s ease;
}

#legendContent .layer-button-group .legend-expand-btn.is-active {
    transform: rotate(180deg);
}

#legendContent .layer-group.is-expanded .layer-depth2,
#legendContent .layer-group.is-open .layer-depth2 {
    display: block;
    overflow-y: auto;
}

#legendContent .layer-depth2-item {
    display: flex;
    flex-direction: column;
    row-gap: 0.6rem;
}

#legendContent .legend-symbol-area {
    background: rgba(255, 255, 255, 0.9);
    padding: 8px;
    border-radius: 4px;
}

#legendContent .legend-symbol-area .legend-image {
    max-width: 100%;
    height: auto;
}

/* 범례 헤더 버튼 (최소화/펼치기) */
#legendFloatingWindow .legend-header-btn {
    transform: rotate(0deg);
    transition: transform 0.2s ease;
}

#legendFloatingWindow .legend-header-btn.is-active {
    transform: rotate(180deg);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    border: 0;
    clip: rect(0 0 0 0);
}

/* Dashboard visibility toggle hidden state */
.dashboard-visibility-toggle[data-visible="false"] .layer-eye {
    background: url("/static/mrb_gis/images/MRB/icons/ico-eye-closed.svg") no-repeat center !important;
    transition: unset !important;
}

/* ==============================
   Modal Custom Override
   ============================== */
.krds-modal.custom .modal-dialog .modal-content {
    background-color: var(--krds-light-color-background-dim2);
}

/* ==============================
   Empty Message - 공통 빈 상태 메시지
   ============================== */
.empty-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px;
    color: var(--krds-light-color-text-subtle, #6b7280);
    height: 100%;
}

.empty-message i {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.empty-message p {
    margin: 0;
}


#right-map .ol-scale-line {
    pointer-events: none;
}

/* ==============================
   Split Mode Scale Line Override
   분할 모드에서 스케일 라인 위치 조정
   ============================== */
/* 왼쪽 맵(Map1) - 왼쪽 하단 */
.map_canvas.split #left-map .ol-scale-line {
    right: auto !important;
    left: 8px !important;
    bottom: 8px !important;
}

/* 오른쪽 맵(Map2) - 오른쪽 하단 */
.map_canvas.split #right-map .ol-scale-line {
    left: auto !important;
    right: 8px !important;
    bottom: 8px !important;
}

.map_canvas.split #left-map .ol-attribution {
    right: auto !important;
    left: 8px !important;
    bottom: 40px !important;
}

.map_canvas.split #right-map .ol-attribution {
    bottom: 40px !important;
    right: 8px !important;
    left: auto !important;
}

.map_tools_list li.map_tools_item.is-active .tool_layer {
    z-index: 10000;
}