:root {
    --navy:#123446;
    --navy-deep:#0d2735;
    --teal:#087f78;
    --teal-dark:#06675f;
    --ink:#1b3543;
    --muted:#647782;
    --border:#e0e8eb;
    --bg:#f3f6f8;
    --white:#fff;
    --blue:#eaf2fb;
    --shadow:0 3px 12px #17384a04;
    font-family:Inter,Segoe UI,Arial,sans-serif;
    color:var(--ink);
    font-size:16px;
    line-height:1.5;
}
* {
    box-sizing:border-box;
}
body {
    margin:0;
    background:var(--bg);
}
a {
    color:inherit;
    text-decoration:none;
}
button,input,textarea,select {
    font:inherit;
}
button,a,input,select,textarea {
    -webkit-tap-highlight-color:transparent;
}
button {
    cursor:pointer;
}
button:disabled {
    cursor:wait;
    opacity:.7;
}
:focus-visible {
    outline:3px solid #3899dc;
    outline-offset:3px;
}
h1,h2,h3,p {
    margin:0;
}
h1 {
    font-size:2rem;
    line-height:1.25;
    letter-spacing:-.045em;
    font-weight:700;
}
h2 {
    font-size:1.12rem;
    letter-spacing:-.02em;
    line-height:1.35;
}
h3 {
    font-size:1rem;
    line-height:1.4;
}
p {
    line-height:1.65;
}
small {
    display:block;
    color:var(--muted);
    font-size:.8rem;
    line-height:1.5;
}
.muted {
    color:var(--muted);
    font-size:.9rem;
}
.eyebrow {
    display:block;
    font-size:.75rem;
    letter-spacing:.095em;
    font-weight:650;
    color:var(--muted);
    margin-bottom:8px;
}
.app-shell {
    display:grid;
    grid-template-columns:248px minmax(0,1fr);
    min-height:100vh;
}
.sidebar {
    background:var(--navy);
    color:#e5f0f3;
    display:flex;
    flex-direction:column;
    position:sticky;
    top:0;
    height:100vh;
    padding:30px 18px 24px;
}
.brand {
    display:flex;
    gap:12px;
    align-items:center;
    font-size:1.4rem;
    font-weight:750;
    letter-spacing:-.025em;
}
.sidebar .brand {
    padding:0 12px;
}
.brand small {
    font-size:.75rem;
    font-weight:400;
    color:inherit;
    opacity:.65;
    letter-spacing:0;
    margin-top:1px;
}
.brand-mark {
    display:block;
    width:42px;
    height:42px;
    border-radius:8px;
    background:transparent;
    object-fit:contain;
    flex-shrink:0;
}
.workspace-label {
    font-size:.75rem;
    color:#a2bbc8;
    letter-spacing:.09em;
    margin:40px 12px 12px;
}
.nav-link {
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    border-radius:8px;
    margin:4px 0;
    color:#c7dbe3;
    font-size:.88rem;
    min-height:46px;
}
.nav-link>span:first-child {
    width:20px;
    text-align:center;
    font-size:1.25rem;
}
.nav-link:hover {
    background:#ffffff0a;
    color:white;
}
.nav-link.active {
    background:#ffffff13;
    color:white;
    box-shadow:inset 3px 0 0 #46c7b6;
}
.nav-count {
    margin-left:auto;
    background:#2d5868;
    color:#def6f3;
    font-size:.75rem;
    padding:1px 7px;
    border-radius:5px;
}
.sidebar-bottom {
    margin-top:auto;
    padding:28px 10px 0;
}
.clinic-mini {
    display:flex;
    gap:10px;
    border-top:1px solid #ffffff18;
    padding-top:20px;
    align-items:center;
}
.clinic-mini strong {
    font-size:.75rem;
}
.clinic-mini small {
    font-size:.75rem;
    color:#aac1cd;
}
.tiny-mark {
    width:32px;
    height:32px;
    object-fit:contain;
    background:transparent;
    border-radius:6px;
    flex-shrink:0;
}
.workspace-note {
    font-size:.75rem;
    color:#a2bbc8;
    padding-top:18px;
}
.sidebar-home {
    display:block;
    font-size:.8rem;
    margin-top:9px;
    color:#b7dedb;
}
.workspace {
    min-width:0;
}
.topbar {
    height:86px;
    background:#fff;
    border-bottom:1px solid var(--border);
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 38px;
    gap:16px;
}
.topbar-left {
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--muted);
    font-size:.85rem;
}
.breadcrumb {
    color:#8797a0;
}
.user-menu {
    display:flex;
    align-items:center;
    gap:10px;
}
.user-menu strong {
    font-size:.82rem;
}
.user-menu small {
    font-size:.75rem;
}
.avatar {
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    flex-shrink:0;
    border-radius:50%;
    font-size:.86rem;
    font-weight:650;
}
.teal {
    background:#e2f4ef;
    color:#147665;
}
.blue {
    background:#eaf2fb;
    color:#336f9f;
}
.amber {
    background:#fff3db;
    color:#8e650b;
}
.lavender {
    background:#eeebfa;
    color:#67569c;
}
.navy {
    background:#e7eef2;
    color:var(--navy);
}
.red {
    background:#ffedeb;
    color:#b34e44;
}
.green {
    background:#e1f4ec;
    color:#21714f;
}
.button {
    display:inline-flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    background:var(--teal);
    color:white;
    padding:11px 17px;
    border:1px solid var(--teal);
    border-radius:7px;
    font-size:.86rem;
    font-weight:600;
    min-height:44px;
    white-space:nowrap;
}
.button:hover {
    background:var(--teal-dark);
    border-color:var(--teal-dark);
}
.button.secondary {
    background:white;
    color:var(--ink);
    border-color:#d5e0e5;
}
.button.secondary:hover {
    background:#f0f5f6;
}
.button.compact {
    font-size:.8rem;
    padding:7px 11px;
    min-height:36px;
}
.button.full {
    width:100%;
}
.text-button {
    border:0;
    background:none;
    font-size:.8rem;
    color:var(--muted);
    padding:10px 5px;
}
.text-button:hover {
    color:var(--teal);
}
.text-link {
    font-size:.8rem;
    color:var(--teal);
    font-weight:600;
}
.main-content {
    padding:34px 38px 18px;
    max-width:1660px;
    margin:auto;
}
.page-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-bottom:28px;
}
.page-heading .muted {
    margin-top:7px;
}
.stats-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
    margin-bottom:26px;
}
.stats-grid.three {
    grid-template-columns:repeat(3,minmax(0,1fr));
}
.stat-card {
    padding:20px 22px 19px;
    border:1px solid var(--border);
    border-radius:10px;
    background:#fff;
    box-shadow:var(--shadow);
}
.stat-label {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    font-size:.85rem;
    color:var(--muted);
}
.stat-icon {
    width:33px;
    height:33px;
    border-radius:8px;
    display:grid;
    place-items:center;
    font-size:1.3rem;
}
.stat-card>strong {
    display:block;
    font-size:2rem;
    line-height:1.2;
    letter-spacing:-.035em;
    margin:10px 0 9px;
}
.stat-card>strong.amount {
    font-size:1.7rem;
}
.stat-card>small {
    font-size:.75rem;
}
.panel {
    background:white;
    border:1px solid var(--border);
    border-radius:10px;
    box-shadow:var(--shadow);
    min-width:0;
    overflow:hidden;
}
.panel-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding:22px 24px;
}
.panel-heading p {
    font-size:.8rem;
    margin-top:5px;
}
.dashboard-grid {
    display:grid;
    grid-template-columns:minmax(0,1fr) 290px;
    gap:22px;
    margin-bottom:24px;
}
.dashboard-side {
    display:flex;
    flex-direction:column;
    gap:22px;
}
.quick-panel {
    padding:22px;
}
.quick-panel>h2 {
    margin-bottom:20px;
}
.quick-action {
    display:grid;
    grid-template-columns:37px minmax(0,1fr) auto;
    align-items:center;
    width:100%;
    gap:12px;
    padding:12px 0;
    color:var(--ink);
    background:transparent;
    border:0;
    text-align:left;
}
.quick-action strong {
    font-size:.84rem;
}
.quick-action small {
    font-size:.75rem;
    margin-top:2px;
}
.quick-action>span[aria-hidden="true"] {
    margin-left:auto;
}
.quick-action:hover strong {
    color:var(--teal);
}
.action-icon {
    width:37px;
    height:37px;
    display:grid;
    place-items:center;
    border-radius:9px;
    font-size:1.2rem;
    flex-shrink:0;
}
.attention-panel .panel-heading {
    padding-bottom:10px;
}
.attention-item {
    display:flex;
    gap:10px;
    align-items:center;
    padding:11px 22px;
}
.attention-item strong {
    font-size:.8rem;
}
.attention-item small {
    font-size:.75rem;
}
.stock-dot {
    width:7px;
    height:7px;
    background:#d8a53a;
    border-radius:50%;
    flex-shrink:0;
}
.attention-panel>.text-link {
    display:block;
    margin:14px 22px 22px;
}
.attention-panel>p {
    padding:0 22px;
}
.table-wrap {
    overflow:auto;
    max-width:100%;
}
table {
    border-collapse:collapse;
    width:100%;
    text-align:left;
    font-size:.83rem;
}
th {
    background:#f8fafb;
    color:var(--muted);
    font-weight:550;
    font-size:.75rem;
    padding:13px 20px;
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
    white-space:nowrap;
}
td {
    padding:18px 20px;
    border-bottom:1px solid #edf1f3;
    vertical-align:middle;
}
tbody tr:last-child td {
    border-bottom:0;
}
tbody tr:hover {
    background:#fcfdfd;
}
td small {
    font-size:.75rem;
    margin-top:3px;
}
td strong {
    font-weight:600;
}
.patient-cell {
    display:flex;
    align-items:center;
    gap:10px;
    white-space:nowrap;
}
.badge {
    display:inline-flex;
    align-items:center;
    font-size:.75rem;
    border-radius:5px;
    line-height:1.4;
    padding:4px 8px;
    white-space:nowrap;
    font-weight:550;
}
.inline {
    display:flex;
    gap:7px;
    align-items:center;
}
.inline label {
    margin:0;
}
.inline label select {
    max-width:128px;
    padding:7px;
    font-size:.8rem;
    min-height:36px;
}
.inline label {
    font-size:0;
}
.quantity-input {
    width:85px!important;
    font-size:.8rem!important;
    min-height:36px!important;
    padding:7px!important;
}
.activity-panel .panel-heading {
    padding-bottom:14px;
}
.activity-row {
    display:flex;
    gap:11px;
    align-items:center;
    padding:12px 24px;
    font-size:.85rem;
    border-top:1px solid #eef2f4;
}
.activity-row:last-child {
    padding-bottom:20px;
}
.activity-dot {
    height:7px;
    width:7px;
    border-radius:50%;
    background:#5ba39b;
}
.workspace-footer {
    display:flex;
    justify-content:space-between;
    font-size:.75rem;
    color:#8797a0;
    margin-top:32px;
    padding-top:18px;
    border-top:1px solid var(--border);
}
.filter-bar {
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:20px;
    flex-wrap:wrap;
}
.search-field {
    display:flex;
    align-items:center;
    gap:10px;
    background:white;
    border:1px solid #d5e0e5;
    border-radius:7px;
    padding:0 13px;
    margin:0;
    max-width:390px;
    flex:1;
    min-width:190px;
}
.search-field>span {
    font-size:1.45rem;
    color:#7f939f;
}
.search-field input {
    border:0;
    background:none;
    margin:0;
    padding:11px 0;
    min-width:0;
    outline:0;
}
.search-field:focus-within {
    outline:3px solid #3899dc;
    outline-offset:2px;
}
.filter-label {
    display:flex;
    align-items:center;
    gap:9px;
    margin:0;
    font-size:.8rem;
    color:var(--muted);
}
.filter-label select {
    width:auto;
    margin:0;
    min-width:140px;
}
.result-count {
    margin-left:auto;
    color:var(--muted);
    font-size:.8rem;
}
.patient-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px;
}
.pet-card {
    padding:24px;
}
.pet-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:18px;
}
.pet-avatar {
    display:grid;
    place-items:center;
    width:60px;
    height:60px;
    border-radius:17px;
    font-size:1.65rem;
    font-weight:650;
    flex-shrink:0;
}
.pet-card h2 {
    font-size:1.3rem;
    margin-bottom:3px;
}
.pet-card .muted {
    font-size:.85rem;
}
.pet-details {
    margin:22px 0;
    font-size:.82rem;
}
.pet-details>div {
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin:12px 0;
}
.pet-details dt {
    color:var(--muted);
}
.pet-details dd {
    margin:0;
    text-align:right;
}
.emr-layout {
    display:grid;
    grid-template-columns:270px minmax(0,1fr);
    gap:24px;
}
.patient-list {
    align-self:start;
    padding-bottom:12px;
}
.patient-list .search-field {
    margin:0 16px 16px;
    min-width:0;
}
.patient-list-item {
    display:flex;
    align-items:center;
    gap:12px;
    padding:16px 20px;
    border-top:1px solid #edf2f4;
}
.patient-list-item.selected {
    background:#edf8f5;
    border-left:3px solid var(--teal);
    padding-left:17px;
}
.patient-list-item strong {
    font-size:.85rem;
}
.patient-list-item small {
    font-size:.75rem;
}
.record-summary {
    padding:25px;
    margin-bottom:24px;
}
.record-title {
    display:flex;
    gap:17px;
    align-items:center;
}
.record-title h2 {
    font-size:1.5rem;
}
.record-title .button {
    margin-left:auto;
}
.record-title .eyebrow {
    margin:0;
}
.record-meta {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
    border-top:1px solid var(--border);
    margin-top:25px;
    padding-top:20px;
}
.record-meta strong {
    display:block;
    font-size:.85rem;
    margin-top:4px;
}
.record-meta small {
    font-size:.75rem;
}
.allergy-note {
    background:#fff7e9;
    border:1px solid #f3e7ca;
    border-radius:6px;
    padding:10px 14px;
    font-size:.82rem;
    margin-top:22px;
    color:#84602b;
}
.visit {
    padding:24px;
    border-top:1px solid var(--border);
}
.visit-heading {
    display:flex;
    justify-content:space-between;
    gap:16px;
}
.visit-heading h3 {
    margin:9px 0;
}
.visit time {
    font-size:.8rem;
    color:var(--muted);
    white-space:nowrap;
}
.visit p {
    font-size:.88rem;
    margin-bottom:12px;
}
.visit small {
    font-size:.75rem;
}
.two-column {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px;
    margin-bottom:24px;
}
.settings-panel {
    padding:28px;
    margin-bottom:24px;
}
.settings-panel>h2 {
    margin-bottom:8px;
}
.settings-panel>p {
    margin-bottom:24px;
}
.settings-panel form {
    margin-top:25px;
}
.narrow {
    max-width:620px;
}
.role-row {
    padding:20px 0;
    border-top:1px solid var(--border);
}
.role-row:first-of-type {
    margin-top:20px;
}
.role-row strong {
    font-size:.88rem;
}
.role-row p,.workspace-info p {
    font-size:.86rem;
    color:var(--muted);
    margin-top:7px;
}
.report-header {
    padding:28px;
    margin-bottom:24px;
}
.report-header p {
    color:var(--muted);
    font-size:.85rem;
    margin-top:8px;
}
.chart-panel {
    padding:25px;
}
.bar-chart {
    margin-top:28px;
}
.bar-row {
    display:grid;
    grid-template-columns:105px minmax(0,1fr) 20px;
    gap:12px;
    font-size:.8rem;
    align-items:center;
    margin:20px 0;
}
.bar-track {
    height:12px;
    border-radius:4px;
    background:#edf3f4;
    overflow:hidden;
}
.bar {
    height:100%;
    border-radius:4px;
    background:var(--teal);
}
.report-row {
    display:flex;
    justify-content:space-between;
    gap:15px;
    padding:20px 0;
    border-bottom:1px solid var(--border);
}
.report-row strong {
    font-size:.84rem;
}
.notification-row {
    display:flex;
    gap:18px;
    padding:24px;
    border-top:1px solid var(--border);
}
.notification-row p {
    font-size:.9rem;
    margin-bottom:10px;
}
.mini-pets {
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    padding:0 24px 24px;
}
.mini-pet {
    display:flex;
    align-items:center;
    gap:12px;
    border:1px solid var(--border);
    padding:16px 20px;
    border-radius:8px;
    min-width:200px;
}
.mini-pet strong {
    font-size:.9rem;
}
.notice {
    padding:14px 18px;
    border-radius:8px;
    margin:0 0 24px;
    border:1px solid #b8ddd0;
    background:#eaf7f1;
    color:#236746;
    font-size:.88rem;
}
.notice.error {
    background:#fff0ee;
    border-color:#efc8c3;
    color:#a43f34;
}
.empty {
    text-align:center;
    padding:40px 24px;
    color:var(--muted);
    font-size:.9rem;
}
.empty h2 {
    margin-bottom:10px;
}
.empty .button {
    margin-top:18px;
}
label {
    display:block;
    font-size:.84rem;
    font-weight:550;
    margin-bottom:18px;
}
input,select,textarea {
    display:block;
    width:100%;
    border:1px solid #d5e0e5;
    border-radius:6px;
    padding:10px 12px;
    background:#fff;
    color:var(--ink);
    font-size:.9rem;
    margin-top:7px;
    min-height:44px;
}
textarea {
    resize:vertical;
}
input[readonly] {
    background:#f5f8fa;
    color:var(--muted);
}
.form-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 16px;
}
.checkbox-label {
    display:flex;
    gap:10px;
    align-items:center;
    font-size:.84rem;
}
.checkbox-label input {
    width:18px;
    height:18px;
    min-height:0;
    margin:0;
    accent-color:var(--teal);
}
dialog {
    width:550px;
    max-width:calc(100% - 32px);
    border:1px solid var(--border);
    border-radius:13px;
    padding:26px;
    max-height:90vh;
    overflow:auto;
    color:var(--ink);
    box-shadow:0 30px 100px #142f4440;
}
dialog::backdrop {
    background:#102d4270;
    backdrop-filter:blur(3px);
}
.dialog-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-bottom:26px;
}
.dialog-heading h2 {
    font-size:1.4rem;
}
.close-button {
    background:#f0f5f6;
    border:0;
    width:36px;
    height:36px;
    border-radius:50%;
    font-size:1.4rem;
    color:var(--muted);
    flex-shrink:0;
}
.dialog-actions {
    border-top:1px solid var(--border);
    padding-top:20px;
    margin-top:24px;
    display:flex;
    justify-content:flex-end;
    gap:10px;
}
.menu-button {
    display:none;
    border:0;
    background:none;
    font-size:1.4rem;
    color:var(--ink);
    padding:5px;
}
.skip-link {
    position:fixed;
    top:-80px;
    left:16px;
    background:var(--navy);
    color:white;
    padding:10px 16px;
    border-radius:6px;
    z-index:100;
}
.skip-link:focus {
    top:10px;
}
.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
}
[hidden] {
    display:none!important;
}
.search-empty {
    padding:18px;
    border-radius:8px;
    border:1px solid var(--border);
    background:white;
    color:var(--muted);
    margin:0 38px 30px;
    font-size:.9rem;
}
.public-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding:25px 6vw;
    background:white;
    border-bottom:1px solid var(--border);
}
.public-header nav {
    display:flex;
    align-items:center;
    gap:25px;
    font-size:.85rem;
}
.public-main {
    max-width:1250px;
    margin:auto;
    padding:30px 36px 60px;
}
.public-footer {
    padding:24px 6vw;
    border-top:1px solid var(--border);
    color:var(--muted);
    font-size:.8rem;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:12px;
}
.hero {
    padding:55px 0 60px;
    display:grid;
    grid-template-columns:1.3fr 1fr;
    gap:65px;
    align-items:center;
}
.hero h1 {
    font-size:3.55rem;
    line-height:1.12;
    letter-spacing:-.055em;
    margin:18px 0 25px;
}
.hero>div>p {
    max-width:460px;
    color:var(--muted);
    font-size:1.05rem;
}
.hero-actions {
    display:flex;
    gap:12px;
    margin-top:30px;
    flex-wrap:wrap;
}
.hero-info {
    border-top:1px solid var(--border);
    padding-top:25px;
    margin-top:32px;
    display:flex;
    flex-direction:column;
    gap:7px;
    font-size:.85rem;
    color:var(--muted);
}
.hero-info strong {
    color:var(--ink);
}
.care-card {
    background:var(--navy);
    color:white;
    border-radius:16px;
    padding:35px;
    box-shadow:0 18px 50px #1c40531a;
}
.care-card .eyebrow {
    color:#89c5c0;
}
.care-card h2 {
    font-size:1.8rem;
    line-height:1.25;
    letter-spacing:-.04em;
    margin-bottom:30px;
}
.care-row {
    display:flex;
    gap:18px;
    margin:24px 0;
    align-items:center;
}
.care-row strong {
    font-size:.92rem;
}
.care-row p {
    color:#bfd0d8;
    font-size:.85rem;
    margin-top:4px;
}
.step {
    display:grid;
    place-items:center;
    width:35px;
    height:35px;
    border:1px solid #ffffff25;
    border-radius:50%;
    flex-shrink:0;
    font-size:.8rem;
    color:#a7ddd1;
}
.care-card>.badge {
    margin-top:10px;
    background:#ffffff12;
    color:#cbede8;
}
.section-space {
    margin:22px 0 55px;
}
.section-heading {
    margin-bottom:25px;
}
.section-heading h2 {
    font-size:1.8rem;
    letter-spacing:-.045em;
}
.service-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
}
.service-card {
    padding:25px;
    border-radius:10px;
    border:1px solid var(--border);
    background:white;
}
.service-number {
    display:block;
    font-size:.8rem;
    font-weight:650;
    color:var(--teal);
    margin-bottom:20px;
}
.service-card h3 {
    margin-bottom:9px;
    font-size:.96rem;
}
.service-card p {
    font-size:.84rem;
    color:var(--muted);
}
.contact-panel {
    background:#e6f1ef;
    display:grid;
    grid-template-columns:1.15fr 1fr .7fr;
    gap:30px;
    padding:35px;
    border-radius:12px;
}
.contact-panel h2 {
    font-size:1.4rem;
}
.contact-panel p {
    font-size:.9rem;
    margin:8px 0 16px;
}
.contact-panel strong {
    font-size:.85rem;
}
.auth-layout {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    max-width:1030px;
    margin:55px auto;
    align-items:center;
}
.auth-intro h1 {
    font-size:3rem;
    margin:15px 0 25px;
    letter-spacing:-.05em;
}
.auth-intro>p {
    color:var(--muted);
    font-size:1rem;
    max-width:400px;
}
.auth-detail {
    display:flex;
    align-items:center;
    gap:16px;
    margin-top:60px;
}
.auth-detail strong {
    font-size:.9rem;
}
.auth-detail p {
    font-size:.84rem;
    color:var(--muted);
    margin-top:6px;
}
.auth-form {
    padding:32px;
}
.auth-form h2 {
    font-size:1.35rem;
}
.auth-form>.muted {
    margin:8px 0 28px;
    font-size:.8rem;
}
.auth-bottom {
    margin-top:25px;
    font-size:.84rem;
    text-align:center;
    color:var(--muted);
}
.auth-bottom a {
    color:var(--teal);
    font-weight:600;
}
.account-details {
    background:#f3f7f8;
    border-radius:8px;
    padding:16px;
    margin-top:22px;
    font-size:.8rem;
    color:var(--muted);
}
.account-details summary {
    font-weight:600;
    color:var(--ink);
    cursor:pointer;
}
.account-details p {
    margin-top:9px;
}
@media(min-width:1500px) {
    .dashboard-grid {
        grid-template-columns:minmax(0,1fr) 340px;
    }
    .main-content {
        padding-top:44px;
    }
    .schedule-panel td {
        padding-top:24px;
        padding-bottom:24px;
    }
}
@media(max-width:1220px) {
    .app-shell {
        grid-template-columns:220px minmax(0,1fr);
    }
    .topbar {
        padding:0 25px;
    }
    .main-content {
        padding:28px 25px 18px;
    }
    .sidebar {
        padding-left:12px;
        padding-right:12px;
    }
    .dashboard-grid {
        grid-template-columns:minmax(0,1fr);
    }
    .dashboard-side {
        display:grid;
        grid-template-columns:1fr 1fr;
    }
    .stats-grid {
        gap:12px;
    }
    .stat-card {
        padding:18px 16px;
    }
    .stat-label {
        font-size:.78rem;
    }
    .stat-card>strong.amount {
        font-size:1.45rem;
    }
    .patient-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .record-title {
        flex-wrap:wrap;
    }
    .record-title .button {
        margin-left:0;
    }
    .service-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}
@media(max-width:900px) {
    .app-shell {
        grid-template-columns:minmax(0,1fr);
    }
    .sidebar {
        position:fixed;
        left:0;
        top:0;
        width:248px;
        z-index:30;
        transform:translateX(-100%);
        transition:transform .2s ease;
        box-shadow:15px 0 50px #12344622;
    }
    .sidebar.open {
        transform:translateX(0);
    }
    .menu-button {
        display:block;
    }
    .breadcrumb {
        display:none;
    }
    .topbar {
        height:75px;
    }
    .stats-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .emr-layout {
        grid-template-columns:230px minmax(0,1fr);
    }
    .record-meta {
        grid-template-columns:1fr 1fr;
    }
    .contact-panel {
        grid-template-columns:1fr 1fr;
    }
    .contact-panel>div:first-child {
        grid-column:1/-1;
    }
    .auth-layout {
        gap:30px;
    }
    .hero {
        gap:30px;
    }
    .hero h1 {
        font-size:2.7rem;
    }
    .hero-actions .button {
        white-space:normal;
    }
    .public-header {
        padding:20px 30px;
    }
}
@media(max-width:640px) {
    h1 {
        font-size:1.7rem;
    }
    .main-content {
        padding:23px 16px 18px;
    }
    .topbar {
        padding:0 16px;
    }
    .topbar-left>span {
        display:none;
    }
    .user-menu {
        gap:8px;
    }
    .user-menu strong {
        font-size:.75rem;
    }
    .user-menu small {
        font-size:.75rem;
    }
    .user-menu .avatar {
        width:30px;
        height:30px;
        font-size:.75rem;
    }
    .user-menu .text-button {
        font-size:.75rem;
    }
    .page-heading {
        align-items:flex-start;
        flex-direction:column;
        gap:17px;
        margin-bottom:22px;
    }
    .heading-actions,.heading-actions .button {
        width:100%;
    }
    .stats-grid,.stats-grid.three {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
        margin-bottom:20px;
    }
    .stats-grid.three .stat-card:last-child {
        grid-column:1/-1;
    }
    .stat-card {
        padding:16px 12px;
    }
    .stat-label {
        font-size:.75rem;
    }
    .stat-icon {
        width:26px;
        height:26px;
        font-size:1rem;
    }
    .stat-card>strong {
        font-size:1.8rem;
        margin-top:12px;
    }
    .stat-card>strong.amount {
        font-size:1.35rem;
    }
    .stat-card small {
        font-size:.75rem;
    }
    .dashboard-side {
        grid-template-columns:1fr;
        gap:20px;
    }
    .panel-heading {
        padding:20px;
    }
    .patient-grid {
        grid-template-columns:1fr;
        gap:16px;
    }
    .emr-layout {
        grid-template-columns:1fr;
    }
    .patient-list {
        max-height:290px;
        overflow:auto;
    }
    .record-summary {
        padding:20px;
    }
    .record-title .button {
        width:100%;
    }
    .record-meta {
        grid-template-columns:1fr;
        gap:16px;
    }
    .visit-heading {
        flex-direction:column;
        gap:3px;
    }
    .two-column {
        grid-template-columns:1fr;
        gap:18px;
    }
    .settings-panel {
        padding:22px;
    }
    .filter-bar {
        gap:12px;
    }
    .search-field {
        max-width:none;
        flex-basis:100%;
    }
    .filter-label {
        font-size:.75rem;
    }
    .filter-label select {
        min-width:120px;
        font-size:.8rem;
    }
    .result-count {
        font-size:.75rem;
    }
    .workspace-footer {
        flex-direction:column;
        gap:6px;
        margin-top:25px;
    }
    .public-header {
        padding:16px;
        flex-wrap:wrap;
    }
    .public-header .brand {
        font-size:1.15rem;
    }
    .public-header .brand-mark {
        width:35px;
        height:35px;
    }
    .public-header nav {
        gap:16px;
        font-size:.8rem;
        width:100%;
        justify-content:space-between;
    }
    .public-header nav .button {
        font-size:.8rem;
        padding:8px 12px;
    }
    .public-main {
        padding:24px 18px 35px;
    }
    .hero {
        grid-template-columns:1fr;
        padding:15px 0 30px;
        gap:35px;
    }
    .hero h1 {
        font-size:2.7rem;
        margin:15px 0 20px;
    }
    .hero>div>p {
        font-size:1rem;
    }
    .hero-actions {
        flex-direction:column;
        margin-top:25px;
    }
    .care-card {
        padding:28px;
    }
    .service-grid {
        grid-template-columns:1fr 1fr;
        gap:12px;
    }
    .service-card {
        padding:19px 15px;
    }
    .service-card h3 {
        font-size:.88rem;
    }
    .service-card p {
        font-size:.8rem;
    }
    .section-heading h2 {
        font-size:1.45rem;
    }
    .contact-panel {
        grid-template-columns:1fr;
        gap:10px;
        padding:26px;
    }
    .public-footer {
        padding:22px 18px;
        flex-direction:column;
        font-size:.75rem;
    }
    .auth-layout {
        grid-template-columns:1fr;
        margin:10px auto;
        gap:25px;
    }
    .auth-intro h1 {
        font-size:2.3rem;
        margin:12px 0 15px;
    }
    .auth-intro>p {
        font-size:.95rem;
    }
    .auth-detail {
        display:none;
    }
    .auth-form {
        padding:25px;
    }
    .form-grid {
        grid-template-columns:1fr;
    }
    dialog {
        padding:22px;
    }
    .dialog-actions .button {
        flex:1;
    }
    .dialog-heading h2 {
        font-size:1.25rem;
    }
    .search-empty {
        margin:0 16px 20px;
    }
    .notification-row {
        padding:20px;
        gap:12px;
    }
}
@media(prefers-reduced-motion:reduce) {
    * {
        scroll-behavior:auto!important;
        transition:none!important;
    }
}
@media print {
    body {
        background:white;
    }
    .sidebar,.topbar,.heading-actions,.workspace-footer,td form,.skip-link,.search-empty {
        display:none!important;
    }
    .app-shell {
        display:block;
    }
    .main-content {
        padding:0;
    }
    .panel,.stat-card {
        box-shadow:none;
        break-inside:avoid;
    }
    .page-heading .eyebrow {
        display:none;
    }
    .panel table {
        font-size:12px;
    }
    .two-column {
        display:block;
    }
    .chart-panel {
        margin-bottom:20px;
    }
    .table-wrap {
        overflow:visible;
    }
    .badge {
        color:#222;
        background:#eee;
    }
    .button {
        display:none;
    }
}
.stats-grid.two {
    grid-template-columns:repeat(2,minmax(0,1fr));
}
.sidebar-password {
    color:#c7dbe3;
    text-align:left;
    padding:18px 0 0;
    font-size:.8rem;
}

.sidebar-backdrop,
.sidebar-close {
    display: none;
}

@media screen and (max-width: 900px) {
    .sidebar {
        width: min(286px, 88vw);
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-top: 28px;
    }
    .sidebar-backdrop:not([hidden]) {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 25;
        background: #0d273570;
        border: 0;
        padding: 0;
    }
    .sidebar-close {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        position: absolute;
        top: 19px;
        right: 7px;
        border: 0;
        border-radius: 7px;
        background: transparent;
        color: #e5f0f3;
        font-size: 1.6rem;
    }
    body.navigation-open {
        overflow: hidden;
    }
    .menu-button {
        width: 44px;
        height: 44px;
        flex-shrink: 0;
    }
    .sidebar-password {
        min-height: 44px;
        padding-top: 10px;
    }
    .sidebar-bottom .user-menu {
        justify-content:flex-start;
        margin:0 0 16px;
        padding:0 0 16px;
        border-bottom:1px solid #ffffff18;
        color:#e5f0f3;
    }
    .sidebar-bottom .user-menu > div {
        min-width:0;
    }
    .sidebar-bottom .user-menu strong {
        display:block;
        max-width:190px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        color:#fff;
    }
    .sidebar-bottom .user-menu small {
        color:#aac1cd;
    }
    .sidebar-bottom .user-menu .text-button {
        min-height:44px;
        margin-left:auto;
        color:#b7dedb;
    }
}

@media screen and (max-width: 640px) {
    .workspace,
    .user-menu,
    .user-menu > div,
    .panel-heading > *,
    .care-row > div,
    .record-title > div,
    .hero > div {
        min-width: 0;
    }
    .user-menu {
        flex: 1;
        justify-content: flex-end;
    }
    .user-menu strong {
        display: block;
        max-width: 145px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: .85rem;
    }
    .topbar {
        gap: 4px;
        padding-inline: 10px;
    }
    .text-button,
    .button.compact,
    .close-button,
    .inline label select {
        min-height: 44px;
    }
    input,
    select,
    textarea,
    .filter-label select,
    .quantity-input {
        font-size: 16px !important;
    }
    dialog {
        width: calc(100% - 24px);
        max-width: calc(100% - 24px);
        max-height: calc(var(--visible-height, 100dvh) - 24px);
        padding: 20px;
        overscroll-behavior: contain;
        scroll-padding-block: 20px;
    }
    .dialog-actions {
        flex-wrap: wrap;
    }
    .dialog-actions .button {
        white-space: normal;
        min-width: 100px;
    }
    .panel-heading {
        flex-wrap: wrap;
        gap: 12px;
    }
    .settings-panel .panel-heading {
        padding: 0 0 20px;
    }
    .public-header nav {
        flex-wrap: wrap;
        gap: 8px 16px;
    }
    .public-header nav > a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
    .service-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .hero h1 {
        font-size: clamp(2rem, 9vw, 2.7rem);
    }
    .hero-actions .button,
    .record-title .button,
    .quick-action {
        white-space: normal;
    }
    .hero-info,
    .contact-panel,
    .public-footer,
    .pet-details dd,
    .record-meta strong,
    .visit,
    .notification-row,
    .workspace-footer,
    .role-row,
    .mini-pet {
        overflow-wrap: anywhere;
    }
    .mini-pet {
        min-width: 0;
        width: 100%;
    }
    .table-wrap {
        overflow-x: auto;
    }
    .mobile-table,
    .mobile-table tbody {
        display: block;
        width: 100%;
    }
    .mobile-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }
    .mobile-table tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-bottom: 1px solid var(--border);
        padding: 8px;
    }
    .mobile-table tr:last-child {
        border-bottom: 0;
    }
    .mobile-table td {
        display: block;
        min-width: 0;
        border: 0;
        padding: 10px 12px;
        overflow-wrap: anywhere;
        font-size: .9rem;
    }
    .mobile-table td::before {
        content: attr(data-label);
        display: block;
        color: var(--muted);
        font-size: .8rem;
        font-weight: 600;
        margin-bottom: 7px;
    }
    .mobile-table td:first-child,
    .mobile-table td:last-child,
    .mobile-table td[colspan] {
        grid-column: 1 / -1;
    }
    .mobile-table td[colspan]::before {
        display: none;
    }
    .mobile-table .patient-cell {
        white-space: normal;
    }
    .mobile-table .inline {
        flex-wrap: wrap;
        gap: 10px;
    }
    .mobile-table .inline label {
        flex: 1;
        min-width: 140px;
    }
    .mobile-table .inline select {
        width: 100%;
        max-width: none;
    }
    .mobile-table .quantity-input {
        min-height: 44px !important;
        flex: 1;
        width: 100% !important;
        min-width: 100px;
    }
    .mobile-table .badge {
        max-width: 100%;
        white-space: normal;
    }
}

@media screen and (max-width: 360px) {
    .stats-grid,
    .stats-grid.three,
    .stats-grid.two,
    .mobile-table tr {
        grid-template-columns: minmax(0, 1fr);
    }
    .stats-grid.three .stat-card:last-child {
        grid-column: auto;
    }
    .user-menu .avatar {
        display: none;
    }
    .user-menu strong {
        max-width: 130px;
    }
    .filter-label,
    .filter-label select {
        width: 100%;
    }
    .filter-label {
        justify-content: space-between;
    }
}