:root {
  --cal-sidebar: 228px;
  --cal-topbar: 72px;
  --cal-rail: 390px;
  --cal-resource-min: 180px;
}

body { overflow: hidden; }
.calendar-app { min-height: 100dvh; display: grid; grid-template-columns: var(--cal-sidebar) minmax(0, 1fr); }
.sidebar { position: relative; z-index: 20; height: 100dvh; padding: 16px 12px 12px; display: flex; flex-direction: column; gap: 14px; color: #d9e6fb; background: var(--vr-gradient-sidebar); box-shadow: 10px 0 30px rgba(5, 20, 43, .08); }
.brand, .tenant-card, .user-card, .preview-connection { display: flex; align-items: center; gap: 10px; }
.brand { min-height: 46px; padding: 0 8px; }
.brand-mark { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: linear-gradient(145deg, #59a0ff, #235ec9); font-weight: 850; box-shadow: 0 9px 22px rgba(4, 17, 40, .28); }
.brand strong, .tenant-card strong, .user-card strong { display: block; color: #fff; }
.brand strong { font-size: 18px; letter-spacing: -.03em; }
.brand small, .tenant-card small, .user-card small { display: block; color: #9cb5da; }
.tenant-card, .user-card, .preview-connection { border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(255,255,255,.055); }
.tenant-card { padding: 11px; }
.avatar { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: var(--vr-primary-900); background: #eaf2ff; font-size: 11px; font-weight: 800; }
.side-nav { display: grid; gap: 4px; }
.nav-item { width: 100%; min-height: 48px; padding: 7px 10px; display: flex; align-items: center; gap: 11px; border: 1px solid transparent; border-radius: 11px; color: #c4d4ee; background: transparent; text-align: left; text-decoration: none; font-size: 12.5px; font-weight: 650; }
.nav-item > svg { width: 19px; height: 19px; flex: 0 0 auto; }
.nav-item > span, .nav-item > span > span { min-width: 0; display: block; }
.nav-item small { display: block; margin-top: 2px; color: #829bc2; font-size: 9px; }
.nav-item:hover:not(:disabled) { color: #fff; background: rgba(255,255,255,.075); }
.nav-item.is-active { color: #fff; border-color: rgba(122, 174, 255, .22); background: linear-gradient(135deg, rgba(57,126,238,.34), rgba(37,91,185,.42)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); }
.nav-item.is-unavailable { opacity: .68; }
.sidebar-footer { margin-top: auto; display: grid; gap: 9px; }
.preview-connection { width: 100%; min-height: 48px; padding: 9px 10px; color: #dce8fa; text-align: left; }
.preview-connection small { display: block; color: #8ea7cd; }
.preview-dot { width: 9px; height: 9px; border-radius: 50%; background: #f1b64d; box-shadow: 0 0 0 4px rgba(241,182,77,.12); }
.user-card { min-height: 46px; padding: 7px 9px; }

.workspace { min-width: 0; height: 100dvh; display: flex; flex-direction: column; transition: margin-right var(--vr-duration) var(--vr-ease); }
.calendar-app.has-context-rail .workspace { margin-right: var(--cal-rail); }
.calendar-app.has-context-rail .topbar { gap: 8px; }
.calendar-app.has-context-rail .topbar { padding-right: 8px; }
.calendar-app.has-context-rail .top-actions { gap: 5px; }
.calendar-app.has-context-rail .top-actions .button { width: 36px; min-height: 36px; padding-inline: 0; }
.calendar-app.has-context-rail .top-actions .button span:not(.count-badge) { display: none; }
.calendar-app.has-context-rail .top-actions .button-primary { display: none; }
.calendar-app.has-context-rail .header-actions .button { width: 40px; padding-inline: 0; }
.calendar-app.has-context-rail .header-actions .button span { display: none; }
.topbar { height: var(--cal-topbar); flex: 0 0 var(--cal-topbar); padding: 0 18px; display: flex; align-items: center; gap: 18px; border-bottom: 1px solid var(--vr-border); background: rgba(255,255,255,.96); box-shadow: var(--vr-shadow-xs); }
.page-heading { min-width: 140px; }
.page-heading h1 { margin-top: 2px; }
.period-control { display: flex; align-items: center; gap: 5px; }
.icon-button { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border: 1px solid var(--vr-border); border-radius: 10px; background: #fff; }
.icon-button:hover { border-color: var(--vr-border-strong); background: var(--vr-primary-50); }
.date-button { min-height: 40px; padding: 0 12px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--vr-border); border-radius: 10px; background: #fff; font-size: 12px; font-weight: 700; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.button { min-height: 40px; padding: 0 13px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--vr-border); border-radius: 10px; background: #fff; color: var(--vr-text); font-size: 12px; font-weight: 720; white-space: nowrap; }
.button:hover:not(:disabled) { border-color: var(--vr-border-strong); background: var(--vr-surface-subtle); }
.button svg { width: 17px; height: 17px; }
.button-primary { border-color: var(--vr-primary-700); color: #fff; background: var(--vr-gradient-primary); box-shadow: 0 6px 14px rgba(35, 94, 197, .18); }
.button-primary:hover:not(:disabled) { background: var(--vr-primary-800); }
.button-secondary { border-color: #b9c9df; color: var(--vr-primary-800); }
.button-ghost { background: transparent; }
.button-mira { border: 0; color: #fff; background: var(--vr-gradient-mira); box-shadow: 0 6px 16px rgba(90,78,186,.18); }
.button-mira:hover:not(:disabled) { background: linear-gradient(135deg,#5a49c5,#2f7e9d); }
.button-block { width: 100%; }
.count-badge { min-width: 19px; height: 19px; padding: 0 5px; display: grid; place-items: center; border-radius: 999px; color: var(--vr-primary-900); background: var(--vr-primary-100); font-size: 10px; }

.calendar-main { min-height: 0; flex: 1; padding: 12px 14px 20px; overflow: auto; }
.preview-banner { min-height: 38px; padding: 8px 11px; display: flex; align-items: center; gap: 9px; border: 1px solid #ead79f; border-radius: 11px; color: #765111; background: #fff9e8; font-size: 11px; }
.preview-badge { padding: 3px 7px; border-radius: 999px; color: #fff; background: #aa7112; font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.calendar-toolbar { margin-top: 10px; min-height: 54px; padding: 7px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--vr-border); border-radius: 13px; background: #fff; box-shadow: var(--vr-shadow-xs); }
.view-tabs { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--vr-border); border-radius: 10px; background: var(--vr-surface-soft); }
.view-tabs button { min-width: 66px; min-height: 34px; padding: 0 11px; border: 0; border-radius: 8px; color: var(--vr-text-secondary); background: transparent; font-size: 11.5px; font-weight: 750; }
.view-tabs button.is-active { color: #fff; background: var(--vr-gradient-primary); box-shadow: 0 3px 9px rgba(31,91,193,.18); }
.search-field { min-width: 180px; max-width: 320px; flex: 1; position: relative; }
.search-field svg { position: absolute; z-index: 1; top: 10px; left: 10px; width: 17px; height: 17px; color: var(--vr-text-muted); }
.search-field input { padding-left: 34px; }
.resource-select { min-width: 184px; display: grid; grid-template-columns: auto minmax(125px,1fr); align-items: center; gap: 7px; color: var(--vr-text-muted); font-size: 10px; font-weight: 700; }
.resource-select select { min-height: 38px; font-size: 11px; }
.density-control { margin-left: auto; height: 38px; display: flex; align-items: center; border: 1px solid var(--vr-border); border-radius: 10px; overflow: hidden; }
.density-control button { width: 38px; height: 38px; border: 0; background: #fff; font-size: 18px; }
.density-control button:hover { background: var(--vr-primary-50); }
.density-control span { min-width: 54px; color: var(--vr-text-secondary); text-align: center; font-size: 10px; font-weight: 720; }
.active-context { margin-top: 8px; min-height: 34px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.context-chip { min-height: 30px; padding: 0 8px 0 10px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid #c6d7ef; border-radius: 999px; color: var(--vr-primary-800); background: var(--vr-primary-50); font-size: 10px; font-weight: 700; }
.context-chip svg { width: 14px; height: 14px; }
.local-change-badge { min-height: 32px; padding: 5px 6px 5px 10px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e4c87f; border-radius: 999px; color: #765111; background: #fff7df; font-size: 10px; }
.local-change-badge button { min-height: 24px; display: inline-flex; align-items: center; gap: 4px; border: 0; border-radius: 999px; color: #765111; background: #f4dfaa; font-size: 9px; font-weight: 750; }
.local-change-badge svg { width: 13px; height: 13px; }
.metric-strip { margin: 9px 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.metric-card { min-height: 62px; padding: 9px 11px; display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 9px; border: 1px solid var(--vr-border); border-radius: 12px; background: #fff; text-align: left; box-shadow: var(--vr-shadow-xs); }
.metric-card:hover { border-color: #b9c9df; transform: translateY(-1px); }
.metric-card[aria-pressed="true"] { border-color: var(--vr-primary-500); box-shadow: 0 0 0 2px rgba(45,114,232,.12); }
.metric-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: var(--vr-primary-700); background: var(--vr-primary-50); }
.metric-icon svg { width: 16px; height: 16px; }
.metric-card strong, .metric-card small { display: block; }
.metric-card strong { font-size: 11px; }
.metric-card b { font-size: 21px; letter-spacing: -.04em; }
.metric-card.is-conflict .metric-icon { color: var(--vr-danger); background: var(--vr-danger-bg); }
.metric-card.is-return .metric-icon { color: var(--vr-return); background: var(--vr-return-bg); }

.view-panel { border: 1px solid var(--vr-border); border-radius: 15px; background: #fff; box-shadow: var(--vr-shadow-xs); overflow: hidden; }
.view-panel-header { min-height: 58px; padding: 10px 13px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--vr-border); }
.header-actions { display: flex; gap: 7px; }
.readmodel-note { color: var(--vr-text-muted); font-size: 10px; }
.day-grid-scroll { height: min(640px, calc(100dvh - 310px)); min-height: 390px; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; background: #fff; }
.day-grid { --minute-px: 1px; min-width: calc(74px + var(--lane-count) * var(--cal-resource-min)); display: grid; grid-template-columns: 74px repeat(var(--lane-count), minmax(var(--cal-resource-min),1fr)); grid-template-rows: 68px calc(1440 * var(--minute-px)); position: relative; }
.grid-corner, .resource-header { position: sticky; top: 0; z-index: 14; min-height: 68px; border-bottom: 1px solid var(--vr-border-strong); background: #fbfcfe; }
.grid-corner { left: 0; z-index: 18; grid-column: 1; grid-row: 1; padding: 12px 9px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--vr-border-strong); color: var(--vr-text-secondary); font-size: 10px; }
.grid-corner small { margin-top: 2px; font-size: 8.5px; }
.resource-header { grid-row: 1; padding: 9px 36px 8px 9px; display: grid; grid-template-columns: 30px minmax(0,1fr); align-content: center; align-items: center; column-gap: 8px; border-right: 1px solid var(--vr-border); }
.resource-header > span:nth-child(2) strong, .resource-header > span:nth-child(2) small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resource-header strong { font-size: 11.5px; line-height: 1.25; }
.resource-header small { margin-top: 2px; font-size: 9.5px; line-height: 1.25; }
.resource-header > button { position: absolute; right: 6px; top: 8px; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--vr-border); border-radius: 8px; background: #fff; }
.resource-header > button svg { width: 14px; height: 14px; }
.resource-avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: var(--vr-primary-800); background: var(--vr-primary-100); font-size: 9px; font-weight: 850; }
.resource-state { grid-column: 2; margin-top: 4px; display: flex; align-items: center; gap: 4px; color: var(--vr-text-muted); font-size: 9.25px; line-height: 1.2; }
.resource-state i { width: 6px; height: 6px; border-radius: 50%; background: var(--vr-success); }
.resource-state.is-driving i { background: var(--vr-info); }
.resource-state.is-attention i { background: var(--vr-warning); }
.resource-header.is-unassigned { background: #fffaf0; }
.time-rail { position: sticky; left: 0; z-index: 12; grid-column: 1; grid-row: 2; min-height: calc(1440 * var(--minute-px)); border-right: 1px solid var(--vr-border-strong); background: #fbfcfe; }
.time-label { position: absolute; top: calc(var(--hour) * 60 * var(--minute-px)); left: 0; width: 100%; padding: 4px 8px 0 0; color: var(--vr-text-muted); font-size: 10px; font-weight: 700; text-align: right; transform: translateY(-1px); }
.now-time-label { position: absolute; z-index: 15; top: calc(var(--now-minute) * var(--minute-px)); left: 7px; padding: 3px 5px; border-radius: 7px; color: #fff; background: #e04b55; box-shadow: 0 3px 8px rgba(190,48,60,.2); font-size: 9.5px; font-weight: 850; line-height: 1.05; transform: translateY(-50%); }
.now-time-label small { display: block; margin-top: 2px; color: #ffe7e9; font-size: 6.5px; font-weight: 700; }
.resource-lane { position: relative; grid-row: 2; min-height: calc(1440 * var(--minute-px)); border-right: 1px solid var(--vr-border); background-color: #fff; background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(30 * var(--minute-px) - 1px), rgba(230,236,244,.72) calc(30 * var(--minute-px)), transparent calc(30 * var(--minute-px) + 1px)), repeating-linear-gradient(to bottom, transparent 0, transparent calc(60 * var(--minute-px) - 1px), rgba(201,211,225,.9) calc(60 * var(--minute-px)), transparent calc(60 * var(--minute-px) + 1px)); }
.resource-lane.is-unassigned { background-color: #fffdfa; }
.resource-lane.is-drop-target { box-shadow: inset 0 0 0 3px rgba(45,114,232,.38); background-color: #f1f7ff; }
.lane-now-line { position: absolute; z-index: 3; top: calc(var(--now-minute) * var(--minute-px)); right: 0; left: 0; height: 2px; background: rgba(224,75,85,.8); pointer-events: none; }
.ride-card { position: absolute; z-index: 4; top: calc(var(--start-minute) * var(--minute-px) + 4px); left: 5px; right: 5px; height: max(60px, calc(var(--duration-minute) * var(--minute-px) - 7px)); min-height: 0; padding: 7px 8px 7px 10px; overflow: hidden; border: 1px solid #a7d8c1; border-left: 4px solid var(--vr-success); border-radius: 9px; color: #185c43; background: var(--vr-success-bg); box-shadow: 0 2px 8px rgba(21,48,77,.07); text-align: left; }
.ride-card:hover { z-index: 8; transform: translateY(-1px); box-shadow: 0 7px 18px rgba(21,48,77,.14); }
.ride-card.is-dragging { opacity: .45; }
.ride-card.is-local-preview { outline: 2px dashed #9d6f15; outline-offset: 1px; }
.ride-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 9.5px; line-height: 1.15; }
.ride-top > span { display: inline-flex; align-items: center; gap: 3px; font-size: 9px; font-weight: 780; }
.ride-top svg { width: 12px; height: 12px; }
.ride-patient-row { margin-top: 4px; display: flex; align-items: center; gap: 5px; min-width: 0; }
.ride-patient-row > b, .ride-route { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ride-patient-row > b { min-width: 0; flex: 1; color: var(--vr-text); font-size: 11.5px; line-height: 1.2; }
.ride-transport { flex: 0 0 auto; padding: 2px 5px; border-radius: 999px; color: inherit; background: rgba(255,255,255,.68); font-size: 8.75px; font-weight: 780; line-height: 1.2; }
.ride-route { margin-top: 3px; color: var(--vr-text-secondary); font-size: 10.25px; line-height: 1.2; }
.local-label { position: absolute; right: 4px; bottom: 3px; padding: 1px 4px; border-radius: 999px; color: #744f0e; background: #fff0bb; font-size: 7.5px; font-weight: 800; }
.ride-card.tone-info { color: #215ea9; border-color: #b1cff5; border-left-color: var(--vr-info); background: var(--vr-info-bg); }
.ride-card.tone-warning { color: #885603; border-color: #ebce83; border-left-color: var(--vr-warning); background: var(--vr-warning-bg); }
.ride-card.tone-danger { color: #993039; border-color: #efb1b6; border-left-color: var(--vr-danger); background: var(--vr-danger-bg); }
.ride-card.tone-return { color: #a55212; border-style: dashed; border-color: #efb88f; border-left-style: solid; border-left-color: var(--vr-return); background: var(--vr-return-bg); }
.grid-empty { position: sticky; left: 100px; z-index: 10; grid-column: 2 / -1; grid-row: 2; align-self: start; width: min(420px, calc(100vw - 360px)); margin: 80px auto; padding: 24px; display: grid; justify-items: center; gap: 7px; border: 1px solid var(--vr-border); border-radius: 14px; background: rgba(255,255,255,.96); box-shadow: var(--vr-shadow-sm); text-align: center; }
.grid-empty > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; color: var(--vr-primary-700); background: var(--vr-primary-50); }
.mobile-agenda { display: none; }
.legend { min-height: 38px; padding: 7px 12px; display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--vr-border); overflow-x: auto; }
.legend span { display: inline-flex; align-items: center; gap: 5px; color: var(--vr-text-muted); font-size: 9px; white-space: nowrap; }
.legend-mark { width: 9px; height: 9px; border-radius: 3px; background: var(--vr-success); }
.legend-mark.is-return { background: var(--vr-return); }
.legend-mark.is-warning { background: var(--vr-warning); }
.legend-mark.is-conflict { background: var(--vr-danger); }

.week-grid { padding: 10px; display: grid; grid-template-columns: repeat(7,minmax(145px,1fr)); gap: 8px; overflow-x: auto; }
.week-day { min-height: 430px; display: flex; flex-direction: column; border: 1px solid var(--vr-border); border-radius: 12px; background: var(--vr-surface-subtle); overflow: hidden; }
.week-day.is-selected { border-color: var(--vr-primary-500); box-shadow: 0 0 0 2px rgba(45,114,232,.11); }
.week-day-header { min-height: 82px; padding: 10px; border: 0; border-bottom: 1px solid var(--vr-border); background: #fff; text-align: left; }
.week-day-header span, .week-day-header strong, .week-day-header small { display: block; }
.week-day-header span { color: var(--vr-primary-700); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.week-day-header strong { margin-top: 3px; font-size: 13px; }
.week-day-header small { margin-top: 4px; font-size: 9px; }
.week-kpis { padding: 7px; display: grid; gap: 4px; border-bottom: 1px solid var(--vr-border); }
.week-kpis span { display: flex; align-items: center; gap: 4px; color: var(--vr-text-secondary); font-size: 8.5px; }
.week-kpis svg { width: 11px; height: 11px; }
.week-rides { min-height: 250px; padding: 8px; display: grid; align-content: start; gap: 8px; }
.week-load { display: grid; gap: 5px; }
.week-load > span { height: 7px; overflow: hidden; border-radius: 999px; background: #e7edf5; }
.week-load i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--vr-primary-500),var(--vr-primary-700)); }
.week-load small { color: var(--vr-text-muted); font-size: 9px; }
.week-plan-list { display: grid; gap: 5px; }
.week-plan-row { min-height: 42px; padding: 7px; display: grid; grid-template-columns: 1fr auto; gap: 2px 6px; align-items: center; border: 1px solid var(--vr-border); border-radius: 9px; background: #fff; }
.week-plan-row time { grid-column: 1 / -1; color: var(--vr-text-muted); font-size: 9px; font-weight: 720; }
.week-plan-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--vr-text-secondary); font-size: 9.5px; }
.week-plan-row strong { color: var(--vr-primary-800); font-size: 12px; }
.week-aggregate-empty { min-height: 150px; display: grid; place-content: center; gap: 4px; color: var(--vr-text-muted); text-align: center; }
.week-samples { display: grid; gap: 6px; }
.week-samples > small { color: var(--vr-text-muted); font-size: 8.5px; font-weight: 700; }
.week-rides .ride-card { position: relative; inset: auto; height: 68px; }
.week-placeholder { padding: 24px 6px; color: var(--vr-text-muted); font-size: 9px; text-align: center; }
.open-day-button { margin-top: auto; min-height: 38px; padding: 0 9px; display: flex; align-items: center; justify-content: space-between; border: 0; border-top: 1px solid var(--vr-border); color: var(--vr-primary-700); background: #fff; font-size: 9px; font-weight: 750; }
.open-day-button svg { width: 13px; height: 13px; }
.month-weekdays, .month-grid { display: grid; grid-template-columns: repeat(7,minmax(90px,1fr)); }
.month-weekdays { border-bottom: 1px solid var(--vr-border); }
.month-weekdays span { min-height: 32px; display: grid; place-items: center; color: var(--vr-text-muted); background: #fbfcfe; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.month-grid { min-width: 680px; }
.month-day { min-height: 106px; padding: 8px; position: relative; display: flex; flex-direction: column; align-items: flex-start; border: 0; border-right: 1px solid var(--vr-border); border-bottom: 1px solid var(--vr-border); background: #fff; text-align: left; }
.month-day:hover { background: var(--vr-primary-50); }
.month-day.is-outside { color: #9ca6b6; background: #f8fafc; opacity: .72; }
.month-day.is-selected { box-shadow: inset 0 0 0 2px var(--vr-primary-500); }
.month-day.has-conflict { background: #fff8f8; }
.month-date { font-size: 10px; font-weight: 750; }
.month-day > strong { margin-top: 8px; font-size: 19px; letter-spacing: -.04em; }
.month-day > small { font-size: 8px; }
.month-signals { margin-top: 6px; display: grid; gap: 3px; }
.month-signals i { font-size: 7.5px; font-style: normal; font-weight: 750; }
.signal-unassigned { color: var(--vr-warning); }
.signal-conflict { color: var(--vr-danger); }
.signal-return { color: var(--vr-return); }
.month-empty { margin: auto; color: #b6bfcc; }

.context-rail { position: fixed; z-index: 60; top: 0; right: 0; bottom: 0; width: var(--cal-rail); display: flex; flex-direction: column; border-left: 1px solid var(--vr-border); background: #fff; box-shadow: -16px 0 38px rgba(20,37,64,.12); }
.rail-header { min-height: 72px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--vr-border); }
.detail-content, .mira-content { min-height: 0; padding: 14px; overflow: auto; }
.mira-content { display: grid; align-content: start; gap: 10px; }
.detail-status { padding: 10px; display: flex; align-items: center; gap: 9px; border: 1px solid #b5cdf1; border-radius: 11px; color: var(--vr-info); background: var(--vr-info-bg); }
.detail-status svg { width: 18px; height: 18px; }
.detail-status strong, .detail-status small { display: block; }
.detail-status.tone-warning { color: var(--vr-warning); border-color: #ead294; background: var(--vr-warning-bg); }
.detail-status.tone-danger { color: var(--vr-danger); border-color: #efbec2; background: var(--vr-danger-bg); }
.detail-status.tone-return { color: var(--vr-return); border-color: #efc09d; background: var(--vr-return-bg); }
.detail-facts, .guard-facts, .mira-state dl { margin: 12px 0; display: grid; gap: 0; border: 1px solid var(--vr-border); border-radius: 12px; overflow: hidden; }
.detail-facts > div, .guard-facts > div, .mira-state dl > div { padding: 9px 10px; display: grid; grid-template-columns: 98px minmax(0,1fr); gap: 8px; border-bottom: 1px solid var(--vr-border); }
.detail-facts > div:last-child, .guard-facts > div:last-child, .mira-state dl > div:last-child { border-bottom: 0; }
dt { color: var(--vr-text-muted); font-size: 9px; font-weight: 750; text-transform: uppercase; }
dd { margin: 0; color: var(--vr-text); font-size: 11px; font-weight: 650; }
dd small { display: block; }
.route-arrow { margin: 0 5px; color: var(--vr-primary-600); }
.requirement-chip { margin: 1px 3px 1px 0; padding: 3px 6px; display: inline-block; border-radius: 999px; color: var(--vr-text-secondary); background: var(--vr-surface-soft); font-size: 8px; }
.detail-actions { display: grid; gap: 7px; }
.mira-brand { display: flex; align-items: center; gap: 10px; }
.mira-orb { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: var(--vr-gradient-mira); box-shadow: 0 8px 18px rgba(90,78,186,.22); }
.mira-state { display: grid; gap: 11px; }
.mira-state h3 { font-size: 17px; }
.mira-state > p:not(.eyebrow) { color: var(--vr-text-secondary); font-size: 12px; }
.step-badge { width: max-content; padding: 4px 8px; border-radius: 999px; color: var(--vr-mira-strong); background: var(--vr-mira-bg); font-size: 9px; font-weight: 800; }
.mira-state-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: var(--vr-warning); background: var(--vr-warning-bg); }
.mira-contract { display: grid; gap: 6px; }
.mira-contract span { min-height: 32px; padding: 6px 8px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--vr-border); border-radius: 9px; color: var(--vr-text-secondary); background: var(--vr-surface-subtle); font-size: 9.5px; }
.mira-contract svg { width: 14px; height: 14px; color: var(--vr-mira); }
.mira-actions, .modal-actions { display: flex; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.check-list, .reason-list { margin: 0; padding: 0; display: grid; gap: 6px; list-style: none; }
.check-list li, .reason-list li { padding: 7px 8px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--vr-border); border-radius: 9px; background: var(--vr-surface-subtle); font-size: 10px; }
.check-list svg { width: 14px; height: 14px; color: var(--vr-success); }
code { padding: 2px 4px; border-radius: 5px; color: var(--vr-primary-800); background: var(--vr-primary-50); font: 9px ui-monospace, SFMono-Regular, Consolas, monospace; }
.final-summary { padding: 12px; display: grid; gap: 4px; border: 1px solid #d1c9f5; border-radius: 12px; background: var(--vr-mira-bg); }
.final-summary small { display: block; }
.mira-principle { display: flex; align-items: flex-start; gap: 9px; padding: 10px 11px; border: 1px solid #d8e6e0; border-radius: 11px; color: var(--vr-text-secondary); background: #f4faf7; }
.mira-principle-icon { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; color: var(--vr-success); background: var(--vr-success-bg); }
.mira-principle-icon svg { width: 15px; height: 15px; }
.mira-principle strong, .mira-principle small { display: block; }
.mira-principle strong { color: var(--vr-text); font-size: 11.5px; }
.mira-principle small { margin-top: 2px; font-size: 10px; line-height: 1.45; }
.mira-quick-prompts { display: flex; flex-wrap: wrap; gap: 6px; }
.mira-quick-prompts button { min-height: 34px; padding: 6px 9px; border: 1px solid #d8d2f4; border-radius: 999px; color: var(--vr-mira-strong); background: #fbfaff; font-size: 10px; font-weight: 760; cursor: pointer; }
.mira-quick-prompts button:hover { border-color: var(--vr-mira); background: var(--vr-mira-bg); }
.mira-thread { max-height: 238px; padding: 3px 1px; display: grid; gap: 8px; overflow-y: auto; scrollbar-gutter: stable; }
.mira-chat-message { width: min(94%,360px); padding: 10px 11px; display: grid; gap: 5px; border: 1px solid #ddd7f6; border-radius: 13px 13px 13px 4px; color: var(--vr-text-secondary); background: #fbfaff; }
.mira-chat-message.is-user { justify-self: end; border-color: #bcd6f4; border-radius: 13px 13px 4px 13px; background: #f1f7ff; }
.mira-message-author { color: var(--vr-text-muted); font-size: 9px; font-weight: 820; letter-spacing: .04em; text-transform: uppercase; }
.mira-chat-message > strong { color: var(--vr-text); font-size: 11.5px; }
.mira-chat-message p { margin: 0; font-size: 11px; line-height: 1.5; }
.mira-chat-message ul { margin: 1px 0 0; padding: 0; display: grid; gap: 4px; list-style: none; }
.mira-chat-message li { display: flex; align-items: flex-start; gap: 5px; font-size: 10px; }
.mira-chat-message li svg { width: 13px; height: 13px; flex: 0 0 auto; color: var(--vr-success); }
.mira-chat-message .button { width: max-content; min-height: 34px; font-size: 10.5px; }
.mira-plan-stage { padding-top: 10px; border-top: 1px solid #e2def5; }
.mira-typing { padding: 0 14px 8px; display: flex; align-items: center; gap: 4px; color: var(--vr-text-muted); background: #fff; }
.mira-typing[hidden] { display: none; }
.mira-typing > span { width: 6px; height: 6px; border-radius: 50%; background: var(--vr-mira); animation: mira-pulse 1.1s infinite ease-in-out; }
.mira-typing > span:nth-child(2) { animation-delay: .14s; }
.mira-typing > span:nth-child(3) { animation-delay: .28s; }
.mira-typing small { margin-left: 4px; font-size: 9.5px; }
.mira-input { padding: 9px 10px calc(9px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; border-top: 1px solid #e2def5; background: #fff; }
.mira-input input { min-width: 0; min-height: 40px; flex: 1; padding: 8px 10px; border: 1px solid var(--vr-border-strong); border-radius: 9px; }
.mira-input .icon-button { color: #fff; background: var(--vr-mira); }
.mira-input .mira-stop { min-height: 40px; padding-inline: 10px; font-size: 10.5px; }
.mira-input > small { width: 100%; color: var(--vr-text-muted); font-size: 9.5px; }
@keyframes mira-pulse { 0%, 65%, 100% { opacity: .35; transform: translateY(0); } 32% { opacity: 1; transform: translateY(-2px); } }

.filter-popover { position: fixed; z-index: 75; top: 65px; right: 212px; width: 300px; padding: 12px; border: 1px solid var(--vr-border); border-radius: 14px; background: #fff; box-shadow: var(--vr-shadow-md); }
.filter-popover header, .modal-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.filter-options { margin: 10px 0; display: grid; gap: 6px; }
.filter-options label { min-height: 42px; padding: 7px 9px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--vr-border); border-radius: 9px; }
.filter-options input { width: 17px; min-height: 17px; }
.modal-backdrop { position: fixed; z-index: 79; inset: 0; background: rgba(7,19,40,.38); backdrop-filter: blur(2px); }
.modal-card, .bottom-sheet { position: fixed; z-index: 80; left: 50%; top: 50%; width: min(620px, calc(100vw - 28px)); max-height: calc(100dvh - 32px); padding: 14px; overflow: auto; border: 1px solid var(--vr-border); border-radius: 17px; background: #fff; box-shadow: var(--vr-shadow-md); transform: translate(-50%,-50%); }
.slot-form { margin-top: 13px; display: grid; gap: 10px; }
.slot-form label { display: grid; gap: 5px; color: var(--vr-text-secondary); font-size: 10px; font-weight: 700; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.booking-dialog { width: min(1040px, calc(100vw - 40px)); max-height: calc(100dvh - 30px); padding: 0; overflow: hidden; }
.booking-header { min-height: 82px; padding: 16px 20px; border-bottom: 1px solid var(--vr-border); background: linear-gradient(180deg,#fff 0%,#fbfcff 100%); }
.booking-header > div { min-width: 0; }
.booking-header h2 { margin: 2px 0 3px; font-size: 22px; }
.booking-header p:not(.eyebrow) { margin: 0; color: var(--vr-text-secondary); font-size: 12px; font-weight: 500; }
.booking-form { max-height: calc(100dvh - 112px); display: flex; flex-direction: column; min-height: 0; }
.booking-edit-body { min-height: 0; flex: 1 1 auto; display: grid; grid-template-columns: minmax(0,1fr) 294px; overflow: auto; }
.booking-main { min-width: 0; padding: 14px 18px 20px; display: grid; gap: 11px; }
.booking-section { padding: 13px 14px 14px; display: grid; gap: 11px; border: 1px solid var(--vr-border); border-radius: 13px; background: #fff; box-shadow: var(--vr-shadow-xs); }
.booking-section > header { display: flex; align-items: center; gap: 9px; }
.booking-section > header > span { width: 27px; height: 27px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 8px; color: var(--vr-primary-800); background: var(--vr-primary-100); font-size: 11px; font-weight: 850; }
.booking-section h3, .booking-summary h3, .booking-review h3 { margin: 0; color: var(--vr-text); font-size: 15px; line-height: 1.25; }
.booking-section header p, .review-heading p { margin: 2px 0 0; color: var(--vr-text-muted); font-size: 11px; }
.booking-section label, .booking-summary label { display: grid; gap: 5px; color: var(--vr-text-secondary); font-size: 11px; font-weight: 760; }
.booking-section label > small { color: var(--vr-text-muted); font-size: 10px; font-weight: 500; }
.booking-section input:not([type="radio"]):not([type="checkbox"]), .booking-section select, .booking-section textarea { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--vr-border-strong); border-radius: 9px; color: var(--vr-text); background: #fff; font-size: 12px; font-weight: 560; }
.booking-section textarea { min-height: 76px; resize: vertical; line-height: 1.45; }
.booking-section input:focus-visible, .booking-section select:focus-visible, .booking-section textarea:focus-visible { border-color: var(--vr-primary-500); }
.choice-segment, .return-choice { margin: 0; padding: 3px; display: grid; gap: 4px; border: 1px solid var(--vr-border); border-radius: 11px; background: var(--vr-surface-subtle); }
.choice-segment { grid-template-columns: 1fr 1fr; }
.choice-segment.recurrence-choice { grid-template-columns: repeat(2,1fr); }
.return-choice { grid-template-columns: repeat(3,1fr); }
.choice-segment label, .return-choice label { min-height: 48px; padding: 8px 10px; position: relative; display: flex; align-items: center; gap: 8px; border: 1px solid transparent; border-radius: 8px; cursor: pointer; }
.choice-segment label:has(input:checked), .return-choice label:has(input:checked) { color: var(--vr-primary-800); border-color: #a8d6c4; background: #eff9f5; box-shadow: var(--vr-shadow-xs); }
.choice-segment input, .return-choice input { width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--vr-primary-700); }
.choice-segment span { display: grid; gap: 2px; font-size: 12px; }
.choice-segment small { color: var(--vr-text-muted); font-size: 9.5px; font-weight: 520; }
.form-with-action { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 8px; }
.form-with-action .button { min-height: 40px; white-space: nowrap; }
.inline-create { padding: 11px; display: grid; gap: 9px; border: 1px dashed #a8c2e8; border-radius: 11px; background: #f7faff; }
.inline-create[hidden] { display: none; }
.inline-create-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.inline-create-head > div { display: grid; gap: 2px; }
.inline-create-head strong { font-size: 12px; }
.inline-create-head small { color: var(--vr-text-muted); font-size: 10px; }
.facility-fields { display: grid; gap: 9px; }
.patient-autofill { min-height: 0; }
.patient-autofill:not(:empty) { padding: 9px 10px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; border: 1px solid #cfe2da; border-radius: 10px; background: var(--vr-primary-50); }
.patient-autofill span { min-width: 0; display: grid; gap: 2px; }
.patient-autofill small { color: var(--vr-text-muted); font-size: 9px; }
.patient-autofill strong { overflow: hidden; color: var(--vr-text-secondary); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.field-provenance { margin: -4px 0 0; color: var(--vr-text-muted); font-size: 9.5px; }
.recurrence-controller { display: grid; gap: 9px; }
.recurrence-default-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: stretch; gap: 8px; }
.booking-section .recurrence-default-choice { min-height: 48px; padding: 8px 10px; display: flex; align-items: center; gap: 9px; border: 1px solid #a8d6c4; border-radius: 10px; color: var(--vr-primary-800); background: #eff9f5; cursor: pointer; }
.recurrence-default-choice input { width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--vr-primary-700); }
.recurrence-default-choice span { display: grid; gap: 2px; }
.recurrence-default-choice strong { font-size: 11.5px; }
.recurrence-default-choice small { color: var(--vr-text-muted); font-size: 9.5px; font-weight: 520; }
.recurrence-toggle { min-height: 48px; white-space: nowrap; }
.recurrence-options { padding: 9px; display: grid; gap: 7px; border: 1px solid #cbdcf3; border-radius: 10px; background: #f7faff; }
.recurrence-options[hidden] { display: none; }
.recurrence-options > p { margin: 0; color: var(--vr-text-secondary); font-size: 10.5px; font-weight: 800; }
.weekday-picker { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7,minmax(44px,1fr)); gap: 6px; border: 0; }
.weekday-picker[hidden], #booking-series-end-label[hidden] { display: none; }
.weekday-picker legend { margin-bottom: 6px; color: var(--vr-text-secondary); font-size: 10.5px; font-weight: 760; }
.weekday-picker label { min-height: 44px; display: grid; place-items: center; position: relative; border: 1px solid var(--vr-border); border-radius: 9px; background: var(--vr-surface-subtle); cursor: pointer; }
.weekday-picker input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.weekday-picker label:has(input:checked) { color: #fff; border-color: var(--vr-primary-700); background: var(--vr-primary-700); box-shadow: var(--vr-shadow-xs); }
.weekday-picker span { font-size: 11px; font-weight: 820; }
.recurrence-summary { min-height: 54px; padding: 10px 11px; display: grid; align-content: center; gap: 3px; border: 1px solid #cbdcf3; border-radius: 10px; background: #f5f9ff; }
.recurrence-summary strong { color: var(--vr-primary-900); font-size: 11.5px; }
.recurrence-summary small { color: var(--vr-text-secondary); font-size: 10px; line-height: 1.4; }
.return-details { display: grid; gap: 9px; }
.return-details[hidden], #return-route-fields[hidden] { display: none; }
.return-route-default { padding: 9px 10px; display: grid; gap: 2px; border: 1px solid #cbdcf3; border-radius: 10px; background: #f7faff; }
.return-route-default span { color: var(--vr-text-muted); font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.return-route-default strong { color: var(--vr-text-secondary); font-size: 11px; line-height: 1.35; }
.return-route-default small { color: var(--vr-text-muted); font-size: 9.5px; }
.route-time-estimate { min-height: 70px; padding: 9px 10px; display: grid; align-content: center; gap: 2px; border: 1px solid #cbdcf3; border-radius: 10px; background: #f7faff; }
.route-time-estimate span { color: var(--vr-primary-700); font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.route-time-estimate strong { color: var(--vr-text-secondary); font-size: 11px; line-height: 1.35; }
.route-time-estimate small { color: var(--vr-text-muted); font-size: 9.5px; line-height: 1.4; }
.check-row { min-height: 48px; padding: 8px 10px; display: flex !important; align-items: center; gap: 9px !important; border: 1px solid var(--vr-border); border-radius: 10px; background: var(--vr-surface-subtle); cursor: pointer; }
.check-row input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--vr-primary-700); }
.check-row span { display: grid; gap: 2px; }
.check-row strong { color: var(--vr-text-secondary); font-size: 11px; }
.check-row small { color: var(--vr-text-muted); font-size: 9.5px; font-weight: 500; }
.booking-summary { padding: 18px 16px; position: sticky; top: 0; align-self: start; display: grid; gap: 10px; border-left: 1px solid var(--vr-border); background: #f7f9fc; }
.booking-summary .eyebrow { color: var(--vr-primary-700); }
#booking-live-summary { display: grid; gap: 7px; }
.summary-block { padding: 9px 10px; display: grid; gap: 3px; border: 1px solid var(--vr-border); border-radius: 10px; background: #fff; }
.summary-block > span { color: var(--vr-text-muted); font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.summary-block strong { color: var(--vr-text); font-size: 11.5px; line-height: 1.35; }
.summary-block small { color: var(--vr-text-secondary); font-size: 10px; line-height: 1.4; }
.summary-safety { padding: 9px 10px; display: flex; align-items: center; gap: 8px; border: 1px solid #d6d0f5; border-radius: 10px; color: #4e4697; background: var(--vr-mira-bg); }
.summary-safety svg { width: 16px; height: 16px; }
.summary-safety span { display: grid; }
.summary-safety strong { font-size: 10.5px; }
.summary-safety small { font-size: 9px; }
.form-status { grid-column: 1 / -1; padding: 9px 10px; border-radius: 9px; color: var(--vr-text-secondary); background: var(--vr-surface-soft); font-size: 11px; }
.form-status.is-draft { color: #745013; background: var(--vr-warning-bg); }
.form-status.is-ready { color: #0d6b42; background: var(--vr-success-bg); }
.booking-api-review { grid-column: 1 / -1; border-color: #a9c8fa; background: #f3f7ff; }
.booking-api-review > p { color: var(--vr-text-secondary); font-size: 11.5px; }
.booking-api-review ul { display: grid; max-height: 250px; margin: 10px 0 0; padding: 0; overflow: auto; gap: 6px; list-style: none; }
.booking-api-review li { display: grid; grid-template-columns: 100px 150px minmax(0,1fr); align-items: center; gap: 8px; padding: 8px 9px; border: 1px solid var(--vr-border); border-radius: 8px; background: #fff; }
.booking-api-review li.is-feasible_with_warnings { border-color: #e7c985; background: var(--vr-warning-bg); }
.booking-api-review li.is-blocked { border-color: #efb6b6; background: var(--vr-danger-bg); }
.booking-api-review li.is-insufficient_data { border-color: #c8ced8; background: var(--vr-surface-soft); }
.booking-api-review li strong, .booking-api-review li span { font-size: 10.5px; }
.booking-api-review li small { color: var(--vr-text-muted); font-size: 9.5px; }
.assignment-error { margin-top: 8px; color: var(--vr-danger-700); font-size: 11px; }
.notice.is-success { color: #0d6b42; border-color: #a9ddc4; background: var(--vr-success-bg); }

.open-return-folder { margin: 0 10px 10px; padding: 10px; border: 1px solid #c9daf7; border-radius: 12px; background: linear-gradient(135deg,#f4f8ff,#fff); }
.open-return-folder > header { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 9px; margin-bottom: 8px; }
.open-return-folder > header > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: var(--vr-primary-700); background: var(--vr-primary-50); }
.open-return-folder > header svg { width: 17px; height: 17px; }
.open-return-folder > header div { display: grid; gap: 2px; }
.open-return-folder > header strong { font-size: 12px; }
.open-return-folder > header small { color: var(--vr-text-muted); font-size: 9.5px; }
.open-return-folder > header b { min-width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: var(--vr-primary-700); font-size: 11px; }
.open-return-folder > div { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 8px; }
.open-return-folder .ride-card { position: relative; inset: auto; width: 100%; height: auto; min-height: 88px; }
.resource-switch-folder { margin: 0 10px 10px; padding: 10px; border: 1px solid #bfd2ee; border-radius: 12px; background: #f7faff; }
.resource-switch-folder > header { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 9px; }
.resource-switch-folder > header > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: var(--vr-primary-700); background: #fff; }
.resource-switch-folder > header svg { width: 17px; height: 17px; }
.resource-switch-folder > header div { display: grid; gap: 2px; }
.resource-switch-folder > header strong { font-size: 12px; }
.resource-switch-folder > header small { color: var(--vr-text-muted); font-size: 10px; }
.resource-switch-folder > header b { min-width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: var(--vr-primary-700); font-size: 11px; }
.resource-switch-list { margin-top: 8px; display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap: 7px; }
.resource-switch-item { min-height: 68px; padding: 9px; display: flex; align-items: flex-start; gap: 9px; border: 1px solid var(--vr-border); border-radius: 10px; background: #fff; }
.resource-switch-item.is-local-preview { border-style: dashed; border-color: #d9b764; background: #fffaf0; }
.resource-switch-kind { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; color: var(--vr-primary-700); background: var(--vr-primary-50); }
.resource-switch-kind svg { width: 16px; height: 16px; }
.resource-switch-item > div { min-width: 0; display: grid; gap: 2px; }
.resource-switch-item strong { font-size: 11px; }
.resource-switch-item small, .resource-switch-item div > span { overflow: hidden; color: var(--vr-text-muted); font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.resource-switch-dialog { width: min(760px,calc(100vw - 28px)); padding: 0; overflow: hidden; }
.resource-switch-dialog > .modal-header { min-height: 76px; padding: 14px 16px; border-bottom: 1px solid var(--vr-border); }
#resource-switch-content { max-height: calc(100dvh - 110px); overflow: auto; }
.resource-switch-body { padding: 14px 16px; display: grid; gap: 12px; }
.resource-switch-chain { display: grid; grid-template-columns: minmax(0,1fr) 34px minmax(0,1fr); align-items: center; gap: 8px; }
.resource-switch-chain > article { min-width: 0; padding: 10px; display: grid; gap: 3px; border: 1px solid var(--vr-border); border-radius: 10px; background: var(--vr-surface-subtle); }
.resource-switch-chain > article span { color: var(--vr-text-muted); font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.resource-switch-chain > article strong, .resource-switch-chain > article small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resource-switch-chain > article strong { font-size: 12px; }
.resource-switch-chain > article small { color: var(--vr-text-secondary); font-size: 10px; }
.resource-switch-chain > span { display: grid; place-items: center; color: var(--vr-primary-700); }
.resource-switch-chain > span svg { width: 18px; height: 18px; }
.resource-switch-kind-summary { padding: 10px; display: flex; align-items: center; gap: 9px; border: 1px solid #bcd0ee; border-radius: 10px; background: #f3f7ff; }
.resource-switch-kind-summary > span { width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; color: #fff; background: var(--vr-primary-700); }
.resource-switch-kind-summary svg { width: 17px; height: 17px; }
.resource-switch-kind-summary strong, .resource-switch-kind-summary small { display: block; }
.resource-switch-kind-summary strong { font-size: 12px; }
.resource-switch-kind-summary small { margin-top: 2px; color: var(--vr-text-secondary); font-size: 10px; }
.resource-switch-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.resource-switch-fields label { display: grid; gap: 5px; color: var(--vr-text-secondary); font-size: 12px; font-weight: 650; }
.resource-switch-fields input, .resource-switch-fields select { width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--vr-border-strong); border-radius: 9px; color: var(--vr-text); background: #fff; font-size: 13px; }
.resource-switch-fields small { color: var(--vr-text-muted); font-size: 10px; font-weight: 500; line-height: 1.4; }
.resource-switch-address-field { grid-column: 1 / -1; }
.resource-switch-impact { padding: 12px; display: grid; grid-template-columns: 36px minmax(0,1fr); gap: 10px; border: 1px solid #a9ddc4; border-radius: 11px; background: var(--vr-success-bg); }
.resource-switch-impact-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: var(--vr-success); }
.resource-switch-impact-icon svg { width: 19px; height: 19px; }
.resource-switch-impact h3 { margin: 2px 0 3px; font-size: 15px; }
.resource-switch-impact p:not(.eyebrow) { margin: 0; color: var(--vr-text-secondary); font-size: 11px; line-height: 1.45; }
.resource-switch-impact dl { margin: 10px 0 0; display: grid; gap: 5px; }
.resource-switch-impact dl > div { display: grid; grid-template-columns: 140px minmax(0,1fr); gap: 8px; }
.resource-switch-actions { padding: 10px 16px; border-top: 1px solid var(--vr-border); background: #fff; }
.booking-footer { min-height: 64px; padding: 10px 18px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--vr-border); background: #fff; }
.booking-footer[hidden] { display: none; }
.booking-review { min-height: 0; flex: 1 1 auto; padding: 18px; overflow: auto; display: grid; gap: 14px; }
.booking-review[hidden] { display: none; }
.review-heading { display: flex; align-items: center; gap: 10px; }
.review-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: var(--vr-success); background: var(--vr-success-bg); }
.review-icon svg { width: 20px; height: 20px; }
.booking-review-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.review-card { padding: 12px; display: grid; gap: 7px; border: 1px solid var(--vr-border); border-radius: 12px; background: var(--vr-surface-subtle); }
.review-card h4 { margin: 0; font-size: 12px; }
.review-card dl { margin: 0; display: grid; gap: 5px; }
.review-card dl > div { display: grid; grid-template-columns: 98px minmax(0,1fr); gap: 8px; }
.review-card dt { color: var(--vr-text-muted); font-size: 9.5px; }
.review-card dd { margin: 0; color: var(--vr-text-secondary); font-size: 10.5px; font-weight: 650; overflow-wrap: anywhere; }
.review-scope-note { margin: 2px 0 0; padding-top: 7px; border-top: 1px solid var(--vr-border); color: var(--vr-text-muted); font-size: 9.5px; line-height: 1.45; }
.move-selection-summary { padding: 11px 12px; display: grid; gap: 3px; border: 1px solid var(--vr-border); border-radius: 11px; background: var(--vr-surface-subtle); }
.move-selection-summary span { color: var(--vr-text-muted); font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.move-selection-summary strong { font-size: 13px; }
.move-selection-summary small { color: var(--vr-text-secondary); font-size: 11px; }
.notice { min-height: 42px; padding: 9px 10px; display: flex; align-items: flex-start; gap: 8px; border: 1px solid var(--vr-border); border-radius: 10px; color: var(--vr-text-secondary); background: var(--vr-surface-subtle); font-size: 10px; }
.notice svg { width: 17px; height: 17px; flex: 0 0 auto; }
.notice.is-warning { color: #765111; border-color: #ead49a; background: var(--vr-warning-bg); }
.notice.is-danger { color: #923038; border-color: #efbec2; background: var(--vr-danger-bg); }
.notice.is-privacy { color: #4d419a; border-color: #d5cff4; background: var(--vr-mira-bg); }
.move-summary { margin: 13px 0; display: grid; grid-template-columns: 1fr 36px 1fr; align-items: center; gap: 8px; }
.move-summary > div { padding: 10px; border: 1px solid var(--vr-border); border-radius: 10px; background: var(--vr-surface-subtle); }
.move-summary span, .move-summary strong { display: block; }
.move-summary span { color: var(--vr-text-muted); font-size: 8px; text-transform: uppercase; }
.move-summary strong { margin-top: 3px; font-size: 10px; }
.move-arrow { display: grid !important; place-items: center; }
.guard-outcome { margin: 11px 0; padding: 10px; display: flex; align-items: center; gap: 9px; border: 1px solid #afd9c4; border-radius: 11px; color: var(--vr-success); background: var(--vr-success-bg); }
.guard-outcome > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: rgba(255,255,255,.72); }
.guard-outcome strong, .guard-outcome small { display: block; }
.guard-outcome.is-feasible_with_warnings, .guard-outcome.is-insufficient_data { color: var(--vr-warning); border-color: #ead194; background: var(--vr-warning-bg); }
.guard-outcome.is-blocked { color: var(--vr-danger); border-color: #efb8bd; background: var(--vr-danger-bg); }
.bottom-sheet { top: auto; bottom: 0; width: min(480px,100%); border-radius: 18px 18px 0 0; transform: translateX(-50%); }
.more-list { margin-top: 10px; display: grid; gap: 7px; }
.more-list button, .more-list a { min-height: 50px; padding: 8px 10px; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--vr-border); border-radius: 10px; color: var(--vr-text); background: var(--vr-surface-subtle); text-align: left; text-decoration: none; }
.more-list a { color: var(--vr-primary-700); background: var(--vr-primary-50); }
.toast-region { position: fixed; z-index: 120; right: 16px; bottom: 16px; display: grid; gap: 7px; pointer-events: none; }
.toast { max-width: 360px; padding: 10px 12px; border: 1px solid #b9cce8; border-radius: 11px; color: var(--vr-primary-900); background: #fff; box-shadow: var(--vr-shadow-sm); font-size: 10.5px; font-weight: 700; }
.toast.is-warning { color: #765111; border-color: #e4cb8a; background: #fff9e8; }
.toast.is-success { color: #1b6649; border-color: #aad8c1; background: #effaf4; }
.mobile-bottom-nav { display: none; }

@media (max-width: 1180px) {
  :root { --cal-sidebar: 76px; --cal-rail: 360px; }
  .sidebar { padding-inline: 8px; }
  .brand { justify-content: center; padding: 0; }
  .brand > span:last-child, .tenant-card > span:last-child, .user-card > span:last-child, .preview-connection > span:last-child, .nav-item > span { display: none; }
  .tenant-card, .user-card, .preview-connection { justify-content: center; padding: 7px; }
  .nav-item { justify-content: center; padding: 0; }
  .topbar { gap: 10px; }
  .page-heading { min-width: 110px; }
  .top-actions .button span:not(.count-badge) { display: none; }
  .top-actions .button { width: 40px; padding: 0; }
  .resource-select > span { display: none; }
  .resource-select { min-width: 150px; display: block; }
  .week-grid { grid-template-columns: repeat(7,minmax(155px,1fr)); }
}

@media (max-width: 900px) {
  .calendar-app.has-context-rail .workspace { margin-right: 0; }
  .context-rail { top: auto; width: min(430px, calc(100vw - var(--cal-sidebar))); height: calc(100dvh - var(--cal-topbar)); }
  .topbar { padding-inline: 12px; }
  .calendar-toolbar { flex-wrap: wrap; }
  .search-field { order: 3; max-width: none; flex-basis: 100%; }
  .metric-strip { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .day-grid-scroll { height: calc(100dvh - 380px); }
  .booking-edit-body { grid-template-columns: minmax(0,1fr) 250px; }
}

@media (max-width: 760px) {
  :root { --cal-topbar: 64px; }
  body { overflow: auto; padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  body.has-mobile-layer { overflow: hidden; }
  .calendar-app { display: block; min-height: 100dvh; }
  .sidebar { display: none; }
  .workspace { height: auto; min-height: calc(100dvh - 64px); }
  .topbar { height: auto; min-height: 112px; flex: 0 0 auto; padding: 8px 10px; flex-wrap: wrap; align-content: center; gap: 6px; }
  .page-heading { min-width: 0; }
  .page-heading .eyebrow { display: none; }
  .page-heading h1 { font-size: 20px; }
  .period-control { order: 3; width: 100%; display: grid; grid-template-columns: 44px 1fr 44px; }
  .period-control .icon-button { width: 44px; height: 40px; }
  .date-button { min-height: 40px; justify-content: center; }
  .top-actions { margin-left: auto; }
  .top-actions .button { width: 44px; height: 44px; }
  .top-actions .button-secondary { display: none; }
  .calendar-main { padding: 8px 8px 14px; overflow: visible; }
  .preview-banner { align-items: flex-start; font-size: 9.5px; }
  .calendar-toolbar { min-height: 0; padding: 6px; gap: 6px; }
  .view-tabs { width: 100%; }
  .view-tabs button { min-height: 40px; flex: 1; }
  .search-field { flex-basis: 100%; order: 2; }
  .search-field input { min-height: 44px; }
  .resource-select { display: none; }
  .density-control { display: none !important; }
  .metric-strip { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; overflow: visible; }
  .metric-card { min-width: 0; min-height: 70px; padding: 8px; grid-template-columns: 28px minmax(0,1fr) auto; gap: 7px; }
  .metric-card .metric-icon { width: 28px; height: 28px; }
  .metric-card strong { font-size: 10.5px; }
  .metric-card small { margin-top: 2px; font-size: 9px; line-height: 1.2; }
  .metric-card b { font-size: 18px; }
  .view-panel-header { padding: 9px 10px; }
  .view-panel-header h2 { font-size: 14px; }
  .header-actions .button:first-child { display: none; }
  .header-actions .button { min-height: 44px; padding-inline: 10px; }
  .day-grid-scroll { display: none; }
  .open-return-folder { display: none; }
  .resource-switch-folder { margin: 0 8px 8px; }
  .resource-switch-folder > header small { white-space: normal; line-height: 1.35; }
  .mobile-agenda { display: block; }
  .agenda-resource-strip { padding: 8px; display: flex; gap: 6px; overflow-x: auto; border-bottom: 1px solid var(--vr-border); }
  .agenda-resource { min-height: 44px; padding: 5px 9px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--vr-border); border-radius: 999px; background: #fff; font-size: 9px; font-weight: 720; white-space: nowrap; }
  .agenda-resource.is-active { color: var(--vr-primary-800); border-color: var(--vr-primary-500); background: var(--vr-primary-50); }
  .agenda-resource .resource-avatar { width: 28px; height: 28px; border-radius: 50%; }
  .agenda-heading { padding: 10px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--vr-border); }
  .agenda-heading > span { color: var(--vr-text-muted); font-size: 9px; }
  .agenda-list { padding: 8px; display: grid; gap: 7px; }
  .agenda-row { display: grid; grid-template-columns: 44px minmax(0,1fr); align-items: start; gap: 7px; }
  .agenda-row > time { padding-top: 12px; color: var(--vr-text-secondary); font-size: 10px; font-weight: 800; }
  .agenda-row .ride-card { position: relative; inset: auto; width: 100%; height: auto; min-height: 92px; padding: 9px 10px 9px 12px; }
  .agenda-row .ride-patient-row > b { font-size: 13px; }
  .agenda-row .ride-transport { font-size: 10px; }
  .agenda-row .ride-route { margin-top: 5px; font-size: 11.5px; }
  .agenda-empty { padding: 12px 14px 76px; display: grid; justify-items: center; gap: 4px; text-align: center; }
  .agenda-empty > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: var(--vr-primary-700); background: var(--vr-primary-50); }
  .agenda-empty small { max-width: 300px; color: var(--vr-text-muted); font-size: 10px; line-height: 1.3; }
  .legend { display: none; }
  .week-grid { padding: 7px; grid-template-columns: 1fr; overflow: visible; }
  .week-day { min-height: 0; }
  .week-rides { min-height: 0; }
  .month-weekdays, .month-grid { min-width: 0; grid-template-columns: repeat(7,minmax(0,1fr)); }
  .month-day { min-height: 68px; padding: 5px; }
  .month-day > strong { margin-top: 6px; font-size: 14px; }
  .month-day > small { display: none; }
  .month-signals i { font-size: 8px; }
  .month-signals { margin-top: 2px; }
  .signal-return, .signal-unassigned { display: none; }
  .readmodel-note { max-width: 120px; text-align: right; }
  .context-rail, .mira-panel { z-index: 100; inset: 0; width: 100%; height: 100dvh; max-width: none; border: 0; border-radius: 0; padding-bottom: env(safe-area-inset-bottom); }
  .rail-header { min-height: 66px; padding-top: max(10px, env(safe-area-inset-top)); }
  .detail-content, .mira-content { padding-bottom: 28px; }
  .filter-popover { top: auto; right: 8px; bottom: calc(66px + env(safe-area-inset-bottom)); left: 8px; width: auto; }
  .modal-card, .bottom-sheet { z-index: 105; inset: 0; width: 100%; max-height: 100dvh; border: 0; border-radius: 0; transform: none; padding: max(12px, env(safe-area-inset-top)) 12px max(20px, env(safe-area-inset-bottom)); }
  .resource-switch-dialog { padding: 0; }
  .resource-switch-dialog > .modal-header { padding-top: max(12px,env(safe-area-inset-top)); }
  #resource-switch-content { max-height: calc(100dvh - 76px); }
  .resource-switch-chain { grid-template-columns: 1fr; }
  .resource-switch-chain > span { transform: rotate(90deg); }
  .resource-switch-fields { grid-template-columns: 1fr; }
  .resource-switch-address-field { grid-column: auto; }
  .resource-switch-actions { position: sticky; bottom: 0; display: grid; grid-template-columns: 1fr; padding-bottom: max(10px,env(safe-area-inset-bottom)); }
  .booking-dialog { padding: 0; overflow: hidden; }
  .booking-header { min-height: 76px; padding: max(12px, env(safe-area-inset-top)) 14px 10px; }
  .booking-header h2 { font-size: 19px; }
  .booking-header p:not(.eyebrow) { display: none; }
  .booking-form { height: calc(100dvh - 76px); max-height: calc(100dvh - 76px); }
  .booking-edit-body { display: block; overflow: auto; }
  .booking-main { padding: 10px 10px 18px; }
  .booking-section { padding: 11px; }
  .booking-summary { display: none; }
  .choice-segment, .return-choice { grid-template-columns: 1fr; }
  .choice-segment label, .return-choice label { min-height: 44px; }
  .recurrence-default-row { grid-template-columns: 1fr; }
  .recurrence-toggle { width: 100%; justify-content: center; }
  .weekday-picker { grid-template-columns: repeat(4,minmax(44px,1fr)); }
  .form-with-action { grid-template-columns: 1fr; }
  .form-with-action .button { min-height: 44px; }
  .patient-autofill:not(:empty) { grid-template-columns: 1fr; }
  .inline-create-head { align-items: flex-start; flex-direction: column; }
  .booking-footer { flex: 0 0 auto; padding: 9px 10px max(10px,env(safe-area-inset-bottom)); position: relative; bottom: auto; display: grid; }
  #booking-edit-actions { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); }
  #booking-review-actions { grid-template-columns: 1fr 1fr; }
  #booking-review-actions .button:last-child { grid-column: 1 / -1; }
  .booking-footer .button { min-height: 46px; }
  .booking-review { padding: 14px 10px 18px; }
  .booking-review-grid { grid-template-columns: 1fr; }
  .booking-api-review li { grid-template-columns: 1fr; gap: 3px; }
  .modal-backdrop { z-index: 104; }
  .form-row { grid-template-columns: 1fr; }
  .modal-actions, .mira-actions { display: grid; grid-template-columns: 1fr; }
  .modal-actions .button, .mira-actions .button { min-height: 46px; }
  .mira-thread { max-height: 30dvh; }
  .mira-quick-prompts button { min-height: 44px; }
  .mobile-bottom-nav { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; height: calc(62px + env(safe-area-inset-bottom)); padding: 4px 5px env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; border-top: 1px solid var(--vr-border); background: rgba(255,255,255,.98); box-shadow: 0 -10px 26px rgba(20,37,64,.09); }
  .mobile-bottom-nav a, .mobile-bottom-nav button { min-width: 0; min-height: 52px; padding: 4px 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; border-radius: 9px; color: var(--vr-text-muted); background: transparent; text-decoration: none; font-size: 9px; font-weight: 700; }
  .mobile-bottom-nav svg { width: 18px; height: 18px; }
  .mobile-bottom-nav .is-active { color: var(--vr-primary-700); background: var(--vr-primary-50); }
  .mobile-bottom-nav small { font-size: 6.5px; }
  .toast-region { right: 8px; bottom: calc(70px + env(safe-area-inset-bottom)); left: 8px; }
  .toast { max-width: none; }
}

@media (max-width: 420px) {
  .preview-badge { flex: 0 0 auto; }
  .month-day { min-height: 62px; }
  .month-day > small { display: none; }
  .detail-facts > div, .guard-facts > div, .mira-state dl > div { grid-template-columns: 82px minmax(0,1fr); }
}

@media (min-width: 761px) {
  .calendar-main { display: flex; height: calc(100dvh - var(--cal-topbar)); flex-direction: column; overflow: hidden; }
  .view-panel:not([hidden]) { display: flex; min-height: 0; flex: 1; flex-direction: column; }
  #day-view .day-grid-scroll { height: auto; min-height: 0; flex: 1; }
  #week-view > div, #month-view > div { min-height: 100%; }
  .week-grid, .month-grid { min-height: calc(100% - 1px); align-content: start; }
}

@media (prefers-reduced-motion: reduce) {
  .workspace, .ride-card, .metric-card { transition: none; }
}

/* VR-UI-PHASE-B-2026-08-26-01: production calendar typography and control density. */
.date-button,.button{font-size:14px;font-weight:600}
.preview-banner{font-size:12px;font-weight:500;line-height:1.45}
.preview-badge{font-size:11px;font-weight:700}
.view-tabs button{min-height:38px;font-size:14px;font-weight:600}
.resource-select{font-size:13px;font-weight:600}
.resource-select select{min-height:40px;font-size:14px;font-weight:500}
.metric-card strong{font-size:14px;font-weight:600}
.metric-card small{font-size:12px;line-height:1.35}
.metric-card b{font-size:24px;font-weight:700}
.grid-corner{font-size:12px;font-weight:500}
.grid-corner small{font-size:11px}
.resource-header strong{font-size:14px;font-weight:600}
.resource-header small,.resource-state{font-size:12px}
.resource-avatar{font-size:11px}
.time-label{font-size:12px;font-weight:600}
.ride-top{font-size:11.5px;font-weight:500}
.ride-top>span{font-size:11px;font-weight:600}
.ride-patient-row>b{font-size:14px;font-weight:650}
.ride-transport{font-size:11px;font-weight:600}
.ride-route{font-size:12px;font-weight:450}
.legend span{font-size:12px;font-weight:500}
.week-day-header span{font-size:12px;font-weight:600}
.week-day-header strong{font-size:15px;font-weight:700}
.week-day-header small,.week-kpis span,.week-load small,.week-plan-row time,.week-plan-row span,.week-placeholder,.open-day-button{font-size:11px}
.week-plan-row strong{font-size:13px;font-weight:600}
.month-weekdays span{font-size:12px;font-weight:600}
.month-date{font-size:12px;font-weight:600}
.month-day>small,.month-signals i{font-size:11px}
.booking-section label,.booking-summary label,.slot-form label{font-size:13px;font-weight:600}
.booking-section label>small{font-size:12px}
.booking-section input:not([type="radio"]):not([type="checkbox"]),.booking-section select,.booking-section textarea{min-height:44px;font-size:14px;font-weight:500}
.choice-segment span,.inline-create-head strong,.recurrence-default-choice strong,.return-route-default strong,.route-time-estimate strong,.check-row strong{font-size:14px}
.choice-segment small,.inline-create-head small,.recurrence-default-choice small,.return-route-default small,.route-time-estimate small,.check-row small{font-size:12px}
.mira-chat-message>strong{font-size:14px;font-weight:600}
.mira-chat-message p{font-size:14px}
.mira-chat-message li,.mira-quick-prompts button{font-size:12px}

@media(max-width:760px){
  .topbar h1{font-size:28px;line-height:1.2;font-weight:700}
  .agenda-resource{font-size:12px;font-weight:600}
  .agenda-heading>span{font-size:12px}
  .agenda-row>time{font-size:12px;font-weight:700}
  .agenda-row .ride-patient-row>b{font-size:14px}
  .agenda-row .ride-transport{font-size:11px}
  .agenda-row .ride-route{font-size:12px}
  .mobile-bottom-nav a,.mobile-bottom-nav button{font-size:11px;font-weight:600}
  .mobile-bottom-nav small{font-size:9px}
}