/*
 * DA-AMS 화면 테마 (참조 UI 기준: 좌측 고정 사이드바 + 얇은 상단바, 밝은 배경 위 흰 카드,
 * 인디고 주색 + 민트 포인트, 파스텔 상태 배지)
 * Bootstrap 5 위에 얹는 얇은 테마 레이어다 — Bootstrap 클래스는 그대로 쓰고 색/여백만 덮는다.
 */

:root {
    /* 브랜드 */
    --ams-primary:        #3f43a0;   /* 주요 버튼·활성 상태 */
    --ams-primary-hover:  #343879;
    --ams-primary-soft:   #eef0fc;   /* 활성 메뉴 배경 */
    --ams-accent:         #23c8bf;   /* 민트 포인트 (아바타·구분선) */

    /* 표면 */
    --ams-bg:      #f5f6fa;
    --ams-surface: #ffffff;
    --ams-border:  #e9ebf2;

    /* 텍스트 */
    --ams-text:   #33374d;
    --ams-muted:  #8b90a3;

    --ams-radius:   12px;
    --ams-radius-sm: 8px;
    --ams-shadow:   0 1px 2px rgba(37, 41, 74, .04), 0 4px 16px rgba(37, 41, 74, .05);
    --ams-sidebar-w: 232px;
}

body {
    background: var(--ams-bg);
    color: var(--ams-text);
    font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, -apple-system,
                 "Segoe UI", Roboto, sans-serif;
    font-size: .9375rem;
}

/* ===== 셸: 사이드바 + 본문 ===== */
.ams-shell { display: flex; min-height: 100vh; }

.ams-sidebar {
    width: var(--ams-sidebar-w);
    flex: 0 0 var(--ams-sidebar-w);
    background: var(--ams-surface);
    border-right: 1px solid var(--ams-border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.ams-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 1.125rem 1.25rem;
    font-weight: 800;
    font-size: 1.0625rem;
    color: var(--ams-primary);
    letter-spacing: -.02em;
    text-decoration: none;
}
.ams-brand:hover { color: var(--ams-primary); }
.ams-brand .ams-brand-mark {
    width: 22px; height: 22px; border-radius: 7px;
    background: linear-gradient(135deg, var(--ams-accent), var(--ams-primary));
    display: inline-block;
}
.ams-brand small { display: block; font-size: .6875rem; font-weight: 500; color: var(--ams-muted); }

.ams-nav { padding: .25rem .5rem 1rem; overflow-y: auto; flex: 1 1 auto; }
.ams-nav-group-label {
    padding: .875rem .75rem .375rem;
    font-size: .6875rem;
    font-weight: 700;
    color: var(--ams-muted);
    letter-spacing: .04em;
}
.ams-nav-link {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border-radius: var(--ams-radius-sm);
    color: var(--ams-text);
    text-decoration: none;
    font-size: .875rem;
    line-height: 1.3;
}
.ams-nav-link:hover { background: #f2f3f9; color: var(--ams-text); }
.ams-nav-link.active {
    background: var(--ams-primary-soft);
    color: var(--ams-primary);
    font-weight: 700;
}
.ams-nav-link .ams-nav-icon { width: 1.25rem; text-align: center; flex: 0 0 auto; font-size: .9375rem; }
.ams-nav-sub { padding-left: .75rem; }
.ams-nav-sub .ams-nav-link { padding-left: .75rem; }

.ams-sidebar-footer {
    border-top: 1px solid var(--ams-border);
    padding: .75rem;
    font-size: .75rem;
    color: var(--ams-muted);
}

/* 본문 */
.ams-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.ams-topbar {
    height: 56px;
    background: var(--ams-surface);
    border-bottom: 1px solid var(--ams-border);
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 0 1rem;
    position: sticky;
    top: 0;
    z-index: 1020;
}
.ams-topbar .ams-topbar-title { font-weight: 700; }

.ams-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--ams-accent);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .8125rem; font-weight: 700;
    flex: 0 0 auto;
}
.ams-user-meta { line-height: 1.15; }
.ams-user-meta .ams-user-name { font-size: .8125rem; font-weight: 600; }
.ams-user-meta .ams-user-role { font-size: .6875rem; color: var(--ams-muted); }

.ams-content { padding: 1.25rem; flex: 1 1 auto; }

/* ===== 페이지 헤더 (pill 타이틀) ===== */
.ams-page-head {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    margin-bottom: 1rem;
}
.ams-page-title {
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--ams-surface);
    border: 1px solid var(--ams-border);
    border-radius: 999px;
    padding: .4375rem 1rem;
    font-size: 1.0625rem;
    font-weight: 800;
    letter-spacing: -.02em;
    box-shadow: var(--ams-shadow);
    margin: 0;
}
.ams-page-title .ams-page-title-sub {
    font-size: .75rem; font-weight: 600; color: var(--ams-muted);
}

/* ===== 카드 ===== */
.card {
    background: var(--ams-surface);
    border: 1px solid var(--ams-border);
    border-radius: var(--ams-radius);
    box-shadow: var(--ams-shadow);
}
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--ams-border);
    font-weight: 700;
    font-size: .875rem;
}
.card-footer { background: transparent; border-top: 1px solid var(--ams-border); }

/* 툴바 (카드 상단의 액션/검색 줄) */
.ams-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    padding: .625rem .75rem;
    background: var(--ams-surface);
    border: 1px solid var(--ams-border);
    border-radius: var(--ams-radius);
    box-shadow: var(--ams-shadow);
    margin-bottom: .75rem;
}
.ams-toolbar .ams-toolbar-divider {
    width: 1px; height: 22px; background: var(--ams-border); margin: 0 .25rem;
}

/* ===== 버튼 ===== */
.btn { border-radius: var(--ams-radius-sm); font-size: .875rem; font-weight: 600; }
.btn-sm { border-radius: 7px; font-size: .8125rem; }
.btn-primary {
    --bs-btn-bg: var(--ams-primary);
    --bs-btn-border-color: var(--ams-primary);
    --bs-btn-hover-bg: var(--ams-primary-hover);
    --bs-btn-hover-border-color: var(--ams-primary-hover);
    --bs-btn-active-bg: var(--ams-primary-hover);
    --bs-btn-active-border-color: var(--ams-primary-hover);
    --bs-btn-disabled-bg: var(--ams-primary);
    --bs-btn-disabled-border-color: var(--ams-primary);
}
.btn-outline-primary {
    --bs-btn-color: var(--ams-primary);
    --bs-btn-border-color: #c9cdf0;
    --bs-btn-hover-bg: var(--ams-primary);
    --bs-btn-hover-border-color: var(--ams-primary);
    --bs-btn-active-bg: var(--ams-primary);
}
.btn-outline-secondary {
    --bs-btn-color: var(--ams-text);
    --bs-btn-border-color: var(--ams-border);
    --bs-btn-hover-color: var(--ams-text);
    --bs-btn-hover-bg: #f2f3f9;
    --bs-btn-hover-border-color: #d9dce8;
    --bs-btn-active-color: var(--ams-text);
    --bs-btn-active-bg: #eceef6;
    --bs-btn-active-border-color: #d9dce8;
}
.btn-success {
    --bs-btn-bg: var(--ams-accent);
    --bs-btn-border-color: var(--ams-accent);
    --bs-btn-hover-bg: #1eb0a8;
    --bs-btn-hover-border-color: #1eb0a8;
    --bs-btn-active-bg: #1eb0a8;
}
.btn-outline-success {
    --bs-btn-color: #14887f;
    --bs-btn-border-color: #b7e9e5;
    --bs-btn-hover-bg: var(--ams-accent);
    --bs-btn-hover-border-color: var(--ams-accent);
}

/* ===== 폼 ===== */
.form-control, .form-select {
    border-radius: var(--ams-radius-sm);
    border-color: var(--ams-border);
    font-size: .875rem;
    color: var(--ams-text);
}
.form-control:focus, .form-select:focus {
    border-color: #b9bdea;
    box-shadow: 0 0 0 3px rgba(63, 67, 160, .12);
}
.form-label { font-size: .8125rem; font-weight: 600; color: #5b6076; margin-bottom: .3125rem; }
.form-text { font-size: .75rem; color: var(--ams-muted); }
.form-check-input:checked { background-color: var(--ams-primary); border-color: var(--ams-primary); }
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(63, 67, 160, .12); border-color: #b9bdea; }

/* ===== 테이블 ===== */
.table { --bs-table-color: var(--ams-text); font-size: .875rem; margin-bottom: 0; }
.table > thead th {
    background: #fafbfe;
    color: #6b7085;
    font-size: .8125rem;
    font-weight: 700;
    border-bottom: 1px solid var(--ams-border);
    white-space: nowrap;
}
.table > tbody > tr > td { border-color: #f1f2f8; vertical-align: middle; }
.table-hover > tbody > tr:hover > * { background: #fafbff; }
.ams-table-card { overflow: hidden; }
.ams-table-card .table > :not(caption) > * > * { padding: .625rem .75rem; }

/* 공통 목록 페이징 (ams-paging.js) — 표 아래 한 줄 */
.ams-paging {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .625rem;
}
.ams-paging:empty { display: none; }
.ams-paging-info { color: var(--ams-muted, #6b7280); font-size: .8125rem; }
.ams-paging-btns { display: flex; align-items: center; gap: .25rem; margin-left: auto; flex-wrap: wrap; }
.ams-paging-btns .btn { min-width: 2.25rem; }
.ams-paging-gap { color: var(--ams-muted, #6b7280); padding: 0 .125rem; }
@media (max-width: 767px) {
    .ams-paging-btns { margin-left: 0; }
}

/* 참조 UI처럼 첫 컬럼 값을 옅은 테두리 pill로 */
.ams-cell-chip {
    display: inline-block;
    border: 1px solid var(--ams-border);
    border-radius: 999px;
    padding: .1875rem .625rem;
    background: #fff;
    font-size: .8125rem;
    font-weight: 600;
}

/* ===== 배지 (파스텔) ===== */
.ams-badge {
    display: inline-block;
    padding: .1875rem .5rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    background: #eef0f6;
    color: #5b6076;
}
/* 자산 상태 (코드를 클래스로 그대로 사용 — 화면·그리드 양쪽에서 같은 색을 쓴다) */
.ams-badge.st-IN_USE       { background: #e2f7f5; color: #12867e; }
.ams-badge.st-IN_STOCK     { background: #e8f1ff; color: #2f6dc4; }
.ams-badge.st-REPAIRING    { background: #fff1de; color: #b4711a; }
.ams-badge.st-FORMAT_WAIT  { background: #e9f6fb; color: #2a7d99; }
.ams-badge.st-FORMATTED    { background: #e9f6fb; color: #2a7d99; }
/* 정렬 가능한 표 머리글 */
.ams-sort-link { color: inherit; text-decoration: none; white-space: nowrap; }
.ams-sort-link:hover { color: var(--ams-primary); text-decoration: underline; }

/* 목록 셀 안의 제목 링크 — 기본 링크의 파란색·밑줄 대신 본문색 + 굵게, 눌릴 수 있음은 hover로 알린다 */
.ams-cell-link { color: inherit; font-weight: 600; text-decoration: none; }
.ams-cell-link:hover { color: var(--ams-primary); text-decoration: underline; }

/* 인사 이벤트 유형 배지 (입사·퇴사·휴직·복직) */
.ams-badge.hr-JOIN          { background: #e4f2e8; color: #2f6b45; }
.ams-badge.hr-LEAVE         { background: #fbe6e6; color: #8c3a3a; }
.ams-badge.hr-LEAVE_ABSENCE { background: #fdf1dc; color: #8a6320; }
.ams-badge.hr-RETURN        { background: #e5ecfb; color: #2f4d8c; }

.ams-badge.st-DISPOSE_WAIT { background: #f0f1f5; color: #6b7085; }
.ams-badge.st-DISPOSED     { background: #e6e7ec; color: #565b70; }
.ams-badge.st-BROKEN       { background: #ffe9ef; color: #c23e63; }
.ams-badge.st-UNKNOWN      { background: #fff6d9; color: #97721a; }
/* 상태 코드와 무관한 일반 톤 (사용여부·강조 표시 등) */
.ams-badge.is-on   { background: #e2f7f5; color: #12867e; }
.ams-badge.is-off  { background: #f0f1f5; color: #6b7085; }
.ams-badge.is-info { background: #e8f1ff; color: #2f6dc4; }
.ams-badge.is-warn { background: #fff6d9; color: #97721a; }
/* 역할 */
/* 임시출입증 상태 (PASS_STATUS) */
.ams-badge.pass-KEEP      { background: #e8f1ff; color: #2f6dc4; }
.ams-badge.pass-LENT      { background: #e2f7f5; color: #12867e; }
.ams-badge.pass-LOST      { background: #ffe9ef; color: #c23e63; }
.ams-badge.pass-DISCARDED { background: #f0f1f5; color: #6b7085; }

/* 폭이 정해진 칸(메모 등)은 넘치면 말줄임한다 — 전문은 title(마우스 올림)과 이력에서 본다 */
.ams-cell-clip > span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== 좁은 화면: 표를 가로로 밀지 않고 세로로 쌓는다 (FR-35) =====
   컬럼이 많은 표를 모바일에서 그대로 두면 **오른쪽 끝의 [수정]·[반납] 버튼을 쓰려고 스와이프**해야 한다.
   한 줄이 두꺼워지더라도 가로 스크롤이 없는 편이 낫다 — 세로 스크롤은 어차피 한다.
   머리글이 사라지므로 각 칸이 자기 이름표를 달고 나온다 (td의 data-label). */
@media (max-width: 767.98px) {
    .ams-stack-wrap { overflow-x: visible; }
    .ams-stack thead { display: none; }
    .ams-stack, .ams-stack tbody { display: block; width: 100%; }
    /* 행은 카드처럼, 칸은 라벨+값 쌍으로 **한 줄에 여러 개** 흐른다 (2026-09-02 요청) —
       칸마다 한 줄(display:block)을 주면 행 하나가 화면 하나를 다 먹는다 */
    .ams-stack tr {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: .875rem;
        row-gap: .125rem;
        padding: .5rem .25rem;
        border-bottom: 1px solid var(--ams-border);
    }
    .ams-stack tr:last-child { border-bottom: 0; }
    .ams-stack td {
        display: inline-flex;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: .25rem;
        border: 0 !important;
        padding: .125rem 0 !important;
        width: auto !important;
        max-width: 100% !important;   /* 넓은 화면용 말줄임(text-truncate)을 푼다 */
        white-space: normal !important;
        overflow: visible;
        text-overflow: clip;
        text-align: left !important;  /* 숫자 칸(text-end)도 쌓이면 라벨 뒤에 붙는다 */
    }
    /* 현황 화면은 데스크탑에서만 '한 화면'을 지킨다 — 좁은 화면에서는 페이지가 그냥 흐르게 둔다 */
    .ams-dash-scroll { max-height: none; }
    /* 쌓인 화면에서는 가로 폭이 넉넉하므로 말줄임을 푼다 */
    .ams-stack .ams-cell-clip > span { white-space: normal; overflow: visible; }
    /* 값이 없는 칸은 줄만 차지하므로 접는다 */
    .ams-stack td:empty { display: none; }
    .ams-stack td[data-label]::before {
        content: attr(data-label);
        color: var(--ams-muted);
        font-size: .75rem;
        font-weight: 700;
    }
    /* 첫 칸(명칭)은 제목처럼 줄 전체를, 버튼 줄도 전체 폭을 쓴다 */
    .ams-stack td.ams-stack-head { flex-basis: 100%; font-weight: 700; padding-top: .25rem !important; }
    .ams-stack td.ams-stack-actions { flex-basis: 100%; text-align: left !important; padding-top: .375rem !important; }
    .ams-stack td.ams-stack-actions .btn { margin: 0 .25rem .25rem 0; }
    .ams-stack td.ams-stack-actions::before { content: none; }
}

/* ===== 집계 타일 · 미니 목록 (출입증 현황 화면) =====
   이 화면은 **데스크탑에서 스크롤 없이 한 페이지**에 들어가야 한다 (2026-08-27 요청).
   그래서 타일·행 간격을 좁게 잡고, 길어지는 표는 페이지가 아니라 카드 안에서 스크롤한다.
   상태 색은 배지와 같은 파스텔을 쓴다 — 같은 상태가 화면마다 다른 색이면 안 된다. */
.ams-dash { padding: .75rem 1rem; }
.ams-dash .ams-page-title { font-size: 1.0625rem; }

.ams-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: .5rem;
}
.ams-stat {
    display: block;
    padding: .5rem .625rem;
    background: var(--ams-surface);
    border: 1px solid var(--ams-border);
    border-radius: var(--ams-radius-sm);
    box-shadow: var(--ams-shadow);
    color: var(--ams-text);
    text-decoration: none;
}
a.ams-stat:hover { border-color: var(--ams-primary); color: var(--ams-text); }
.ams-stat .ams-stat-label {
    display: block;
    font-size: .75rem;
    color: var(--ams-muted);
    font-weight: 600;
    white-space: nowrap;
}
.ams-stat .ams-stat-value { display: block; font-size: 1.375rem; font-weight: 700; line-height: 1.25; }
.ams-stat.pass-KEEP      .ams-stat-value { color: #2f6dc4; }
.ams-stat.pass-LENT      .ams-stat-value { color: #12867e; }
.ams-stat.pass-LOST      .ams-stat-value { color: #c23e63; }
.ams-stat.pass-DISCARDED .ams-stat-value { color: #6b7085; }
/* 회수 지표는 상태가 아니라 '할 일'이라 색을 따로 준다 (0건이면 강조하지 않는다) */
.ams-stat.is-due { background: #fcfcfe; }
.ams-stat.is-alert { border-color: #f0c36b; background: #fff8e8; }
.ams-stat.is-alert .ams-stat-value { color: #97721a; }

/* 항목이 많은 집계(구분별)는 두 칸으로 접는다 — 세로로 길어지면 한 화면에 안 들어간다 */
.ams-mini-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--ams-border);
    border-top: 1px solid var(--ams-border);
}
.ams-mini-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    padding: .375rem .625rem;
    background: var(--ams-surface);
    color: var(--ams-text);
    text-decoration: none;
    font-size: .8125rem;
}
a.ams-mini-row:hover { background: #fafbff; color: var(--ams-primary); }
/* 좁은 칸에서 구분 이름이 줄바꿈되지 않고 말줄임되게 — flex 항목은 min-width를 풀어줘야 줄어든다 */
.ams-mini-row > span { min-width: 0; }
.ams-mini-row > b { flex: 0 0 auto; }
.ams-mini-row.is-zero { color: var(--ams-muted); }

/* 자산 현황의 축 목록(상태·유형·부서·연도) — `이름 · 막대 · 건수` 한 줄.
   막대는 '가장 많은 칸 대비'이므로 절대량이 아니라 비중을 읽는 것이다 — 그래서 숫자를 함께 적는다.
   자산은 축의 항목이 많아(유형 10여 개, 부서 80여 개) 두 칸으로 접지 않고 한 칸에 쌓고
   카드 안에서 스크롤한다 — 두 칸이면 '많은 순'으로 읽히지 않는다. */
.ams-axis { border-top: 1px solid var(--ams-border); }
.ams-axis-row {
    display: grid;
    grid-template-columns: minmax(0, 7rem) 1fr auto;
    align-items: center;
    gap: .5rem;
    padding: .3125rem .625rem;
    border-bottom: 1px solid var(--ams-border);
    background: var(--ams-surface);
    color: var(--ams-text);
    text-decoration: none;
    font-size: .8125rem;
}
a.ams-axis-row:hover { background: #fafbff; color: var(--ams-primary); }
.ams-axis-row > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ams-axis-row > b { font-variant-numeric: tabular-nums; }
.ams-axis-bar { height: .375rem; border-radius: 999px; background: #eef0f6; overflow: hidden; }
.ams-axis-bar > i { display: block; height: 100%; background: var(--ams-primary); opacity: .5; }
.ams-axis-row.is-zero { color: var(--ams-muted); }
.ams-axis-row.is-zero .ams-axis-bar > i { background: var(--ams-border); }

/* 자산 상태 타일 색은 상태 배지와 같은 계열을 쓴다 — 같은 상태가 화면마다 다른 색이면 안 된다 */
.ams-stat.ast-IN_USE       .ams-stat-value { color: #12867e; }
.ams-stat.ast-IN_STOCK     .ams-stat-value { color: #2f6dc4; }
.ams-stat.ast-DISPOSE_WAIT .ams-stat-value { color: #6b7085; }

/* 지문등록 현황의 상태 타일 — 목록의 상태 배지와 같은 계열을 쓴다 */
.ams-stat.fp-current .ams-stat-value { color: #2f6dc4; }
.ams-stat.fp-inuse   .ams-stat-value { color: #12867e; }
.ams-stat.fp-removed .ams-stat-value { color: #6b7085; }

/* 값 옆에 붙는 복사 버튼 — 눌렀다는 것이 보여야 한다(누른 뒤 잠깐 ✓로 바뀐다).
   표 안에서 자리를 거의 차지하지 않게 작게 둔다 */
.ams-copy {
    border: 1px solid var(--ams-border);
    background: var(--ams-surface);
    color: var(--ams-muted);
    border-radius: var(--ams-radius-sm);
    font-size: .75rem;
    line-height: 1;
    padding: .125rem .3125rem;
    margin-left: .25rem;
    cursor: pointer;
}
.ams-copy:hover { border-color: var(--ams-primary); color: var(--ams-primary); }
.ams-copy.is-done { border-color: #12867e; color: #12867e; }

/* 표는 카드 안에서 스크롤한다 — 페이지가 스크롤되면 위 요약이 화면 밖으로 나간다 */
.ams-dash-scroll { max-height: calc(100vh - 320px); min-height: 140px; overflow: auto; }
/* 축 카드가 여러 줄로 놓이는 화면(자산 현황)은 카드마다 낮게 잡는다 — 한 카드가 화면을 다 먹으면
   아래 '회수 대상'이 스크롤 밖으로 나가 보이지 않는다 */
.ams-dash-scroll.is-short { max-height: 15rem; min-height: 0; }
.ams-dash-scroll thead th { position: sticky; top: 0; background: var(--ams-surface); z-index: 1; }

.ams-badge.role-ADMIN   { background: #ffe9ef; color: #c23e63; }
.ams-badge.role-MANAGER { background: #eef0fc; color: #464ba6; }
.ams-badge.role-VIEWER  { background: #eef0f6; color: #5b6076; }
/* 유형 */
.ams-badge.ams-badge-type { background: #f4f0ff; color: #6b48b8; }

/* ===== 알림 ===== */
.alert { border-radius: var(--ams-radius-sm); border: 1px solid transparent; font-size: .875rem; }
.alert-success   { background: #e2f7f5; border-color: #c3ece8; color: #0f7d75; }
.alert-danger    { background: #ffeef2; border-color: #ffd4de; color: #b6355a; }
.alert-secondary { background: #f2f3f9; border-color: var(--ams-border); color: #5b6076; }

/* ===== 정의 목록 (상세 화면) ===== */
.dl-inline dt { font-weight: 600; color: var(--ams-muted); font-size: .8125rem; }
.dl-inline dd { margin-bottom: .75rem; font-size: .875rem; }

/* ===== 이력 타임라인 ===== */
.timeline { list-style: none; padding-left: .25rem; margin: 0; }
.timeline > li {
    position: relative;
    border-left: 2px solid var(--ams-border);
    padding: 0 0 1rem 1.125rem;
    margin-left: .25rem;
}
.timeline > li::before {
    content: "";
    position: absolute; left: -5px; top: .3125rem;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--ams-accent);
    box-shadow: 0 0 0 3px #e2f7f5;
}
.timeline > li:last-child { border-left-color: transparent; }

/* ===== Tabulator 테마 ===== */
.tabulator {
    background: var(--ams-surface);
    border: 1px solid var(--ams-border);
    border-radius: var(--ams-radius);
    box-shadow: var(--ams-shadow);
    font-size: .8125rem;
    overflow: hidden;
}
.tabulator .tabulator-header {
    background: #fafbfe;
    border-bottom: 1px solid var(--ams-border);
    color: #6b7085;
    font-weight: 700;
}
.tabulator .tabulator-header .tabulator-col {
    background: transparent;
    border-right: none;
}
.tabulator .tabulator-row { border-bottom: 1px solid #f1f2f8; }
.tabulator .tabulator-row.tabulator-row-even { background: var(--ams-surface); }
.tabulator .tabulator-row:hover { background: #fafbff !important; }
.tabulator .tabulator-row .tabulator-cell { border-right: none; padding: .5rem .625rem; }
.tabulator .tabulator-footer {
    background: var(--ams-surface);
    border-top: 1px solid var(--ams-border);
    color: var(--ams-muted);
}
.tabulator .tabulator-footer .tabulator-page {
    border-radius: 7px;
    border-color: var(--ams-border);
    color: var(--ams-text);
}
.tabulator .tabulator-footer .tabulator-page.active {
    background: var(--ams-primary);
    border-color: var(--ams-primary);
    color: #fff;
}
.tabulator .tabulator-cell a { color: var(--ams-primary); font-weight: 700; text-decoration: none; }
.tabulator .tabulator-cell a:hover { text-decoration: underline; }

/* ===== 모바일 ===== */
.ams-sidebar-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(24, 27, 48, .35);
    z-index: 1030;
}
@media (max-width: 991.98px) {
    .ams-sidebar {
        position: fixed;
        top: 0; bottom: 0; left: 0;
        z-index: 1040;
        transform: translateX(-100%);
        transition: transform .18s ease-out;
        box-shadow: var(--ams-shadow);
    }
    body.ams-sidebar-open .ams-sidebar { transform: translateX(0); }
    body.ams-sidebar-open .ams-sidebar-backdrop { display: block; }
    .ams-content { padding: .875rem; }
    .ams-page-title { font-size: 1rem; }
}
@media (min-width: 992px) {
    .ams-sidebar-toggle { display: none; }
}

/* ── 부서 트리 (사원정보 화면) ─────────────────────────────── */
.ams-tree-card { overflow: hidden; }

.ams-tree {
    max-height: 520px;
    overflow: auto;
    padding: .25rem 0 .5rem;
}

.ams-tree-row {
    display: flex;
    align-items: center;
    gap: .375rem;
    padding: .3125rem .5rem;
    cursor: pointer;
    border-radius: var(--ams-radius-sm);
    font-size: .875rem;
    color: var(--ams-text);
}
.ams-tree-row:hover { background: var(--ams-bg); }

/* 선택된 부서 — 오른쪽 목록이 이 부서 기준으로 조회된다 */
.ams-tree-row.is-active {
    background: var(--ams-primary-soft);
    color: var(--ams-primary);
    font-weight: 600;
}

/* 검색으로 이동한 부서 — 선택과 구분되는 일시적 강조 */
.ams-tree-row.is-hit { box-shadow: inset 0 0 0 1.5px var(--ams-accent); }

/* 폐지된 부서(사원 이력 때문에 남아 있는 노드) */
.ams-tree-row.is-closed .ams-tree-name { color: var(--ams-muted); }

.ams-tree-toggle {
    flex: 0 0 12px;
    width: 12px;
    font-size: .625rem;
    color: var(--ams-muted);
    text-align: center;
    user-select: none;
}
.ams-tree-toggle.is-leaf { cursor: default; }

.ams-tree-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ams-tree-count {
    flex: 0 0 auto;
    min-width: 1.75rem;
    text-align: right;
    font-size: .75rem;
    color: var(--ams-muted);
    font-variant-numeric: tabular-nums;
}

/* ── 팝업 모드 (별도 창으로 띄우는 화면) ───────────────────── */
/* 사이드바 없이 내용만 — 좁은 창에서 여백을 줄이고 표를 촘촘하게 */
body.ams-popup { background: var(--ams-surface); }
.ams-popup-shell { min-height: 100vh; }
.ams-popup .ams-page-head { margin-bottom: .75rem; }
.ams-popup .card { box-shadow: none; }
.ams-popup .ams-tree { max-height: 320px; }

/* ── 탭 + 도구 한 줄 (일감 화면) ───────────────────────────── */
/* 탭 줄이 제목 줄을 겸한다. 도구는 오른쪽에 붙이고 줄바꿈되지 않게 폭을 조인다 */
.ams-tabs { border-bottom: 1px solid var(--ams-border); }
.ams-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--ams-muted);
    font-weight: 600;
    font-size: .9375rem;
    padding: .375rem .75rem;
}
.ams-tabs .nav-link:hover { color: var(--ams-text); }
.ams-tabs .nav-link.active {
    color: var(--ams-primary);
    background: transparent;
    border-bottom-color: var(--ams-primary);
}

.ams-tabs-tools {
    display: flex;
    align-items: center;
    gap: .25rem;
    padding-bottom: .25rem;
    flex-wrap: nowrap;
}
.ams-tabs-tools .form-control { width: 150px; }
.ams-tabs-tools .btn { white-space: nowrap; padding-inline: .5rem; }

/* 좁은 팝업에서는 검색창을 더 줄여 한 줄을 유지한다 */
@media (max-width: 1200px) {
    .ams-tabs-tools .form-control { width: 110px; }
}

/* GW 문서 팝업 — SFTP로 읽어온 본문 HTML (2026-10-09). 본문이 자체 인라인 스타일을 쓰므로 최소만 손댄다. */
.ams-gw-body { font-size: 12px; line-height: 1.5; }
.ams-gw-body img { max-width: 100%; height: auto; }
.ams-gw-body table { max-width: 100%; }