/* Minimal global styles — MudBlazor provides the design system. */
html, body {
    margin: 0;
    font-family: 'Roboto', 'Cairo', sans-serif;
}

/* Arabic / RTL uses the Cairo font for better legibility. */
html[dir="rtl"] body {
    font-family: 'Cairo', 'Roboto', sans-serif;
}

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

.loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: #578ad6;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
    color: #578ad6;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "SM Clinic");
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 1rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred. / حدث خطأ.";
}

/* ---- Calendar conventions (backlog 1.8): days the clinic is closed (Friday by default) are shaded in the
   scheduling / practitioner calendars (Heron cells get this class from ClinicCalendar.DayClass). The date-picker
   equivalent is a per-column rule generated from the clinic hours in MainLayout. ---- */
.clinic-closed-day {
    background-color: var(--mud-palette-action-disabled-background);
}

/* ---- Tablet / touch UX (backlog 1.13): key actions keep a >= 44px touch target on touch screens and tablet widths
   (768-1280px); on a desktop mouse the dense look stays. ---- */
@media (pointer: coarse), (max-width: 1280px) {
    .touch-target,
    .touch-target.mud-button-root,
    .touch-target .mud-button-root,
    .touch-target .mud-icon-button {
        min-height: 44px;
    }
    .touch-target .mud-icon-button,
    .mud-icon-button.touch-target {
        min-width: 44px;
    }
    .touch-target .mud-input-slot,
    .touch-target input.mud-input-slot {
        min-height: 44px;
    }
}
@media (pointer: coarse) {
    .mud-icon-button {
        min-width: 44px;
        min-height: 44px;
    }
    .mud-button-root.mud-button {
        min-height: 44px;
    }
    .mud-list-item {
        min-height: 44px;
    }
}

/* Simple tables stack into label / value cards on phones (cells carry data-label). */
@media (max-width: 599.98px) {
    .responsive-table table thead { display: none; }
    .responsive-table table tr { display: block; border-bottom: 1px solid var(--mud-palette-table-lines); padding: 4px 0; }
    .responsive-table table td { display: flex; justify-content: space-between; gap: 8px; border: none !important; }
    .responsive-table table td[data-label]::before { content: attr(data-label); font-weight: 500; }
}

/* Wide simple tables (glucose logbook grid, insulin items) scroll sideways instead of squeezing on tablets. */
.mud-simple-table .mud-table-container { overflow-x: auto; }

/* Phones (backlog 1.13): keep the app bar to icons so the account menu stays on screen. */
@media (max-width: 599.98px) {
    .app-title, .lang-label { display: none; }
}

/* Backlog 2.5 — printable reports: only the report content prints (no app bar, drawer, filters or buttons). */
@media print {
    .mud-appbar, .mud-drawer, .no-print, .mud-table-pagination, .mud-snackbar-provider { display: none !important; }
    .mud-main-content { padding: 0 !important; margin: 0 !important; }
    .report-card { box-shadow: none !important; break-inside: avoid; }
    .report-chart { break-inside: avoid; }
}

/* Practitioner day view (booking): tablet-friendly touch targets, booked blocks next to the free slots. */
.dayview-touch { min-height: 44px; min-width: 44px; }
.dayview .dayview-slot { min-width: 72px; }
.dayview-appt {
    display: inline-flex; flex-direction: column; justify-content: center; padding: 2px 10px; border-radius: 4px;
    background: var(--mud-palette-action-disabled-background); color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem; line-height: 1.2; max-width: 12rem;
}
.dayview-appt .dayview-time { font-weight: 600; }
.dayview-appt .dayview-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dayview-appt-inactive { text-decoration: line-through; opacity: 0.6; }
.dayview-shift-band { border-inline-start: 3px solid var(--mud-palette-primary); padding-inline-start: 6px; }

/* Patient Pulse (patient card): visits across all care files — pulse line or red heart with the count. */
.patient-pulse-toggle { background: none; border: 0; padding: 0 2px; cursor: pointer; display: inline-flex; align-items: center; color: inherit; }
.patient-pulse-heart { position: relative; display: inline-flex; align-items: center; justify-content: center; animation: patient-pulse-beat 1.6s ease-in-out infinite; }
.patient-pulse-count { position: absolute; color: #fff; font-weight: 700; font-size: 0.75rem; line-height: 1; padding-bottom: 2px; }
.patient-pulse-beat { cursor: help; }
@keyframes patient-pulse-beat { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.12); } 90% { transform: scale(0.96); } }
@media (prefers-reduced-motion: reduce) { .patient-pulse-heart { animation: none; } }

/* ---- REDESIGN Phases 3–4 — Today · front desk, booking and check-in (boards Main / Book / CheckIn). Colours follow
   the design: waiting amber, with-doctor blue, expected grey, done green, owes purple, allergy/late red; 10 px radius.
   Logical properties (inline-start/end) keep the layout right in Arabic (RTL). Phones (390 px) stack each row. ---- */
:root {
    --desk-radius: 10px;
    --desk-border: #e3e8ee;
    --desk-row-line: #eef1f5;
    --desk-btn: #3b6fc0;
    --desk-waiting: #b45309;
    --desk-inroom: #3b6fc0;
    --desk-expected: #8593a3;
    --desk-done: #2e7d32;
    --desk-owes-fg: #7a2a9c;
    --desk-owes-bg: #f4e8fb;
    --desk-alert: #a1271e;
}
.mud-theme-dark, .mud-dark { --desk-border: #3a4350; --desk-row-line: #2f3742; }

.desk-card { background: var(--mud-palette-surface); border: 1px solid var(--desk-border); border-radius: var(--desk-radius); }
.desk-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.desk-strong { font-weight: 600; }
.desk-dot { display: inline-block; width: 8px; height: 8px; border-radius: 4px; flex: 0 0 auto; }
.desk-section-title { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
.desk-pill { font-size: 12px; padding: 3px 10px; border-radius: 12px; background: var(--mud-palette-action-default-hover); }
.desk-note { padding: 10px 12px; border-radius: var(--desk-radius); background: rgba(87, 138, 214, .10); color: var(--mud-palette-text-primary); }
.desk-tag { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 12px; white-space: nowrap; }
.desk-tag-paid { color: #166534; background: #e3f5e8; }
.desk-tag-owes { color: var(--desk-owes-fg); background: var(--desk-owes-bg); }
.desk-tag-missingdetails, .desk-tag-missing { color: #8a4b08; background: #fff4e5; }
.desk-tag-returning { color: #3a4654; background: #eef1f5; }
.desk-tag-room { color: #1f4785; background: #e8f0fb; }
.desk-tag-late { color: var(--desk-alert); background: #fdecea; }
.desk-danger.mud-button-root { color: var(--desk-alert); }

/* Header */
.today-page { display: flex; flex-direction: column; gap: 16px; }
.today-header { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.today-heading { display: flex; flex-direction: column; margin-inline-end: auto; min-width: 0; }
.today-title { margin: 0; font-size: 22px; font-weight: 600; }
.today-find { flex: 0 1 340px; min-width: 220px; }
.today-find .mud-input-control { margin-top: 0; }

/* Doctor chips */
.today-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.today-chip {
    height: 36px; padding: 0 14px; border-radius: 18px; border: 1px solid var(--desk-border); background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font: inherit;
}
.today-chip.is-on { background: var(--desk-btn); border-color: var(--desk-btn); color: #fff; }
.today-chip-count { color: var(--mud-palette-text-secondary); }
.today-chip.is-on .today-chip-count { color: rgba(255, 255, 255, .85); }

/* Columns: the list, then the selected patient + follow-ups */
.today-columns { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.today-list { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.today-aside { flex: 1 1 340px; max-width: 400px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }

/* Side-column cards (Today): follow-ups to book, availability today */
.side-card { display: flex; flex-direction: column; overflow: hidden; }
.side-card-head { display: flex; align-items: center; gap: 8px; padding: 10px 8px 10px 14px; border-bottom: 1px solid var(--desk-row-line); }
html[dir="rtl"] .side-card-head { padding: 10px 14px 10px 8px; }
.side-card-title { font-weight: 600; font-size: 14px; }
.side-card-count { min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--mud-palette-action-default-hover);
    font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.side-card-empty, .side-card-note { padding: 10px 14px; color: var(--mud-palette-text-secondary); font-size: 13px; }
.side-card-note { display: flex; align-items: center; gap: 6px; padding-bottom: 0; }
.side-card-foot { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 4px 8px; border-top: 1px solid var(--desk-row-line); font-size: 13px; }
.side-list { list-style: none; margin: 0; padding: 0; }
.side-item { padding: 10px 14px; border-bottom: 1px solid var(--desk-row-line); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.side-item:last-child { border-bottom: 0; }
.side-item.is-off { opacity: .7; }
.side-item-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.side-item-name { flex: 1 1 auto; min-width: 0; font-weight: 600; color: var(--mud-palette-text-primary); text-decoration: none; }
a.side-item-name:hover { text-decoration: underline; }
.side-item-sub { font-size: 13px; color: var(--mud-palette-text-secondary); overflow-wrap: anywhere; }
.side-item-actions { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.side-item-phone { font-size: 13px; color: var(--mud-palette-primary); text-decoration: none; }
.side-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 11px; font-size: 12px; white-space: nowrap;
    background: var(--mud-palette-action-default-hover); color: var(--mud-palette-text-primary); }
.side-tag-ok { background: rgba(46, 125, 50, .14); color: #1b5e20; }
.side-tag-alert { background: rgba(198, 40, 40, .14); color: #b71c1c; }
.mud-theme-dark .side-tag-ok, .mud-dark .side-tag-ok { color: #a5d6a7; }
.mud-theme-dark .side-tag-alert, .mud-dark .side-tag-alert { color: #ef9a9a; }
.availability-specialties { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--desk-row-line); }
.availability-out-label { font-size: 12px; }
.today-stage { display: flex; flex-direction: column; gap: 8px; }
.today-stage-title {
    margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--mud-palette-text-secondary);
    display: flex; align-items: center; gap: 8px;
}
.today-stage-count { font-weight: 500; }
.stage-dot-Waiting, .stage-dot-WithDoctor, .stage-dot-Expected, .stage-dot-Done { width: 10px; height: 10px; border-radius: 5px; }
.stage-dot-Waiting { background: var(--desk-waiting); }
.stage-dot-WithDoctor { background: var(--desk-inroom); }
.stage-dot-Expected { background: var(--desk-expected); }
.stage-dot-Done { background: var(--desk-done); }

.today-rows { display: flex; flex-direction: column; overflow: hidden; }
.today-row {
    display: grid; grid-template-columns: 64px minmax(0, 1fr) 150px 140px auto; align-items: center; gap: 12px;
    padding: 10px 14px; border-bottom: 1px solid var(--desk-row-line); cursor: pointer;
}
.today-row:last-child { border-bottom: 0; }
.today-row:hover { background: var(--mud-palette-action-default-hover); }
.today-row.is-selected { background: rgba(87, 138, 214, .12); box-shadow: inset 3px 0 0 var(--desk-btn); }
html[dir="rtl"] .today-row.is-selected { box-shadow: inset -3px 0 0 var(--desk-btn); }
.today-row.is-cancelled { opacity: .6; }
.today-row:focus-visible { outline: 2px solid var(--desk-btn); outline-offset: -2px; }
.today-lead { font-weight: 600; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.today-who { display: flex; flex-direction: column; min-width: 0; }
.today-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.today-sub { font-size: 12px; color: var(--mud-palette-text-secondary); }
.today-doctor { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.today-tag-cell { justify-self: start; }
.today-actions { justify-self: end; display: flex; align-items: center; gap: 6px; }
.today-toggle-cancelled { border: 0; background: none; padding: 8px 14px; color: var(--mud-palette-primary); cursor: pointer; font: inherit; text-align: start; }

/* Side panel */
.desk-panel-name { font-size: 17px; font-weight: 600; }
.desk-checklist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.desk-checklist li { display: flex; gap: 10px; align-items: center; }
.desk-step {
    width: 22px; height: 22px; border-radius: 11px; background: #e8f0fb; color: #1f4785; font-size: 12px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.desk-panel-primary.mud-button-root { min-height: 48px; border-radius: var(--desk-radius); }
.desk-panel-secondary { display: flex; flex-wrap: wrap; gap: 8px; }
.desk-panel-secondary .mud-button-root { flex: 1 1 auto; min-height: 36px; white-space: nowrap; }

/* Booking / check-in dialogs */
.desk-day {
    width: 72px; height: 56px; border-radius: var(--desk-radius); border: 1px solid var(--desk-border); background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary); display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    cursor: pointer; font: inherit;
}
.desk-day-dow { font-size: 12px; }
.desk-day-num { font-size: 16px; font-weight: 600; }
.desk-day.is-on, .desk-slot.is-on { background: var(--desk-btn); border-color: var(--desk-btn); color: #fff; }
.desk-docrow { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 0; border-top: 1px solid var(--desk-row-line); }
.desk-slot {
    height: 36px; min-width: 64px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--desk-border); background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary); font: inherit; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer;
}
.desk-match {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; text-align: start; padding: 10px 12px; border-radius: var(--desk-radius);
    border: 1px solid var(--desk-border); background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); cursor: pointer; font: inherit;
}
.desk-match:hover { border-color: var(--desk-btn); }
.desk-required .mud-input-outlined-border, .desk-wanted .mud-input-outlined-border { border-color: #d38a2a; border-width: 2px; }
.checkin-amount { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.checkin-change { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--desk-radius); background: #e3f5e8; color: #166534; font-size: 16px; font-weight: 700; }
.checkin-change.checkin-change-short { background: #fdecea; color: var(--desk-alert); }
.checkin-token { font-size: 28px; font-weight: 700; color: #1f4785; }
.checkin-primary.mud-button-root, .checkin-later.mud-button-root, .book-submit.mud-button-root { min-height: 48px; border-radius: var(--desk-radius); }

@media (max-width: 899.98px) {
    .today-row { grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "lead who actions" "lead doctor tag"; row-gap: 4px; }
    .today-lead { grid-area: lead; }
    .today-who { grid-area: who; }
    .today-doctor { grid-area: doctor; font-size: 12px; }
    .today-tag-cell { grid-area: tag; justify-self: end; }
    .today-actions { grid-area: actions; }
    .today-aside { max-width: none; flex-basis: 100%; }
}
@media (max-width: 599.98px) {
    .today-find { flex: 1 1 100%; min-width: 0; }
    .today-header > .mud-button-root { flex: 1 1 40%; }
    .today-row { grid-template-columns: 48px minmax(0, 1fr); grid-template-areas: "lead who" "doctor doctor" "tag actions"; padding: 10px 12px; }
    .today-tag-cell { justify-self: start; }
    .today-panel-host, .today-panel-hint { display: none; }
    .desk-docrow { grid-template-columns: minmax(0, 1fr); }
    .desk-day { width: 56px; }
}
/* ===== REDESIGN Phase 5 — My day + the Visit screen (boards "Today — doctor" / "The visit"). Same tokens as the front
   desk; logical properties keep RTL right; at 390 px the cards and sections stack and the finish bar stays at the bottom. */
.myday-scope { display: flex; gap: 4px; }
.myday-scope .mud-button-root { min-height: 40px; }
.myday-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 16px; }
.myday-card { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.myday-card-label { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #1f4785; }
.myday-next { background: #fffaf2; border-color: #f0d9b5; }
.mud-theme-dark .myday-next, .mud-dark .myday-next { background: rgba(180, 83, 9, .12); }
.myday-next-label { color: #8a4b08; }
.myday-card-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.myday-card-name { font-size: 17px; font-weight: 600; }
.myday-avatar {
    width: 48px; height: 48px; border-radius: 24px; background: #e8f0fb; color: #1f4785; font-weight: 700; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
}
.myday-token {
    min-width: 48px; height: 48px; padding: 0 6px; border-radius: var(--desk-radius); background: var(--desk-waiting); color: #fff; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; direction: ltr;
}
.myday-card-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.myday-card-actions .myday-primary.mud-button-root { flex: 1 1 200px; min-height: 48px; border-radius: var(--desk-radius); font-size: 15px; }
.myday-card-actions .myday-secondary.mud-button-root { min-height: 48px; border-radius: var(--desk-radius); }
.myday-call.mud-button-root { background: var(--desk-waiting); color: #fff; }
.myday-call.mud-button-root:hover { background: #8a4b08; }
.myday-room { max-width: 200px; }
.myday-start-hint { font-size: 12px; }
.myday-row {
    display: grid; grid-template-columns: 64px minmax(0, 1fr) 150px auto; align-items: center; gap: 12px;
    padding: 10px 14px; border-bottom: 1px solid var(--desk-row-line);
}
.myday-row:last-child { border-bottom: 0; }
.myday-row-readonly { grid-template-columns: 64px minmax(0, 1fr) 150px; }
.myday-note { font-size: 12px; color: var(--mud-palette-text-secondary); }
.myday-row-action.mud-button-root { min-height: 36px; }
.myday-dot-Waiting { background: var(--desk-waiting); width: 10px; height: 10px; border-radius: 5px; }
.myday-dot-Later { background: var(--desk-expected); width: 10px; height: 10px; border-radius: 5px; }
.myday-dot-Seen { background: var(--desk-done); width: 10px; height: 10px; border-radius: 5px; }
.myday-clinic { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 16px; }
.myday-needs { flex: 1 1 300px; max-width: 360px; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.myday-needs-title { font-weight: 600; padding-bottom: 4px; }
.needs-group { border-top: 1px solid var(--desk-row-line); padding-top: 8px; display: flex; flex-direction: column; }
.needs-head { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.needs-count {
    min-width: 26px; height: 26px; border-radius: 13px; background: #eef1f5; color: #3a4654; font-weight: 700; font-size: 13px;
    display: inline-flex; align-items: center; justify-content: center; padding: 0 6px;
}
.needs-count-critical { background: #fdecea; color: var(--desk-alert); }
.needs-count-unsigned { background: #fff4e5; color: #8a4b08; }
.needs-item {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; padding: 4px 0 4px 36px;
    color: var(--mud-palette-text-primary); text-decoration: none; font-size: 13px;
}
html[dir="rtl"] .needs-item { padding: 4px 36px 4px 0; }
.needs-item:hover { color: var(--mud-palette-primary); }
[dir="rtl"] .needs-chevron { transform: scaleX(-1); }

/* The Visit screen */
.visit-page { display: flex; flex-direction: column; gap: 16px; padding-bottom: 88px; }
.visit-header { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 12px 18px; }
.visit-avatar { width: 44px; height: 44px; background: #fde8d7; color: #9a3412; }
.visit-who { display: flex; flex-direction: column; min-width: 0; margin-inline-end: auto; }
.visit-name { font-size: 18px; font-weight: 600; }
.visit-allergies { display: flex; flex-wrap: wrap; gap: 6px; }
.visit-allergy { color: #fff; background: var(--desk-alert); }
.visit-in-room { font-size: 12px; }
.visit-finish-btn.mud-button-root { min-height: 44px; border-radius: var(--desk-radius); background: #1f6b3a; color: #fff; font-weight: 600; }
.visit-finish-btn.mud-button-root:hover { background: #17552e; }
.visit-finish-btn.mud-button-root.mud-button-disabled { background: var(--mud-palette-action-disabled-background); color: var(--mud-palette-action-disabled); }
.visit-columns { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.visit-aside { flex: 1 1 260px; max-width: 320px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.visit-main { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.visit-card { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.visit-card-head { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.visit-section-title { margin: 0; font-size: 17px; font-weight: 600; }
.visit-carefile {
    display: flex; flex-direction: column; gap: 2px; text-align: start; padding: 10px 12px; border-radius: var(--desk-radius);
    border: 1px solid var(--desk-border); background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); cursor: pointer; font: inherit;
}
.visit-carefile.is-on { border: 2px solid var(--desk-btn); background: rgba(87, 138, 214, .10); }
.visit-carefile:disabled { opacity: .55; cursor: default; }
.visit-carefile-sub { font-size: 12px; }
.visit-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.visit-chip {
    min-height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid #d5dce4; background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary); cursor: pointer; font: inherit;
}
.visit-chip.is-on { background: var(--desk-btn); border-color: var(--desk-btn); color: #fff; }
.visit-chip:disabled { opacity: .55; cursor: default; }
.visit-safety-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.visit-safety-label { flex: 1 1 auto; }
.visit-meds { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.visit-orders { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 14px; }
.visit-rx-item { display: flex; flex-direction: column; gap: 2px; }
.visit-rx-sig { font-size: 12px; }
.visit-modes, .visit-intervals { display: flex; flex-wrap: wrap; gap: 6px; }
.visit-slot-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.visit-slot { font-weight: 600; }
.visit-steps { padding: 14px 16px; border-color: #f0c2bd; background: #fff7f6; }
.mud-theme-dark .visit-steps, .mud-dark .visit-steps { background: rgba(161, 39, 30, .12); }
.visit-steps ul { margin: 8px 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.visit-step { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.visit-step.is-done, .visit-step.is-queued { color: #166534; }
.visit-step.is-failed { color: var(--desk-alert); font-weight: 600; }
.visit-step-error { flex-basis: 100%; padding-inline-start: 28px; font-weight: 400; }
.visit-bar {
    position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 18px;
    border-radius: var(--desk-radius) var(--desk-radius) 0 0; box-shadow: 0 -2px 8px rgba(0, 0, 0, .06);
}
.visit-bar-spacer { flex: 1 1 auto; }
.visit-bar .mud-button-root { min-height: 44px; border-radius: var(--desk-radius); }

@media (max-width: 899.98px) {
    .myday-needs { max-width: none; flex-basis: 100%; }
    .visit-aside { max-width: none; flex-basis: 100%; }
}
@media (max-width: 599.98px) {
    .myday-row { grid-template-columns: 48px minmax(0, 1fr); grid-template-areas: "lead who" "note actions"; padding: 10px 12px; }
    .myday-row .today-lead { grid-area: lead; }
    .myday-row .today-who { grid-area: who; }
    .myday-row .myday-note { grid-area: note; }
    .myday-row .today-actions { grid-area: actions; justify-self: end; }
    .myday-row-readonly { grid-template-areas: "lead who" "note note"; }
    .myday-scope { flex: 1 1 100%; }
    .myday-scope .mud-button-root { flex: 1 1 50%; }
    .visit-header { padding: 12px; gap: 10px; }
    .visit-header .visit-finish-header { display: none; }
    .visit-bar { position: fixed; inset-inline: 0; bottom: 0; border-radius: 0; padding: 10px 12px; }
    .visit-bar .visit-back-myday { display: none; }
    .visit-bar .visit-bar-spacer { display: none; }
    .visit-bar .visit-save { flex: 0 0 auto; }
    .visit-bar .visit-finish { flex: 1 1 auto; }
}
/* ===== end REDESIGN Phase 5 ===== */
/* ===== REDESIGN Phase 6 — patients list (PatientsPage: search, quick filters, triage table, phone cards) ===== */
.plist { --plist-accent: #3b6fc0; --plist-line: var(--mud-palette-lines-default, #e3e8ee); display: flex; flex-direction: column; gap: 14px; }
.plist .plist-phone { display: none; }
.plist-search .mud-input-outlined-border { border-width: 2px; border-color: var(--plist-accent, #3b6fc0); border-radius: 12px; }
.plist-search .mud-input-root { font-size: 16px; }
.plist-search .mud-input-adornment-start .mud-icon-root { color: var(--plist-accent, #3b6fc0); }
.plist-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.plist-chip {
    height: 36px; padding: 0 14px; border-radius: 18px; border: 1px solid #d5dce4; background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-primary, #1d2733); font: inherit; font-weight: 500; display: inline-flex; align-items: center;
    gap: 8px; cursor: pointer; white-space: nowrap; flex: none;
}
.plist-chip:focus-visible { outline: 2px solid var(--plist-accent, #3b6fc0); outline-offset: 2px; }
.plist-chip-on { background: var(--plist-accent, #3b6fc0); border-color: var(--plist-accent, #3b6fc0); color: #fff; }
.plist-chip-count { opacity: .8; }
.plist-empty { padding: 32px 16px; text-align: center; color: var(--mud-palette-text-secondary, #5b6675);
    background: var(--mud-palette-surface, #fff); border: 1px solid var(--plist-line); border-radius: 10px; }
.plist-table-wrap { background: var(--mud-palette-surface, #fff); border: 1px solid var(--plist-line); border-radius: 10px; overflow-x: auto; }
.plist-table { width: 100%; border-collapse: collapse; min-width: 860px; }
.plist-table th { text-align: start; color: var(--mud-palette-text-secondary, #5b6675); font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em; padding: 12px 8px; }
.plist-table th:first-child, .plist-table td:first-child { padding-inline-start: 16px; }
.plist-table td { padding: 10px 8px; border-top: 1px solid var(--plist-line); vertical-align: middle; }
.plist-row { cursor: pointer; }
.plist-row:hover { background: var(--mud-palette-action-default-hover); }
.plist-who { display: flex; align-items: center; gap: 12px; }
.plist-who-text, .plist-two { display: flex; flex-direction: column; min-width: 0; }
.plist-name { font-weight: 600; color: var(--mud-palette-text-primary, #1d2733); text-decoration: none; }
a.plist-name:hover { text-decoration: underline; }
.plist-meta { font-size: 12px; color: var(--mud-palette-text-secondary, #5b6675); }
.plist-cell-open { text-align: end; padding-inline-end: 16px !important; }
.plist-flags { display: flex; flex-wrap: wrap; gap: 6px; }
.plist-flag { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 12px; white-space: nowrap; align-self: flex-start; }
.plist-flag-allergy { color: #a1271e; background: #fdecea; }
.plist-flag-allergy-severe { color: #fff; background: #a1271e; }
.plist-flag-warn { color: #8a4b08; background: #fff4e5; }
.plist-flag-info { color: #1f4785; background: #e8f0fb; }
.plist-flag-neutral, .plist-flag-more { color: #3a4654; background: #eef1f5; }
.plist-flag-owes { color: #7a2a9c; background: #f4e8fb; }
.plist-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[dir="rtl"] .plist-chevron { transform: scaleX(-1); }
.plist-pager { display: flex; justify-content: center; }

@media (max-width: 599.98px) {
    .plist { gap: 10px; }
    .plist .plist-desktop { display: none; }
    .plist .plist-phone-head { display: flex; align-items: center; gap: 8px; }
    .plist .plist-cards { display: flex; }
    .plist-phone-title { margin: 0; font-size: 19px; font-weight: 600; flex: 1; }
    .plist-add { width: 44px; height: 44px; border-radius: 10px !important; }
    .plist-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
    .plist-cards { list-style: none; margin: 0; padding: 0; flex-direction: column; gap: 8px; }
    .plist-card { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px; border-radius: 10px;
        background: var(--mud-palette-surface, #fff); border: 1px solid var(--plist-line); color: var(--mud-palette-text-primary, #1d2733); text-decoration: none; }
    .plist-card-body { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
    .plist-card-body .plist-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .plist-card .plist-flag { padding: 2px 8px; border-radius: 10px; }
    .plist-card .plist-chevron { color: #8593a3; flex: none; }
}
/* ===== end REDESIGN Phase 6 — patients list ===== */
/* ===== REDESIGN Phase 7 — patient record (header, tabs, Overview cards, More, care files + timeline, phone) ===== */
:root { --rec-accent: #3b6fc0; --rec-warn: #8a4b08; --rec-ok: #166534;
    --rec-alert: #a1271e; }
.rec { display: flex; flex-direction: column; gap: 14px; }
.rec-card { background: var(--mud-palette-surface, #fff); border: 1px solid var(--desk-border); border-radius: 10px; padding: 16px;
    display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rec-card-head { display: flex; align-items: center; gap: 8px; }
.rec-card-title { margin: 0; font-size: 15px; font-weight: 600; flex: 1; }
.rec-card-link, .rec-link { font-size: 13px; font-weight: 600; color: var(--mud-palette-primary); text-decoration: none; }
.rec-card-link:hover, .rec-link:hover { text-decoration: underline; }
.rec-link-btn { border: 0; background: none; padding: 4px 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--mud-palette-primary);
    cursor: pointer; text-align: start; align-self: flex-start; }
.rec-sub { font-size: 12px; color: var(--mud-palette-text-secondary, #5b6675); }
.rec-empty, .rec-empty-line { color: var(--mud-palette-text-secondary, #5b6675); }
.appt-row-open { cursor: pointer; }
.appt-row-open:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: -2px; }
.appt-open-cell { width: 1%; text-align: end; }
.rec-empty { padding: 24px 16px; text-align: center; background: var(--mud-palette-surface, #fff); border: 1px solid var(--desk-border);
    border-radius: 10px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.rec-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rec-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--desk-row-line); min-width: 0; }
.rec-row-stack { display: flex; flex-direction: column; align-items: flex-start; }
.rec-row-main { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rec-row-title { font-weight: 500; }
.rec-row-actions { display: inline-flex; align-items: center; }
.rec-row-end { align-items: flex-end; text-align: end; }
.rec-code { font-size: 12px; padding: 1px 8px; border-radius: 10px; border: 1px solid #b9c7da; color: #1f4785; direction: ltr; unicode-bidi: isolate; }
.rec-pill { font-size: 12px; padding: 3px 10px; border-radius: 12px; background: #eef1f5; color: #3a4654; }
.rec-tag { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 12px; white-space: nowrap; }
.rec-tag-overdue { color: var(--rec-alert); background: #fdecea; }
.rec-tag-soon { color: var(--rec-warn); background: #fff4e5; }
.rec-tag-ok { color: var(--rec-ok); background: #e3f5e8; }
.rec-chevron { color: #8593a3; flex: none; }
[dir="rtl"] .rec-chevron { transform: scaleX(-1); }

/* Header */
.rec-header { background: var(--mud-palette-surface, #fff); border: 1px solid var(--desk-border); border-radius: 10px; padding: 12px 16px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
[dir="rtl"] .rec-back .mud-icon-root { transform: scaleX(-1); }
.rec-ident { display: flex; flex-direction: column; gap: 4px; margin-inline-end: auto; min-width: 220px; flex: 1 1 260px; }
.rec-name { margin: 0; font-size: 20px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.rec-meta { color: var(--mud-palette-text-secondary, #5b6675); }
.rec-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.rec-allergy { font: inherit; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 12px; border: 0; line-height: 1.5; }
button.rec-allergy { cursor: pointer; }
button.rec-allergy:focus-visible { outline: 2px solid var(--rec-accent); outline-offset: 2px; }
.rec-allergy-severe { background: var(--rec-alert, #a1271e); color: #fff; font-weight: 700; }
.rec-allergy-soft { background: #fdecea; color: var(--rec-alert, #a1271e); }
.rec-allergy-nka { background: #eef1f5; color: #3a4654; }
.rec-allergy-unknown { background: #fff4e5; color: var(--rec-warn, #8a4b08); }
.rec-visit-chip { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 12px; background: #e8f0fb; color: #1f4785; }
.rec-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rec-actions { display: flex; align-items: center; gap: 8px; }
.rec-actions .mud-button-root { min-height: 44px; border-radius: 10px; }
.rec-bottombar { display: none; }

/* Tabs */
.rec-tabs { display: flex; gap: 4px; border-bottom: 1px solid #dfe5ec; overflow-x: auto; scrollbar-width: none; }
.rec-tab { padding: 10px 14px; white-space: nowrap; text-decoration: none; color: #3a4654; border-bottom: 3px solid transparent;
    display: inline-flex; align-items: center; gap: 6px; }
.mud-theme-dark .rec-tab, .mud-dark .rec-tab { color: var(--mud-palette-text-secondary); }
.rec-tab.is-on { color: #1f4785; font-weight: 600; border-bottom-color: var(--rec-accent); }
.rec-tab:focus-visible { outline: 2px solid var(--rec-accent); outline-offset: -2px; }
.rec-tab-count { font-size: 12px; color: var(--mud-palette-text-secondary, #5b6675); }

/* Overview */
.ov-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 14px; align-items: start; }
.ov-toggle, .ov-due-line { display: none; }
.ov-hba1c { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.ov-hba1c-text { display: flex; flex-direction: column; }
.ov-hba1c-value { font-size: 30px; font-weight: 700; line-height: 1.2; }
.ov-hba1c-value.is-warn { color: var(--rec-warn); }
.ov-hba1c-value.is-ok { color: var(--rec-ok); }
.ov-delta { font-size: 12px; font-weight: 600; }
.ov-delta-ok { color: var(--rec-ok); }
.ov-delta-warn { color: var(--rec-warn); }
.ov-spark { flex: none; }
[dir="rtl"] .ov-spark { transform: scaleX(-1); }
.ov-spark-line { fill: none; stroke: var(--rec-accent); stroke-width: 2.5; }
.ov-spark-dot { fill: var(--rec-accent); }
.ov-spark-base { stroke: var(--desk-border); }
.ov-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ov-tile { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 8px; background: var(--mud-palette-background-gray, #f7f9fb); }
.ov-tile-value { font-size: 16px; font-weight: 600; }
.ov-tile.is-warn .ov-tile-value { color: var(--rec-warn); }
.ov-tile.is-ok .ov-tile-value { color: var(--rec-ok); }
.ov-body { display: flex; flex-direction: column; gap: 8px; }
.ov-resolved { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.rec-link-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--desk-border);
    text-decoration: none; color: var(--mud-palette-text-primary, #1d2733); }
.rec-link-card:hover { border-color: var(--rec-accent); }
.rec-link-card.is-closed { color: var(--mud-palette-text-secondary, #5b6675); }
.rec-link-card-body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ov-visit { display: flex; flex-direction: column; gap: 2px; }
.ov-visit + .ov-visit, .ov-advice { padding-top: 10px; border-top: 1px solid var(--desk-row-line); }
.ov-visit-note { color: var(--mud-palette-text-primary, #1d2733); text-decoration: none; }
.ov-visit-note:hover { text-decoration: underline; }
.ov-advice { display: flex; flex-wrap: wrap; gap: 6px; }
.ov-advice-title { width: 100%; }

/* More */
.rec-more { display: flex; flex-direction: column; gap: 12px; }
.rec-more-nav { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
.rec-more-link { text-decoration: none; }

/* Care files */
.cf-layout { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.cf-list { flex: 1 1 220px; max-width: 260px; display: flex; flex-direction: column; gap: 8px; }
.cf-list-item { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 10px; background: var(--mud-palette-surface, #fff);
    border: 1px solid var(--desk-border); text-decoration: none; color: var(--mud-palette-text-primary, #1d2733); }
.cf-list-item.is-on { border: 2px solid var(--rec-accent); padding: 11px; }
.cf-list-item.is-closed { color: var(--mud-palette-text-secondary, #5b6675); }
.cf-picker { display: none; }
.cf-main { flex: 999 1 520px; min-width: 0; }
.cf-view { display: flex; flex-direction: column; gap: 14px; }
.cf-head-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cf-head-title { display: flex; flex-direction: column; gap: 2px; margin-inline-end: auto; min-width: 0; }
.cf-title { margin: 0; font-size: 18px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.cf-diagnosis { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cf-state { background: #eef1f5; color: #3a4654; }
.cf-state-New { background: #e8f0fb; color: #1f4785; }
.cf-state-UnderInvestigation { background: #fff4e5; color: var(--rec-warn); }
.cf-state-Resolved { background: #e3f5e8; color: var(--rec-ok); }
.cf-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 10px; }
.cf-summary-block { padding: 10px 12px; border-radius: 8px; background: var(--mud-palette-background-gray, #f7f9fb); display: flex; flex-direction: column; gap: 4px; }
.cf-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.cf-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.cf-pinned { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 10px; background: rgba(87, 138, 214, .10); border: 1px solid #b9c7da; }
.cf-pinned-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; }
.cf-timeline { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.cf-entry { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; }
.cf-when { display: flex; flex-direction: column; padding-top: 14px; }
.cf-entry.is-focused .rec-card { border-color: var(--rec-accent); box-shadow: 0 0 0 2px rgba(59, 111, 192, .25); }
.cf-encounter { gap: 8px; }
.cf-encounter.is-draft { border-style: dashed; }
.cf-encounter-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cf-encounter-type { margin-inline-end: auto; }
.cf-encounter-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.cf-vitals { font-size: 13px; color: #3a4654; font-variant-numeric: tabular-nums; }
.mud-theme-dark .cf-vitals, .mud-dark .cf-vitals { color: var(--mud-palette-text-secondary); }
.cf-notes { white-space: pre-line; }
.cf-items { display: flex; flex-wrap: wrap; gap: 6px; }
.cf-chip { font: inherit; font-size: 12px; padding: 3px 10px; border-radius: 12px; border: 0; }
button.cf-chip { cursor: pointer; }
.cf-chip-rx { background: #e8f0fb; color: #1f4785; }
.cf-chip-lab { background: #fff4e5; color: var(--rec-warn); }
.cf-chip-advice { background: #eef1f5; color: #3a4654; }
.cf-addenda { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid var(--desk-row-line); }
.cf-addendum { display: flex; flex-direction: column; }
.cf-item { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.cf-rx, .cf-lab { flex-direction: column; align-items: stretch; }
.cf-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cf-item-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px; }
.cf-lines { margin: 0; padding-inline-start: 18px; }

/* Phones: back + allergy chips in the header, tabs scroll, Overview rows collapse, the primary action at the bottom. */
@media (max-width: 599.98px) {
    .rec { gap: 10px; padding-bottom: 84px; }
    .rec-header { padding: 8px 10px 12px; gap: 8px; }
    .rec-ident { min-width: 0; flex-basis: calc(100% - 120px); }
    .rec-name { font-size: 17px; }
    .rec-meta { font-size: 12px; }
    .rec-chips { order: 5; flex-basis: 100%; }
    .rec-badges { order: 6; }
    .rec-actions-primary, .rec-book { display: none; }
    .rec-bottombar {
        display: flex; gap: 10px; position: fixed; inset-inline: 0; bottom: 0; z-index: 5; padding: 10px 12px 18px;
        background: var(--mud-palette-surface, #fff); border-top: 1px solid var(--desk-border);
    }
    .rec-bottombar .mud-button-root { min-height: 48px; border-radius: 10px; }
    .rec-bottombar .rec-bottom-primary { flex: 1; }
    .rec-tab { padding: 12px; }
    .ov-grid { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
    .ov-keys { order: 1; padding: 14px; }
    .ov-due-line { order: 2; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px;
        background: #fff4e5; border: 1px solid #f0d9b5; color: #1d2733; }
    .ov-due-line-text { flex: 1; }
    .ov-due-line-more { font-size: 12px; color: #8a4b08; font-weight: 600; }
    .ov-problems { order: 3; }
    .ov-medicines { order: 4; }
    .ov-visits { order: 5; }
    .ov-due, .ov-carefiles { display: none; }
    .ov-collapsible { padding: 0; gap: 0; }
    .ov-collapsible .ov-head { display: none; }
    .ov-collapsible .ov-toggle {
        display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px 14px; border: 0; background: none; font: inherit;
        color: inherit; text-align: start; cursor: pointer; width: 100%;
    }
    .ov-toggle-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
    .ov-toggle-text .rec-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ov-collapsible.is-open .ov-toggle-icon { transform: rotate(180deg); }
    .ov-collapsible .ov-body { display: none; padding: 0 14px 12px; }
    .ov-collapsible.is-open .ov-body { display: flex; }
    .cf-list { display: none; }
    .cf-picker { display: block; flex-basis: 100%; }
    .cf-main { flex-basis: 100%; }
    .cf-entry { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .cf-when { flex-direction: row; gap: 6px; padding-top: 0; }
}
/* ===== end REDESIGN Phase 7 — patient record ===== */