@charset "UTF-8";

/* ============================================================
   Search Header
   ============================================================ */
#supply_router .search-box {
    flex: 1;
    max-width: 400px;
}

/* ============================================================
   Util Bar
   ============================================================ */
#supply_router .form--tbl__util .total p    { margin: 0; }
#supply_router .form--tbl__util .total span { color: #047bb6; font-weight: 700; }

/* 새로고침은 MAIN.normalizeListToolbar 가 검색 줄로 옮기므로 그 줄 높이(40px)에 맞춘다 */
#supply_router .supply_router_btn-refresh {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #c6c6c6;
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
    transition: all 0.15s;
}
#supply_router .supply_router_btn-refresh:hover {
    border-color: #047bb6;
    background-color: #f0f7fb;
}

/* ============================================================
   Table — 밀집형 (이 화면 전용)

   공통 bit.css 의 목록 규격(행 45px · 글자 15px)을 이 화면에서만
   본문 행 40px · 글자 14.5px, 머리글 38px · 글자 14px 로 덮는다.
   그 규칙이 `#content .form-tbl th,td` (id 1 + class 1) 이므로
   여기서는 `#content #supply_router` (id 2) 로 올려서 이긴다.
   다른 목록 화면은 그대로 45px 이다.
   ============================================================ */

/* 스크롤 영역 — 머리글 고정(sticky)이 확실히 동작하도록 브라우저 기본 스크롤을 쓴다.
   (simplebar 는 스크롤 주체를 자기 래퍼로 옮겨 sticky 기준이 흔들린다) */
#content #supply_router .sr-tbl {
    border: 1px solid #dbe3ed;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

/* 표가 남는 공간을 다 쓰게 한다.
   빼는 값(450px)은 표 위·아래에 실제로 쌓이는 것들의 합이다.
     상단바 50 + 본문 위아래 여백 32 + 페이지 헤더 패널 98 + 그 아래 여백 16
     + 검색줄 40 + 12 + 총건수줄 30 + 10 + 페이징·버튼줄 46 + 14 ≈ 448
   예전 값(560px)은 100px 가까이 과했다. 10건인데 8건만 보이고
   표 아래가 비던 원인이다. */
#content #supply_router .sr-tbl__scroll {
    max-height: calc(100vh - 450px);
    min-height: 120px;
    /* 스크롤은 SimpleBar 가 담당(data-simplebar).
       root 를 overflow:hidden 으로 두면 SimpleBar 가 오버플로우를 감지 못 해 스크롤바가 안 뜬다.
       visible 로 둬야 SimpleBar 가 자기 mask 로 스크롤을 만든다(네이티브 바는 안 생김). */
    overflow: visible;
}
/* 세로 스크롤바가 sticky 헤더(38px)를 덮지 않도록 track 을 헤더 아래에서 시작시킨다 */
#content #supply_router .sr-tbl__scroll .simplebar-track.simplebar-vertical {
    top: 38px;
}

#content #supply_router .sr-tbl__scroll::-webkit-scrollbar { width: 10px; height: 10px; }
#content #supply_router .sr-tbl__scroll::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 10px;
    background-clip: content-box;
    background-color: #c8d2de;
}

#content #supply_router #supply_router_table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
    /* index.css 의 `.form-tbl table { overflow: hidden }` 을 반드시 되돌려야 한다.
       표에 overflow 가 걸리면 표 자체가 스크롤 컨테이너가 되고,
       thead 의 sticky 는 '스크롤되지 않는 그 표' 를 기준으로 잡혀 고정이 안 된다.
       (머리글이 같이 밀려 올라가던 원인) */
    overflow: visible;
}

/* ---------- 머리글 : 스크롤해도 붙어 있다 ----------
   bit.css 가 `#content .form-tbl thead tr { height: 45px }` 로 행 높이를 잡고 있어
   th 높이만 줄이면 tr 이 45px 를 지킨다. tr 도 같이 정한다. */
#content #supply_router .form-tbl thead tr { height: 38px; }

#content #supply_router .form-tbl thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    height: 38px;
    padding: 0 10px;
    text-align: center;
    background: #f4f7fa;
    /* border-collapse: collapse 에서는 sticky 요소의 테두리가 따라오지 않아
       스크롤하면 밑줄이 사라진다. 안쪽 그림자로 그린다.
       배경이 옅으므로 이 밑줄이 머리글과 본문을 가르는 주된 선이다. */
    border-bottom: 0;
    box-shadow: inset 0 -2px 0 #0a529d;
    /* 글자는 다른 목록 화면과 같은 값 (bit.css 15px · index.css weight 500) */
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0;
    color: #1d1d1d;
    white-space: nowrap;
}

/* .tbl-th 는 index.css 에서 이미 flex 가운데 정렬이다. 따로 덮지 않는다. */

/* ---------- 정렬 가능한 머리글 ----------
   버튼으로 감싸 키보드로도 정렬할 수 있게 한다.
   화살표 자리는 늘 잡아 둔다 (정렬을 바꿀 때 글자가 밀리지 않게). */
#content #supply_router .form-tbl thead th.sr-th-sort { padding: 0; }

#content #supply_router .sr-th-btn {
    width: 100%;
    height: 38px;
    padding: 0 10px;
    border: 0;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    cursor: pointer;
    gap: 4px;
}

#content #supply_router .sr-th-btn:hover { color: #047bb6; }
#content #supply_router .sr-th-btn:focus-visible {
    outline: 2px solid #047bb6;
    outline-offset: -2px;
}

#content #supply_router .form-tbl thead th.is-sorted { color: #0a529d; font-weight: 700; }

/* 화살표 — 삼각형 두 개를 겹쳐 두고 정렬 방향만 진하게 */
#supply_router .sr-sort-ico {
    position: relative;
    flex: 0 0 auto;
    width: 8px;
    height: 12px;
}

#supply_router .sr-sort-ico::before,
#supply_router .sr-sort-ico::after {
    content: "";
    position: absolute;
    left: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}

#supply_router .sr-sort-ico::before {
    top: 1px;
    border-bottom: 4px solid #b8c4d2;
}

#supply_router .sr-sort-ico::after {
    bottom: 1px;
    border-top: 4px solid #b8c4d2;
}

#supply_router .sr-sort-ico.is-asc::before  { border-bottom-color: #0a529d; }
#supply_router .sr-sort-ico.is-desc::after { border-top-color: #0a529d; }

/* ---------- 본문 ---------- */
#content #supply_router .form-tbl tbody td {
    height: 40px;
    padding: 0 10px;
    border-bottom: 1px solid #eaeff5;
    /* 머리글만 가운데로 두면 본문과 어긋나 보이므로 본문도 같이 가운데 (시스템 기본) */
    text-align: center;
    vertical-align: middle;
    font-size: 14.5px;
    color: #10202f;
}

#content #supply_router .form-tbl tbody tr { height: 40px; }
#content #supply_router .form-tbl tbody tr:last-child td { border-bottom: 0; }

/* 홀짝 배경으로 줄을 가른다 (촘촘할 때 눈이 미끄러지지 않게) */
#content #supply_router .form-tbl tbody tr:nth-child(even) td { background: #f7f9fc; }

#content #supply_router .form-tbl tbody tr { cursor: pointer; }
#content #supply_router .form-tbl tbody tr:hover td { background: #e6effb; }

/* '조회된 데이터가 없습니다' 행은 색 바 · 좌측정렬 규칙에서 뺀다 */
#content #supply_router .form-tbl tbody tr.is-empty { cursor: default; }
#content #supply_router .form-tbl tbody tr.is-empty td,
#content #supply_router .form-tbl tbody tr.is-empty:hover td {
    height: 90px;
    text-align: center;
    background: #fff;
    color: #7c8b9c;
}

#supply_router .tbl-td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- 행 앞머리 상태 색 바 ----------
   상태를 알약으로 두면 행마다 색 덩어리가 생겨 촘촘한 표에서 시선을 잡아먹는다.
   색은 행 왼쪽 3px 바로 옮기고 상태 칸은 색 글자만 남긴다. */
#content #supply_router .form-tbl tbody td.sr-td-no {
    position: relative;
    /* 좌우를 같이 벌려야 색 바를 넣고도 숫자가 가운데에 온다 */
    padding-left: 16px;
    padding-right: 16px;
    color: #7c8b9c;
    font-variant-numeric: tabular-nums;
}

#content #supply_router .form-tbl tbody td.sr-td-no::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    bottom: 5px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #c8d2de;
}

/* 기본(#c8d2de) 규칙이 .form-tbl 을 하나 더 갖고 있어 특이성이 높다.
   상태 색이 이기도록 여기도 .form-tbl tbody 를 붙여 같은 층으로 맞춘다. */
#content #supply_router .form-tbl tbody tr.sr-row--ok   > td.sr-td-no::before { background: #15803d; }
#content #supply_router .form-tbl tbody tr.sr-row--hold > td.sr-td-no::before { background: #1d69c9; }
#content #supply_router .form-tbl tbody tr.sr-row--bad  > td.sr-td-no::before { background: #b42318; }

/* 상태 글자 */
#supply_router .sr-st { font-weight: 600; }
#supply_router .sr-st--ok   { color: #15803d; }
#supply_router .sr-st--hold { color: #1d69c9; }
#supply_router .sr-st--bad  { color: #b42318; }
#supply_router .sr-st--none { color: #7c8b9c; }

/* 시리얼번호 · 날짜는 자릿수만 맞춘다.
   굵게 두면 옆 칸들과 무게가 달라 보여 굵기는 본문과 같게 둔다. */
#supply_router .sr-serial,
#supply_router .sr-num { font-variant-numeric: tabular-nums; }

/* 행 안 버튼(상세 · 삭제)은 넣지 않는다.
   라우터는 행을 누르면 상세가 열리고 삭제는 그 안에 있어 중복이었다.
   필요해지면 마지막에 컬럼 하나를 더 두고 hover 에서만 보이게 하면 된다. */

/* ============================================================
   Pagination & Action
   ============================================================ */
#supply_router #supply_router_pagination {
    margin-top: 4px;
}

/* ============================================================
   상세 모달 오버라이드
   (기본 overlay·dialog·header 는 디자인 시스템 .modal 이 처리)
   ============================================================ */
#supply_router_detailBackdrop .modal-dialog {
    width: 90%;
    max-width: 750px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}
/* 상세 모달 레이아웃·기본정보 스타일은 아래 "상세 모달: 좌) 라우터 정보  우) 라우터 이력" 절에 있다.
   (예전 stats--modal / modal__card 래퍼와 박스형 form-value 규칙은 자산 상세 디자인 적용 시 제거) */
#supply_router_detailBackdrop .round--btn {
    min-width: 120px;
    height: 45px;
}

/* ============================================================
   등록/수정 모달 오버라이드
   ============================================================ */
#supply_router_editBackdrop .modal-dialog {
    width: 90%;
    max-width: 750px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}
#supply_router_editBackdrop .modal-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}
#supply_router_editBackdrop .modal-section {
    background-color: #fff;
    border-radius: 6px;
    padding: 12px 15px;
    margin-bottom: 10px;
    border: 1px solid #e5e7eb;
}
#supply_router_editBackdrop .modal-section:last-child { margin-bottom: 0; }
/* 소제목 스타일 : modal_skin.css 공통 */
#supply_router_editBackdrop .section-title {
    margin: 0 0 10px 0;
    padding-bottom: 6px;
    border-bottom: 1px solid #e5e7eb;
}
#supply_router_editBackdrop .section-content {
    display: flex;
    flex-direction: column;
}
#supply_router_editBackdrop .form-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 8px;
    min-width: 0;
}
#supply_router_editBackdrop .form-group:last-child { margin-bottom: 0; }
#supply_router_editBackdrop .form-ti {
    flex-shrink: 0;
}
#supply_router_editBackdrop .form-ti.w100 { width: 100px; }
#supply_router_editBackdrop .form-ti.required::after {
    content: '*';
    color: #e54e57;
    margin-left: 3px;
}
#supply_router_editBackdrop .form-control {
    flex: 1;
    height: 34px;
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 15px;
    color: #1d1d1d;
    background: #fff;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
#supply_router_editBackdrop .form-control:focus { border-color: #047bb6; }
#supply_router_editBackdrop .form-control[readonly] {
    background: #f3f4f6;
    color: #6b7280;
}
#supply_router_editBackdrop select.form-control {
    appearance: auto;
    -webkit-appearance: auto;
}
#supply_router_editBackdrop .round--btn {
    min-width: 120px;
    height: 45px;
}

/* 등록 모달 박스(.modal-section) 안쪽에서만 SimpleBar 로 스크롤(네이티브 금지).
   본문·박스·폼 영역을 flex 로 묶어 박스 테두리가 늘 다 보이게 하고,
   내용이 넘치면 박스 안 스크롤 영역(data-simplebar)만 스크롤한다. */
#supply_router_editBackdrop .modal-section {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#supply_router_editBackdrop .section-content {
    flex: 1 1 auto;
    min-height: 0;
}
#supply_router_editBackdrop .sr-reg-scroll {
    flex: 1 1 auto;
    min-height: 0;
}

/* ============================================================
   상세 모달: 좌) 라우터 정보  우) 라우터 이력
   (단말 관리 supply_parts.css 의 sp-detail-* / sd-asset-* 디자인 차용)
   ============================================================ */
#supply_router_detailBackdrop .sr-detail-dialog {
    width: 820px;
    max-width: 95vw;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}
/* 박스 밖(본문)은 회색, 상하좌우 14px 여백으로 박스를 감싼다 */
/* 본문 전체가 SimpleBar 스크롤 호스트(data-simplebar).
   overflow:hidden 금지 — SimpleBar 의 recalculate() 가 루트의 computed overflowY 를 읽어
   `"hidden" !== overflowY && isOverflowing` 으로 덮어쓰기 때문에, hidden 이면
   넘쳐도 스크롤바가 안 뜬다.
   그렇다고 visible 로 두면 height:inherit(→auto) 인 .simplebar-wrapper 가 내용 높이만큼
   자라서 본문 박스 밖으로 흘러내려 푸터(취소·삭제)를 덮는다 → 버튼이 안 눌렸다.
   clip 은 computed 값이 "hidden" 이 아니라 SimpleBar 판정을 건드리지 않으면서
   넘친 부분만 잘라낸다. 스크롤 컨테이너도 만들지 않는다.
   padding 14px 는 SimpleBar 가 .simplebar-content 로 옮겨 주므로 그대로 둔다. */
#supply_router_detailBackdrop .modal-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: clip;
    background: #fff;
    padding: 14px;
}
/* 푸터를 positioned 로 올려 둔다.
   .modal-content 는 position:relative + z-index:auto 라 스택 컨텍스트를 만들지 않아,
   그 안의 .simplebar-mask / .simplebar-offset / .simplebar-track (모두 absolute) 이
   dialog 스택 컨텍스트에서 static 인 푸터보다 위에 그려진다.
   푸터에 z-index 를 줘서 어떤 경우에도 버튼이 클릭을 받도록 보장한다. */
#supply_router_detailBackdrop .modal-footer {
    position: relative;
    z-index: 2;
}
#supply_router_detailBackdrop .sr-detail-layout {
    display: flex;
    align-items: stretch;
    gap: 14px;
    max-height: 420px;
    overflow: hidden;
}
#supply_router_detailBackdrop .sr-detail-left {
    flex: 0 0 360px;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
#supply_router_detailBackdrop .sr-detail-right {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
/* 좌/우 카드 공통 = 흰색 프레임 박스(테두리 1px #dfe6ef, radius 8). 회색 위에 14px 간격으로 뜬다 */
#supply_router_detailBackdrop .section_content {
    flex: 1 1 auto;
    background: #fff;
    border: 1px solid #dfe6ef;
    border-radius: 8px;
    padding: 24px;
}
/* 소제목 스타일 : modal_skin.css 공통 */
#supply_router_detailBackdrop .section-title {
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
}
/* 좌측 기본정보 카드: 제목 고정 + 정보행이 남은 높이를 채움 */
#supply_router_detailBackdrop .sr-detail-left .section_content {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
/* 점선 구분 행 + 박스 없는 값 (자산 상세 기본 정보와 동일) */
#supply_router_detailBackdrop .form.view-mode {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    justify-content: space-between;
}
/* 행 전체(항목명+값)를 긋던 점선을 값 칸에만 긋는다 → 항목명 아래는 선이 없다 */
#supply_router_detailBackdrop .form-group-view {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 0;
    font-size: 14px;
}
#supply_router_detailBackdrop .form-label {
    flex: 0 0 110px;
}
#supply_router_detailBackdrop .form-value {
    flex: 1 1 auto;
    word-break: break-all;
    overflow-wrap: anywhere;
}
/* 값 점선 밑줄 : modal_skin.css 공통 */
#supply_router_detailBackdrop .sr-detail-scroll {
    min-height: 0;
    display: flex;
    flex-direction: column;
}
#supply_router_detailBackdrop .sr-hist-scroll {
    flex: 1 1 auto;
    min-height: 0;
}
@media (max-width: 720px) {
    #supply_router_detailBackdrop .sr-detail-layout {
        flex-direction: column;
        max-height: none;
    }
}

/* ── 이력 타임라인 ── */
#supply_router_detailBackdrop .sd-asset-timeline {
    list-style: none;
    margin: 0;
    padding: 2px;
}
#supply_router_detailBackdrop .sd-asset-timeline__item {
    position: relative;
    padding: 0 0 18px 22px;
    margin-left: 5px;
    border-left: 2px solid #e5e7eb;
}
#supply_router_detailBackdrop .sd-asset-timeline__item:last-child {
    padding-bottom: 2px;
    border-left-color: transparent;
}
#supply_router_detailBackdrop .sd-asset-timeline__item::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #047bb6;
    box-sizing: border-box;
}
/* 분리(OUT) 이력은 점 색을 달리해 장착과 구분 */
#supply_router_detailBackdrop .sd-asset-timeline__item[data-direction="OUT"]::before {
    border-color: #9ca3af;
}
#supply_router_detailBackdrop .sd-asset-timeline__head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
#supply_router_detailBackdrop .sd-asset-timeline__title {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}
#supply_router_detailBackdrop .sr-hist__device {
    font-size: 12px;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 10px;
    background: #dbeafe;
    color: #1d4ed8;
}
#supply_router_detailBackdrop .sd-asset-timeline__item[data-direction="OUT"] .sr-hist__device {
    background: #e5e7eb;
    color: #6b7280;
}
#supply_router_detailBackdrop .sd-asset-timeline__meta {
    margin-top: 3px;
    font-size: 12px;
    color: #9ca3af;
}
#supply_router_detailBackdrop .sr-hist__counter,
#supply_router_detailBackdrop .sr-hist__reason,
#supply_router_detailBackdrop .sr-hist__user {
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
    word-break: break-all;
    overflow-wrap: anywhere;
}
#supply_router_detailBackdrop .sr-hist__counter {
    color: #c2410c;
}
#supply_router_detailBackdrop .sd-asset-empty {
    padding: 16px;
    text-align: center;
    color: #9ca3af;
    font-size: 13px;
    border: none;
    background: none;
}