.appointments-toolbar{display:flex;gap:12px;align-items:end;flex-wrap:wrap}.appointments-toolbar label{display:flex;flex-direction:column;gap:5px;flex:1;min-width:160px}.appointments-toolbar input,.appointments-toolbar select{width:100%;padding:10px;border:1px solid #d8deea;border-radius:7px}.appointment-card{display:grid;grid-template-columns:minmax(150px,1fr) minmax(240px,2fr) minmax(200px,1fr);gap:20px;padding:20px;margin:12px 0;border:1px solid #dce1e9;border-radius:8px;background:white;overflow-wrap:anywhere}.appointment-card h3{margin:0 0 8px}.appointment-actions{display:flex;flex-wrap:wrap;gap:8px;align-content:start}.appointment-actions>strong,.appointment-actions>span{width:100%}.appointment-workspace-modal{border:1px solid #dce1e9;border-radius:10px;max-width:620px;width:calc(100% - 40px);max-height:90vh;padding:24px}.appointment-workspace-modal::backdrop{background:#0007}.appointment-workspace-modal form{display:grid;gap:14px}.appointment-workspace-modal label{display:grid;gap:5px}.appointment-workspace-modal input,.appointment-workspace-modal select{padding:10px;border:1px solid #d8deea;border-radius:7px;max-width:100%}@media(max-width:750px){.appointment-card{grid-template-columns:1fr}.appointments-toolbar>*{width:100%}}@media print{#appointments-panel{display:none!important}}
#appointments-panel{padding:20px;box-sizing:border-box}#appointments-panel>h2{margin-top:0}
.appointment-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin:16px 0}
.appointment-calendar-heading{font-size:.85rem;padding:8px 4px;text-align:center}
.appointment-calendar-day{height:180px;overflow-y:auto;padding:8px;border:1px solid #cbd5e1;border-radius:6px;background:#fff;min-width:0}
.appointment-calendar-entry{display:block;width:100%;text-align:left;white-space:normal;overflow-wrap:anywhere;font-size:.8rem;margin-top:6px;padding:6px;background:#eff6ff;color:#172554;border:1px solid #bfdbfe;border-radius:4px}
.appointment-calendar-entry:focus-visible{outline:3px solid #2563eb;outline-offset:2px}
@media(max-width:720px){.appointment-calendar-grid{grid-template-columns:1fr}.appointment-calendar-heading,.appointment-calendar-grid>div:empty{display:none}.appointment-calendar-day{height:auto;min-height:60px;overflow:visible}}
.appointment-workspace-modal .appointment-card{grid-template-columns:1fr;gap:10px;padding:12px}

/* Separate time and outcome cues; labels remain visible without color. */
.appointment-card.time-future{border-left:5px solid #2865a1}.appointment-card.time-today{border-left:5px solid #9a6500}.appointment-card.time-past{border-left:5px solid #677382}
.time-badge,.outcome-badge{display:inline-block;padding:4px 9px;border-radius:6px;font-weight:650;margin-bottom:8px}
.time-future{--time-color:#2865a1}.time-today{--time-color:#9a6500}.time-past{--time-color:#677382}
.time-badge{color:var(--time-color);border:1px solid currentColor;background:white}
.outcome-showed{background:#e0f2e7!important;color:#155c35!important}.outcome-noshow{background:#fce5e5!important;color:#8f2020!important}.outcome-cancelled{background:#edf0f3!important;color:#46505c!important}.outcome-rescheduled{background:#eee4fa!important;color:#61328c!important}
.appointment-calendar-entry{border-left:4px solid var(--time-color,#2865a1)!important;white-space:normal}.action-reschedule{background:#e6f0fc;color:#174d85}.action-cancel{background:#fce5e5;color:#8f2020}
.appointment-card details{margin-top:14px}.appointment-card summary{cursor:pointer;font-weight:650}.appointment-card h4{margin:16px 0 6px}#attendance-leave-warning button{margin:8px}#event-list>h2{grid-column:1/-1}.nav a[aria-current="page"]{background:#173454;color:white}

/* Dense appointment workspace: useful context stays visible. */
main:has(#appointments-panel:not([hidden])){max-width:1680px;padding:16px 20px 40px}
#appointments-panel{padding:0}#appointments-panel>h2{margin:0 0 12px;font-size:22px}
.appointments-toolbar{gap:8px}.appointments-toolbar label{min-width:120px;gap:3px}
.appointments-toolbar input,.appointments-toolbar select{padding:7px 9px}
.appointment-month-controls{margin-top:10px;align-items:center}.appointment-month-controls span{font-size:12px;color:var(--muted);margin-left:auto}
.appointments-search-actions{display:inline-block;margin:8px 12px 0 0}.appointments-search-actions button{font-size:12px;min-height:30px}
#appointment-workspace-message{display:inline-block;font-size:13px;color:var(--muted);margin:8px 0}
#appointment-workspace-rows>h3,#appointment-workspace-holds>h3{font-size:15px;margin:12px 0 6px}
.appointment-card{grid-template-columns:minmax(140px,.8fr) minmax(200px,1.2fr) minmax(230px,1.5fr) minmax(170px,.9fr);gap:14px;padding:12px;margin:6px 0;font-size:13px;line-height:1.4;align-items:start}
.appointment-card:has(.appointment-context.is-empty){grid-template-columns:minmax(140px,.8fr) minmax(200px,2.7fr) minmax(170px,.9fr)}
.appointment-context.is-empty{display:none}.appointment-card h3{font-size:16px;margin:0 0 4px}.appointment-card p{margin:3px 0}.appointment-card p:empty{display:none}
.appointment-card h4{font-size:12px;color:var(--muted);margin:0 0 4px}.appointment-context section+section:not(:empty){margin-top:8px}
.appointment-info>strong{display:block}.time-badge,.outcome-badge{padding:2px 7px;margin-bottom:4px;font-size:12px}
.appointment-actions{gap:5px}.appointment-actions button,.appointment-actions select{font-size:12px;padding:5px 8px;min-height:32px;white-space:normal}
.appointment-outcome-details{display:flex;gap:3px 10px;flex-wrap:wrap;margin:5px 0}.appointment-outcome-details>strong{width:100%;font-size:12px}
.appointment-history-link{display:block;text-align:left;white-space:normal;min-height:28px;padding:3px 0;border:0;border-radius:0;background:transparent;color:#174d85;font-size:12px;line-height:1.4;text-decoration:underline;text-underline-offset:2px}
.appointment-calendar-grid{margin:8px 0;gap:3px}.appointment-calendar-heading{padding:4px;font-size:12px}
.appointment-calendar-day{height:auto;min-height:110px;overflow:visible;padding:6px}.appointment-calendar-day>strong{font-size:12px}
.appointment-calendar-entry{line-height:1.35;margin-top:4px;padding:5px;font-size:12px}.appointment-calendar-entry span{display:block;margin-top:2px;font-size:11px}.appointment-calendar-purpose{font-weight:650}
#workspace-appointment-details{max-width:1060px;padding:16px}#workspace-appointment-details>h2{font-size:20px;margin:0 0 10px}
#workspace-appointment-details .appointment-card{grid-template-columns:minmax(140px,.8fr) minmax(200px,1.2fr) minmax(200px,1.2fr);gap:12px}
#workspace-appointment-details .appointment-actions{grid-column:1/-1;border-top:1px solid var(--line);padding-top:10px}
#workspace-appointment-details .appointment-actions>strong,#workspace-appointment-details .appointment-actions>span{width:auto}
@media(max-width:1050px){.appointment-card,.appointment-card:has(.appointment-context.is-empty){grid-template-columns:minmax(140px,1fr) minmax(200px,2fr)}.appointment-context{grid-column:2}.appointment-actions{grid-column:1/-1}.appointment-actions>strong,.appointment-actions>span{width:auto}}
@media(max-width:720px){main:has(#appointments-panel:not([hidden])){padding:12px}.appointments-toolbar label{flex:1 1 140px;width:auto}.appointments-toolbar>button{width:auto}.appointment-month-controls>*{width:auto}.appointment-month-controls span{margin-left:0}.appointment-card,.appointment-card:has(.appointment-context.is-empty),#workspace-appointment-details .appointment-card{grid-template-columns:1fr;gap:8px}.appointment-context,.appointment-actions{grid-column:1}.appointment-calendar-day{min-height:45px}.appointment-calendar-entry{font-size:13px}}

.appointment-hold{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px}.appointment-hold p{margin:0}.appointment-hold button{font-size:12px;min-height:30px}
.appointment-color-legend{display:flex;flex-wrap:wrap;gap:6px 20px;margin:4px 0 8px;font-size:12px;line-height:1.4}.appointment-legend-group{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}.appointment-legend-group>strong{color:var(--muted);margin-right:2px}.appointment-color-legend .time-badge,.appointment-color-legend .outcome-badge{margin:0;font-weight:500;padding:1px 6px}
