:root {
    color-scheme: light;
    --bg: #f3f6f6;
    --panel: #ffffff;
    --ink: #162426;
    --muted: #66777a;
    --line: #d9e2e3;
    --brand: #137f78;
    --brand-dark: #0d5f5a;
    --nav: #173235;
    --danger: #b42318;
    --warning: #986000;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); }
a { color: inherit; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

.app-shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100vh; }
.sidebar { display: flex; flex-direction: column; padding: 22px 14px 18px; background: var(--nav); color: #fff; }
.brand { display: flex; align-items: center; gap: 11px; min-height: 58px; padding: 3px 10px 23px; text-decoration: none; }
.brand img, .logo-mark { width: 42px; height: 42px; border-radius: 6px; object-fit: contain; background: #fff; }
.logo-mark { display: grid; place-items: center; color: var(--brand-dark); font-weight: 800; }
.brand > span { display: grid; min-width: 0; }
.brand strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.brand small { margin-top: 3px; color: #a9c1c1; font-size: 11px; }
.sidebar nav { display: grid; gap: 4px; }
.sidebar nav a { border-radius: 6px; padding: 11px 12px; color: #c9d8d8; font-size: 14px; font-weight: 650; text-decoration: none; }
.sidebar nav a:hover, .sidebar nav a.active { background: #275154; color: #fff; }
.logout { margin-top: auto; padding: 16px 10px 0; border-top: 1px solid rgba(255,255,255,.13); }
.logout button { border: 0; padding: 0; background: transparent; color: #c9d8d8; }

.workspace { width: min(1320px, 100%); margin: 0 auto; padding: 32px clamp(20px,4vw,52px) 60px; }
.workspace-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.workspace-head span, .workspace-head small { color: var(--muted); font-size: 12px; }
.workspace-head h1 { margin: 4px 0 0; font-size: 27px; letter-spacing: 0; }
.user-chip { display: grid; min-width: 170px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); }

.welcome, .panel { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.welcome { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 26px; }
.welcome h2, .panel h2 { margin: 5px 0 6px; font-size: 22px; letter-spacing: 0; }
.welcome p, .panel p { margin: 0; color: var(--muted); line-height: 1.55; }
.eyebrow { color: var(--brand); font-size: 12px; font-weight: 750; text-transform: uppercase; }
.status { border-radius: 999px; padding: 7px 10px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.status.ok { background: #e5f6f1; color: #087047; }
.status.pending { background: #fff3d9; color: var(--warning); }

.metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin: 16px 0; }
.metrics article { display: grid; gap: 10px; min-height: 108px; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.metrics span { color: var(--muted); font-size: 13px; }
.metrics strong { align-self: end; font-size: 30px; }
.action-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.action-grid a { display: grid; gap: 6px; min-height: 104px; padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); text-decoration: none; }
.action-grid a:hover { border-color: var(--brand); }
.action-grid span { color: var(--muted); font-size: 14px; line-height: 1.45; }

.panel { padding: 26px; }
.panel.compact { align-self: start; }
.split { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 16px; align-items: start; }
.form { display: grid; gap: 16px; margin-top: 24px; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.form label { display: grid; gap: 7px; color: #253436; font-size: 13px; font-weight: 700; }
.form input, .form textarea, .form select { width: 100%; border: 1px solid #cbd7d8; border-radius: 6px; padding: 10px 11px; background: #fff; color: var(--ink); font-weight: 400; }
.form input, .form select { min-height: 42px; }
.form textarea { resize: vertical; line-height: 1.5; }
.form input:focus, .form textarea:focus, .form select:focus { border-color: var(--brand); outline: 3px solid rgba(19,127,120,.12); }
.form button, .primary-link { display: inline-flex; width: fit-content; min-height: 42px; align-items: center; justify-content: center; border: 0; border-radius: 6px; padding: 0 17px; background: var(--brand); color: #fff; font-weight: 750; text-decoration: none; }
.form button:hover, .primary-link:hover { background: var(--brand-dark); }
.check { display: flex !important; align-items: center; gap: 9px !important; }
.check input { width: 17px; min-height: 17px; }
.form-title { display: block; margin-bottom: 10px; color: #253436; font-size: 13px; font-weight: 750; }
.schedule { display: grid; gap: 8px; }
.schedule-row { display: grid; grid-template-columns: 130px 120px 120px minmax(150px,1fr); gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 6px; padding: 9px 11px; }
.schedule-row input { min-width: 0; }

.alert { margin-bottom: 18px; border: 1px solid #b9dccf; border-radius: 7px; padding: 13px 15px; background: #edf9f4; color: #075d45; }
.alert.danger { border-color: #efc4bf; background: #fff0ef; color: var(--danger); }
.table-wrap { margin-top: 20px; overflow-x: auto; border: 1px solid var(--line); border-radius: 7px; }
table { width: 100%; min-width: 720px; border-collapse: collapse; background: #fff; }
th, td { border-bottom: 1px solid var(--line); padding: 12px 14px; text-align: left; font-size: 13px; vertical-align: top; }
th { background: #f7f9f9; color: #586769; }
tr:last-child td { border-bottom: 0; }
.table-link { color: var(--brand-dark); font-weight: 750; }
.empty { display: grid; place-items: center; min-height: 180px; margin-top: 20px; border: 1px dashed #c7d3d4; border-radius: 7px; text-align: center; }
.empty span { color: var(--muted); font-size: 13px; }
.compact-empty { min-height: 100px; }
.users-layout { grid-template-columns: minmax(0,1fr) 330px; }
.users-table { min-width: 980px; }
.users-table td:first-child strong,.users-table td:first-child span { display:block; }
.users-table td:first-child span { margin-top:3px; color:var(--muted); font-size:11px; }
.users-table td:last-child { width:230px; }
.user-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.user-actions form { margin:0; }
.user-action,.user-editor>summary,.delete-user>summary { display:flex; width:100%; min-height:34px; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:5px; padding:0 9px; background:#fff; color:#344547; font-size:11px; font-weight:750; text-align:center; }
.user-editor>summary,.delete-user>summary { cursor:pointer; list-style:none; }
.user-editor>summary::-webkit-details-marker,.delete-user>summary::-webkit-details-marker { display:none; }
.user-editor[open],.delete-user[open] { grid-column:1/-1; }
.user-editor[open]>summary,.delete-user[open]>summary { border-color:var(--brand); color:var(--brand-dark); }
.user-editor .form { min-width:280px; margin:8px 0; border:1px solid var(--line); border-radius:6px; padding:12px; background:#f8fafa; }
.delete-user>summary,.delete-user button { color:var(--danger); }
.delete-user form { display:grid; gap:8px; margin-top:8px; border:1px solid #efc4bf; border-radius:6px; padding:10px; background:#fff5f4; }
.delete-user label { display:flex; align-items:center; gap:7px; font-size:11px; }
.delete-user button { min-height:34px; border:1px solid #e4aaa3; border-radius:5px; background:#fff; font-size:11px; font-weight:750; }
.protected-account { color:var(--muted); font-size:11px; }
.user-credentials { margin-bottom:16px; border-color:var(--brand); }
.user-credentials small { color:var(--muted); line-height:1.45; }

.logo-preview { display: flex; align-items: center; gap: 14px; margin-top: 22px; border: 1px solid var(--line); border-radius: 7px; padding: 12px; }
.logo-preview img { width: 80px; height: 80px; object-fit: contain; }
.logo-preview span { color: var(--muted); font-size: 13px; }
.connector { display: grid; gap: 14px; border: 1px solid var(--line); border-radius: 7px; padding: 18px; }
.connector legend { padding: 0 8px; color: var(--brand-dark); font-weight: 800; }
.webhook-box { display: grid; gap: 7px; border-left: 4px solid var(--brand); padding: 12px 14px; background: #eef7f6; }
.webhook-box span { color: var(--muted); font-size: 12px; }
.webhook-box code { overflow-wrap: anywhere; }

.patient-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 14px; }
.patient-summary div, .clinical-alerts div { display: grid; gap: 5px; border: 1px solid var(--line); border-radius: 7px; padding: 15px; background: #fff; }
.patient-summary span { color: var(--muted); font-size: 12px; }
.clinical-alerts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-bottom: 16px; }
.clinical-alerts p { margin: 0; color: var(--muted); font-size: 13px; white-space: pre-wrap; }
.clinical-history { display: grid; gap: 12px; margin-top: 20px; }
.clinical-history article { border: 1px solid var(--line); border-radius: 7px; padding: 16px; }
.clinical-history header { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.clinical-history header span { color: var(--muted); font-size: 12px; }
.clinical-history dl { display: grid; gap: 12px; margin: 14px 0 0; }
.clinical-history dt { color: var(--muted); font-size: 11px; font-weight: 750; text-transform: uppercase; }
.clinical-history dd { margin: 3px 0 0; line-height: 1.5; }

.agenda-shell { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.agenda-toolbar { display: grid; grid-template-columns: auto minmax(220px,1fr) auto; gap: 18px; align-items: center; min-height: 82px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.agenda-toolbar h2 { margin: 3px 0 0; font-size: 20px; }
.agenda-navigation, .view-switch { display: flex; align-items: center; }
.agenda-navigation { gap: 6px; }
.agenda-navigation a, .view-switch a { display: inline-flex; min-height: 36px; align-items: center; justify-content: center; border: 1px solid var(--line); background: #fff; color: #344547; text-decoration: none; }
.icon-action { width: 36px; font-size: 24px; line-height: 1; }
.today-action { padding: 0 13px; font-size: 13px; font-weight: 700; }
.agenda-navigation a:hover, .view-switch a:hover { border-color: var(--brand); color: var(--brand-dark); }
.view-switch a { min-width: 72px; padding: 0 12px; border-right-width: 0; font-size: 13px; font-weight: 700; }
.view-switch a:first-child { border-radius: 6px 0 0 6px; }
.view-switch a:last-child { border-right-width: 1px; border-radius: 0 6px 6px 0; }
.view-switch a.active { border-color: var(--brand); background: var(--brand); color: #fff; }
.view-switch a.active + a { border-left-color: var(--brand); }
.calendar-scroll { overflow: auto; }
.time-calendar { display: grid; grid-template-columns: 64px repeat(var(--days), minmax(150px,1fr)); grid-template-rows: 48px var(--calendar-height); min-width: calc(64px + (var(--days) * 150px)); }
.calendar-corner { position: sticky; left: 0; z-index: 5; grid-row: 1; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #f8fafa; }
.calendar-day-head { display: flex; gap: 8px; align-items: center; justify-content: center; grid-row: 1; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #f8fafa; }
.calendar-day-head span { color: var(--muted); font-size: 11px; font-weight: 750; text-transform: uppercase; }
.calendar-day-head strong { display: grid; width: 27px; height: 27px; place-items: center; font-size: 14px; }
.calendar-day-head.is-today strong { border-radius: 50%; background: var(--brand); color: #fff; }
.time-axis { position: sticky; left: 0; z-index: 4; grid-column: 1; grid-row: 2; border-right: 1px solid var(--line); background: #fff; }
.time-axis span { position: absolute; right: 9px; transform: translateY(-7px); color: var(--muted); font-size: 10px; }
.day-track { position: relative; grid-row: 2; border-right: 1px solid var(--line); background: repeating-linear-gradient(to bottom,#fff 0,#fff 29px,#e7eded 30px); }
.calendar-closed { position: absolute; z-index: 1; right: 0; left: 0; background: repeating-linear-gradient(135deg,rgba(92,108,110,.10),rgba(92,108,110,.10) 6px,rgba(92,108,110,.16) 6px,rgba(92,108,110,.16) 12px); pointer-events: none; }
.calendar-closed.is-full { top: 0; bottom: 0; display: grid; place-items: start center; padding-top: 16px; }
.calendar-closed span { color: #718082; font-size: 11px; font-weight: 750; text-transform: uppercase; }
.calendar-event { position: absolute; z-index: 2; right: 4px; left: 4px; display: grid; align-content: start; gap: 2px; overflow: hidden; border-left: 4px solid var(--event-color); border-radius: 4px; padding: 5px 7px; background: color-mix(in srgb,var(--event-color) 13%,#fff); box-shadow: 0 1px 2px rgba(20,48,49,.11); }
.calendar-event strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.calendar-event span, .calendar-event small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #526365; font-size: 10px; }
.calendar-event.is-block { --event-color: #66777a; border-left-color: #66777a; background: repeating-linear-gradient(135deg,#eef1f1,#eef1f1 7px,#e2e7e7 7px,#e2e7e7 14px); }
.month-calendar { display: grid; grid-template-columns: repeat(7,minmax(120px,1fr)); min-width: 840px; }
.month-weekday { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 10px; background: #f8fafa; color: var(--muted); font-size: 11px; font-weight: 750; text-align: center; text-transform: uppercase; }
.month-day { min-height: 128px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 8px; background: #fff; }
.month-day.is-outside { background: #f8fafa; color: #9ba7a8; }
.month-day.is-today { box-shadow: inset 0 0 0 2px var(--brand); }
.month-number { display: grid; width: 26px; height: 26px; margin: 0 0 4px auto; place-items: center; border-radius: 50%; font-size: 12px; font-weight: 750; text-decoration: none; }
.month-day.is-today .month-number { background: var(--brand); color: #fff; }
.month-entry { display: block; overflow: hidden; margin-top: 3px; border-left: 3px solid var(--brand); padding: 3px 5px; background: #eaf6f4; color: #294244; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.month-entry.is-block { border-color: #66777a; background: #ecefef; }
.month-entry b { font-weight: 800; }
.month-more { display: block; margin-top: 5px; color: var(--brand-dark); font-size: 10px; font-weight: 750; }
.agenda-forms { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 16px; }
.knowledge-intro { display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); padding: 0 0 22px; }
.knowledge-intro h2 { margin: 5px 0 6px; font-size: 24px; }
.knowledge-intro p { max-width: 760px; margin: 0; color: var(--muted); line-height: 1.5; }
.knowledge-count { display: grid; min-width: 150px; border-left: 3px solid var(--brand); padding: 8px 0 8px 16px; }
.knowledge-count strong { font-size: 28px; }
.knowledge-count span { color: var(--muted); font-size: 12px; }
.knowledge-layout { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(320px,.8fr); gap: 16px; margin-top: 16px; }
.knowledge-section { margin-top: 16px; }
.suggestion-list, .faq-list { display: grid; gap: 12px; margin-top: 20px; }
.suggestion-item, .faq-item { border: 1px solid var(--line); border-radius: 7px; padding: 16px; background: #fff; }
.suggestion-item header div, .faq-item > div { display: grid; gap: 5px; }
.suggestion-item header span, .faq-item span, .faq-item small { color: var(--muted); font-size: 11px; }
.suggestion-item > p { margin-top: 10px; font-size: 13px; }
.review-actions { display: flex; gap: 9px; }
.form .secondary-button, .state-button { border: 1px solid var(--line); background: #fff; color: #415254; }
.form .secondary-button:hover, .state-button:hover { border-color: var(--danger); background: #fff4f3; color: var(--danger); }
.faq-item { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 18px; align-items: start; }
.faq-item h3 { margin: 2px 0 4px; font-size: 15px; }
.faq-item p { margin: 0; color: #344547; font-size: 13px; line-height: 1.55; }
.faq-item.is-disabled { background: #f7f9f9; opacity: .68; }
.state-button { min-height: 34px; border-radius: 6px; padding: 0 11px; font-size: 12px; font-weight: 700; }
.faq-editor { margin-top: 10px; }
.faq-editor summary { width: fit-content; color: var(--brand-dark); cursor: pointer; font-size: 12px; font-weight: 750; }
.faq-editor .form { border-top: 1px solid var(--line); padding-top: 14px; }

.auth-page { display: grid; place-items: center; min-height: 100vh; padding: 24px; background: #edf2f2; }
.login-card, .install-card { width: min(470px,100%); border: 1px solid var(--line); border-radius: 8px; padding: 32px; background: #fff; box-shadow: 0 18px 55px rgba(20,48,49,.12); }
.install-card { width: min(600px,100%); }
.login-card h1, .install-card h1 { margin: 5px 0 8px; font-size: 30px; }
.login-card > p, .install-card > p { color: var(--muted); line-height: 1.55; }
.credentials { display: grid; gap: 5px; margin: 22px 0; border: 1px solid var(--line); border-radius: 7px; padding: 16px; }
.credentials span { color: var(--muted); font-size: 12px; }
.credentials strong { margin-bottom: 8px; overflow-wrap: anywhere; }

@media (max-width: 960px) {
    .app-shell { display: block; }
    .sidebar { padding: 15px; }
    .brand { padding-bottom: 14px; }
    .sidebar nav { display: flex; overflow-x: auto; }
    .sidebar nav a { white-space: nowrap; }
    .logout { margin-top: 14px; }
    .metrics, .patient-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .split, .knowledge-layout, .users-layout { grid-template-columns: 1fr; }
    .agenda-toolbar { grid-template-columns: 1fr auto; }
    .agenda-toolbar > div:nth-child(2) { grid-column: 1 / -1; grid-row: 1; }
    .agenda-navigation { grid-column: 1; grid-row: 2; }
    .view-switch { grid-column: 2; grid-row: 2; }
}

@media (max-width: 600px) {
    .workspace { padding: 22px 14px 40px; }
    .workspace-head { align-items: flex-start; }
    .user-chip { min-width: 0; }
    .welcome { flex-direction: column; }
    .metrics, .action-grid, .form-grid, .patient-summary, .clinical-alerts, .agenda-forms { grid-template-columns: 1fr; }
    .knowledge-intro { align-items: flex-start; flex-direction: column; }
    .faq-item { grid-template-columns: 1fr; }
    .agenda-toolbar { gap: 12px; padding: 14px; }
    .view-switch a { min-width: 60px; padding: 0 8px; }
    .schedule-row { grid-template-columns: 1fr 1fr; }
    .schedule-row input:last-child { grid-column: 1 / -1; }
    .panel, .login-card, .install-card { padding: 20px; }
}