/* ============================================================
   manage 공통 CSS — admin-service /page/manage/* 페이지 단일 룩
   ------------------------------------------------------------
   대상 페이지:
     - /page/manage/employee  (관리자 목록 — AG Grid)
     - /page/manage/author    (역할/권한/사용자역할/URL접근 — 4탭, HTML 테이블, 5모달)
     - /page/manage/menu      (메뉴 트리 + 폼 패널)
     - /page/manage/rbac/matrix (역할×권한 매트릭스 + URL스캔)

   사상:
     - 외곽(.conts-area / .single-grid-container / .search-filter-bar / .head-btn-group)
       은 grid-common.css 단일 정본 그대로 사용. 이 파일은 그 안의
       "manage 페이지에서 반복되는 컴포넌트"만 단일 정의한다.
     - 페이지 CSS 에서 이 파일의 클래스를 재정의하지 않는다.
     - 토큰(tokens.css) 만 사용 — 색/그림자/라디우스 직접 hex 금지.
   ============================================================ */

/* ── 탭 네비 ──────────────────────────────────────────
   사용 패턴 (HTML 변경 없이 기존 author-tab/rbac-tab 모두 동일 룩 받음):

     <div class="admin-tab-container">           ← 또는 .author-tab-container / .rbac-tabs-row
       <div class="admin-tabs">                   ← 또는 .author-tabs / .rbac-tabs
         <button class="admin-tab active" data-tab="…">…</button>
         <button class="admin-tab"        data-tab="…">…</button>
       </div>
     </div>
*/
.admin-tab-container,
.author-tab-container,
.rbac-tabs-row {
    margin-bottom: 12px;
}

.rbac-tabs-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 2px solid var(--color-border);
}

.admin-tabs,
.author-tabs,
.rbac-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--color-border);
}

.rbac-tabs-row .rbac-tabs {
    border-bottom: none;
    margin-bottom: 0;
}

.admin-tab,
.author-tab,
.rbac-tab {
    padding: 8px 20px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
    background-color: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-bottom: none;
    border-radius: var(--radius-md, 4px) var(--radius-md, 4px) 0 0;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
    margin-right: -1px;
}

.admin-tab:hover,
.author-tab:hover,
.rbac-tab:hover {
    background-color: var(--color-bg-strong);
    color: var(--color-text);
}

.admin-tab.active,
.author-tab.active,
.rbac-tab.active {
    background-color: #ffffff;
    color: var(--color-text-strong);
    font-weight: 600;
    border-color: var(--color-border);
    border-bottom: 2px solid #ffffff;
    margin-bottom: -2px;
    position: relative;
    z-index: 1;
}

/* authorManage 의 .tab-content 는 .active 클래스 토글로 활성/비활성.
   matrix 의 .tab-pane 은 인라인 style.display 또는 [hidden] 속성으로 토글 — 룩 정의 안 둠. */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* ── head-btn-group 안의 hint / drag-hint ─────────── */
.head-btn-group .hint,
.head-btn-group .drag-hint {
    float: left;
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 28px;
}

/* ── search-filter "table" 형 필터 (authorManage 등) ──
   기본 .search-filter-bar 와 시각적 동일 룩(회색 배경 + 보더 + 라디우스)을
   <table class="search-filter-table"> 형식에도 부여. */
.search-filter-container {
    display: flex;
    align-items: center;
    background-color: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 8px 12px;
    margin-bottom: 10px;
}

.search-filter-table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
}

.search-filter-table td {
    padding: 4px 6px;
    vertical-align: middle;
    font-size: 12px;
}

.search-filter-table td.label-cell {
    width: 110px;
    font-weight: 600;
    color: var(--color-text-strong);
    white-space: nowrap;
}

.search-filter-table td.input-cell {
    color: var(--color-text);
}

.search-filter-table .krds-form-input,
.search-filter-table .krds-form-select,
.search-filter-table input[type="text"] {
    height: 28px;
    padding: 4px 10px;
    font-size: 12px;
    border: 1px solid var(--color-border-strong);
    border-radius: 4px;
    background-color: #ffffff;
}

.search-filter-table .krds-form-input:focus,
.search-filter-table .krds-form-select:focus,
.search-filter-table input[type="text"]:focus {
    outline: none;
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.search-filter-table .btn-container {
    display: inline-flex;
    gap: 6px;
    justify-content: flex-end;
}

/* ── manage 일반 HTML 데이터 테이블 ─────────────────
   비-AG-Grid 테이블 단일 룩. 기존 페이지 클래스(.author-data-table /
   .scan-table / .service-table / .menu-tree-table) 도 동일 룩 받도록 별칭.
*/
.manage-table-wrap,
.author-table-wrap {
    overflow-x: auto;
}

.manage-data-table,
.author-data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--color-border-strong);
    border-radius: 4px;
    overflow: hidden;
    font-size: 12px;
    background: #ffffff;
}

.manage-data-table thead th,
.author-data-table thead th {
    background-color: var(--color-bg-alt);
    color: var(--color-text-strong);
    font-weight: 600;
    padding: 8px 12px;
    text-align: center;
    border-right: 1px solid var(--color-border);
    border-bottom: 2px solid var(--color-border-strong);
    white-space: nowrap;
    height: 36px;
}

.manage-data-table thead th:last-child,
.author-data-table thead th:last-child {
    border-right: none;
}

.manage-data-table tbody td,
.author-data-table tbody td {
    padding: 6px 12px;
    text-align: center;
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
    color: var(--color-text);
    background-color: #ffffff;
    height: 34px;
}

.manage-data-table tbody td:last-child,
.author-data-table tbody td:last-child {
    border-right: none;
}

.manage-data-table tbody tr:last-child td,
.author-data-table tbody tr:last-child td {
    border-bottom: none;
}

.manage-data-table tbody tr:hover td,
.author-data-table tbody tr:hover td {
    background-color: #f8fafc;
}

/* 셀 안 셀렉트 — authorManage 의 RGM 행 등 */
.manage-data-table .krds-form-select.small,
.author-data-table .krds-form-select.small {
    width: 90%;
    height: 26px;
    padding: 2px 6px;
    font-size: 12px;
}

/* 데이터 없음 / 빈 행 — manage 페이지의 모든 HTML 테이블 공용 */
.manage-data-table .no-data,
.author-data-table .no-data,
.manage-data-table .empty-row,
.author-data-table .empty-row,
.scan-table .empty-row,
.menu-tree-table .empty-row,
.service-table .empty-row,
.matrix-table .empty-row {
    padding: 24px 12px !important;
    color: var(--color-text-disabled);
    font-style: italic;
    text-align: center !important;
}

/* 링크 텍스트 */
.manage-data-table .link-text,
.author-data-table .link-text {
    color: var(--color-blue-500);
    cursor: pointer;
    text-decoration: none;
    font-weight: 500;
}

.manage-data-table .link-text:hover,
.author-data-table .link-text:hover {
    color: var(--color-blue-600);
    text-decoration: underline;
}

/* ── 페이지네이션 — <a class="page-link"> 링크 스타일 ───
   authorManage 가 사용하는 anchor 기반 페이저. button 기반 페이저는
   grid-paging.css 가 담당. */
.pagination-controls a.page-navi,
.pagination-controls a.page-link,
.pagination-controls .page-links a.page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    background-color: #ffffff;
    border: 1px solid var(--color-border-strong);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.pagination-controls a.page-navi:hover,
.pagination-controls .page-links a.page-link:hover {
    background-color: var(--color-bg-strong);
    border-color: var(--color-text-disabled);
    color: var(--color-text-strong);
}

.pagination-controls .page-links a.page-link.active {
    background-color: var(--color-blue-500);
    border-color: var(--color-blue-500);
    color: #ffffff;
    font-weight: 600;
    cursor: default;
}

.pagination-controls a.page-navi.prev,
.pagination-controls a.page-navi.next {
    font-size: 12px;
    font-weight: 600;
    padding: 0 10px;
}

.pagination-controls .page-links {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pagination-controls .page-links .page-link.link-dot {
    border: none;
    background: none;
    min-width: 20px;
    cursor: default;
    position: relative;
}

.pagination-controls .page-links .page-link.link-dot::after {
    content: "...";
    color: var(--color-text-disabled);
    font-weight: 700;
    letter-spacing: 1px;
}

.pagination-controls .page-links .page-link.link-dot:hover {
    background: none;
    border: none;
}

/* ── 폼 모달 (authorManage 5개 모달) ──────────────────
   common/modal.css 의 .modal-overlay 를 그대로 쓰되, 박스 변형(.modal-dialog-box)
   을 manage 페이지 룩으로 단일 정의. 기존 5개 모달 HTML 변경 없이 동작.
*/
.modal-dialog-box {
    background: var(--color-bg);
    border-radius: var(--radius-xl, 8px);
    box-shadow: var(--shadow-modal);
    width: 500px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-dialog-box.modal-form  { width: 550px; max-height: 580px; }
.modal-dialog-box.modal-wide  { width: 850px; max-height: 600px; }

.modal-header-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
    background-color: var(--color-bg-alt);
    flex-shrink: 0;
}

.modal-header-box h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-strong);
}

.modal-close-btn {
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 0 4px;
}

.modal-close-btn:hover {
    color: var(--color-text-strong);
}

.modal-body-box {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    max-height: 60vh;
}

.modal-dialog-box.modal-wide .modal-body-box {
    max-height: 460px;
}

.modal-body-box .author-data-table tbody tr:hover td,
.modal-body-box .manage-data-table tbody tr:hover td {
    background-color: #eff6ff;
    cursor: pointer;
}

.modal-footer-box {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid var(--color-border);
    background-color: var(--color-bg-alt);
    flex-shrink: 0;
}

/* 폼 모달 안의 라벨/입력 테이블 */
.modal-form-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.modal-form-table th {
    width: 110px;
    padding: 8px 10px;
    text-align: right;
    vertical-align: top;
    font-weight: 600;
    color: var(--color-text-strong);
    white-space: nowrap;
    background-color: var(--color-bg-alt);
    border-bottom: 1px solid var(--color-border);
}

.modal-form-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
}

.modal-form-table tr:last-child th,
.modal-form-table tr:last-child td {
    border-bottom: none;
}

.modal-form-table .required {
    color: var(--color-red-500);
    margin-left: 2px;
}

/* 폼 모달 안의 컨트롤 — 외부 인풋 톤과 동일 */
.modal-input,
.modal-select {
    width: 100%;
    height: 30px;
    padding: 4px 10px;
    font-size: 12px;
    border: 1px solid var(--color-border-strong);
    border-radius: 4px;
    background-color: #ffffff;
    color: var(--color-text);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.modal-textarea {
    width: 100%;
    min-height: 70px;
    padding: 6px 10px;
    font-size: 12px;
    font-family: inherit;
    border: 1px solid var(--color-border-strong);
    border-radius: 4px;
    background-color: #ffffff;
    color: var(--color-text);
    resize: vertical;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.modal-input:focus,
.modal-select:focus,
.modal-textarea:focus {
    outline: none;
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.modal-input[readonly] {
    background-color: var(--color-bg-strong);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

/* 모달 푸터 액션 버튼 — admin 의미컬러 룰과 1:1 정렬 */
.btn-modal-action,
.btn-modal-cancel,
.btn-modal-delete {
    height: 28px;
    padding: 4px 14px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.btn-modal-action {
    color: #ffffff;
    background-color: var(--color-blue-500);
    border: 1px solid var(--color-blue-500);
}

.btn-modal-action:hover {
    background-color: var(--color-blue-600);
    border-color: var(--color-blue-600);
}

.btn-modal-cancel {
    color: var(--color-text);
    background-color: #ffffff;
    border: 1px solid var(--color-border-strong);
}

.btn-modal-cancel:hover {
    background-color: var(--color-bg-strong);
    border-color: var(--color-text-disabled);
    color: var(--color-text-strong);
}

.btn-modal-delete {
    color: #ffffff;
    background-color: var(--color-red-500);
    border: 1px solid var(--color-red-500);
    margin-right: auto;
}

.btn-modal-delete:hover {
    background-color: var(--color-red-600);
    border-color: var(--color-red-600);
}

.modal-error {
    margin: 3px 0 0 0;
    font-size: 12px;
    color: var(--color-red-500);
    min-height: 0;
}

.modal-error:empty {
    display: none;
}

.char-count {
    display: block;
    text-align: right;
    font-size: 12px;
    color: var(--color-text-disabled);
    margin-top: 2px;
}

/* ── 상태 배지 (employee/communityView 등 공통) ───── */
.status-badge,
.status-active,
.status-leave,
.status-retired,
.status-locked {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.status-active   { background-color: #dcfce7; color: #166534; }
.status-leave    { background-color: #fef3c7; color: #92400e; }
.status-retired  { background-color: #fee2e2; color: #991b1b; }
.status-locked   { background-color: #fee2e2; color: #991b1b; }