/* Appointment phone layout follows the personnel calendar. */
.calendar-filter-toggle{display:none}
.appointment-month-overview{display:contents}
@media(max-width:720px){
  .view-appointments .calendar-shell{gap:12px;min-height:0}
  .view-appointments .calendar-topbar{width:100%;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:12px;border-radius:14px}
  .view-appointments .calendar-top-search label{display:none}
  .view-appointments .calendar-top-search .input{width:100%;min-height:38px;padding:9px 10px;font-size:13px;border-radius:8px;box-sizing:border-box}
  .view-appointments .calendar-create-button{font-size:13px;min-height:38px;padding:9px 10px;border-radius:8px}
  .view-appointments .calendar-top-filters{grid-column:1/-1;grid-row:2}
  .calendar-filter-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:38px;padding:8px 10px;border:1px solid #dce3ec;border-radius:8px;background:#fff;color:#52657f;font:inherit;font-size:13px;cursor:pointer}
  .calendar-top-filters:not(.is-open)>:not(.calendar-filter-toggle){display:none}
  .calendar-top-filters.is-open .calendar-filter-title{margin:12px 0 8px;justify-content:space-between}
  .calendar-top-filters .calendar-filter-chips{gap:7px;max-height:210px;overflow-y:auto;padding:2px}
  .view-appointments .calendar-filter-chips .calendar-check{padding:5px 7px;border:1px solid #e7edf5;border-radius:7px;background:#f7f9fc;font-size:12px}
  .view-appointments .calendar-main{display:flex;flex-direction:column;gap:12px;padding:0;overflow:visible;background:transparent}
  .view-appointments .calendar-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;border:1px solid #e7edf5;border-radius:14px;background:#fff}
  .view-appointments .calendar-title-group{display:grid;grid-template-columns:32px minmax(0,1fr) 32px auto;gap:6px;width:100%}
  .view-appointments .calendar-title-group h2{margin:0;text-align:center;font-size:15px;white-space:nowrap}
  .view-appointments .calendar-title-group .btn{min-width:0;min-height:36px;padding:7px;border-radius:8px;font-size:14px}
  .view-appointments .calendar-actions{display:flex;gap:8px;width:100%}
  .view-appointments .calendar-actions .btn{flex:1;min-height:32px;border-radius:8px;font-size:12px}
  .view-appointments .appointment-month-overview{display:block;overflow:hidden;border:1px solid #e7edf5;border-radius:14px;background:#fff}
  .view-appointments .calendar-week-row{padding:0;border:0;background:#f7f9fc;font-size:11px;font-weight:400;color:#718198}
  .view-appointments .calendar-week-row div{padding:10px 0}
  .view-appointments .week-prefix{display:inline}
  .view-appointments .calendar-month-grid{width:100%;min-width:0;grid-template-columns:repeat(7,minmax(0,1fr));padding:0;gap:0;border:0;background:#fff}
  .view-appointments .calendar-cell{min-height:60px;padding:3px;border-top:1px solid #edf1f6;border-right:1px solid #edf1f6;background:#fff;box-sizing:border-box;box-shadow:none}
  .view-appointments .calendar-cell:nth-child(7n){border-right:0}
  .view-appointments .calendar-cell.outside{background:#f9fafc}
  .view-appointments .calendar-cell.today-cell{background:#f1f7ff;box-shadow:none}
  .view-appointments .calendar-cell-head{margin:0;display:block}
  .view-appointments .calendar-add,.view-appointments .calendar-events{display:none}
  .view-appointments .calendar-date-mark{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;height:54px;min-height:54px;padding:0;border:0;border-radius:9px;background:transparent;color:#435975;box-shadow:none}
  .view-appointments .calendar-date-mark strong{display:block;min-width:0;height:20px;line-height:20px;font-size:14px;font-weight:650;color:inherit;background:transparent;border-radius:0;box-shadow:none}
  .view-appointments .calendar-date-mark span,.view-appointments .calendar-date-mark i{min-width:0;width:auto;min-height:14px;height:14px;padding:0;line-height:14px;color:#8594a8;background:transparent;font-size:10px;font-weight:400;border-radius:0;white-space:nowrap;font-style:normal}
  .view-appointments .calendar-date-mark i{display:block}
  .view-appointments .calendar-date-mark i::after{content:' 项'}
  .view-appointments .calendar-date-mark:has(i) span{display:none}
  .view-appointments .calendar-date-mark:not(:has(span,i))::after{content:'';height:14px}
  .view-appointments .calendar-cell.selected-cell .calendar-date-mark{background:#087bff;color:#fff;box-shadow:0 3px 8px #087bff20}
  .view-appointments .calendar-cell.selected-cell .calendar-date-mark strong{color:#fff;background:transparent;box-shadow:none}
  .view-appointments .calendar-cell.selected-cell .calendar-date-mark span,.view-appointments .calendar-cell.selected-cell .calendar-date-mark i{color:#e9f3ff;background:transparent}
  .view-appointments .calendar-date-mark:focus-visible{outline:2px solid #087bff;outline-offset:1px}
  .view-appointments .mobile-agenda-panel{border:1px solid #e7edf5;border-radius:14px;overflow:hidden;background:#fff;padding:14px;box-sizing:border-box}
  .view-appointments .mobile-agenda-head{padding:0 0 12px;border:0;gap:10px}
  .view-appointments .mobile-agenda-head h3{font-size:15px;color:#294467;font-weight:650;line-height:1.5}
  .view-appointments .mobile-agenda-head span{font-size:11px;color:#8a98aa;margin-top:5px}
  .view-appointments .mobile-agenda-head .btn{font-size:12px;padding:7px 10px;white-space:nowrap}
  .view-appointments .mobile-agenda-list{padding:0;gap:8px}
  .view-appointments .mobile-agenda-item{grid-template-columns:minmax(0,1fr);padding:0;border:1px solid #e5edf7;border-left:3px solid var(--event-color,#53a2ed);border-radius:8px;background:var(--event-bg,#f4f8fd);gap:0;overflow:hidden}
  .view-appointments .mobile-agenda-line{display:none}
  .view-appointments .mobile-agenda-main{padding:12px;width:100%;cursor:pointer}
  .view-appointments .mobile-agenda-main .calendar-event-summary{gap:5px 8px;font-size:13px;line-height:1.6}
  .view-appointments .mobile-agenda-main .calendar-event-summary strong{font-size:14px;line-height:1.6}
  .view-appointments .mobile-agenda-main .calendar-event-summary span{font-size:13px;line-height:1.6}
  .view-appointments .mobile-agenda-main .calendar-event-customer{flex:1}
  .view-appointments .mobile-agenda-main .calendar-event-consultant{flex-basis:100%;color:#64748b}
  .view-appointments .mobile-agenda-empty{padding:18px 0;text-align:center;font-size:12px;color:#95a1b2;line-height:1.7}
}