/* Smile4Life mobile layout guardrails.
   Loaded last so every screen shares the same viewport, touch and overflow rules. */
html{width:100%;max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%}
body{width:100%;max-width:100%;min-width:0;overflow-x:hidden;overscroll-behavior-x:none}
body>*{min-width:0;max-width:100%}
img,svg,canvas,video,iframe{max-width:100%}
button,.button,input,select,textarea{max-width:100%}
.app,.practice-app,.workspace,#content,.panel,.split,.list,.list-item,.toolbar,.actions,.row,
.section-heading,.task-toolbar,.task-filters,.report-filters,.report-kpis,.rule-grid,
.attendance-page,.attendance-cockpit,.attendance-cockpit-list,.portal-grid,.portal-header,
.booking-shell,.booking-card,.booking-body,.booking-footer,.booking-intro,.return-channel{min-width:0;max-width:100%}
.task-table-wrap,.report-scroll,.hours-table-wrap{max-width:100%;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.list-item>*{min-width:0;overflow-wrap:anywhere}
#privacy-screen{width:100%;max-width:100%}

@media (pointer:coarse){
 button,.button,summary,a.practice-call{min-height:44px}
}

/* Final wizard contrast pass: loaded last so the three non-calendar phases are visibly distinct. */
.practice-app .embedded-wizard .dialog-body{background:#e9f0ed!important;padding:30px 34px 36px!important}
.practice-app .embedded-wizard .dialog-body>p.muted{margin:0 0 22px!important;padding:16px 19px!important;border:2px solid #b9853e!important;border-left:8px solid #b9853e!important;border-radius:3px!important;background:#fffaf0!important;color:#4e5148!important;font-size:14px!important;line-height:1.55!important}
.practice-app .embedded-wizard .treatment-rows{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important;margin:0!important}
.practice-app .embedded-wizard .treatment-row{min-height:100px!important;padding:18px 19px!important;border:3px solid #b7cbc3!important;border-radius:4px!important;background:#fff!important;box-shadow:0 3px 0 #31584d18!important}
.practice-app .embedded-wizard .treatment-row:hover{border-color:#397568!important;background:#f8fcfa!important;transform:translateY(-2px)}
.practice-app .embedded-wizard .treatment-row.selected{border-color:#1b5b4f!important;background:#dcece5!important;box-shadow:inset 8px 0 #1b5b4f,0 7px 18px #183f351c!important}
.practice-app .embedded-wizard .treatment-choice{min-height:58px!important;padding:3px 7px!important;gap:15px!important}
.practice-app .embedded-wizard .treatment-choice strong{color:#123d34!important;font-size:17px!important;font-weight:800!important}
.practice-app .embedded-wizard .treatment-choice small{color:#48675e!important;font-size:12px!important}
.practice-app .embedded-wizard .treatment-choice .swatch{width:14px!important;height:14px!important;border-radius:2px!important;box-shadow:0 0 0 5px #c8ddd4!important}
.practice-app .embedded-wizard .treatment-duration,.practice-app .embedded-wizard .treatment-row>.field{padding:11px 12px!important;border:2px solid #a7c0b6!important;border-radius:3px!important;background:#f4f8f6!important}

.practice-app .embedded-wizard .dialog-body:has(#patient-query){display:grid!important;gap:18px!important}
.practice-app .embedded-wizard .dialog-body:has(#patient-query)>p.muted{margin:0!important;border-color:#397568!important;border-left-color:#397568!important;background:#e0eee8!important;color:#234f45!important}
.practice-app .embedded-wizard .dialog-body:has(#patient-query)>div:not(.row):not(#matches){margin:0!important;padding:20px!important;border:3px solid #397568!important;border-radius:4px!important;background:#fff!important;box-shadow:0 4px 0 #31584d16!important}
.practice-app .embedded-wizard .dialog-body:has(#patient-query) #patient-query{min-height:48px!important;border:2px solid #397568!important;border-radius:3px!important;background:#fbfefc!important;font-size:15px!important}
.practice-app .embedded-wizard .dialog-body:has(#patient-query) #matches{display:grid!important;gap:7px!important;margin:0!important}
.practice-app .embedded-wizard .dialog-body:has(#patient-query) #matches .list-item{min-height:52px!important;border:2px solid #a7c0b6!important;border-radius:3px!important;background:#fff!important}
.practice-app .embedded-wizard .dialog-body:has(#patient-query) .row{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important;margin:0!important;padding:20px!important;border:3px solid #b7cbc3!important;border-radius:4px!important;background:#fff!important}
.practice-app .embedded-wizard .dialog-body:has(#patient-query) .row+.row{grid-template-columns:repeat(2,minmax(0,1fr))!important;border-top:8px solid #d7e6df!important}
.practice-app .embedded-wizard .dialog-body:has(#patient-query) textarea{min-height:96px!important;border:2px solid #a7c0b6!important;background:#fbfefc!important}

.practice-app .embedded-wizard .dialog-body:has(#initials){background:#dfece7!important}
.practice-app .embedded-wizard .dialog-body:has(#initials)>.summary{padding:28px 30px!important;border:3px solid #1b5b4f!important;border-left:10px solid #1b5b4f!important;border-radius:4px!important;background:#fff!important;box-shadow:0 8px 0 #31584d22!important}
.practice-app .embedded-wizard .dialog-body:has(#initials)>.summary small{color:#9a6c2f!important;font-size:11px!important;font-weight:800!important;letter-spacing:.16em!important;text-transform:uppercase!important}
.practice-app .embedded-wizard .dialog-body:has(#initials)>.summary strong{display:block!important;margin-top:7px!important;color:#123d34!important;font-size:25px!important;font-weight:800!important}
.practice-app .embedded-wizard .dialog-body:has(#initials)>.summary p{margin:16px 0 0!important;padding-top:15px!important;border-top:2px solid #d7e6df!important;color:#365b51!important;font-size:13px!important}
.practice-app .embedded-wizard .dialog-body:has(#initials)>:is(.row,.field,.check){margin-top:20px!important;padding:19px 21px!important;border:2px solid #a7c0b6!important;border-radius:4px!important;background:#fff!important}
.practice-app .embedded-wizard .dialog-body:has(#initials) .check{display:flex!important;gap:12px!important;align-items:flex-start!important;color:#234f45!important;font-weight:700!important}
.practice-app .embedded-wizard .dialog-body:has(#initials) .rule-note{margin-top:20px!important;padding:16px 18px!important;border:2px solid #b9853e!important;border-left:8px solid #b9853e!important;border-radius:3px!important;background:#fffaf0!important;color:#594d39!important}

@media(max-width:760px){
 .practice-app .embedded-wizard .dialog-body{padding:20px 15px 25px!important}
 .practice-app .embedded-wizard .treatment-rows{grid-template-columns:1fr!important;gap:10px!important}
 .practice-app .embedded-wizard .treatment-row{min-height:86px!important;padding:14px!important}
 .practice-app .embedded-wizard .treatment-duration,.practice-app .embedded-wizard .treatment-row>.field{border-left:0!important;border-top:2px solid #a7c0b6!important}
 .practice-app .embedded-wizard .dialog-body:has(#patient-query) .row,.practice-app .embedded-wizard .dialog-body:has(#patient-query) .row+.row{grid-template-columns:1fr!important;padding:15px!important}
 .practice-app .embedded-wizard .dialog-body:has(#initials)>.summary{padding:21px 18px!important}
 .practice-app .embedded-wizard .dialog-body:has(#initials)>.summary strong{font-size:21px!important}
}

.mobile-passkey{display:none}
@media(max-width:600px){.mobile-passkey{display:inline-flex;margin-left:auto;white-space:nowrap}}

@media (max-width:760px){
 body{position:relative}
 .workspace{width:100%}
 .top,.section-heading,.toolbar,.task-toolbar{flex-wrap:wrap}
 .top>* ,.section-heading>* ,.toolbar>* ,.task-toolbar>*{min-width:0}
 .top .page-heading{flex:1 1 190px}
 .top .page-description{overflow-wrap:anywhere}
 .actions{max-width:100%;justify-content:flex-start}
 .actions>button,.actions>.button{white-space:normal;text-align:center}
 .tabs,.task-tabs{width:100%;max-width:100%;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
 .tabs>button,.task-tabs>button{flex:0 0 auto;white-space:nowrap}
 .split,.rule-grid{grid-template-columns:minmax(0,1fr)}
 .config-table,.hours-table,.task-table,.heat-table{max-width:none}
 .config-table{min-width:560px}
 .task-table-wrap,.report-scroll,.hours-table-wrap{width:100%}

 dialog{width:calc(100% - 16px);max-width:calc(100% - 16px);height:calc(100dvh - 16px);max-height:calc(100dvh - 16px);margin:auto;border-radius:14px;overflow:hidden}
 dialog[open]{display:flex;flex-direction:column}
 dialog>.dialog-head,dialog>.steps,dialog>.dialog-foot{flex:0 0 auto}
 dialog>.dialog-body,dialog>form{flex:1 1 auto;min-height:0;max-height:none}
 dialog>form:not(.dialog-body){display:flex;flex-direction:column;overflow:hidden}
 dialog>form:not(.dialog-body)>.dialog-body{flex:1 1 auto;height:100%;min-height:0;max-height:none;overflow:auto}
 .dialog-head{gap:12px;padding:14px 16px}
 .dialog-head h2{min-width:0;font-size:1.18rem;overflow-wrap:anywhere}
 .dialog-head #close-modal{flex:0 0 44px;width:44px;height:44px}
 .dialog-body{max-height:none;padding:16px;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
 .dialog-foot{padding:12px 16px;gap:8px;flex-wrap:wrap;justify-content:flex-end}
 .dialog-foot:empty{display:none}
 .dialog-foot>button,.dialog-foot>.button{flex:1 1 150px;white-space:normal}
 .calendar-menu{left:8px!important;right:8px!important;width:auto;max-width:none}
 .month-box{width:min(290px,calc(100vw - 24px));max-width:calc(100vw - 24px);right:0;left:auto}
 .qr-panel{min-height:0;padding:20px 16px}
 .qr-copy h2{font-size:24px}.qr-code{padding:14px}.qr-body img{width:min(100%,300px);height:auto}

 .booking-shell{width:100%;padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
 .booking-brand{gap:12px;align-items:flex-start}.booking-brand .brand{min-width:0}
 .languages{flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end}
 .booking-intro{display:block}.booking-intro p{margin-top:12px}
 .booking-body .row{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
 .booking-body .field{width:100%;min-width:0}
 .channel-select{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .channel-select label{min-width:0;padding:12px;overflow-wrap:anywhere}
 .booking-footer{align-items:stretch;flex-wrap:wrap}
 .booking-footer>button,.booking-footer>.button{flex:1 1 130px;white-space:normal;line-height:1.35}
 .mobile-inputs{width:100%;min-width:0}.mobile-inputs #mobile-number{width:1px;min-width:0}

 .portal-page .employee-app{width:100%;padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
 .portal-header{width:100%}.portal-header .actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
 .portal-header .actions>*{width:100%;min-width:0;white-space:normal}
 .portal-page .list-item{align-items:flex-start;flex-wrap:wrap}
 .portal-page .list-item>.actions{width:100%}
 .portal-page .list-item>.actions>*{flex:1 1 130px}
 .portal-times>.actions{align-items:stretch}.portal-times>.actions>*{flex:1 1 145px;white-space:normal}

 .attendance-cockpit-row{grid-template-columns:minmax(0,1fr)}
 .attendance-cockpit-row>button{width:100%}
 .attendance-page>.task-toolbar>.actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
 .attendance-page>.task-toolbar>.actions>*{width:100%;white-space:normal}
 .attendance-launchers{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:600px){
 .practice-app{width:100%;max-width:100%;overflow:hidden}
 .practice-app .sidebar{width:100%;max-width:100%;padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}
 .practice-app .nav{width:100%;max-width:100%;overflow-x:auto;overflow-y:visible;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
 .practice-app .nav::-webkit-scrollbar{display:none}
 .practice-app .nav-main{flex:0 0 auto}.practice-app .nav-bottom{position:sticky;right:0;flex:0 0 auto;background:var(--nav,#0f172a);padding-left:4px}
 .practice-app .nav button,.practice-app .nav-admin summary{min-width:44px;min-height:44px}
 .practice-app .workspace{width:100%;max-width:100%;min-width:0;padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}
 .practice-app:not(.calendar-page) .top{align-items:center}
 .practice-app:not(.calendar-page) #toggle-sidebar{display:none}
 .practice-app:not(.calendar-page) .page-heading h1{font-size:21px}
 .practice-app:not(.calendar-page) .page-description{font-size:11px}
 .practice-app .nav-admin>div{left:8px;right:8px;top:52px;width:auto;max-width:none}
 .practice-app .nav-admin>div button{display:flex;justify-content:flex-start;gap:10px;padding-inline:14px}
 .practice-app .nav-admin>div button span{display:inline;font-size:12px}

 .calendar-page{width:100%;max-width:100%;height:100dvh;overflow:hidden}
 .calendar-page .workspace{height:auto;min-height:0;flex:1;overflow:hidden}
 .calendar-page #content,.calendar-page .day-planner{width:100%;max-width:100%;min-width:0;overflow:hidden}
 .calendar-page .day-planner{grid-template-rows:auto minmax(0,1fr) 28px}
 .calendar-page .planner-toolbar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:5px;padding:6px 7px}
 .calendar-page #toggle-sidebar{grid-column:1;grid-row:1}
 .calendar-page .planner-date-group{grid-column:2;grid-row:1;width:100%;min-width:0;margin:0;gap:5px}.calendar-page .planner-date{width:auto;min-width:0;margin:0}
 .calendar-page .planner-date-number{flex:0 0 auto;font-size:22px}
 .calendar-page .planner-date-copy{min-width:0;display:flex;align-items:baseline;gap:5px}
 .calendar-page .planner-date-copy>strong,.calendar-page .planner-date-copy>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .calendar-page .planner-navigation{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;min-width:0;gap:5px;order:initial}
 .calendar-page .date-controls{min-width:0}.calendar-page .date-controls button{min-width:36px;padding:4px 7px}
 .calendar-page .today-month{min-width:0}.calendar-page .today-month #today{width:auto;min-width:0;padding:4px 7px;white-space:nowrap}
 .calendar-page #calendar-density,.calendar-page #duty-plan,.calendar-page .resource-chooser>summary{width:100%;min-width:0;max-width:100%;padding:4px 7px;font-size:0;white-space:nowrap}
 .calendar-page .resource-chooser>summary::after{content:"Team";font-size:10px}
 .calendar-page #calendar-density::after{content:"Details";font-size:10px}
 .calendar-page #calendar-density[aria-pressed="true"]::after{content:"Kompakt"}
 .calendar-page #duty-plan::after{content:"Dienst";font-size:10px}
 .calendar-page #new{grid-column:3;grid-row:1;max-width:140px;justify-self:end}
 .calendar-page .resource-chooser{position:static;min-width:0}
 .calendar-page .resource-chooser .planner-team{position:fixed;top:104px;left:8px;right:8px;width:auto;min-width:0;max-width:none}
 .calendar-page .calendar-shell{width:100%;max-width:100%;min-width:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y}
 .calendar-page .calendar{min-width:calc(48px + var(--count)*154px)}
 .calendar-page .cal-head,.calendar-page .grid{grid-template-columns:48px repeat(var(--count),minmax(154px,1fr))}
 .calendar-page .planner-footer{width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;justify-content:flex-start;scrollbar-width:none;padding:4px 7px}
 .calendar-page .planner-purpose{display:none}
 .calendar-page .planner-footer::-webkit-scrollbar{display:none}
 .calendar-page .planner-footer .day-periods{flex:0 0 auto;margin:0}
 .calendar-page .planner-footer .day-periods button{min-height:22px}
 .calendar-page .appointment{touch-action:pan-y}

 .steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;padding:12px 6px}
 .step{min-width:0;font-size:9px;line-height:1.2;overflow-wrap:normal}
 .step b{flex:0 0 24px;width:24px;height:24px}
 .treatment-row{display:grid;grid-template-columns:minmax(0,1fr);gap:4px}
 .treatment-duration{width:100%;min-width:0;padding-left:18px}
 .channel-select{grid-template-columns:minmax(0,1fr)}
 .patient-modes button{min-width:0;padding:8px 6px;white-space:normal}
 .booking-body .slots{grid-template-columns:repeat(2,minmax(0,1fr))}
 .booking-body .slot{min-width:0;overflow-wrap:anywhere}
 .practice-contact>*{width:100%;text-align:center}
 .time-totals{grid-template-columns:minmax(0,1fr)}
 .report-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
 .report-kpis .panel{min-width:0}.report-kpis strong{font-size:28px}
}

/* Phase 2: the responsible employee is part of the slot label, not a second choice. */
.practice-app:not(.calendar-page) .wizard-phase-2 .slot strong{display:inline-flex;align-items:baseline;gap:18px}
.practice-app:not(.calendar-page) .wizard-phase-2 .slot small{display:inline;color:#2f7d67;font-size:14px;font-weight:750;letter-spacing:.04em}

@media (max-width:380px){
 .calendar-page .planner-navigation{grid-template-columns:repeat(3,minmax(0,1fr))}
 .calendar-page .planner-date-copy>span{display:none}
 .calendar-page #new{font-size:0;padding-inline:8px}
 .calendar-page #new::after{content:"Termin";font-size:11px}
 .booking-card .step{font-size:8.5px;white-space:nowrap}
 .booking-card .step:nth-child(3){white-space:normal}
 .booking-body .slots,.report-kpis,.portal-kpis{grid-template-columns:minmax(0,1fr)}
 .booking-footer>button,.booking-footer>.button,.dialog-foot>button,.dialog-foot>.button{flex-basis:100%}
 .portal-header .actions,.attendance-page>.task-toolbar>.actions{grid-template-columns:minmax(0,1fr)}
}

/* Mobile density: roughly ten percent more content without shrinking touch targets. */
@media (max-width:760px){
 :root{font-size:13.5px;--space-3:11px;--space-4:14px;--space-5:18px;--space-6:21px;--space-8:29px}
 body{font-size:13.5px}
 .practice-app{font-size:12.6px}
 .calendar-page{box-sizing:border-box;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
 .practice-app:not(.calendar-page){box-sizing:border-box;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
 .booking-shell{font-size:14.4px}
 .portal-page{font-size:12.6px}
 .workspace{padding:13px}
 .top{margin-bottom:18px}
 .panel{padding:16px;margin-bottom:16px}
 .section-heading{margin-bottom:14px;padding-bottom:10px}
 .task-toolbar{padding:13px 14px;margin-bottom:16px}
 .task-filters,.report-filters{padding:11px;gap:10px;margin-bottom:16px}
 .summary{padding:16px 18px}
 .field{gap:6px;margin-bottom:14px}
 .dialog-head{padding:13px 15px}
 .dialog-body{padding:14px}
 .dialog-foot{padding:11px 15px}
 .booking-shell{padding-top:calc(18px + env(safe-area-inset-top));padding-bottom:calc(22px + env(safe-area-inset-bottom))}
 .booking-brand{margin-bottom:18px}
 .booking-intro{margin-bottom:24px}
 .booking-intro h1{font-size:24px}
 .booking-body{padding:16px}
 .booking-card .steps{padding:14px 9px}
 .booking-footer{padding:13px}
 .portal-page .employee-app{padding-top:calc(24px + env(safe-area-inset-top));padding-left:14px;padding-right:14px;padding-bottom:calc(18px + env(safe-area-inset-bottom))}
 .portal-header{min-height:77px;margin-bottom:18px}
 .portal-page .panel{padding:17px 15px;margin-bottom:20px}
 .portal-kpis{margin-bottom:25px}
 .portal-kpis>div{padding:16px 13px}
 .portal-kpis strong{font-size:24px;margin:13px 0 7px}
 .portal-page .time-current{padding:20px}
 .portal-page .employee-brand+.panel{padding:29px}
}

/* Calendar navigation remains complete and readable on phones. */
@media (max-width:600px){
 .calendar-page .sidebar .nav{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px;overflow:visible}
 .calendar-page .sidebar .nav-main{display:flex;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
 .calendar-page .sidebar .nav-main::-webkit-scrollbar{display:none}
 .calendar-page .sidebar .nav-bottom{position:static;margin:0;padding:0 0 0 4px;border:0;border-left:1px solid rgba(148,163,184,.25)}
 .calendar-page .sidebar .nav-bottom button{width:44px}
 .calendar-page #new{width:auto;max-width:108px;padding-inline:8px;font-size:10px}
 .calendar-page #new::after{display:none;content:none}
 .calendar-page .planner-date-copy>span{display:none}
 .calendar-page #calendar-density,.calendar-page #duty-plan,.calendar-page .resource-chooser>summary{font-size:10px}
 .calendar-page .resource-chooser>summary::after,
 .calendar-page #calendar-density::after,
 .calendar-page #calendar-density[aria-pressed="true"]::after,
 .calendar-page #duty-plan::after{display:none!important;content:none!important}
}

/* The period shortcuts need a real touch target instead of a clipped 22 px control. */
@media (pointer:coarse) and (max-width:760px){
 .calendar-page .day-planner{grid-template-rows:auto minmax(0,1fr) 52px}
 .calendar-page .planner-footer{padding:4px 7px;align-items:center}
 .calendar-page .planner-footer .day-periods button{min-height:44px;padding-inline:12px}
}

/* Mobile period controls remain real touch controls even when the compact calendar fits the viewport. */
@media (pointer:coarse) and (max-width:760px){
 .calendar-page .planner-footer .day-periods{position:relative;z-index:30;pointer-events:auto}
 .calendar-page .planner-footer .day-periods button{position:relative;z-index:31;touch-action:manipulation;cursor:pointer}
 .calendar-page .planner-footer .day-periods button[aria-pressed="true"]{background:#0284c7;color:#fff;border-color:#0284c7;box-shadow:0 2px 6px #0284c733}
 .calendar-page .day-planner.mobile-period-mode .calendar{height:calc(200% - 40px)!important}
 .calendar-page .calendar-shell[data-active-period="afternoon"] .grid{scroll-margin-top:45%}
}

/* A short landscape viewport keeps the whole toolbar on one line. */
@media (min-width:601px) and (max-width:900px) and (max-height:520px){
 .calendar-page .workspace{padding:7px 10px}
 .calendar-page .planner-toolbar{flex-wrap:nowrap;gap:6px}
 .calendar-page .planner-date-group{gap:5px}
 .calendar-page .planner-date-copy>span{display:none}
 .calendar-page .planner-navigation{flex-wrap:nowrap;gap:5px}
 .calendar-page #calendar-density,.calendar-page #duty-plan,.calendar-page .resource-chooser>summary{padding-inline:7px;font-size:11px}
 .calendar-page #new{margin-left:0;padding-inline:8px;font-size:0}
 .calendar-page #new::after{content:"Termin";font-size:11px}
 .calendar-page .sidebar{padding-block:8px;gap:12px}
 .calendar-page .sidebar .session button:first-of-type,
 .calendar-page .sidebar .session small{display:none}
}

/* Sidebar layout guard: the session controls must never occupy the navigation area. */
.practice-app{height:100dvh;min-height:0;overflow:hidden}
.practice-app .sidebar{height:100%;min-height:0;overflow:hidden;display:flex;flex-direction:column}
.practice-app .nav{min-height:0;overflow-y:auto;overflow-x:hidden;flex:1 1 auto;overscroll-behavior:contain}
.practice-app .nav-main{min-height:0}
.practice-app .nav-bottom{flex:0 0 auto}
.practice-app .session{position:relative;z-index:2;flex:0 0 auto;min-height:0;overflow:hidden;background:inherit}
.practice-app .session button{position:relative;z-index:3;width:100%;min-height:42px;white-space:normal;line-height:1.25}
.practice-app .workspace{min-height:0;overflow:auto}
@media(max-width:900px){.practice-app .sidebar{width:100%;}.practice-app{grid-template-columns:78px minmax(0,1fr)}}
@media(max-width:600px){
 .practice-app{height:auto;min-height:100dvh;overflow:visible;display:block}
 .practice-app .sidebar{height:auto;min-height:0;overflow:visible;display:flex;flex-direction:row}
 .practice-app .nav{overflow:visible;flex:1 1 auto}
 .practice-app .session{display:none}
 .practice-app .workspace{overflow:visible}
}

/* Final mobile wizard action bar: always visible, including Phase 1. */
@media(max-width:600px){
 .practice-app:not(.calendar-page) .embedded-wizard{display:flex!important;flex-direction:column!important;position:relative!important;min-height:0!important}
 .practice-app:not(.calendar-page) .embedded-wizard>form[id="wizard-form"]{display:flex!important;flex:1 1 auto!important;flex-direction:column!important;min-height:0!important;overflow:hidden!important}
 .practice-app:not(.calendar-page) .embedded-wizard>form[id="wizard-form"]>.dialog-body{display:block!important;flex:1 1 auto!important;min-height:0!important;max-height:none!important;overflow:auto!important;padding-bottom:12px!important}
 .practice-app:not(.calendar-page) .embedded-wizard>.wizard-actionbar{display:flex!important;align-items:center!important;justify-content:space-between!important;visibility:visible!important;opacity:1!important;position:sticky!important;bottom:0!important;z-index:100!important;flex:0 0 auto!important;min-height:58px!important;margin:0 8px 8px!important;padding:8px!important;background:#fff!important;border:2px solid #215a50!important;border-radius:12px!important;box-shadow:0 -5px 16px rgba(25,54,50,.18)!important}
 .practice-app:not(.calendar-page) .embedded-wizard>.wizard-actionbar>span{display:flex!important;gap:8px!important;min-width:0!important;flex:1 1 auto!important}
 .practice-app:not(.calendar-page) .embedded-wizard>.wizard-actionbar button{display:inline-flex!important;visibility:visible!important;opacity:1!important;align-items:center!important;justify-content:center!important;min-height:42px!important;padding:8px 12px!important;white-space:nowrap!important}
 .practice-app:not(.calendar-page) .embedded-wizard>.wizard-actionbar #forward{flex:1 1 auto!important;min-width:110px!important}
}

/* Phase 01 is a selection board: keep all treatment choices in one viewport. */
.practice-app .embedded-wizard .dialog-body:has(.treatment-rows){padding:18px 24px 20px!important;overflow:hidden!important}
.practice-app .embedded-wizard .dialog-body:has(.treatment-rows)>p.muted{margin:0 0 12px!important;padding:9px 13px!important;font-size:11px!important;line-height:1.35!important}
.practice-app .embedded-wizard .dialog-body:has(.treatment-rows) .treatment-rows{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
.practice-app .embedded-wizard .dialog-body:has(.treatment-rows) .treatment-row{min-height:68px!important;padding:9px 11px!important;border-width:2px!important;box-shadow:0 2px 0 #31584d12!important}
.practice-app .embedded-wizard .dialog-body:has(.treatment-rows) .treatment-choice{min-height:40px!important;gap:9px!important;padding:2px 3px!important}
.practice-app .embedded-wizard .dialog-body:has(.treatment-rows) .treatment-choice strong{font-size:13px!important;line-height:1.15!important}
.practice-app .embedded-wizard .dialog-body:has(.treatment-rows) .treatment-choice small{margin-top:2px!important;font-size:9px!important;line-height:1.2!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important}
.practice-app .embedded-wizard .dialog-body:has(.treatment-rows) .treatment-choice .swatch{width:10px!important;height:10px!important;box-shadow:0 0 0 3px #c8ddd4!important}
.practice-app .embedded-wizard .dialog-body:has(.treatment-rows) .treatment-duration,.practice-app .embedded-wizard .dialog-body:has(.treatment-rows) .treatment-row>.field{padding:5px 7px!important;border-width:1px!important}
.practice-app .embedded-wizard .dialog-body:has(.treatment-rows) .treatment-duration label,.practice-app .embedded-wizard .dialog-body:has(.treatment-rows) .treatment-row>.field label{margin-bottom:2px!important;font-size:8px!important}
.practice-app .embedded-wizard .dialog-body:has(.treatment-rows) .treatment-duration select,.practice-app .embedded-wizard .dialog-body:has(.treatment-rows) .treatment-row>.field select{padding:5px 6px!important;font-size:11px!important}
.practice-app .embedded-wizard:has(.treatment-rows) .dialog-head{padding:14px 24px 10px!important}
.practice-app .embedded-wizard:has(.treatment-rows) .dialog-head h2{font-size:20px!important}
.practice-app .embedded-wizard:has(.treatment-rows)>.steps{padding:12px 24px!important;gap:10px!important}
.practice-app .embedded-wizard:has(.treatment-rows)>.dialog-foot{padding:10px 24px!important}

@media(max-width:900px){
 .practice-app .embedded-wizard .dialog-body:has(.treatment-rows){padding:15px 18px 17px!important}
 .practice-app .embedded-wizard .dialog-body:has(.treatment-rows) .treatment-rows{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:600px){
 .practice-app .embedded-wizard .dialog-body:has(.treatment-rows){overflow:auto!important}
 .practice-app .embedded-wizard .dialog-body:has(.treatment-rows) .treatment-rows{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
 .practice-app .embedded-wizard .dialog-body:has(.treatment-rows) .treatment-row{min-height:63px!important;padding:8px!important}
 .practice-app .embedded-wizard:has(.treatment-rows)>.steps{padding:9px 12px!important}
 .practice-app .embedded-wizard:has(.treatment-rows)>.dialog-foot{padding:9px 12px!important}
}

/* Keep administration and QR navigation in separate vertical regions. */
.practice-app .session>small{display:none!important}
.practice-app .nav{display:flex!important;flex-direction:column!important;min-height:0!important;overflow:hidden!important}
.practice-app .nav-main{display:flex!important;flex-direction:column!important;flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;padding-bottom:8px!important}
.practice-app .nav-bottom{display:block!important;flex:0 0 auto!important;margin-top:0!important;padding-top:12px!important;border-top:1px solid rgba(148,163,184,.28)!important;background:inherit!important}
.practice-app .nav-bottom button{display:flex!important;width:100%!important;position:relative!important;z-index:4!important}
.practice-app .nav-admin{flex:0 0 auto!important}
.practice-app .nav-admin>div{position:relative!important;z-index:3!important}
@media(max-width:600px){
 .practice-app .nav{display:flex!important;flex-direction:row!important;overflow:visible!important}
 .practice-app .nav-main{display:flex!important;flex-direction:row!important;flex:1 1 auto!important;overflow-x:auto!important;overflow-y:visible!important;padding-bottom:0!important}
 .practice-app .nav-bottom{margin:0!important;padding:0 0 0 4px!important;border-top:0!important;border-left:1px solid rgba(148,163,184,.28)!important}
}

/* All four wizard phases use the available viewport instead of growing below it. */
.practice-app .embedded-wizard{height:calc(100dvh - 112px);max-height:calc(100dvh - 112px);min-height:0;display:flex;flex-direction:column;overflow:hidden}
.practice-app .embedded-wizard>.dialog-head,.practice-app .embedded-wizard>.steps,.practice-app .embedded-wizard>.dialog-foot{flex:0 0 auto}
.practice-app .embedded-wizard>form#-wizard-form,.practice-app .embedded-wizard>form[id="wizard-form"]{display:flex;flex:1 1 auto;min-height:0;overflow:hidden}
.practice-app .embedded-wizard>form[id="wizard-form"]>.dialog-body{flex:1 1 auto;min-height:0;max-height:none;overflow:auto}
.practice-app .embedded-wizard .dialog-foot{position:relative;bottom:auto}

/* Phase 03 fits the contact form without wasting vertical space. */
.practice-app .embedded-wizard .dialog-body:has(#patient-query){padding:14px 20px 16px!important;gap:10px!important;overflow:hidden!important}
.practice-app .embedded-wizard .dialog-body:has(#patient-query)>p.muted{padding:9px 12px!important;font-size:11px!important}
.practice-app .embedded-wizard .dialog-body:has(#patient-query)>div:not(.row):not(#matches){padding:11px 14px!important}
.practice-app .embedded-wizard .dialog-body:has(#patient-query) #patient-query{min-height:38px!important;padding:8px 10px!important;font-size:13px!important}
.practice-app .embedded-wizard .dialog-body:has(#patient-query) #matches{gap:4px!important}
.practice-app .embedded-wizard .dialog-body:has(#patient-query) #matches .list-item{min-height:38px!important;padding:8px 10px!important}
.practice-app .embedded-wizard .dialog-body:has(#patient-query) .row{gap:9px!important;padding:11px 13px!important}
.practice-app .embedded-wizard .dialog-body:has(#patient-query) .field{gap:4px!important;margin-bottom:6px!important}
.practice-app .embedded-wizard .dialog-body:has(#patient-query) input,.practice-app .embedded-wizard .dialog-body:has(#patient-query) select{padding:8px 9px!important}
.practice-app .embedded-wizard .dialog-body:has(#patient-query) textarea{min-height:54px!important}

/* Phase 04 fits the confirmation and responsible employee selection in one view. */
.practice-app .embedded-wizard .dialog-body:has(#initials){padding:18px 24px 20px!important;overflow:hidden!important}
.practice-app .embedded-wizard .dialog-body:has(#initials)>.summary{padding:17px 20px!important;margin:0 0 10px!important}
.practice-app .embedded-wizard .dialog-body:has(#initials)>.summary strong{font-size:20px!important}
.practice-app .embedded-wizard .dialog-body:has(#initials)>.summary p{margin:8px 0 0!important;padding-top:8px!important;font-size:11px!important}
.practice-app .embedded-wizard .dialog-body:has(#initials)>:is(.row,.field,.check){margin-top:10px!important;padding:11px 14px!important}
.practice-app .embedded-wizard .dialog-body:has(#initials) .field{gap:4px!important;margin-bottom:5px!important}
.practice-app .embedded-wizard .dialog-body:has(#initials) select{padding:8px 9px!important}
.practice-app .embedded-wizard .dialog-body:has(#initials) .rule-note{margin-top:10px!important;padding:10px 12px!important;font-size:11px!important}

@media(max-height:800px) and (min-width:601px){
 .practice-app .embedded-wizard{height:calc(100dvh - 86px);max-height:calc(100dvh - 86px)}
 .practice-app .embedded-wizard>.dialog-head{padding-block:9px!important}
 .practice-app .embedded-wizard>.dialog-head h2{font-size:18px!important}
 .practice-app .embedded-wizard>.steps{padding-block:8px!important}
 .practice-app .embedded-wizard>.dialog-foot{padding-block:7px!important}
}
@media(max-width:600px){
 .practice-app .embedded-wizard{height:calc(100dvh - 78px);max-height:calc(100dvh - 78px);width:100%;border-radius:10px}
 .practice-app .embedded-wizard .dialog-body:has(#patient-query),.practice-app .embedded-wizard .dialog-body:has(#initials){overflow:auto!important}
 .practice-app .embedded-wizard>form[id="wizard-form"]>.dialog-body{padding-inline:12px!important}
}

/* Phase 03 also appears without a patient search field for an already selected patient. */
.practice-app .embedded-wizard .dialog-body:has(#p-first-name){padding:14px 20px 16px!important;gap:10px!important;overflow:hidden!important}
.practice-app .embedded-wizard .dialog-body:has(#p-first-name)>p.muted{padding:9px 12px!important;margin:0!important;font-size:11px!important}
.practice-app .embedded-wizard .dialog-body:has(#p-first-name) .row{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:9px!important;margin:0!important;padding:11px 13px!important;border:2px solid #b7cbc3!important;border-radius:4px!important;background:#fff!important}
.practice-app .embedded-wizard .dialog-body:has(#p-first-name) .row+.row{grid-template-columns:repeat(2,minmax(0,1fr))!important;border-top:6px solid #d7e6df!important}
.practice-app .embedded-wizard .dialog-body:has(#p-first-name) .field{gap:4px!important;margin-bottom:5px!important}
.practice-app .embedded-wizard .dialog-body:has(#p-first-name) input,.practice-app .embedded-wizard .dialog-body:has(#p-first-name) select{padding:8px 9px!important}
.practice-app .embedded-wizard .dialog-body:has(#p-first-name) textarea{min-height:54px!important}
.practice-app .embedded-wizard .dialog-body:has(#p-first-name)>small{font-size:10px!important}
@media(max-width:600px){
 .practice-app .embedded-wizard .dialog-body:has(#p-first-name){overflow:auto!important;padding-inline:12px!important}
 .practice-app .embedded-wizard .dialog-body:has(#p-first-name) .row,.practice-app .embedded-wizard .dialog-body:has(#p-first-name) .row+.row{grid-template-columns:1fr!important;padding:10px!important}
}

/* Final mobile layout contract. Keep the calendar and primary actions inside the viewport. */
@media(max-width:600px){
 .practice-app{width:100%!important;max-width:100%!important;min-height:100dvh!important}
 .calendar-page{display:flex!important;flex-direction:column!important;width:100%!important;height:100dvh!important;min-height:100dvh!important;overflow:hidden!important}
 .calendar-page .sidebar{flex:0 0 auto!important;height:auto!important;min-height:0!important}
 .calendar-page .workspace{display:grid!important;flex:1 1 auto!important;width:100%!important;height:auto!important;min-height:0!important;overflow:hidden!important;grid-template-rows:minmax(0,1fr)!important;gap:0!important;padding:4px 6px!important}
 .calendar-page #content{height:100%!important;min-height:0!important;overflow:hidden!important}
 .calendar-page .day-planner{display:grid!important;width:100%!important;height:100%!important;min-height:0!important;overflow:hidden!important;grid-template-columns:1fr!important;grid-template-rows:auto auto minmax(0,1fr) auto!important}
 .calendar-page .planner-toolbar{grid-column:1!important;grid-row:1!important;min-width:0!important;min-height:45px!important;overflow:visible!important}
 .calendar-page .planner-toolbar{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto auto auto!important;align-items:center!important}
 .calendar-page .planner-date-group{grid-column:1!important;grid-row:1!important}
 .calendar-page .calendar-patient-search{display:block!important;grid-column:1!important;grid-row:2!important;order:initial!important;width:100%!important;min-width:0!important;margin:0!important}
 .calendar-page .planner-navigation{grid-column:1!important;grid-row:3!important}
 .calendar-page .planner-week{display:none!important}
 .calendar-page .planner-team{grid-column:1!important;grid-row:2!important;min-width:0!important;min-height:28px!important;overflow:visible!important}
 .calendar-page .calendar-shell{display:block!important;visibility:visible!important;grid-column:1!important;grid-row:3!important;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:auto!important}
 .calendar-page .planner-footer{grid-column:1!important;grid-row:4!important;min-width:0!important;min-height:24px!important;overflow:hidden!important}
 .calendar-page .calendar{display:flex!important;visibility:visible!important;min-width:calc(52px + var(--count)*165px)!important;height:100%!important}

 /* The period shortcuts must remain fully exposed and touchable on phones.
    The compact footer rule above used a 24px clipped row, which cut into the
    44px touch targets and made Vormittag/Nachmittag appear unresponsive. */
 .calendar-page .planner-footer{display:flex!important;align-items:center!important;min-height:52px!important;height:52px!important;overflow:visible!important;padding:4px 7px!important;position:relative!important;z-index:20!important}
 .calendar-page .planner-footer .day-periods{display:flex!important;align-items:center!important;gap:5px!important;min-width:max-content!important;position:relative!important;z-index:21!important;pointer-events:auto!important}
 .calendar-page .planner-footer .day-periods button{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:44px!important;height:44px!important;padding:8px 12px!important;position:relative!important;z-index:22!important;pointer-events:auto!important;touch-action:manipulation!important}


 .practice-app:not(.calendar-page){display:block!important;width:100%!important;height:100dvh!important;min-height:100dvh!important;overflow:hidden!important}
 .practice-app:not(.calendar-page) .workspace{width:100%!important;height:100%!important;min-height:0!important;overflow:hidden!important;padding:6px 8px!important}
 .practice-app:not(.calendar-page) .top{min-height:32px!important;margin:0 0 4px!important}
 .practice-app:not(.calendar-page) .embedded-wizard{width:100%!important;height:calc(100dvh - 52px)!important;max-height:calc(100dvh - 52px)!important;min-height:0!important;overflow:hidden!important}
 .practice-app:not(.calendar-page) .embedded-wizard>form[id="wizard-form"]{min-height:0!important;overflow:hidden!important}
 .practice-app:not(.calendar-page) .embedded-wizard>form[id="wizard-form"]>.dialog-body{min-height:0!important;max-height:none!important;overflow:auto!important;padding:8px 10px!important}
 .practice-app:not(.calendar-page) .embedded-wizard .dialog-foot{position:relative!important;flex:0 0 auto!important;margin:0 8px 8px!important;min-height:50px!important;padding:7px 9px!important}
 .practice-app:not(.calendar-page) .embedded-wizard .dialog-foot button{min-height:38px!important;padding:8px 10px!important}
 .practice-app:not(.calendar-page) .wizard-phase-2{min-height:0!important}
 .practice-app:not(.calendar-page) .wizard-phase-2>#slots{display:flex!important;flex-direction:column!important;width:100%!important;height:auto!important;min-height:0!important;overflow:visible!important;gap:10px!important}
 .practice-app:not(.calendar-page) .wizard-phase-2 .phase2-calendar{flex:0 0 auto!important;width:100%!important}
 .practice-app:not(.calendar-page) .wizard-phase-2 .phase2-times{flex:0 0 auto!important;width:100%!important;min-height:0!important;overflow:visible!important}
 .practice-app:not(.calendar-page) .wizard-phase-2 .internal-day-calendar{display:block!important;visibility:visible!important;width:100%!important}
 .practice-app:not(.calendar-page) .wizard-phase-2 .slot-days{max-height:none!important;height:auto!important;overflow:visible!important}
 .practice-app:not(.calendar-page) .wizard-phase-1 .treatment-rows{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important}
 .practice-app:not(.calendar-page) .wizard-phase-1 .treatment-row{min-height:0!important;padding:7px!important}
 .practice-app:not(.calendar-page) .wizard-phase-3,.practice-app:not(.calendar-page) .wizard-phase-4{min-height:0!important;height:auto!important;overflow:visible!important}
 .practice-app:not(.calendar-page) .embedded-wizard:has(.treatment-rows){display:flex!important;flex-direction:column!important}
 .practice-app:not(.calendar-page) .embedded-wizard:has(.treatment-rows)>form[id="wizard-form"]{flex:1 1 auto!important;min-height:0!important}
 .practice-app:not(.calendar-page) .embedded-wizard:has(.treatment-rows)>.dialog-foot{display:flex!important;visibility:visible!important;position:relative!important;z-index:20!important;flex:0 0 auto!important;min-height:52px!important;margin:0 8px 8px!important;background:#fff!important}
 .practice-app:not(.calendar-page) .embedded-wizard:has(.treatment-rows)>.dialog-foot #forward{display:inline-flex!important;visibility:visible!important;opacity:1!important;align-items:center!important;justify-content:center!important}
}


.practice-app .patient-search-empty{margin:0;padding:10px 12px;border:1px dashed #a7c0b6;border-radius:6px;background:#f7fbf9;font-size:11px;line-height:1.4}
.practice-app #matches .list-item{width:100%;text-align:left}
.practice-app #matches .list-item>span:first-child{min-width:0;overflow:hidden}
.practice-app #matches .list-item strong,.practice-app #matches .list-item small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Last override: keep wizard actions reachable after every earlier responsive rule. */
@media(max-width:600px){
 .practice-app:not(.calendar-page) .embedded-wizard{display:flex!important;flex-direction:column!important;position:relative!important;min-height:0!important}
 .practice-app:not(.calendar-page) .embedded-wizard>form[id="wizard-form"]{display:flex!important;flex:1 1 auto!important;flex-direction:column!important;min-height:0!important;overflow:hidden!important}
 .practice-app:not(.calendar-page) .embedded-wizard>form[id="wizard-form"]>.dialog-body{display:block!important;flex:1 1 auto!important;min-height:0!important;max-height:none!important;overflow:auto!important;padding-bottom:12px!important}
 .practice-app:not(.calendar-page) .embedded-wizard>.wizard-actionbar{display:flex!important;align-items:center!important;justify-content:space-between!important;visibility:visible!important;opacity:1!important;position:sticky!important;bottom:0!important;z-index:100!important;flex:0 0 auto!important;min-height:58px!important;margin:0 8px 8px!important;padding:8px!important;background:#fff!important;border:2px solid #215a50!important;border-radius:12px!important;box-shadow:0 -5px 16px rgba(25,54,50,.18)!important}
 .practice-app:not(.calendar-page) .embedded-wizard>.wizard-actionbar>span{display:flex!important;gap:8px!important;min-width:0!important;flex:1 1 auto!important}
 .practice-app:not(.calendar-page) .embedded-wizard>.wizard-actionbar button{display:inline-flex!important;visibility:visible!important;opacity:1!important;align-items:center!important;justify-content:center!important;min-height:42px!important;padding:8px 12px!important;white-space:nowrap!important}
 .practice-app:not(.calendar-page) .embedded-wizard>.wizard-actionbar #forward{display:inline-flex!important;flex:1 1 auto!important;min-width:110px!important}
 .practice-app:not(.calendar-page) .embedded-wizard>form[id="wizard-form"]>.dialog-body{padding-bottom:88px!important}
 .practice-app:not(.calendar-page) .embedded-wizard>.wizard-actionbar{position:fixed!important;left:8px!important;right:8px!important;bottom:max(76px,calc(16px + env(safe-area-inset-bottom)))!important;width:auto!important;margin:0!important}
 .practice-app:not(.calendar-page) .embedded-wizard.wizard-step-2>.wizard-actionbar,
 .practice-app:not(.calendar-page) .embedded-wizard.wizard-step-3>.wizard-actionbar,
 .practice-app:not(.calendar-page) .embedded-wizard.wizard-step-4>.wizard-actionbar{position:fixed!important;left:8px!important;right:8px!important;bottom:max(76px,calc(16px + env(safe-area-inset-bottom)))!important;width:auto!important;margin:0!important}
 .practice-app:not(.calendar-page) .embedded-wizard.wizard-step-2>form[id="wizard-form"]>.dialog-body,
 .practice-app:not(.calendar-page) .embedded-wizard.wizard-step-3>form[id="wizard-form"]>.dialog-body,
 .practice-app:not(.calendar-page) .embedded-wizard.wizard-step-4>form[id="wizard-form"]>.dialog-body{padding-bottom:118px!important}
}

/* Final correction: wizard actions belong to the document flow, never over the content. */
@media(max-width:600px){
 .practice-app:not(.calendar-page) .embedded-wizard{display:block!important;height:calc(100dvh - 52px)!important;max-height:none!important;overflow:auto!important}
 .practice-app:not(.calendar-page) .embedded-wizard>form[id="wizard-form"]{display:contents!important;overflow:visible!important}
 .practice-app:not(.calendar-page) .embedded-wizard>form[id="wizard-form"]>.dialog-body{display:block!important;max-height:none!important;min-height:0!important;overflow:visible!important;padding-bottom:12px!important}
 .practice-app:not(.calendar-page) .embedded-wizard>.wizard-actionbar,
 .practice-app:not(.calendar-page) .embedded-wizard.wizard-step-2>.wizard-actionbar,
 .practice-app:not(.calendar-page) .embedded-wizard.wizard-step-3>.wizard-actionbar,
 .practice-app:not(.calendar-page) .embedded-wizard.wizard-step-4>.wizard-actionbar{display:flex!important;position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;width:auto!important;min-height:58px!important;margin:12px 8px 16px!important;padding:8px!important}
}

/* Stable phase layout: scroll only the content, keep actions in their own row. */
@media(max-width:600px){
 .practice-app:not(.calendar-page) .embedded-wizard{display:flex!important;flex-direction:column!important;height:calc(100dvh - 52px)!important;max-height:calc(100dvh - 52px)!important;overflow:hidden!important}
 .practice-app:not(.calendar-page) .embedded-wizard>form[id="wizard-form"]{display:flex!important;flex:1 1 auto!important;flex-direction:column!important;min-height:0!important;overflow:hidden!important}
 .practice-app:not(.calendar-page) .embedded-wizard>form[id="wizard-form"]>.dialog-body{display:block!important;flex:1 1 auto!important;min-height:0!important;max-height:none!important;overflow:auto!important;padding-bottom:12px!important}
 .practice-app:not(.calendar-page) .embedded-wizard>.wizard-actionbar{display:flex!important;position:relative!important;inset:auto!important;flex:0 0 auto!important;width:auto!important;min-height:58px!important;margin:8px 8px 12px!important;padding:8px!important}
 .practice-app:not(.calendar-page) .embedded-wizard>form[id="wizard-form"]>.wizard-actionbar{display:flex!important;position:relative!important;inset:auto!important;flex:0 0 auto!important;width:auto!important;min-height:58px!important;margin:8px 8px 12px!important;padding:8px!important}
 .practice-app:not(.calendar-page) .embedded-wizard.wizard-step-1>form[id="wizard-form"]>.dialog-body{overflow:hidden!important;padding:6px 8px!important}
 .practice-app:not(.calendar-page) .embedded-wizard.wizard-step-1 .dialog-body>p.muted{margin:0 0 5px!important;padding:6px 8px!important;font-size:10px!important;line-height:1.2!important}
 .practice-app:not(.calendar-page) .embedded-wizard.wizard-step-1 .treatment-rows{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:4px!important;margin:4px 0!important}
 .practice-app:not(.calendar-page) .embedded-wizard.wizard-step-1 .treatment-row{min-height:48px!important;padding:4px!important;gap:3px!important;border-width:1px!important}
 .practice-app:not(.calendar-page) .embedded-wizard.wizard-step-1 .treatment-choice{min-height:34px!important;padding:2px!important;gap:6px!important}
 .practice-app:not(.calendar-page) .embedded-wizard.wizard-step-1 .treatment-choice strong{font-size:11px!important;line-height:1.1!important}
 .practice-app:not(.calendar-page) .embedded-wizard.wizard-step-1 .treatment-choice small{margin-top:2px!important;font-size:8px!important;line-height:1.1!important}
 .practice-app:not(.calendar-page) .embedded-wizard.wizard-step-1 .treatment-duration,.practice-app:not(.calendar-page) .embedded-wizard.wizard-step-1 .treatment-row>.field{padding:3px 4px!important}
 .practice-app:not(.calendar-page) .embedded-wizard.wizard-step-1 .treatment-duration label,.practice-app:not(.calendar-page) .embedded-wizard.wizard-step-1 .treatment-row>.field label{font-size:7px!important}
 .practice-app:not(.calendar-page) .embedded-wizard.wizard-step-1 .treatment-duration select,.practice-app:not(.calendar-page) .embedded-wizard.wizard-step-1 .treatment-row>.field select{padding:3px 4px!important;font-size:9px!important}
 .practice-app:not(.calendar-page) .embedded-wizard .phase-actions{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;margin:10px 0 2px!important;padding:8px!important;border:2px solid #215a50!important;border-radius:10px!important;background:#fff!important;box-shadow:0 2px 0 rgba(33,90,80,.16)!important}
 .practice-app:not(.calendar-page) .embedded-wizard .phase-actions>span{display:flex!important;gap:6px!important;min-width:0!important}
 .practice-app:not(.calendar-page) .embedded-wizard .phase-actions button{display:inline-flex!important;visibility:visible!important;opacity:1!important;align-items:center!important;justify-content:center!important;min-height:42px!important;padding:8px 12px!important;white-space:nowrap!important}
 .practice-app:not(.calendar-page) .embedded-wizard .phase-actions #forward{flex:1 1 auto!important;min-width:110px!important}
 .practice-app:not(.calendar-page) .embedded-wizard.wizard-step-3 .wizard-phase-3>#matches{display:grid!important;position:relative!important;z-index:5!important;max-height:180px!important;overflow-y:auto!important;overflow-x:hidden!important;padding:0!important;margin:0!important;background:#fff!important}
 .practice-app:not(.calendar-page) .embedded-wizard.wizard-step-3 .wizard-phase-3>#matches .list-item{display:flex!important;visibility:visible!important;min-height:46px!important;width:100%!important;padding:9px 10px!important}
}

/* Phase 3 mobile: the patient suggestions must keep their own layout row.
   The previous grid layout could collapse #matches to 0px even though the
   filtered buttons had been rendered successfully. */
@media(max-width:600px){
 .practice-app:not(.calendar-page) .embedded-wizard.wizard-step-3 .wizard-phase-3{
   display:flex!important;
   flex-direction:column!important;
   align-items:stretch!important;
   gap:8px!important;
 }
 .practice-app:not(.calendar-page) .embedded-wizard.wizard-step-3 .wizard-phase-3>#matches{
   display:grid!important;
   flex:0 0 auto!important;
   width:100%!important;
   min-height:46px!important;
   height:auto!important;
   max-height:180px!important;
   overflow-y:auto!important;
   overflow-x:hidden!important;
 }
}

/* Final escape hatch for the wizard viewport.  body.wizard-view previously
   forced the workspace to 100dvh with overflow:hidden, so Phase 2 and later
   were visibly cut off even when their own elements allowed scrolling. */
body.wizard-view .practice-app:not(.calendar-page) .workspace{
 height:100dvh!important;
 min-height:0!important;
 overflow-y:auto!important;
 overflow-x:hidden!important;
 -webkit-overflow-scrolling:touch!important;
}
body.wizard-view .practice-app:not(.calendar-page) .embedded-wizard{
 height:auto!important;
 max-height:none!important;
 min-height:calc(100dvh - 112px)!important;
 overflow:visible!important;
}
body.wizard-view .practice-app:not(.calendar-page) .embedded-wizard>form[id="wizard-form"]{
 display:block!important;
 min-height:0!important;
 overflow:visible!important;
}
body.wizard-view .practice-app:not(.calendar-page) .embedded-wizard>form[id="wizard-form"]>.dialog-body{
 display:block!important;
 height:auto!important;
 min-height:0!important;
 max-height:none!important;
 overflow:visible!important;
}
body.wizard-view .practice-app:not(.calendar-page) .embedded-wizard .wizard-actionbar{
 position:sticky!important;
 bottom:0!important;
 z-index:20!important;
}

@media(max-width:600px){
 body.wizard-view .practice-app:not(.calendar-page) .workspace{
   height:100dvh!important;
   overflow-y:auto!important;
 }
 body.wizard-view .practice-app:not(.calendar-page) .embedded-wizard{
   min-height:0!important;
 }
 body.wizard-view .practice-app:not(.calendar-page) .embedded-wizard .wizard-actionbar{
   position:relative!important;
   bottom:auto!important;
 }
}

/* Windows/desktop contract: the workspace owns scrolling; wizard content must
   not be trapped in a fixed-height overflow box. The previous cascade had
   several competing height/overflow overrides, which made Edge/Chrome lose
   the scroll chain while the footer was pushed below the viewport. */
@media (min-width:601px){
 .practice-app{height:100vh;height:100dvh;overflow:hidden}
 .practice-app .workspace{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
 .practice-app:not(.calendar-page) .embedded-wizard{height:auto;max-height:none;min-height:calc(100vh - 112px);min-height:calc(100dvh - 112px);overflow:visible}
 .practice-app:not(.calendar-page) .embedded-wizard>form[id="wizard-form"]{min-height:0;overflow:visible}
 .practice-app:not(.calendar-page) .embedded-wizard>form[id="wizard-form"]>.dialog-body{max-height:none;overflow:visible}
 .practice-app:not(.calendar-page) .embedded-wizard .dialog-foot{position:sticky;bottom:0;z-index:8;background:var(--paper,#fbfaf7);box-shadow:0 -8px 18px rgba(25,54,50,.08)}
 .calendar-page .workspace{min-height:0;overflow:auto}
}

/* Phase 2+ scroll ownership: the outer workspace/dialog body must be able to
   scroll the complete phase.  Do not trap the time grid in a hidden overflow
   box; that made the page stop responding as soon as Phase 2 was opened. */
@media (min-width:601px){
 .practice-app:not(.calendar-page) .embedded-wizard.wizard-step-2,
 .practice-app:not(.calendar-page) .embedded-wizard.wizard-step-3,
 .practice-app:not(.calendar-page) .embedded-wizard.wizard-step-4,
 .practice-app:not(.calendar-page) .embedded-wizard.wizard-step-2>form[id="wizard-form"],
 .practice-app:not(.calendar-page) .embedded-wizard.wizard-step-3>form[id="wizard-form"],
 .practice-app:not(.calendar-page) .embedded-wizard.wizard-step-4>form[id="wizard-form"],
 .practice-app:not(.calendar-page) .embedded-wizard.wizard-step-2>form[id="wizard-form"]>.dialog-body,
 .practice-app:not(.calendar-page) .embedded-wizard.wizard-step-3>form[id="wizard-form"]>.dialog-body,
 .practice-app:not(.calendar-page) .embedded-wizard.wizard-step-4>form[id="wizard-form"]>.dialog-body,
 .practice-app:not(.calendar-page) .wizard-phase-2,
 .practice-app:not(.calendar-page) .wizard-phase-3,
 .practice-app:not(.calendar-page) .wizard-phase-4,
 .practice-app:not(.calendar-page) .wizard-phase-2>#slots,
 .practice-app:not(.calendar-page) .wizard-phase-2 .phase2-times,
 .practice-app:not(.calendar-page) .wizard-phase-2 .slot-days{
   height:auto!important;
   min-height:0!important;
   max-height:none!important;
   overflow:visible!important;
 }
}

@media (max-width:600px){
 .practice-app:not(.calendar-page) .embedded-wizard.wizard-step-2>form[id="wizard-form"]>.dialog-body,
 .practice-app:not(.calendar-page) .embedded-wizard.wizard-step-3>form[id="wizard-form"]>.dialog-body,
 .practice-app:not(.calendar-page) .embedded-wizard.wizard-step-4>form[id="wizard-form"]>.dialog-body{
   flex:1 1 auto!important;
   min-height:0!important;
   max-height:none!important;
   overflow-y:auto!important;
   overflow-x:hidden!important;
   -webkit-overflow-scrolling:touch!important;
   touch-action:pan-y!important;
 }
 .practice-app:not(.calendar-page) .wizard-phase-2,
 .practice-app:not(.calendar-page) .wizard-phase-3,
 .practice-app:not(.calendar-page) .wizard-phase-4,
 .practice-app:not(.calendar-page) .wizard-phase-2>#slots,
 .practice-app:not(.calendar-page) .wizard-phase-2 .phase2-times,
 .practice-app:not(.calendar-page) .wizard-phase-2 .slot-days{
   height:auto!important;
   min-height:0!important;
   max-height:none!important;
   overflow:visible!important;
 }
}

/* Mobile browsers: prevent automatic focus zoom and keep the phase footer inside the viewport. */
@media (max-width:600px){
 html,body{width:100%;max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
 .practice-app:not(.calendar-page),
 .practice-app:not(.calendar-page) .workspace,
 .practice-app:not(.calendar-page) .embedded-wizard,
 .practice-app:not(.calendar-page) #wizard-form,
 .practice-app:not(.calendar-page) .wizard-phase{width:100%!important;max-width:100%!important;min-width:0!important}
 .practice-app:not(.calendar-page) .embedded-wizard .dialog-body,
 .practice-app:not(.calendar-page) .embedded-wizard .dialog-body>*{max-width:100%;min-width:0;overflow-wrap:anywhere}
 .practice-app:not(.calendar-page) .embedded-wizard input:not([type="checkbox"]):not([type="color"]),
 .practice-app:not(.calendar-page) .embedded-wizard select,
 .practice-app:not(.calendar-page) .embedded-wizard textarea{font-size:16px!important}
 .practice-app:not(.calendar-page) .embedded-wizard.wizard-step-1 .treatment-duration select,
 .practice-app:not(.calendar-page) .embedded-wizard.wizard-step-1 .treatment-row>.field select{font-size:16px!important}
 .practice-app:not(.calendar-page) .embedded-wizard .phase-actions{display:grid!important;grid-template-columns:1fr!important;align-items:stretch!important;width:100%!important;min-width:0!important;gap:8px!important;margin:10px 0 2px!important;padding:8px!important}
 .practice-app:not(.calendar-page) .embedded-wizard .phase-actions>span{display:grid!important;grid-template-columns:1fr!important;width:100%!important;min-width:0!important;gap:8px!important}
 .practice-app:not(.calendar-page) .embedded-wizard .phase-actions>span:has(#add-appointment){grid-template-columns:minmax(0,1fr) minmax(0,2fr)!important}
 .practice-app:not(.calendar-page) .embedded-wizard .phase-actions button,
 .practice-app:not(.calendar-page) .embedded-wizard .phase-actions #forward{width:100%!important;min-width:0!important;max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere!important}
}

/* Phase 2: the responsible employee is part of the slot label, not a second choice. */
.practice-app:not(.calendar-page) .wizard-phase-2 .slot{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;align-items:baseline!important;column-gap:18px!important}
.practice-app:not(.calendar-page) .wizard-phase-2 .slot strong{display:block!important;font-size:14px!important;line-height:1.2!important}
.practice-app:not(.calendar-page) .wizard-phase-2 .slot small{display:block!important;color:#2f7d67;font-size:14px!important;font-weight:750;letter-spacing:.04em;line-height:1.2!important}

/* Phase 2: subtle zebra rhythm improves scanability without competing with status colors. */
.practice-app:not(.calendar-page) .wizard-phase-2 .slot:not(.slot-priority):nth-child(even){background:#f1f4f3!important}
.practice-app:not(.calendar-page) .wizard-phase-2 .slot:not(.slot-priority):nth-child(even):hover{background:#e8f1ed!important}
.practice-app:not(.calendar-page) .wizard-phase-2 .slot.slot-resource-gk:not(.slot-priority):not(.selected){background:#fff!important}
.practice-app:not(.calendar-page) .wizard-phase-2 .slot.slot-resource-gm:not(.slot-priority):not(.selected){background:#f1f4f3!important}
.practice-app:not(.calendar-page) .wizard-phase-2 .slot.slot-resource-gm:not(.slot-priority):not(.selected):hover{background:#e8f1ed!important}

/* Employee-specific tile colors: deliberately scoped to the tile itself so the rule also works in embedded views. */
.wizard-phase-2 .slot.slot-resource-gk:not(.slot-priority):not(.selected){background:#fff!important}
.wizard-phase-2 .slot.slot-resource-gm:not(.slot-priority):not(.selected){background:#d8ecdf!important}
.wizard-phase-2 .slot.slot-resource-gm:not(.slot-priority):not(.selected):hover{background:#c8e2d2!important}

/* Keep the active month visibly centered between the two calendar controls. */
.editorial-availability .internal-calendar-toolbar{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;align-items:center!important;gap:6px!important}
.editorial-availability .internal-calendar-toolbar strong{display:block!important;min-width:120px!important;color:#173d35!important;text-align:center!important;font-size:19px!important;font-weight:700!important;white-space:nowrap!important}
.editorial-availability .internal-calendar-toolbar button{width:106px!important;min-width:106px!important;padding-inline:8px!important;text-align:center!important}
@media (max-width:560px){.editorial-availability .internal-calendar-toolbar{gap:4px!important}.editorial-availability .internal-calendar-toolbar button{width:84px!important;min-width:84px!important;padding-inline:4px!important;font-size:11px!important}.editorial-availability .internal-calendar-toolbar strong{min-width:0!important;font-size:15px!important}}

/* Give the patient recall blocks clearer breathing room without changing other panels. */
.patient-record>.section-heading{margin-top:30px!important;padding-top:8px!important}
.patient-record>.section-heading:first-of-type{margin-top:34px!important}

/* Patient record tabs need their own scroll container inside the modal. */
dialog[open]>.dialog-body.patient-record{flex:1 1 auto!important;min-height:0!important;max-height:none!important;overflow:auto!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important}

/* Phase 3 patient matches: keep the complete result row visible and clickable.
   Earlier compact wizard rules limited the list to roughly two rows and allowed
   the following form block to visually cover the remaining suggestions. */
.practice-app:not(.calendar-page) .wizard-phase-3>#matches{
 display:grid!important;
 gap:8px!important;
 width:100%!important;
 min-height:0!important;
 max-height:300px!important;
 overflow-y:auto!important;
 overflow-x:hidden!important;
 margin:0!important;
 padding:0!important;
 position:relative!important;
 z-index:20!important;
 background:transparent!important;
}
.practice-app:not(.calendar-page) .wizard-phase-3>#matches .patient-match{
 display:flex!important;
 align-items:center!important;
 justify-content:space-between!important;
 gap:18px!important;
 width:100%!important;
 min-height:64px!important;
 padding:12px 14px!important;
 border:2px solid #a7c0b6!important;
 border-radius:6px!important;
 background:#fff!important;
 text-align:left!important;
 cursor:pointer!important;
}
.practice-app:not(.calendar-page) .wizard-phase-3>#matches .patient-match:hover,
.practice-app:not(.calendar-page) .wizard-phase-3>#matches .patient-match:focus-visible{
 border-color:#397568!important;
 background:#f1f8f4!important;
 outline:3px solid #39756833!important;
 outline-offset:1px!important;
}
.practice-app:not(.calendar-page) .wizard-phase-3>#matches .patient-match>span:first-child{
 flex:1 1 auto!important;
 min-width:0!important;
 overflow:visible!important;
}
.practice-app:not(.calendar-page) .wizard-phase-3>#matches .patient-match strong,
.practice-app:not(.calendar-page) .wizard-phase-3>#matches .patient-match small{
 display:block!important;
 overflow:visible!important;
 text-overflow:clip!important;
 white-space:normal!important;
}
.practice-app:not(.calendar-page) .wizard-phase-3>#matches .patient-match strong{margin-bottom:5px!important;color:#173d35!important;font-size:15px!important}
.practice-app:not(.calendar-page) .wizard-phase-3>#matches .patient-match small{color:#526d63!important;font-size:12px!important;line-height:1.35!important}
.practice-app:not(.calendar-page) .wizard-phase-3>#matches .patient-match .pill{flex:0 0 auto!important;white-space:nowrap!important}

@media(max-width:600px){
 .practice-app:not(.calendar-page) .wizard-phase-3>#matches{max-height:240px!important;gap:6px!important}
 .practice-app:not(.calendar-page) .wizard-phase-3>#matches .patient-match{min-height:58px!important;padding:10px 11px!important;gap:10px!important}
 .practice-app:not(.calendar-page) .wizard-phase-3>#matches .patient-match strong{font-size:14px!important}
 .practice-app:not(.calendar-page) .wizard-phase-3>#matches .patient-match small{font-size:11px!important}
 .practice-app:not(.calendar-page) .wizard-phase-3>#matches .patient-match .pill{font-size:10px!important}
}
.patient-created-meta{display:block;margin-top:5px;font:500 12px/1.35 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;letter-spacing:0;color:var(--muted)}

/* Final booking layout contract: compact phases, clear grouping, controlled fallback scroll. */
.practice-app:not(.calendar-page) .embedded-wizard{width:min(1180px,100%);height:calc(100dvh - 32px);max-height:calc(100dvh - 32px);margin:0 auto;display:flex;flex-direction:column;overflow:hidden}
.practice-app:not(.calendar-page) .embedded-wizard>.dialog-head,.practice-app:not(.calendar-page) .embedded-wizard>.steps,.practice-app:not(.calendar-page) .embedded-wizard>.wizard-actionbar{flex:0 0 auto}
.practice-app:not(.calendar-page) .embedded-wizard>form[id="wizard-form"]{display:flex;flex:1 1 auto;min-height:0;overflow:hidden}
.practice-app:not(.calendar-page) .embedded-wizard>form[id="wizard-form"]>.dialog-body{flex:1 1 auto;min-height:0;max-height:none;overflow:auto;padding:18px 24px 20px}
.practice-app:not(.calendar-page) .embedded-wizard .wizard-phase{min-width:0}
.practice-app:not(.calendar-page) .embedded-wizard .wizard-phase-1,.practice-app:not(.calendar-page) .embedded-wizard .wizard-phase-2,.practice-app:not(.calendar-page) .embedded-wizard .wizard-phase-3,.practice-app:not(.calendar-page) .embedded-wizard .wizard-phase-4{padding:14px 16px 16px;border-radius:10px}
.practice-app:not(.calendar-page) .embedded-wizard .wizard-phase-1{border:1px solid #c8ddd4;border-left:6px solid #397568;background:#f1f8f4}
.practice-app:not(.calendar-page) .embedded-wizard .wizard-phase-2{border:1px solid #e2d3ae;border-left:6px solid #c5a065;background:#fffaf1}
.practice-app:not(.calendar-page) .embedded-wizard .wizard-phase-3{border:1px solid #c8d9e3;border-left:6px solid #397c93;background:#f3f8fa}
.practice-app:not(.calendar-page) .embedded-wizard .wizard-phase-4{border:1px solid #d5cce1;border-left:6px solid #806b9a;background:#f8f5fb}
.practice-app:not(.calendar-page) .embedded-wizard .phase-section-heading{margin-bottom:9px;padding-bottom:7px;border-bottom:1px solid currentColor}
.practice-app:not(.calendar-page) .wizard-phase-1 .treatment-rows{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:8px 0 0}
.practice-app:not(.calendar-page) .wizard-phase-1 .treatment-row{min-height:64px;padding:9px 10px;border-radius:8px}
.practice-app:not(.calendar-page) .wizard-phase-2>#slots{grid-template-columns:minmax(275px,.82fr) minmax(0,1.18fr);gap:14px;margin-top:10px}
.practice-app:not(.calendar-page) .wizard-phase-2 .internal-day-calendar{padding:11px;border-radius:9px}
.practice-app:not(.calendar-page) .wizard-phase-2 .internal-calendar-day{min-height:38px;padding:4px 2px}
.practice-app:not(.calendar-page) .wizard-phase-2 .slot-days{max-height:calc(100dvh - 285px);overflow:auto;padding-right:3px;gap:8px}
.practice-app:not(.calendar-page) .wizard-phase-2 .slot-period{margin-top:8px;padding:8px 9px 9px}
.practice-app:not(.calendar-page) .wizard-phase-2 .slot-day .slots{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.practice-app:not(.calendar-page) .wizard-phase-2 .slot-day .slot{min-height:38px;padding:4px 6px}
.practice-app:not(.calendar-page) .wizard-phase-3{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
.practice-app:not(.calendar-page) .wizard-phase-3>.phase3-intro,.practice-app:not(.calendar-page) .wizard-phase-3>.phase-actions,.practice-app:not(.calendar-page) .wizard-phase-3>.error{grid-column:1/-1}
.practice-app:not(.calendar-page) .wizard-phase-3 .phase3-section{margin:0;padding:11px 12px;border:1px solid #c5d9e2;border-radius:8px;background:#fff}
.practice-app:not(.calendar-page) .wizard-phase-3 .phase3-search{grid-column:1;grid-row:2}.practice-app:not(.calendar-page) .wizard-phase-3 .phase3-data{grid-column:2;grid-row:2}.practice-app:not(.calendar-page) .wizard-phase-3 .phase3-note{grid-column:1;grid-row:3}.practice-app:not(.calendar-page) .wizard-phase-3 .phase3-hints{grid-column:2;grid-row:3}
.practice-app:not(.calendar-page) .wizard-phase-3 .phase3-section .row{gap:8px;margin:0;padding:0;border:0;background:transparent}
.practice-app:not(.calendar-page) .wizard-phase-3 .phase3-section .field{margin-bottom:7px}.practice-app:not(.calendar-page) .wizard-phase-3 textarea{min-height:66px}.practice-app:not(.calendar-page) .wizard-phase-3>#matches{max-height:150px;overflow:auto}
.practice-app:not(.calendar-page) .wizard-phase-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}.practice-app:not(.calendar-page) .wizard-phase-4>.phase4-summary,.practice-app:not(.calendar-page) .wizard-phase-4>.phase-actions,.practice-app:not(.calendar-page) .wizard-phase-4>.error{grid-column:1/-1}.practice-app:not(.calendar-page) .wizard-phase-4>.phase4-section{margin:0;padding:11px 12px;border:1px solid #d7cfe2;border-radius:8px;background:#fff}.practice-app:not(.calendar-page) .wizard-phase-4>.phase4-management{grid-column:2}.practice-app:not(.calendar-page) .wizard-phase-4>.phase4-communication{grid-column:1}.practice-app:not(.calendar-page) .wizard-phase-4>.phase4-summary .summary{margin:0;padding:14px 16px}
@media(max-width:820px){.practice-app:not(.calendar-page) .wizard-phase-1 .treatment-rows{grid-template-columns:repeat(2,minmax(0,1fr))}.practice-app:not(.calendar-page) .wizard-phase-2>#slots{grid-template-columns:1fr}.practice-app:not(.calendar-page) .wizard-phase-2 .slot-days{max-height:none;overflow:visible}}
@media(max-width:600px){.practice-app:not(.calendar-page) .embedded-wizard{height:calc(100dvh - 16px);max-height:calc(100dvh - 16px);border-radius:10px}.practice-app:not(.calendar-page) .embedded-wizard>form[id="wizard-form"]>.dialog-body{padding:10px}.practice-app:not(.calendar-page) .embedded-wizard .wizard-phase{padding:10px;min-height:0}.practice-app:not(.calendar-page) .wizard-phase-1 .treatment-rows{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:6px 0 0}.practice-app:not(.calendar-page) .wizard-phase-1 .treatment-row{min-width:0;min-height:58px;padding:7px}.practice-app:not(.calendar-page) .wizard-phase-1 .treatment-choice{min-width:0}.practice-app:not(.calendar-page) .wizard-phase-1 .treatment-choice strong,.practice-app:not(.calendar-page) .wizard-phase-1 .treatment-choice small{overflow-wrap:anywhere}.practice-app:not(.calendar-page) .wizard-phase-3,.practice-app:not(.calendar-page) .wizard-phase-4{display:grid;grid-template-columns:1fr;gap:8px}.practice-app:not(.calendar-page) .wizard-phase-3 .phase3-search,.practice-app:not(.calendar-page) .wizard-phase-3 .phase3-data,.practice-app:not(.calendar-page) .wizard-phase-3 .phase3-note,.practice-app:not(.calendar-page) .wizard-phase-3 .phase3-hints,.practice-app:not(.calendar-page) .wizard-phase-4>.phase4-communication,.practice-app:not(.calendar-page) .wizard-phase-4>.phase4-management{grid-column:1;grid-row:auto}.practice-app:not(.calendar-page) .wizard-phase-3>#matches{max-height:190px}.practice-app:not(.calendar-page) .wizard-phase-2 .slot-day .slots{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Final mobile calendar geometry: keep the practice identity and navigation compact,
   then give the calendar the remaining viewport. This override intentionally comes
   last because earlier desktop and mobile rules otherwise compete on height/flex. */
@media(max-width:600px){
 .calendar-page .sidebar{
  display:flex!important;flex:0 0 auto!important;flex-direction:column!important;
  width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;
  padding:4px 8px!important;gap:4px!important;overflow:visible!important;
  background:#0f172a!important;color:#fff!important;border-color:#0f172a!important
 }
 .calendar-page .sidebar .brand{display:block!important;flex:0 0 auto!important;padding:0 4px!important;font-size:18px!important;line-height:1.05!important}
 .calendar-page .sidebar .brand small{display:block!important;margin-top:4px!important;font-size:7px!important;letter-spacing:1.5px!important}
 .calendar-page .sidebar .nav{
  display:flex!important;flex:0 0 auto!important;flex-direction:row!important;
  width:100%!important;height:44px!important;min-height:44px!important;overflow:visible!important
 }
 .calendar-page .sidebar .nav-main{
  display:flex!important;flex:1 1 auto!important;flex-direction:row!important;align-items:stretch!important;
  min-width:0!important;height:44px!important;overflow-x:auto!important;overflow-y:visible!important
 }
 .calendar-page .sidebar .nav-main>button{flex:1 1 0!important;min-width:44px!important;height:44px!important}
 .calendar-page .sidebar .nav-bottom{display:flex!important;flex:0 0 auto!important;width:44px!important;height:44px!important;padding:0!important;margin:0!important;border:0!important}
 .calendar-page .sidebar .nav-bottom>button{width:44px!important;height:44px!important;min-height:44px!important;padding:8px!important}
 .calendar-page .workspace{flex:1 1 auto!important;min-height:0!important;height:auto!important;overflow:hidden!important}
}

/* Some iOS in-app browsers report a desktop CSS width while still rendering a
   touch viewport. Use the interaction model as an additional mobile signal. */
@media (max-width:700px) and (pointer:coarse), (max-width:700px) and (hover:none){
 .practice-app.view-calendar .sidebar{
  display:flex!important;flex:0 0 auto!important;flex-direction:column!important;
  width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;
  padding:4px 8px!important;gap:4px!important;overflow:visible!important;
  background:#0f172a!important;color:#fff!important;border-color:#0f172a!important
 }
 .practice-app.view-calendar .sidebar .brand{display:block!important;flex:0 0 auto!important;padding:0 4px!important}
 .practice-app.view-calendar .sidebar .nav{
  display:flex!important;flex:0 0 auto!important;flex-direction:row!important;
  width:100%!important;height:44px!important;min-height:44px!important;overflow:visible!important
 }
 .practice-app.view-calendar .sidebar .nav-main{
  display:flex!important;flex:1 1 auto!important;flex-direction:row!important;align-items:stretch!important;
  min-width:0!important;height:44px!important;overflow-x:auto!important;overflow-y:visible!important
 }
 .practice-app.view-calendar .sidebar .nav-main>button{flex:1 1 0!important;min-width:44px!important;height:44px!important}
 .practice-app.view-calendar .sidebar .nav-bottom{display:flex!important;flex:0 0 auto!important;width:44px!important;height:44px!important;padding:0!important;margin:0!important;border:0!important}
 .practice-app.view-calendar .sidebar .nav-bottom>button{width:44px!important;height:44px!important;min-height:44px!important;padding:8px!important}
 .practice-app.view-calendar .workspace{flex:1 1 auto!important;min-height:0!important;height:auto!important;overflow:hidden!important}
}

/* Hard mobile fallback for browsers that expose neither a reliable breakpoint
   nor a reliable pointer capability. The calendar page is identified by the
   visible practice app itself; no desktop sidebar may consume the viewport. */
@media (max-width:700px){
 .practice-app.view-calendar .sidebar{
  display:flex!important;flex:0 0 auto!important;flex-direction:column!important;
  width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;
  padding:4px 8px!important;gap:4px!important;overflow:visible!important;
  justify-content:flex-start!important;background:#0f172a!important;color:#fff!important
 }
 .practice-app.view-calendar .sidebar .brand{display:block!important;flex:0 0 auto!important;padding:0 4px!important}
 .practice-app.view-calendar .sidebar .nav{
  display:flex!important;flex:0 0 auto!important;flex-direction:row!important;
  width:100%!important;height:44px!important;min-height:44px!important;overflow:visible!important
 }
 .practice-app.view-calendar .sidebar .nav-main{
  display:flex!important;flex:1 1 auto!important;flex-direction:row!important;align-items:stretch!important;
  min-width:0!important;height:44px!important;overflow-x:auto!important;overflow-y:visible!important
 }
 .practice-app.view-calendar .sidebar .nav-main>button{flex:1 1 0!important;min-width:44px!important;height:44px!important}
 .practice-app.view-calendar .sidebar .nav-bottom{display:flex!important;flex:0 0 auto!important;width:44px!important;height:44px!important;padding:0!important;margin:0!important;border:0!important}
 .practice-app.view-calendar .sidebar .nav-bottom>button{width:44px!important;height:44px!important;min-height:44px!important;padding:8px!important}
}

/* Absolute mobile calendar shell: the sidebar must not participate in the
   workspace height calculation. This prevents legacy flex-height rules from
   pushing the calendar far below the navigation on iOS. */
@media (max-width:700px){
 body #app .practice-app.view-calendar{
  position:relative!important;display:block!important;width:100%!important;height:100dvh!important;
  min-height:100dvh!important;overflow:hidden!important
 }
 body #app .practice-app.view-calendar>aside.sidebar{
  position:absolute!important;top:0!important;left:0!important;right:0!important;
  z-index:50!important;width:100%!important;height:auto!important;min-height:0!important;
  max-height:none!important;overflow:visible!important
 }
 body #app .practice-app.view-calendar>main.workspace{
  display:block!important;width:100%!important;height:100dvh!important;min-height:0!important;
  overflow:hidden!important;padding-top:104px!important
 }
 body #app .practice-app.view-calendar .workspace #content{
  height:calc(100dvh - 104px)!important;min-height:0!important;overflow:hidden!important
 }
}

/* Mobile navigation pages must own their vertical scroll. The calendar keeps
   its fixed viewport shell above, and the booking wizard keeps its dialog
   scrolling behaviour. */
@media (max-width:700px), (orientation:portrait) and (max-height:1000px){
 body #app .practice-app:not(.calendar-page):not(:has(.embedded-wizard)){
  height:auto!important;min-height:100dvh!important;overflow:visible!important
 }
 body #app .practice-app:not(.calendar-page):not(:has(.embedded-wizard)) .workspace{
  height:auto!important;min-height:100dvh!important;overflow-y:auto!important;
  overflow-x:hidden!important;-webkit-overflow-scrolling:touch!important;
  overscroll-behavior-y:contain!important;padding-bottom:24px!important
 }
 body #app .practice-app:not(.calendar-page):not(:has(.embedded-wizard)) #content{
  height:auto!important;min-height:calc(100dvh - 90px)!important;overflow:visible!important
 }
}