@charset "UTF-8";
/*
    메뉴 관리 (bit/system/menu)
    BMS / ADM 탭 + 트리 한 장. 표 규격은 bit.css 의 `#content .form-tbl` 을 쓴다.
*/

/* 페이지 전체를 뷰포트 높이에 맞춰 flex 컬럼으로 → 탭 바(고정) + 테이블 카드(남은 높이 채움).
   페이지 자체 스크롤은 안 생기고, 아래엔 #content 패딩만큼 여백이 남는다. */
.sm-page{
    display:flex; flex-direction:column;
    height:calc(100vh - 285px); min-height:360px;
}
/* 메뉴코드 테이블(컬럼헤더+트리) 카드 — 탭과 분리된 별도 박스 */
.sm-panel{
    display:flex; flex-direction:column;
    flex:1 1 auto; min-height:0;
    background:#fff; border:1px solid #d8e0ea; border-radius:8px; overflow:hidden;
}

.sm-head{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    height:46px; flex:none; padding:0 10px 0 12px;
    background:#f4f7fa; border-bottom:2px solid #0a529d;
}
.sm-head h2{ margin:0; font-size:14px; font-weight:600; }
.sm-cnt{
    display:inline-block; min-width:20px; margin-left:5px; padding:1px 6px;
    border-radius:999px; background:#dbe6f4; color:#0a529d;
    font-size:11.5px; font-weight:700; text-align:center;
}
.sm-head .btn.small,
.sm-tabs__side .btn.small{
    height:28px; padding:0 10px; font-size:12.5px; font-weight:600;
    line-height:26px; border-radius:5px; white-space:nowrap;
}

.sm-tabs{
    display:flex; align-items:flex-end; gap:0; flex:none;
    padding:0 4px; margin-bottom:12px; border-bottom:2px solid #e5e9ee;
}
.sm-tabs button{
    appearance:none; cursor:pointer; font:inherit; font-size:13.5px; font-weight:600;
    color:#6b7480; background:none; border:none; border-bottom:2px solid transparent;
    padding:8px 16px; border-radius:0; margin-bottom:-2px;
    transition:color .15s, border-color .15s;
}
.sm-tabs button:hover{ color:#1d1d1d; }
.sm-tabs button.is-on{
    color:#047bb6; background:transparent; border-color:transparent; border-bottom:2px solid #047bb6;
}
/* 탭 개수 배지 (app/hist .ah-cattab b 와 동일) */
.sm-tabs button b{
    margin-left:5px; padding:0 6px; border-radius:999px;
    background:#eef1f5; color:#5b6472; font-size:11.5px; font-weight:700;
    font-variant-numeric:tabular-nums;
}
.sm-tabs button b:empty{ display:none; }
.sm-tabs button.is-on b{ background:#dbeafe; color:#0a529d; }
.sm-tabs__side{ margin-left:auto; padding:0 4px 8px 0; font-size:12.5px; color:#8a94a1; font-weight:600; }
.sm-tabs__side #smStat{ padding:2px 8px; border-radius:999px; background:#f4e6e6; color:#c0392b; font-weight:700; }
.sm-tabs__side #smStat:empty{ display:none; }

/* ── 열 머리줄 (트리와 폭을 맞춘다) ────────────────────── */
.sm-cols{
    display:flex; align-items:center; gap:0; flex:none;
    height:38px; padding:0 12px;
    background:#f4f7fa; border-bottom:2px solid #0a529d;
    font-size:13px; font-weight:600; color:#1d1d1d;
}
.sm-cols__nm{ flex:1 1 auto; }
.sm-cols__code{ flex:0 0 300px; }
.sm-cols__use{ flex:0 0 90px; text-align:center; }
.sm-cols__role{ flex:0 0 60px; text-align:center; }
.sm-cols__del{ flex:0 0 60px; text-align:center; }

/* ── 트리 ────────────────────────────────────────────────── */
/* 트리 영역은 SimpleBar 로 스크롤 (네이티브 스크롤 대체) */
.sm-tree-scroll{
    flex:1 1 auto; min-height:0;
}
.sm-tree{
    padding:0;
}
.sm-empty{ padding:48px 14px; margin:0; text-align:center; color:#9aa5b2; font-size:13px; }

.sm-row{
    display:flex; align-items:center; gap:0;
    padding:0 12px; min-height:38px;
}
.sm-row:hover{ background:#f5f8fc; }

/* 펼치기 화살표 — group_adm 과 같은 회전 방식 */
.sm-toggle{
    flex:none; width:22px; height:22px; margin-right:6px;
    display:flex; align-items:center; justify-content:center;
    border-radius:4px; cursor:pointer; transition:background .15s;
}
.sm-toggle:hover{ background:#dfe7f0; }
.sm-toggle.empty{ visibility:hidden; cursor:default; }
.sm-toggle::before{
    content:'\25B6'; font-size:11px; color:#7b8593;
    display:inline-block; transition:transform .18s;
}
.sm-toggle.expanded::before{ transform:rotate(90deg); color:#0a529d; }

.sm-name{
    flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:7px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* 메뉴명 클릭 = 수정 모달 (접기/펴기는 왼쪽 화살표) */
.sm-row[data-id] > .sm-name{ cursor:pointer; }
.sm-row[data-id] > .sm-name:hover{ text-decoration:underline; }

.sm-code{
    flex:0 0 300px; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size:12px; color:#9aa5b2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sm-use{ flex:0 0 90px; text-align:center; }
.sm-row > .sm-role{ flex:0 0 60px; text-align:center; color:#5b6673;
    font-size:12.5px; font-variant-numeric:tabular-nums; }
.sm-delwrap{ flex:0 0 60px; text-align:center; }

/* 1단 — 굵은 구분선 + 배경으로 덩어리를 끊는다 */
.sm-node[data-level="1"]{ border-top:2px solid #cfdae7; }
.sm-node[data-level="1"]:first-child{ border-top:0; }
.sm-node[data-level="1"] > .sm-row{
    background:#eef3fa; min-height:46px;
}
.sm-node[data-level="1"] > .sm-row:hover{ background:#e4edf8; }
.sm-node[data-level="1"] > .sm-row > .sm-name{
    font-size:14.5px; font-weight:700; color:#0a529d; cursor:pointer;
}
.sm-node[data-level="1"] > .sm-row > .sm-code{ color:#6b7c92; font-weight:600; }
.sm-node--orphan > .sm-row > .sm-name{ color:#8a94a1 !important; cursor:default !important; }

.sm-kid{
    flex:none; padding:1px 7px; border-radius:999px;
    background:#0a529d; color:#fff; font-size:11px; font-weight:700;
    font-variant-numeric:tabular-nums;
}

/* 하위 — 펼침/접힘 + 왼쪽 가이드 선 */
.sm-children{ display:none; }
.sm-children.expanded{ display:block; }
.sm-node[data-level="2"] > .sm-row{
    position:relative; padding-left:46px; border-bottom:1px solid #f0f4f8;
}
.sm-node[data-level="2"] > .sm-row > .sm-name{ font-size:13.5px; color:#3d4753; }
/* 세로 가이드 */
.sm-node[data-level="2"] > .sm-row::before{
    content:""; position:absolute; left:23px; top:0; bottom:0; border-left:1px solid #d3dde9;
}
/* 가지 */
.sm-node[data-level="2"] > .sm-row::after{
    content:""; position:absolute; left:23px; top:50%; width:13px; border-top:1px solid #d3dde9;
}
/* 마지막 하위는 세로선을 반만 그려 덩어리가 닫히게 */
.sm-children > .sm-node[data-level="2"]:last-child > .sm-row::before{ bottom:50%; }

/* 미사용 : 배경까지 옅게 눌러 사용 중인 행과 구분되게 한다 */
.sm-row.is-off{ background:#f7f8fa; opacity:.75; }
.sm-row.is-off:hover{ background:#eef1f5; opacity:.9; }
.sm-row.is-off .sm-name{ color:#a8b3c1; text-decoration:line-through; }
.sm-row.is-off .sm-code{ color:#c2cbd6; }
.sm-node[data-level="1"] > .sm-row.is-off{ background:#eef1f5; }
.sm-node[data-level="1"] > .sm-row.is-off > .sm-name{ color:#8a94a1; }

.sm-tgl{
    appearance:none; cursor:pointer; font:inherit; font-size:12px; font-weight:600;
    height:24px; min-width:60px; padding:0 10px; border-radius:5px;
    border:1px solid #d8e0ea; background:#fff; color:#8a94a1;
}
.sm-tgl.on{ border-color:#0a529d; background:#e6effb; color:#0a529d; }
.sm-del{
    appearance:none; cursor:pointer; font:inherit; font-size:13px; line-height:1;
    width:24px; height:24px; border-radius:5px; border:1px solid transparent;
    background:none; color:#a8b3c1;
}

/* 전체 접기/펼치기 */
.sm-fold{
    appearance:none; cursor:pointer; font:inherit; font-size:12px; font-weight:600;
    height:24px; padding:0 10px; border-radius:5px;
    border:1px solid #d8e0ea; background:#fff; color:#5b6673;
}
.sm-tabs__side{ display:flex; align-items:center; gap:10px; }

/* 모달 */
.sm-modal{ position:fixed; inset:0; z-index:1200; }
.sm-modal .modal__dim{ position:absolute; inset:0; background:rgba(16,32,56,.45); }
/* 모달 세로 중앙 정렬 : 이전엔 margin-top:8vh 로 위쪽에 붙어 시선이 어긋났다 */
.sm-modal{ display:flex; align-items:center; justify-content:center; }
.sm-modal .modal__box{
    position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); margin:0;
    width:min(500px, calc(100% - 32px));
    background:#fff; border-radius:8px; box-shadow:0 18px 48px rgba(16,32,56,.28);
    display:flex; flex-direction:column; max-height:80vh;
}
.sm-modal .modal__head{
    display:flex; align-items:center; justify-content:space-between;
    height:48px; padding:0 16px; border-bottom:1px solid #eaeff5;
}
.sm-modal .modal__head h3{ margin:0; font-size:16px; font-weight:600; }
.sm-modal .modal__close{
    border:0; background:none; font-size:24px; line-height:1; cursor:pointer; color:#8a94a1;
}
/* 본문 영역은 회색 판, 그 안에 흰 박스(테두리) 하나. 박스 전체가 SimpleBar 로 스크롤 */
.sm-modal .modal__body{
    padding:0; background:#fff;
    display:flex; flex-direction:column; overflow:hidden;
    flex:1 1 auto; min-height:0;
}
.sm-modal .sm-mcard{
    flex:1 1 auto; min-height:0; margin:14px;
    background:#fff; border:1px solid #dfe6ef; border-radius:8px; /* overflow:hidden 금지 — SimpleBar 가 스크롤바를 숨긴다(클리핑은 .simplebar-mask 담당) */
    overflow: visible;
    /* 테두리 내부 여백은 박스에 직접(SimpleBar 유무와 무관하게 보장) */
    padding:20px 22px;
}
.sm-modal .sm-mcard .simplebar-content{ padding:0; }
.sm-modal .modal__foot{
    display:flex; justify-content:flex-end; gap:8px;
    padding:12px 16px; border-top:1px solid #eaeff5;
}
.sm-f{ display:block; margin-bottom:12px; }
.sm-f > span{ display:block; font-size:13px; font-weight:600; color:#5b6673; margin-bottom:5px; }
.sm-f > span em{ color:#c0392b; font-style:normal; }
.sm-f .form-control{ width:100%; height:38px; }
.sm-hint{ margin:-6px 0 12px; font-size:12.5px; color:#8a94a1; line-height:1.5; }

/* menu_code : 고정 접두어(bms//bit/) + 입력칸. 접두어는 라벨이라 수정·삭제 불가 */
.sm-f > .sm-code-box{
    display:flex; align-items:stretch; width:100%; height:38px;
    margin-bottom:0; /* .sm-f > span 의 margin-bottom 상쇄 */
    border:1px solid #cbd5e1; border-radius:6px; background:#fff; overflow:hidden;
}
.sm-f > .sm-code-box:focus-within{ border-color:#047bb6; }
/* 접두어는 배경·구분선 없이 파란 글씨만 (수정 불가 표시). 입력값과 한 줄로 이어진다. */
.sm-code-fix{
    display:flex; align-items:center; flex:none; padding:0 0 0 12px;
    font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size:14px; font-weight:700; color:#047bb6;
    background:transparent; border:0;
    user-select:none; white-space:nowrap;
}
.sm-code-box .form-control{
    flex:1 1 auto; width:auto; height:36px;
    border:0; border-radius:0; box-shadow:none; padding-left:2px;
}

/* 수정 모드에서 못 바꾸는 값(menu_code · 상위 메뉴)은 눌러서 구분한다 */
#smCodeView{
    font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size:13px; color:#6b7c92; background:#f5f7fa;
}
.sm-f .form-control:disabled{ color:#6b7c92; background:#f5f7fa; }

/* panel_fit 이 .sm-tree 에 거는 네이티브 스크롤·상한을 SimpleBar wrapper(.sm-tree-scroll)로 이동 */
#content .sm-tree { max-height:none !important; min-height:0 !important; overflow:visible !important; }
/* panel_fit 의 고정 상한(--panel-h)을 무효화 — 패널이 뷰포트에 맞춰지고 트리가 flex 로 남은 높이를 채운다. */
#content .sm-tree-scroll { max-height:none !important; min-height:0 !important; }