/* Compact month and week layouts; business fields and status colours stay in the cards. */
.month-weeks-4{--month-weeks:4}
.month-weeks-5{--month-weeks:5}
.month-weeks-6{--month-weeks:6}
.month-layout{grid-template-columns:184px minmax(0,1fr);gap:6px;align-items:start}
.month-layout>.queue{padding:5px;max-height:calc(100vh - 205px);max-height:calc(100dvh - 205px);border-radius:7px}
.month-scroll{border-radius:7px;max-height:calc(100vh - 205px);max-height:calc(100dvh - 205px);scroll-padding-top:24px;scrollbar-gutter:stable}
.month-board{min-width:700px;align-items:stretch}
.month-weekday{position:sticky;top:0;z-index:2;padding:4px 3px;font-size:11px;line-height:16px}
.month-day{min-height:64px;padding:3px;min-width:0}
.month-day-head{min-height:20px;margin-bottom:2px;gap:3px;font-size:11px;line-height:16px}
.month-day-head .count{padding:1px 4px;font-size:9px;line-height:13px}
.month-day-head button{padding:0 4px;min-height:20px;min-width:22px;line-height:18px}
.month-deliveries{max-height:166px;max-height:clamp(166px,calc((100dvh - 205px)/var(--month-weeks,5) - 26px),248px);overflow:auto;scroll-padding:2px}
.card.compact-card.month-card{padding:3px 4px;margin-bottom:3px;border-radius:4px}
.month-card .card-top{margin-bottom:1px;gap:2px;font-size:9px;line-height:10px;flex-wrap:nowrap}
.month-card .card-top>span{margin-top:0}
.month-card .card-top .pill{font-size:8px;line-height:10px;padding:1px 2px;max-width:78px}
.month-card .needs-info{padding:1px 2px;font-size:8px;line-height:10px}
.month-card .card-heading,.card.scheduled-card.month-card .card-heading{margin:0 0 1px}
.card.compact-card.month-card .card-heading h3{font-size:11px;line-height:12px;margin:0;font-weight:700}
.month-card .card-assignment,.scheduled-card.month-card .card-assignment{font-size:10px;line-height:12px;gap:4px}
.card.compact-card.month-card .compact-line{font-size:10px;line-height:11px;margin:0}
.month-card .card-bottom{margin-top:2px;padding-top:2px;font-size:9px;line-height:11px}
.month-card .card-bottom time{line-height:11px}
.card.compact-card.month-card .ready-flag{width:15px;height:15px;top:-3px;right:-2px;font-size:10px;border-width:1px}
.queue .card.compact-card{padding:4px 5px;margin-bottom:4px;border-radius:5px}
.queue .compact-card .card-heading{margin:1px 0}
.queue .compact-card .card-top{margin-bottom:1px;line-height:11px}
.queue .compact-card .compact-line{line-height:12px}
.queue .compact-card .card-bottom{margin-top:2px;padding-top:2px;line-height:11px}
#app[data-current-view=calendar] .col-head{margin-bottom:4px;padding:1px 2px 4px;font-size:11px}
#app[data-current-view=calendar] .col-head small{margin-top:1px;font-size:9px}
#app[data-current-view=calendar] .queue-action{padding:4px 6px;margin-bottom:5px;font-size:10px;min-height:25px}
#app[data-current-view=calendar] .column-add{padding:4px 5px;font-size:10px;margin-top:3px;min-height:25px}
#app[data-current-view=calendar] .empty{padding:8px 3px;font-size:10px;line-height:1.4}
#app[data-current-view=calendar] .legend{padding:5px 0;gap:6px 12px;font-size:10px;line-height:14px}
#app[data-current-view=calendar] .portal-footer{margin-top:6px;padding-top:6px}
@media(min-width:901px){
 #app>aside{width:200px}
 #app main{padding:16px 18px 12px}
 #app[data-current-view=calendar] main{padding:10px 12px 10px}
 #app[data-current-view=calendar] main>header{margin-bottom:5px;gap:8px}
 #app[data-current-view=calendar] main>header h1{font-size:22px;margin:2px 0;line-height:1.15}
 #app[data-current-view=calendar] .eyebrow{font-size:9px;line-height:13px}
 #app[data-current-view=calendar] header p{font-size:11px;line-height:14px}
 #app[data-current-view=calendar] .header-actions{gap:8px}
 #app[data-current-view=calendar] .header-actions button{padding:6px 9px;min-height:30px;font-size:12px}
 #app[data-current-view=calendar] .demo-banner{margin-bottom:5px;padding:5px 8px;font-size:10px;line-height:14px}
 #app[data-current-view=calendar] .stats{margin-bottom:5px;gap:6px}
 #app[data-current-view=calendar] .stat{padding:4px 8px;gap:6px;border-radius:7px;min-height:30px}
 #app[data-current-view=calendar] .stat-top{font-size:10px}
 #app[data-current-view=calendar] .stat strong{font-size:18px;line-height:21px}
 #app[data-current-view=calendar] .toolbar{padding:4px 6px;gap:4px 6px;margin-bottom:0}
 #app[data-current-view=calendar] .toolbar button{padding:3px 6px;min-height:27px;font-size:11px}
 #app[data-current-view=calendar] .toolbar input,#app[data-current-view=calendar] .toolbar select{padding:3px 6px;height:27px;font-size:11px}
 #app[data-current-view=calendar] .filters{gap:5px}
 #app[data-current-view=calendar] .filters input{width:210px}
 #app[data-current-view=calendar] .period-switch{margin-right:3px}
 #app[data-current-view=calendar] .workflow-tools{padding:2px 6px 4px;margin:0 0 5px;gap:5px}
 #app[data-current-view=calendar] .workflow-tools button,#app[data-current-view=calendar] .workflow-tools select{min-height:27px;padding:3px 6px;font-size:11px}
 #app[data-current-view=calendar] #week-label{font-size:12px;margin-left:4px}
 #app[data-current-view=calendar] .board{min-width:1050px;grid-template-columns:184px repeat(7,minmax(118px,1fr));gap:6px;height:calc(100dvh - 210px);min-height:280px}
 #app[data-current-view=calendar] .column{padding:5px;border-radius:7px}
 #app[data-current-view=calendar] .card.compact-card.scheduled-card{padding:3px 5px;margin-bottom:3px;border-radius:5px}
 #app[data-current-view=calendar] .scheduled-card .card-top{margin-bottom:1px}
 #app[data-current-view=calendar] .scheduled-card .card-heading{margin-bottom:1px}
}
@media(max-width:900px) and (min-width:641px){
 .month-layout{grid-template-columns:166px minmax(0,1fr)}
 .month-layout>.queue,.month-scroll{max-height:calc(100dvh - 260px)}
}
@media(max-width:640px){
 #app[data-current-view=calendar] main{padding:8px 8px max(10px,env(safe-area-inset-bottom))}
 #app[data-current-view=calendar] main>header{gap:5px;margin-bottom:6px}
 #app[data-current-view=calendar] main>header h1{font-size:22px;margin:2px 0}
 #app[data-current-view=calendar] header p{font-size:12px;line-height:15px}
 #app[data-current-view=calendar] .header-actions{gap:4px}
 #app[data-current-view=calendar] .header-actions button{min-height:40px;padding:6px 9px}
 #app[data-current-view=calendar] .demo-banner{padding:6px 8px;margin-bottom:6px;line-height:15px}
 #app[data-current-view=calendar] .stats{margin-bottom:6px;gap:4px}
 #app[data-current-view=calendar] .stat{padding:5px 7px;min-height:32px}
 #app[data-current-view=calendar] .stat strong{font-size:18px}
 #app[data-current-view=calendar] .toolbar{padding:5px;gap:5px;margin-bottom:0}
 #app[data-current-view=calendar] #week-tools{gap:3px;flex-wrap:wrap}
 #app[data-current-view=calendar] #week-label{margin:1px 0;font-size:12px;line-height:16px}
 #app[data-current-view=calendar] .toolbar button{min-height:36px;padding:4px 7px;font-size:12px}
 #app[data-current-view=calendar] .toolbar input,#app[data-current-view=calendar] .toolbar select{height:40px;min-height:40px;padding:5px 7px;font-size:16px}
 #app[data-current-view=calendar] .filters{gap:5px}
 #app[data-current-view=calendar] .workflow-tools{padding:2px 5px 5px;margin:0 0 6px;gap:5px}
 #app[data-current-view=calendar] .workflow-tools button{min-height:36px;padding:4px 6px;font-size:12px}
 #app[data-current-view=calendar] .workflow-tools select{height:40px;min-height:40px;padding:5px;font-size:16px}
 #app[data-current-view=calendar] .workflow-tools #my-orders{flex:0 1 auto}
 #app[data-current-view=calendar] .workflow-tools #status-filter{flex:1 1 170px}
 #app[data-current-view=calendar] .workflow-tools #saved-filter{flex:1 1 130px;width:130px}
 #app[data-current-view=calendar] .workflow-tools #save-filter{flex:0 1 auto}
 #app[data-current-view=calendar] .workflow-tools #reset-filters{margin-left:0}
 .month-layout{grid-template-columns:1fr;gap:6px}
 .month-layout>.queue{max-height:180px;padding:5px}
 .month-scroll{max-height:65vh;max-height:65dvh}
 .month-board{min-width:840px}
 .month-day{min-height:62px;padding:3px}
 .month-day-head{min-height:32px;margin-bottom:2px}
 .month-day-head button{min-height:32px;min-width:32px;padding:2px 4px}
 .card.compact-card.month-card .card-heading h3{font-size:12px;line-height:14px}
 .card.compact-card.month-card .compact-line{font-size:11px;line-height:13px}
 .month-card .card-assignment,.scheduled-card.month-card .card-assignment{font-size:11px;line-height:13px}
 .month-card .card-top{line-height:12px}
 .month-deliveries{max-height:192px}
 #app[data-current-view=calendar] .queue-action,#app[data-current-view=calendar] .column-add{min-height:36px;font-size:12px}
}