.cases-page, .case-detail-shell { height: 100%; min-height: 0; overflow: hidden; } .case-detail-shell { display: flex; flex-direction: column; background: var(--surface); } .case-detail-toolbar { display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 10px 18px; border-bottom: 1px solid var(--border); background: var(--surface-raised); } .cases-search { flex: 1 1 560px; } .cases-status-filter { display: flex; align-items: center; gap: 7px; } .cases-status-filter > span, .cases-count { color: var(--text-soft); font-size: 0.82rem; } .cases-count { margin-left: auto; } .case-detail-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; } .cases-list-viewport, .case-detail-viewport { flex: 1; min-height: 0; padding: 16px 18px 24px; } .case-detail-content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 24px; max-width: 1380px; margin: 0 auto; } .case-detail-main, .case-detail-aside { min-width: 0; } .case-detail-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border); } .case-detail-title-row h1 { margin: 4px 0 0; font-size: 1.45rem; letter-spacing: 0; } .case-detail-main > .action-blocker-hint { margin-top: 16px; } .case-detail-eyebrow { color: var(--text-soft); font-size: 0.8rem; } .case-edit-panel { display: grid; grid-template-columns: minmax(220px, 2fr) minmax(150px, 1fr); gap: 10px; margin-top: 16px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-compact); background: var(--surface-raised); } .case-edit-panel label { display: flex; min-width: 0; flex-direction: column; gap: 5px; } .case-edit-panel label > span { color: var(--text-soft); font-size: 0.8rem; } .case-change-reason { grid-column: 1 / -1; } .case-edit-panel .btn { justify-self: end; } .case-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 18px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-compact); overflow: hidden; } .case-facts > div { display: flex; min-height: 66px; flex-direction: column; gap: 4px; padding: 12px; background: var(--surface-raised); } .case-facts span, .case-history-list time, .case-timeline time { color: var(--text-soft); font-size: 0.78rem; } .case-reference-section, .case-detail-aside section { margin-top: 22px; } .case-reference-section h2, .case-detail-aside h2 { margin: 0 0 10px; font-size: 0.95rem; letter-spacing: 0; } .case-reference-list, .case-history-list { display: flex; flex-direction: column; border-top: 1px solid var(--border); } .case-reference-list > span, .case-history-list > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); } .case-evidence-section .case-reference-list > span { align-items: center; flex-wrap: wrap; } .case-evidence-section .case-reference-list small { color: var(--text-soft); } .case-timeline { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border); } .case-timeline li { display: flex; flex-direction: column; gap: 3px; padding: 10px 0 10px 14px; border-bottom: 1px solid var(--border); border-left: 2px solid var(--accent); } .case-share-dialog { width: min(860px, calc(100vw - 32px)); max-height: min(760px, calc(100vh - 32px)); } .case-decision-dialog { width: min(900px, calc(100vw - 32px)); max-height: min(820px, calc(100vh - 32px)); } .case-decision-content { display: flex; min-height: 0; flex-direction: column; gap: 14px; } .case-decision-explanation, .case-decision-protected { margin: 0; color: var(--text-soft); font-size: 0.84rem; } .case-decision-grid { grid-template-columns: minmax(0, 1fr) minmax(210px, 0.7fr); } .case-decision-content textarea { resize: vertical; } .case-decision-list { display: flex; flex-direction: column; gap: 8px; } .case-decision-list > article { padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-compact); background: var(--surface-raised); } .case-decision-heading { display: flex; align-items: center; gap: 10px; } .case-decision-heading > div:first-child { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 2px; } .case-decision-heading span { color: var(--text-soft); font-size: 0.78rem; } .case-decision-list p { display: flex; flex-direction: column; gap: 3px; margin: 10px 0 0; white-space: pre-wrap; } .case-decision-list ul { margin: 10px 0 0; padding-left: 20px; } .case-share-content { display: flex; min-height: 0; flex-direction: column; gap: 14px; } .case-share-explanation, .case-share-grants > p { margin: 0; color: var(--text-soft); font-size: 0.84rem; } .case-share-add-row { display: grid; grid-template-columns: minmax(120px, 0.7fr) minmax(220px, 1.7fr) minmax(130px, 0.8fr) auto; align-items: end; gap: 10px; } .case-share-add-row .icon-button { width: 38px; height: 38px; } .case-share-grants { overflow: auto; max-height: 280px; border-top: 1px solid var(--border); } .case-share-grant { display: grid; grid-template-columns: minmax(0, 1fr) minmax(130px, 180px) auto; align-items: center; gap: 10px; min-height: 50px; padding: 6px 0; border-bottom: 1px solid var(--border); } .case-share-grant > span { display: flex; min-width: 0; flex-direction: column; gap: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .case-share-grant > span strong { color: var(--text-soft); font-size: 0.76rem; } @media (max-width: 900px) { .cases-count { margin-left: 0; } .case-detail-content { grid-template-columns: 1fr; } .case-share-add-row { grid-template-columns: 1fr; } .case-detail-toolbar { flex-wrap: wrap; } .case-share-add-row .icon-button { justify-self: end; } }