/* Shared appointment card UI.
   Used by every role's appointment list so the cards look the same in the
   patient, doctor, admin, coordinator, and franchise dashboards. */

.appt-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.appt-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);
  box-shadow:0 10px 26px -20px rgba(4,54,83,.55);overflow:hidden;display:flex;flex-direction:column}
.appt-card-top{display:flex;align-items:center;gap:10px;padding:14px 16px;background:var(--brand-800);color:#fff}
.appt-card-day{font-size:2rem;line-height:1;font-weight:800;letter-spacing:-.02em}
.appt-card-mon{font-size:1rem;font-weight:700;opacity:.95}
.appt-card-time{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:.86rem;font-weight:600}
.appt-card-time .icon{width:16px;height:16px}
.appt-card-body{padding:16px;display:flex;flex-direction:column;gap:12px;flex:1}
.appt-card-doc{display:flex;align-items:center;gap:12px}
.appt-card-avatar{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--brand-50);color:var(--brand-700);font-weight:800;font-size:.92rem}
.appt-card-who{min-width:0}
/* Name and the line under it are block-level so that line wraps under the
   name instead of running on after it on one line. */
.appt-card-name{display:block;font-weight:800;color:var(--ink-900);font-size:.98rem;line-height:1.25}
.appt-card-clinic{display:block;color:var(--ink-600);font-size:.82rem;line-height:1.3;overflow-wrap:anywhere}
/* Roles that manage other people (admin, coordinator, franchise) show the
   counterparty name on its own line under the main name. */
.appt-card-sub{display:block;color:var(--ink-600);font-size:.82rem;line-height:1.3;overflow-wrap:anywhere}
.appt-card-status{align-self:flex-start}
/* The card pill is larger than the shared .status pill used by other tables,
   so the card colours are scoped to .appt-card to avoid both. */
.appt-card .appt-card-status{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px;
  font-size:.84rem;font-weight:700;border:1px solid transparent}
.appt-card .appt-card-status .icon{width:15px;height:15px}
.appt-card .appt-card-status.status-pending{background:#fff4e6;border-color:#f7c893;color:#c2650a}
.appt-card .appt-card-status.status-approved{background:#e7f7ec;border-color:#a9dcb9;color:#1c7a42}
.appt-card .appt-card-status.status-info{background:#dbeafe;border-color:#93c5fd;color:#1d4ed8}
.appt-card .appt-card-status.status-neutral{background:var(--surface-soft);border-color:var(--line);color:var(--ink-600)}
.appt-card .appt-card-status.status-danger{background:#fdecec;border-color:#f3b9b9;color:#b3261e}
/* General .status pill for non-card uses */
.status-info{color:#1d4ed8;background:#dbeafe}
/* Up to four actions per card depending on status, so they wrap. */
.appt-card-actions{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px}
.appt-card-actions .button{flex:1 1 auto;justify-content:center}
.appt-card-actions .appt-card-primary{background:var(--brand-800);border-color:var(--brand-800);color:#fff}
.appt-card-actions .appt-card-primary:hover{background:var(--brand-700);border-color:var(--brand-700)}
.appt-card-actions .appt-card-danger{color:#b3261e;border-color:#f3b9b9;background:#fff}
.appt-card-actions .appt-card-danger:hover{background:#fdecec;border-color:#e79c9c}
/* Counts under the heading, e.g. "2 confirmed, 2 pending". */
.appt-summary{margin:.35rem 0 0;color:var(--ink-600);font-size:.9rem}
/* Loading, empty, and error messages span the full grid. */
.appt-empty{grid-column:1/-1;text-align:center;color:var(--ink-600);padding:2rem 1rem;
  border:1px dashed var(--line);border-radius:var(--radius-md)}

@media(max-width:1400px){.appt-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1100px){.appt-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.appt-cards{grid-template-columns:1fr}}