/* app.css — components specific to the unified HMIS (on top of tokens.css + shell.css) */

.desk-grid { display: grid; grid-template-columns: 320px 1fr; gap: 18px; align-items: start; }
@media (max-width: 1080px) { .desk-grid { grid-template-columns: 1fr; } }
.desk-left { position: sticky; top: 12px; }

.tpl-results { margin-top: 10px; max-height: 62vh; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.tpl-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 11px; border: 1px solid var(--border-color); border-radius: 9px; cursor: pointer; transition: .12s; background: var(--surface-1, rgba(255,255,255,.02)); }
.tpl-row:hover { border-color: var(--accent, #14b8a6); transform: translateX(2px); }

.chip-wrap { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip-tog { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: .8rem; font-weight: 600; cursor: pointer; user-select: none; border: 1px solid var(--border-color); color: var(--text-muted); transition: .12s; }
.chip-tog::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .35; }
.chip-tog.on { color: var(--accent, #14b8a6); border-color: var(--accent, #14b8a6); background: var(--accent-glow, rgba(20,184,166,.14)); }
.chip-tog.on::before { opacity: 1; }

.sub-label { display: block; font-size: .74rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 5px; }

.med-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.med-grid { flex: 1; display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }
@media (max-width: 640px) { .med-grid { grid-template-columns: 1fr; } }

/* pages/filecompile.js — File Compilation (restored from v1.0's suite.css) */
.fc-list { display: flex; flex-direction: column; gap: 6px; }
.fc-row { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border: 1px solid var(--border-color); border-radius: 11px; background: var(--surface-1, #fff); cursor: pointer; transition: .12s; }
.fc-row:hover { border-color: var(--accent, #14b8a6); }
.fc-row:has(.fc-cb:checked) { border-color: var(--accent, #14b8a6); background: var(--accent-glow, rgba(20,184,166,.08)); }
.fc-cb { width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--accent, #14b8a6); cursor: pointer; }
.fc-rowmain { min-width: 0; flex: 1; }
.fc-rowt { font-weight: 700; font-size: 12.5px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-rowsub { font-size: 10.5px; color: var(--text-muted); margin-top: 2px; font-family: "SF Mono", Menlo, monospace; }
.fc-rowacts { display: flex; gap: 6px; flex: 0 0 auto; }

.fc-bar { position: sticky; bottom: 10px; z-index: 8; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding: 10px 14px; border: 1px solid var(--border-color); border-radius: 13px; background: var(--surface-1, #fff); box-shadow: 0 8px 24px rgba(16,24,40,.10); }
.fc-bar.on { border-color: var(--accent, #14b8a6); box-shadow: 0 0 0 3px var(--accent-glow, rgba(20,184,166,.14)), 0 8px 24px rgba(16,24,40,.10); }
.fc-barn { font-size: 12.5px; font-weight: 700; color: var(--text-muted); }
.fc-bar.on .fc-barn { color: var(--accent, #14b8a6); }

.fc-sheets { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 14px 0; overflow-x: auto; background: var(--surface-2, #eef2f8); border-radius: 12px; }
.fc-sheet { flex: 0 0 auto; width: 210mm; min-height: 297mm; padding: 14mm 13mm; background: #fff; color: #111827; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.fc-shead { border-bottom: 2px solid #4f46e5; padding-bottom: 6px; margin-bottom: 12px; }
.fc-hosp { font-size: 15px; font-weight: 800; color: #4f46e5; }
.fc-pt { font-size: 12.5px; margin-top: 2px; color: #111827; }
.fc-kind { font-size: 10.5px; color: #5c6478; margin-top: 2px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; }
.fc-sbody { flex: 1; }
.fc-sfoot { border-top: 1px solid #e5e7eb; margin-top: 10px; padding-top: 5px; display: flex; justify-content: space-between; font-size: 10px; color: #6b7280; }
.fc-fb { columns: 1; }
.fc-pre { white-space: pre-wrap; word-break: break-word; font-family: "SF Mono", Menlo, monospace; font-size: 11.5px; line-height: 1.6; margin: 0; color: #111827; }
@media (max-width: 900px) { .fc-sheets { align-items: flex-start; padding-left: 8px; padding-right: 8px; } }

.fc-edit { width: 100%; min-height: 320px; max-height: 56vh; overflow: auto; border: 1px solid var(--border-color); border-radius: 11px; padding: 12px 14px; background: var(--surface-1, #fff); }
.fc-edit:focus { outline: none; border-color: var(--accent, #14b8a6); box-shadow: 0 0 0 3px var(--accent-glow, rgba(20,184,166,.14)); }
.fc-editrich { font-size: 13px; }
.fc-editraw { font-family: "SF Mono", Menlo, monospace; font-size: 11.5px; white-space: pre-wrap; }