* { box-sizing: border-box; }
body { font-family: "Segoe UI", system-ui, sans-serif; margin: 0; background: #f4f6f8; color: #1f2933; }
nav { display: flex; gap: 1.25rem; align-items: center; background: #0b5394; color: #fff; padding: 0.75rem 1.5rem; }
nav .brand { font-weight: 700; font-size: 1.1rem; margin-right: 1rem; }
nav a { color: #dbe9f8; text-decoration: none; }
nav a:hover { color: #fff; }
nav .nav-right { margin-left: auto; }
main { max-width: 1100px; margin: 0 auto; padding: 1.5rem; }
h1 { margin-top: 0.5rem; }
h2 { margin: 1.5rem 0 0.5rem; font-size: 1.05rem; color: #52606d; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.card { background: #fff; border-radius: 8px; padding: 1.25rem; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.card-value { font-size: 2rem; font-weight: 700; }
.card-label { color: #52606d; margin-top: 0.25rem; }
.card-warning { border-left: 4px solid #e6a817; }
.card-critical { border-left: 4px solid #d64545; }

table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
th, td { text-align: left; padding: 0.6rem 0.9rem; border-bottom: 1px solid #e4e7eb; }
th { background: #f0f3f6; font-weight: 600; }
.search { margin-bottom: 1rem; display: flex; gap: 0.5rem; }
.search input { padding: 0.5rem 0.75rem; border: 1px solid #cbd2d9; border-radius: 6px; width: 280px; }

.bed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; }
.bed-tile { position: relative; border-radius: 8px; padding: 0.75rem; border-left: 5px solid #9aa5b1; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.bed-label { font-weight: 700; }

/* Rotating dashed staff-presence outline (marching ants) */
.bed-outline { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.bed-outline rect { animation: bed-march 0.9s linear infinite; }
@keyframes bed-march { to { stroke-dashoffset: -12; } }  /* -(dash 7 + gap 5) */
.outline-nurse rect { stroke: #f0b429; }    /* yellow — nurse */
.outline-doctor rect { stroke: #2f9e44; }   /* green — doctor */
.outline-visiting rect { stroke: #e64980; } /* pink — visiting doctor */
.bed-status { font-size: 0.78rem; color: #3e4c59; }
.bed-occupant { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.35rem; }
.bed-photo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; }
.bed-patient { font-size: 0.88rem; }
.bed-tag { margin-top: 0.25rem; font-size: 0.75rem; color: #0b5394; }
.bed-posture { margin-top: 0.25rem; font-size: 0.78rem; color: #3e4c59; }

/* Occupant-state colors: green free, blue present, orange absent, red wrong */
.tile-free     { background: #e2f4e3; border-left-color: #3f9142; }
.tile-present  { background: #dfeafb; border-left-color: #2f6fd0; }
.tile-absent   { background: #fdecd3; border-left-color: #e07f10; }
.tile-wrong    { background: #fddcdc; border-left-color: #d64545; animation: pulse-wrong 1.2s ease-in-out infinite; }
.tile-blocked  { background: #eceff2; border-left-color: #9aa5b1; }
@keyframes pulse-wrong { 50% { box-shadow: 0 0 0 4px rgba(214, 69, 69, 0.35); } }

.legend { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0.25rem 0 1rem; font-size: 0.85rem; color: #3e4c59; }
.legend-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.swatch { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
.swatch-free { background: #3f9142; }
.swatch-present { background: #2f6fd0; }
.swatch-absent { background: #e07f10; }
.swatch-wrong { background: #d64545; }
.swatch-blocked { background: #9aa5b1; }
.legend-label { color: #52606d; }
.swatch-line { width: 18px; height: 0; border-top: 3px dashed #9aa5b1; display: inline-block; }
.swatch-nurse { border-top-color: #f0b429; }
.swatch-doctor { border-top-color: #2f9e44; }
.swatch-visiting { border-top-color: #e64980; }

.alerts-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.alert { display: flex; gap: 0.75rem; align-items: flex-start; background: #fff; border-radius: 8px; padding: 0.75rem 1rem; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.alert-closed { opacity: 0.55; }
.alert-body { flex: 1; }
.alert-message { color: #3e4c59; font-size: 0.9rem; }
.alert-meta { color: #7b8794; font-size: 0.78rem; margin-top: 0.2rem; }
.severity-critical { border-left: 4px solid #d64545; }
.severity-warning { border-left: 4px solid #e6a817; }
.severity-info { border-left: 4px solid #6b7fd7; }

.badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; }
.badge-critical { background: #fde3e3; color: #a12727; }
.badge-warning { background: #fbf0d9; color: #8f6708; }
.badge-info { background: #e3e8fb; color: #3648a3; }
.badge-occupied { background: #fde3e3; color: #a12727; }
/* HIMS-1327: sample status - damaged is not rejected, and says so */
.badge-damaged { background: #f3e2d3; color: #7a3a0c; }
.badge-ok { background: #def3e0; color: #276b2c; }

.capture-grid { display: grid; grid-template-columns: minmax(320px, 1fr) 340px; gap: 1.5rem; align-items: start; }
.capture-cam { background: #11181f; border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; }
.capture-cam video, .capture-cam img { width: 100%; height: 100%; object-fit: cover; }
.cam-error { color: #fff; padding: 1rem; text-align: center; font-size: 0.9rem; }
.capture-form { background: #fff; border-radius: 8px; padding: 1.25rem; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.capture-form label { display: block; margin-bottom: 0.75rem; font-size: 0.9rem; color: #3e4c59; }
.capture-form select, .capture-form input[type=file] { display: block; width: 100%; margin-top: 0.25rem; padding: 0.5rem; border: 1px solid #cbd2d9; border-radius: 6px; }
.capture-actions { display: flex; gap: 0.5rem; margin: 1rem 0; }
.file-fallback { border-top: 1px solid #e4e7eb; padding-top: 0.75rem; }
.result { margin-top: 0.75rem; font-size: 0.9rem; min-height: 1.2em; }
.result-ok { color: #2f7a34; font-weight: 600; }
.result-error { color: #a12727; font-weight: 600; }
.muted { color: #7b8794; }
.small { font-size: 0.8rem; }
@media (max-width: 720px) { .capture-grid { grid-template-columns: 1fr; } }

.zone-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.75rem; }
.zone-card { background: #fff; border-radius: 8px; padding: 0.9rem; border-left: 5px solid #3f9142; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.zone-restricted { border-left-color: #6b7fd7; }
.zone-breach { border-left-color: #d64545; background: #fddcdc; animation: pulse-wrong 1.2s ease-in-out infinite; }
.zone-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.zone-name { font-weight: 700; }
.zone-ward { color: #7b8794; font-size: 0.8rem; margin-top: 0.1rem; }
.zone-counts { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.6rem; font-size: 0.9rem; }
.zone-counts b { font-size: 1.15rem; }
.count-staff b { color: #2f9e44; }
.count-visitor b { color: #d64545; }
.zone-meta { color: #9aa5b1; font-size: 0.72rem; margin-top: 0.5rem; }

button { background: #0b5394; color: #fff; border: none; border-radius: 6px; padding: 0.45rem 0.9rem; cursor: pointer; }
button:hover { background: #0a4a84; }
button:disabled { background: #9aa5b1; cursor: default; }
.empty { color: #7b8794; }

.vitals-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.75rem; }
.vital-card { background: #fff; border-radius: 8px; padding: 0.9rem; border-left: 5px solid #2f6fd0; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.vital-abnormal { border-left-color: #d64545; background: #fff5f5; }
.vital-head { display: flex; justify-content: space-between; align-items: center; gap: 0.4rem; }
.vital-name { font-weight: 700; font-size: 0.92rem; }
.vital-value { font-size: 1.7rem; font-weight: 700; margin-top: 0.35rem; }
.vital-unit { font-size: 0.85rem; font-weight: 400; color: #52606d; }
.sparkline { width: 100%; height: 30px; margin-top: 0.35rem; }
.sparkline polyline { stroke: #2f6fd0; }
.vital-abnormal .sparkline polyline { stroke: #d64545; }
.vital-meta { color: #9aa5b1; font-size: 0.72rem; margin-top: 0.3rem; }

.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 0.2rem; }
.dot-online { background: #2f9e44; }
.dot-stale { background: #e6a817; }
.dot-offline { background: #9aa5b1; }

.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-card { background: #fff; border-radius: 10px; padding: 2rem 2.5rem; box-shadow: 0 2px 12px rgba(0,0,0,.12); width: 320px; }
.login-card h1 { margin: 0 0 0.25rem; }
.login-card label { display: block; margin: 0.9rem 0 0; font-size: 0.9rem; color: #3e4c59; }
.login-card input { display: block; width: 100%; margin-top: 0.3rem; padding: 0.55rem; border: 1px solid #cbd2d9; border-radius: 6px; box-sizing: border-box; }
.login-card button { width: 100%; margin-top: 1.25rem; padding: 0.6rem; }

/* --- patient chart ---------------------------------------------------------- */
.chart-header { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.encounter-card { min-width: 260px; font-size: 0.9rem; }
.allergy-banner { background: #fde3e3; border-left: 5px solid #d64545; border-radius: 8px; padding: 0.7rem 1rem; margin: 0.8rem 0 0.4rem; }
.allergy-banner.allergy-none { background: #e7f4e8; border-left-color: #3f9142; color: #2f6f33; }
.allergy-severe { background: #d64545; color: #fff; }
.allergy-moderate { background: #fbf0d9; color: #8f6708; }
.allergy-mild { background: #e3e8fb; color: #3648a3; }
.chip-btn { background: transparent; border: none; cursor: pointer; font-weight: 700; padding: 0 0.15rem; color: inherit; }
.inline-form { display: flex; gap: 0.4rem; align-items: center; margin: 0.5rem 0; flex-wrap: wrap; }
.inline-form input, .inline-form select { padding: 0.35rem 0.5rem; border: 1px solid #cbd2d9; border-radius: 6px; }
.note-form textarea { display: block; width: 100%; margin: 0.4rem 0; padding: 0.5rem; border: 1px solid #cbd2d9; border-radius: 6px; box-sizing: border-box; }
.notes-timeline { display: flex; flex-direction: column; gap: 0.8rem; margin-top: 0.8rem; }
.note-card { border-left: 4px solid #2f6fd0; }
.note-head { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.note-addendum { border-left: 3px solid #e6a817; margin: 0.5rem 0 0 1rem; padding-left: 0.8rem; }
.soap { display: grid; grid-template-columns: 1.4rem 1fr; gap: 0.15rem 0.5rem; margin: 0.4rem 0 0; }
.soap dt { font-weight: 700; color: #52606d; }
.soap dd { margin: 0; }
/* HIMS-1315: a nursing note's sections - labels are words, not S/O/A/P */
.nursing-sections { display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr; gap: 0.2rem 0.8rem; margin: 0.4rem 0 0; }
.nursing-sections dt { font-weight: 700; color: #52606d; }
.nursing-sections dd { margin: 0; white-space: pre-wrap; }
.mar-form { margin: 0; }
section { margin-top: 1.6rem; }
.rx-warnings { background: #fbf0d9; border-left: 5px solid #e6a817; border-radius: 8px; padding: 0.7rem 1rem; margin: 0.5rem 0; line-height: 1.9; }
.btn-danger { background: #d64545; color: #fff; border: none; border-radius: 6px; padding: 0.4rem 0.8rem; cursor: pointer; }
.range-tabs { display: flex; gap: 0.4rem; margin: 0.5rem 0 0.8rem; }
.range-tab { padding: 0.25rem 0.7rem; border-radius: 999px; background: #e4e7eb; color: #3e4c59; text-decoration: none; font-size: 0.85rem; }
.range-tab.active { background: #2f6fd0; color: #fff; }
.trend-chart { background: #fff; border-radius: 8px; padding: 0.8rem; margin-bottom: 0.8rem; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.trend-chart svg { width: 100%; height: 120px; display: block; }
.trend-head { display: flex; justify-content: space-between; margin-bottom: 0.3rem; }
.trend-band { fill: #2f6fd0; opacity: 0.15; }
.trend-line { stroke: #2f6fd0; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.ot-theatre { margin-bottom: 1rem; }
.ot-theatre h2 { margin-top: 0; display: flex; gap: 0.6rem; align-items: center; }
.ot-busy { border-left: 5px solid #d64545; }
.checklist-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.checklist-phase h3 { margin-top: 0; display: flex; gap: 0.5rem; align-items: center; }
.checklist-done { border-left: 4px solid #3f9142; }
.checklist-item { display: block; margin: 0.3rem 0; font-size: 0.92rem; }

/* --- billing --------------------------------------------------------------- */
.invoice-sheet { background: #fff; border-radius: 8px; padding: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,.08); max-width: 720px; }
.invoice-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #323f4b; padding-bottom: 0.6rem; margin-bottom: 1rem; }
.invoice-head h1 { margin: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.invoice-totals { margin-top: 0.8rem; margin-left: auto; width: 60%; }
.invoice-totals td { padding: 0.25rem 0.5rem; }
.invoice-grand td { font-weight: 700; border-top: 2px solid #323f4b; }
.charge-covered { color: #7b8794; }
.billing-pending { margin-bottom: 1rem; }
@media print {
  nav, .no-print { display: none !important; }
  .invoice-sheet { box-shadow: none; max-width: none; }
  main { padding: 0; }
}