/* ==========================================================================
   dashboard_content.css — 콘텐츠 페이지 공통 컴포넌트 톤앤매너
   메인 대시보드(#dash) 외 모든 페이지의 표 헤더 / 버튼 / 탭 / 페이지네이션 /
   폼 컨트롤을 첨부 디자인 색감(웜 크림·샌드 + 레드 + 잉크)으로 재도색.
   기존 네이비(#172852~#294ca1)·블루(#0d6efd) 계열을 디자인 팔레트로 치환.
   head.html에서 my_css.css·dashboard_chrome.css 뒤에 로드 → 우선 적용.
   팔레트 변수(--red/--ink/--slate/--sand …)는 dashboard_chrome.css :root 정의 사용.
   #dash 콘텐츠는 dashboard_design.css가 add_head에서 더 뒤에 로드되어 영향 없음.
   ========================================================================== */

/* chrome.css :root 미로드 환경(팝업 등)을 위한 팔레트 폴백 — 웜 기본값으로 통일. */
:root {
    --red: #DD1402; --red-soft: #FCE7E3; --ink: #1d1d1d; --ink2: #3c3c3a;
    --slate: #33343c; --sand: #e7e3d5; --soft: #f3f2ee; --cream: #f4f2ec;
    --line: #f0efe9; --muted: #9a9a93; --faint: #bcbcb5; --card: #FFFFFF;
    --accent: #FFD761;
}

/* ==========================================================================
   표 헤더 — 성남 모빌하이 curator 톤 (전 페이지 공통)
   · 메인 헤더(table_main, HTML): 차콜→타우프 그라데이션(#5f5e5e→#6d6354) + 흰 글자
   · Tabulator·부트스트랩 표 헤더: 차콜(#2d2d2d) + 흰 글자
   · 일반 HTML 컬럼 헤더: 연회색 + 회색 글자
   ========================================================================== */

/* 1-a. 메인 헤더 (HTML my_table_*) — 차콜→타우프 그라데이션 + 흰 글자 */
.my_table_data th.table_main,
.my_table_data_no_child th.table_main,
.my_table_input th.table_main,
.inquiry-thead th {
    background: linear-gradient(170deg, #5f5e5e 0%, #6d6354 100%) !important;
    color: #ffffff !important;
    border-bottom: 2px solid #2d2d2d !important;
    font-weight: 700 !important;
}

/* 1-b. 메인 헤더 (Tabulator) — 차콜 + 흰 글자 */
.tabulator .tabulator-header.table_main,
.tabulator.table_main .tabulator-header,
.tabulator.table_main .tabulator-header .tabulator-col,
.tabulator.table_main .tabulator-header .tabulator-col .tabulator-col-content,
.tabulator.table_main .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
    background: #2d2d2d !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.08) !important;
    font-weight: 700 !important;
}

/* 2-a. 일반/컬럼 헤더 (HTML my_table_*) — 연회색 + 회색 글자 */
.my_table_data th,
.my_table_data_no_child th,
.my_table_input th,
.analysis-table th {
    background: linear-gradient(to bottom, #f7f9fc 0%, #f1f1f6 100%) !important;
    color: #4b5563 !important;
    border-bottom-color: #e8edf5 !important;
    font-weight: 600 !important;
}

/* 2-b. 부트스트랩 표 헤더 (.table thead) — 차콜 + 흰 글자 */
table.table > thead th,
.table > thead th,
.table thead th {
    background: #2d2d2d !important;
    color: #ffffff !important;
    border-bottom: 0 !important;
    font-weight: 700 !important;
}

/* 3. 일반 헤더 (Tabulator — 운행시간표 등 기본 그리드) — 차콜 + 흰 글자 */
.tabulator:not(.table_main) .tabulator-header,
.tabulator:not(.table_main) .tabulator-header .tabulator-col,
.tabulator:not(.table_main) .tabulator-header .tabulator-col .tabulator-col-content {
    background: #2d2d2d !important;
    border-color: rgba(255,255,255,.08) !important;
    color: #ffffff !important;
}
.tabulator:not(.table_main) .tabulator-header .tabulator-col .tabulator-col-title {
    color: #ffffff !important;
    font-weight: 700;
}

/* 4. 차콜 Tabulator 헤더 — 정렬 화살표 흰색 (연회색 HTML 컬럼 헤더는 기본 어두운 화살표 유지) */
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-arrow {
    border-top-color: #ffffff !important;
    border-bottom-color: #ffffff !important;
}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="ascending"] .tabulator-col-content .tabulator-arrow {
    border-top: none !important;
    border-bottom-color: #ffffff !important;
}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="descending"] .tabulator-col-content .tabulator-arrow {
    border-bottom: none !important;
    border-top-color: #ffffff !important;
}

/* 행 hover / 선택 — 차가운 블루 → 웜 톤 */
.my_table_data.tr_hover tbody tr:hover,
.my_table_data_no_child.tr_hover tbody tr:hover {
    background-color: var(--soft) !important;
}
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-selected {
    background-color: var(--red-soft) !important;
}
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.tabulator-editing {
    border-color: var(--red) !important;
}

/* ==========================================================================
   3. 탭(nav-tabs) — 활성 네이비 → 잉크, hover 레드
   ========================================================================== */
.nav-tabs .nav-link {
    background-color: var(--soft);
    color: var(--muted);
    border: none;
    border-radius: 12px 12px 0 0;
}
.nav-tabs .nav-link:hover {
    color: var(--red);
    background-color: var(--sand);
}
.nav-tabs .nav-link.active {
    background-color: var(--ink) !important;
    color: #fff !important;
}

/* 미니탭(nav-mini) — 탭 안의 서브탭(조회/등록 등). 알약형 세그먼트로 바깥 폴더형 탭과 구별 */
.nav-tabs.nav-mini {
    border-bottom: none;
    display: inline-flex;
    gap: 4px !important;
    padding: 4px;
    background-color: var(--soft);
    border-radius: 999px;
}
.nav-tabs.nav-mini .nav-link {
    background-color: transparent;
    color: var(--muted);
    border: none;
    border-radius: 999px;
    padding: 4px 18px;
    font-size: 0.875rem;
    line-height: 1.5;
}
.nav-tabs.nav-mini .nav-link:hover {
    color: var(--red);
    background-color: transparent;
}
.nav-tabs.nav-mini .nav-link.active {
    background-color: #fff !important;
    color: var(--red) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* 콘텐츠 상단 간격 압축 — 탭/토글/조회 라인을 위로 붙여 테이블(메인)을 끌어올림.
   임금표에서 맞춘 리듬을 전 페이지에 통일 적용 */
.content_li > .nav-tabs {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}
/* 탭 안의 2차 탭/토글(미니탭 등): 바깥 탭 여백과 겹쳐 생기던 윗 간격 제거 */
.content_li .nav-tabs.nav-mini,
.content_li [id$="_load"] > .nav-tabs {
    margin-top: 0 !important;
}

/* ==========================================================================
   4. 버튼 — 부트스트랩 primary 및 커스텀 버튼 색감
   ========================================================================== */
/* ── 기능별 버튼 색 — ERP용 무드 있는 중간 톤(muted/dusty 배경 + 같은 계열 진한 글자) ──
   조회=더스티레드 / 입력·저장·업로드=더스티인디고 / 삭제=슬레이트그레이 / 출력=머스터드 / 엑셀=세이지그린 */

/* 버튼 글씨 볼드 (전역) */
.btn { font-weight: 700; }

/* 입력·저장·업로드 (post_btn = .btn-primary) → 더스티 인디고 */
.btn-primary {
    --bs-btn-color: #2E3A86;
    --bs-btn-bg: #C9CFEA;
    --bs-btn-border-color: #B4BCE0;
    --bs-btn-hover-color: #28326F;
    --bs-btn-hover-bg: #BCC4E3;
    --bs-btn-hover-border-color: #A6AFD8;
    --bs-btn-active-color: #28326F;
    --bs-btn-active-bg: #B2BBDE;
    --bs-btn-active-border-color: #A6AFD8;
    --bs-btn-disabled-color: #8B93C2;
    --bs-btn-disabled-bg: #DEE1F1;
    --bs-btn-disabled-border-color: #CDD2EA;
    --bs-btn-focus-shadow-rgb: 46, 58, 134;
}
/* 조회 (get_btn = .btn-outline-primary) → 더스티 레드/로즈 */
.btn-outline-primary {
    --bs-btn-color: #9E3322;
    --bs-btn-bg: #EAC6BE;
    --bs-btn-border-color: #DFB1A7;
    --bs-btn-hover-color: #8A2C1C;
    --bs-btn-hover-bg: #E3B8AE;
    --bs-btn-hover-border-color: #D6A498;
    --bs-btn-active-color: #8A2C1C;
    --bs-btn-active-bg: #DEAFA4;
    --bs-btn-active-border-color: #D6A498;
    --bs-btn-focus-shadow-rgb: 158, 51, 34;
}
/* 삭제 (delete_btn = .btn-danger, get_delete_btn = .btn-outline-danger) → 슬레이트 그레이 */
.btn-danger,
.btn-outline-danger {
    --bs-btn-color: #434952;
    --bs-btn-bg: #D3D7DD;
    --bs-btn-border-color: #C0C5CD;
    --bs-btn-hover-color: #353A42;
    --bs-btn-hover-bg: #C7CCD3;
    --bs-btn-hover-border-color: #B3B9C2;
    --bs-btn-active-color: #353A42;
    --bs-btn-active-bg: #BFC5CD;
    --bs-btn-active-border-color: #B3B9C2;
    --bs-btn-disabled-color: #9DA2AA;
    --bs-btn-disabled-bg: #E5E7EB;
    --bs-btn-disabled-border-color: #D7DADF;
    --bs-btn-focus-shadow-rgb: 67, 73, 82;
}
/* 출력 (print_btn = .btn-warning) → 머스터드/앰버 */
.btn-warning {
    --bs-btn-color: #7E600A;
    --bs-btn-bg: #EFDCA3;
    --bs-btn-border-color: #E5CE8C;
    --bs-btn-hover-color: #6B520A;
    --bs-btn-hover-bg: #E9D293;
    --bs-btn-hover-border-color: #DBC279;
    --bs-btn-active-color: #6B520A;
    --bs-btn-active-bg: #E4CC86;
    --bs-btn-active-border-color: #DBC279;
    --bs-btn-focus-shadow-rgb: 126, 96, 10;
}
/* 엑셀 (xlsx_btn = .btn-success) → 세이지 그린 */
.btn-success,
.btn-outline-success {
    --bs-btn-color: #15623E;
    --bs-btn-bg: #BFDCCB;
    --bs-btn-border-color: #A9D0B9;
    --bs-btn-hover-color: #114F32;
    --bs-btn-hover-bg: #B2D4C0;
    --bs-btn-hover-border-color: #98C6AC;
    --bs-btn-active-color: #114F32;
    --bs-btn-active-bg: #A9CEB8;
    --bs-btn-active-border-color: #98C6AC;
    --bs-btn-focus-shadow-rgb: 21, 98, 62;
}
/* 보조(secondary)·다크 아웃라인 → 중립 슬레이트 그레이 */
.btn-outline-secondary,
.btn-outline-dark {
    --bs-btn-color: #434952;
    --bs-btn-bg: #D6DADF;
    --bs-btn-border-color: #C4C9D0;
    --bs-btn-hover-color: #353A42;
    --bs-btn-hover-bg: #CACFD5;
    --bs-btn-hover-border-color: #B7BDC5;
    --bs-btn-active-color: #353A42;
    --bs-btn-active-bg: #C2C7CF;
    --bs-btn-active-border-color: #B7BDC5;
}
/* 일부 버튼은 class 에 text-white 가 박혀 있어(흰 글자) muted 배경에서 안 보임 → 같은 계열 진한 글자로 덮어씀 */
.btn-warning.text-white { color: #7E600A !important; }
.btn-success.text-white { color: #15623E !important; }

/* ==========================================================================
   출력·엑셀 = 원형 아이콘 버튼
   custom_settings.py 의 print_btn / xlsx_btn / get_print_btn 클래스에서 사용.
   라벨 텍스트(출력/엑셀다운로드)는 font-size:0 로 숨기고 가운데 아이콘만 표시.
   배경/호버 색은 기존 .btn-warning(머스터드)·.btn-success(세이지) 테마 그대로 사용.
   ========================================================================== */
.ss-iconbtn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    vertical-align: middle;
    font-size: 0 !important;        /* 라벨 텍스트 숨김 */
    line-height: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
}
.ss-iconbtn > * { display: none; }  /* 내부에 <i>/<span> 가 있어도 숨김 */

/* 출력(printer) — 짙은 머스터드 스트로크(#7E600A) */
.ss-iconbtn--print {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237E600A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 6 2 18 2 18 9'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Crect x='6' y='14' width='12' height='8'/%3E%3C/svg%3E");
}
/* 엑셀(table/grid) — 짙은 세이지 스트로크(#15623E) */
.ss-iconbtn--xlsx {
    background-size: 17px 17px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315623E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cline x1='3' y1='9' x2='21' y2='9'/%3E%3Cline x1='3' y1='15' x2='21' y2='15'/%3E%3Cline x1='12' y1='3' x2='12' y2='21'/%3E%3C/svg%3E");
}

/* 커스텀 버튼 클래스 — 무드 중간 톤으로 통일 */
.btn_print { background-color: #EFDCA3; color: #7E600A; }
.btn_print:hover { background-color: #E9D293; color: #6B520A; }
.btn_blue { background-color: #C9CFEA; color: #2E3A86; }
.btn_blue:hover { background-color: #BCC4E3; color: #28326F; }
.btn_red { background-color: #EAC6BE; color: #9E3322; }
.btn_red:hover { background-color: #E3B8AE; color: #8A2C1C; }
.btn_black { background-color: #D6DADF; color: #434952; }
.btn_black:hover { background-color: #CACFD5; color: #353A42; }

/* FMS 등 엑셀 다운로드 버튼은 관례상 초록 유지 */

/* ==========================================================================
   5. 페이지네이션 — 활성 블루 → 레드, 글자 잉크
   ========================================================================== */
.pagination {
    --bs-pagination-color: var(--ink2);
    --bs-pagination-bg: var(--card);
    --bs-pagination-border-color: var(--line);
    --bs-pagination-hover-color: var(--red);
    --bs-pagination-hover-bg: var(--soft);
    --bs-pagination-hover-border-color: var(--line);
    --bs-pagination-focus-color: var(--red);
    --bs-pagination-focus-bg: var(--soft);
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(221, 20, 2, .2);
    --bs-pagination-active-bg: #DD1402;
    --bs-pagination-active-border-color: #DD1402;
}

/* ==========================================================================
   6. 폼 컨트롤 포커스 / 체크박스·라디오 — 블루 → 레드
   ========================================================================== */
.form-control:focus,
.form-select:focus {
    border-color: rgba(221, 20, 2, .45);
    box-shadow: 0 0 0 .2rem rgba(221, 20, 2, .15);
}
.form-check-input:checked {
    background-color: #DD1402;
    border-color: #DD1402;
}
.form-check-input:focus {
    border-color: rgba(221, 20, 2, .45);
    box-shadow: 0 0 0 .2rem rgba(221, 20, 2, .15);
}

/* Select2 — 선택 항목/하이라이트 톤 */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--red) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--soft) !important;
    border-color: var(--line) !important;
    color: var(--ink2) !important;
}

/* ==========================================================================
   7. 부트스트랩 카드(콘텐츠 페이지) — 둥근 모서리·라인 톤
   ========================================================================== */
.panel .card {
    border-color: var(--line);
    border-radius: 16px;
}
.panel .card .card-title { color: var(--ink); }

/* ==========================================================================
   8. 입력 폼 표 — "박스 속 박스" 제거 (셀 자체가 입력칸처럼)
   th(라벨)+td(입력칸) 구조에서, 셀(td) 안의 입력창(select/input)이 자체 테두리·
   배경을 가져 셀 테두리와 이중으로 보이는 문제. 셀에 '직접' 들어간 컨트롤의
   테두리·배경·그림자·라운드를 없애고 셀을 가득 채워, 셀 자체가 입력칸처럼 보이게 한다.
   적용 대상: .my_table_input / .my_table_data / .my_table_data_no_child (모두 td height:35px).
   '>' 직계 선택자라 .input-group(날짜범위 등) 안의 컨트롤은 건드리지 않는다.
   체크박스·라디오·파일·버튼류는 아래 별도 규칙에서 원래 모양으로 복원한다.
   ========================================================================== */
.my_table_input td > .form-control,
.my_table_input td > .form-select,
.my_table_input td > select,
.my_table_input td > input,
.my_table_input td > textarea,
.my_table_data td > .form-control,
.my_table_data td > .form-select,
.my_table_data td > select,
.my_table_data td > input,
.my_table_data td > textarea,
.my_table_data_no_child td > .form-control,
.my_table_data_no_child td > .form-select,
.my_table_data_no_child td > select,
.my_table_data_no_child td > input,
.my_table_data_no_child td > textarea {
    border: none !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    display: block !important;
    max-width: none !important;
    min-width: 0 !important;            /* col_min(min-width:130px) 무력화 */
    height: 35px !important;            /* 셀(td height:35px, 세로 패딩 0)에 정확히 일치 */
    min-height: 0 !important;
    padding: 0 8px !important;
    vertical-align: middle;
}
/* 좌우 패딩 상쇄로 셀 가득 — 클래스별 td 좌우 패딩이 다름(input:3px, data:15px) */
.my_table_input td > .form-control,
.my_table_input td > .form-select,
.my_table_input td > select,
.my_table_input td > input,
.my_table_input td > textarea {
    width: calc(100% + 6px) !important;
    margin: 0 -3px !important;
}
.my_table_data td > .form-control,
.my_table_data td > .form-select,
.my_table_data td > select,
.my_table_data td > input,
.my_table_data td > textarea,
.my_table_data_no_child td > .form-control,
.my_table_data_no_child td > .form-select,
.my_table_data_no_child td > select,
.my_table_data_no_child td > input,
.my_table_data_no_child td > textarea {
    width: calc(100% + 30px) !important;
    margin: 0 -15px !important;
}
/* textarea 는 여러 줄이라 높이 자동 */
.my_table_input td > textarea,
.my_table_data td > textarea,
.my_table_data_no_child td > textarea {
    height: auto !important;
    min-height: 35px !important;
    padding: 6px 8px !important;
}
/* 포커스 시 셀 전체 살짝 강조 */
.my_table_input td > .form-control:focus,
.my_table_input td > .form-select:focus,
.my_table_input td > select:focus,
.my_table_input td > input:focus,
.my_table_input td > textarea:focus,
.my_table_data td > .form-control:focus,
.my_table_data td > .form-select:focus,
.my_table_data td > select:focus,
.my_table_data td > input:focus,
.my_table_data td > textarea:focus,
.my_table_data_no_child td > .form-control:focus,
.my_table_data_no_child td > .form-select:focus,
.my_table_data_no_child td > select:focus,
.my_table_data_no_child td > input:focus,
.my_table_data_no_child td > textarea:focus {
    border: none !important;
    box-shadow: none !important;
    background-color: rgba(41, 76, 161, .06) !important;
}
/* 체크박스·라디오·파일·버튼류는 늘이지 말고 원래 모양 유지 */
.my_table_input td > input[type=checkbox], .my_table_input td > input[type=radio],
.my_table_input td > input[type=file], .my_table_input td > input[type=button],
.my_table_input td > input[type=submit], .my_table_input td > input[type=image],
.my_table_input td > input[type=color], .my_table_input td > input[type=range],
.my_table_data td > input[type=checkbox], .my_table_data td > input[type=radio],
.my_table_data td > input[type=file], .my_table_data td > input[type=button],
.my_table_data td > input[type=submit], .my_table_data td > input[type=image],
.my_table_data td > input[type=color], .my_table_data td > input[type=range],
.my_table_data_no_child td > input[type=checkbox], .my_table_data_no_child td > input[type=radio],
.my_table_data_no_child td > input[type=file], .my_table_data_no_child td > input[type=button],
.my_table_data_no_child td > input[type=submit], .my_table_data_no_child td > input[type=image],
.my_table_data_no_child td > input[type=color], .my_table_data_no_child td > input[type=range] {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: revert !important;
    padding: revert !important;
    display: inline-block !important;
    vertical-align: middle;
}

/* select2 위젯도 셀 자체가 입력칸처럼 (박스 속 박스 제거).
   select2 는 원본 <select> 대신 <span class="select2-container"> 를 렌더하므로
   위의 'td > select' 규칙에 안 잡힌다. 민원/법규 등 select2(운수사원·노선·차량)를
   쓰는 입력표에서 셀 안에 테두리 박스가 남던 문제를 인사정보와 동일하게 정리한다. */
.my_table_input td > select.select2-hidden-accessible,
.my_table_data td > select.select2-hidden-accessible,
.my_table_data_no_child td > select.select2-hidden-accessible {
    display: none !important;   /* 위 'td > select' 규칙이 숨김 select 를 노출시키는 것 방지 */
}
.my_table_input td > .select2-container,
.my_table_data td > .select2-container,
.my_table_data_no_child td > .select2-container {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}
.my_table_input td > .select2-container .select2-selection--single,
.my_table_data td > .select2-container .select2-selection--single,
.my_table_data_no_child td > .select2-container .select2-selection--single {
    border: none !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    height: 35px !important;
    display: flex !important;
    align-items: center !important;
}
/* 포커스(열림) 시 셀 전체 살짝 강조 — 일반 input 규칙과 동일 톤 */
.my_table_input td > .select2-container--open .select2-selection--single,
.my_table_data td > .select2-container--open .select2-selection--single,
.my_table_data_no_child td > .select2-container--open .select2-selection--single {
    background-color: rgba(41, 76, 161, .06) !important;
}