/* static/css/ftool_theme.css */

/* 1. 레이아웃 & 타이포그래피 */
.page-header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 3rem; /* mt-5 */
    margin-bottom: 1rem; /* mb-3 */
}
.page-title {
    color: var(--bs-primary); /* 부트스트랩 기본/테마 테마색 추종 */
    font-weight: 700;
    margin: 0;
}

/* 2. 공통 카드 스타일 (테이블, 차트 감싸는 용도) */
.ftool-card {
    border: none !important;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); /* shadow-sm */
    background-color: var(--bs-body-bg); /* bg-body */
    border-radius: 0.5rem;
}

/* 3. 공통 버튼 및 배지 규격화 (인라인 스타일 대체) */
.badge-fixed {
    width: 120px;
    line-height: 1.4;
    white-space: normal; /* 텍스트 줄바꿈 허용 (text-wrap) */
    padding: 0.5rem; /* p-2 */
    font-size: 1rem; /* fs-6 */
}
.btn-fixed {
    min-width: 110px;
    white-space: nowrap;
}

/* 4. Vega 차트 공통 반응형 설정 */
.vega-embed {
    width: 100%;
    display: flex;
    justify-content: center;
    background: transparent !important;
}
.vega-embed canvas {
    max-width: 100%;
    height: auto !important;
}

/* 5. 다크모드 전용 보정 (base.html의 data-bs-theme="dark" 추종) */
[data-bs-theme="dark"] .ftool-card {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background-color: #2b3035 !important;
}

/* 1. 모든 폼 입력창의 기본 스타일 (전역 적용) */
.ftool-card form input[type="text"],
.ftool-card form input[type="number"],
.ftool-card form input[type="password"],
.ftool-card form select,
.ftool-card form textarea {
    width: 100%;
    max-width: 100%;
    padding: 0.5rem 0.75rem;
    margin-bottom: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    transition: border-color 0.15s ease-in-out;
}

/* 포커스 시 테두리 강조 (Sandstone 테마색 활용) */
.ftool-card form input:focus, 
.ftool-card form select:focus {
    border-color: var(--bs-primary);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(50, 93, 136, 0.25);
}

/* 2. 라벨(Label) 스타일 통합 */
.ftool-card form label {
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: block;
    color: var(--bs-primary);
}

/* 3. 체크박스/라디오 버튼 정렬 */
.form-check-group {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 0.5rem;
    background: rgba(0,0,0,0.03);
    border-radius: 0.5rem;
}

/* 가로 스크롤이 필요한 넓은 차트(히트맵 등) 래퍼 */
.chart-scroll-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    -webkit-overflow-scrolling: touch; /* 모바일에서 부드러운 스크롤 지원 */
    padding-bottom: 10px; /* 하단 스크롤바가 차트를 가리지 않도록 여백 추가 */
}

/* 스크롤 영역 내부의 차트는 중앙 정렬을 해제하여 왼쪽 잘림 방지 */
.chart-scroll-wrapper .vega-embed {
    justify-content: flex-start !important; 
    min-width: max-content; /* 차트의 최소 너비 보장 */
}

[data-bs-theme="dark"] .form-check-group {
    background: rgba(255,255,255,0.05);
}

/* =========================================
   [추가됨] 모달(Modal) 전용 디자인 및 폼 컨트롤 통합
========================================= */

/* 1. 모달 팝업창 기본 디자인 (base_styles.css 차용 + 부트스트랩 호환) */
.modal-content {
    background-color: var(--bs-body-bg);
    padding: 20px;
    border-radius: 8px; /* 둥근 모서리 */
    box-shadow: 0 6px 20px 0 rgba(0,0,0,0.19); /* 기존의 깊은 그림자 효과 유지 */
    border: 1px solid var(--bs-border-color);
}

/* 다크모드일 때 모달창 테두리 보정 */
[data-bs-theme="dark"] .modal-content {
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 6px 20px 0 rgba(0,0,0,0.5);
}

/* 2. 전역 폼 & 모달 내부 폼 공통 스타일 (텍스트 삐져나옴 완벽 방지) */
.ftool-card form input[type="text"],
.ftool-card form input[type="number"],
.ftool-card form select,
.modal-content form input[type="text"],
.modal-content form input[type="number"],
.modal-content form select {
    width: 100%;
    max-width: 100%;
    
    /* 💡 [핵심] 긴 글자가 모달창을 뚫고 나가지 않게 자르고 '...'으로 표시 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    
    padding: 0.5rem 0.75rem;
    margin-bottom: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    transition: border-color 0.15s ease-in-out;
}

/* 3. 체크박스/라디오 버튼 라벨 정렬 보정 (모달 포함) */
.form-check-input {
    margin-top: 0.3rem;
    margin-right: 0.5rem;
}
.form-check-label {
    word-break: keep-all; /* 체크박스 글씨가 이상하게 줄바꿈되지 않도록 방어 */
}