/* Project Name: EMR | Application: PHMD-EMR | Author: EMR Dev
 * File: public/app.css | Version: 0.8.2 | Created: 2026-11-09
 * Description: Responsive foundation interface. Copyright ownership TBD. All rights reserved.
 */
:root { color-scheme: light; font: 16px/1.6 system-ui, sans-serif; color: #193549; background: #f4f7fa; }
* { box-sizing: border-box; }
body { margin: 0; }
header { background: white; padding: 20px max(24px, calc((100% - 1040px) / 2)); display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #dce5ea; }
header a { font-weight: 800; font-size: 24px; text-decoration: none; color: #193549; }
header span { color: #067d78; margin-left: 5px; }
small, .muted { color: #526b7b; }
.notice { padding: 10px 24px; text-align: center; background: #fff0cc; color: #6b4909; font-size: 13px; }
main { max-width: 1088px; margin: 44px auto 80px; padding: 0 24px; }
h1 { font-size: clamp(28px, 4vw, 40px); letter-spacing: -1px; line-height: 1.2; }
h2 { font-size: 21px; margin-top: 0; }
.lead { font-size: 20px; max-width: 650px; }
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.card { background: white; border: 1px solid #dce5ea; border-radius: 14px; padding: 28px; margin: 24px 0; box-shadow: 0 4px 14px #20354906; }
.narrow { max-width: 480px; }
label { display: block; font-weight: 600; margin: 18px 0; }
input { display: block; width: 100%; border: 1px solid #849baa; border-radius: 6px; padding: 12px; font: inherit; margin-top: 6px; }
.checkbox { display: inline-block; width: auto; margin-right: 8px; }
button, .button { display: inline-block; background: #076d68; color: white; border: 0; border-radius: 6px; padding: 11px 20px; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
a { color: #006863; }
:focus-visible { outline: 3px solid #c26c00; outline-offset: 3px; }
.error { color: #a92126; }
.success { padding: 14px 18px; border-radius: 8px; background: #dff3e8; color: #165637; }
.workspace-nav { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 22px 0; }
.workspace-nav a { font-weight: 650; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th, td { padding: 14px 12px; border-bottom: 1px solid #dce5ea; vertical-align: top; }
th { color: #526b7b; font-size: 13px; }
td form { margin: 0; }
.secondary { color: #076d68; background: #edf5f4; font-size: 14px; white-space: nowrap; }
.pagination { display: flex; align-items: center; gap: 20px; margin-top: 20px; }
.patients { list-style: none; padding: 0; }
.patients li { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid #e3e9ed; padding: 14px 0; }
footer { text-align: center; padding: 24px; font-size: 13px; color: #526b7b; }
@media (max-width: 600px) { .grid { grid-template-columns: 1fr; gap: 0; } header small { display: none; } .card { padding: 20px; } .patients li { flex-direction: column; gap: 2px; } }

/* Registry layout: responsive controls, readable records and explicit focus. */
.section-heading, .actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.actions { justify-content: flex-start; margin-top: 24px; }
.eyebrow { color: #067d78; font-size: 13px; font-weight: 750; letter-spacing: .04em; overflow-wrap: anywhere; }
.editor { max-width: 760px; }
.search-form { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.search-form label { flex: 1 1 260px; margin: 0; }
.search-form > a { padding: 12px 0; }
td { overflow-wrap: anywhere; }
.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: 600px) { .section-heading { align-items: flex-start; } .search-form button { width: 100%; } }

.patient-options { list-style: none; padding: 0; max-height: 280px; overflow: auto; }
.patient-options li { margin: 8px 0; }
.patient-options button { text-align: left; white-space: normal; width: 100%; }
.status-tag { display: inline-block; border-radius: 20px; background: #e4f2ef; color: #16584c; padding: 3px 12px; font-size: 13px; white-space: nowrap; }
.compact { gap: 8px; margin-top: 0; }
.compact button { padding: 7px 10px; }

/* Functional modal layout only; full visual polish is deferred until feature completion. */
dialog { width: min(960px, calc(100% - 32px)); max-height: 90vh; overflow: auto; border: 1px solid #dce5ea; border-radius: 12px; padding: 24px; color: inherit; }
dialog::backdrop { background: #102b3acc; }
#discard-visit { max-width: 480px; }
textarea { display: block; width: 100%; padding: 12px; font: inherit; border: 1px solid #849baa; border-radius: 6px; resize: vertical; margin-top: 6px; }
fieldset { border: 1px solid #dce5ea; border-radius: 8px; margin: 20px 0; padding: 16px; }
[hidden] { display: none !important; }
.clinical-text { white-space: pre-wrap; overflow-wrap: anywhere; }
button:disabled { opacity: .5; cursor: default; }
[aria-current="step"] { outline: 2px solid #076d68; }
@media (max-width: 600px) { #visit-dialog { width: 100%; max-height: 100dvh; height: 100dvh; margin: 0; border-radius: 0; } }

/* Functional document printing only; broad visual polish remains deferred. */
.clinical-document { background: white; padding: 28px; margin-top: 24px; overflow-wrap: anywhere; }
.demo-watermark { font-weight: 700; color: #8a2b20; border: 2px solid currentColor; padding: 10px; }
@media print {
    @page { size: A4; margin: 18mm; }
    body { background: white; color: black; }
    body > header, body > .notice, body > footer, main > h1, .document-controls { display: none !important; }
    main { max-width: none; margin: 0; padding: 0; }
    .clinical-document { margin: 0; padding: 0; }
    .clinical-document h1, .clinical-document h2, .clinical-document h3 { break-after: avoid; }
    .clinical-document p { orphans: 3; widows: 3; }
}

/* Platform identity shared by application and installer; clinic print branding is separate. */
.platform-logo { display: block; width: min(240px, 55vw); height: auto; }