/* Bizeni - Standard Fluent UI Base Styles */

:root {
    /* UI 본문: Pretendard 우선, 미지원 문자는 Noto Sans 로케일별 폴백 → 시스템 sans */
    --bizeni-font-family: 'Pretendard', 'Noto Sans KR', 'Noto Sans JP', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Vietnamese', 'Noto Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Basic Brand Colors (kept for branding but using Fluent tokens where possible) */
    --bizeni-ci-blue: #004494;
    --accent-fill-rest: var(--bizeni-ci-blue);
    --bizeni-shell-header-h: 50px;
    --bizeni-shell-footer-h: 1.375rem;
    --bizeni-page-action-footer-h: 3.25rem;
}

.bizeni-shell-no-footer {
    --bizeni-shell-footer-h: 0px;
}

/* 전역 앱 셸 Footer — 연한 톤·낮은 높이, 본문과는 상단선으로만 구분 */
.bizeni-app-shell-footer.footer {
    flex-shrink: 0;
    min-height: var(--bizeni-shell-footer-h);
    box-sizing: border-box;
    padding: 0.125rem 1rem 0.15rem;
    padding-bottom: max(0.15rem, env(safe-area-inset-bottom, 0));
    margin: 0;
    position: relative;
    z-index: 24;
    background: color-mix(in srgb, var(--neutral-layer-2) 45%, var(--neutral-layer-1));
    color: var(--neutral-foreground-hint);
    border-top: 1px solid color-mix(in srgb, var(--neutral-stroke-divider-rest) 65%, transparent);
    box-shadow: none;
    font-size: var(--type-ramp-minus-2-font-size, 0.6875rem);
    line-height: 1.15;
    letter-spacing: 0.01em;
}

@supports not (background: color-mix(in srgb, white 50%, black)) {
    .bizeni-app-shell-footer.footer {
        background: var(--neutral-layer-1);
        border-top-color: var(--neutral-stroke-divider-rest);
    }
}

.bizeni-app-shell-footer__copy,
.bizeni-app-shell-footer__version {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bizeni-app-shell-footer__version {
    font-variant-numeric: tabular-nums;
    opacity: 0.8;
}

.bizeni-app-shell-footer__copy {
    opacity: 0.85;
}

@media print {
    .bizeni-app-shell-footer {
        display: none !important;
    }
}

body {
    margin: 0;
    font-family: var(--bizeni-font-family);
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
}

/* Ensure Fluent Layout takes full height */
#app {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* 테넌트 포털 AccentColor — 상단 FluentHeader·전역 accent 토큰 */
.bizeni-shell--tenant-branded > fluent-header.bizeni-shell-header--branded,
fluent-header.bizeni-shell-header--branded {
    background: var(--bizeni-tenant-header-bg) !important;
    color: var(--bizeni-tenant-header-fg);
    border-bottom: 1px solid color-mix(in srgb, var(--bizeni-tenant-header-fg) 18%, transparent);
}

.bizeni-shell-header--branded fluent-button,
.bizeni-shell-header--branded fluent-anchor,
.bizeni-shell-header--branded fluent-button::part(control),
.bizeni-shell-header--branded fluent-anchor::part(control) {
    color: var(--bizeni-tenant-header-fg);
    --neutral-foreground-rest: var(--bizeni-tenant-header-fg);
    --neutral-foreground-hover: var(--bizeni-tenant-header-fg);
}

.bizeni-shell-header--branded fluent-button:hover,
.bizeni-shell-header--branded fluent-anchor:hover {
    background: color-mix(in srgb, var(--bizeni-tenant-header-fg) 14%, transparent);
}

@supports not (background: color-mix(in srgb, white 50%, black)) {
    .bizeni-shell-header--branded fluent-button:hover,
    .bizeni-shell-header--branded fluent-anchor:hover {
        background: rgba(255, 255, 255, 0.12);
    }
}

.bizeni-shell-header--branded fluent-icon {
    fill: currentColor;
}

.bizeni-shell-header--branded .bizeni-shell-header__search {
    --neutral-fill-rest: var(--neutral-layer-1);
    --neutral-fill-hover: var(--neutral-layer-2);
}

/* 헤더 워크스페이스 드롭다운 — 테넌트 스위처와 동일 패턴, 좁은 화면에서 라벨 말줄임 */
.bizeni-workspace-switcher-btn {
    max-width: 11.5rem;
    flex-shrink: 0;
}

.bizeni-workspace-switcher-btn__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .bizeni-workspace-switcher-btn {
        max-width: 7.5rem;
    }
}

/* 본문·관리자 그리드: flex 자식 min-width 0 — 넓은 DataGrid가 뷰포트 밖으로 잘리지 않게 */
.bizeni-main-body-content {
    min-width: 0;
    flex: 1 1 0;
}

#main-content {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* AdminTenants 등: min-width:max-content 그리드는 카드 안에서 가로 스크롤 */
.data-grid-card.data-grid-card--mobile-contained {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

/* 공개 셸(로그인·가입 대기 등) — MainLayout 비인증 분기와 동일한 중앙 정렬·카드 폭 */
.bizeni-public-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--neutral-layer-2);
    padding: 1rem;
    box-sizing: border-box;
}

.bizeni-public-layout__content {
    width: 100%;
    max-width: 480px;
}

/* ResponsiveDualView 및 목록 툴바와 동일 브레이크포인트(≥769px 데스크톱) */
@media (max-width: 768px) {
    .bizeni-show-md-up {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .bizeni-show-sm-only {
        display: none !important;
    }
}

/* Custom styles for specific Bizeni components that don't have a Fluent equivalent yet */
.bizeni-brand-connected-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
}

.bizeni-brand-connected-logo__svg {
    max-width: 240px;
    height: auto;
}

/* ─── 견적 편집(/sales/quotations 편집·직접 URL): 메인 영역 스크롤 + sticky 헤더/푸터 ─── */
.bizeni-quote-edit-page-host {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    padding: 0 1.5rem 1rem 1.5rem;
    min-height: 100%;
}

.bizeni-quote-edit-page-host--standalone {
    padding-top: 0.75rem;
}

.bizeni-quote-edit-page-host .bizeni-quote-detail-root--page {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.bizeni-quote-detail-chrome.bizeni-quote-detail-chrome--page,
.bizeni-order-detail-root--page.bizeni-quote-detail-chrome--page {
    display: flex;
    flex-direction: column;
    min-height: min(100%, calc(100dvh - 7rem));
    /* 테이블 thead sticky 시 Level1 바로 아래 정렬 */
    --bizeni-quote-sticky-context-h: 3.5rem;
}

@media (max-width: 768px) {
    .bizeni-quote-detail-chrome.bizeni-quote-detail-chrome--page,
    .bizeni-order-detail-root--page.bizeni-quote-detail-chrome--page {
        --bizeni-quote-sticky-context-h: 6.5rem;
    }
}

.bizeni-quote-edit-page-host .bizeni-order-detail-root--page {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.bizeni-customer-edit-panel__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    padding-bottom: 0.35rem;
}

/* 서랍·분할·모달: 패널 내부 스크롤 유지 */
.bizeni-customer-edit-panel__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* 전체 페이지: 내부 세로 스크롤 없음 — FluentBodyContent(본문)이 스크롤 */
.bizeni-quote-detail-page-main {
    flex: 1 1 auto;
    min-height: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.bizeni-quote-detail-error-bar {
    margin-bottom: 0.25rem;
}

.bizeni-quote-detail-success-bar {
    margin-bottom: 0.25rem;
}

/* Page 전용: 슬림 Sticky 컨텍스트 바 (번호·상태·고객·합계·액션) */
.bizeni-quote-page-context-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    padding: 0.35rem 0;
    box-sizing: border-box;
}

.bizeni-quote-page-context-bar--sticky {
    position: sticky;
    top: 0;
    z-index: 45;
    margin: 0 0 0.35rem 0;
    padding: 0.4rem 0 0.5rem;
    background: var(--neutral-layer-1);
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.bizeni-quote-page-context-bar__lead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.65rem;
    min-width: 0;
    flex: 1 1 12rem;
}

.bizeni-quote-page-context-bar__back {
    flex-shrink: 0;
}

.bizeni-quote-page-context-bar__doc {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.bizeni-quote-page-context-bar__no {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: var(--type-ramp-base-font-size);
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bizeni-quote-page-context-bar__draft {
    font-size: var(--type-ramp-minus-1-font-size);
    color: var(--neutral-foreground-hint);
}

.bizeni-quote-page-context-bar__cust {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    min-width: 0;
    max-width: min(28rem, 100%);
    font-size: var(--type-ramp-minus-1-font-size);
    color: var(--neutral-foreground-rest);
}

.bizeni-quote-page-context-bar__cust-label {
    flex-shrink: 0;
    color: var(--neutral-foreground-hint);
}

.bizeni-quote-page-context-bar__cust-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.bizeni-quote-page-context-bar__trail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    flex-shrink: 0;
}

.bizeni-quote-page-context-bar__total {
    font-size: var(--type-ramp-minus-1-font-size);
    color: var(--neutral-foreground-rest);
    margin-inline-end: 0.25rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.bizeni-quote-page-context-bar__btn {
    flex-shrink: 0;
}

.bizeni-quote-page-context-bar__btn--primary {
    font-weight: 600;
}

/* Page: 견적 상세(날짜·조건·비고) — sticky 아님 */
.bizeni-quote-detail-meta-scroll {
    margin-top: 0;
}

.bizeni-form-section--quote-header-compact .bizeni-form-section__title {
    margin: 0 0 0.5rem;
    font-size: var(--type-ramp-plus-1-font-size);
}

/* 견적 기본정보 필드: 모바일 1열 · 넓은 화면 2열, 비고는 전폭 */
.bizeni-field-grid--quote-header-compact {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.4rem 1rem;
    align-items: start;
}

@media (min-width: 880px) {
    .bizeni-field-grid--quote-header-compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.bizeni-field-grid--quote-header-compact .bizeni-field--span-full {
    grid-column: 1 / -1;
}

/* 넓은 화면: 상세 3열(권장안 Level 2) */
@media (min-width: 1024px) {
    .bizeni-field-grid--quote-detail-3col {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.bizeni-quote-detail-body--compact-gap {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.bizeni-quote-detail-footer-sticky {
    position: sticky;
    bottom: 0;
    z-index: 40;
    margin-top: 0.75rem;
    padding-top: 0.65rem;
    padding-bottom: env(safe-area-inset-bottom, 0);
    background: var(--neutral-layer-1);
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.06);
}

.bizeni-quote-detail-footer-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    justify-content: space-between;
}

.bizeni-quote-detail-footer-bar__lead {
    min-width: 0;
}

.bizeni-quote-detail-footer-bar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
}

/* Page: 푸터는 인쇄·수주 전환 등 보조만(저장은 상단 바) */
.bizeni-quote-detail-footer--secondary-only .bizeni-quote-detail-footer-bar {
    justify-content: flex-end;
}

.bizeni-quote-detail-footer--secondary-only .bizeni-quote-detail-footer-bar__lead:empty {
    display: none;
}

/* 견적 라인 엑셀: 문서(메인) 스크롤 모드 — 호스트에 세로 스크롤바를 두지 않음 */
.bizeni-quote-lines-excel-grid-host--outer-scroll {
    max-height: none;
    overflow-x: auto;
    overflow-y: visible;
}

/* Level 3: 품목 그리드 열 헤더 — Page 에서 Level1 아래에 고정 */
.bizeni-quote-lines-excel-grid-host--outer-scroll .bizeni-excel-grid__table thead th {
    position: sticky;
    top: var(--bizeni-quote-sticky-context-h, 3.5rem);
    z-index: 28;
    background: var(--neutral-layer-1);
    box-shadow: 0 1px 0 var(--neutral-stroke-divider-rest);
}

.quotation-lines-excel--outer-doc-scroll {
    min-height: unset !important;
}

/* 수주 라인 HTML 테이블: Page 모드에서 열 헤더 sticky */
.sales-lines-table-host--sticky-head .sales-lines-table thead th {
    position: sticky;
    top: var(--bizeni-quote-sticky-context-h, 3.5rem);
    z-index: 28;
    background: var(--neutral-layer-1);
    box-shadow: 0 1px 0 var(--neutral-stroke-divider-rest);
}

/* 수주 Page: 하단 액션바 — 저장은 상단 컨텍스트 바로 이동 */
.bizeni-order-editor-actions.bizeni-quote-detail-footer--secondary-only .bizeni-order-save-btn {
    display: none;
}

/* 모듈 Hub 셸(BizeniModuleHubShell / BizeniModuleInlinePage) */
.bizeni-hub-page.bizeni-hub-page--inline-chrome {
    padding: 0 1.5rem 1.5rem;
    width: 100%;
    box-sizing: border-box;
}

.bizeni-hub-page__intro {
    padding: 0.75rem 0 0.5rem;
    margin-bottom: 0.25rem;
}

.bizeni-hub-page__body {
    width: 100%;
}

/* 카드·모달 내부 FluentSelect listbox 클리핑 완화 — 본문 스크롤(FluentBodyContent)은 건드리지 않음 */
fluent-card.nested-form-card,
fluent-card.bizeni-card--select-overflow {
    overflow: visible !important;
    contain: inherit !important;
    content-visibility: inherit;
}

fluent-card.bizeni-card--select-overflow:has(fluent-select[open]),
fluent-card.bizeni-card--select-overflow:has(fluent-combobox[open]),
.bizeni-admin-select-toolbar:has(fluent-select[open]),
.bizeni-admin-select-toolbar:has(fluent-combobox[open]) {
    overflow: visible !important;
    position: relative;
    z-index: 30;
}

.bizeni-admin-select-toolbar {
    overflow: visible;
    position: relative;
}

.bizeni-data-dictionary-split {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

@media (max-width: 960px) {
    .bizeni-data-dictionary-split {
        grid-template-columns: 1fr;
    }
}

.bizeni-data-dictionary-split__scroll {
    max-height: min(70vh, 640px);
    overflow: auto;
}

/* 데이터 사전: 상단 도구·배포 + 패널 그리드(패널 내부만 세로 스크롤) */
.bizeni-data-dictionary-page {
    --bizeni-data-dict-chrome-offset: 14rem;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.bizeni-data-dictionary-page__header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
    min-width: 0;
}

.bizeni-data-dictionary-page__deploy-hint {
    margin: 0;
}

.bizeni-data-dictionary-explorer {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
    min-width: 0;
    min-height: calc(100dvh - var(--bizeni-shell-header-h) - var(--bizeni-shell-footer-h) - var(--bizeni-data-dict-chrome-offset));
}

.bizeni-data-dictionary-explorer--two-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bizeni-data-dictionary-explorer__panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.bizeni-data-dictionary-explorer__panel.data-grid-card {
    overflow: hidden;
}

.bizeni-data-dictionary-explorer__panel-inner {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    box-sizing: border-box;
}

.bizeni-data-dictionary-explorer__panel-head {
    flex-shrink: 0;
}

.bizeni-data-dictionary-explorer__panel-title {
    flex-shrink: 0;
}

.bizeni-data-dictionary-explorer__scroll {
    flex: 1 1 0;
    min-height: 8rem;
    max-height: calc(100dvh - var(--bizeni-shell-header-h) - var(--bizeni-shell-footer-h) - var(--bizeni-data-dict-chrome-offset) - 2.5rem);
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 1100px) {
    .bizeni-data-dictionary-explorer {
        grid-template-rows: auto;
        min-height: 0;
    }

    .bizeni-data-dictionary-explorer,
    .bizeni-data-dictionary-explorer--two-columns {
        grid-template-columns: 1fr;
    }

    .bizeni-data-dictionary-explorer__panel {
        height: auto;
    }

    .bizeni-data-dictionary-explorer__scroll {
        max-height: min(52vh, 520px);
    }
}

/* API 카탈로그: 단일 전폭 테이블(데이터 사전 3열 explorer 레이아웃과 분리) */
.bizeni-api-catalog-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.bizeni-api-catalog-card fluent-data-grid {
    display: block;
    width: 100%;
    min-width: 0;
}

.bizeni-api-catalog-card fluent-data-grid table {
    width: 100%;
    table-layout: fixed;
}

.bizeni-api-catalog-card fluent-data-grid td:nth-child(3),
.bizeni-api-catalog-card fluent-data-grid th:nth-child(3) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.bizeni-modal-shell__scroll:has(fluent-select[open]),
.bizeni-modal-shell__scroll:has(fluent-combobox[open]),
.bizeni-modal-shell__scroll:has(fluent-autocomplete[open]),
.bizeni-modal-fluent-dialog-body:has(fluent-select[open]),
.bizeni-modal-fluent-dialog-body:has(fluent-combobox[open]),
.bizeni-modal-fluent-dialog-body:has(fluent-autocomplete[open]) {
    overflow: visible !important;
}

.bizeni-modal-shell:has(fluent-select[open]),
.bizeni-modal-shell:has(fluent-combobox[open]),
.bizeni-modal-shell:has(fluent-autocomplete[open]) {
    overflow: visible !important;
}

/* ─── 문서형 목록 페이지 (견적·수주·고객 등 3단: 필터 + 그리드 + 팩트박스) ─── */
.bizeni-list-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
}

.bizeni-list-page__header {
    padding: 0.75rem 1.5rem 0.5rem 1.5rem;
    flex-shrink: 0;
}

/* 테넌트 데이터 마이그레이션 — FluentTabs overflow 오측정 방지(전체 너비 확보) */
.bizeni-tenant-migration-tabs,
.bizeni-tenant-migration-body {
    width: 100%;
    box-sizing: border-box;
    padding-inline: 1.5rem;
}

.bizeni-tenant-migration-tabs {
    flex-shrink: 0;
}

.bizeni-tenant-migration-tabs fluent-tabs {
    width: 100%;
}

.bizeni-tenant-migration-body {
    padding-bottom: 1.5rem;
}

.bizeni-tenant-reset-card {
    border: 1px solid color-mix(in srgb, var(--error-stroke-rest) 35%, var(--neutral-stroke-rest));
}

.bizeni-tenant-reset-card__details summary {
    cursor: pointer;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.bizeni-tenant-reset-card__table-list,
.bizeni-tenant-reset-card__preserved-list {
    margin: 0.25rem 0 0;
    padding-left: 1.25rem;
}

.bizeni-tenant-reset-card__actions {
    align-items: flex-start;
}

.bizeni-tenant-reset-card__execute::part(control) {
    background: var(--error-fill-rest);
    border-color: var(--error-stroke-rest);
    color: var(--error-foreground-rest);
}

.bizeni-tenant-reset-card__execute:hover::part(control) {
    background: color-mix(in srgb, var(--error-fill-rest) 88%, black);
}

.bizeni-list-toolbar-sticky {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--neutral-layer-1);
    padding: 0.75rem 1.5rem 0.5rem 1.5rem;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.bizeni-list-page__content {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
}

.bizeni-list-page__filter-pane {
    width: 220px;
    flex-shrink: 0;
    position: sticky;
    top: 64px;
    align-self: flex-start;
    max-height: calc(100vh - 64px);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 1.2rem;
    background-color: var(--neutral-layer-2);
    border-right: 1px solid var(--neutral-stroke-divider-rest);
    box-sizing: border-box;
    min-width: 0;
}

.bizeni-list-page__filter-pane ::deep fluent-stack {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.bizeni-list-page__filter-pane ::deep fluent-text-field {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.bizeni-list-page__grid-area {
    flex: 1;
    min-width: 0;
    align-self: flex-start;
}

/* FluentDataGrid 기본 flex:1 — 행보다 컨테이너만 커져 조회 후 그리드 아래 빈 영역이 생기는 현상 방지 */
.bizeni-list-page__grid-area > .bizeni-show-md-up,
.bizeni-list-page__grid-area .bizeni-list-grid-host {
    display: block;
    width: 100%;
    flex: 0 1 auto;
    align-self: flex-start;
}

.bizeni-list-page__grid-area fluent-data-grid {
    flex: 0 1 auto !important;
    height: auto !important;
    align-self: flex-start;
}

.bizeni-list-page__factbox {
    width: 300px;
    flex-shrink: 0;
    position: sticky;
    top: 64px;
    align-self: flex-start;
    max-height: calc(100vh - 64px);
    overflow: hidden;
    padding: 0.75rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* 문서 목록 우측 패널: 행 선택 시 슬라이드 표시 (SidePanelChromeEnabled, ≥993px) */
.bizeni-list-page__content--side-panel-chrome {
    position: relative;
}

.bizeni-list-page__content--side-panel-chrome .bizeni-list-page__factbox--chrome {
    width: 320px;
    box-sizing: border-box;
    transition:
        width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        padding 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.bizeni-list-page__content--side-panel-chrome .bizeni-list-page__factbox--chrome:not(.bizeni-list-page__factbox--collapsed) {
    box-shadow: -6px 0 20px rgba(15, 23, 42, 0.08);
    z-index: 20;
    overflow: hidden;
}

.bizeni-list-page__content--side-panel-chrome .bizeni-list-page__factbox--chrome.bizeni-list-page__factbox--revealed {
    animation: bizeni-list-side-panel-slide-in 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.bizeni-list-page__content--side-panel-chrome .bizeni-list-page__factbox--chrome.bizeni-list-page__factbox--wide-serial-ledger:not(.bizeni-list-page__factbox--collapsed) {
    width: 960px;
}

.bizeni-list-page__content--side-panel-chrome .bizeni-list-page__factbox--wide-serial-ledger .bizeni-list-page__factbox-card {
    overflow-x: auto;
}

.bizeni-list-page__content--side-panel-chrome .bizeni-list-page__factbox--collapsed {
    width: 2.5rem !important;
    padding: 0.35rem 0.25rem;
    overflow: visible;
    box-shadow: none;
}

.bizeni-list-page__side-panel-toggle {
    min-width: 1.75rem !important;
    width: 1.75rem !important;
    height: 2.25rem !important;
    padding: 0 !important;
    border-radius: 6px !important;
    background: var(--neutral-layer-1) !important;
    border: 1px solid var(--neutral-stroke-divider-rest) !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}

.bizeni-list-page__content--side-panel-chrome .bizeni-list-page__factbox--collapsed .bizeni-list-page__side-panel-toggle-host {
    display: flex;
    justify-content: center;
    padding-top: 0.5rem;
}

.bizeni-list-page__content--side-panel-chrome .bizeni-list-page__factbox--chrome:not(.bizeni-list-page__factbox--collapsed) .bizeni-list-page__side-panel-toggle-host {
    display: none;
}

@keyframes bizeni-list-side-panel-slide-in {
    from {
        transform: translateX(16px);
        opacity: 0.88;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.bizeni-list-page__factbox-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.2rem;
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}

.bizeni-list-page__fact-section {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bizeni-list-page__fact-value {
    font-size: 0.95rem;
    font-weight: 400;
}

.bizeni-list-grid--document-rows {
    --datagrid-row-height: 52px;
}

.bizeni-list-grid--no-row-hover ::part(row):hover,
.bizeni-list-grid--no-row-hover tbody tr .hover {
    background-color: transparent !important;
    cursor: default;
}

.bizeni-list-grid--no-row-hover td:focus,
.bizeni-list-grid--no-row-hover td:focus-visible {
    outline: none;
    box-shadow: none;
}

.bizeni-list-grid--row-hover ::part(row):hover {
    background-color: var(--neutral-fill-stealth-hover);
    cursor: pointer;
}

/* 목록 그리드: 팩트박스 연동 선택 행 */
.bizeni-list-grid--document-rows tr.bizeni-list-grid__row--selected > fluent-data-grid-cell {
    background-color: color-mix(in srgb, var(--accent-fill-rest) 10%, var(--neutral-layer-1));
}

.bizeni-list-grid--document-rows tr.bizeni-list-grid__row--selected > fluent-data-grid-cell:first-child {
    box-shadow: inset 3px 0 0 var(--accent-fill-rest);
}

.bizeni-list-grid--document-rows tr.bizeni-list-grid__row--selected:hover > fluent-data-grid-cell {
    background-color: color-mix(in srgb, var(--accent-fill-rest) 16%, var(--neutral-layer-1));
}

@supports not (background: color-mix(in srgb, white 50%, black)) {
    .bizeni-list-grid--document-rows tr.bizeni-list-grid__row--selected > fluent-data-grid-cell {
        background-color: var(--neutral-fill-secondary-rest, rgba(0, 0, 0, 0.06));
    }
}

.bizeni-mobile-card--selected {
    border-color: var(--accent-fill-rest);
    background: var(--neutral-fill-secondary-rest, rgba(0, 0, 0, 0.04));
    box-shadow: inset 3px 0 0 var(--accent-fill-rest);
}

@media (max-width: 992px) {
    .bizeni-list-page__content--side-panel-chrome .bizeni-list-page__factbox--chrome:not(.bizeni-list-page__factbox--active) {
        display: none !important;
    }

    .bizeni-list-page__content {
        flex-direction: column;
        overflow-y: visible;
    }

    .bizeni-list-page__filter-pane {
        position: static;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--neutral-stroke-divider-rest);
        max-height: 300px;
    }

    .bizeni-list-page__factbox {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-height: none;
        overflow: visible;
        z-index: 1000;
        background-color: rgba(0, 0, 0, 0.45);
        align-items: flex-end;
        padding: 0;
        justify-content: center;
    }

    .bizeni-list-page__factbox--active {
        display: flex;
    }

    .bizeni-list-page__factbox-card {
        height: 85vh !important;
        width: 100% !important;
        max-width: 600px;
        border-radius: 16px 16px 0 0 !important;
        padding-top: 1.5rem !important;
        overflow-y: auto;
    }

    .bizeni-list-page__content--side-panel-chrome .bizeni-list-page__factbox--chrome {
        width: 100% !important;
        box-shadow: none !important;
        animation: none !important;
        transform: none !important;
    }

    .bizeni-list-page__content--side-panel-chrome .bizeni-list-page__side-panel-toggle-host {
        display: none !important;
    }
}

/* 목록: 접힌 상세 필터 활성 조건 배지 행 */
.bizeni-active-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    padding: 0.35rem 0 0.15rem;
    box-sizing: border-box;
}

.bizeni-active-filter-row__label {
    flex-shrink: 0;
    color: var(--neutral-foreground-hint);
    font-size: var(--type-ramp-minus-1-font-size);
    font-weight: 600;
}

/* 목록 그리드 sticky 헤더: 툴바(~64px) 바로 아래 + 항목별 구분선 */
.bizeni-list-grid--sticky-header thead tr,
.bizeni-list-grid--sticky-header thead th,
.bizeni-list-grid--sticky-header fluent-column-header {
    position: sticky !important;
    top: 76px !important;
    z-index: 50 !important;
    background: var(--neutral-layer-1) !important;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest) !important;
}

.bizeni-list-grid--sticky-header thead th.column-header:not(:last-child) {
    border-inline-end: 1px solid var(--neutral-stroke-divider-rest);
}

/* 배지 행이 있을 때 sticky 그리드 헤더 위치 보정 */
.bizeni-list-page--detail-filter-badges .bizeni-list-grid--sticky-header thead tr,
.bizeni-list-page--detail-filter-badges .bizeni-list-grid--sticky-header thead th,
.bizeni-list-page--detail-filter-badges .bizeni-list-grid--sticky-header fluent-column-header {
    top: 112px !important;
}

/* 목록 그리드: 이름 링크 셀 세로 중앙 정렬(체크박스 열 등은 Fluent 기본 레이아웃 유지) */
.bizeni-list-grid--sticky-header td:has(.bizeni-list-grid__name-cell) {
    display: flex;
    align-items: center;
}

.bizeni-list-grid__selection-cell {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

.bizeni-list-grid--sticky-header th.bizeni-list-grid__selection-col,
.bizeni-list-grid--sticky-header td.bizeni-list-grid__selection-col {
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    padding-inline: 4px !important;
    text-align: center;
    align-content: center;
    overflow: visible;
    box-sizing: border-box;
}

.bizeni-list-grid__name-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.bizeni-list-grid__name-link {
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    font: inherit;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: underline;
    color: var(--accent-fill-rest);
    cursor: pointer;
    text-align: start;
}

.bizeni-list-grid__name-link:hover {
    color: var(--accent-fill-hover);
}

/* 목록 그리드 빈 결과 */
.bizeni-empty-state {
    padding: 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    color: var(--neutral-foreground-hint);
}

.bizeni-empty-state__title {
    font-size: var(--type-ramp-base-font-size);
}

.bizeni-empty-state__description {
    font-size: var(--type-ramp-minus-1-font-size);
    color: var(--neutral-foreground-hint);
}

/* 워크스페이스·모듈 포탈 — 가로 플로우차트(모바일 세로) */
.bizeni-workspace-portal {
    width: 100%;
}

.bizeni-workflow-portal,
[class*="bizeni-"][class*="-workflow"] {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.75rem 0.5rem;
}

.bizeni-workflow-portal__card,
[class*="bizeni-"][class*="-workflow__card"] {
    flex: 1 1 11rem;
    min-width: min(100%, 11rem);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-self: stretch;
    min-height: 12.5rem;
}

.bizeni-workflow-portal__card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
}

.bizeni-workflow-portal__card-stack {
    flex: 1 1 auto;
    height: 100%;
    min-height: 100%;
    display: flex !important;
    flex-direction: column !important;
}

.bizeni-workflow-portal__head {
    flex-shrink: 0;
    align-items: flex-start;
}

.bizeni-workflow-portal__head-icon {
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.bizeni-workflow-portal__head-text {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
    flex: 1 1 auto;
}

/* 제목 2줄·배지 1줄 고정 — 설명 시작 위치 통일 */
.bizeni-workflow-portal__head-title {
    display: block;
    min-height: 2.75rem;
    line-height: 1.375;
}

.bizeni-workflow-portal__action-slot {
    display: flex;
    align-items: center;
    min-height: 1.375rem;
    height: 1.375rem;
}

.bizeni-workflow-portal__action-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.bizeni-workflow-portal__action-link:hover {
    opacity: 0.92;
}

/* 할일·바로가기 — 동일 Accent 배지 */
.bizeni-workflow-portal__action-badge {
    --bizeni-workflow-badge-h: 1.375rem;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: var(--bizeni-workflow-badge-h);
    height: var(--bizeni-workflow-badge-h);
    line-height: 1;
    padding: 0 0.4375rem;
    font-size: var(--type-ramp-minus-1-font-size, 0.75rem);
    white-space: nowrap;
}

.bizeni-workflow-portal__action-badge::part(control) {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.375rem;
    height: 1.375rem;
    line-height: 1;
    padding: 0 0.4375rem;
    font-size: var(--type-ramp-minus-1-font-size, 0.75rem);
}

/* 설명 4줄 분량 고정 — 카드 하단 정렬 */
.bizeni-workflow-portal__desc {
    flex: 1 1 auto;
    min-height: 6em;
    line-height: 1.5;
    margin-block-start: 0;
}

.bizeni-workflow-portal__arrow,
[class*="bizeni-"][class*="-workflow__arrow"] {
    align-self: center;
    flex: 0 0 auto;
}

.bizeni-workflow-portal__arrow-mobile,
[class*="bizeni-"][class*="-workflow__arrow-mobile"] {
    flex: 0 0 100%;
    text-align: center;
    color: var(--neutral-foreground-hint);
    line-height: 1;
}

.bizeni-workflow-portal__cta,
[class*="bizeni-"][class*="-workflow__cta"] {
    align-self: flex-start;
    margin-top: 0;
}

@media (min-width: 768px) {
    .bizeni-workflow-portal {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.25rem;
        scrollbar-gutter: stable;
    }

    .bizeni-workflow-portal__card,
    [class*="bizeni-"][class*="-workflow__card"] {
        flex: 0 0 10.75rem;
        min-width: 10.75rem;
        min-height: 12.5rem;
    }
}

/* 플랫폼 설계 허브 — docs/ 뷰어 */
.bizeni-platform-design-docs {
    align-items: stretch;
}

.bizeni-platform-design-docs__markdown {
    margin: 0;
    padding: 1rem;
    max-height: min(70vh, 48rem);
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    line-height: 1.5;
    background: var(--neutral-layer-2);
    border-radius: var(--control-corner-radius);
}

/* 설치장비 — 시리얼·설치 상세(팩트박스·모달) */
.bizeni-installed-equipment-detail__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1rem;
    color: var(--neutral-foreground-hint);
    padding: 1rem 0;
}

.bizeni-installed-equipment-detail__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}

.bizeni-installed-equipment-detail__header-main {
    flex: 1;
    min-width: 0;
}

.bizeni-installed-equipment-detail__title {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.35;
    word-break: break-word;
}

.bizeni-installed-equipment-detail__subtitle {
    margin-top: 0.2rem;
    font-size: 0.85rem;
    color: var(--neutral-foreground-hint);
    word-break: break-word;
}

.bizeni-installed-equipment-detail__badge-row {
    margin-top: 0.45rem;
}

.bizeni-installed-equipment-detail__section {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.bizeni-installed-equipment-detail__section-title {
    margin: 0;
    padding-top: 0.15rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
}

.bizeni-installed-equipment-detail__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1rem;
}

.bizeni-installed-equipment-detail__field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.bizeni-installed-equipment-detail__field--full {
    grid-column: 1 / -1;
}

.bizeni-installed-equipment-detail__field-label {
    font-size: 0.78rem;
    color: var(--neutral-foreground-hint);
}

.bizeni-installed-equipment-detail__field-value {
    font-size: 0.92rem;
    line-height: 1.4;
    word-break: break-word;
}

.bizeni-installed-equipment-detail__table-wrap {
    overflow-x: auto;
    margin-top: 0.15rem;
}

.bizeni-installed-equipment-detail__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.bizeni-installed-equipment-detail__table th,
.bizeni-installed-equipment-detail__table td {
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    text-align: left;
    vertical-align: top;
}

.bizeni-installed-equipment-detail__table th {
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

.bizeni-list-page__factbox--wide-serial-ledger:not(.bizeni-list-page__factbox--collapsed) .bizeni-installed-equipment-detail__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bizeni-installed-equipment-detail__table-wrap--hop {
    -webkit-overflow-scrolling: touch;
}

.bizeni-installed-equipment-detail__table--hop {
    min-width: 52rem;
}

.bizeni-installed-equipment-detail__table--hop td {
    max-width: 14rem;
    word-break: break-word;
}

.bizeni-installed-equipment-form__section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 0 0;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
}

.bizeni-installed-equipment-form__section:first-of-type {
    padding-top: 0;
    border-top: none;
}

.bizeni-installed-equipment-form__section-title {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.bizeni-installed-equipment-form__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem 1rem;
    align-items: end;
}

.bizeni-installed-equipment-form__grid--readonly {
    align-items: start;
}

.bizeni-installed-equipment-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
}

@media (max-width: 520px) {
    .bizeni-installed-equipment-detail__grid {
        grid-template-columns: 1fr;
    }

    .bizeni-list-page__factbox--wide-serial-ledger .bizeni-installed-equipment-detail__grid {
        grid-template-columns: 1fr;
    }

    .bizeni-installed-equipment-form__grid {
        grid-template-columns: 1fr;
    }
}