@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');

:root {
  font-family: "DM Sans", Inter, sans-serif;
  color: #18263c;
  background: #f4f7fb;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --navy: #12233f;
  --blue: #2463eb;
  --blue-light: #edf3ff;
  --ink: #18263c;
  --muted: #71809a;
  --line: #e3e9f2;
  --panel: #fff;
  --green: #16a47c;
  --green-light: #e8f8f2;
  --amber: #c98517;
  --amber-light: #fff6e3;
  --purple: #765add;
  --purple-light: #f2efff;
  --shadow: 0 12px 34px rgba(32, 54, 88, 0.06);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #f4f7fb; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; display: flex; }
.sidebar { background: var(--navy); color: #d7e1f0; width: 250px; min-height: 100vh; padding: 23px 15px 16px; display: flex; flex-direction: column; position: fixed; z-index: 20; transition: width .2s ease, transform .2s ease; }
.sidebar.collapsed { width: 80px; }
.sidebar-top { display: flex; align-items: center; justify-content: space-between; min-height: 34px; margin: 0 7px 57px; }
.app-logo, .auth-brand { display: flex; align-items: center; gap: 11px; color: #fff; font-family: Manrope, sans-serif; font-weight: 700; white-space: nowrap; }
.admin-badge { display: inline-flex; align-items: center; padding: 4px 6px; border-radius: 4px; background: #f4c96d; color: #493617; font: 700 8px Manrope, sans-serif; letter-spacing: .04em; white-space: nowrap; }
.header-admin { background: #fff4d8; color: #8d6723; }
.brand-mark { width: 32px; height: 32px; display: inline-grid; place-items: center; flex: 0 0 32px; border-radius: 10px; color: #fff; background: var(--blue); font: 800 11px Manrope, sans-serif; letter-spacing: -.4px; }
.brand-mark.large { width: 46px; height: 46px; font-size: 15px; border-radius: 14px; }
.sidebar.collapsed .app-name, .sidebar.collapsed .nav-label, .sidebar.collapsed .nav-item span, .sidebar.collapsed .sidebar-tip, .sidebar.collapsed .user-copy { display: none; }
.sidebar-collapse { color: #aabbd4 !important; }
.nav-label, .eyebrow { letter-spacing: .13em; color: #8997ac; font: 700 10px Manrope, sans-serif; }
.nav-label { padding: 0 11px; margin-bottom: 11px; color: #7f92af; }
.nav-item { width: 100%; height: 44px; border: 0; background: transparent; color: #aebdd2; display: flex; align-items: center; gap: 13px; padding: 0 11px; border-radius: 8px; margin-bottom: 3px; text-align: left; transition: background .16s ease, color .16s ease; }
.nav-item:hover { background: #1b3154; color: #fff; }
.nav-item.active { background: #244772; color: #fff; box-shadow: inset 3px 0 #5b9bff; }
.nav-item.active svg { color: #83b7ff; }
.nav-warning { width: 6px; height: 6px; background: #f4b64f; border-radius: 50%; margin-left: auto; }
.sidebar-bottom { margin-top: auto; }
.sidebar-tip { padding: 15px 12px; margin: 0 4px 19px; display: flex; gap: 10px; background: #172d4f; border: 1px solid #29446b; border-radius: 10px; }
.sidebar-tip svg { color: #79b2ff; flex: 0 0 auto; }
.sidebar-tip div { display: flex; flex-direction: column; gap: 5px; font-size: 11px; line-height: 1.35; }
.sidebar-tip strong { color: #fff; font-size: 12px; }
.sidebar-tip span { color: #95a9c6; }
.user-menu { border-top: 1px solid #2b405e; padding: 17px 7px 0; display: flex; align-items: center; gap: 9px; }
.avatar, .provider-avatar, .profile-avatar { background: #d8e7ff; color: #255cc4; width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; font: 800 11px Manrope, sans-serif; border: 0; flex: 0 0 auto; }
.avatar.small { width: 30px; height: 30px; color: #2658b9; }
.user-copy { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 3px; }
.user-copy strong { color: #f2f6fd; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-copy span { color: #8ba0bf; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-button { border: 0; background: transparent; color: inherit; display: inline-grid; place-items: center; padding: 6px; border-radius: 7px; }
.icon-button:hover { background: rgba(74, 112, 161, .16); }
.main-content { width: calc(100% - 250px); margin-left: 250px; min-height: 100vh; transition: width .2s ease, margin .2s ease; }
.main-content.sidebar-collapsed { width: calc(100% - 80px); margin-left: 80px; }
.topbar { height: 72px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.88); padding: 0 39px; display: flex; justify-content: space-between; align-items: center; }
.topbar-left, .topbar-actions, .breadcrumb, .date-navigation, .calendar-toolbar, .list-toolbar, .history-filters { display: flex; align-items: center; }
.breadcrumb { color: #97a3b4; gap: 6px; font-size: 12px; }
.breadcrumb strong { color: #4b5c74; font-weight: 600; }
.topbar-actions { gap: 15px; color: #65758d; }
.sync-status { font-size: 11px; display: flex; align-items: center; gap: 7px; color: #658077; }
.status-dot, .pulse-dot { width: 7px; height: 7px; display: inline-block; background: #29bd8c; border-radius: 50%; }
.page-content { padding: 42px 39px 56px; max-width: 1560px; margin: 0 auto; }
.view { animation: fade-up .25s ease both; }
@keyframes fade-up { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 32px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: Manrope, sans-serif; color: var(--ink); }
h1 { font-size: 29px; line-height: 1.15; margin-top: 10px; letter-spacing: -.05em; }
h2 { font-size: 17px; letter-spacing: -.03em; }
h3 { font-size: 15px; }
.page-heading p { margin-top: 8px; font-size: 13px; }
.muted { color: var(--muted); }
.button { border: 1px solid transparent; border-radius: 7px; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; font-weight: 700; font-size: 12px; transition: all .16s ease; }
.button:disabled { opacity: .55; cursor: not-allowed; }
.button.primary { background: var(--blue); color: #fff; box-shadow: 0 5px 12px rgba(36,99,235,.18); }
.button.primary:hover { background: #1e54cb; transform: translateY(-1px); }
.button.secondary { border-color: #d5dfec; color: #345274; background: #fff; }
.button.secondary:hover, .button.ghost:hover { border-color: #b6c8e0; background: #f8fbff; }
.button.ghost { background: transparent; border-color: transparent; color: #53667f; }
.button.wide { width: 100%; min-height: 46px; margin-top: 6px; }
.text-button { border: 0; background: none; color: var(--blue); font-weight: 700; font-size: 11px; display: inline-flex; align-items: center; gap: 5px; }
.metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.metric-card, .panel, .plan-summary { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.metric-card { min-height: 157px; padding: 20px 20px 16px; position: relative; }
.metric-icon { width: 35px; height: 35px; border-radius: 9px; display: grid; place-items: center; margin-bottom: 19px; }
.metric-icon.blue { color: var(--blue); background: var(--blue-light); }
.metric-icon.green { color: var(--green); background: var(--green-light); }
.metric-icon.amber { color: var(--amber); background: var(--amber-light); }
.metric-icon.purple { color: var(--purple); background: var(--purple-light); }
.metric-label, .metric-detail { font-size: 11px; color: var(--muted); }
.metric-value { font: 800 25px Manrope, sans-serif; color: var(--ink); letter-spacing: -.05em; margin-top: 4px; display: flex; align-items: center; gap: 9px; }
.metric-trend { font: 700 10px "DM Sans"; letter-spacing: 0; color: var(--green); display: inline-flex; align-items: center; gap: 2px; }
.metric-detail { margin-top: 4px; }
.dashboard-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 20px; margin-bottom: 20px; }
.panel { padding: 22px; }
.panel-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 23px; }
.panel-heading .eyebrow { margin-bottom: 7px; }
.route-panel, .optimize-panel { min-height: 332px; }
.coming-badge, .type-badge { color: #64748a; background: #f1f4f8; font: 700 9px Manrope, sans-serif; letter-spacing: .08em; padding: 6px 8px; border-radius: 5px; white-space: nowrap; }
.visit-list { border-top: 1px solid #edf0f5; }
.visit-row { min-height: 59px; border-bottom: 1px solid #edf0f5; display: flex; align-items: center; gap: 12px; }
.timeline-dot { width: 8px; height: 8px; border: 2px solid #4d8cf0; border-radius: 50%; margin-left: 3px; position: relative; }
.timeline-dot::after { content: ""; height: 20px; width: 1px; background: #d9e4f4; position: absolute; top: 7px; left: 1px; }
.visit-row:last-child .timeline-dot::after { display: none; }
.visit-content { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.visit-content strong, .schedule-row strong, .history-main strong { font-size: 12px; color: #2c3d56; }
.visit-content span, .schedule-row span, .history-main span { font-size: 11px; color: #8996a9; }
.visit-row time { color: #61728b; font-size: 11px; }
.route-placeholder { height: 224px; border: 1px dashed #cad8eb; background: #f8fbff; border-radius: 7px; display: flex; align-items: center; flex-direction: column; text-align: center; justify-content: center; }
.route-placeholder h3 { margin: 14px 0 7px; }
.route-placeholder p { color: #7b8da7; font-size: 11px; max-width: 260px; line-height: 1.55; margin-bottom: 17px; }
.route-orbit { width: 54px; height: 54px; border: 1px solid #bcd3f6; border-radius: 50%; color: #4386ee; display: grid; place-items: center; position: relative; background: #edf4ff; }
.orbit-dot { position: absolute; width: 6px; height: 6px; background: #4e90f5; border-radius: 50%; }
.orbit-dot.one { top: 1px; left: 23px; }.orbit-dot.two { bottom: 6px; left: 5px; background: #7fd1b1; }.orbit-dot.three { right: 2px; top: 27px; background: #ecb64d; }
.schedule-panel { padding-bottom: 10px; }
.schedule-list { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 28px; }
.schedule-row { display: flex; gap: 12px; align-items: center; min-height: 74px; border-top: 1px solid #edf0f5; }
.schedule-row > div:nth-child(2) { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.schedule-date { width: 38px; height: 44px; border-radius: 7px; background: var(--blue-light); color: var(--blue); display: flex; flex-direction: column; justify-content: center; align-items: center; }
.schedule-date.scheduled_visit { background: var(--green-light); color: var(--green); }
.schedule-date strong { font: 800 17px Manrope; line-height: 1; }.schedule-date span { font-size: 9px; text-transform: uppercase; font-weight: 700; }
.type-badge.small { font-size: 8px; padding: 5px 6px; }.type-badge.appointment { color: #315fc3; background: #edf3ff; }.type-badge.scheduled_visit { color: #168064; background: #e8f8f2; }.type-badge.provider { color: #775bd2; background: #f2efff; }
.empty-state { min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; }
.empty-state.compact { min-height: 100px; padding: 8px; align-items: flex-start; text-align: left; }.empty-state.compact .empty-icon { display: none; }
.empty-icon { width: 43px; height: 43px; display: grid; place-items: center; background: #f3f7fc; border-radius: 50%; color: #7892b6; margin-bottom: 12px; }
.empty-state h3 { font-size: 13px; }.empty-state p, .empty-table span { color: #8996a9; font-size: 11px; line-height: 1.5; max-width: 255px; margin: 6px 0 15px; }
.data-notice { display: flex; gap: 11px; padding: 12px 14px; border-radius: 8px; border: 1px solid #f3d49a; background: #fffaf0; color: #9b6b20; margin: -8px 0 22px; font-size: 11px; }
.data-notice svg { flex: 0 0 auto; }.data-notice div { display: flex; flex-direction: column; gap: 3px; }.data-notice span { color: #a5814e; line-height: 1.45; }
.refresh-banner { display: flex; align-items: center; gap: 7px; color: var(--blue); font-size: 11px; margin: -17px 0 18px; }
.spin { animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }
.calendar-toolbar { background: #fff; border: 1px solid var(--line); border-bottom: 0; padding: 14px 16px; justify-content: space-between; border-radius: 10px 10px 0 0; }
.calendar-toolbar h2 { font-size: 16px; margin-left: 8px; min-width: 210px; }.date-navigation { gap: 5px; }.icon-button.bordered { border: 1px solid var(--line); color: #637590; }.today-button { padding: 0 8px; min-height: 32px; margin-left: 5px; }
.view-toggle { display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 7px; gap: 2px; }.view-toggle button, .history-filters button { border: 0; background: transparent; color: #76859b; border-radius: 5px; font-weight: 700; font-size: 11px; padding: 7px 12px; }.view-toggle button.active, .history-filters button.active { color: var(--blue); background: var(--blue-light); }
.calendar-layout { display: grid; grid-template-columns: minmax(0, 1fr) 195px; gap: 16px; }.calendar-panel { border-radius: 0 0 10px 10px; padding: 0; min-height: 596px; overflow: hidden; }.calendar-side { display: flex; flex-direction: column; gap: 16px; }
.legend, .calendar-summary { padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 10px; display: flex; flex-direction: column; gap: 12px; }.legend .eyebrow, .calendar-summary .eyebrow { margin-bottom: 3px; }.legend span { display: flex; align-items: center; gap: 9px; color: #6b7c94; font-size: 11px; }.legend-dot { width: 8px; height: 8px; border-radius: 50%; }.legend-dot.fixed { background: #5790ec; }.legend-dot.flexible { background: #52bc97; }.legend-dot.complete { background: #a3afc0; }
.calendar-summary strong { font: 800 32px Manrope; letter-spacing: -.06em; }.calendar-summary > span, .calendar-summary small { color: #8996a9; font-size: 11px; }.mini-progress, .progress-bar { height: 5px; background: #edf0f5; border-radius: 5px; overflow: hidden; }.mini-progress i, .progress-bar i { height: 100%; display: block; background: var(--blue); border-radius: inherit; }
.weekday-row, .week-head { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--line); }.weekday-row span { height: 40px; display: grid; place-items: center; color: #8695aa; font: 700 10px Manrope; text-transform: uppercase; }
.month-cells { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }.month-cell { min-height: 91px; border-bottom: 1px solid #edf0f5; border-right: 1px solid #edf0f5; padding: 8px; }.month-cell:nth-child(7n) { border-right: 0; }.month-cell.outside .cell-day { color: #b8c2d0; }.cell-day { color: #60718b; font-size: 11px; display: block; width: 22px; height: 22px; text-align: center; padding-top: 4px; border-radius: 50%; }.month-cell.today .cell-day { background: var(--blue); color: #fff; }.cell-items { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; }.calendar-chip { border: 0; border-left: 2px solid #5790ec; background: #edf3ff; color: #376dc8; border-radius: 3px; padding: 4px 4px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 9px; }.calendar-chip span { font-weight: 800; margin-right: 4px; }.calendar-chip.scheduled_visit { background: #e9f8f2; color: #218569; border-color: #56bb96; }.calendar-chip.completed { background: #f0f2f5; color: #8896a9; border-color: #a2afbf; text-decoration: line-through; }.more-items { color: #8190a5; font-size: 9px; padding-left: 4px; }
.week-grid, .day-grid { min-height: 595px; }.week-head > div { height: 66px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border-right: 1px solid #edf0f5; color: #8a98ab; font-size: 10px; }.week-head > div:last-child { border: 0; }.week-head strong { font: 800 18px Manrope; color: #576b85; }.week-head .today strong { color: var(--blue); }.week-columns { display: grid; grid-template-columns: repeat(7, 1fr); min-height: 528px; }.week-column { border-right: 1px solid #edf0f5; padding: 12px 5px; }.week-column:last-child { border: 0; }.calendar-block { width: 100%; border: 0; border-left: 3px solid #5790ec; background: #edf3ff; color: #376dc8; text-align: left; border-radius: 4px; padding: 8px 6px; margin-bottom: 5px; display: flex; flex-direction: column; gap: 4px; }.calendar-block.scheduled_visit { background: #e9f8f2; color: #218569; border-color: #56bb96; }.calendar-block.completed { background: #f0f2f5; color: #8290a2; border-color: #a2afbf; }.calendar-block strong { font-size: 9px; }.calendar-block span { font-size: 10px; line-height: 1.25; }.day-header { padding: 22px 28px; border-bottom: 1px solid #edf0f5; display: flex; align-items: baseline; gap: 10px; }.day-header span { color: #8996a9; font-size: 12px; }.day-header strong { font: 700 18px Manrope; }.day-timeline { padding: 8px 20px; }.time-row { min-height: 52px; border-bottom: 1px solid #f0f2f5; display: grid; grid-template-columns: 78px 1fr; padding-top: 10px; }.time-row > span { color: #98a4b4; font-size: 10px; }.time-row > div { display: flex; gap: 7px; }.time-row .calendar-block { max-width: 220px; height: fit-content; flex-direction: row; align-items: center; padding: 7px 9px; margin-top: -5px; }.time-row .calendar-block span { font-size: 10px; }
.list-toolbar { gap: 10px; margin: -5px 0 16px; }.search-field { flex: 1; max-width: 390px; position: relative; }.search-field svg { position: absolute; left: 13px; top: 11px; color: #8b9bb0; }.search-field input, label input, label select { width: 100%; height: 38px; border: 1px solid #dce5ef; border-radius: 7px; background: #fff; padding: 0 12px; color: #354962; outline: none; font-size: 12px; }.search-field input { padding-left: 38px; }.search-field input:focus, label input:focus, label select:focus { border-color: #7da6ee; box-shadow: 0 0 0 3px rgba(36,99,235,.08); }.result-count { color: #8a98aa; font-size: 11px; margin-left: auto; }
.table-panel { padding: 0; overflow: hidden; }.table { width: 100%; }.table-row { display: grid; align-items: center; column-gap: 15px; padding: 0 21px; min-height: 64px; border-bottom: 1px solid #edf0f5; }.table-row:last-child { border-bottom: 0; }.table-head { min-height: 43px; background: #fafbfd; color: #8996a9; font: 700 10px Manrope; text-transform: uppercase; letter-spacing: .06em; }.provider-table .table-row { grid-template-columns: 1.4fr 1.15fr .9fr .85fr .9fr .7fr; }.provider-row { width: 100%; text-align: left; background: #fff; color: #677991; border-top: 0; border-left: 0; border-right: 0; border-bottom: 1px solid #edf0f5; font-size: 11px; }.provider-row:hover { background: #f9fbfe; }.provider-name { display: flex; align-items: center; gap: 10px; min-width: 0; color: #31435d; }.provider-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }.provider-avatar { width: 28px; height: 28px; font-size: 10px; background: #eaf1ff; }.tag { padding: 5px 7px; background: #f0f3f7; color: #67778d; border-radius: 4px; font-size: 10px; }.status-pill { width: fit-content; display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border-radius: 5px; font-size: 10px; font-weight: 700; white-space: nowrap; }.status-pill i { width: 5px; height: 5px; background: currentColor; border-radius: 50%; }.status-pill.success { color: #168466; background: #e8f8f2; }.status-pill.neutral { color: #78869a; background: #f0f2f5; }.status-pill.warning { color: #ae7620; background: #fff5e3; }.empty-table { height: 230px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #8a98aa; }.empty-table strong { color: #34475f; font: 700 13px Manrope; }.empty-table span { margin: 0; text-align: center; }
.plan-summary { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 20px; padding: 0; overflow: hidden; }.plan-summary div { padding: 19px 22px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }.plan-summary div:last-child { border: 0; }.plan-summary span { color: #8290a4; font-size: 11px; }.plan-summary strong { font: 800 24px Manrope; letter-spacing: -.05em; }.plan-table .table-row { grid-template-columns: 1.45fr .55fr .65fr .65fr .75fr .8fr 1.1fr; }.plan-row { min-height: 69px; color: #65768f; font-size: 11px; }.complete-number { color: var(--green); font-weight: 700; }.progress-cell { display: flex; align-items: center; gap: 8px; }.progress-bar { flex: 1; min-width: 45px; }.progress-cell small { font-size: 10px; color: #718198; width: 28px; }
.history-filters { gap: 4px; margin: -8px 0 17px; }.history-panel { padding: 0 22px; }.history-row { min-height: 80px; border-bottom: 1px solid #edf0f5; display: flex; align-items: center; gap: 13px; }.history-row:last-child { border: 0; }.history-icon { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; }.history-icon.success { color: var(--green); background: var(--green-light); }.history-icon.attempted { color: var(--amber); background: var(--amber-light); }.history-main { display: flex; flex-direction: column; gap: 5px; flex: 1; }.history-date { display: flex; flex-direction: column; text-align: right; gap: 4px; min-width: 76px; }.history-date strong { color: #596b84; font-size: 11px; }.history-date span { color: #98a3b2; font-size: 10px; }
.settings-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 20px; max-width: 950px; }.settings-card { min-height: 390px; }.settings-card .panel-heading { align-items: center; }.account-block { display: flex; align-items: center; gap: 14px; margin: 33px 0; }.profile-avatar { width: 48px; height: 48px; background: #eaf1ff; color: #2860c8; font-size: 16px; }.profile-avatar.large { width: 52px; height: 52px; }.account-block div:last-child { display: flex; flex-direction: column; gap: 5px; }.account-block strong { font-size: 14px; }.account-block span { color: #8896a9; font-size: 11px; }.settings-divider { border-top: 1px solid #edf0f5; margin-bottom: 21px; }.settings-copy { color: #7e8da2; font-size: 12px; line-height: 1.65; margin-top: 10px; max-width: 320px; }.muted-icon { color: #9aa7b7; }.settings-card form, .settings-card > label { display: block; }.settings-card label { color: #586a82; font-weight: 700; font-size: 11px; margin-bottom: 16px; }.settings-card label input, .settings-card label select { display: block; margin-top: 8px; }.form-two { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }.settings-actions { border-top: 1px solid #edf0f5; padding-top: 18px; margin-top: 24px; display: flex; justify-content: flex-end; }.save-message, .inline-error { display: flex; align-items: center; gap: 7px; padding: 9px 11px; border-radius: 6px; font-size: 11px; }.save-message.success { color: #187d65; background: #eaf8f3; }.save-message.error, .inline-error { color: #a4641b; background: #fff7e7; }.inline-error { margin: 8px 0 13px; line-height: 1.4; align-items: flex-start; }
.drawer-backdrop { position: fixed; z-index: 50; inset: 0; background: rgba(18, 35, 63, .26); animation: fade-in .15s ease; }.detail-drawer { position: absolute; right: 0; top: 0; height: 100%; width: min(420px, 100%); background: #fff; box-shadow: -12px 0 30px rgba(18,35,63,.12); padding: 27px; overflow-y: auto; animation: slide-in .2s ease; }.drawer-head { display: flex; justify-content: space-between; align-items: center; }.detail-drawer h2 { margin: 30px 0 24px; font-size: 24px; }.drawer-meta { display: flex; flex-direction: column; gap: 14px; padding-bottom: 25px; border-bottom: 1px solid #edf0f5; }.drawer-meta span { display: flex; align-items: center; gap: 9px; color: #667891; font-size: 12px; }.drawer-meta svg { color: #7e9acc; }.drawer-section { padding-top: 24px; }.drawer-section .eyebrow { margin-bottom: 13px; }.detail-row { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid #f0f2f5; color: #8a97a9; font-size: 11px; }.detail-row strong { color: #465a74; text-align: right; font-weight: 600; max-width: 58%; overflow-wrap: anywhere; }.provider-profile { text-align: center; padding: 20px 0 24px; border-bottom: 1px solid #edf0f5; }.provider-profile .profile-avatar { margin: 0 auto 12px; width: 64px; height: 64px; font-size: 22px; }.provider-profile h2 { margin: 0 0 5px; font-size: 19px; }.provider-profile p { color: #8996a9; font-size: 12px; }.drawer-backdrop .icon-button { color: #72829a; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes slide-in { from { transform: translateX(20px); opacity: .7; } to { transform: translateX(0); opacity: 1; } }
.loading-screen { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #f4f7fb; color: #8190a5; font-size: 12px; gap: 16px; }.loading-line { width: 80px; height: 3px; background: #e2eaf5; border-radius: 4px; overflow: hidden; }.loading-line span { display: block; width: 40%; height: 100%; background: var(--blue); animation: loading 1.1s ease infinite; }.loading-screen p { font-size: 11px; } @keyframes loading { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
.auth-page { min-height: 100vh; display: grid; grid-template-columns: 43% 57%; background: #fff; }.auth-aside { background: var(--navy); position: relative; overflow: hidden; padding: 35px 11%; display: flex; flex-direction: column; color: #fff; }.auth-aside::after { content: ""; position: absolute; width: 460px; height: 460px; border: 1px solid rgba(119,171,250,.13); border-radius: 50%; right: -220px; bottom: -160px; box-shadow: 0 0 0 60px rgba(119,171,250,.025), 0 0 0 120px rgba(119,171,250,.02); }.auth-brand { font-size: 14px; }.auth-message { margin: auto 0; max-width: 430px; position: relative; z-index: 1; }.auth-message .eyebrow { color: #86afe6; }.auth-message h1 { color: #fff; font-size: clamp(34px, 4.1vw, 56px); line-height: 1.1; letter-spacing: -.07em; margin: 20px 0 23px; }.auth-message h1 em { color: #7fb4ff; font-style: normal; }.auth-message p { color: #a9bbd4; max-width: 350px; line-height: 1.7; font-size: 14px; }.auth-footer { color: #8098b8; font-size: 11px; display: flex; gap: 8px; align-items: center; position: relative; z-index: 1; }.auth-form-wrap { display: grid; place-items: center; padding: 30px; }.auth-form { width: min(360px, 100%); }.mobile-auth-logo { display: none; }.auth-form .eyebrow { margin-bottom: 12px; }.auth-form h2 { font-size: 25px; margin-bottom: 8px; }.auth-form > .muted { font-size: 12px; margin-bottom: 29px; }.auth-form form { display: flex; flex-direction: column; gap: 17px; }.auth-form label { display: flex; flex-direction: column; gap: 8px; color: #4e6079; font-size: 11px; font-weight: 700; }.auth-form input { height: 45px; }.form-note { display: flex; align-items: center; gap: 6px; color: #a0acbb; font-size: 10px; margin-top: 21px; }
.mobile-menu, .sidebar-overlay { display: none; }
@media (max-width: 1050px) { .metrics-grid { grid-template-columns: repeat(2, 1fr); }.dashboard-grid { grid-template-columns: 1fr; }.calendar-layout { grid-template-columns: 1fr; }.calendar-side { flex-direction: row; }.legend, .calendar-summary { flex: 1; }.settings-grid { grid-template-columns: 1fr; max-width: none; }.provider-table .table-row { grid-template-columns: 1.4fr 1.1fr .8fr .8fr .85fr .7fr; }.table-row { padding-left: 14px; padding-right: 14px; } }
@media (max-width: 760px) { .sidebar { transform: translateX(-100%); width: 250px; box-shadow: 10px 0 30px rgba(18,35,63,.2); }.sidebar.mobile-open { transform: translateX(0); }.sidebar.collapsed { width: 250px; }.sidebar.collapsed .app-name, .sidebar.collapsed .nav-label, .sidebar.collapsed .nav-item span, .sidebar.collapsed .sidebar-tip, .sidebar.collapsed .user-copy { display: initial; }.sidebar-collapse { display: none; }.sidebar-overlay { display: block; position: fixed; z-index: 19; inset: 0; border: 0; background: rgba(18,35,63,.3); }.main-content, .main-content.sidebar-collapsed { width: 100%; margin-left: 0; }.topbar { padding: 0 18px; }.mobile-menu { display: inline-grid; color: #5d718d; margin-right: 5px; }.sync-status { display: none; }.page-content { padding: 28px 16px 40px; }.page-heading { align-items: flex-start; flex-direction: column; margin-bottom: 23px; }.page-heading .button { align-self: flex-start; }.metrics-grid { gap: 10px; }.metric-card { min-height: 139px; padding: 15px; }.metric-icon { margin-bottom: 13px; }.metric-value { font-size: 21px; }.schedule-list { grid-template-columns: 1fr; }.calendar-toolbar { align-items: flex-start; flex-direction: column; gap: 13px; }.calendar-toolbar h2 { min-width: 0; margin-left: 4px; }.view-toggle { align-self: stretch; }.view-toggle button { flex: 1; }.calendar-panel { overflow-x: auto; }.month-grid, .week-grid { min-width: 620px; }.day-grid { min-width: 560px; }.calendar-side { flex-direction: column; }.list-toolbar { flex-wrap: wrap; }.search-field { min-width: 100%; max-width: none; }.result-count { margin-left: 0; }.table-panel { overflow-x: auto; }.table { min-width: 760px; }.plan-table .table { min-width: 800px; }.plan-summary { grid-template-columns: 1fr; }.plan-summary div { border-right: 0; border-bottom: 1px solid var(--line); }.history-panel { padding: 0 14px; }.history-row { gap: 8px; }.history-row .status-pill { display: none; }.history-date { min-width: 65px; }.auth-page { grid-template-columns: 1fr; }.auth-aside { display: none; }.auth-form-wrap { padding: 22px; }.mobile-auth-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 60px; font-family: Manrope; font-size: 13px; }.auth-form h2 { font-size: 23px; }.detail-drawer { width: 100%; } }
/* Manual-build additions */
.ui-icon { display: inline-block; vertical-align: middle; flex: 0 0 auto; }
button.table-row { font: inherit; width: 100%; border: 0; background: transparent; text-align: left; color: inherit; }
button.table-row:hover { background: #f8fbff; }
.result-count { margin-left: auto; font-size: 11px; color: var(--muted); }
.loading-inline { padding: 12px 14px; margin-bottom: 18px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--muted); font-size: 12px; }
.fatal { min-height: 100vh; display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; padding: 24px; text-align: center; }
.fatal p { max-width: 620px; color: #596b84; }
.drawer-note { font-size: 12px; line-height: 1.6; color: #667891; white-space: pre-wrap; }
.route-summary-live { min-height: 224px; display: flex; flex-direction: column; justify-content: center; gap: 26px; padding: 10px; }
.route-big { display: flex; align-items: center; justify-content: center; gap: 13px; color: var(--blue); }
.route-big div { display: flex; flex-direction: column; gap: 4px; }
.route-big strong { color: var(--ink); font: 700 16px Manrope, sans-serif; }
.route-big span { color: var(--muted); font-size: 11px; }
.route-metrics { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.route-metrics div { padding: 14px; text-align: center; border-right: 1px solid var(--line); }
.route-metrics div:last-child { border: 0; }
.route-metrics span { display: block; color: var(--muted); font-size: 10px; margin-bottom: 6px; }
.route-metrics strong { font: 700 15px Manrope, sans-serif; color: var(--ink); }
.modal-backdrop { position: fixed; z-index: 70; inset: 0; background: rgba(18,35,63,.36); display: grid; place-items: center; padding: 20px; }
.modal { width: min(620px, 100%); max-height: calc(100vh - 40px); overflow: auto; background: white; border-radius: 12px; box-shadow: 0 24px 70px rgba(18,35,63,.2); padding: 25px; }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; }
.modal-head h2 { margin-top: 8px; font-size: 22px; }
.modal form > label, .modal .form-two label { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; color: #586a82; font-weight: 700; font-size: 11px; }
.modal textarea { resize: vertical; min-height: 76px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; border-top: 1px solid var(--line); padding-top: 18px; margin-top: 20px; }
.checkbox-row { flex-direction: row !important; align-items: center; gap: 9px !important; font-weight: 500 !important; }
.checkbox-row input { width: 16px; height: 16px; }
.calendar-item-card { width: 100%; border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 10px; text-align: left; display: flex; flex-direction: column; gap: 6px; color: #566a84; }
.calendar-item-card > div { display: flex; flex-direction: column; gap: 4px; }
.calendar-item-card strong { font-size: 11px; color: #334b68; }
.calendar-item-card span { font-size: 12px; color: var(--ink); font-weight: 700; }
.calendar-item-card small { font-size: 9px; text-transform: uppercase; letter-spacing: .07em; color: #8290a4; }
.calendar-item-card.appointment { border-left: 3px solid var(--purple); background: var(--purple-light); }
.calendar-item-card.visit { border-left: 3px solid var(--blue); background: var(--blue-light); }
.calendar-item-card.completed { border-left: 3px solid var(--green); background: var(--green-light); }
.calendar-empty { font-size: 10px; color: #a0acbb; padding: 10px 4px; display: block; }
.day-view { padding: 18px 5px 5px; display: flex; flex-direction: column; gap: 10px; }
.day-view-date { font: 700 13px Manrope, sans-serif; color: #53667f; margin-bottom: 5px; }
.more-items { font-size: 9px; color: #8794a6; padding: 2px 4px; }
.status-pill.neutral { color: #68778c; background: #f1f4f8; }
.provider-row { cursor: pointer; }
.provider-row strong { color: #344a66; }

@media (max-width: 760px) {
  .route-metrics { grid-template-columns: 1fr; }
  .route-metrics div { border-right: 0; border-bottom: 1px solid var(--line); }
  .route-metrics div:last-child { border-bottom: 0; }
  .modal { padding: 20px 16px; }
  .modal .form-two { grid-template-columns: 1fr; gap: 0; }
}

/* Calendar markup used by the manual build */
.month-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--line); }
.month-weekdays span { height: 40px; display: grid; place-items: center; color: #8695aa; font: 700 10px Manrope, sans-serif; text-transform: uppercase; }
.month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); min-height: 540px; }
.calendar-day { min-height: 91px; border-bottom: 1px solid #edf0f5; border-right: 1px solid #edf0f5; padding: 8px; background: #fff; }
.calendar-day:nth-child(7n) { border-right: 0; }
.calendar-day.muted-day .day-number { color: #b8c2d0; }
.day-number { color: #60718b; font-size: 11px; width: 22px; height: 22px; text-align: center; padding-top: 4px; border-radius: 50%; }
.calendar-day.today .day-number { background: var(--blue); color: #fff; }
.day-items { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; }
.calendar-pill { width: 100%; border: 0; border-left: 2px solid #5790ec; background: #edf3ff; color: #376dc8; border-radius: 3px; padding: 4px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 9px; }
.calendar-pill.visit { background: #e9f8f2; color: #218569; border-color: #56bb96; }
.calendar-pill.completed { background: #f0f2f5; color: #8896a9; border-color: #a2afbf; text-decoration: line-through; }
.calendar-pill span { font-weight: 700; }
.week-grid { display: grid; grid-template-columns: repeat(7, 1fr); min-height: 560px; }
.week-day { border-right: 1px solid #edf0f5; min-width: 0; }
.week-day:last-child { border-right: 0; }
.week-day-head { height: 66px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border-bottom: 1px solid #edf0f5; color: #8a98ab; font-size: 10px; }
.week-day-head strong { font: 800 18px Manrope, sans-serif; color: #576b85; }
.week-items { padding: 10px 5px; display: flex; flex-direction: column; gap: 6px; }
.legend > div:not(.eyebrow) { display: flex; align-items: center; gap: 9px; color: #6b7c94; font-size: 11px; }
.legend-dot.appointment { background: #765add; }
.legend-dot.visit { background: #2463eb; }
.legend-dot.completed { background: #16a47c; }
.type-badge.visit { color: #218569; background: #e9f8f2; }
.schedule-date.visit { color: #218569; background: #e9f8f2; }
.schedule-date.appointment { color: #765add; background: #f2efff; }
.calendar-summary strong { font: 800 28px Manrope, sans-serif; color: var(--ink); }
.calendar-summary > span { color: #8996a9; font-size: 11px; }
.calendar-summary .text-button { margin-top: 6px; }

@media (max-width: 760px) {
  .month-grid, .month-weekdays, .week-grid { min-width: 620px; }
}
.modal textarea { width: 100%; border: 1px solid #dce5ef; border-radius: 7px; background: #fff; padding: 10px 12px; color: #354962; outline: none; font: inherit; font-size: 12px; }
.modal textarea:focus { border-color: #7da6ee; box-shadow: 0 0 0 3px rgba(36,99,235,.08); }

/* ============================================================
   Monthly import / provider history / FR branding patch
   ============================================================ */
.sidebar::after {
  content: "";
  position: absolute;
  left: 24px;
  bottom: 205px;
  width: 160px;
  height: 160px;
  background: url('/assets/fr-logo.png') center / contain no-repeat;
  opacity: .055;
  pointer-events: none;
  filter: saturate(.75);
}
.auth-aside::after {
  content: "";
  position: absolute;
  right: 30px;
  bottom: 92px;
  width: 220px;
  height: 220px;
  background: url('/assets/fr-logo.png') center / contain no-repeat;
  opacity: .055;
  pointer-events: none;
}
.auth-aside { position: relative; overflow: hidden; }
.heading-actions { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.plan-summary.four { grid-template-columns: repeat(4,1fr); }
.scheduled-number { color: var(--blue); font-weight: 700; }
.monthly-progress-card { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 20px 22px; margin-bottom: 14px; }
.monthly-progress-card h2 { margin: 5px 0 3px; font-size: 18px; }
.monthly-progress-card p { margin: 0; color: var(--muted); font-size: 11px; }
.monthly-progress-visual { display: flex; align-items: center; gap: 16px; min-width: 320px; }
.monthly-progress-visual > strong { color: var(--blue); font: 800 22px Manrope,sans-serif; min-width: 55px; text-align: right; }
.progress-bar.large { height: 10px; flex: 1; min-width: 180px; }
.plan-table .table-row { grid-template-columns: 1.4fr .48fr .48fr .55fr .55fr .72fr .72fr 1fr; }
.monthly-import-modal { width: min(820px,100%); }
.upload-drop { position: relative; border: 1.5px dashed #bfd0e6; background: #f8fbff; border-radius: 10px; padding: 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 7px; color: #62758e; }
.upload-drop strong { color: var(--ink); font: 700 14px Manrope,sans-serif; }
.upload-drop span { max-width: 590px; font-size: 11px; line-height: 1.5; }
.upload-drop input { margin-top: 8px; max-width: 100%; }
.upload-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--blue-light); color: var(--blue); display: grid; place-items: center; }
.import-summary { display: grid; grid-template-columns: 1fr 200px; gap: 18px; align-items: end; margin-top: 18px; padding: 14px; background: #f8fafc; border: 1px solid var(--line); border-radius: 9px; }
.import-summary > div { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }
.import-summary label { display: flex; flex-direction: column; gap: 6px; color: #687991; font-size: 10px; font-weight: 700; }
.mini-detail { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mini-detail span { color: #8a98aa; font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }
.mini-detail strong { color: #455b76; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.import-preview-table { margin-top: 12px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.import-preview-row { display: grid; grid-template-columns: 1.5fr 1.25fr .8fr .45fr .75fr; gap: 10px; align-items: center; min-height: 38px; padding: 7px 10px; border-bottom: 1px solid #eef2f6; color: #62748d; font-size: 10px; }
.import-preview-row:last-child { border-bottom: 0; }
.import-preview-row.head { background: #f5f7fa; color: #8492a5; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 9px; }
.import-preview-row span:first-child { color: #405873; font-weight: 700; }
.import-more { padding: 9px 10px; color: #8090a5; font-size: 10px; background: #fbfcfe; }
.detail-drawer.wide { width: min(520px,100%); }
.provider-actions { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.button.small { min-height: 32px; padding: 7px 11px; font-size: 10px; }
.provider-month-strip { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--line); border-radius: 9px; overflow: hidden; margin: 18px 0 0; }
.provider-month-strip div { padding: 12px; text-align: center; border-right: 1px solid var(--line); }
.provider-month-strip div:last-child { border-right:0; }
.provider-month-strip span { display:block; color:#8795a8; font-size:9px; text-transform:uppercase; letter-spacing:.05em; margin-bottom:5px; }
.provider-month-strip strong { color:var(--ink); font:800 17px Manrope,sans-serif; }
.provider-timeline { border: 1px solid #edf1f6; border-radius: 8px; overflow: hidden; }
.provider-timeline-row { display: grid; grid-template-columns: 78px 1fr; gap: 12px; padding: 10px 11px; border-bottom: 1px solid #edf1f6; }
.provider-timeline-row:last-child { border-bottom: 0; }
.provider-timeline-row > div { display: flex; flex-direction: column; gap: 3px; }
.provider-timeline-row > div strong { color:#526a86; font-size:10px; }
.provider-timeline-row > div span { color:#98a4b4; font-size:9px; }
.provider-timeline-row p { margin:0; display:flex; flex-direction:column; gap:3px; color:#718198; font-size:10px; line-height:1.4; }
.provider-timeline-row p b { color:#405873; font-size:10px; }
.modal select { width:100%; border:1px solid #dce5ef; border-radius:7px; background:#fff; padding:10px 12px; color:#354962; outline:none; font:inherit; font-size:12px; }

@media (max-width: 1050px) {
  .plan-summary.four { grid-template-columns: repeat(2,1fr); }
  .plan-summary.four div:nth-child(2) { border-right:0; }
  .monthly-progress-visual { min-width: 250px; }
}
@media (max-width: 760px) {
  .heading-actions { width:100%; }
  .heading-actions .button { flex:1; justify-content:center; }
  .plan-summary.four { grid-template-columns:1fr; }
  .monthly-progress-card { flex-direction:column; align-items:stretch; }
  .monthly-progress-visual { min-width:0; width:100%; }
  .import-summary { grid-template-columns:1fr; }
  .import-summary > div { grid-template-columns:1fr; }
  .import-preview-table { overflow-x:auto; }
  .import-preview-row { min-width:620px; }
  .sidebar::after { opacity:.035; }
}


/* ============================================================
   Daily route execution + phone calendar + polish
   ============================================================ */
.page-content {
  position: relative;
}
.page-content::before {
  content: "";
  position: fixed;
  right: -110px;
  top: 115px;
  width: 330px;
  height: 330px;
  border: 1px solid rgba(36,99,235,.035);
  border-radius: 50%;
  box-shadow: 0 0 0 54px rgba(36,99,235,.018), 0 0 0 108px rgba(36,99,235,.012);
  pointer-events: none;
  z-index: -1;
}
.metric-card {
  overflow: hidden;
}
.metric-card::after {
  content: "";
  position: absolute;
  width: 90px;
  height: 90px;
  right: -45px;
  top: -45px;
  border-radius: 50%;
  background: rgba(36,99,235,.035);
  pointer-events: none;
}
.route-open-button { margin-top: 18px; width: 100%; }
.route-heading { align-items: center; }
.route-date-controls { display: flex; align-items: center; gap: 7px; }
.route-date-controls input {
  border: 1px solid #d8e1ed;
  background: #fff;
  color: #42566f;
  border-radius: 7px;
  min-height: 38px;
  padding: 0 10px;
  font: 700 11px "DM Sans", sans-serif;
}
.route-day-hero {
  min-height: 120px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(120deg, #fff 0%, #fff 58%, #f7fbff 100%);
}
.route-day-hero::after {
  content: "";
  position: absolute;
  right: -42px;
  top: -82px;
  width: 230px;
  height: 230px;
  border: 1px solid rgba(36,99,235,.11);
  border-radius: 50%;
  box-shadow: 0 0 0 34px rgba(36,99,235,.025), 0 0 0 68px rgba(36,99,235,.018);
  pointer-events: none;
}
.route-day-hero > * { position: relative; z-index: 1; }
.route-day-hero h2 { margin: 6px 0 5px; font-size: 20px; }
.route-day-hero p { color: var(--muted); font-size: 11px; }
.route-day-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.route-feedback {
  margin: -14px 0 18px;
  border: 1px solid #bfe6d8;
  background: #effaf6;
  color: #19775f;
  border-radius: 8px;
  padding: 10px 13px;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 7px;
}
.route-note {
  margin-bottom: 14px;
  border: 1px solid #f0d59e;
  background: #fffaf0;
  color: #8a6729;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.route-stop-list { display: flex; flex-direction: column; gap: 10px; }
.route-stop-card {
  min-height: 112px;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: 38px 72px minmax(0,1fr) auto;
  align-items: center;
  gap: 15px;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.route-stop-card:hover { transform: translateY(-1px); border-color: #cad9ec; box-shadow: 0 16px 36px rgba(32,54,88,.08); }
.route-stop-card.is-complete { background: #fbfefd; border-color: #d7eee6; }
.route-stop-card.is-skipped { background: #fffdf9; border-color: #f1dfbd; }
.stop-sequence {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg,#2f76ef,#2456c9);
  font: 800 12px Manrope,sans-serif;
  box-shadow: 0 6px 15px rgba(36,99,235,.18);
}
.is-complete .stop-sequence { background: #1d9b79; }
.is-skipped .stop-sequence { background: #c48a31; }
.stop-time { display: flex; flex-direction: column; gap: 3px; border-right: 1px solid #edf1f6; min-height: 50px; justify-content: center; }
.stop-time strong { color: #30445f; font: 800 12px Manrope,sans-serif; }
.stop-time span { color: #93a0b2; font-size: 9px; text-transform: uppercase; letter-spacing: .07em; }
.stop-main { min-width: 0; }
.stop-title-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.stop-title-row h3 { font-size: 14px; }
.stop-main > p { color: #8290a3; font-size: 10px; margin-top: 3px; }
.stop-address { display: flex; align-items: center; gap: 5px; color: #60758f; font-size: 10px; margin-top: 9px; }
.stop-address svg { color: #7197cb; }
.stop-links { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.stop-links a, .stop-links button {
  border: 0;
  background: none;
  padding: 0;
  color: var(--blue);
  font: 700 9px "DM Sans",sans-serif;
}
.stop-links a:hover, .stop-links button:hover { text-decoration: underline; }
.stop-actions { display: flex; gap: 7px; align-items: center; }
.button.success-action {
  min-height: 34px;
  background: #eaf8f3;
  border-color: #bce5d6;
  color: #187d62;
  box-shadow: none;
}
.button.success-action:hover { background: #ddf4eb; }
.button.skip-action, .button.skip-confirm {
  min-height: 34px;
  border: 1px solid #ead6b2;
  background: #fff8eb;
  color: #9a6b20;
  font-weight: 700;
}
.button.skip-action:hover, .button.skip-confirm:hover { background: #fff2db; }
.compact-modal { width: min(520px,100%); }
.modal-help { color: #718198; font-size: 11px; line-height: 1.5; margin: 6px 0 14px; }
.drawer-calendar-actions { display: flex; gap: 8px; margin-top: 20px; flex-wrap: wrap; }
.profile-name-form { margin-top: 18px; }
.profile-name-form .button { margin-top: 8px; }
.field-help { margin: -4px 0 8px; color: #8a98aa; font-size: 9px; line-height: 1.4; }

@media (max-width: 900px) {
  .route-stop-card { grid-template-columns: 36px 64px minmax(0,1fr); }
  .stop-actions { grid-column: 3; justify-content: flex-start; }
  .route-day-hero { align-items: flex-start; flex-direction: column; }
  .route-day-actions { justify-content: flex-start; }
}
@media (max-width: 650px) {
  .route-heading { align-items: stretch; }
  .route-date-controls { width: 100%; }
  .route-date-controls input { flex: 1; }
  .route-stop-card { grid-template-columns: 34px minmax(0,1fr); gap: 10px; }
  .stop-time { grid-column: 2; border-right: 0; min-height: 0; flex-direction: row; gap: 7px; justify-content: flex-start; align-items: center; }
  .stop-main { grid-column: 1 / -1; }
  .stop-actions { grid-column: 1 / -1; }
  .stop-actions .button { flex: 1; }
  .route-day-actions { width:100%; }
  .route-day-actions .button { flex:1; }
  .sidebar::after { bottom: 230px; width: 130px; height: 130px; }
}


/* ============================================================
   Phone-first field usability + calendar status correction
   ============================================================ */

/* Calendar semantics:
   fixed appointment = purple
   flexible planned route visit = blue
   completed = green
*/
.calendar-pill.appointment {
  background: #f2efff;
  color: #6c54ce;
  border-color: #765add;
}
.calendar-pill.visit {
  background: #edf3ff;
  color: #376dc8;
  border-color: #5790ec;
}
.calendar-pill.completed {
  background: #e9f8f2;
  color: #218569;
  border-color: #56bb96;
  text-decoration: none;
}
.type-badge.visit {
  color: #376dc8;
  background: #edf3ff;
}
.schedule-date.visit {
  color: #376dc8;
  background: #edf3ff;
}

/* Hidden on larger screens; becomes the primary thumb navigation on phones. */
.mobile-bottom-nav { display: none; }

/* Phone agenda used instead of squeezing a seven-column calendar onto a phone. */
.mobile-calendar-agenda {
  background: #fff;
  min-height: 420px;
  padding: 8px 10px 18px;
}
.mobile-agenda-note {
  color: #8190a5;
  font-size: 11px;
  padding: 10px 5px 14px;
}
.mobile-agenda-day {
  display: grid;
  grid-template-columns: 54px minmax(0,1fr);
  gap: 10px;
  padding: 12px 3px;
  border-bottom: 1px solid #edf1f6;
}
.mobile-agenda-day:last-child { border-bottom: 0; }
.mobile-day-date {
  min-height: 58px;
  border-radius: 9px;
  background: #f6f8fb;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #75869d;
  line-height: 1.05;
}
.mobile-day-date span {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .07em;
}
.mobile-day-date strong {
  font: 800 19px Manrope, sans-serif;
  color: #405873;
  margin: 2px 0;
}
.mobile-day-date small { font-size: 9px; }
.mobile-agenda-day.today .mobile-day-date {
  background: var(--blue);
  color: rgba(255,255,255,.78);
}
.mobile-agenda-day.today .mobile-day-date strong { color: #fff; }
.mobile-day-items {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.mobile-day-items .calendar-item-card {
  min-height: 58px;
  padding: 9px 10px;
}
.mobile-no-items {
  align-self: center;
  color: #9aa6b7;
  font-size: 10px;
  padding: 17px 4px;
}

@media (max-width: 760px) {
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  body { padding-bottom: env(safe-area-inset-bottom, 0px); }

  /* Keep the working area genuinely phone-width. */
  .page-content {
    padding: 18px 12px calc(92px + env(safe-area-inset-bottom, 0px));
  }
  .topbar {
    min-height: 54px;
    height: 54px;
    padding: 0 11px;
    position: sticky;
    top: 0;
    z-index: 15;
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(10px);
  }
  .breadcrumb span { display: none; }
  .breadcrumb strong { font-size: 12px; }
  .topbar-actions { gap: 6px; }
  .header-admin { display: none; }

  /* Thumb-friendly navigation always available without opening the sidebar. */
  .mobile-bottom-nav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    z-index: 18;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 64px;
    padding: 5px 5px calc(5px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #dfe6ef;
    background: rgba(255,255,255,.98);
    box-shadow: 0 -8px 24px rgba(30,55,85,.08);
    backdrop-filter: blur(12px);
  }
  .mobile-bottom-nav button {
    appearance: none;
    border: 0;
    background: transparent;
    color: #78889e;
    border-radius: 9px;
    min-width: 0;
    min-height: 50px;
    padding: 6px 3px 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3px;
    font: 700 9px "DM Sans", sans-serif;
  }
  .mobile-bottom-nav button.active {
    color: var(--blue);
    background: #eff4ff;
  }
  .mobile-bottom-nav svg { width: 19px; height: 19px; }

  /* Off-canvas menu remains available for less-frequent screens. */
  .sidebar {
    width: min(86vw, 310px);
    z-index: 22;
  }
  .sidebar-overlay { z-index: 21; }
  .sidebar-bottom { padding-bottom: 18px; }

  /* Minimum usable touch sizes. 16px fields prevent iOS auto-zoom. */
  button, .button, .icon-button, a.button { touch-action: manipulation; }
  .button {
    min-height: 44px;
    padding: 10px 13px;
    font-size: 11px;
  }
  .icon-button { min-width: 42px; min-height: 42px; }
  input, select, textarea,
  .modal input, .modal select, .modal textarea,
  .search-field input, label input, label select,
  .route-date-controls input {
    font-size: 16px !important;
  }
  input, select,
  .search-field input, label input, label select {
    min-height: 44px;
  }

  .page-heading {
    gap: 12px;
    margin-bottom: 16px;
  }
  .page-heading h1 { font-size: 25px; }
  .page-heading p { line-height: 1.45; }
  .heading-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .heading-actions .button { width: 100%; }

  /* Calendar becomes an agenda instead of a horizontally scrolling desktop grid. */
  .calendar-layout { display: block; }
  .calendar-panel {
    min-height: 0;
    overflow: visible;
    border-radius: 0 0 10px 10px;
  }
  .calendar-toolbar {
    padding: 10px;
    gap: 9px;
  }
  .calendar-toolbar > div:first-child {
    width: 100%;
    justify-content: space-between;
  }
  .calendar-toolbar h2 {
    font-size: 15px;
    text-align: center;
    flex: 1;
  }
  .date-navigation { width: 100%; }
  .today-button { min-height: 40px; }
  .view-toggle { width: 100%; }
  .view-toggle button { min-height: 39px; }
  .calendar-side {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 10px;
  }
  .legend {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 13px 15px;
  }
  .calendar-summary { padding: 13px 15px; }
  .month-grid, .month-weekdays, .week-grid, .day-grid {
    min-width: 0 !important;
  }

  /* Provider list becomes readable cards instead of a desktop-width table. */
  .provider-table .table-head { display: none; }
  .provider-table.table { min-width: 0; }
  .provider-table .provider-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
    margin: 0;
    min-height: 0;
    padding: 14px 13px;
    border-bottom: 1px solid #e9eef5;
  }
  .provider-table .provider-row > span {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    color: #5b6e87;
    overflow-wrap: anywhere;
  }
  .provider-table .provider-row > span::before {
    content: attr(data-label);
    color: #97a3b3;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 800;
  }
  .provider-table .provider-row .provider-name {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    padding-bottom: 5px;
  }
  .provider-table .provider-row .provider-name::before { display: none; }
  .provider-table .provider-name strong {
    white-space: normal;
    font-size: 13px;
  }

  /* Monthly requirements also become cards. */
  .plan-table { overflow: visible; background: transparent; border: 0; }
  .plan-table .table { min-width: 0; background: transparent; }
  .plan-table .table-head { display: none; }
  .plan-table .plan-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 9px 14px;
    min-height: 0;
    margin-bottom: 9px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
  }
  .plan-table .plan-row > span {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #526780;
  }
  .plan-table .plan-row > span::before {
    content: attr(data-label);
    color: #99a5b5;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 800;
  }
  .plan-table .plan-row .provider-name {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    padding-bottom: 5px;
    border-bottom: 1px solid #edf1f6;
  }
  .plan-table .plan-row .provider-name::before { display: none; }
  .plan-table .progress-cell { grid-column: 1 / -1; }
  .plan-table .progress-cell .progress-bar { width: 100%; min-height: 7px; }

  /* Modal/drawer behavior should feel native on a phone. */
  .modal-backdrop {
    align-items: end;
    padding: 0;
  }
  .modal {
    width: 100%;
    max-height: 92dvh;
    border-radius: 16px 16px 0 0;
    padding: 18px 14px calc(18px + env(safe-area-inset-bottom,0px));
  }
  .modal-actions {
    position: sticky;
    bottom: 0;
    background: #fff;
    padding-top: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .detail-drawer {
    width: 100%;
    padding: 20px 14px calc(82px + env(safe-area-inset-bottom,0px));
  }
  .drawer-calendar-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  /* Daily route is the main field screen: big tap targets, stacked GPS/actions. */
  .route-day-hero { padding: 16px; }
  .route-day-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .route-stop-card {
    padding: 13px 11px;
    border-radius: 11px;
  }
  .stop-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    width: 100%;
    gap: 7px;
  }
  .stop-actions .button {
    width: 100%;
    justify-content: center;
    white-space: normal;
  }
  .route-feedback { margin-top: 0; }

  /* Account/history/settings forms collapse cleanly. */
  .form-two { grid-template-columns: 1fr; }
  .settings-card { min-height: 0; }
  .account-block { margin: 18px 0; }
  .history-row { align-items: flex-start; padding: 12px 0; }
  .history-main strong { line-height: 1.3; }
}

@media (max-width: 430px) {
  .metrics-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .metric-card { min-height: 122px; padding: 13px; }
  .metric-label { font-size: 9px; }
  .metric-value { font-size: 20px; }
  .mobile-bottom-nav button span { font-size: 8px; }
  .provider-table .provider-row,
  .plan-table .plan-row { grid-template-columns: 1fr 1fr; }
  .monthly-progress-card { padding: 15px; }
  .monthly-progress-visual { gap: 10px; }
}

/* ============================================================
   Route sync + stronger typography + brand polish
   ============================================================ */
:root {
  --muted: #596a83;
}
body, input, textarea, select, button {
  color: var(--ink);
}
.breadcrumb,
.page-heading p,
.metric-label,
.metric-detail,
.route-day-hero p,
.visit-content span,
.schedule-row span,
.history-main span,
.detail-row,
.provider-profile p,
.drawer-meta span,
.calendar-summary > span,
.calendar-summary small,
.calendar-empty,
.mobile-agenda-note,
.more-items,
.drawer-note,
.form-note,
.result-count,
.loading-inline,
.route-big span,
.route-metrics span,
.route-panel .muted,
.optimize-panel .muted {
  color: #5f7188;
}
.detail-row strong,
.week-head strong,
.provider-profile h2,
.schedule-row strong,
.visit-content strong,
.history-main strong {
  color: #304661;
}
.brand-mark.logo-mark {
  background: url('/assets/fr-logo.png') center / contain no-repeat;
  color: transparent;
  border-radius: 0;
  box-shadow: none;
}
.brand-mark.logo-mark.large {
  width: 46px;
  height: 46px;
}
.sidebar::after {
  left: 16px;
  bottom: 255px;
  width: 186px;
  height: 186px;
  opacity: .1;
  filter: saturate(.95);
}
.auth-aside::after {
  width: 250px;
  height: 250px;
  opacity: .08;
}
.form-help {
  display: block;
  margin-top: 8px;
  color: #667a94;
  font-size: 11px;
  line-height: 1.45;
}
.form-callout {
  margin-bottom: 14px;
  line-height: 1.45;
  display: block;
}
.form-callout strong {
  margin-right: 4px;
}
.form-three {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 13px;
}
.day-checkbox-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 8px;
}
.checkbox-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 10px;
  border: 1px solid #d7e0ec;
  border-radius: 8px;
  background: #f8fbff;
  color: #355070;
  font-size: 12px;
  font-weight: 700;
}
.checkbox-pill input {
  margin: 0;
}
.prominent-check {
  margin-top: 2px;
  border: 1px solid #d8e5ff;
  background: #f7faff;
  border-radius: 8px;
  padding: 10px 12px;
}
.prominent-check input {
  margin-right: 8px;
}
.modal-help {
  color: #667a94;
  line-height: 1.5;
}
@media (max-width: 760px) {
  .sidebar::after {
    left: 20px;
    bottom: 290px;
    width: 150px;
    height: 150px;
    opacity: .11;
  }
  .form-three {
    grid-template-columns: 1fr;
  }
  .day-checkbox-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .mobile-bottom-nav {
    z-index: 24;
  }
}

.sidebar-overlay[hidden] { display: none !important; pointer-events: none !important; }

/* ============================================================
   Provider routing guardrails + cross-screen linkage polish
   ============================================================ */
.provider-edit-modal { width: min(760px, 100%); }
.routing-rule-card {
  border: 1px solid #dfe7f2;
  background: #f8fbff;
  border-radius: 9px;
  padding: 13px;
  margin: 2px 0 14px;
}
.routing-rule-card .eyebrow { margin-bottom: 10px; }
.day-checkbox-grid {
  grid-template-columns: repeat(5, minmax(46px, 68px));
  gap: 6px;
  justify-content: start;
}
.checkbox-pill {
  gap: 5px;
  padding: 5px 7px;
  border-radius: 6px;
  font-size: 10px;
  min-height: 30px;
}
.checkbox-pill input {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
}
.provider-month-strip.four { grid-template-columns: repeat(4,1fr); }
.timeline-goal-note {
  display: block;
  margin-top: 4px;
  color: #6d7e93;
  font-size: 9px;
  font-weight: 600;
}
.timeline-dot.fixed { border-color: var(--purple); }
.fixed-today .visit-content strong { color: #4f3da8; }
.provider-active-check {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  margin-top: 4px;
}
@media (max-width: 760px) {
  .day-checkbox-grid { grid-template-columns: repeat(5, minmax(0,1fr)); gap: 4px; }
  .checkbox-pill { padding: 5px 4px; font-size: 9px; }
  .provider-month-strip.four { grid-template-columns: repeat(2,1fr); }
  .provider-month-strip.four div:nth-child(2) { border-right: 0; }
  .provider-month-strip.four div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}


/* ============================================================
   Monthly sorting + dashboard charts + GPS route legs
   ============================================================ */
.plan-sort-help {
  padding: 10px 18px 9px;
  border-bottom: 1px solid #edf0f5;
  color: #65778f;
  background: #fbfcfe;
  font-size: 10px;
}
.sortable-head {
  padding-top: 0;
  padding-bottom: 0;
}
.sort-header {
  min-width: 0;
  height: 43px;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  display: flex;
  align-items: center;
  gap: 5px;
  text-align: left;
}
.sort-header:hover,
.sort-header.active {
  color: #355c98;
}
.sort-header i {
  font-style: normal;
  font-size: 8px;
  color: #9aa9bc;
}
.sort-header.active i {
  color: var(--blue);
}

.dashboard-charts {
  display: grid;
  grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
  gap: 20px;
  margin-bottom: 20px;
}
.mini-chart-card {
  min-height: 235px;
}
.panel-heading.compact {
  margin-bottom: 16px;
}
.progress-chart-wrap {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 145px;
}
.progress-donut {
  --progress: 0;
  width: 118px;
  height: 118px;
  flex: 0 0 118px;
  border-radius: 50%;
  position: relative;
  background: conic-gradient(var(--green) calc(var(--progress) * 1%), #e8edf4 0);
  display: grid;
  place-items: center;
}
.progress-donut::after {
  content: "";
  position: absolute;
  inset: 12px;
  background: #fff;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px #edf0f5;
}
.progress-donut > div {
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.progress-donut strong {
  font: 800 24px Manrope, sans-serif;
  color: var(--ink);
  letter-spacing: -.05em;
}
.progress-donut span {
  color: #6e7f95;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.progress-legend {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.progress-legend > div {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  align-items: center;
  gap: 8px;
  color: #5e7088;
  font-size: 11px;
}
.progress-legend strong {
  color: #334a66;
  font-size: 12px;
}
.chart-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.chart-dot.complete { background: var(--green); }
.chart-dot.scheduled { background: var(--blue); }
.chart-dot.remaining { background: #d8e0ea; }

.zone-bars {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.zone-bar-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.zone-bar-label {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #536981;
  font-size: 10px;
}
.zone-bar-label span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.zone-bar-label strong {
  color: #304762;
}
.zone-bar-track {
  height: 7px;
  background: #edf1f6;
  border-radius: 999px;
  overflow: hidden;
}
.zone-bar-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6fa5f8, #2463eb);
}
.chart-empty {
  min-height: 130px;
  display: grid;
  place-items: center;
  color: #7a8ba0;
  font-size: 11px;
  text-align: center;
}
.route-leg-note {
  margin-bottom: 14px;
  border: 1px solid #dce7f6;
  background: #f7faff;
  color: #536c8d;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 7px;
}

@media (max-width: 900px) {
  .dashboard-charts {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .plan-sort-help {
    display: none;
  }
  .sort-header i {
    display: none;
  }
  .progress-chart-wrap {
    gap: 18px;
  }
  .progress-donut {
    width: 104px;
    height: 104px;
    flex-basis: 104px;
  }
}

/* ============================================================
   Recurring appointments + conference links
   ============================================================ */
.appointment-modal { width: min(700px, 100%); }
.optional-label {
  color: #8a98aa;
  font-weight: 600;
  font-size: 10px;
  margin-left: 4px;
}
.recurrence-row { align-items: end; }
.recurrence-summary {
  margin: -4px 0 14px;
  border: 1px solid #dbe6f5;
  background: #f7faff;
  color: #4f6683;
  border-radius: 7px;
  padding: 9px 11px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
}
.recurrence-summary[hidden],
#repeat-until-wrap[hidden] { display: none !important; }
.appointment-join-call { margin: 18px 0 3px; }
.meeting-link-inline,
.timeline-meeting-link {
  color: #315fc6 !important;
  font-weight: 800 !important;
  text-decoration: none;
}
.meeting-link-inline:hover,
.timeline-meeting-link:hover { text-decoration: underline; }
.timeline-meeting-link {
  display: inline-block;
  margin-top: 5px;
  font-size: 10px;
}
@media (max-width: 760px) {
  .appointment-modal { width: 100%; }
  .recurrence-row { align-items: stretch; }
}
.dashboard-meeting-link {
  display: inline-block;
  margin-top: 3px;
  color: #315fc6;
  font-size: 10px;
  font-weight: 800;
  text-decoration: none;
}
.dashboard-meeting-link:hover { text-decoration: underline; }

/* ============================================================
   Field assistant / intelligence / workflow polish
   ============================================================ */
.forecast-strip {
  display:grid;
  grid-template-columns:minmax(260px,1.6fr) repeat(3,minmax(110px,.55fr));
  gap:18px;
  align-items:center;
  margin-bottom:20px;
  padding:18px 20px;
}
.forecast-strip > div:first-child { display:flex; flex-direction:column; gap:5px; }
.forecast-strip > div:first-child > strong { font:800 16px Manrope,sans-serif; color:#263d5a; }
.forecast-strip > div:first-child > span { color:#61738a; font-size:11px; }
.forecast-stat { border-left:1px solid var(--line); padding-left:18px; display:flex; flex-direction:column; gap:4px; }
.forecast-stat span { color:#61738a; font-size:10px; }
.forecast-stat strong { color:#314965; font:800 20px Manrope,sans-serif; }
.forecast-stat.behind strong { color:#b87417; }
.forecast-stat.ahead strong { color:#168263; }
.attention-grid { align-items:start; }
.attention-panel,.followup-panel { min-height:260px; }
.attention-count { min-width:28px;height:28px;border-radius:999px;background:#edf3ff;color:#285fc2;display:grid;place-items:center;font-weight:800;font-size:11px; }
.attention-list,.followup-list { display:flex;flex-direction:column;gap:8px; }
.attention-row { width:100%; border:1px solid #e4eaf2; background:#fff; border-radius:8px; padding:10px 11px; display:grid; grid-template-columns:7px minmax(0,1fr) 18px; gap:10px; align-items:start; text-align:left; color:#425873; }
.attention-row > i { width:7px;height:7px;border-radius:50%;background:#6a91d7;margin-top:5px; }
.attention-row.warning > i { background:#d89627; }.attention-row.critical > i { background:#bf5656; }
.attention-row:hover { background:#f8fbff; border-color:#ccd9eb; }
.attention-row div { display:flex;flex-direction:column;gap:3px; }
.attention-row strong { font-size:11px;color:#314861; }.attention-row span { font-size:10px;line-height:1.4;color:#667990; }
.all-clear { display:flex;gap:10px;align-items:center;padding:24px 8px;color:#2a806b; }
.all-clear div { display:flex;flex-direction:column;gap:4px; }.all-clear strong{font-size:12px}.all-clear span{font-size:10px;color:#667990}.all-clear.compact{padding:10px 4px;}
.followup-row { display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #edf1f5;padding:10px 0; }
.followup-row:last-child{border-bottom:0}.followup-row>div{display:flex;flex-direction:column;gap:3px;min-width:0}.followup-row strong{font-size:11px;color:#314861}.followup-row span{font-size:10px;color:#566d89}.followup-row small{font-size:9px;color:#7b8ca1}.followup-row.overdue small{color:#b36f1d;font-weight:700}
.next-stop-hero { margin-bottom:14px; display:grid; grid-template-columns:100px minmax(0,1fr) auto; gap:18px; align-items:center; border-left:4px solid var(--blue); background:linear-gradient(110deg,#fff,#f7faff); }
.next-stop-label { display:flex;flex-direction:column;gap:3px; }.next-stop-label span{text-transform:uppercase;letter-spacing:.1em;font-size:8px;font-weight:800;color:#778aa2}.next-stop-label strong{font:800 20px Manrope,sans-serif;color:#244a82}
.next-stop-copy h2{font-size:18px;margin-bottom:4px}.next-stop-copy p{font-size:11px;color:#60738d}.leave-by{display:block;margin-top:6px;color:#2e6bc9;font-size:10px;font-weight:700}
.next-stop-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.route-edit-banner { margin:0 0 14px; border:1px solid #cfe0f8; background:#f4f8ff; border-radius:9px; padding:11px 13px; display:flex;align-items:center;gap:12px; }
.route-edit-banner strong{font-size:11px;color:#2f5f9e}.route-edit-banner span{font-size:10px;color:#61758e;flex:1}.route-stop-card.reorderable{cursor:grab}.route-stop-card.dragging{opacity:.55;outline:2px dashed #7da6ee}.route-stop-list.is-editing .route-stop-card:not(.reorderable){opacity:.88}
.provider-quick-actions { display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin-top:13px; }
.structured-contact-card { border:1px solid #dfe7f1; background:#fafcff; border-radius:9px; padding:13px; margin:6px 0 16px; }
.office-contact-editor { display:grid; grid-template-columns:1.1fr 1fr .9fr 1.3fr; gap:7px; margin:8px 0; }
.office-contact-editor input { min-width:0; }
.office-contact-list { padding:10px 0;border-bottom:1px solid #f0f2f5; }.detail-label{display:block;color:#7d8ca0;font-size:10px;margin-bottom:7px}.office-contact-card{display:flex;justify-content:space-between;gap:10px;padding:7px 0}.office-contact-card>div{display:flex;flex-direction:column;gap:2px}.office-contact-card strong{font-size:11px;color:#334a65}.office-contact-card span{font-size:9px;color:#7c8da2}.office-contact-card a{font-size:9px;color:#2f67c6;text-decoration:none}.office-contact-list>p{margin-top:5px;color:#61748d;font-size:10px}
.routing-rule-card { border:1px solid #dbe6f4; background:#f8fbff; border-radius:9px; padding:13px; margin:10px 0 15px; }
.compact-days { grid-template-columns:repeat(5,minmax(0,72px)); justify-content:start; gap:6px; }
.compact-days .checkbox-pill { padding:6px 8px; min-height:30px; font-size:10px; border-radius:7px; }
.compact-days .checkbox-pill input { width:13px!important; height:13px!important; min-width:13px!important; min-height:13px!important; }
.followup-editor,.skip-reschedule-options { border:1px solid #e2e9f2; background:#fafcff; border-radius:8px; padding:10px; margin:5px 0 12px; }
.import-change-card { border:1px solid #dce7f5;background:#f8fbff;border-radius:9px;padding:13px;margin:13px 0; }
.import-change-grid { display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin:9px 0; }
.import-change-grid>div{background:#fff;border:1px solid #e5ebf3;border-radius:7px;padding:8px;display:flex;flex-direction:column;gap:2px}.import-change-grid strong{font:800 15px Manrope,sans-serif;color:#324b68}.import-change-grid span{font-size:8px;color:#708198;line-height:1.2}.import-change-examples{display:flex;flex-direction:column;gap:3px;margin-top:8px}.import-change-examples span{font-size:9px;color:#5b708a}.import-change-card>p{font-size:9px;color:#73849a;margin-top:8px}

@media(max-width:900px){.forecast-strip{grid-template-columns:1fr 1fr 1fr}.forecast-strip>div:first-child{grid-column:1/-1}.office-contact-editor{grid-template-columns:1fr 1fr}.import-change-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.forecast-strip{grid-template-columns:1fr 1fr;padding:14px}.forecast-strip>div:first-child{grid-column:1/-1}.forecast-stat{padding-left:10px}.next-stop-hero{grid-template-columns:72px 1fr;padding:14px}.next-stop-actions{grid-column:1/-1;justify-content:stretch}.next-stop-actions .button{flex:1}.route-edit-banner{align-items:flex-start;flex-wrap:wrap}.route-edit-banner .button{width:100%}.office-contact-editor{grid-template-columns:1fr}.compact-days{grid-template-columns:repeat(5,1fr)}.import-change-grid{grid-template-columns:repeat(2,1fr)}.provider-quick-actions .button{flex:1 1 42%}.attention-grid{display:grid;grid-template-columns:1fr}.forecast-strip .eyebrow{margin-bottom:1px}}
.device-shortcut-box{margin-top:12px;border:1px solid #dfe7f1;background:#fafcff;border-radius:8px;padding:11px;display:flex;flex-direction:column;gap:4px}.device-shortcut-box strong{font-size:11px;color:#324a66}.device-shortcut-box span{font-size:10px;line-height:1.45;color:#5f728c}.device-shortcut-box small{font-size:9px;color:#8290a2}

/* ============================================================
   Route preference enforcement + inline provider appointments
   ============================================================ */
.route-settings-note {
  border:1px solid #d8e5f6;
  background:#f7faff;
  border-radius:9px;
  padding:11px 12px;
  margin:0 0 14px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.route-settings-note strong { font-size:11px; color:#2f527e; }
.route-settings-note span { font-size:10px; line-height:1.45; color:#60748e; }
.inline-help { margin-top:6px; line-height:1.4; font-weight:500; }
.inactive-setting { opacity:.78; }
.inactive-setting input { background:#f7f8fa; }
.route-limit-strip {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin:-4px 0 14px;
  padding:9px 11px;
  border:1px solid #e0e7f1;
  border-radius:9px;
  background:#fbfcfe;
}
.route-limit-strip > span {
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#72839a;
  margin-right:2px;
}
.route-limit-pill {
  display:grid;
  grid-template-columns:auto auto;
  gap:1px 6px;
  align-items:baseline;
  padding:6px 8px;
  border-radius:7px;
  background:#f1f5fa;
  border:1px solid #e4eaf2;
}
.route-limit-pill small { grid-column:1/-1; font-size:8px; color:#73849a; }
.route-limit-pill strong { font-size:10px; color:#334d6c; }
.route-limit-pill span { font-size:8px; color:#75869b; }
.route-limit-pill.ok { background:#f1faf6; border-color:#d4ebdf; }
.route-limit-pill.ok strong { color:#25725e; }
.route-limit-pill.warning { background:#fff8eb; border-color:#f0d9aa; }
.route-limit-pill.warning strong { color:#9a651d; }
@media(max-width:760px){
  .route-limit-strip{align-items:stretch}
  .route-limit-strip>span{width:100%}
  .route-limit-pill{flex:1 1 42%}
}

/* ============================================================
   Provider restrictions + dismissals + sample inventory + appointment import
   ============================================================ */
.plan-summary.five { grid-template-columns: repeat(5, 1fr); }
.plan-table .table-row { grid-template-columns: 1.4fr .5fr .5fr .58fr .58fr .62fr .78fr .82fr .72fr .9fr .68fr; }
.inline-number-button {
  border:0;
  background:#edf3ff;
  color:#2f63bf;
  border-radius:6px;
  padding:5px 8px;
  font-weight:800;
  cursor:pointer;
}
.dismissed-number { color:#8b6a30; font-weight:800; }
.restriction-badge {
  display:inline-flex;
  align-items:center;
  margin-left:7px;
  padding:3px 6px;
  border-radius:999px;
  background:#fff3db;
  color:#9a651d;
  font-size:8px;
  font-weight:800;
  letter-spacing:.03em;
  vertical-align:middle;
}
.provider-restriction-banner {
  margin:12px 0 2px;
  padding:10px 12px;
  border:1px solid #efd5a1;
  border-radius:9px;
  background:#fff9ed;
  color:#7b5a24;
  display:flex;
  gap:9px;
  align-items:flex-start;
  text-align:left;
  font-size:10px;
  line-height:1.45;
}
.provider-restriction-banner strong { color:#6e4e1d; }
.provider-month-strip.five { grid-template-columns: repeat(5,1fr); }
.access-rule-card {
  border:1px solid #eadcbf;
  background:#fffaf1;
  border-radius:9px;
  padding:13px;
  margin:10px 0 15px;
}
.access-rule-card .form-two { margin-top:9px; }
.button.tiny { min-height:30px; padding:0 9px; font-size:10px; }
.chart-dot.dismissed { background:#c79443; }

.visit-samples-card {
  border:1px solid #dce7f3;
  background:#f8fbff;
  border-radius:9px;
  padding:12px;
  margin:5px 0 14px;
}
.visit-samples-card > div:first-child { display:flex; flex-direction:column; gap:3px; margin-bottom:9px; }
.visit-samples-card > div:first-child strong { font-size:11px; color:#314a67; }
.visit-samples-card > div:first-child span { font-size:9px; color:#708198; }
.sample-give-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.sample-give-grid label { margin:0 !important; }
.sample-give-grid input { margin-top:5px !important; }
.sample-product-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:18px; }
.sample-product-card { min-height:170px; display:flex; flex-direction:column; gap:10px; }
.sample-card-head { display:flex; justify-content:space-between; gap:15px; align-items:flex-start; }
.sample-card-head h2 { margin-top:5px; }
.sample-on-hand { font:800 30px Manrope,sans-serif; color:#285fc4; line-height:1; }
.sample-product-card p { color:#61738b; font-size:10px; line-height:1.5; flex:1; }
.sample-ledger-panel { margin-top:4px; }
.sample-ledger { display:flex; flex-direction:column; }
.sample-ledger-row { display:grid; grid-template-columns:105px minmax(0,1fr) 55px; gap:13px; align-items:center; padding:10px 0; border-bottom:1px solid #edf1f5; }
.sample-ledger-row:last-child { border-bottom:0; }
.sample-ledger-row > div { display:flex; flex-direction:column; gap:2px; }
.sample-ledger-row strong { color:#334b68; font-size:10px; }
.sample-ledger-row span { color:#718198; font-size:9px; }
.sample-ledger-row > b { text-align:right; font:800 16px Manrope,sans-serif; color:#2f5f9f; }

.appointment-import-modal { width:min(900px,100%); }
.appointment-import-help {
  border:1px solid #dae6f5;
  background:#f7faff;
  border-radius:8px;
  padding:10px 12px;
  margin:4px 0 14px;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.appointment-import-help strong { font-size:10px; color:#355474; }
.appointment-import-help span { font-size:9px; line-height:1.45; color:#667b94; }
.appointment-import-actions { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 14px; }
.appointment-preview .import-preview-row { grid-template-columns:1.05fr 1.2fr 1.2fr 1.25fr .75fr; }

@media(max-width:1050px){
  .plan-summary.five { grid-template-columns:repeat(3,1fr); }
  .plan-summary.five div:nth-child(3) { border-right:0; }
  .sample-product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:760px){
  .plan-summary.five { grid-template-columns:1fr; }
  .plan-summary.five div { border-right:0; }
  .provider-month-strip.five { grid-template-columns:repeat(2,1fr); }
  .provider-month-strip.five > div:last-child { grid-column:1/-1; }
  .sample-give-grid,.sample-product-grid { grid-template-columns:1fr; }
  .sample-ledger-row { grid-template-columns:78px minmax(0,1fr) 45px; gap:8px; }
  .appointment-import-modal { width:100%; }
  .appointment-import-actions .button { flex:1 1 100%; }
}

/* ============================================================
   Appointment editing + fast segment rollover + routing v2
   ============================================================ */
.appointment-edit-modal {
  width: min(780px, 96vw);
  max-height: 92vh;
  overflow-y: auto;
}
.appointment-provider-associations {
  margin: 14px 0;
  padding: 14px;
  border: 1px solid #dce5f1;
  border-radius: 10px;
  background: #f8fbff;
}
.appointment-provider-associations > .eyebrow { margin-bottom: 5px; }
.appointment-provider-associations > p {
  color: #60748d;
  font-size: 11px;
  line-height: 1.45;
  margin-bottom: 10px;
}
.appointment-provider-associations > input[type="search"] {
  width: 100%;
  min-height: 38px;
  border: 1px solid #d4deeb;
  border-radius: 7px;
  padding: 0 10px;
  background: #fff;
  margin-bottom: 9px;
}
.appointment-provider-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 7px;
  max-height: 210px;
  overflow-y: auto;
  padding-right: 3px;
}
.appointment-provider-checklist label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 9px 10px;
  border: 1px solid #e1e7f0;
  border-radius: 7px;
  background: #fff;
  cursor: pointer;
}
.appointment-provider-checklist label:hover { border-color: #afc5e4; background: #fbfdff; }
.appointment-provider-checklist input { margin-top: 2px; }
.appointment-provider-checklist span { display:flex; flex-direction:column; gap:2px; min-width:0; }
.appointment-provider-checklist b { color:#324a67; font-size:11px; }
.appointment-provider-checklist small { color:#74869d; font-size:9px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.segment-quick-select {
  width: 100%;
  min-width: 122px;
  min-height: 32px;
  border: 1px solid #d8e1ed;
  border-radius: 6px;
  background: #fff;
  color: #38516d;
  padding: 0 7px;
  font-size: 10px;
  font-weight: 700;
}
.segment-rule-strip {
  display: grid;
  grid-template-columns: minmax(230px,1.5fr) repeat(3,minmax(105px,.55fr));
  gap: 0;
  padding: 0;
  margin-bottom: 14px;
  overflow: hidden;
}
.segment-rule-strip > div {
  padding: 13px 15px;
  border-right: 1px solid var(--line);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:3px;
}
.segment-rule-strip > div:last-child { border-right: 0; }
.segment-rule-strip > div:first-child strong { color:#31475f; font-size:12px; }
.segment-rule-strip > div:first-child span { color:#6b7d93; font-size:10px; }
.segment-rule-strip > div:not(:first-child) { align-items:center; text-align:center; }
.segment-rule-strip > div:not(:first-child) b { color:#62758d; font-size:9px; text-transform:uppercase; letter-spacing:.06em; }
.segment-rule-strip > div:not(:first-child) strong { color:var(--ink); font:800 18px Manrope,sans-serif; }
.segment-rule-strip > div:not(:first-child) span { color:#78899e; font-size:9px; }

.segment-review-modal {
  width: min(900px, 96vw);
  max-height: 92vh;
  overflow-y: auto;
}
.segment-rule-editor {
  display:grid;
  grid-template-columns:minmax(220px,1.7fr) repeat(3,minmax(110px,.55fr));
  gap:10px;
  align-items:end;
  padding:13px;
  border:1px solid #dce5f1;
  background:#f8fbff;
  border-radius:9px;
  margin-bottom:12px;
}
.segment-rule-editor > div { display:flex; flex-direction:column; gap:3px; align-self:center; }
.segment-rule-editor > div strong { font-size:12px; color:#334a65; }
.segment-rule-editor > div span { font-size:10px; color:#71839a; }
.segment-rule-editor label { margin:0; color:#536a84; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.segment-rule-editor input { margin-top:5px; width:100%; min-height:34px; }
.segment-review-search { display:block; margin:0 0 10px; color:#526780; font-size:10px; font-weight:700; }
.segment-review-search input { display:block; margin-top:6px; width:100%; min-height:38px; }
.segment-review-list {
  border:1px solid #e0e7f0;
  border-radius:9px;
  overflow:hidden;
  max-height:52vh;
  overflow-y:auto;
}
.segment-review-row {
  display:grid;
  grid-template-columns:minmax(220px,1.6fr) minmax(170px,.8fr) 90px;
  gap:12px;
  align-items:center;
  min-height:52px;
  padding:8px 12px;
  border-bottom:1px solid #edf1f5;
  background:#fff;
}
.segment-review-row:last-child { border-bottom:0; }
.segment-review-row > div { display:flex; flex-direction:column; gap:2px; min-width:0; }
.segment-review-row > div strong { color:#334a65; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.segment-review-row > div span { color:#7a8b9f; font-size:9px; }
.segment-review-row select { width:100%; min-height:34px; }
.segment-review-row label { margin:0; font-size:9px; color:#657990; font-weight:700; }
.segment-review-row input { margin-top:3px; width:100%; min-height:34px; }

@media (max-width: 760px) {
  .appointment-edit-modal,
  .segment-review-modal { width:100%; max-height:94vh; }
  .appointment-provider-checklist { grid-template-columns:1fr; }
  .segment-rule-strip { grid-template-columns:1fr 1fr 1fr; }
  .segment-rule-strip > div:first-child { grid-column:1 / -1; border-right:0; border-bottom:1px solid var(--line); }
  .segment-rule-strip > div:not(:first-child) { border-top:0; }
  .segment-rule-editor { grid-template-columns:1fr 1fr 1fr; }
  .segment-rule-editor > div { grid-column:1 / -1; }
  .segment-review-row { grid-template-columns:minmax(0,1fr); gap:6px; padding:11px; }
  .segment-review-row > div strong { white-space:normal; }
}


/* MONTHLY PLAN 1-2-3 + UNSCHEDULED DRILLDOWN v1 */
.plan-summary.five > .plan-summary-clickable {
  appearance: none;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  min-width: 0;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease;
}
.plan-summary.five > .plan-summary-clickable:hover {
  background: #f6f9ff;
  box-shadow: inset 0 -3px 0 var(--blue);
}
.plan-summary.five > .plan-summary-clickable span {
  color: #60718a;
  font-size: 11px;
}
.plan-summary.five > .plan-summary-clickable strong {
  color: var(--ink);
  font: 800 22px Manrope, sans-serif;
  margin-top: 5px;
}
.plan-summary.five > .plan-summary-clickable small {
  color: var(--blue);
  font-size: 9px;
  font-weight: 700;
  margin-top: 4px;
}
.unscheduled-provider-modal { width: min(780px, 100%); }
.unscheduled-list {
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
  max-height: min(62vh, 620px);
  overflow-y: auto;
}
.unscheduled-provider-row {
  display: grid;
  grid-template-columns: minmax(220px,1.4fr) minmax(240px,1fr) minmax(100px,.55fr);
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid #edf1f6;
}
.unscheduled-provider-row:last-child { border-bottom: 0; }
.unscheduled-provider-main {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}
.unscheduled-provider-main strong { width: 100%; font-size: 12px; color: #2e435e; }
.unscheduled-provider-main span { font-size: 10px; color: #687b94; }
.unscheduled-provider-stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  color: #64758c;
  font-size: 10px;
}
.unscheduled-provider-stats b { color: #344b67; }
.unscheduled-provider-stats .unscheduled-count,
.unscheduled-provider-stats .unscheduled-count b { color: #a46217; }
.unscheduled-provider-meta {
  color: #687b94;
  font-size: 10px;
  text-align: right;
}
@media (max-width:760px) {
  .plan-summary.five > .plan-summary-clickable {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    min-height: 74px;
  }
  .unscheduled-provider-row {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .unscheduled-provider-meta { text-align: left; }
}


/* APPOINTMENT EDIT COMPACT CHECKBOXES + ROUTING COVERAGE v1 */
.appointment-toggle-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 12px 0 14px;
}
.appointment-edit-modal .appointment-toggle {
  display: grid !important;
  grid-template-columns: 17px minmax(0,1fr);
  align-items: start !important;
  column-gap: 9px !important;
  min-height: 0;
  margin: 0 !important;
  padding: 9px 10px;
  border: 1px solid #dce5f1;
  border-radius: 8px;
  background: #fff;
  line-height: 1.35;
}
.appointment-edit-modal .appointment-toggle.prominent-check {
  background: #f7faff;
  border-color: #d6e3fa;
}
.appointment-edit-modal .appointment-toggle input[type="checkbox"] {
  appearance: auto;
  -webkit-appearance: checkbox;
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  min-height: 15px !important;
  max-width: 15px !important;
  max-height: 15px !important;
  margin: 1px 0 0 !important;
  padding: 0 !important;
  flex: 0 0 15px !important;
}
.appointment-edit-modal .appointment-toggle > span {
  display: block;
  min-width: 0;
  color: #425972;
  font-size: 11px;
  font-weight: 600;
}

.appointment-provider-associations > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 9px;
}
.appointment-provider-associations > div:first-child > strong {
  color: #344a66;
  font-size: 12px;
}
.appointment-provider-associations > div:first-child > span {
  color: #667a93;
  font-size: 10px;
  line-height: 1.4;
}
.appointment-provider-checklist {
  align-items: stretch;
}
.appointment-provider-checklist .appointment-provider-choice,
.appointment-provider-checklist label {
  display: grid !important;
  grid-template-columns: 15px minmax(0,1fr);
  align-items: start !important;
  column-gap: 8px !important;
  min-height: 44px;
  margin: 0 !important;
  padding: 8px 9px !important;
}
.appointment-provider-checklist input[type="checkbox"],
.appointment-provider-checklist .appointment-provider-checkbox {
  appearance: auto;
  -webkit-appearance: checkbox;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  flex: 0 0 14px !important;
}
.appointment-provider-checklist label > span {
  display: flex !important;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  line-height: 1.25;
}
.appointment-provider-checklist label > span > b {
  display: block;
  color: #304761;
  font-size: 11px;
  font-weight: 700;
  white-space: normal;
  overflow-wrap: anywhere;
}
.appointment-provider-checklist label > span > small {
  display: block;
  color: #72849a;
  font-size: 9px;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width:760px) {
  .appointment-provider-checklist {
    grid-template-columns: 1fr;
  }
  .appointment-edit-modal .appointment-toggle {
    grid-template-columns: 16px minmax(0,1fr);
  }
}


/* ============================================================
   PROVIDER LIBRARY + MONTH ROSTER + HOLIDAY/TIME OFF + IPAD
   2026-09-02
   ============================================================ */

/* Provider library / quick-add */
.add-provider-modal { width:min(760px,100%); }
.add-provider-current-month {
  margin: 8px 0 14px !important;
  padding: 12px 13px;
  border:1px solid #dce7f7;
  border-radius:9px;
  background:#f7faff;
}
.add-provider-current-month input[type="checkbox"] {
  width:15px !important;
  height:15px !important;
  min-width:15px !important;
  max-width:15px !important;
  padding:0 !important;
  margin:1px 0 0 !important;
}
.add-provider-current-month > span { line-height:1.4; }
.duplicate-provider-warning {
  margin:10px 0 14px;
  padding:10px 12px;
  border:1px solid #f0d7a7;
  border-radius:8px;
  background:#fff8e9;
  color:#8d641d;
  font-size:11px;
  line-height:1.45;
}
.add-provider-actions { flex-wrap:wrap; }

/* Permanent library month-roster review */
.roster-review-modal { width:min(920px,100%); }
.roster-review-toolbar {
  display:grid;
  grid-template-columns:minmax(240px,1fr) auto auto;
  gap:10px;
  align-items:end;
  margin:12px 0 8px;
}
.roster-review-toolbar .segment-review-search { margin:0; }
.roster-filter-buttons {
  display:flex;
  gap:5px;
  flex-wrap:wrap;
}
.roster-filter-buttons .active {
  border-color:#9dbaf0;
  background:#edf3ff;
  color:#275cc0;
}
.roster-review-row {
  grid-template-columns:28px minmax(220px,1.5fr) minmax(190px,.9fr) 78px !important;
  gap:10px !important;
}
.roster-review-row.not-in-month {
  background:#fafbfc;
  opacity:.68;
}
.roster-include-check {
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 !important;
}
.roster-include-check input[type="checkbox"] {
  appearance:auto;
  -webkit-appearance:checkbox;
  width:15px !important;
  height:15px !important;
  min-width:15px !important;
  max-width:15px !important;
  padding:0 !important;
  margin:0 !important;
}
.roster-provider-copy {
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.roster-provider-copy strong {
  font-size:11px;
  color:#304761;
  white-space:normal;
  overflow-wrap:anywhere;
}
.roster-provider-copy span {
  color:#7b8ba0;
  font-size:9px;
  white-space:normal;
}
.roster-visits {
  margin:0 !important;
  display:flex !important;
  flex-direction:column;
  gap:4px !important;
}
.roster-visits input { min-width:58px; }

/* Holidays + time off */
.legend-dot.timeoff { background:#c78936; }
.legend-dot.holiday { background:#d05858; }
.calendar-pill.timeoff,
.calendar-item-card.timeoff {
  background:#fff4df;
  color:#8d641d;
  border-color:#dfb66f;
}
.calendar-pill.holiday,
.calendar-item-card.holiday {
  background:#fff0f0;
  color:#9b4444;
  border-color:#e0a0a0;
}
.holiday-override-card {
  margin:12px 0 14px;
  padding:11px 12px;
  border:1px solid #e8b1b1;
  border-radius:9px;
  background:#fff5f5;
  color:#814343;
  display:flex;
  flex-direction:column;
  gap:7px;
  font-size:11px;
}
.holiday-override-card > strong { font:700 12px Manrope,sans-serif; }
.holiday-override-card .checkbox-row {
  margin:3px 0 0 !important;
}
.holiday-override-card input[type="checkbox"],
.time-off-all-day input[type="checkbox"] {
  appearance:auto;
  -webkit-appearance:checkbox;
  width:15px !important;
  height:15px !important;
  min-width:15px !important;
  max-width:15px !important;
  padding:0 !important;
  margin:1px 0 0 !important;
}
.time-off-modal { width:min(660px,100%); }
.time-off-all-day {
  margin:5px 0 12px !important;
  padding:10px 11px;
  background:#f8fafc;
  border:1px solid #e3e9f2;
  border-radius:8px;
}
.danger-button {
  border-color:#efc9c9 !important;
  color:#9b4545 !important;
  background:#fffafa !important;
}

/* ------------------------------------------------------------
   iPad / tablet layer.
   Desktop behavior remains above 1180px; phone remains <=760px.
   ------------------------------------------------------------ */
@media (min-width:761px) and (max-width:1180px) {
  /* Compact navigation rail instead of consuming 250px of an iPad screen. */
  .sidebar {
    width:80px !important;
    padding-left:10px;
    padding-right:10px;
  }
  .sidebar .app-name,
  .sidebar .nav-label,
  .sidebar .nav-item span,
  .sidebar .sidebar-tip,
  .sidebar .user-copy,
  .sidebar .admin-badge {
    display:none !important;
  }
  .sidebar .sidebar-top {
    justify-content:center;
    margin-left:0;
    margin-right:0;
  }
  .sidebar .app-logo { justify-content:center; }
  .sidebar .nav-item {
    justify-content:center;
    padding:0;
  }
  .sidebar .nav-item svg { flex:0 0 auto; }
  .sidebar .user-menu { justify-content:center; padding-left:0; padding-right:0; }
  .sidebar .sidebar-collapse { display:none !important; }
  .main-content,
  .main-content.sidebar-collapsed {
    width:calc(100% - 80px) !important;
    margin-left:80px !important;
  }

  .topbar {
    padding:0 20px;
    height:62px;
  }
  .page-content {
    padding:26px 22px 42px;
  }
  .page-heading {
    align-items:flex-start;
    gap:16px;
    margin-bottom:24px;
  }
  .page-heading > div:first-child { min-width:0; }
  .page-heading .heading-actions {
    max-width:55%;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:7px;
  }
  .page-heading .heading-actions .button {
    min-height:36px;
    padding:0 11px;
    font-size:11px;
  }

  /* Dashboard/card grids breathe instead of squeezing. */
  .metrics-grid,
  .dashboard-grid,
  .settings-grid {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  /* Five summary tiles become a readable 3 + 2 layout. */
  .plan-summary.five,
  .provider-month-strip.five {
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
  .plan-summary.five > *,
  .provider-month-strip.five > * {
    min-width:0;
  }

  /* Calendar: full width with legend beneath/alongside rather than a 195px squeeze. */
  .calendar-layout {
    grid-template-columns:1fr !important;
  }
  .calendar-side {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }
  .calendar-toolbar {
    gap:12px;
    flex-wrap:wrap;
  }
  .calendar-toolbar h2 { min-width:180px; }
  .calendar-panel { min-height:0; }

  /* Provider list keeps desktop semantics in landscape but uses tighter columns. */
  .provider-table .table-row {
    grid-template-columns:1.35fr 1fr .72fr .78fr .78fr .62fr;
    column-gap:9px;
    padding-left:12px;
    padding-right:12px;
  }
  .provider-row { font-size:10px; }
  .provider-name { gap:7px; }
  .provider-name strong { font-size:11px; }

  /* Monthly plan table can scroll horizontally in landscape without overlap. */
  .plan-table {
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .plan-table .table-row {
    min-width:920px;
    column-gap:8px;
    padding-left:10px;
    padding-right:10px;
  }

  .modal {
    max-height:calc(100dvh - 28px);
  }
  .provider-edit-modal,
  .appointment-edit-modal,
  .segment-review-modal,
  .add-provider-modal {
    width:min(900px,calc(100vw - 120px));
  }
  .office-contact-editor {
    grid-template-columns:1.15fr .8fr .9fr 1.2fr;
    gap:7px;
  }
}

/* iPad portrait: deliberately use the compact agenda/card treatment. */
@media (min-width:761px) and (max-width:900px) {
  .page-content { padding:22px 18px 38px; }
  .page-heading {
    flex-direction:column;
    align-items:stretch;
  }
  .page-heading .heading-actions {
    max-width:none;
    justify-content:flex-start;
  }

  .plan-summary.five,
  .provider-month-strip.five {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .calendar-side { grid-template-columns:1fr 1fr; }
  .calendar-toolbar {
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
  }
  .calendar-toolbar h2 {
    min-width:0;
    text-align:center;
  }

  /* Provider list becomes two-column tablet cards. */
  .provider-table .table-head { display:none; }
  .provider-table.table { min-width:0; }
  .provider-table .provider-row {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px 14px;
    padding:14px;
  }
  .provider-table .provider-row > span {
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:3px;
  }
  .provider-table .provider-row > span::before {
    content:attr(data-label);
    display:block;
    color:#94a0b1;
    font:700 8px Manrope,sans-serif;
    letter-spacing:.06em;
    text-transform:uppercase;
  }
  .provider-table .provider-row .provider-name {
    grid-column:1 / -1;
    flex-direction:row;
    align-items:center;
  }
  .provider-table .provider-row .provider-name::before { display:none; }
  .provider-name strong {
    white-space:normal;
    overflow:visible;
  }

  /* Monthly Plan rows use compact cards instead of forcing ten columns. */
  .plan-table .table-head { display:none; }
  .plan-table .table-row.plan-row {
    min-width:0 !important;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px 14px;
    padding:14px;
    margin:0;
  }
  .plan-table .plan-row > span {
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
  }
  .plan-table .plan-row > span::before {
    content:attr(data-label);
    display:block;
    color:#94a0b1;
    font:700 8px Manrope,sans-serif;
    letter-spacing:.06em;
    text-transform:uppercase;
  }
  .plan-table .plan-row .provider-name {
    grid-column:1 / -1;
    flex-direction:row;
    align-items:center;
  }
  .plan-table .plan-row .provider-name::before { display:none; }
  .plan-table .plan-row .progress-cell { width:100%; }
  .plan-table .plan-row select { width:100%; }

  .roster-review-toolbar {
    grid-template-columns:1fr;
    align-items:stretch;
  }
  .roster-review-row {
    grid-template-columns:26px minmax(0,1fr) !important;
  }
  .roster-review-row > select,
  .roster-review-row > .roster-visits {
    grid-column:2;
  }
  .segment-rule-editor {
    grid-template-columns:1fr !important;
  }

  .form-three {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .form-three > :last-child:nth-child(odd) { grid-column:1 / -1; }

  .appointment-provider-checklist {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}



/* ============================================================
   ADD PROVIDER DESKTOP + IPAD WATERMARK HOTFIX / 2026-09-02
   ============================================================ */

/* The quick-add form previously nested weekday <label> elements inside
   another <label>, and form-three labels did not inherit the modal field
   layout. Keep the quick form compact but give every field its own space. */
.add-provider-modal {
  width: min(800px, calc(100vw - 48px));
}
.add-provider-modal .modal-head {
  margin-bottom: 20px;
}
.add-provider-modal .modal-head p {
  margin: 5px 0 0;
  max-width: 620px;
  line-height: 1.45;
}
.add-provider-modal .form-two,
.add-provider-modal .form-three {
  gap: 14px;
}
.add-provider-modal .form-two > label,
.add-provider-modal .form-three > label,
.add-provider-modal > label:not(.checkbox-row) {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  margin: 0 0 15px;
  color: #586a82;
  font-weight: 700;
  font-size: 11px;
}
.add-provider-modal .form-two > label input,
.add-provider-modal .form-three > label input,
.add-provider-modal .form-three > label select,
.add-provider-modal > label:not(.checkbox-row) > input,
.add-provider-modal > label:not(.checkbox-row) > select {
  margin: 0;
}
.add-provider-availability {
  margin: 0 0 16px;
}
.add-provider-field-label {
  margin-bottom: 8px;
  color: #586a82;
  font-size: 11px;
  font-weight: 700;
}
.add-provider-modal .compact-days {
  margin-top: 0;
  grid-template-columns: repeat(5, minmax(58px, 72px));
  gap: 7px;
}
.add-provider-modal .compact-days .checkbox-pill {
  margin: 0;
}
.add-provider-current-month {
  position: relative;
  z-index: 0;
  display: grid !important;
  grid-template-columns: 16px minmax(0,1fr);
  align-items: start !important;
  gap: 9px !important;
  margin: 2px 0 14px !important;
}
.add-provider-actions {
  margin-top: 14px;
}

/* The desktop-sized FR watermark does not belong inside the 80px iPad
   navigation rail. The normal FR logo at the top of the rail remains. */
@media (min-width:761px) and (max-width:1180px) {
  .sidebar::after {
    display: none !important;
  }

  .add-provider-modal {
    width: min(780px, calc(100vw - 112px));
  }
}

@media (min-width:761px) and (max-width:900px) {
  .add-provider-modal .form-three {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .add-provider-modal .form-three > label:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .add-provider-modal .compact-days {
    grid-template-columns: repeat(5, minmax(0,1fr));
  }
}

@media (max-width:760px) {
  .add-provider-modal {
    width: 100%;
  }
  .add-provider-modal .form-three {
    grid-template-columns: 1fr;
  }
}


/* Capacity guardrails + working-holiday controls — 2026-09-07 */
.capacity-warning-card {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  margin:-4px 0 18px;
  padding:12px 14px;
  border:1px solid #efd5a1;
  border-radius:10px;
  background:#fff8eb;
  color:#6e542b;
}
.capacity-warning-card > div:nth-child(2){display:flex;flex-direction:column;gap:3px}
.capacity-warning-card strong{font:700 12px Manrope,sans-serif;color:#765221}
.capacity-warning-card span{font-size:10px;line-height:1.45;color:#7b684b}
.planning-priority-select { min-width:108px; font-size:10px; padding:7px 8px; }
.capacity-review-modal { width:min(940px,100%); }
.capacity-review-copy {
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:12px;
  padding:10px 12px;
  border:1px solid #d8e4f4;
  border-radius:9px;
  background:#f5f9ff;
}
.capacity-review-copy strong{font-size:11px;color:#31557e}
.capacity-review-copy span{font-size:10px;line-height:1.45;color:#60748e}
.capacity-review-row { grid-template-columns:minmax(200px,1.35fr) minmax(190px,.9fr) minmax(130px,.65fr) minmax(150px,.75fr); }
.capacity-priority-control { margin:0; gap:4px; }
.capacity-priority-control > span { font-size:8px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#8a98aa; }
.capacity-priority-control select { width:100%; min-width:0; font-size:10px; padding:7px 8px; }
.capacity-review-actions { display:flex; flex-direction:column; align-items:flex-end; gap:6px; color:#687b94; font-size:9px; text-align:right; }
.capacity-skip-note { display:flex; flex-direction:column; gap:3px; margin:0 0 12px; padding:9px 10px; border:1px solid #e2e8f0; border-radius:8px; background:#f8fafc; }
.capacity-skip-note strong{font-size:10px;color:#445a75}.capacity-skip-note span{font-size:9px;line-height:1.4;color:#728198}
.calendar-pill.holiday.working,
.calendar-item-card.holiday.working { background:#eef8f3; color:#28705e; border-color:#9fcfbd; }
.holiday-work-status { display:flex; flex-direction:column; gap:5px; margin:14px 0; padding:11px 12px; border-radius:9px; border:1px solid #e5b0b0; background:#fff5f5; }
.holiday-work-status strong{font:700 12px Manrope,sans-serif;color:#8c4545}.holiday-work-status span{font-size:10px;line-height:1.45;color:#735d5d}
.holiday-work-status.working { border-color:#a9d5c4; background:#f0f9f5; }
.holiday-work-status.working strong{color:#27705d}.holiday-work-status.working span{color:#58766d}
@media(max-width:760px){
  .capacity-warning-card{grid-template-columns:auto minmax(0,1fr)}
  .capacity-warning-card .button{grid-column:1/-1;width:100%}
  .capacity-review-row{grid-template-columns:1fr}
  .capacity-review-actions{align-items:flex-start;text-align:left}
}

/* ===== 2026-09-10 usability / meals / calendar sync patch ===== */
.recurring-provider-card .prominent-check span{display:flex;flex-direction:column;gap:3px}
.recurring-provider-card .prominent-check small{font-weight:400;color:var(--muted,#6c7a90);line-height:1.35}
.recurrence-inline-help{align-self:end;padding:0 0 10px 2px}

.calendar-item-card[draggable="true"],.calendar-pill[draggable="true"]{cursor:grab}
.calendar-item-card[draggable="true"]:active,.calendar-pill[draggable="true"]:active{cursor:grabbing}
.calendar-dragging{opacity:.45}
.calendar-drop-target{outline:2px dashed rgba(38,107,213,.55);outline-offset:-4px;background:rgba(38,107,213,.055)!important}

.microsoft-calendar-card{display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--border,#dbe2ea);border-radius:14px;background:var(--surface-soft,#f7f9fc);min-width:0;overflow:hidden}
.microsoft-calendar-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.microsoft-calendar-head>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.microsoft-calendar-head span:not(.status-pill){font-size:12px;color:var(--muted,#6c7a90)}
.microsoft-calendar-copy{max-width:none!important;margin:0!important}
.calendar-admin-setup{display:flex;flex-direction:column;gap:10px;padding:12px;border:1px solid #e2e8f2;border-radius:10px;background:#fff;min-width:0}
.calendar-admin-step{display:flex;flex-direction:column;gap:4px;min-width:0}
.calendar-admin-step strong{font-size:12px;color:#344b69}
.calendar-admin-step span,.calendar-admin-hint{font-size:11px;line-height:1.5;color:#6d7e94}
.calendar-setup-path{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;padding:8px 9px;border-radius:8px;background:#f6f8fb;min-width:0}
.calendar-setup-path span{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#8390a3;white-space:nowrap}
.microsoft-calendar-card .calendar-setup-path code{display:block;min-width:0;font-size:10px;line-height:1.35;word-break:normal;overflow-wrap:anywhere;white-space:normal;color:#39516f}
.microsoft-calendar-card .save-message{align-items:flex-start;flex-wrap:wrap;line-height:1.45}
.microsoft-ready-message{display:flex!important;flex-direction:column;gap:2px!important}
.microsoft-sync-error{display:block!important;overflow-wrap:anywhere}
.calendar-sync-meta{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted,#6c7a90)}
.calendar-sync-actions{display:flex;gap:8px;flex-wrap:wrap}
.microsoft-calendar-card>small{color:var(--muted,#6c7a90);line-height:1.45}
@media(max-width:560px){.microsoft-calendar-head{flex-direction:column}.calendar-setup-path{grid-template-columns:1fr}.calendar-setup-path span{white-space:normal}.calendar-sync-actions .button{width:100%}}

.meal-tracker-view .meal-summary{margin-bottom:18px}
.meal-table-panel{padding:0;overflow:hidden}
.meal-table-panel .list-toolbar{padding:16px;border-bottom:1px solid var(--border,#dbe2ea);gap:12px}
.meal-table-panel .list-toolbar>select{min-width:165px}
.meal-tracker-row{display:grid;grid-template-columns:72px 1fr;gap:16px;padding:18px;border-bottom:1px solid var(--border,#dbe2ea);background:#fff}
.meal-tracker-row:last-child{border-bottom:0}
.meal-date-block{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:4px;text-transform:uppercase;color:var(--muted,#6c7a90)}
.meal-date-block span{font-size:11px;font-weight:700;letter-spacing:.08em}
.meal-date-block strong{font-size:28px;line-height:1.05;color:var(--text,#1f2d3d)}
.meal-date-block small{font-size:11px}
.meal-main{min-width:0}
.meal-row-title{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:14px}
.meal-row-title>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.meal-row-title strong{font-size:15px}
.meal-row-title span:not(.status-pill){font-size:12px;color:var(--muted,#6c7a90);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meal-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:10px}
.meal-grid .meal-link-field{grid-column:1/-1}
.meal-grid label{font-size:11px;color:var(--muted,#6c7a90);font-weight:700}
.meal-grid input,.meal-grid select{margin-top:5px}
.meal-row-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:12px;flex-wrap:wrap}
.meal-row-actions>span{margin-right:auto;font-size:12px;color:var(--muted,#6c7a90);display:inline-flex;align-items:center;gap:5px}
.status-pill.warning{background:#fff4d6;color:#8a5b00}

@media (max-width:900px){
  .meal-tracker-row{grid-template-columns:52px 1fr;padding:14px;gap:10px}
  .meal-grid{grid-template-columns:1fr}
  .meal-grid .meal-link-field{grid-column:auto}
  .meal-row-title{flex-direction:column}
  .meal-row-actions{justify-content:flex-start}
  .meal-row-actions>span{width:100%;margin-right:0}
  .meal-table-panel .list-toolbar{flex-direction:column;align-items:stretch}
  .meal-table-panel .list-toolbar>select{width:100%}
}


/* ===== 2026-09-10 planner performance + meal workflow polish ===== */
.legend-dot.meal{background:#c9822f}
.calendar-pill.appointment.meal{background:#fff7e8;color:#875616;border-color:#d6a04d}
.calendar-item-card.appointment.meal{background:#fff7e8;border-left-color:#d6a04d}
.calendar-item-card.appointment.meal small{color:#95661f}
.calendar-pill.appointment.meal.meal-ordered,
.calendar-pill.appointment.meal.meal-confirmed{background:#fcebd4;color:#75440f;border-color:#bf7624}
.calendar-item-card.appointment.meal.meal-ordered,
.calendar-item-card.appointment.meal.meal-confirmed{background:#fcebd4;border-left-color:#bf7624;box-shadow:inset 3px 0 0 rgba(191,118,36,.12)}
.status-pill.meal-ordered{background:#fcebd4;color:#75440f}
.meal-cancel-button{color:#9a4c3d;border-color:#e3c1b8;background:#fffaf8}
.meal-cancel-button:hover{background:#fff3ef;border-color:#d8a79b}