/* ─── Bizeni 플랫폼 문서형 UI 토큰 (목록·팩트박스·그리드 공통) ───
   테넌트 브랜드 색을 10% 내외로만 섞은 중립 ERP 톤 — 모듈(CRM) 전용이 아님 */

:root {
    --bizeni-ui-font: var(--bizeni-font-family);
    --bizeni-ui-title-size: 1.625rem;
    --bizeni-ui-subtitle-size: 0.9375rem;
    --bizeni-ui-caption-size: 0.8125rem;
    /* ── 목록 그리드 헤더 라벨 전용 토큰 (이 값 하나만 바꾸면 전 목록 화면 헤더가 함께 바뀜) ── */
    --bizeni-ui-grid-header-size: var(--bizeni-ui-subtitle-size);   /* 헤더 라벨 = 데이터 셀 폰트 크기 동일(0.9375rem). 셀 크기 바꾸면 헤더도 함께 따라감 */
    --bizeni-ui-grid-header-weight: 700;
    --bizeni-ui-grid-header-tracking: 0.02em;
    --bizeni-ui-radius: 12px;
    --bizeni-ui-radius-sm: 8px;
    --bizeni-ui-surface: var(--neutral-layer-1);
    --bizeni-ui-surface-muted: color-mix(in srgb, var(--neutral-layer-2) 55%, var(--neutral-layer-1));
    --bizeni-ui-border: color-mix(in srgb, var(--neutral-stroke-divider-rest) 80%, transparent);
    --bizeni-ui-accent-soft: color-mix(in srgb, var(--accent-fill-rest) 10%, transparent);
    --bizeni-ui-brand: var(--bizeni-tenant-header-bg, var(--accent-fill-rest));
    --bizeni-ui-grid-line: color-mix(in srgb, var(--neutral-stroke-divider-rest) 82%, var(--neutral-foreground-hint));
    --bizeni-ui-grid-header-bg: color-mix(in srgb, var(--bizeni-ui-brand) 10%, var(--neutral-layer-2));
    --bizeni-ui-grid-header-fg: color-mix(in srgb, var(--bizeni-ui-brand) 50%, var(--neutral-foreground-rest));
    --bizeni-ui-grid-header-border: color-mix(in srgb, var(--bizeni-ui-brand) 22%, var(--bizeni-ui-grid-line));
    --bizeni-ui-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
}

html[data-theme="dark"] :root,
html.dark :root {
    --bizeni-ui-grid-header-bg: color-mix(in srgb, var(--bizeni-ui-brand) 16%, var(--neutral-layer-3, var(--neutral-layer-2)));
    --bizeni-ui-grid-header-fg: color-mix(in srgb, var(--bizeni-ui-brand) 35%, var(--neutral-foreground-rest));
}

/* ─── 문서형 목록 페이지 셸 (BizeniListPage DocumentChrome) ─── */

.bizeni-list-page--document {
    font-family: var(--bizeni-ui-font);
    letter-spacing: -0.01em;
}

.bizeni-list-page--document .bizeni-list-toolbar-sticky {
    /* 완전 불투명 배경. backdrop-filter(blur)를 쓰면 sticky 툴바 뒤로 스크롤되는
       그리드 데이터가 툴바-헤더 경계에서 블러되어 비치므로 사용하지 않는다. */
    background: color-mix(in srgb, var(--neutral-layer-1) 92%, var(--neutral-layer-2));
    border-bottom: none;
    padding-top: 0.5rem;
    padding-bottom: 0.65rem;
    /* Fluent 툴바 컨트롤(검색·버튼·페이저)을 그리드 데이터 셀과 동일 타이포로 맞춘다. */
    --type-ramp-base-font-size: var(--bizeni-ui-subtitle-size);
    font-family: var(--bizeni-font-family);
    font-size: var(--bizeni-ui-subtitle-size);
}

.bizeni-list-page--document .bizeni-list-page__filter-pane {
    width: 260px;
    padding: 1.25rem;
    background: var(--bizeni-ui-surface-muted);
    border-right-color: var(--bizeni-ui-border);
}

.bizeni-list-page--document .bizeni-list-page__grid-area {
    padding: 0 0.75rem 0.75rem;
}

.bizeni-list-page--document .bizeni-list-page__factbox {
    width: 340px;
    padding: 0 0.65rem 0.65rem;
}

.bizeni-list-page--document .bizeni-list-page__factbox--active .bizeni-list-page__factbox-card--document {
    border-color: var(--bizeni-ui-grid-header-border);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--bizeni-ui-brand) 12%, transparent),
        var(--bizeni-ui-shadow);
}

/* 3단 레이아웃(허브·탭 포함) — BizeniDocumentListLayout */
.bizeni-document-list-layout .bizeni-list-page__grid-area {
    padding: 0 0.75rem 0.75rem;
}

.bizeni-document-list-layout .bizeni-list-page__factbox-card--document,
.bizeni-list-page--document .bizeni-list-page__factbox-card--document {
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid var(--bizeni-ui-border);
    border-radius: var(--bizeni-ui-radius);
    background: var(--bizeni-ui-surface);
    box-shadow: var(--bizeni-ui-shadow);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* 커맨드 바 — 그리드와 동일 Pretendard·0.9375rem (Fluent 웹컴포넌트는 ::part로 보강) */
.bizeni-list-page--document .bizeni-list-command-bar {
    font-family: var(--bizeni-font-family);
    font-size: var(--bizeni-ui-subtitle-size);
}

.bizeni-list-page--document .bizeni-list-command-bar fluent-button::part(control),
.bizeni-list-page--document .bizeni-list-command-bar fluent-search::part(control) {
    font-family: var(--bizeni-font-family);
    font-size: var(--bizeni-ui-subtitle-size);
}

.bizeni-list-command-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 0.75rem;
    width: 100%;
    padding: 0.35rem 0.15rem;
}

.bizeni-list-command-bar__search {
    flex: 1 1 16rem;
    min-width: 12rem;
    max-width: 28rem;
}

.bizeni-list-command-bar__search fluent-search {
    width: 100%;
}

.bizeni-list-command-bar__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.bizeni-list-command-bar__pager {
    margin-left: auto;
    display: flex;
    align-items: center;
}

/* 탭형/마스터 목록 표준 페이저 행(BizeniFluentListPagerRow).
   총건수·페이지·이전/다음을 한 줄로. 지금까지 각 화면이 인라인 복붙하던 것을 통일. */
.bizeni-list-pager-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--bizeni-ui-subtitle-size);
    flex-shrink: 0;
    white-space: nowrap;
}

.bizeni-list-pager-row__count,
.bizeni-list-pager-row__page {
    font-variant-numeric: tabular-nums;
}

/* 상황별 선택 액션 바: 행이 선택되면 툴바가 이 모드로 전환된다.
   Gmail·SAP Fiori·Dynamics의 contextual toolbar 패턴. */
.bizeni-list-command-bar--selection {
    justify-content: space-between;
    background: var(--bizeni-ui-accent-soft, rgba(0, 120, 212, 0.08));
    border-radius: 8px;
    padding: 0.35rem 0.65rem;
}

.bizeni-list-selection-bar__info {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.bizeni-list-selection-bar__count {
    font-weight: 600;
    white-space: nowrap;
}

.bizeni-list-selection-bar__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
}

/* Inline 모드: 선택 시 등장하는 행위 버튼 그룹.
   기존 툴바 버튼 바로 뒤에 자연스럽게 이어 붙는다(억지로 우측 끝까지 밀지 않음). */
.bizeni-list-command-bar__selection {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

/* Inline 모드: 툴바 안에 노출되는 선택 개수 표시 */
.bizeni-list-command-bar__selection-count {
    font-weight: 600;
    white-space: nowrap;
    padding: 0 0.25rem;
    color: var(--neutral-foreground-rest);
}

/* KPI 스트립 (선택) */
.bizeni-list-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    padding: 0 1.5rem 0.85rem;
}

.bizeni-list-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    background: var(--bizeni-ui-surface-muted);
    border: 1px solid var(--bizeni-ui-border);
    font-size: var(--bizeni-ui-caption-size);
    color: var(--neutral-foreground-hint);
    line-height: 1.2;
}

.bizeni-list-stat strong {
    font-size: var(--bizeni-ui-subtitle-size);
    font-weight: 700;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
}

.bizeni-list-stat--accent {
    background: var(--bizeni-ui-accent-soft);
    border-color: color-mix(in srgb, var(--accent-fill-rest) 22%, transparent);
    color: color-mix(in srgb, var(--accent-fill-rest) 75%, var(--neutral-foreground-rest));
}

.bizeni-list-stat--accent strong {
    color: var(--accent-fill-rest);
}

.bizeni-list-filter-title {
    font-size: var(--bizeni-ui-subtitle-size);
    font-weight: 700;
    color: var(--neutral-foreground-rest);
    margin: 0 0 0.25rem;
}

.bizeni-list-filter-hint {
    font-size: var(--bizeni-ui-caption-size);
    color: var(--neutral-foreground-hint);
    margin: 0 0 0.75rem;
    line-height: 1.45;
}

/* 그리드 셸 */
.bizeni-list-grid-shell {
    border: 1px solid var(--bizeni-ui-border);
    border-radius: var(--bizeni-ui-radius);
    background: var(--bizeni-ui-surface);
    box-shadow: var(--bizeni-ui-shadow);
    margin: 0 0 1rem;
}

/* 로딩 상태 컨테이너(표준 셸 공통) */
.bizeni-list-grid-state {
    padding: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bizeni-list-grid-viewport {
    border-radius: calc(var(--bizeni-ui-radius) - 2px);
}

/* ─── 문서형 그리드 크롬 ─── */

.bizeni-list-grid--document-chrome {
    --grid-cell-padding-horizontal: 0.85rem;
    font-size: var(--bizeni-ui-subtitle-size);
}

/* 데이터 셀 폰트: 렌더 방식(td / fluent-data-grid-cell)에 무관하게 동일 값 강제.
   inherit 는 웹컴포넌트 셀에서 상속 체인이 끊길 수 있어 명시값으로 통일한다. */
.bizeni-list-grid--document-chrome tbody td,
.bizeni-list-grid--document-chrome fluent-data-grid-cell {
    font-size: var(--bizeni-ui-subtitle-size);
    font-family: var(--bizeni-font-family);
    font-weight: 400;
    line-height: 1.4;
    vertical-align: middle;
}

.bizeni-list-grid--document-chrome thead th.bizeni-list-grid__selection-col,
.bizeni-list-grid--document-chrome td.bizeni-list-grid__selection-col {
    overflow: visible !important;
}

/* 선택·순번 열 — Fluent 기본 td/col-title 16px 패딩을 제거한다.
   좁은 고정폭(56/64px)에서 패딩+엑셀 테두리가 겹치면 체크와 순번 사이에
   빈 열·세로줄이 있는 것처럼 보이고, 헤더 「순번」이 오른쪽으로 밀린다. */
.bizeni-list-grid--document-chrome th.bizeni-list-grid__selection-col,
.bizeni-list-grid--document-chrome td.bizeni-list-grid__selection-col,
.bizeni-list-grid--document-chrome th.bizeni-list-grid__rowno-col,
.bizeni-list-grid--document-chrome td.bizeni-list-grid__rowno-col {
    padding: 0 !important;
    padding-inline: 4px !important;
    box-sizing: border-box;
}

.bizeni-list-grid--document-chrome th.bizeni-list-grid__rowno-col .col-title {
    padding: 0 !important;
}

.bizeni-list-grid__rowno-header {
    display: block;
    width: 100%;
    text-align: center;
    font-weight: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    line-height: 1.3;
    user-select: none;
    white-space: nowrap;
}

/* 순번 열 왼쪽 이중 테두리 제거(선택 열 오른쪽 경계만 유지) */
.bizeni-list-grid--excel-borders th.bizeni-list-grid__rowno-col,
.bizeni-list-grid--excel-borders td.bizeni-list-grid__rowno-col {
    border-inline-start: none !important;
}

/* ─── 순번(No.) 컬럼 (표준) ───
   숫자를 데이터가 아닌 CSS 카운터로 표시한다. 그리드가 정렬·페이징을 적용해 실제로
   렌더하는 셀 순서를 따라 증가하므로, 컬럼 정렬을 바꾸면 새 표시 순서대로 1,2,3…이
   자동 재부여된다(글로벌 제품/Excel 행번호와 동일 동작). 페이지 시작 오프셋은 셸이
   CSS 변수로 주입해 연속 번호(2페이지 51~)를 만든다. 셸이 오프셋(= 페이지 인덱스 ×
   페이지당 항목 수)을 --bizeni-rowno-reset으로 넘기고, counter-reset: N 후 각 순번 셀에서
   +1 하므로 현재 페이지 첫 행이 (N + 1) = 1부터 시작한다. */
.bizeni-list-grid-shell {
    counter-reset: bizeni-rowno var(--bizeni-rowno-reset, 0);
}

/* 순번 셀(td / 웹컴포넌트 셀)마다 카운터 증가. 표시 순서 = DOM 렌더 순서. */
.bizeni-list-grid--document-chrome td.bizeni-list-grid__rowno-col,
.bizeni-list-grid--document-chrome fluent-data-grid-cell.bizeni-list-grid__rowno-col {
    counter-increment: bizeni-rowno;
}

/* 실제 숫자 출력. 데이터 셀이 아니라 순번 span의 ::before로 그린다. */
.bizeni-list-grid--document-chrome .bizeni-list-grid__rowno::before {
    content: counter(bizeni-rowno);
}

/* 순번 값 톤: Excel 행번호처럼 은은한 회색. 긴 순번(예: 18500)도 잘리지 않도록
   줄바꿈·말줄임 없이 한 줄로 표시한다. 컬럼 폭은 셸이 64px로 고정하고(레이아웃 안정),
   6자리 이상 극단값은 아래 셀 overflow:visible 로 넘쳐 표시된다. */
.bizeni-list-grid--document-chrome .bizeni-list-grid__rowno {
    display: inline-block;
    color: var(--neutral-foreground-hint, #8a8a8a);
    font-variant-numeric: tabular-nums;
    font-size: calc(var(--bizeni-ui-subtitle-size) - 1px);
    white-space: nowrap;
}

/* 순번 헤더·셀 정렬: 다른 헤더처럼 항상 가운데. 말줄임(...) 제거하고 내용 폭 확보. */
.bizeni-list-grid--document-chrome thead th.bizeni-list-grid__rowno-col,
.bizeni-list-grid--document-chrome fluent-column-header.bizeni-list-grid__rowno-col,
.bizeni-list-grid--document-chrome td.bizeni-list-grid__rowno-col,
.bizeni-list-grid--document-chrome fluent-data-grid-cell.bizeni-list-grid__rowno-col {
    text-align: center !important;
    justify-content: center !important;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}
/* 순번 헤더 제목 텍스트도 중앙(정렬버튼 없는 순수 텍스트 헤더). */
.bizeni-list-grid--document-chrome thead th.bizeni-list-grid__rowno-col .col-title,
.bizeni-list-grid--document-chrome fluent-column-header.bizeni-list-grid__rowno-col .col-title {
    width: 100%;
    text-align: center !important;
}

.bizeni-list-grid--document-chrome.bizeni-list-grid--sticky-header thead tr,
.bizeni-list-grid--document-chrome.bizeni-list-grid--sticky-header thead th,
.bizeni-list-grid--document-chrome.bizeni-list-grid--sticky-header fluent-column-header,
.bizeni-list-grid--document-chrome.bizeni-list-grid--sticky-header tr[row-type='sticky-header'] > th,
.bizeni-list-grid--document-chrome.bizeni-list-grid--sticky-header tr[row-type='sticky-header'] > fluent-data-grid-cell,
.bizeni-list-grid--document-chrome.bizeni-list-grid--excel-borders thead th,
.bizeni-list-grid--document-chrome.bizeni-list-grid--excel-borders fluent-column-header {
    background: var(--bizeni-ui-grid-header-bg) !important;
    background-color: var(--bizeni-ui-grid-header-bg) !important;
    color: var(--bizeni-ui-grid-header-fg) !important;
    font-family: var(--bizeni-font-family) !important;
    font-weight: var(--bizeni-ui-grid-header-weight) !important;
    font-size: var(--bizeni-ui-grid-header-size) !important;
    letter-spacing: var(--bizeni-ui-grid-header-tracking);
    border-bottom: 2px solid var(--bizeni-ui-grid-header-border) !important;
}

/* 헤더 폰트를 실제 텍스트가 들어가는 내부 요소(제목 span·정렬버튼)에도 강제.
   정렬 가능 열은 col-sort-button(FluentButton)이 자체 폰트를 가져 th 폰트를
   무시하므로, 정렬 가능/불가 열의 헤더 폰트가 달라 보이는 문제를 원천 차단한다. */
.bizeni-list-grid--document-chrome thead th .col-title,
.bizeni-list-grid--document-chrome thead th .col-sort-button,
.bizeni-list-grid--document-chrome thead th .col-sort-button::part(control),
.bizeni-list-grid--document-chrome fluent-column-header .col-title,
.bizeni-list-grid--document-chrome fluent-column-header .col-sort-button,
.bizeni-list-grid--document-chrome fluent-column-header .col-sort-button::part(control) {
    font-family: var(--bizeni-font-family) !important;
    font-size: var(--bizeni-ui-grid-header-size) !important;
    font-weight: var(--bizeni-ui-grid-header-weight) !important;
    letter-spacing: var(--bizeni-ui-grid-header-tracking) !important;
    line-height: 1.3 !important;
}

.bizeni-list-grid--document-chrome thead th .col-sort-button::part(control) {
    background: transparent !important;
    color: inherit !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    min-height: auto;
    /* 정렬버튼의 가로 정렬은 아래 col-justify-* 규칙이 컬럼 Align에 맞춰 담당한다. */
}

.bizeni-list-grid--document-chrome thead th .col-sort-button:hover::part(control) {
    background: color-mix(in srgb, var(--accent-fill-rest) 10%, transparent) !important;
}

.bizeni-list-grid--document-chrome tr[row-type='sticky-header'] > th {
    background-color: var(--bizeni-ui-grid-header-bg) !important;
}

/* 헤더 라벨 정렬 표준: 모든 헤더 라벨을 중앙 정렬로 통일한다(이전 고객목록 방식).
   데이터 셀 정렬(Align)과 무관하게 헤더 제목·정렬버튼은 항상 가운데 배치.
   ※ 정렬 방식을 바꾸려면 이 블록만 수정하면 전 목록 화면에 일괄 반영된다. */

/* (1) 헤더 셀 자체를 중앙 flex로 강제.
   FluentDataGrid는 컬럼 Align(End/Center 등)에 따라 헤더 셀에 justify-content를
   걸어 정렬버튼·제목을 좌/우로 민다. 그래서 Align 지정 컬럼(금액 End 등)은 헤더가
   어긋난다. 헤더 셀 레벨에서 justify-content를 center로 덮어 Align과 무관하게 통일한다.
   (데이터 셀 정렬에는 영향 없음 — thead 한정.) */
.bizeni-list-grid--document-chrome thead th,
.bizeni-list-grid--document-chrome fluent-column-header {
    justify-content: center !important;
    text-align: center !important;
}
/* (2) 제목 텍스트 자체도 중앙(정렬버튼 없는 컬럼 대비). */
.bizeni-list-grid--document-chrome thead th .col-title,
.bizeni-list-grid--document-chrome fluent-column-header .col-title {
    color: inherit;
    width: 100%;
    text-align: center !important;
}
/* (3) 정렬버튼 컨트롤 내부도 중앙. */
.bizeni-list-grid--document-chrome thead th .col-sort-button,
.bizeni-list-grid--document-chrome fluent-column-header .col-sort-button {
    justify-content: center !important;
    width: 100%;
}
.bizeni-list-grid--document-chrome thead th .col-sort-button::part(control),
.bizeni-list-grid--document-chrome fluent-column-header .col-sort-button::part(control) {
    justify-content: center !important;
}

.bizeni-list-grid--document-chrome thead th.bizeni-list-grid__selection-col {
    text-align: center;
}

.bizeni-list-grid--document-chrome .bizeni-list-grid__name-link {
    font-weight: 600;
    font-size: var(--bizeni-ui-subtitle-size);
    color: var(--neutral-foreground-rest);
    text-decoration: none;
    transition: color 0.12s ease;
}

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

/* 엑셀형 셀 테두리 */
.bizeni-list-grid--excel-borders table {
    border-collapse: collapse;
    width: 100%;
}

.bizeni-list-grid--excel-borders thead th,
.bizeni-list-grid--excel-borders fluent-column-header,
.bizeni-list-grid--excel-borders tbody td,
.bizeni-list-grid--excel-borders fluent-data-grid-cell {
    border: 1px solid var(--bizeni-ui-grid-line) !important;
    box-sizing: border-box;
}

.bizeni-list-grid--excel-borders thead th,
.bizeni-list-grid--excel-borders fluent-column-header {
    border-bottom-width: 2px !important;
}

.bizeni-list-grid--excel-borders fluent-data-grid-row:nth-child(even) fluent-data-grid-cell,
.bizeni-list-grid--excel-borders tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--neutral-layer-2) 28%, var(--neutral-layer-1));
}

.bizeni-list-grid--excel-borders td:has(.bizeni-list-grid__name-cell) {
    display: table-cell;
    vertical-align: middle;
}

.bizeni-list-grid--excel-borders .bizeni-list-grid__name-cell {
    gap: 0;
}

.bizeni-list-grid--excel-borders fluent-data-grid-row:hover fluent-data-grid-cell,
.bizeni-list-grid--excel-borders tbody tr:hover td {
    background: color-mix(in srgb, var(--accent-fill-rest) 7%, var(--neutral-layer-1)) !important;
}

.bizeni-list-grid--excel-borders ::part(row):hover {
    background: transparent;
}

.bizeni-list-grid--document-chrome fluent-data-grid-row {
    transition: background-color 0.12s ease;
}

.bizeni-list-grid--document-chrome fluent-data-grid-row:hover {
    background: color-mix(in srgb, var(--accent-fill-rest) 5%, var(--neutral-layer-1)) !important;
}

.bizeni-list-grid--excel-borders fluent-data-grid-row:hover {
    background: transparent !important;
}

/* 목록 아바타(문서형 목록 공통) */
.bizeni-list-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    user-select: none;
    letter-spacing: 0.02em;
}

.bizeni-list-avatar--sm { width: 34px; height: 34px; font-size: 0.78rem; }
.bizeni-list-avatar--md { width: 48px; height: 48px; font-size: 1rem; }
.bizeni-list-avatar--lg { width: 64px; height: 64px; font-size: 1.25rem; }
.bizeni-list-avatar--xl { width: 80px; height: 80px; font-size: 1.5rem; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12); }
.bizeni-list-avatar--neutral { background: linear-gradient(135deg, #94a3b8, #64748b); }
.bizeni-list-avatar--tone-0 { background: linear-gradient(135deg, #6366f1, #4f46e5); }
.bizeni-list-avatar--tone-1 { background: linear-gradient(135deg, #0ea5e9, #0284c7); }
.bizeni-list-avatar--tone-2 { background: linear-gradient(135deg, #10b981, #059669); }
.bizeni-list-avatar--tone-3 { background: linear-gradient(135deg, #f59e0b, #d97706); }
.bizeni-list-avatar--tone-4 { background: linear-gradient(135deg, #ec4899, #db2777); }
.bizeni-list-avatar--tone-5 { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.bizeni-list-avatar--tone-6 { background: linear-gradient(135deg, #14b8a6, #0d9488); }
.bizeni-list-avatar--tone-7 { background: linear-gradient(135deg, #3b82f6, #2563eb); }

/* ─── 우측 팩트박스 미리보기 ─── */

.bizeni-list-factbox-preview {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.bizeni-list-factbox-preview__header {
    padding: 1.25rem 1.1rem 1rem;
    background: var(--bizeni-ui-grid-header-bg);
    color: var(--bizeni-ui-grid-header-fg);
    border-bottom: 2px solid var(--bizeni-ui-grid-header-border);
}

.bizeni-list-factbox-preview__header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}

.bizeni-list-factbox-preview__identity {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
    flex: 1;
}

.bizeni-list-factbox-preview__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bizeni-list-factbox-preview__meta {
    margin: 0.2rem 0 0;
    font-size: var(--bizeni-ui-caption-size);
    opacity: 0.88;
    font-variant-numeric: tabular-nums;
}

.bizeni-list-factbox-preview__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.85rem;
}

.bizeni-list-factbox-preview__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bizeni-ui-brand) 8%, var(--neutral-layer-1));
    border: 1px solid var(--bizeni-ui-grid-header-border);
    color: var(--bizeni-ui-grid-header-fg);
    font-size: 0.75rem;
    font-weight: 500;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bizeni-list-factbox-preview__body {
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.bizeni-list-factbox-preview__field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.bizeni-list-factbox-preview__label {
    font-size: var(--bizeni-ui-caption-size);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--neutral-foreground-hint);
}

.bizeni-list-factbox-preview__value {
    font-size: var(--bizeni-ui-subtitle-size);
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    word-break: break-word;
}

.bizeni-list-factbox-preview__footer {
    padding: 0 1.1rem 1.1rem;
    margin-top: auto;
}

.bizeni-list-factbox-preview__header .bizeni-list-factbox-preview__dismiss::part(control) {
    color: var(--bizeni-ui-grid-header-fg) !important;
    background: transparent !important;
}

.bizeni-list-factbox-preview__header .bizeni-list-factbox-preview__dismiss:hover::part(control) {
    background: color-mix(in srgb, var(--bizeni-ui-brand) 12%, transparent) !important;
}

.bizeni-list-factbox-preview__btn-primary::part(control) {
    background: var(--bizeni-ui-grid-header-bg) !important;
    color: var(--bizeni-ui-grid-header-fg) !important;
    border: 1px solid var(--bizeni-ui-grid-header-border) !important;
    font-weight: 700;
}

.bizeni-list-factbox-preview__btn-primary:hover::part(control) {
    background: color-mix(in srgb, var(--bizeni-ui-brand) 16%, var(--neutral-layer-2)) !important;
    border-color: color-mix(in srgb, var(--bizeni-ui-brand) 30%, var(--bizeni-ui-grid-header-border)) !important;
}

.bizeni-list-factbox-preview__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.85rem;
    padding: 2.5rem 1.25rem;
    color: var(--neutral-foreground-hint);
}

.bizeni-list-factbox-preview__empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bizeni-ui-grid-header-bg);
    color: var(--bizeni-ui-grid-header-fg);
    border: 1px solid var(--bizeni-ui-grid-header-border);
}

.bizeni-list-factbox-preview__empty-title {
    margin: 0;
    font-size: var(--bizeni-ui-subtitle-size);
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.bizeni-list-factbox-preview__empty-desc {
    margin: 0;
    font-size: var(--bizeni-ui-caption-size);
    line-height: 1.5;
    max-width: 16rem;
}

/* 편집·상세 공통 섹션 카드 (플랫폼) */
.bizeni-ui-section-card {
    border: 1px solid var(--bizeni-ui-border) !important;
    border-radius: var(--bizeni-ui-radius) !important;
    box-shadow: var(--bizeni-ui-shadow) !important;
    padding: 1.35rem 1.5rem !important;
    background: var(--bizeni-ui-surface) !important;
}

.bizeni-ui-section-card__head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1rem;
}

.bizeni-ui-section-card__icon {
    width: 36px;
    height: 36px;
    border-radius: var(--bizeni-ui-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bizeni-ui-accent-soft);
    color: var(--accent-fill-rest);
    flex-shrink: 0;
}

.bizeni-ui-section-card__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
}

.bizeni-ui-section-card__desc {
    margin: 0.15rem 0 0;
    font-size: var(--bizeni-ui-caption-size);
    color: var(--neutral-foreground-hint);
}

.bizeni-ui-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.25rem;
}

.bizeni-ui-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.bizeni-ui-form-field--full {
    grid-column: 1 / -1;
}

.bizeni-ui-form-field > fluent-label,
.bizeni-ui-form-field__label {
    font-size: var(--bizeni-ui-caption-size) !important;
    font-weight: 600 !important;
    color: var(--neutral-foreground-hint) !important;
    letter-spacing: 0.02em;
}

.bizeni-ui-form-field fluent-text-field,
.bizeni-ui-form-field fluent-select {
    width: 100%;
}

@media (max-width: 1024px) {
    .bizeni-list-page--document .bizeni-list-page__factbox {
        width: 100%;
    }

    .bizeni-ui-form-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .bizeni-list-stats {
        padding-inline: 1rem;
    }

    .bizeni-list-command-bar__pager {
        width: 100%;
        margin-left: 0;
        justify-content: flex-end;
    }
}

/* ─────────────────────────────────────────────────────────────
   표준 모달 편집 폼 (BizeniModalEditForm) — 글로벌 톤

   FluentDialog 기본값에만 의존하던 모달을 플랫폼 공통 디자인으로 통일한다.
   껍데기(bizeni-modal-shell)·편집폼(bizeni-modal-edit-form)의 레이아웃·간격·
   sticky 헤더/푸터·스크롤 본문을 모두 여기서 정의한다. 개별 화면은 폼 필드만 넣는다.
   ※ 디자인을 바꾸려면 이 블록만 수정하면 전 모달 편집 화면에 일괄 반영된다.
   ───────────────────────────────────────────────────────────── */

/* 폼형 모달 셸: 다이얼로그 본문을 꽉 채우는 세로 flex 컨테이너로.
   카드감(라운드·상단 브랜드 악센트 바)으로 밋밋함을 없앤다.
   ※ overflow는 hidden으로 두지 않는다 — 드롭다운(select)이 셸 밖으로 열려야 하므로.
     라운드 코너는 헤더/푸터가 직접 border-radius로 처리한다. */
.bizeni-modal-shell.bizeni-modal-shell--form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: min(88vh, 900px);
    font-family: var(--bizeni-ui-font);
    position: relative;
    background: var(--neutral-layer-1);
    border-radius: var(--bizeni-ui-radius, 12px);
}

/* 상단 브랜드 악센트 바(테넌트 색). 모달에 정체성·생동감 부여. */
.bizeni-modal-shell.bizeni-modal-shell--form::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: var(--bizeni-ui-radius, 12px) var(--bizeni-ui-radius, 12px) 0 0;
    background: linear-gradient(90deg,
        var(--bizeni-ui-brand, var(--accent-fill-rest)),
        color-mix(in srgb, var(--bizeni-ui-brand, var(--accent-fill-rest)) 45%, transparent));
    z-index: 2;
}

/* FluentDialogFooter에 푸터를 분리한 편집 모달 — 셸 하단 모서리는 푸터가 담당 */
.bizeni-modal-shell.bizeni-modal-shell--form.bizeni-modal-shell--external-footer {
    border-radius: var(--bizeni-ui-radius, 12px) var(--bizeni-ui-radius, 12px) 0 0;
}

fluent-dialog-footer.bizeni-modal-fluent-dialog-footer {
    padding: 0;
    border-top: none;
    background: transparent;
    overflow: visible;
}

.bizeni-modal-fluent-dialog-footer .bizeni-modal-edit-form__footer {
    width: 100%;
    box-sizing: border-box;
}

/* 편집 폼 3단 구성: 헤더(고정) · 본문(스크롤) · 푸터(고정). */
.bizeni-modal-edit-form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}

/* ── 헤더 ── (은은한 브랜드 틴트 배경으로 본문과 구분) */
.bizeni-modal-edit-form__header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem 0.85rem 1.25rem;
    background: color-mix(in srgb, var(--bizeni-ui-brand, var(--accent-fill-rest)) 6%, var(--neutral-layer-1));
    border-bottom: 1px solid color-mix(in srgb, var(--bizeni-ui-brand, var(--accent-fill-rest)) 14%, var(--neutral-stroke-divider-rest));
    border-radius: var(--bizeni-ui-radius, 12px) var(--bizeni-ui-radius, 12px) 0 0;
}

.bizeni-modal-edit-form__heading {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1 1 auto;
}

.bizeni-modal-edit-form__title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--neutral-foreground-rest);
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* 제목 앞 브랜드 색 세로 표식 — 밋밋함 제거용 소품. */
.bizeni-modal-edit-form__title::before {
    content: "";
    flex-shrink: 0;
    width: 4px;
    height: 1.1em;
    border-radius: 2px;
    background: var(--bizeni-ui-brand, var(--accent-fill-rest));
}

.bizeni-modal-edit-form__subtitle {
    margin: 0;
    font-size: var(--bizeni-ui-caption-size);
    color: var(--neutral-foreground-hint);
    line-height: 1.4;
}

/* 페이지 헤더 — 프로그램명(H3) 아래 PageIntro(모달 부제·Hub intro와 동일 톤) */
.bizeni-page-breadcrumb-header__description,
.bizeni-page-intro {
    margin: 0.35rem 0 0;
    max-width: 52rem;
    font-size: var(--bizeni-ui-caption-size);
    color: var(--neutral-foreground-hint);
    line-height: 1.45;
}

/* 작업/설정형 — breadcrumb·프로그램명(PageIntro) 상단 고정(본문 FluentBodyContent 스크롤 시에도 유지) */
.bizeni-list-page__header.bizeni-page-header--sticky {
    position: sticky;
    top: 0;
    z-index: 110;
    background: var(--neutral-layer-1);
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.bizeni-modal-edit-form__header-extra {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* ── 본문(스크롤) ── */
.bizeni-modal-edit-form__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.15rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    background: var(--neutral-layer-1);
}

/* 드롭다운(select/combobox/autocomplete)이 열리면 스크롤 컨테이너가 옵션 목록을
   가둬서 FluentUI가 공간 부족으로 판단해 위로 여는 문제 → overflow를 잠시 풀어
   아래로 정상 표시되게 한다(기존 bizeni-modal-shell__scroll 규칙과 동일 취지). */
.bizeni-modal-edit-form__scroll:has(fluent-select[open]),
.bizeni-modal-edit-form__scroll:has(fluent-combobox[open]),
.bizeni-modal-edit-form__scroll:has(fluent-autocomplete[open]) {
    overflow: visible !important;
}

/* 엑셀 import 열 매핑 테이블 — 스크롤 영역 안 FluentSelect 목록이 잘리지 않게 */
.bizeni-serial-mapping-registry__table-wrap {
    max-height: 320px;
    overflow: auto;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    margin-top: 8px;
}

.bizeni-serial-mapping-registry__table-wrap:has(fluent-select[open]),
.bizeni-serial-mapping-registry__table-wrap:has(fluent-combobox[open]),
.bizeni-serial-mapping-registry:has(fluent-select[open]),
.bizeni-serial-mapping-registry:has(fluent-combobox[open]) {
    overflow: visible !important;
}

.bizeni-serial-mapping-registry__table-wrap:has(fluent-select[open]),
.bizeni-serial-mapping-registry__table-wrap:has(fluent-combobox[open]) {
    max-height: none;
}

.bizeni-modal-edit-form__preform {
    flex-shrink: 0;
}

.bizeni-modal-edit-form__body {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.bizeni-modal-edit-form__error {
    margin-top: 0.25rem;
}

/* ── 푸터(고정) ── (은은한 배경으로 본문과 분리) */
.bizeni-modal-edit-form__footer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
    background: color-mix(in srgb, var(--neutral-layer-2) 55%, var(--neutral-layer-1));
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: 0 0 var(--bizeni-ui-radius, 12px) var(--bizeni-ui-radius, 12px);
    flex-shrink: 0;
    position: relative;
    z-index: 10;
}

.bizeni-modal-edit-form__footer-extra {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-width: 0;
}

.bizeni-modal-edit-form__footer-primary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    margin-left: auto;
}

/* 폼 필드 기본 간격: 모달 안 FluentStack/필드가 촘촘하지 않게. */
.bizeni-modal-edit-form__body fluent-text-field,
.bizeni-modal-edit-form__body fluent-number-field,
.bizeni-modal-edit-form__body fluent-select,
.bizeni-modal-edit-form__body fluent-text-area {
    width: 100%;
}

/* ─── 표준 폼 행 (bizeni-form-row) ───
   라벨(왼쪽 고정폭) + 입력(오른쪽 flex)을 한 줄에, 항목은 세로로 하나씩 쌓는다.
   글로벌 ERP 폼 관례. 모달·상세 어디서든 라벨/데이터 배치를 통일한다.
   사용:  <div class="bizeni-form-row">
             <span class="bizeni-form-row__label">라벨</span>
             <div class="bizeni-form-row__control"> ...입력... </div>
          </div>
   ※ FluentUI 필드의 내장 Label 대신 이 라벨 span을 쓴다(내장 Label은 위로 붙어 통일 깨짐). */
.bizeni-form-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    box-sizing: border-box;
    min-height: 2.25rem;
}

.bizeni-form-row__label {
    flex: 0 0 var(--bizeni-form-label-w, 8.5rem);
    width: var(--bizeni-form-label-w, 8.5rem);
    color: var(--neutral-foreground-hint);
    font-family: var(--bizeni-font-family);
    font-size: var(--bizeni-ui-subtitle-size);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-align: left;
    line-height: 1.4;
    /* 라벨은 고정폭 안에서 한 줄로 표시(공백 포함 한글 라벨의 2줄 접힘 방지). 좁은 화면(≤520px)은 세로 전환으로 별도 처리. */
    white-space: nowrap;
}

/* 필수 표식(라벨에 --required 붙이면 * 표시). */
.bizeni-form-row__label--required::after {
    content: " *";
    color: var(--error, #d13438);
    font-weight: 700;
}

.bizeni-form-row__control {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bizeni-form-row__control > fluent-text-field,
.bizeni-form-row__control > fluent-number-field,
.bizeni-form-row__control > fluent-select,
.bizeni-form-row__control > fluent-text-area,
.bizeni-form-row__control > .bizeni-form-row__control-fill {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

/* 여러 줄 입력(주소·비고 등)은 라벨을 상단 정렬. */
.bizeni-form-row--top {
    align-items: flex-start;
}
.bizeni-form-row--top .bizeni-form-row__label {
    padding-top: 0.4rem;
}

/* 수주 등 라벨이 긴 문서형 폼(회계반영일자 6글자 등)은 라벨 폭을 소폭 넓혀 한 줄 유지. */
.bizeni-order-editor-fields--form {
    --bizeni-form-label-w: 9.5rem;
}

/* 좁은 화면: 라벨을 위로, 입력을 아래로(자동 세로 전환). */
@media (max-width: 520px) {
    .bizeni-form-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
    }
    .bizeni-form-row__label {
        flex-basis: auto;
        width: auto;
    }
}

@media (max-width: 640px) {
    .bizeni-modal-shell.bizeni-modal-shell--form {
        max-height: 92vh;
    }
    .bizeni-modal-edit-form__footer {
        flex-wrap: wrap;
    }
    .bizeni-modal-edit-form__footer-primary {
        width: 100%;
    }
    .bizeni-modal-edit-form__footer-primary fluent-button {
        flex: 1 1 auto;
    }
}

/* ── 티켓 워크스페이스(헬프데스크 상세) ── */
.bizeni-ticket-workspace-page {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.bizeni-ticket-workspace {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 4rem);
    padding: 0 1rem 1rem;
    min-height: 0;
}

.bizeni-ticket-workspace__topbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0 0.75rem;
    flex-shrink: 0;
}

.bizeni-ticket-workspace__topbar-title {
    font-weight: 600;
    opacity: 0.9;
    margin: 0;
}

.bizeni-ticket-workspace__error {
    margin: 0 0 0.75rem;
    flex-shrink: 0;
}

.bizeni-ticket-workspace__loading,
.bizeni-ticket-workspace__empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 12rem;
}

.bizeni-ticket-workspace__grid {
    display: grid;
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) minmax(220px, 280px);
    gap: 0.75rem;
    flex: 1;
    min-height: 0;
}

.bizeni-ticket-workspace__props,
.bizeni-ticket-workspace__context {
    overflow-y: auto;
    min-height: 0;
    padding: 0.75rem;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
}

.bizeni-ticket-workspace__main {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    background: var(--neutral-layer-1);
    position: relative;
}

.bizeni-ticket-workspace__main--loading {
    pointer-events: none;
}

.bizeni-ticket-workspace__main-spinner {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--neutral-layer-1) 72%, transparent);
}

.bizeni-ticket-workspace__main-header {
    flex-shrink: 0;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--neutral-stroke-rest);
}

.bizeni-ticket-workspace__description {
    margin-top: 0.75rem;
}

.bizeni-ticket-workspace__description.bizeni-ticket-workspace__comment {
    margin-bottom: 0;
}

.bizeni-ticket-workspace__comment-body {
    margin-top: 0.25rem;
    line-height: 1.55;
    height: auto;
    overflow: visible;
    word-break: break-word;
}

.bizeni-ticket-workspace__comment-body img,
.bizeni-ticket-workspace__comment-body .bizeni-ticket-comment-img {
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;
    margin: 0.5rem 0;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
}

.bizeni-ticket-workspace__comment-body a {
    color: var(--accent-fill-rest);
    word-break: break-all;
}

.bizeni-ticket-workspace__comment-body p {
    margin: 0.35rem 0;
}

.bizeni-ticket-workspace__attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.bizeni-ticket-workspace__attachment-image img {
    max-width: 100%;
    max-height: 280px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
}

.bizeni-ticket-workspace__timeline {
    flex: 0 0 auto;
    overflow: visible;
    padding: 0.75rem 1rem;
}

.bizeni-ticket-workspace__compose {
    flex-shrink: 0;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--neutral-stroke-rest);
    background: var(--neutral-layer-2);
}

.bizeni-ticket-workspace__reply-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 2.75rem;
    field-sizing: content;
    resize: none;
    overflow: hidden;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    background: var(--neutral-fill-rest);
    color: var(--neutral-foreground-rest);
    font: inherit;
    line-height: 1.5;
}

.bizeni-ticket-workspace__reply-input:focus {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 1px;
}

.bizeni-ticket-workspace__service-tasks {
    flex-shrink: 0;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--neutral-stroke-rest);
}

.bizeni-ticket-workspace__section-title {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    opacity: 0.85;
    margin-bottom: 0.65rem;
}

.bizeni-ticket-workspace__meta {
    font-size: 0.8rem;
    opacity: 0.8;
}

.bizeni-ticket-workspace__comment {
    padding: 0.65rem 0.75rem;
    margin-bottom: 0.5rem;
    border-left: 3px solid var(--neutral-stroke-rest);
    background: var(--neutral-layer-2);
    border-radius: 0 4px 4px 0;
}

.bizeni-ticket-workspace__comment--public {
    border-left-color: var(--accent-fill-rest);
}

.bizeni-ticket-workspace__comment--internal {
    border-left-color: var(--neutral-stroke-rest);
}

.bizeni-ticket-workspace__activity {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.65rem 0.75rem;
    margin-bottom: 0.5rem;
    border: 1px solid var(--neutral-stroke-rest);
    border-left: 3px solid var(--accent-fill-rest);
    border-radius: 4px;
    background: var(--neutral-layer-2);
    cursor: pointer;
}

.bizeni-ticket-workspace__activity--active,
.bizeni-ticket-workspace__activity:hover {
    background: var(--neutral-layer-3);
}

.bizeni-ticket-workspace__inline-detail {
    margin: -0.25rem 0 0.5rem 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px dashed var(--neutral-stroke-rest);
    border-radius: 4px;
}

.bizeni-ticket-workspace__service-task-row {
    padding: 0.5rem 0.65rem;
    background: var(--neutral-layer-2);
    border-radius: 4px;
    font-size: 0.9rem;
}

.bizeni-ticket-workspace__history-row {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.55rem 0.65rem;
    margin-bottom: 0.35rem;
    border: none;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
}

.bizeni-ticket-workspace__history-row:hover,
.bizeni-ticket-workspace__history-row--active {
    background: var(--neutral-layer-2);
}

@media (max-width: 960px) {
    .bizeni-ticket-workspace__grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
    }
    .bizeni-ticket-workspace__props,
    .bizeni-ticket-workspace__context {
        max-height: 240px;
    }
}