/* Keep the day controls in two rows and allocate height to appointments. */
@media(min-width:700px){
 body.day-mode.admin-mode>header,body.day-mode.admin-mode>footer{display:none}
 body.day-mode.admin-mode .wrap{max-width:1600px;margin:4px auto 0!important;padding:0 10px}
 body.day-mode.admin-mode .view-tabs{margin:0 0 4px!important;padding:2px;max-width:320px}
 body.day-mode.admin-mode .view-tabs button{padding:5px 8px;font-size:12px}
 body.day-mode.admin-mode .admin{padding:8px 12px!important}
 .day-mode .admin-heading{gap:8px;min-height:36px}
 .day-mode .admin-heading h2{font-size:19px}
 .day-mode .admin-heading button{padding:6px 12px!important;min-height:36px;font-size:13px}
 .day-mode .admin-tabs{margin:3px 0 5px;gap:8px}
 .day-mode .admin-tabs button{min-height:34px;padding:5px 16px;font-size:13px}
 .day-mode #agendaControls{display:grid;grid-template-columns:auto minmax(270px,1fr) auto;align-items:center;gap:4px 10px}
 .day-mode #agendaControls[hidden]{display:none}
 .day-mode #agendaControls>.back-month{grid-column:1;grid-row:1;margin:0!important}
 .day-mode #agendaControls>.date-control{grid-column:2;grid-row:1;max-width:390px;align-items:center;gap:5px}
 .day-mode #agendaControls>.quick-day-settings{grid-column:3;grid-row:1;margin:0!important}
 .day-mode #agendaControls>button,.day-mode .date-control button{min-height:36px;padding:6px 9px;font-size:12px}
 .day-mode .date-control button{min-width:34px}
 .day-mode .date-control label>span{display:none}
 .day-mode .date-control input{padding:5px 8px;font-size:16px;min-height:36px;height:36px}
 .day-mode #agendaControls>.metrics{grid-column:1;grid-row:2;margin:0;font-size:12px;gap:10px;white-space:nowrap}
 .day-mode .metrics strong{font-size:14px}
 .day-mode #agendaControls>.toolbar{grid-column:2 / 4;grid-row:2;margin:0;font-size:12px}
 .day-mode .availability-key{margin:4px 0;gap:12px;font-size:11px}
 .day-mode .day-halves{gap:10px}
 .day-mode .day-half>h3{font-size:14px;padding:3px 8px;margin:0 0 3px}
 .day-mode .admin .schedule th{padding:3px 2px;font-size:12px;height:25px}
 .day-mode .admin .schedule td{padding:1px 2px;height:clamp(30px,calc((100dvh - 290px)/10),48px)}
 .day-mode .admin .schedule td:first-child{font-size:12px;line-height:1.2}
 .day-mode .admin .schedule td:first-child small{font-size:10px}
 .day-mode .admin .schedule th:first-child{width:48px}
 .day-mode .admin .schedule .free-slot{min-height:28px;padding:3px 1px;font-size:12px}
 .day-mode .admin .schedule .appointment{min-height:28px;margin:0;padding:2px 3px;font-size:12px;line-height:1.15}
 .day-mode .admin .schedule .appointment small{font-size:10px;line-height:1.15}
 .day-mode #adminStatus:not([hidden]){margin-top:5px;padding:5px;font-size:12px}
}

/* The selected date and appointment grid are the day view's only content. */
body.day-mode #agendaControls{display:none!important}
body.day-mode .availability-key{display:none}
.selected-day-title{font-size:18px;margin:6px 0 10px;color:#23495e}

.day-date-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:5px 0 8px;flex-wrap:wrap}.day-date-nav .selected-day-title{margin:0}.day-date-nav nav{display:flex;gap:6px;flex-wrap:wrap}.admin .day-date-nav button{min-height:36px;padding:6px 12px;font-size:13px}@media(max-width:600px){.admin .day-date-nav button{min-height:40px;padding:6px 10px}}

/* Join consecutive 20-minute cells into one blue appointment band. */
.admin .schedule td.duration-band{background:#e7f1ff!important;border-left:2px solid #2473d4!important;border-right:2px solid #2473d4!important;border-top:0!important;border-bottom:0!important;padding:0 3px!important}
.admin .schedule td.duration-band.band-start{border-top:2px solid #2473d4!important}
.admin .schedule td.duration-band.band-end{border-bottom:2px solid #2473d4!important}
.admin .schedule td.duration-band .appointment{background:transparent!important;border:0!important;border-radius:0;color:#154c91!important;box-shadow:none;margin:0;width:100%}
.admin .schedule td.duration-band .appointment:hover{background:#cfe3ff!important}
.admin .schedule td.duration-band .appointment:focus-visible{outline:2px solid #154c91;outline-offset:-2px}

/* Darker text and clearer status colors for the iPad appointment grid. */
.admin-mode .admin .schedule{border-color:#829ba9!important}
.admin-mode .admin .schedule th{background:#dce9ee!important;color:#173e52!important;border-color:#91a9b6!important;font-weight:800!important}
.admin-mode .admin .schedule td{color:#263f4c!important;border-color:#a5b8c2!important}
.admin-mode .admin .schedule td.slot-open{background:#eef5f8!important}
.admin-mode .admin .schedule td.slot-off{background:#e8edef!important;color:#4d5d65!important}
.admin-mode .admin .schedule td.slot-full{background:#fff0e8!important;color:#803b20!important}
.admin-mode .admin .schedule .time-cell{color:#173e52!important;font-weight:800!important}
.admin-mode .admin .schedule .time-cell small{color:#425c68!important;font-weight:700!important}
.admin-mode .admin .schedule .free-slot{background:#f7fafb!important;color:#164c64!important;border:1.5px dashed #66899a!important;font-weight:750!important}
.admin-mode .admin .schedule .free-slot:hover:not(:disabled){background:#dcecf2!important;border-color:#315f75!important}
.admin-mode .admin .schedule .free-slot:disabled{background:#e8edef!important;color:#53636b!important;border-color:#9aabb3!important;opacity:1!important}
.admin-mode .admin .schedule .appointment{background:#dcecf2!important;color:#173e52!important;border:1px solid #6e96a8!important;font-weight:800!important}
.admin-mode .admin .schedule .appointment small{color:#294f61!important;font-weight:700!important}
.admin-mode .admin .schedule td.duration-band .appointment{background:transparent!important;color:#154c91!important;border:0!important}
.admin-mode .admin .muted{color:#465f6b!important}
.admin-mode .admin .day-date-nav .outline{color:#173e52!important;border-color:#8099a7!important}

/* First visits stay distinct throughout the entire reservation. */
.availability-key .key-first{background:#f0e4fa;border-color:#9861b5}
.admin-mode .admin .schedule td.slot-first{background:#f0e4fa!important}
.admin-mode .admin .schedule td.slot-first.duration-band{border-left-color:#9861b5!important;border-right-color:#9861b5!important}
.admin-mode .admin .schedule td.slot-first.band-start{border-top-color:#9861b5!important}
.admin-mode .admin .schedule td.slot-first.band-end{border-bottom-color:#9861b5!important}
.admin-mode .admin .schedule .appointment.first-visit{background:#f0e4fa!important;color:#512769!important;border-color:#9861b5!important}
.admin-mode .admin .schedule td.duration-band .appointment.first-visit{background:transparent!important;color:#512769!important}
.admin-mode .admin .schedule .appointment.first-visit small{color:#512769!important}
.admin-mode .admin .schedule .appointment.first-visit:hover{background:#e5d2f3!important}
.admin-mode .admin .schedule .appointment.first-visit:focus-visible{outline-color:#743b94!important}
.admin .booking-card.first-visit:not(.cancelled){background:#f0e4fa;border-color:#9861b5}

/* Keep appointment notes visible without stretching the daily grid. */
.admin-mode .admin .schedule .appointment .appointment-note{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;line-height:1.25;margin-top:2px;font-weight:600!important}

/* Emphasize the requested hour labels, preserving occupancy text colors. */
.admin-mode .admin .schedule .time-cell.hour-highlight .time-label{color:#a63c08;font-weight:900}

.halfday-roster{width:100%;border-collapse:collapse;margin:16px 0}.halfday-roster th,.halfday-roster td{padding:12px 8px;border-bottom:1px solid #c9d8df;text-align:center}.halfday-roster th:first-child{text-align:left}.halfday-roster input[type=checkbox]{width:26px;height:26px;cursor:pointer}

/* Keep the phone day grid compact; full notes remain available in booking details. */
@media screen and (max-width:900px){
 .admin-mode .admin .schedule .appointment .appointment-note{display:block!important;max-width:100%;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;font-size:11px!important;line-height:1.25!important;margin-top:2px;padding-top:0;border-top:0;text-align:left}
 .admin-mode .booking-card p{white-space:pre-wrap;overflow-wrap:anywhere}
}
@media screen{
 #bookingEditor textarea[name="note"]{width:100%;min-height:140px!important;max-height:none!important;white-space:pre-wrap;overflow-wrap:anywhere;font-size:16px!important;line-height:1.7!important;resize:vertical;overflow-y:hidden}
}