/* ==========================================================================
   ADMIN MOBILE — 관리자 화면(/admin/*) 폰 모양 (≤768px)
   spec docs/superpowers/specs/2026-09-25-admin-mobile-design.md
   규칙: 전부 아래 미디어 질의 안이다 — 데스크톱(>768px)에는 아무것도 닿지 않는다.
   카드 표는 m-cards 를 단 표에만, 머리줄·타일·툴바·탭·필터는 관리자 사이드바가
   있는 화면에만(§1.8 — .page-header 는 관리자 밖 화면도 쓴다).
   ========================================================================== */
@media screen and (max-width: 768px), screen and (pointer: coarse) and (max-height: 500px) and (max-width: 1000px) {
    /* ── 카드 표 (§1.1) ─────────────────────────────────────────────────────
       행 하나 = 카드 하나. 라벨은 서버가 쓴 td[data-label] 이고, 값은 라벨 폭만큼
       비운 왼쪽 여백 안에서 그냥 흐른다 — 격자로 두면 "배지 + 맨 텍스트" 같은
       셀에서 텍스트가 라벨 열로 흘러내린다(Review Focus 2).
       display 에는 !important 를 쓰지 않는다: 일괄 편집 열의 인라인
       style="display:none" 이 그대로 이겨야 한다(Review Focus 1). */
    table.m-cards { display: block; width: 100%; min-width: 0 !important; border: 0; }
    table.m-cards > thead { display: none; }
    table.m-cards > tbody, table.m-cards > tfoot { display: block; }
    table.m-cards tr { display: block; position: relative; margin: 0 0 var(--space-2); padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
    table.m-cards tbody tr:hover { background: var(--color-surface); }
    table.m-cards td { display: block; min-width: 0; max-width: none; padding: 3px 0; border: 0; text-align: left !important; white-space: normal; overflow-wrap: anywhere; }
    /* 라벨은 왼쪽 여백(96px)에 매단 float 이다 — 긴 라벨도 줄바꿈해 끝까지 보이고(폰에는 hover 가 없어
       말줄임표 뒤를 읽을 길이 없다), flow-root 인 칸이 라벨 높이까지 품어 다음 줄과 겹치지 않는다.
       px 인 이유: em 은 라벨(12px)과 칸(인라인 font-size 가 붙은 칸도 있다)에서 따로 풀려 줄이 어긋났다. */
    table.m-cards td[data-label] { display: flow-root; padding-left: 96px; }
    table.m-cards td[data-label]::before { content: attr(data-label); float: left; width: 88px; margin-left: -96px; font-size: var(--text-xs); line-height: 1.75; color: var(--color-text-secondary); white-space: normal; overflow-wrap: anywhere; }
    table.m-cards td.m-card-title { padding: 0 0 4px; font-weight: var(--font-semibold); }
    table.m-cards tr:has(> td.m-card-check) > td.m-card-title { padding-right: 36px; }
    table.m-cards td.m-card-check { position: absolute; top: 8px; right: 8px; padding: 0; }
    table.m-cards td.m-card-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--color-border); }
    table.m-cards td.m-card-actions > :is(div, span) { flex-wrap: wrap; justify-content: flex-end; }
    /* 동작이 하나도 없는 줄은 위 테두리째 걷는다(이월 1 — 취소된 발령·일치한 그룹 동기화 행) */
    table.m-cards td.m-card-actions:not(:has(*)) { display: none; }
    table.m-cards tr:has(> td[colspan]:only-child) { padding: 0; border: 0; background: none; }
    table.m-cards td[colspan] { text-align: center !important; }
    /* 표 안의 입력칸 (spec §4): 입력칸을 품은 칸은 라벨을 위에, 입력칸을 한 줄 전체로 —
       라벨 열 옆에 두면 입력칸이 카드의 반쪽만 쓴다. */
    table.m-cards td[data-label]:has(> :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea)) { padding-left: 0; }
    table.m-cards td[data-label]:has(> :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea))::before { float: none; display: block; width: auto; margin: 0 0 2px; }
    table.m-cards td[data-label] :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { width: 100% !important; max-width: 100%; }
    /* 감싸개의 가로 스크롤을 푼다 — 인라인 style="overflow-x:auto" 도 이겨야 하고,
       한 축만 visible 이면 계산값이 auto 로 되돌아가므로 두 축을 함께 (Review Focus 3). */
    /* 높이를 제한한 상자(LDAP 비밀번호 일괄 초기화 목록의 max-height:300px)는 제 스크롤을 지킨다 —
       풀면 카드가 상자 밖으로 흘러 카드의 overflow:hidden 에 잘려 아래 사람을 고를 수 없다(최종 리뷰 #1). */
    :is(div, section):has(> table.m-cards):not([style*="max-height"]) { overflow: visible !important; }
    /* 인사발령 이력의 전 → 후 줄: admin-appointments.css 의 nowrap 한 줄은 카드 폭을 넘어 잘린다 (#3) */
    table.m-cards td.appt-changes .appt-change { display: block; white-space: normal; }
    /* 폰에서만 서는 대체 조작(이월 2): 머리글이 숨어 사라진 전체 선택·정렬 */
    button.m-only.m-bulk-select-all { display: inline-flex; margin-top: 6px; }
    label.m-only.report-sort-phone { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--color-text-secondary); }
    .report-sort-phone select { flex: 1 1 auto; min-width: 0; }

    /* ── 코드·주소 (§1.7) ── */
    .dashboard-container:has(#adminSidebar[data-sidebar="admin"]) main.admin-main :is(code, pre) { overflow-wrap: anywhere; word-break: break-word; }
    .dashboard-container:has(#adminSidebar[data-sidebar="admin"]) main.admin-main pre { white-space: pre-wrap; }

    /* ── 넘치던 조각들 (§2.3 포함 — 관리 화면이면 사이드바 종류와 무관) ──
       ERP 설정 카드 제목 안의 긴 안내(erp.css 가 폰에서 제목을 nowrap 으로 둔다),
       범위 달력(한 달 238px + 양옆 ‹ › 가 360px 폭을 넘는다). */
    /* 범위는 그 화면만 — main.admin-main 은 모듈 화면 쉰 넷도 쓴다(ERP 문서의 줄 안내를 되살리던 것, #4) */
    main.admin-main:has(#erpSettings) .crm-card-title .form-hint { display: block; white-space: normal; overflow-wrap: anywhere; }
    .act-range { display: block; width: 100%; }
    .act-range .rp { display: flex; width: 100%; box-sizing: border-box; }
    .act-range .rp-bar { width: 100%; min-width: 0; }
    .act-range .rp-months { flex: 1 1 0; min-width: 0; }
    .act-range .rp-month { width: auto; flex: 1 1 0; min-width: 0; }
    .act-range .rp-nav { padding: 2px 4px; }
    /* 요약 실행 줄: 버튼 옆의 안내가 길면 다음 줄로 (버튼 글자가 잘리지 않게) */
    .act-form-actions { flex-wrap: wrap; }
    .act-form-actions > .btn { flex: 0 0 auto; }

    /* ── 머리줄 (§1.3) — 관리자 사이드바 화면만 ── */
    .dashboard-container:has(#adminSidebar[data-sidebar="admin"]) .page-header { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--space-2); margin-bottom: var(--space-4); text-align: left; }
    .dashboard-container:has(#adminSidebar[data-sidebar="admin"]) .page-header > * { max-width: 100%; }
    .dashboard-container:has(#adminSidebar[data-sidebar="admin"]) .page-header :is(.page-header-content, .page-title, .page-description, .page-subtitle) { text-align: left; }
    .dashboard-container:has(#adminSidebar[data-sidebar="admin"]) .page-header .page-title { font-size: 20px; margin: 0; }
    .dashboard-container:has(#adminSidebar[data-sidebar="admin"]) .page-header .page-title svg { width: 20px; height: 20px; }
    .dashboard-container:has(#adminSidebar[data-sidebar="admin"]) .page-header :is(.page-description, .page-subtitle) { font-size: 13px; margin: 0; }
    .dashboard-container:has(#adminSidebar[data-sidebar="admin"]) .page-header :is(.btn, .page-actions) { width: auto; align-self: flex-start; }
    .dashboard-container:has(#adminSidebar[data-sidebar="admin"]) .page-header .page-actions .btn { flex: 0 0 auto; }

    /* ── 요약 타일 (§1.2) ── */
    .dashboard-container:has(#adminSidebar[data-sidebar="admin"]) .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin-bottom: var(--space-4); }
    .dashboard-container:has(#adminSidebar[data-sidebar="admin"]) .stat-card { padding: var(--space-3); min-width: 0; }
    .dashboard-container:has(#adminSidebar[data-sidebar="admin"]) .stat-card:only-child { grid-column: 1 / -1; }
    .dashboard-container:has(#adminSidebar[data-sidebar="admin"]) .stat-card:hover { transform: none; }
    .dashboard-container:has(#adminSidebar[data-sidebar="admin"]) .stat-icon { width: 32px; height: 32px; margin-bottom: var(--space-2); }
    .dashboard-container:has(#adminSidebar[data-sidebar="admin"]) .stat-value { font-size: 20px; }
    .dashboard-container:has(#adminSidebar[data-sidebar="admin"]) .stat-label { font-size: var(--text-xs); }

    /* ── 툴바·버튼 줄 (§1.4) ── */
    /* layout.css 의 ≤768px 규칙이 .card-header 를 가운데 정렬 세로 줄로 만든다 — 관리자 화면은
       머리줄처럼 왼쪽: 제목 왼쪽 · 배지·버튼 오른쪽, 좁으면 다음 줄로. */
    .dashboard-container:has(#adminSidebar[data-sidebar="admin"]) .card-header { flex-direction: row; justify-content: space-between; align-items: center; text-align: left; }
    .dashboard-container:has(#adminSidebar[data-sidebar="admin"]) :is(.section-header, .card-header) { flex-wrap: wrap; gap: var(--space-2); }
    .dashboard-container:has(#adminSidebar[data-sidebar="admin"]) :is(.section-header, .card-header) > :is(div, form) { flex-wrap: wrap; min-width: 0; max-width: 100%; }

    /* 사용자 목록 검색칸: 데스크톱 인라인 폭 200px 을 폰에서 한 줄 전체로 */
    .dashboard-container:has(#adminSidebar[data-sidebar="admin"]) #userSearchInput { width: 100% !important; }
    .dashboard-container:has(#adminSidebar[data-sidebar="admin"]) .filter-bar > div > div:has(> #userSearchInput) { flex: 1 1 100%; }

    /* ── 탭 (§1.5): 한 줄 가로 스크롤, 세로 글자 없음 ── */
    .dashboard-container:has(#adminSidebar[data-sidebar="admin"]) :is(.ip-tab-nav, .tabs, .mcp-tabs) { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .dashboard-container:has(#adminSidebar[data-sidebar="admin"]) :is(.ip-tab-nav, .tabs, .mcp-tabs)::-webkit-scrollbar { display: none; }
    .dashboard-container:has(#adminSidebar[data-sidebar="admin"]) :is(.ip-tab-item, .tab-btn) { flex: 0 0 auto; white-space: nowrap; padding: 10px 14px; }

    /* ── 필터 접기 (§1.6): details[data-m-fold] 의 요약 줄 ── */
    .dashboard-container:has(#adminSidebar[data-sidebar="admin"]) details[data-m-fold] > summary.adm-fold-summary { padding: 0 var(--space-4); }
    /* 접는 필터 카드의 머리줄(제목 · 초기화)은 요약 줄과 겹치므로 폰에서 걷는다 —
       초기화는 필터가 걸렸을 때 적용 버튼 옆의 .m-only 링크가 맡는다. */
    .dashboard-container:has(#adminSidebar[data-sidebar="admin"]) form:has(> details[data-m-fold]) > .card-header { display: none !important; } /* 인라인 display:flex 를 이겨야 한다 (#2) */
}