/* Notes reuse the application panels, buttons, fields, badges and dialog. */
.case-notes-panel { display: grid; gap: var(--case-gap); min-width: 0; container: case-notes / inline-size; }
.case-notes-statusbar,.case-notes-pagination { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.case-notes-statusbar { padding:0 2px; }
.case-notes-meta { margin:0; font-size:11px; line-height:1.6; color:var(--sa-color-muted); overflow-wrap:anywhere; }
.case-notes-layout { display:grid; grid-template-columns:minmax(265px,.9fr) minmax(350px,1.5fr) minmax(220px,.7fr); gap:var(--case-gap); align-items:start; min-width:0; }
.case-notes-panel .legal-panel,.case-notes-detail,.case-notes-browser,.case-notes-aside { min-width:0; }
.case-notes-panel .legal-panel__head { gap:10px; flex-wrap:wrap; }
.case-notes-panel .legal-panel__head .sa-button { min-height:34px; padding:7px 10px; font-size:11px; }
.case-notes-panel .case-heading h2 { margin:0; }
.case-notes-search { margin:14px 0 10px; position:relative; }
.case-notes-panel .legal-field { min-width:0; gap:5px; font-size:11px; }
.case-notes-panel .legal-field input,.case-notes-panel .legal-field select,.case-notes-panel .legal-field textarea { min-width:0; width:100%; font-size:12px; }
.case-notes-scopes { display:flex; gap:5px; flex-wrap:wrap; }
.case-notes-scope { border:1px solid var(--sa-color-border); border-radius:var(--sa-radius-control); padding:6px 10px; background:var(--sa-color-card); color:var(--sa-color-navy); font:inherit; font-size:11px; cursor:pointer; }
.case-notes-scope.is-active { color:var(--sa-color-card); background:var(--case-accent); border-color:var(--case-accent); }
.case-notes-filter-details { margin-top:10px; font-size:11px; color:var(--sa-color-muted); }
.case-notes-filter-details summary,.case-notes-parameters summary { cursor:pointer; padding:7px 0; color:var(--sa-color-navy); font-weight:600; }
.case-notes-filter-grid,.case-notes-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:10px 0; }
.case-notes-count { margin:12px 0 5px; }
.case-notes-list { position:relative; overflow:auto; max-height:690px; margin:0 -4px; padding:0 4px; }
.case-notes-row { display:block; width:100%; text-align:left; background:transparent; border:0; border-bottom:1px solid var(--sa-color-border); padding:14px 10px; color:var(--sa-color-text); font:inherit; cursor:pointer; border-radius:var(--sa-radius-control); }
.case-notes-row:hover { background:var(--sa-color-table-head); }
.case-notes-row.is-active { background:color-mix(in srgb,var(--case-accent) 7%,var(--sa-color-card)); box-shadow:inset 2px 0 var(--case-accent); }
.case-notes-row__title { display:flex; align-items:flex-start; gap:8px; color:var(--sa-color-navy); font-size:12px; font-weight:600; line-height:1.5; overflow-wrap:anywhere; }
.case-notes-row__title .case-icon { flex:0 0 18px; width:18px; height:18px; color:var(--case-accent); margin-top:2px; }
.case-notes-row__snippet { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin:5px 0 7px 26px; font-size:11px; line-height:1.5; color:var(--sa-color-muted); overflow-wrap:anywhere; }
.case-notes-row__meta { display:flex; flex-wrap:wrap; gap:4px 10px; margin-left:26px; font-size:10px; color:var(--sa-color-muted); line-height:1.5; }
.case-notes-row__meta time { margin-left:auto; }
.case-notes-row__labels { display:flex; flex-wrap:wrap; gap:5px; margin:7px 0 0 26px; }
.case-notes-row__labels .case-badge { font-size:9px; padding:3px 6px; }
.case-notes-pagination { margin-top:14px; }
.case-notes-empty { padding:52px 18px; text-align:center; color:var(--sa-color-muted); font-size:13px; line-height:1.7; }
.case-notes-empty>.case-icon { width:34px; height:34px; margin:0 auto 10px; color:var(--case-accent); }
.case-notes-empty h2 { font-size:17px; color:var(--sa-color-navy); margin:8px 0; }
.case-notes-empty p { margin:8px auto; max-width:420px; }
.case-notes-detail-head { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; padding-bottom:16px; border-bottom:1px solid var(--sa-color-border); }
.case-notes-detail-head>div { min-width:0; }
.case-notes-detail-head h2 { margin:0 0 7px; color:var(--sa-color-navy); font-size:17px; line-height:1.5; overflow-wrap:anywhere; }
.case-notes-actions { display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.case-notes-actions .sa-button { min-height:32px; padding:6px 10px; font-size:11px; }
.case-notes-menu { margin-top:12px; border-bottom:1px solid var(--sa-color-border); padding-bottom:12px; }
.case-notes-menu summary { width:fit-content; cursor:pointer; color:var(--case-accent); font-size:12px; }
.case-notes-menu .case-notes-actions { margin-top:10px; }
.case-notes-body { margin-top:20px; color:var(--sa-color-text); font-size:13px; line-height:1.85; overflow-wrap:anywhere; }
.case-notes-body p { margin:0 0 14px; }
.case-notes-body h2,.case-notes-body h3 { color:var(--sa-color-navy); font-size:15px; line-height:1.5; margin:24px 0 10px; }
.case-notes-body h3 { font-size:14px; }
.case-notes-body ul,.case-notes-body ol { padding-left:23px; }
.case-notes-body blockquote { margin:14px 0; border-left:3px solid var(--case-accent); padding:9px 14px; background:var(--sa-color-table-head); border-radius:var(--sa-radius-control); }
.case-notes-body a { color:var(--case-accent); text-decoration:underline; }
.case-notes-body li[data-check-id] { list-style:none; position:relative; padding-left:24px; margin-left:-22px; cursor:pointer; }
.case-notes-body li[data-check-id]::before { content:'☐'; position:absolute; left:0; color:var(--case-accent); font-size:17px; line-height:1.5; }
.case-notes-body li[data-checked="true"]::before { content:'☑'; }
.case-notes-body li[data-checked="true"] { text-decoration:line-through; text-decoration-color:var(--sa-color-muted); }
.case-notes-reader li[data-check-id] { cursor:default; }
.case-notes-aside { display:grid; gap:var(--case-gap); }
.case-notes-aside h3 { font-size:13px; color:var(--sa-color-navy); margin:0 0 12px; }
.case-notes-parameters>summary { display:none; }
.case-notes-parameters>div { display:grid; gap:13px; }
.case-notes-info { display:grid; gap:4px; font-size:12px; color:var(--sa-color-text); overflow-wrap:anywhere; }
.case-notes-info>span:first-child { color:var(--sa-color-muted); font-size:10px; }
.case-notes-tags { display:flex; flex-wrap:wrap; gap:7px; }
.case-notes-tag { border-radius:var(--sa-radius-control); background:var(--sa-color-table-head); color:var(--case-accent); padding:5px 9px; font-size:11px; overflow-wrap:anywhere; }
.case-notes-linked { display:grid; gap:8px; }
.case-notes-linked-item { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; border:1px solid var(--sa-color-border); border-radius:var(--sa-radius-control); padding:10px; min-width:0; font-size:11px; }
.case-notes-linked-item>div { min-width:0; }
.case-notes-linked-item strong { display:block; overflow-wrap:anywhere; font-weight:600; color:var(--sa-color-navy); }
.case-notes-linked-item .case-text-button { font-size:11px; white-space:normal; }
.case-notes-field-wide { grid-column:1/-1; }
.case-notes-editor { display:grid; gap:12px; margin-top:14px; }
.case-notes-editor .case-notes-fields { margin:0; }
.case-notes-editor-title { font-weight:600; }
.case-notes-toolbar { display:flex; flex-wrap:wrap; gap:4px; align-items:center; padding:8px; border:1px solid var(--sa-color-border); border-radius:var(--sa-radius-control) var(--sa-radius-control) 0 0; background:var(--sa-color-table-head); }
.case-notes-toolbar button,.case-notes-toolbar select { border:1px solid transparent; border-radius:4px; background:var(--sa-color-card); color:var(--sa-color-navy); padding:6px 8px; font:inherit; font-size:11px; cursor:pointer; min-height:30px; }
.case-notes-toolbar button:hover { border-color:var(--sa-color-border); }
.case-notes-rich { min-height:320px; max-height:none; margin:0; padding:16px; border:1px solid var(--sa-color-border); border-top:0; border-radius:0 0 var(--sa-radius-control) var(--sa-radius-control); background:var(--sa-color-card); outline-offset:-2px; white-space:normal; }
.case-notes-rich:empty::before { content:attr(data-placeholder); color:var(--sa-color-muted); pointer-events:none; }
.case-notes-editor-footer { display:flex; flex-wrap:wrap; gap:10px; align-items:center; border-top:1px solid var(--sa-color-border); padding-top:14px; }
.case-notes-editor-footer .case-notes-meta { flex-basis:100%; }
.case-notes-editor-status { min-height:20px; }
.case-notes-error { color:var(--sa-color-red); font-size:11px; line-height:1.5; margin:4px 0; }
.case-notes-panel [aria-invalid="true"] { border-color:var(--sa-color-red); }
.case-notes-notice { margin:12px 0; padding:12px; border:1px solid var(--sa-color-border); border-left:3px solid var(--case-accent); border-radius:var(--sa-radius-control); background:var(--sa-color-table-head); font-size:12px; line-height:1.7; color:var(--sa-color-text); }
.case-notes-notice--warning { border-left-color:var(--sa-color-orange); }
.case-notes-recipients { display:grid; gap:8px; max-height:220px; overflow:auto; padding:3px; }
.case-notes-recipients label,.case-notes-checkbox { display:flex; gap:8px; align-items:flex-start; font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
.case-notes-recipients input,.case-notes-checkbox input { margin-top:4px; flex-shrink:0; accent-color:var(--case-accent); }
.case-notes-dialog { max-width:min(900px,calc(100vw - 32px)); width:700px; }
.case-notes-dialog-body { display:grid; gap:14px; margin:14px 0; min-width:0; }
.case-notes-modal-content { display:grid; gap:14px; min-width:0; }
.case-notes-dialog .case-fabula-actions { flex-wrap:wrap; }
.case-notes-dialog .legal-field { display:grid; gap:5px; }
.case-notes-compare { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.case-notes-compare>section { min-width:0; padding:12px; border:1px solid var(--sa-color-border); border-radius:var(--sa-radius-control); }
.case-notes-compare h3 { font-size:13px; margin:0 0 10px; }
.case-notes-compare pre { white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; font-size:12px; max-height:360px; overflow:auto; line-height:1.7; margin:0; }
.case-notes-compare mark { background:color-mix(in srgb,var(--sa-color-gold) 25%,var(--sa-color-card)); color:inherit; }
.case-notes-ai-source { box-sizing:border-box; width:100%; min-height:180px; resize:vertical; padding:12px; border:1px solid var(--sa-color-border); border-radius:var(--sa-radius-control); color:var(--sa-color-text); background:var(--sa-color-card); font:inherit; font-size:12px; line-height:1.7; }
.case-notes-ai-source-preview { white-space:pre-wrap; overflow-wrap:anywhere; max-height:280px; overflow:auto; padding:12px; background:var(--sa-color-table-head); border-radius:var(--sa-radius-control); font:inherit; font-size:12px; line-height:1.7; }
.case-notes-ai-text { margin:0; max-height:400px; overflow:auto; }
.case-notes-ai-text>h2:first-child,.case-notes-ai-text>h3:first-child { margin-top:0; }
.case-notes-history-row { display:flex; flex-wrap:wrap; gap:8px; padding:10px 0; border-bottom:1px solid var(--sa-color-border); align-items:center; }
.case-notes-back { display:none; margin-bottom:14px; }
.case-notes-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(max-width:1500px) { .case-notes-layout { grid-template-columns:minmax(260px,.8fr) minmax(340px,1.45fr); } .case-notes-aside { grid-column:2; grid-template-columns:repeat(2,minmax(0,1fr)); } .case-notes-browser { grid-row:1/3; } .case-notes-parameters { grid-column:1/-1; } .case-notes-parameters>summary { display:block; } .case-notes-parameters>h3 { display:none; } .case-notes-parameters>div { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:1050px) { .case-notes-layout { grid-template-columns:minmax(235px,.75fr) minmax(0,1.3fr); } .case-notes-detail-head { flex-direction:column; } .case-notes-aside { grid-template-columns:minmax(0,1fr); } }
@media(max-width:760px) { .case-notes-layout { grid-template-columns:minmax(0,1fr); } .case-notes-browser { grid-row:auto; } .case-notes-aside { grid-column:1; } .case-notes-panel[data-mobile-detail="true"] .case-notes-browser { display:none; } .case-notes-panel:not([data-mobile-detail="true"]) .case-notes-detail,.case-notes-panel:not([data-mobile-detail="true"]) .case-notes-aside { display:none; } .case-notes-back { display:inline-flex; } .case-notes-list { max-height:none; } .case-notes-compare { grid-template-columns:minmax(0,1fr); } .case-notes-panel .legal-field input,.case-notes-panel .legal-field select { font-size:16px; } }
@media(max-width:430px) { .case-notes-fields,.case-notes-filter-grid,.case-notes-parameters>div { grid-template-columns:minmax(0,1fr); } .case-notes-field-wide { grid-column:1; } .case-notes-rich { padding:12px; } }
/* Available panel width also changes with the application sidebar and page zoom. */
@container case-notes (max-width:1040px) { .case-notes-layout { grid-template-columns:minmax(235px,.8fr) minmax(0,1.45fr); } .case-notes-aside { grid-column:2; grid-template-columns:repeat(2,minmax(0,1fr)); } .case-notes-browser { grid-row:1/3; } .case-notes-parameters { grid-column:1/-1; } .case-notes-parameters>summary { display:block; } .case-notes-parameters>h3 { display:none; } .case-notes-parameters>div { grid-template-columns:repeat(2,minmax(0,1fr)); } .case-notes-detail-head { flex-direction:column; } }
@container case-notes (max-width:800px) { .case-notes-aside { grid-template-columns:minmax(0,1fr); } }
@container case-notes (max-width:680px) { .case-notes-layout { grid-template-columns:minmax(0,1fr); } .case-notes-browser { grid-row:auto; } .case-notes-aside { grid-column:1; } .case-notes-panel[data-mobile-detail="true"] .case-notes-browser { display:none; } .case-notes-panel:not([data-mobile-detail="true"]) .case-notes-detail,.case-notes-panel:not([data-mobile-detail="true"]) .case-notes-aside { display:none; } .case-notes-back { display:inline-flex; } .case-notes-list { max-height:none; } .case-notes-compare { grid-template-columns:minmax(0,1fr); } .case-notes-panel .legal-field input,.case-notes-panel .legal-field select { font-size:16px; } }
@container case-notes (max-width:380px) { .case-notes-fields,.case-notes-filter-grid,.case-notes-parameters>div { grid-template-columns:minmax(0,1fr); } .case-notes-field-wide { grid-column:1; } .case-notes-rich { padding:12px; } }
