/* Dedicated case-search layout; shared navigation and AI identity stay common. */
.cs-page { --cs-blue: #082e65; --cs-purple: #6540b9; --cs-ink: #252c3a; --cs-muted: #6c7280; color: var(--cs-ink); font-size: 15px; line-height: 1.5; max-width: 2200px; }
.app-content:has(.cs-page) { padding-top: 0; background: linear-gradient(#fff 49px, #f5f6fa 49px); background-attachment: local; }
.cs-page-heading { display: flex; align-items: baseline; gap: 22px; min-height: 49px; padding: 0 0 12px; margin: 0 0 16px; background: #fff; border-bottom: 1px solid #edf0f5; }
.cs-page-heading h1 { margin: 0; font-size: 28px; line-height: 1.4; font-weight: 700; letter-spacing: .3px; }
.cs-page-heading p { margin: 0; font-size: 16px; color: #8d919b; letter-spacing: .15px; }
.cs-layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 20vw, 396px); gap: 16px; align-items: start; }
.cs-main { min-width: 0; container-type: inline-size; }
.cs-card { border: 1px solid #e9ebf1; border-radius: 12px; background: #fff; box-shadow: 0 2px 5px #233f6e04, 0 3px 12px #233f6e06; }
.cs-page h2 { margin: 0; font-size: 21px; font-weight: 700; line-height: 1.4; color: #242a37; }
.cs-page button, .cs-page input, .cs-page select { font: inherit; }
.cs-page button { cursor: pointer; }
.cs-page button:disabled { opacity: .45; cursor: not-allowed; }
.cs-page button:focus-visible, .cs-page input:focus-visible, .cs-page select:focus-visible { outline: 2px solid #5479df; outline-offset: 3px; }
.cs-page [hidden] { display: none !important; }
.cs-button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 6px 20px; border: 1px solid #d0d6e0; border-radius: 5px; background: linear-gradient(#fff,#fdfefe); color: #2b497c; font-size: 15px !important; line-height: 1.4; white-space: nowrap; transition: background .15s, border-color .15s; }
.cs-button:hover { background: #f3f6fd; border-color: #9ab1d3; }
.cs-button.cs-primary { color: #fff; border-color: #103c78; background: linear-gradient(110deg, #083674, #072b5d); box-shadow: 0 2px 3px #123e7210, inset 0 1px 1px #ffffff15; }
.cs-button.cs-accent { color: #fff; border-color: #2a61bd; background: linear-gradient(110deg, #2b64d0, #2558b9); box-shadow: 0 2px 4px #2b5aba12; }
.cs-button.is-active { color: #2158ba; border-color: #7f9ddc; background: #eef3ff; }
.cs-button.cs-purple { color: #6744b8; border-color: #b5a1dc; background: transparent; }
.cs-text-button { display: inline-flex; align-items: center; gap: 4px; color: #3563b2; padding: 5px 8px; border: 0; background: transparent; font-size: 15px !important; }
.cs-filter-card { padding: 20px 22px 18px; margin-bottom: 12px; }
.cs-filter-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.cs-filter-heading > div { display: flex; align-items: center; gap: 20px; }
.cs-filter-heading label { display: flex; align-items: center; gap: 7px; font-size: 14px; white-space: nowrap; color: #373d49; }
.cs-template, .cs-page-size { padding: 6px 12px; min-height: 36px; border: 1px solid #e0e3ea; border-radius: 5px; color: #505767; background: #fff; font-size: 14px !important; }
.cs-template { width: 210px; max-width: 100%; }
.cs-filter-heading .cs-button { min-height: 32px; padding: 3px 12px; font-size: 14px !important; }
.cs-filter-grid { display: grid; grid-template-columns: minmax(0, 1.48fr) minmax(0, 1fr) minmax(0, .96fr); gap: 22px 26px; }
.cs-field { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: start; gap: 10px; font-size: 15px; min-width: 0; color: #343944; }
.cs-field > span, .cs-field > label { padding-top: 8px; white-space: nowrap; }
.cs-field > div { min-width: 0; }
.cs-field small { display: block; margin: 4px 0 0 7px; color: #858b97; font-size: 12px; line-height: 1.4; }
.cs-input { width: 100%; min-width: 0; height: 38px; padding: 7px 11px; border: 1px solid #dfe2e9; border-radius: 5px; background: #fff; color: #505765; font-size: 15px !important; box-shadow: inset 0 1px 2px #223c5e03; }
.cs-input::placeholder { color: #a2a6b0; }
.cs-multiselect { position: relative; min-width: 0; }
.cs-multiselect > summary { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 38px; border: 1px solid #dfe2e9; border-radius: 5px; padding: 4px 9px; cursor: pointer; list-style: none; color: #7e899a; }
.cs-multiselect > summary::-webkit-details-marker { display: none; }
.cs-multiselect > summary > span { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.cs-multiselect > summary > svg { flex-shrink: 0; }
.cs-filter-chip { display: inline-flex; align-items: center; gap: 7px; background: #edf3fd; color: #42659b; border-radius: 4px; padding: 3px 6px; font-size: 14px; }
.cs-chip-remove { border: 0; padding: 0; color: #768eaf; background: transparent; font-size: 15px !important; line-height: 1; }
.cs-select-placeholder { color: #57657a; }
.cs-multi-options { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 5; padding: 7px; border: 1px solid #dce0e8; border-radius: 5px; background: #fff; box-shadow: 0 6px 18px #263b5c20; max-height: 210px; overflow: auto; }
.cs-multi-options label { display: flex; gap: 8px; align-items: center; padding: 7px 5px; cursor: pointer; }
.cs-multi-options label:hover { background: #f3f6fc; }
.cs-date-controls { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.cs-date-range { display: flex; align-items: center; gap: 5px; border: 1px solid #dfe2e9; border-radius: 5px; min-height: 38px; padding: 0 7px; min-width: 0; flex: 1; }
.cs-date-range input { width: 118px; min-width: 0; flex: 1; font-size: 12px; padding: 3px 0; border: 0; background: transparent; color: #505765; }
.cs-date-range > span { font-size: 11px; color: #69768b; }
.cs-date-type { border: 1px solid #e8edf6; background: #f0f4fb; color: #3e5c96; border-radius: 4px; font-size: 12px !important; padding: 5px; max-width: 90px; }
.cs-search-input { position: relative; }
.cs-search-input input { padding-right: 28px; }
.cs-search-input svg { position: absolute; right: 10px; top: 11px; color: #919aa9; pointer-events: none; }
.cs-filter-actions { display: flex; align-items: center; gap: 20px; margin-top: 20px; }
.cs-filter-actions > .cs-button { min-width: 114px; }
.cs-filter-actions > span { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: #868c98; font-size: 13px; }
.cs-results { padding: 15px 16px 24px; }
.cs-results-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 3px 10px; }
.cs-results-heading > span { color: #687080; font-size: 15px; }
.cs-results-tools { display: flex; align-items: center; gap: 16px; padding: 0 3px 9px; }
.cs-select-all { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: #535c6e; white-space: nowrap; }
.cs-page input[type=checkbox] { appearance: none; width: 17px; height: 17px; border: 1px solid #b8c5d8; border-radius: 4px; background: #fff; margin: 0; flex-shrink: 0; position: relative; cursor: pointer; }
.cs-page input[type=checkbox]:checked { background: #2b61bd; border-color: #2b61bd; }
.cs-page input[type=checkbox]:checked::after { content: ''; position: absolute; left: 5px; top: 2px; width: 5px; height: 9px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.cs-page input[type=checkbox]:indeterminate { background: #2b61bd; border-color: #2b61bd; }
.cs-page input[type=checkbox]:indeterminate::after { content: ''; position: absolute; left: 3px; right: 3px; top: 7px; height: 2px; background: white; }
.cs-page input[type=checkbox]:disabled { background: #f5f6f8; border-color: #dce0e6; cursor: default; }
.cs-page-size { margin-left: auto; min-width: 116px; }
.cs-patients { border: 1px solid #e8ebf1; border-radius: 6px; overflow: hidden; }
.cs-patient { border-bottom: 1px solid #edf0f5; background: #fff; }
.cs-patient:nth-child(2n + 1) { background: #fff; }
.cs-patient:last-child { border-bottom: 0; }
.cs-patient:hover { background: #f9fbfe; }
.cs-patient.is-selected { background: #f7f9fc; }
.cs-patient-row { display: grid; grid-template-columns: 22px minmax(180px, 1.2fr) minmax(100px, .9fr) minmax(165px, 1.05fr) minmax(165px, 1.05fr) 70px 80px 34px; gap: 12px; align-items: center; min-height: 82px; padding: 10px 12px; }
.cs-person { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 0; border: 0; background: transparent; text-align: left; color: inherit; }
.cs-person > span:last-child { min-width: 0; }
.cs-avatar { display: inline-grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; background: linear-gradient(145deg,#5080ce,#3c67b2); color: #fff; font-size: 25px; box-shadow: inset 0 1px 1px #ffffff12; }
.cs-person-name { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 3px; }
.cs-person-name strong { color: #202634; font-size: 20px; font-weight: 700; line-height: 1.4; white-space: nowrap; }
.cs-person small { color: #606a7c; font-size: 14px; overflow-wrap: anywhere; }
.cs-patient-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.cs-tag { display: inline-flex; align-items: center; justify-content: center; padding: 3px 7px; border: 1px solid #ede7fb; border-radius: 4px; color: #6542b4; background: #f4effc; font-size: 13px; line-height: 1.4; white-space: nowrap; }
.cs-tag--gray { color: #6e7685; background: #f1f2f5; border-color: #e7e9ef; }
.cs-tag--green { color: #33845b; background: #edf8f1; border-color: #cfe9d9; }
.cs-tag--blue { color: #326cb0; background: #edf5ff; border-color: #d4e5f8; }
.cs-clinical, .cs-treatment { display: flex; flex-direction: column; gap: 3px; color: #586172; font-size: 14px; line-height: 1.5; min-width: 0; overflow-wrap: anywhere; }
.cs-clinical { padding-left: 12px; border-left: 1px solid #edf0f5; }
.cs-patient-row > .cs-button { min-width: 0; padding-inline: 12px; min-height: 34px; }
.cs-expand { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid #dfe3eb; border-radius: 5px; background: white; color: #6b778c; }
.cs-row-details { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 14px 20px 18px 48px; background: #f5f8fd; color: #63728a; font-size: 12px; }
.cs-pagination { display: flex; justify-content: center; gap: 16px; margin-top: 26px; }
.cs-pagination .cs-button { min-width: 40px; padding: 6px 16px; }
.cs-empty { padding: 70px 20px; text-align: center; color: #8c96a7; font-size: 14px; }
.cs-local-tools { margin-top: 14px; color: #637893; font-size: 12px; }
.cs-local-tools > summary { cursor: pointer; padding: 8px 3px; }
.cs-local-tools .product-editor-details { margin-top: 8px; }
.cs-aside { display: grid; gap: 9px; min-width: 0; }
.cs-assistant { padding: 16px 16px 2px; }
.cs-assistant-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 17px; }
.cs-assistant-heading h2 { font-size: 19px; }
.cs-assistant-heading p { margin: 3px 0 0; color: #7f838e; font-size: 12px; line-height: 1.6; }
.cs-advice { position: relative; overflow: hidden; border-radius: 10px; padding: 16px 14px; color: #fff; background: linear-gradient(115deg,#6942cd,#7847d7); box-shadow: inset 0 1px 0 #ffffff12; }
.cs-advice::after { content: ''; position: absolute; right: -22px; bottom: -60px; width: 160px; height: 90px; border-radius: 45%; transform: rotate(-30deg); background: #ffffff0b; box-shadow: 0 -15px 0 #ffffff05; pointer-events: none; }
.cs-advice p { margin: 0; font-size: 16px; line-height: 1.85; font-weight: 400; }
.cs-advice b { font-weight: 500; }
.cs-assistant-section { padding: 24px 0 0; }
.cs-aside h3 { margin: 0 0 14px; font-size: 16px; font-weight: 600; color: var(--cs-purple); }
.cs-advice h3 { margin: 0 0 9px; color: #fff; font-size: 18px; }
.cs-assistant-section h3 small { float: right; color: #91899f; font-size: 11px; font-weight: 400; line-height: 24px; }
.cs-recommendations { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.cs-recommendations > div { padding: 11px 10px; border: 1px solid #eaecf0; background: #f6f7f9; border-radius: 7px; }
.cs-recommendations span { font-size: 14px; white-space: nowrap; }
.cs-recommendations strong { display: block; font-size: 34px; font-weight: 500; line-height: 1.25; margin-top: 12px; font-variant-numeric: tabular-nums; }
.cs-recommendations strong small { font-size: 13px; font-weight: 400; }
.cs-recommendations .is-green { background: #f3faf7; border-color: #e6f1eb; color: #318c69; }
.cs-recommendations .is-orange { background: #fffbf2; border-color: #fbefdc; color: #df921f; }
.cs-risk-tags { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px 10px; align-items: center; }
.cs-risk-tags .cs-tag { padding: 5px 6px; border-color: #d1c1ea; background: #fcfaff; font-size: 14px; }
.cs-assistant-note { color: #918b9c; font-size: 11px; margin: 9px 0 0; }
.cs-completion { margin-top: 21px; padding: 16px 0; border-top: 1px solid #eeedf2; }
.cs-completion ul { padding-left: 18px; margin: 0; color: #637087; font-size: 13px; line-height: 1.9; }
.cs-completion .cs-text-button { color: var(--cs-purple); padding: 8px 0 0; font-size: 12px !important; }
.cs-similar { padding: 15px 16px; }
.cs-similar > div { border: 1px solid #dcd0ef; background: #faf8ff; border-radius: 6px; padding: 11px 10px; display: flow-root; }
.cs-similar p { margin: 0 0 10px; color: #575f71; line-height: 1.85; font-size: 14px; }
.cs-similar button { float: right; font-size: 14px !important; min-height: 32px; }
.cs-ai-notice { display: flex; gap: 12px; padding: 13px 15px; border-radius: 8px; border: 1px solid #e5eaf3; background: #f4f7fd; color: #526689; font-size: 14px; line-height: 1.8; }
.cs-ai-notice svg { flex-shrink: 0; color: #305ba0; }
@media(min-width:1900px) { .cs-layout { grid-template-columns:minmax(0,1fr) 384px; } .cs-patient-row { min-height:86px; } .cs-filter-grid { gap:26px 35px; } .cs-filter-card { padding:22px; }  .cs-advice p { font-size:16px; }  }
@container(max-width:1100px) { .cs-clinical,.cs-treatment { font-size:13px; line-height:1.45; gap:1px; } .cs-filter-grid { grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap:18px; } .cs-patient-row { grid-template-columns:20px minmax(150px,1.1fr) minmax(90px,.7fr) minmax(145px,1fr) 62px 64px 28px; gap:9px; } .cs-treatment { grid-column:4; grid-row:2; } .cs-clinical { grid-column:4; grid-row:1; padding-left:0; border:0; } .cs-patient-row > input,.cs-person,.cs-patient-tags,.cs-patient-row > .cs-tag,.cs-patient-row > .cs-button,.cs-expand { grid-row:1 / 3; } .cs-patient-row > .cs-tag { grid-column:5; } .cs-patient-row > .cs-button { grid-column:6; } .cs-expand { grid-column:7; } .cs-filter-actions { flex-wrap:wrap; gap:12px; } .cs-filter-actions > span { flex-basis:100%; margin-left:0; } }
@media(max-width:1350px) { .cs-layout { grid-template-columns:minmax(0,1fr) 290px; gap:12px; } .cs-filter-heading { flex-wrap:wrap; } .cs-assistant { padding-inline:12px; } .cs-recommendations { gap:6px; } .cs-recommendations > div { padding-inline:6px; } }
@container(max-width:760px) { .cs-patient-row { grid-template-columns:20px minmax(150px,1fr) 62px 64px 28px; } .cs-patient-tags { grid-column:2; grid-row:2; } .cs-person { grid-column:2; grid-row:1; } .cs-clinical { grid-column:2 / 4; grid-row:3; } .cs-treatment { grid-column:4 / 6; grid-row:3; } .cs-patient-row > .cs-tag { grid-column:3; grid-row:1 / 3; } .cs-patient-row > .cs-button { grid-column:4; grid-row:1 / 3; } .cs-expand { grid-column:5; grid-row:1 / 3; } .cs-filter-grid { grid-template-columns:1fr 1fr; } .cs-date-field { grid-column:1 / -1; } }
@media(max-width:1100px) { .cs-layout { grid-template-columns:1fr; } .cs-aside { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); align-items:start; } .cs-assistant { grid-row:span 2; } }
@media(max-width:650px) { .cs-page-heading { flex-wrap:wrap; gap:8px; } .cs-aside { grid-template-columns:1fr; } .cs-filter-heading > div { flex-wrap:wrap; gap:8px; } .cs-results-tools { flex-wrap:wrap; gap:8px; } .cs-filter-grid { grid-template-columns:1fr; } .cs-field { grid-template-columns:65px minmax(0,1fr); } .cs-patient-row { grid-template-columns:18px minmax(110px,1fr) 58px 58px 26px; gap:6px; padding-inline:8px; } .cs-avatar { width:32px; height:32px; font-size:18px; } .cs-person { gap:7px; } .cs-person-name strong { font-size:14px; } .cs-person small,.cs-clinical,.cs-treatment { font-size:11px; } .cs-page-size { min-width:82px; } .cs-filter-card,.cs-results { padding-inline:12px; } .cs-filter-heading label { white-space:normal; } .cs-template { max-width:155px; } }