.appointment-analytics-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.appointment-calendar-page .aa-main { grid-template-columns: minmax(0, 1fr); }
.appointment-calendar-page .aa-cal-cell { min-height: clamp(76px, 11vh, 145px); }
.appointment-calendar-page .aa-cal-count { font-size: clamp(18px, 2vw, 28px); }
.appointment-calendar-page .aa-cal-cell.is-today { outline: 2px solid var(--primary-color, #2563eb); outline-offset: -3px; }
.appointment-calendar-page .aa-cal-cell.is-selected { background: #2563eb; color: #fff; }
.appointment-calendar-page .aa-cal-cell.is-selected .aa-cal-count { color: #fff; }
.appointment-calendar-page .aa-card-head { flex-wrap: wrap; }
.aa-calendar-modal .aa-modal-card { width: min(1240px, calc(100vw - 24px)); }
@media (max-width: 600px) {
  .appointment-calendar-page .aa-toolbar label { min-width: 0; flex: 1 1 40%; }
  .appointment-calendar-page .aa-card { padding: 8px; }
  .appointment-calendar-page .aa-cal-nav { flex-wrap: wrap; gap: 5px; }
  .appointment-calendar-page .aa-cal-cell { min-height: 65px; padding: 6px 2px; }
  .appointment-calendar-page .aa-cal-grid { gap: 4px; }
}

.aa-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.aa-header h2 {
  margin: 0;
  font-size: 22px;
}

.aa-header p {
  margin: 4px 0 0;
  color: var(--muted-color, #64748b);
  font-size: 13px;
}

.aa-ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.12);
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 800;
}

.aa-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}

.aa-toolbar label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  min-width: 150px;
}

.aa-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.aa-kpi {
  border-radius: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border-color, #e6edf7);
  background: var(--card-bg, #fff);
}

.aa-kpi-label { font-size: 12px; font-weight: 800; opacity: 0.85; }
.aa-kpi-value { font-size: 26px; font-weight: 800; margin: 6px 0 4px; }
.aa-kpi-sub { font-size: 11px; opacity: 0.85; }
.aa-kpi-change { font-weight: 800; }
.aa-kpi-change.up { color: #16a34a; }
.aa-kpi-change.down { color: #dc2626; }
.aa-kpi-blue .aa-kpi-value { color: #2563eb; }
.aa-kpi-green .aa-kpi-value { color: #16a34a; }
.aa-kpi-orange .aa-kpi-value { color: #ea580c; }
.aa-kpi-purple .aa-kpi-value { color: #7c3aed; }
.aa-kpi-cyan .aa-kpi-value { color: #0891b2; }
.aa-kpi-red .aa-kpi-value { color: #dc2626; }
.aa-kpi-indigo .aa-kpi-value { color: #4f46e5; }

.aa-main {
  display: grid;
  grid-template-columns: 1.1fr 1.1fr 0.9fr;
  gap: 16px;
  align-items: start;
}

.aa-card {
  border: 1px solid var(--border-color, #e6edf7);
  border-radius: 14px;
  background: var(--card-bg, #fff);
  padding: 16px;
}

.aa-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.aa-card h3 { margin: 0; font-size: 15px; }
.aa-card h4 { margin: 8px 0; font-size: 13px; }
.aa-card-note { font-size: 11px; opacity: 0.7; }

.aa-cal-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.aa-calendar { user-select: none; }
.appointment-analytics-page .aa-cal-cell.is-open:not(.is-selected) { background:#f0fdf6; border-color:#bde8d2; }
.appointment-analytics-page .aa-cal-cell.is-holiday:not(.is-selected) { background:#fff1f3; border-color:#f3d2dc; }
.appointment-analytics-page .aa-cal-cell.is-closed:not(.is-selected) { background:#f5f7fa; border-color:#e2e8f0; }
.aa-cal-schedule,.aa-cal-hours { display:block; font-size:10px; line-height:1.4; overflow-wrap:anywhere; }
.aa-cal-schedule { font-weight:650; color:inherit; }
.aa-cal-hours { color:inherit; opacity:.8; }
.appointment-analytics-page .aa-cal-head { opacity:1; gap:6px; margin-bottom:8px; }
.appointment-analytics-page .aa-cal-head span { padding:10px 2px; background:#edf4ff; color:#243e68; border-radius:8px; }
.appointment-analytics-page .aa-cal-head span:first-child { background:#fceaf0; color:#9b3251; }
.appointment-analytics-page .aa-cal-head span:last-child { background:#e2edff; color:#185bd4; }
.appointment-analytics-page .aa-cal-cell { border-radius:12px; min-height:78px; padding:10px 4px; }
.appointment-analytics-page .aa-cal-cell.has-data { background:#f0fdf6; border-color:#bde8d2; color:#18553c; }
.appointment-analytics-page .aa-cal-cell.has-data .aa-cal-count { color:#18834b; }
.appointment-analytics-page .aa-cal-cell.no-data { background:#fff1f3; border-color:#f3d2dc; color:#8d465b; }
.appointment-analytics-page .aa-cal-cell.no-data .aa-cal-count { color:#8d465b; }
.appointment-analytics-page .aa-cal-count small { display:block; font-size:9px; font-weight:500; margin-top:3px; }
.appointment-analytics-page .aa-cal-cell.is-today { outline:2px solid #2563eb; outline-offset:-2px; }
.appointment-analytics-page .aa-cal-cell.is-selected { background:#2563eb; color:#fff; border-color:#2563eb; }
.appointment-analytics-page .aa-cal-cell.is-selected .aa-cal-count,
.appointment-analytics-page .aa-cal-cell.is-selected .aa-cal-count small { color:#fff; }

.aa-cal-head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 800;
  opacity: 0.7;
  text-align: center;
}

.aa-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.aa-cal-cell {
  min-height: 58px;
  border: 1px solid var(--border-color, #e6edf7);
  border-radius: 10px;
  background: var(--input-bg, #fff);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.aa-cal-cell.empty {
  border: 0;
  background: transparent;
  cursor: default;
}

.aa-cal-cell.has-data {
  border-color: rgba(37, 99, 235, 0.35);
  background: rgba(37, 99, 235, 0.06);
}

.aa-cal-cell:hover { border-color: #2563eb; }
.aa-cal-day { font-size: 12px; opacity: 0.8; }
.aa-cal-count { font-size: 15px; font-weight: 800; color: #2563eb; }

.aa-chart svg { width: 100%; height: auto; }

.aa-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 12px;
}

.appointment-analytics-page > .aa-row-2 {
  margin-top: 0;
}

.aa-donut {
  display: flex;
  align-items: center;
  gap: 12px;
}

.aa-donut svg { width: 130px; height: 130px; transform: rotate(-90deg); }
.aa-donut svg text { transform: rotate(90deg); transform-origin: center; }
.aa-donut-seg { transition: stroke-width 0.15s; }

.aa-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.aa-legend li { display: flex; align-items: center; gap: 6px; }
.aa-dot { width: 10px; height: 10px; border-radius: 999px; display: inline-block; }

.aa-insights-card .aa-insight {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-color, #e6edf7);
  border-radius: 12px;
  margin-bottom: 8px;
  font-size: 12px;
}

.aa-insight i { margin-top: 2px; color: #2563eb; }
.aa-insight.positive i { color: #16a34a; }
.aa-insight.warning i { color: #d97706; }
.aa-insight p { margin: 2px 0 0; opacity: 0.85; }
.aa-insight-sub { margin: 10px 0 6px; }

.aa-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
  font-size: 11px;
  font-weight: 700;
}

.aa-empty {
  padding: 18px;
  text-align: center;
  color: var(--muted-color, #64748b);
  font-weight: 700;
  border: 1px dashed var(--border-color, #e6edf7);
  border-radius: 12px;
}

.aa-table-scroll { overflow-x: auto; }

.aa-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.aa-table th,
.aa-table td {
  border: 1px solid var(--border-color, #e6edf7);
  padding: 7px 9px;
  text-align: left;
  white-space: nowrap;
}

.aa-table thead th { background: #f8fafc; font-weight: 800; }

.aa-ask-row {
  display: flex;
  gap: 10px;
}

.aa-ask-row input { flex: 1; }

.aa-answer {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--border-color, #e6edf7);
  border-radius: 12px;
  background: #f8fafc;
}

.aa-answer-text { font-size: 14px; font-weight: 600; }

.aa-answer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.aa-chip {
  display: inline-flex;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #eef2ff;
  font-size: 11px;
}

.aa-ask-loading { font-size: 13px; opacity: 0.8; }

@media (max-width: 1280px) {
  .aa-main { grid-template-columns: 1fr; }
}

@media print {
  .aa-toolbar,
  .aa-ask-card { display: none; }
}

.aa-kpi-change.neutral { color: #64748b; }

.aa-day-pager {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-size: 12px;
}

.aa-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
}

.aa-modal[hidden] {
  display: none;
}

.aa-modal-card {
  background: var(--surface, #ffffff);
  border-radius: 12px;
  width: min(980px, 94vw);
  max-height: 86vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
}

.aa-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border, #e5e7eb);
}

.aa-modal-head h4 {
  margin: 0;
  font-size: 15px;
}

.aa-modal-body {
  padding: 12px 18px 18px;
  overflow: auto;
}

.aa-day-popup-table th,
.aa-day-popup-table td {
  white-space: nowrap;
  padding: 7px 12px;
}

.aa-day-popup-table td:last-child,
.aa-day-popup-table th:last-child {
  white-space: normal;
  min-width: 180px;
}

.aa-day-popup-date {
  color: #dc2626;
  font-weight: 700;
}

@media print {
  .aa-modal {
    display: none !important;
  }
}

.aa-suggestions,.aa-followups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0}.aa-question-card{display:flex;flex-direction:column;gap:6px;text-align:left;border:1px solid var(--border,#dce5f2);border-radius:12px;background:var(--card-bg,#fff);color:inherit;padding:12px;cursor:pointer;font:inherit}.aa-question-card small{color:var(--primary,#2563eb);font-weight:600}.aa-question-card:hover,.aa-question-card:focus-visible{background:var(--primary-soft,#eff6ff);border-color:var(--primary,#2563eb)}.aa-answer h4{margin:16px 0 8px}.aa-answer-figures{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}.aa-answer-figure{display:flex;flex-direction:column;gap:6px;padding:12px 18px;background:var(--primary-soft,#eff6ff);border-radius:10px}.aa-answer-figure strong{font-size:22px;color:var(--primary,#2563eb)}@media(max-width:700px){.aa-suggestions,.aa-followups{grid-template-columns:1fr}.aa-ask-row{flex-wrap:wrap}.aa-ask-row input{min-width:0;width:100%}}

@media (max-width: 700px) {
  .appointment-analytics-page { min-width: 0; max-width: 100%; }
  .appointment-analytics-page > * { min-width: 0; }
  .appointment-analytics-page .aa-header, .aa-ask-card .aa-card-head { flex-wrap: wrap; }
  .aa-ask-card { overflow-wrap: anywhere; }
  .aa-ask-row input { flex: 1 1 100%; }
  .aa-ask-row button { width: 100%; justify-content: center; }
}

/* Dedicated calendar presentation; Analytics keeps its existing layout. */
.appointment-calendar-page { gap: 18px; min-width: 0; }
.appointment-calendar-page .aa-header { padding-bottom: 4px; }
.appointment-calendar-page .aa-header h2 { font-size: 24px; letter-spacing: -.4px; }
.appointment-calendar-page .aa-toolbar { padding: 14px; border: 1px solid var(--border-color, #e2e8f0); border-radius: 14px; background: var(--card-bg, #fff); gap: 12px; }
.appointment-calendar-page .aa-toolbar label { flex: 1 1 140px; min-width: 0; }
.appointment-calendar-page .aa-toolbar label:nth-child(3) { flex-grow: 1.5; }
.ac-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ac-summary-card { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border: 1px solid var(--border-color, #e2e8f0); border-radius: 14px; background: var(--card-bg, #fff); }
.ac-summary-card > div { display: flex; flex-direction: column; gap: 5px; }
.ac-summary-card strong { font-size: 26px; letter-spacing: -.5px; color: var(--text-color, #0f172a); }
.ac-summary-card span { font-size: 12px; font-weight: 600; }
.ac-summary-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: #1d4ed8; background: #eff6ff; flex-shrink: 0; font-size: 18px !important; }
.appointment-calendar-page .aa-calendar-card { padding: 20px; }
.appointment-calendar-page #aaMonthLabel { font-size: 22px; letter-spacing: -.4px; }
.appointment-calendar-page .aa-card-head { gap: 12px; margin-bottom: 16px; }
.appointment-calendar-page .aa-cal-nav { gap: 8px; }
.ac-legend { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; padding-bottom: 16px; font-size: 11px; color: var(--muted-color, #475569); }
.ac-legend > span { display: inline-flex; gap: 6px; align-items: center; }
.ac-legend small { margin-left: auto; font-size: 11px; }
.ac-key { width: 9px; height: 9px; border-radius: 3px; background: #cbd5e1; }
.ac-key-1 { background: #93c5fd; }.ac-key-2 { background: #3b82f6; }.ac-key-3 { background: #1e40af; }
.ac-key-4 { background: transparent; border: 2px solid #2563eb; }.ac-key-5 { background: #2563eb; }
.appointment-calendar-page .aa-cal-grid { gap: 8px; }
.appointment-calendar-page .aa-cal-head { padding: 0 0 12px; font-size: 12px; color: var(--muted-color, #475569); }
.appointment-calendar-page .aa-cal-cell { min-height: 84px; padding: 10px 14px; align-items: flex-start; border-radius: 12px; background: var(--card-bg, #fff); text-align: left; transition: border-color .15s, background .15s; }
.appointment-calendar-page .aa-cal-cell.has-data { background: #f8fbff; border-color: #dbeafe; }
.appointment-calendar-page .aa-cal-day { font-size: 13px; font-weight: 600; }
.appointment-calendar-page .aa-cal-count { font-size: 23px; font-weight: 750; color: #1e40af; }
.appointment-calendar-page .ac-volume-none .aa-cal-count { color: #64748b; }
.ac-volume-track { display: block; width: 44px; height: 4px; border-radius: 3px; background: #e2e8f0; overflow: hidden; }
.ac-volume-track > span { display: block; height: 100%; border-radius: inherit; background: #3b82f6; }
.ac-volume-lower .ac-volume-track > span { background: #93c5fd; }.ac-volume-higher .ac-volume-track > span { background: #1e40af; }
.appointment-calendar-page .aa-cal-cell.is-today { outline: 2px solid #2563eb; outline-offset: -3px; }
.appointment-calendar-page .aa-cal-cell.is-selected { background: #2563eb; border-color: #2563eb; color: #fff; }
.appointment-calendar-page .aa-cal-cell.is-selected .aa-cal-count { color: #fff; }
.appointment-calendar-page .aa-cal-cell.is-selected .ac-volume-track > span { background: #fff; }
.appointment-calendar-page .aa-cal-cell:focus-visible { outline: 3px solid #0f172a; outline-offset: 2px; }
.appointment-calendar-page .aa-cal-cell.empty { border-color: transparent; background: transparent; }
.ac-tip { font-size: 12px; color: var(--muted-color, #475569); margin: 16px 0 0; }
@media (max-width: 800px) {
  .ac-summary-card { padding: 12px; gap: 10px; }.ac-summary-card strong { font-size: 22px; }
  .ac-legend small { margin-left: 0; flex-basis: 100%; }
  .appointment-calendar-page .aa-cal-cell { min-height: 76px; padding: 8px; }
}
@media (max-width: 500px) {
  .appointment-calendar-page .aa-toolbar { padding: 10px; gap: 10px; }
  .appointment-calendar-page .aa-toolbar label { flex: 1 1 40%; }
  .ac-summary { gap: 8px; }.ac-summary-card { flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px; }
  .ac-summary-icon { width: 30px; height: 30px; font-size: 14px !important; }
  .ac-summary-card span { font-size: 10px; }.ac-summary-card strong { font-size: 20px; }
  .appointment-calendar-page .aa-calendar-card { padding: 10px; }
  .appointment-calendar-page #aaMonthLabel { font-size: 18px; }
  .appointment-calendar-page .aa-cal-grid { gap: 4px; }
  .appointment-calendar-page .aa-cal-cell { min-height: 68px; padding: 7px 4px; border-radius: 8px; }
  .appointment-calendar-page .aa-cal-count { font-size: 18px; }.appointment-calendar-page .aa-cal-day { font-size: 11px; }
  .ac-volume-track { width: 100%; max-width: 28px; height: 3px; }
  .ac-legend { gap: 8px 10px; font-size: 10px; }
}

/* Approved premium composition: calendar and the shared day-detail grid. */
.appointment-calendar-page .aa-header { align-items: center; justify-content: flex-start; padding: 22px; border: 1px solid #dbeafe; border-radius: 16px; background: #f0f6ff; gap: 18px; }
.ac-banner-icon { display: grid; place-items: center; width: 58px; height: 58px; flex-shrink: 0; border-radius: 15px; background: #e5edff; color: #2563eb; font-size: 28px; }
.appointment-calendar-page .aa-header h2 { font-size: 25px; font-weight: 800; color: #0f2346; }
.appointment-calendar-page .aa-header p { margin-top: 7px; color: #476080; }
.appointment-calendar-page .aa-main { grid-template-columns: minmax(0, 1.6fr) minmax(360px, 1fr); gap: 16px; align-items: stretch; }
.ac-summary-card { padding: 20px; gap: 18px; box-shadow: 0 2px 8px rgba(30,64,175,.025); }
.ac-summary-icon { width: 50px; height: 50px; font-size: 22px !important; }
.ac-summary-card strong { font-size: 30px; font-weight: 800; color: #1d4ed8; }
.ac-summary-card > div > span { font-size: 13px; }
.ac-summary-card:nth-child(2) .ac-summary-icon { color: #047857; background: #e9faf3; }
.ac-summary-card:nth-child(2) strong { color: #047857; }
.ac-summary-card:nth-child(3) .ac-summary-icon { color: #6d28d9; background: #f3edff; }
.ac-summary-card:nth-child(3) strong { color: #6d28d9; }
.appointment-calendar-page .aa-calendar-card { padding: 16px; min-width: 0; }
.appointment-calendar-page .aa-cal-head { gap: 6px; padding-bottom: 7px; }
.appointment-calendar-page .aa-cal-head > span { padding: 7px 2px; border-radius: 8px; }
.appointment-calendar-page .aa-cal-head > span:first-child { background: #fff0f2; color: #9f1239; }
.appointment-calendar-page .aa-cal-head > span:last-child { background: #edf4ff; color: #1d4ed8; }
.appointment-calendar-page .aa-cal-cell { align-items: center; text-align: center; padding: 10px 5px; min-height: 88px; }
.appointment-calendar-page .aa-cal-cell.ac-sunday { background: #fff3f5; border-color: #ffe0e7; }
.appointment-calendar-page .aa-cal-cell.ac-saturday { background: #eef5ff; border-color: #dbeafe; }
.appointment-calendar-page .aa-cal-cell.ac-sunday .aa-cal-day { color: #9f1239; }
.appointment-calendar-page .aa-cal-cell.ac-saturday .aa-cal-day { color: #1d4ed8; }
.appointment-calendar-page .aa-cal-count { font-size: 27px; line-height: 1.15; }
.appointment-calendar-page .ac-volume-track { height: 5px; width: 36px; }
.appointment-calendar-page .aa-cal-cell.is-today { outline: 2px solid #2563eb; outline-offset: -3px; }
.appointment-calendar-page .aa-cal-cell.is-selected { background: #e5edff; border-color: #2563eb; outline: 2px solid #2563eb; outline-offset: -2px; }
.appointment-calendar-page .aa-cal-cell.is-selected .aa-cal-count { color: #1e40af; }
.appointment-calendar-page .aa-cal-cell.is-selected .ac-volume-track > span { background: #1d4ed8; }
.appointment-calendar-page .aa-cal-cell.is-selected.is-today { box-shadow: inset 0 0 0 5px #fff; }
.appointment-calendar-page .ac-key-5 { background: #e5edff; border: 1px solid #2563eb; }
.appointment-calendar-page .ac-legend { gap: 8px 12px; }
.appointment-calendar-page .ac-legend small { flex-basis: 100%; margin-left: 0; }
.ac-day-panel { min-width: 0; padding: 16px; }
.ac-day-panel .aa-card-head { align-items: flex-start; flex-direction: column; gap: 6px; }
.ac-day-panel h4 { margin: 0; font-size: 19px; font-weight: 800; }
.ac-day-panel .aa-card-note { font-size: 12px; }
.ac-day-placeholder { display: grid; place-items: center; text-align: center; gap: 10px; padding: 90px 25px; color: #64748b; }
.ac-day-placeholder i { font-size: 34px; color: #93a9ce; }
.ac-day-panel .zr-grid-table-wrap { max-height: 490px; overflow: auto; }
.ac-day-panel .zr-grid-table { width: 100%; min-width: 0; }
.ac-day-panel .zr-grid-table thead { display: block; }
.ac-day-panel .zr-grid-table thead tr { display: flex; flex-wrap: wrap; padding: 6px 0; gap: 4px; }
.ac-day-panel .zr-grid-table th { width: auto; height: auto; min-height: 0; padding: 4px 6px; font-size: 10px; border: 0; background: #f8fafc; border-radius: 5px; }
.ac-day-panel .zr-grid-table tbody { display: block; }
.ac-day-panel .zr-grid-table tbody tr { display: grid; grid-template-columns: minmax(75px,.7fr) minmax(0,1.25fr) minmax(90px,.8fr); grid-template-areas: "time patient source" "number mobile status" "doctor doctor payment"; gap: 5px 8px; padding: 12px 9px; margin-bottom: 8px; border: 1px solid #e6edf7; border-radius: 10px; background: #fff; }
.appointment-calendar-page .ac-day-panel .zr-grid-table tbody td { display: block; border: 0; padding: 0; height: auto; min-height: 0; min-width: 0; white-space: normal; overflow-wrap: anywhere; font-size: 11px; background: transparent; box-shadow: none; }
.ac-day-panel td:has(.ac-field-time) { grid-area: time; font-weight: 750; font-size: 12px; }
.ac-day-panel td:has(.ac-field-patientName) { grid-area: patient; font-weight: 750; font-size: 12px; }
.ac-day-panel td:has(.ac-field-appointmentNumber) { grid-area: number; color: #536b90; }
.ac-day-panel td:has(.ac-field-mobile) { grid-area: mobile; color: #536b90; }
.ac-day-panel td:has(.ac-field-doctorName) { grid-area: doctor; color: #64748b; font-size: 10px; }
.ac-day-panel td:has(.ac-field-source) { grid-area: source; }
.ac-day-panel td:has(.ac-field-status) { grid-area: status; }
.ac-day-panel td:has(.ac-field-paymentStatus) { grid-area: payment; color: #64748b; font-size: 10px; }
.ac-day-panel .zr-grid-table tbody td.zr-grid-actions { grid-column: 1 / -1; grid-row: 4; text-align: right; }
.ac-field-source,.ac-field-status { display: inline-block; padding: 3px 7px; border-radius: 999px; background: #eef2ff; color: #4338ca; font-size: 10px; font-weight: 600; }
.ac-field-status { background: #eafaf2; color: #166534; }
.ac-day-panel .zr-grid-footer { display: none; }
.ac-day-panel .aa-day-pager { flex-wrap: wrap; justify-content: space-between; font-size: 11px; }
.ac-day-panel .zr-grid-toolbar { flex-wrap: wrap; }
.ac-day-panel .zr-grid-search { min-width: 0; width: 100%; }
@media (max-width: 1100px) {
  .appointment-calendar-page .aa-main { grid-template-columns: minmax(0,1fr); }
  .ac-day-panel .zr-grid-table-wrap { max-height: 480px; }
}
@media (max-width: 600px) {
  .appointment-calendar-page .aa-header { padding: 16px; gap: 12px; flex-wrap: nowrap; }
  .ac-banner-icon { width: 44px; height: 44px; font-size: 22px; }
  .appointment-calendar-page .aa-header h2 { font-size: 20px; }
  .ac-summary-card { padding: 10px; gap: 8px; }
  .ac-summary-card strong { font-size: 23px; }.ac-summary-card > div > span { font-size: 10px; }
  .ac-summary-icon { width: 34px; height: 34px; font-size: 16px !important; }
  .appointment-calendar-page .aa-calendar-card { padding: 10px; }
  .appointment-calendar-page .aa-cal-cell { min-height: 72px; padding: 8px 2px; }
  .appointment-calendar-page .aa-cal-count { font-size: 22px; }
  .appointment-calendar-page .ac-volume-track { width: 24px; height: 4px; }
}

.ac-day-panel .ac-field-status { background: #f1f5f9; color: #475569; }
.ac-day-panel .ac-field-status[data-value="Confirmed"] { background: #eafaf2; color: #166534; }
.ac-day-panel .ac-field-status[data-value="Cancelled"] { background: #fff1f2; color: #9f1239; }
.ac-day-panel .ac-field-status[data-value="Pending"] { background: #fff8e6; color: #92400e; }
.ac-day-panel .ac-field-source[data-value="Online"] { background: #eafaf2; color: #166534; }

/* Keep the audit badge on its own line within the existing compact daily cards. */
.ac-day-panel td:has(.ac-rescheduled) { grid-column: 1 / -1; grid-row: 4; }
.ac-day-panel .ac-rescheduled { white-space: nowrap; overflow-wrap: normal; }
.ac-day-panel .zr-grid-table tbody tr:has(.ac-rescheduled) td.zr-grid-actions { grid-row: 5; }

.aa-cal-halves { display:grid; gap:3px; font-size:11px; line-height:1.35; color:#334155; }
.aa-cal-halves>span { white-space:nowrap; }
.aa-cal-halves b { font-weight:750; }
.appointment-calendar-page .aa-cal-cell.is-selected,
.appointment-calendar-page .aa-cal-cell.is-selected .aa-cal-day,
.appointment-calendar-page .aa-cal-cell.is-selected .aa-cal-count,
.appointment-calendar-page .aa-cal-cell.is-selected .aa-cal-count small,
.appointment-calendar-page .aa-cal-cell.is-selected .aa-cal-schedule,
.appointment-calendar-page .aa-cal-cell.is-selected .aa-cal-hours,
.appointment-calendar-page .aa-cal-cell.is-selected .aa-cal-halves { color:#173b79; }
.appointment-analytics-page:not(.appointment-calendar-page) .aa-cal-cell.is-selected .aa-cal-halves { color:#fff; }
@media(max-width:600px) { .aa-cal-halves { font-size:9px; } }

/* Calendar uses the full content width; selected-day details open in a popup. */
.appointment-calendar-page .aa-main { display:block; grid-template-columns:minmax(0,1fr); }
.appointment-calendar-page .aa-calendar-card { width:100%; box-sizing:border-box; }
#aaDayModal[role=dialog] .aa-modal-card { width:min(1480px,calc(100vw - 32px)); max-width:none; max-height:92dvh; }
#aaDayModal[role=dialog] .aa-modal-body { overflow:auto; min-height:0; }
#aaDayModal[role=dialog] .ac-popup-day-panel { position:static; width:100%; box-sizing:border-box; max-height:none; border:0; box-shadow:none; padding:0; }
.ac-popup-session { margin:18px 0; border:1px solid #c9dffc; border-radius:12px; overflow:hidden; }
.ac-popup-session>header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; background:#eff6ff; padding:14px 18px; color:#243f69; border-left:4px solid #3b82f6; }
.ac-popup-session.second>header { background:#f7f4ff; color:#594184; border-left-color:#8b5cf6; }
.ac-popup-session.other>header { background:#f5f7fa; color:#475569; border-left-color:#64748b; }
.ac-popup-session>header>div { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.ac-popup-session h3 { margin:0; font-size:18px; }
.ac-popup-session>div { padding:8px; }
@media(max-width:600px) { #aaDayModal[role=dialog] .aa-modal-card { width:100%; max-height:100dvh; border-radius:0; } .ac-popup-session>header { padding:12px; } }


/* Compact day-popup controls leave the available height for records. */
#aaDayModal[role=dialog] .aa-modal-head { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:12px 18px; }
#aaDayModal[role=dialog] .aa-modal-head h4 { margin:0; font-size:20px; }
.ac-popup-date-nav { display:flex; align-items:center; gap:6px; margin-left:auto; }
.ac-popup-date-nav button { min-height:40px; min-width:40px; padding:6px 12px; border:1px solid #d8e3f3; background:#f5f8ff; color:#173b79; border-radius:8px; font:inherit; cursor:pointer; }
.ac-popup-date-nav input { width:165px!important; min-width:0; min-height:40px; }
.ac-popup-toolbar { display:grid; grid-template-columns:minmax(170px,210px) minmax(180px,1fr) auto; gap:10px; align-items:end; margin:8px 0 12px; }
.ac-popup-toolbar label { margin:0; display:grid; gap:4px; font-size:12px; }
.ac-popup-toolbar>input { width:100%; min-width:0; }
.ac-popup-toolbar input,.ac-popup-toolbar select { min-height:40px; padding-top:7px; padding-bottom:7px; }
.ac-popup-toolbar>button { min-height:40px; }
#aaDayModal[role=dialog] .aa-modal-body { padding:12px 18px; }
.ac-popup-session { margin:10px 0 14px; }
.ac-popup-session>header { min-height:48px; padding:8px 14px; box-sizing:border-box; }
.ac-popup-session>header>strong { margin-right:114px; }
.ac-popup-session>div { position:relative; padding:0 8px 8px; }
.ac-popup-session .zr-grid-toolbar { position:absolute; right:8px; top:-44px; margin:0; padding:0; min-height:0; }
.ac-popup-session .zr-grid-columns-btn { min-height:32px; padding:5px 8px; font-size:12px; }
.ac-popup-session .zr-grid-search,.ac-popup-session .zr-grid-footer { display:none!important; }
.ac-popup-session .zr-grid-table-wrap { max-height:none; }
@media(max-width:650px) {
 .ac-popup-toolbar { grid-template-columns:minmax(0,1fr) auto; }
 .ac-popup-toolbar>label { grid-column:1/-1; }
 .ac-popup-date-nav { margin-left:0; order:3; width:100%; }
 #aaDayModal[role=dialog] .aa-modal-head,#aaDayModal[role=dialog] .aa-modal-body { padding:10px; }
 #aaDayModalClose { margin-left:auto; }
 .ac-popup-session>header { align-items:flex-start; }
 .ac-popup-session>header>strong { margin-right:0; width:100%; font-size:12px; }
 .ac-popup-session>header>div { padding-right:95px; }
 .ac-popup-session .zr-grid-toolbar { top:-68px; }
}
.ac-mobile-controls, .ac-mobile-legend, .ac-mobile-sessions { display:none; }
/* Staff calendar phone layout only: desktop rules and data stay unchanged. */
@media (max-width:767px) {
 .appointment-calendar-page { padding:12px!important; gap:12px; min-width:0; }
 .appointment-calendar-page .aa-header { padding:10px; gap:8px; }
 .appointment-calendar-page .aa-header h2 { font-size:19px; }
 .appointment-calendar-page .aa-header p, .appointment-calendar-page .ac-banner-icon { display:none; }
 .appointment-calendar-page .ac-mobile-controls { display:flex; gap:10px; align-items:center; justify-content:space-between; min-width:0; }
 #acMobileDoctor { font-size:13px; font-weight:650; overflow-wrap:anywhere; }
 .appointment-calendar-page:not(.ac-filters-open) .aa-toolbar { display:none; }
 .appointment-calendar-page .aa-toolbar { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding:10px; gap:10px; }
 .appointment-calendar-page .aa-toolbar label { min-width:0; }
 .appointment-calendar-page .aa-toolbar select { width:100%; min-width:0; }
 .appointment-calendar-page .ac-summary { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
 .appointment-calendar-page .ac-summary-card { padding:10px 6px; display:block; min-width:0; text-align:center; }
 .appointment-calendar-page .ac-summary-icon { display:none; }
 .appointment-calendar-page .ac-summary-card strong { font-size:23px; }
 .appointment-calendar-page .ac-summary-card > div > span { font-size:10px; line-height:1.3; }
 .appointment-calendar-page .aa-main, .appointment-calendar-page .aa-calendar-card, .appointment-calendar-page .aa-calendar { min-width:0; }
 .appointment-calendar-page .aa-calendar-card { padding:8px; }
 .appointment-calendar-page .aa-card-head { gap:6px; flex-wrap:nowrap; }
 .appointment-calendar-page #aaMonthLabel { font-size:17px; }
 .appointment-calendar-page .aa-cal-nav { gap:4px; flex-wrap:nowrap; }
 .appointment-calendar-page .aa-cal-nav button { min-width:36px; min-height:40px; padding:6px 8px; font-size:12px; }
 .appointment-calendar-page .aa-cal-grid, .appointment-calendar-page .aa-cal-head { grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; }
 .appointment-calendar-page .aa-cal-head span { padding:8px 0; font-size:11px; }
 .appointment-calendar-page .aa-cal-cell { min-width:0; width:100%; min-height:64px; padding:6px 0; gap:4px; border-radius:8px; box-sizing:border-box; }
 .appointment-calendar-page .aa-cal-day { font-size:11px; }
 .appointment-calendar-page .aa-cal-count { font-size:19px; line-height:1.1; }
 .appointment-calendar-page .aa-cal-count small, .appointment-calendar-page .aa-cal-halves,
 .appointment-calendar-page .aa-cal-schedule, .appointment-calendar-page .aa-cal-hours,
 .appointment-calendar-page .ac-volume-track { display:none; }
 .appointment-calendar-page .ac-mobile-legend { display:block; min-height:40px; margin-bottom:8px; font-size:11px; }
 .appointment-calendar-page .ac-legend:not(.ac-legend-open) { display:none; }
 .appointment-calendar-page .ac-legend { font-size:10px; }
 .appointment-calendar-page .ac-tip { font-size:12px; margin:12px 0 4px; }
 #aaDayModal[role=dialog] { align-items:stretch; }
 #aaDayModal[role=dialog] .aa-modal-card { width:100%; height:100dvh; max-height:100dvh; border-radius:0; }
 #aaDayModal[role=dialog] .aa-modal-head { flex-shrink:0; padding:10px; }
 #aaDayModal[role=dialog] .aa-modal-head h4 { font-size:17px; }
 #aaDayModal[role=dialog] .aa-modal-body { padding:10px; overflow-x:hidden; }
 #aaDayModal[role=dialog] .ac-popup-date-nav { width:100%; order:3; margin:0; display:grid; grid-template-columns:40px minmax(0,1fr) 40px auto; }
 #aaDayModal[role=dialog] .ac-popup-date-nav input { width:100%!important; }
 #aaDayModal[role=dialog] .ac-popup-toolbar { grid-template-columns:minmax(0,1fr) auto; gap:8px; }
 #aaDayModal[role=dialog] .ac-popup-toolbar label { grid-column:1/-1; }
 #aaDayModal[role=dialog] .ac-mobile-sessions { display:flex; gap:8px; margin:12px 0; }
 .ac-mobile-sessions button { flex:1; min-width:0; min-height:44px; border:1px solid #cbdcf8; border-radius:10px; background:#f4f7ff; color:#173b79; font:inherit; font-size:12px; font-weight:700; }
 .ac-mobile-sessions button[aria-pressed=true] { background:#2563eb; color:white; border-color:#2563eb; }
 #aaDayGrid[data-mobile-session=first] .ac-popup-session:not(.first),
 #aaDayGrid[data-mobile-session=second] .ac-popup-session:not(.second),
 #aaDayGrid[data-mobile-session=other] .ac-popup-session:not(.other) { display:none; }
 #aaDayModal[role=dialog] .ac-popup-session { border:0; overflow:visible; }
 #aaDayModal[role=dialog] .ac-popup-session>header { border-radius:10px; padding:10px; gap:6px; }
 #aaDayModal[role=dialog] .ac-popup-session>header>div { padding:0; }
 #aaDayModal[role=dialog] .ac-popup-session>header>strong { margin:0; font-size:12px; width:auto; }
 #aaDayModal[role=dialog] .ac-popup-session>div { padding:0; }
 #aaDayModal[role=dialog] .zr-grid-toolbar { position:static; justify-content:flex-end; margin:8px 0; }
 #aaDayModal[role=dialog] .zr-grid-table-wrap { overflow:visible; border:0; }
 #aaDayModal[role=dialog] .zr-grid-table { display:block; width:100%; min-width:0; }
 #aaDayModal[role=dialog] .zr-grid-table thead { display:none; }
 #aaDayModal[role=dialog] .zr-grid-table tbody { display:grid; gap:12px; }
 #aaDayModal[role=dialog] .zr-grid-table tbody tr { display:flex; flex-wrap:wrap; align-items:center; gap:8px; border:1px solid #dce5f3; border-radius:12px; padding:14px; background:var(--card-bg,#fff); }
 #aaDayModal[role=dialog] .zr-grid-table tbody td { display:block; border:0; height:auto; min-height:0; min-width:0; padding:0; white-space:normal; overflow-wrap:anywhere; box-shadow:none; background:transparent; font-size:12px; }
 #aaDayModal[role=dialog] td:has(.ac-field-time) { order:0; }
 #aaDayModal[role=dialog] td:has(.ac-field-patientName) { order:1; }
 #aaDayModal[role=dialog] td:has(.ac-field-appointmentNumber) { order:2; }
 #aaDayModal[role=dialog] td:has(.ac-field-doctorName) { order:3; }
 #aaDayModal[role=dialog] td:has(.ac-field-mobile) { order:4; }
 #aaDayModal[role=dialog] td:has(.ac-field-source), #aaDayModal[role=dialog] td:has(.ac-field-status), #aaDayModal[role=dialog] td:has(.ac-field-paymentStatus) { order:5; }
 #aaDayModal[role=dialog] td:has(.ac-rescheduled) { order:6; }
 #aaDayModal[role=dialog] td:has(.ac-field-mobile[data-value=""]), #aaDayModal[role=dialog] td:has(.ac-field-mobile[data-value="-"]), #aaDayModal[role=dialog] td:has(.ac-field-rescheduleCount):empty, #aaDayModal[role=dialog] td:empty { display:none; }
 #aaDayModal[role=dialog] td:has(.ac-field-time) { font-size:17px; font-weight:750; }
 #aaDayModal[role=dialog] td:has(.ac-field-patientName) { flex:1; font-size:15px; font-weight:750; }
 #aaDayModal[role=dialog] td:has(.ac-field-appointmentNumber), #aaDayModal[role=dialog] td:has(.ac-field-doctorName) { flex-basis:100%; color:#64748b; }
 #aaDayModal[role=dialog] .zr-grid-actions { order:7; flex-basis:100%; text-align:right; padding-top:8px!important; }
 #aaDayModal[role=dialog] .row-action { min-width:44px; min-height:44px; }
 body:has(#aaDayModal[role=dialog]:not([hidden])) { overflow:hidden; }
}