/* Clinic Appointment 1.4.2 — Precision Material UI layer
 * Visual-only layer. Booking/auth/availability logic is intentionally untouched.
 */
@import url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@master/Vazirmatn-font-face.css');
@import url('https://cdn.jsdelivr.net/gh/rastikerdar/samim-font@v4.0.5/dist/font-face.css');

:root {
  --ca-ui-primary:#4f6fff;
  --ca-ui-primary-2:#7657e8;
  --ca-ui-accent:#c44fa7;
  --ca-ui-ink:#17253f;
  --ca-ui-muted:#718096;
  --ca-ui-line:#dfe7f2;
  --ca-ui-surface:#ffffff;
  --ca-ui-soft:#f4f7fc;
  --ca-ui-blue-soft:#edf4ff;
  --ca-ui-purple-soft:#f4efff;
  --ca-ui-success:#138a68;
  --ca-ui-warning:#b96d12;
  --ca-ui-danger:#c53f55;
  --ca-ui-shadow:0 10px 28px rgba(28,52,91,.08),0 2px 7px rgba(28,52,91,.04);
  --ca-ui-shadow-hover:0 14px 34px rgba(28,52,91,.12),0 3px 9px rgba(28,52,91,.05);
}

/* ---------- Global typography ---------- */
.ca-app,
.ca-wrap {
  font-family:'Vazirmatn','Samim',Tahoma,sans-serif !important;
  font-size:16px !important;
  line-height:1.75 !important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.ca-app *, .ca-wrap * { font-family:inherit; }
.ca-app input,.ca-app select,.ca-app textarea { font-size:16px !important; }
.ca-app button,.ca-wrap button,.ca-wrap .button { font-size:14px !important; }

/* ---------- Booking / patient UI ---------- */
.ca-app {
  background:linear-gradient(145deg,#fff 0%,#f7fbff 68%,#f8f4ff 100%) !important;
  border:1px solid #e1e8f2 !important;
  border-radius:22px !important;
  box-shadow:var(--ca-ui-shadow) !important;
}
.ca-app .ca-title {
  font-size:22px !important;
  font-weight:800 !important;
  color:var(--ca-ui-ink) !important;
  letter-spacing:-.25px;
  border-bottom:0 !important;
  padding-bottom:4px !important;
}
.ca-app .ca-subtitle { font-size:18px !important; font-weight:800 !important; }
.ca-app .ca-label { font-size:16px !important; font-weight:700 !important; color:#44566f !important; }
.ca-app .ca-input {
  min-height:48px !important;
  border:1px solid #d9e3ef !important;
  border-radius:13px !important;
  background:#fff !important;
  box-shadow:0 2px 8px rgba(28,52,91,.035) !important;
  transition:border-color .18s,box-shadow .18s,transform .18s !important;
}
.ca-app .ca-input:hover { border-color:#b9c9df !important; }
.ca-app .ca-input:focus { border-color:#718bff !important; box-shadow:0 0 0 4px rgba(79,111,255,.11) !important; }
.ca-app .ca-btn {
  min-height:46px !important;
  border-radius:13px !important;
  padding:9px 18px !important;
  font-weight:800 !important;
  transition:transform .18s,box-shadow .18s,filter .18s !important;
}
.ca-app .ca-btn:hover { transform:translateY(-1px); filter:saturate(1.04); }
.ca-app .ca-btn-primary { background:linear-gradient(135deg,var(--ca-ui-primary),var(--ca-ui-primary-2)) !important; box-shadow:0 8px 18px rgba(79,111,255,.22) !important; }
.ca-app .ca-btn-success { background:linear-gradient(135deg,#119c79,#28b997) !important; box-shadow:0 8px 18px rgba(19,138,104,.18) !important; }
.ca-app .ca-btn-danger { background:linear-gradient(135deg,#d84d64,#c7438d) !important; box-shadow:0 8px 18px rgba(197,63,85,.18) !important; }
.ca-app .ca-btn-warn { background:linear-gradient(135deg,#d98b36,#c86a73) !important; box-shadow:0 8px 18px rgba(185,109,18,.16) !important; }
.ca-app .ca-btn-light { background:#fff !important; color:#536985 !important; border:1px solid #dce5f0 !important; box-shadow:0 4px 12px rgba(28,52,91,.06) !important; }
.ca-app .ca-tabs { gap:9px !important; }
.ca-app .ca-tab { min-height:44px !important; padding:8px 18px !important; border-radius:12px !important; background:#f6f8fc !important; border:1px solid #e0e7f0 !important; font-weight:700 !important; }
.ca-app .ca-tab.active { background:linear-gradient(135deg,var(--ca-ui-primary),var(--ca-ui-primary-2)) !important; border-color:transparent !important; box-shadow:0 7px 16px rgba(79,111,255,.18) !important; }

/* ---------- Panel header / live status ---------- */
.ca-app .ca-panel-topbar {
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  padding:11px 13px !important;
  margin:-8px -8px 18px !important;
  border:1px solid #e1e8f2 !important;
  border-radius:15px !important;
  background:rgba(255,255,255,.86) !important;
  box-shadow:0 5px 18px rgba(28,52,91,.055) !important;
}
.ca-app .ca-panel-user { font-weight:800 !important; color:var(--ca-ui-ink) !important; }
.ca-app .ca-panel-user .ca-muted { font-weight:600 !important; color:var(--ca-ui-muted) !important; }
.ca-app .ca-panel-topbar .ca-live-update-status {
  order:2 !important;
  margin-inline-start:auto !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:7px !important;
  padding:7px 11px !important;
  border-radius:999px !important;
  background:#f0faf7 !important;
  color:#14775f !important;
  border:1px solid #d3eee5 !important;
  font-size:13px !important;
  font-weight:800 !important;
}
.ca-app .ca-panel-topbar .ca-live-update-status:before { content:'' !important; width:8px !important; height:8px !important; border-radius:50% !important; background:#18a87f !important; box-shadow:0 0 0 4px rgba(24,168,127,.10) !important; }
.ca-app .ca-panel-topbar .ca-panel-logout { order:3 !important; margin:0 !important; }
.ca-app .ca-panel-topbar .ca-live-update-status.is-updated { background:#eef3ff !important; color:#4168dc !important; border-color:#d8e1ff !important; }

/* ---------- Management toolbar ---------- */
.ca-app .ca-management-toolbar {
  gap:12px !important;
  padding:14px !important;
  border:1px solid #e1e8f2 !important;
  border-radius:18px !important;
  background:linear-gradient(145deg,#fff,#f8fbff) !important;
  box-shadow:var(--ca-ui-shadow) !important;
}
.ca-app .ca-search-form-compact { gap:9px !important; }
.ca-app .ca-search-form-compact .ca-input { min-height:46px !important; }
.ca-app .ca-status-filter { gap:7px !important; margin:2px 0 0 !important; }
.ca-app .ca-pill { border-radius:999px !important; padding:7px 13px !important; background:#fff !important; border:1px solid #dce5f0 !important; color:#536985 !important; font-size:14px !important; font-weight:700 !important; transition:.18s !important; }
.ca-app .ca-pill:hover { transform:translateY(-1px); border-color:#b8c8df !important; background:#f8fbff !important; }
.ca-app .ca-pill.active { color:#fff !important; border-color:transparent !important; background:linear-gradient(135deg,var(--ca-ui-primary),var(--ca-ui-primary-2)) !important; box-shadow:0 6px 14px rgba(79,111,255,.18) !important; }

/* ---------- Management table ---------- */
.ca-app .ca-table-wrap { border:1px solid #e1e8f2 !important; border-radius:18px !important; overflow:auto !important; background:#fff !important; box-shadow:var(--ca-ui-shadow) !important; }
.ca-app .ca-table { min-width:1120px !important; border-collapse:separate !important; border-spacing:0 !important; }
.ca-app .ca-table th { position:sticky; top:0; z-index:2; background:#f5f8fd !important; color:#536982 !important; font-size:14px !important; font-weight:800 !important; padding:15px 16px !important; border-bottom:1px solid #dfe7f1 !important; }
.ca-app .ca-table td { font-size:15px !important; padding:15px 16px !important; color:#314a66 !important; border-bottom:1px solid #edf1f6 !important; }
.ca-app .ca-table tbody tr:hover td { background:#fbfdff !important; }
.ca-app .ca-table .ca-actions { min-width:330px !important; width:330px !important; padding:13px 14px !important; }
.ca-app .ca-actions .button,
.ca-app .ca-actions .ca-btn { margin:0 !important; }

/* ---------- Each appointment operation gets its own semantic visual identity ---------- */
.ca-app .ca-actions [data-ca-sub="appointment_edit"] { background:#eef3ff !important; color:#3f61d5 !important; border-color:#d4defd !important; }
.ca-app .ca-actions [data-ca-sub="approve"] { background:#eaf9f3 !important; color:#117c5d !important; border-color:#c9ecde !important; }
.ca-app .ca-actions [data-ca-sub="reject"] { background:#fff1f3 !important; color:#bd4056 !important; border-color:#f2cbd2 !important; }
.ca-app .ca-actions [data-ca-sub="done"] { background:#eaf7fb !important; color:#14738d !important; border-color:#c8e8f1 !important; }
.ca-app .ca-actions [data-ca-sub="no_show"] { background:#fff7e9 !important; color:#a86610 !important; border-color:#f0d8a9 !important; }
.ca-app .ca-actions [data-ca-sub="reschedule"] { background:#f3efff !important; color:#7250c8 !important; border-color:#ddd2fb !important; }
.ca-app .ca-actions [data-ca-sub="cancel"] { background:#fff2ed !important; color:#b85627 !important; border-color:#f1d1c3 !important; }
.ca-app .ca-actions [data-ca-sub="refund"] { background:#edf8ff !important; color:#1e6f9e !important; border-color:#cde6f5 !important; }
.ca-app .ca-actions [data-ca-sub^="restore_"] { background:#f2f5f8 !important; color:#53687c !important; border-color:#d9e1e9 !important; }
.ca-app .ca-actions [data-ca-sub="delete"] { background:#fff0f2 !important; color:#c3314b !important; border-color:#f0c7cf !important; }
.ca-app .ca-actions [data-ca-sub]:hover { filter:saturate(1.08) brightness(.985); transform:translateY(-1px); box-shadow:0 5px 12px rgba(28,52,91,.09) !important; }

/* ---------- Admin WP ---------- */
.ca-wrap { width:calc(100% - 40px) !important; max-width:none !important; margin:22px 20px 48px !important; }
.ca-wrap .ca-card,
.ca-wrap .ca-table-card,
.ca-wrap .ca-dashboard-toolbar,
.ca-wrap .ca-management-toolbar { border-radius:18px !important; box-shadow:var(--ca-ui-shadow) !important; }
.ca-wrap .ca-page-header h1,.ca-wrap>h1 { font-size:30px !important; font-weight:850 !important; }
.ca-wrap .ca-card-heading { padding:19px 22px !important; }
.ca-wrap .ca-form-grid { gap:20px !important; }
.ca-wrap .ca-form-grid label span,.ca-wrap .ca-inline-form label span { font-size:15px !important; font-weight:800 !important; color:#4d6078 !important; }
.ca-wrap input[type=text],.ca-wrap input[type=email],.ca-wrap input[type=url],.ca-wrap input[type=number],.ca-wrap input[type=password],.ca-wrap input[type=search],.ca-wrap select,.ca-wrap textarea,.ca-wrap .ca-modern-input,.ca-wrap .ca-input { font-size:16px !important; min-height:46px !important; border-radius:12px !important; }
.ca-wrap .button,.ca-wrap .ca-btn,.ca-wrap input[type=submit] { min-height:44px !important; border-radius:12px !important; padding:8px 16px !important; font-size:16px !important; }
.ca-wrap .ca-modern-table th,.ca-wrap .ca-table th,.ca-wrap .wp-list-table th { font-size:14px !important; padding:15px 17px !important; }
.ca-wrap .ca-modern-table td,.ca-wrap .ca-table td,.ca-wrap .wp-list-table td { font-size:15px !important; padding:15px 17px !important; }
.ca-wrap .ca-actions { min-width:310px !important; }
.ca-wrap .ca-actions .button,.ca-wrap .ca-actions .ca-btn { margin:0 !important; }

/* WordPress admin appointment operations */
.ca-wrap .ca-actions [data-ca-sub="appointment_edit"] { background:#eef3ff !important; color:#3f61d5 !important; border-color:#d4defd !important; }
.ca-wrap .ca-actions [data-ca-sub="approve"] { background:#eaf9f3 !important; color:#117c5d !important; border-color:#c9ecde !important; }
.ca-wrap .ca-actions [data-ca-sub="reject"] { background:#fff1f3 !important; color:#bd4056 !important; border-color:#f2cbd2 !important; }
.ca-wrap .ca-actions [data-ca-sub="done"] { background:#eaf7fb !important; color:#14738d !important; border-color:#c8e8f1 !important; }
.ca-wrap .ca-actions [data-ca-sub="no_show"] { background:#fff7e9 !important; color:#a86610 !important; border-color:#f0d8a9 !important; }
.ca-wrap .ca-actions [data-ca-sub="reschedule"] { background:#f3efff !important; color:#7250c8 !important; border-color:#ddd2fb !important; }
.ca-wrap .ca-actions [data-ca-sub="cancel"] { background:#fff2ed !important; color:#b85627 !important; border-color:#f1d1c3 !important; }
.ca-wrap .ca-actions [data-ca-sub="refund"] { background:#edf8ff !important; color:#1e6f9e !important; border-color:#cde6f5 !important; }
.ca-wrap .ca-actions [data-ca-sub^="restore_"] { background:#f2f5f8 !important; color:#53687c !important; border-color:#d9e1e9 !important; }
.ca-wrap .ca-actions [data-ca-sub="delete"] { background:#fff0f2 !important; color:#c3314b !important; border-color:#f0c7cf !important; }
.ca-wrap .ca-actions [data-ca-sub]:hover { transform:translateY(-1px); box-shadow:0 5px 12px rgba(28,52,91,.09) !important; }

/* Datepicker visual refinement only */
.ca-wrap .ca-datepicker,.ca-app .ca-datepicker { border-radius:18px !important; box-shadow:0 18px 45px rgba(35,65,110,.15),0 4px 12px rgba(35,65,110,.05) !important; }
.ca-wrap .ca-dp-day,.ca-app .ca-dp-day { font-size:15px !important; }
.ca-wrap .ca-dp-day.holiday,.ca-app .ca-dp-day.holiday { background:#fff0f4 !important; color:#c43c65 !important; font-weight:800 !important; }

/* Empty states / notices */
.ca-wrap .notice,.ca-app .ca-alert { border-radius:14px !important; border-left-width:4px !important; box-shadow:0 5px 16px rgba(28,52,91,.05) !important; font-size:15px !important; }
.ca-wrap .ca-empty-cell,.ca-app .ca-empty { padding:42px !important; color:#8292a6 !important; font-size:16px !important; }

@media(max-width:782px){
  .ca-wrap { width:calc(100% - 18px) !important; margin:14px 9px 32px !important; }
  .ca-app .ca-panel-topbar { flex-wrap:wrap !important; }
  .ca-app .ca-panel-topbar .ca-live-update-status { order:3 !important; width:100% !important; justify-content:center !important; margin:0 !important; }
  .ca-app .ca-panel-topbar .ca-panel-logout { order:2 !important; margin-inline-start:auto !important; }
  .ca-app .ca-table-wrap { border-radius:14px !important; }
  .ca-app .ca-table .ca-actions { min-width:300px !important; width:300px !important; }
}


/* -------------------------------------------------------------------------
 * 1.4.1 — compact typography, contrast, spacing and appointment rows
 * ------------------------------------------------------------------------- */
.ca-app,
.ca-wrap { font-size:16px !important; }
.ca-app .ca-btn,
.ca-wrap .button,
.ca-wrap .ca-btn,
.ca-wrap input[type=submit] { font-size:14px !important; }

/* Keep normal content at 16px while allowing headings/eyebrows to retain hierarchy. */
.ca-app p,
.ca-app li,
.ca-app td,
.ca-app th,
.ca-app label,
.ca-app .ca-muted,
.ca-wrap p,
.ca-wrap td,
.ca-wrap th,
.ca-wrap label,
.ca-wrap .description { font-size:16px !important; }
.ca-app .ca-subtitle { font-size:18px !important; }
.ca-app .ca-label { font-size:16px !important; }

/* Compact form controls: less vertical bulk, especially selects. */
.ca-app .ca-input,
.ca-wrap input[type=text],
.ca-wrap input[type=email],
.ca-wrap input[type=url],
.ca-wrap input[type=number],
.ca-wrap input[type=password],
.ca-wrap input[type=search],
.ca-wrap select,
.ca-wrap textarea,
.ca-wrap .ca-modern-input,
.ca-wrap .ca-input {
  min-height:42px !important;
  height:auto !important;
  padding:7px 11px !important;
  line-height:1.45 !important;
  box-sizing:border-box !important;
}
.ca-app select.ca-input,
.ca-wrap select,
.ca-wrap select.ca-modern-input { padding-top:6px !important; padding-bottom:6px !important; }
.ca-app textarea.ca-input,
.ca-wrap textarea { min-height:78px !important; }

/* Spacing is handled by the container gap block appended at the end of this
   file (2.1): buttons carry no margins of their own. */
.ca-app .ca-actions,
.ca-wrap .ca-actions { padding-inline:10px !important; }

/* High-contrast semantic tabs and filters. */
.ca-app .ca-tab-patient { color:#2856c7 !important; background:#eaf1ff !important; border-color:#c9d8ff !important; }
.ca-app .ca-tab-patient.active { color:#fff !important; background:linear-gradient(135deg,#315fe8,#604bd4) !important; border-color:transparent !important; }
.ca-app .ca-tab-staff { color:#7b3f86 !important; background:#f8ecfb !important; border-color:#e7cfee !important; }
.ca-app .ca-tab-staff.active { color:#fff !important; background:linear-gradient(135deg,#8050a8,#b14691) !important; border-color:transparent !important; }
.ca-app .ca-pill-today { color:#166a7b !important; background:#e9f8fb !important; border-color:#c4e8ef !important; }
.ca-app .ca-pill-today.active { color:#fff !important; background:#147b90 !important; border-color:#147b90 !important; }
.ca-app .ca-pill-all { color:#4d5f78 !important; background:#f1f4f8 !important; border-color:#d7e0ea !important; }
.ca-app .ca-pill-all.active { color:#fff !important; background:#53657e !important; border-color:#53657e !important; }
.ca-app .ca-pill-status-pending_payment { color:#7a4a00 !important; background:#fff3d9 !important; border-color:#f0d39b !important; }
.ca-app .ca-pill-status-pending_payment.active { color:#fff !important; background:#a96200 !important; border-color:#a96200 !important; }
.ca-app .ca-pill-status-pending_review { color:#185a96 !important; background:#e9f2fc !important; border-color:#c8def4 !important; }
.ca-app .ca-pill-status-pending_review.active { color:#fff !important; background:#246ca8 !important; border-color:#246ca8 !important; }
.ca-app .ca-pill-status-approved { color:#126746 !important; background:#e8f8f0 !important; border-color:#c6e9d9 !important; }
.ca-app .ca-pill-status-approved.active { color:#fff !important; background:#147b5a !important; border-color:#147b5a !important; }
.ca-app .ca-pill-status-canceled { color:#526274 !important; background:#eef2f6 !important; border-color:#d8e0e8 !important; }
.ca-app .ca-pill-status-canceled.active { color:#fff !important; background:#5b6b7d !important; border-color:#5b6b7d !important; }
.ca-app .ca-pill-status-rejected { color:#9b2d3e !important; background:#fff0f3 !important; border-color:#f1cbd3 !important; }
.ca-app .ca-pill-status-rejected.active { color:#fff !important; background:#b3344b !important; border-color:#b3344b !important; }
.ca-app .ca-pill-status-done { color:#126b70 !important; background:#e9f8f8 !important; border-color:#c7e8e8 !important; }
.ca-app .ca-pill-status-done.active { color:#fff !important; background:#147b80 !important; border-color:#147b80 !important; }
.ca-app .ca-pill-status-no_show { color:#80500b !important; background:#fff6e6 !important; border-color:#efd7aa !important; }
.ca-app .ca-pill-status-no_show.active { color:#fff !important; background:#a8680f !important; border-color:#a8680f !important; }

/* Status badges: strong contrast on pale surfaces. */
.ca-app .ca-badge-pending_payment,.ca-wrap .ca-badge-pending_payment { background:#fff0c9 !important; color:#754500 !important; border:1px solid #e7c26c !important; }
.ca-app .ca-badge-pending_review,.ca-wrap .ca-badge-pending_review { background:#e5f0ff !important; color:#154f86 !important; border:1px solid #bfd6f2 !important; }
.ca-app .ca-badge-approved,.ca-wrap .ca-badge-approved { background:#e3f7ee !important; color:#0d6244 !important; border:1px solid #bfe4d2 !important; }
.ca-app .ca-badge-canceled,.ca-wrap .ca-badge-canceled { background:#e9edf2 !important; color:#4b5a6b !important; border:1px solid #cfd8e2 !important; }
.ca-app .ca-badge-rejected,.ca-wrap .ca-badge-rejected { background:#ffe8ed !important; color:#8f2437 !important; border:1px solid #efbdc8 !important; }
.ca-app .ca-badge-done,.ca-wrap .ca-badge-done { background:#e3f5f4 !important; color:#0b6264 !important; border:1px solid #b9dddd !important; }
.ca-app .ca-badge-no_show,.ca-wrap .ca-badge-no_show { background:#fff0d8 !important; color:#7a4b08 !important; border:1px solid #ebce9b !important; }

/* Two-row appointment records: details first, operations underneath. */
.ca-app .ca-table tbody tr[data-row],
.ca-wrap .ca-table tbody tr[data-row] { border:0 !important; }
.ca-app .ca-table tbody tr[data-row] td,
.ca-wrap .ca-table tbody tr[data-row] td { border-bottom:0 !important; }
.ca-app .ca-table tbody tr.ca-operation-row td,
.ca-wrap .ca-table tbody tr.ca-operation-row td {
  border-top:1px solid #edf1f6 !important;
  border-bottom:8px solid #fff !important;
  background:#f8fbff !important;
  padding:10px 14px 12px !important;
}
.ca-app .ca-table tbody tr.ca-operation-row,
.ca-wrap .ca-table tbody tr.ca-operation-row {
  box-shadow:0 7px 14px rgba(28,52,91,.035) !important;
}
.ca-app .ca-table tbody tr.ca-operation-row:not(:last-child),
.ca-wrap .ca-table tbody tr.ca-operation-row:not(:last-child) { margin-bottom:8px !important; }
.ca-app .ca-table tbody tr.ca-operation-row .ca-actions,
.ca-wrap .ca-table tbody tr.ca-operation-row .ca-actions {
  min-width:0 !important;
  width:auto !important;
  text-align:right !important;
  white-space:normal !important;
}
.ca-app .ca-table tbody tr[data-row] td.ca-operation-placeholder,
.ca-wrap .ca-table tbody tr[data-row] td.ca-operation-placeholder {
  width:1% !important;
  padding:0 !important;
  border:0 !important;
  background:#fff !important;
}
.ca-app .ca-table tbody tr[data-row] + tr.ca-operation-row td:first-child,
.ca-wrap .ca-table tbody tr[data-row] + tr.ca-operation-row td:first-child { border-radius:0 0 12px 12px !important; }

/* Keep the panel desktop-first; only the patient booking form gets mobile layout. */
@media(max-width:700px){
  .ca-app #ca-booking-form { width:100% !important; }
  .ca-app #ca-booking-form .ca-row { display:grid !important; grid-template-columns:1fr !important; gap:0 !important; }
  .ca-app #ca-booking-form .ca-col { width:100% !important; min-width:0 !important; }
  .ca-app #ca-booking-form .ca-input { width:100% !important; max-width:100% !important; }
  .ca-app #ca-booking-form .ca-slots { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px !important; }
  .ca-app #ca-booking-form .ca-btn,
  .ca-app #ca-booking-form .ca-cancel-booking { width:100% !important; margin-inline:0 !important; }
  .ca-app #ca-booking-form .ca-booking-heading { gap:10px !important; }
}


/* 1.4.1 — do not reflow the management panel on mobile; keep its desktop table/toolbar behavior. */
@media(max-width:782px){
  .ca-app.ca-panel { padding:28px !important; }
  .ca-app.ca-panel .ca-panel-topbar { flex-wrap:nowrap !important; }
  .ca-app.ca-panel .ca-panel-topbar .ca-live-update-status { width:auto !important; margin-inline-start:auto !important; }
  .ca-app.ca-panel .ca-panel-topbar .ca-panel-logout { margin-inline-start:0 !important; }
  .ca-app.ca-panel .ca-table-wrap { border-radius:18px !important; }
}


/* 1.4.2 — appointment cards, compact controls and precise mobile booking layout */
.ca-app,
.ca-wrap { font-size:16px !important; }
.ca-app button,
.ca-wrap button,
.ca-app .ca-btn,
.ca-wrap .button { font-size:14px !important; }
.ca-app input,
.ca-app select,
.ca-app textarea,
.ca-wrap input,
.ca-wrap select,
.ca-wrap textarea { font-size:16px !important; }

.ca-app .ca-input,
.ca-wrap .ca-input,
.ca-wrap .ca-modern-input {
  min-height:42px !important;
  height:42px !important;
  padding:7px 11px !important;
  line-height:1.45 !important;
  box-sizing:border-box !important;
}
.ca-app textarea.ca-input,
.ca-wrap textarea.ca-input { height:auto !important; min-height:72px !important; }
.ca-app .ca-btn,
.ca-wrap .button,
.ca-wrap .ca-btn {
  min-height:40px !important;
  padding:7px 13px !important;
  margin:0 !important;
  line-height:1.4 !important;
}
.ca-app .ca-btn-sm,
.ca-wrap .ca-btn-sm { min-height:36px !important; padding:6px 11px !important; margin:0 !important; }
.ca-app .ca-row { gap:16px !important; }

/* Appointment list is intentionally card-based rather than a dense table. */
.ca-appointment-list { display:flex; flex-direction:column; gap:0; margin-top:10px; }
.ca-appointment-card {
  margin:0 0 10px !important;
  padding:14px 16px 13px !important;
  border:1px solid #dfe7f1 !important;
  border-radius:16px !important;
  background:#fff !important;
  box-shadow:0 5px 18px rgba(28,52,91,.055) !important;
  overflow:visible !important;
}
.ca-appointment-card:hover { box-shadow:0 8px 24px rgba(28,52,91,.08) !important; }
.ca-appt-card-top {
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:22px !important;
  padding-bottom:12px !important;
  border-bottom:1px solid #edf1f6 !important;
}
.ca-appt-card-services,
.ca-appt-card-statuses { display:flex; align-items:center; gap:22px; min-width:0; }
.ca-appt-card-statuses { justify-content:flex-end; }
.ca-appt-card-services > div,
.ca-appt-card-statuses > div { display:flex; flex-direction:column; gap:2px; min-width:0; }
.ca-appt-card-top span,
.ca-appt-card-info span { font-size:12px !important; color:#8190a3 !important; font-weight:600 !important; }
.ca-appt-card-top strong,
.ca-appt-card-info strong { font-size:16px !important; color:#263b55 !important; font-weight:700 !important; }
.ca-appt-card-info {
  display:flex !important;
  align-items:center !important;
  justify-content:space-around !important;
  gap:16px !important;
  padding:13px 2px !important;
  flex-wrap:wrap !important;
}
.ca-appt-card-info > div { display:flex; flex-direction:column; gap:2px; min-width:110px; text-align:center; }
.ca-appt-card-info .ca-appt-notes { flex:1 1 180px; max-width:360px; }
.ca-appt-payment-ref,
.ca-appt-reschedule-note {
  margin-top:3px !important;
  padding-top:8px !important;
  border-top:1px dashed #e5ebf2 !important;
  color:#687a8f !important;
  font-size:13px !important;
}
.ca-appt-card-actions {
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  flex-wrap:wrap !important;
  gap:0 !important;
  margin-top:10px !important;
  padding-top:10px !important;
  border-top:1px solid #edf1f6 !important;
}
.ca-appt-card-actions .ca-btn { margin:0 !important; }
.ca-empty-card {
  margin-top:10px !important;
  margin-bottom:10px !important;
  padding:24px !important;
  border:1px dashed #d6e0eb !important;
  border-radius:14px !important;
  background:#fff !important;
  text-align:center !important;
  color:#718096 !important;
  font-size:16px !important;
}
.ca-appointment-edit-row,
.ca-reschedule-row {
  margin:10px 0 !important;
  display:block !important;
}
.ca-appointment-edit-row > div,
.ca-reschedule-row > div {
  width:100% !important;
}

/* Only booking form becomes one-column on phones/tablet widths. */
@media screen and (max-width:782px){
  .ca-app #ca-booking-form { width:100% !important; max-width:100% !important; }
  .ca-app #ca-booking-form .ca-row,
  .ca-app #ca-booking-form .ca-row > .ca-col,
  .ca-app #ca-booking-form .ca-col { display:block !important; width:100% !important; min-width:0 !important; flex:none !important; }
  .ca-app #ca-booking-form .ca-row { margin:0 !important; }
  .ca-app #ca-booking-form .ca-col { margin:0 0 12px !important; }
  .ca-app #ca-booking-form .ca-input { width:100% !important; max-width:none !important; box-sizing:border-box !important; }
  .ca-app #ca-booking-form .ca-slots { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; width:100% !important; }
  .ca-app #ca-booking-form .ca-slot { width:100% !important; box-sizing:border-box !important; }
  .ca-app #ca-booking-form .ca-btn,
  .ca-app #ca-booking-form .ca-cancel-booking { width:100% !important; margin-inline:0 !important; }
}

@media screen and (max-width:600px){
  .ca-app .ca-appointment-card { padding:12px !important; }
  .ca-appt-card-top { flex-direction:column !important; gap:12px !important; }
  .ca-appt-card-services,
  .ca-appt-card-statuses { width:100%; justify-content:space-between; gap:12px; }
  .ca-appt-card-info { justify-content:space-between !important; gap:12px !important; }
  .ca-appt-card-info > div { min-width:calc(50% - 12px); text-align:right; }
  .ca-appt-card-info .ca-appt-notes { max-width:none; flex-basis:100%; }
}

/* 1.4.4 structural refinements */
.ca-app .ca-btn, .ca-wrap .button { font-size:14px !important; }
.ca-app .ca-input, .ca-app select.ca-input { min-height:42px !important; padding:7px 11px !important; }
.ca-app .ca-btn { padding:7px 14px !important; margin:0 !important; }
.ca-app .ca-appt-card { margin:10px 0 !important; }
.ca-app .ca-appt-card-top { align-items:center !important; }
.ca-app .ca-appt-card-services { flex:1 1 auto !important; }
.ca-app .ca-appt-card-services > div { width:100% !important; }
.ca-app .ca-appt-card-statuses { flex:0 0 auto !important; }
.ca-app .ca-appt-card-actions { display:flex !important; justify-content:flex-start !important; align-items:center !important; flex-wrap:wrap !important; gap:10px !important; }
.ca-app .ca-appt-card-actions .ca-btn { margin:0 !important; }
@media screen and (max-width:1024px){
  .ca-app #ca-booking-form .ca-row { display:grid !important; grid-template-columns:minmax(0,1fr) !important; width:100% !important; gap:0 !important; }
  .ca-app #ca-booking-form .ca-row > .ca-col { display:block !important; width:100% !important; min-width:0 !important; max-width:none !important; flex:none !important; margin:0 0 14px !important; }
  .ca-app #ca-booking-form .ca-row > .ca-col:empty { display:none !important; }
}
@media screen and (max-width:600px){
  .ca-app .ca-appt-card-top { flex-direction:row !important; align-items:flex-start !important; }
  .ca-app .ca-appt-card-services { min-width:0 !important; }
  .ca-app .ca-appt-card-statuses { min-width:120px !important; flex-direction:column !important; align-items:flex-end !important; gap:7px !important; }
  .ca-app .ca-appt-card-info > div { min-width:0 !important; flex:1 1 30% !important; }
}

/* ===== Clinic Appointment — UX enhancements: toast / modal / spinner / login ===== */

/* Toast notifications (auto-dismiss after 5s) */
.ca-toast-stack{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:99999;display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none;font-family:'Vazirmatn','Samim',Tahoma,sans-serif;direction:rtl}
.ca-toast{pointer-events:auto;min-width:240px;max-width:92vw;padding:12px 18px 12px 16px;border-radius:12px;font-size:14px;font-weight:600;color:#fff;box-shadow:0 12px 32px rgba(20,40,70,.22);display:flex;align-items:center;gap:10px;opacity:0;transform:translateY(-12px);transition:opacity .25s,transform .25s}
.ca-toast.is-visible{opacity:1;transform:translateY(0)}
.ca-toast.is-leaving{opacity:0;transform:translateY(-12px)}
.ca-toast::before{content:"";width:18px;height:18px;flex:0 0 18px;border-radius:50%;background:rgba(255,255,255,.92) center/12px no-repeat}
.ca-toast-success{background:linear-gradient(135deg,#15a36b,#1ec08a)}
.ca-toast-error{background:linear-gradient(135deg,#d8455f,#e8728a)}
.ca-toast-success::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315a36b' stroke-width='3'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E")}
.ca-toast-error::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d8455f' stroke-width='3'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")}

/* Confirm modal */
.ca-modal-overlay{position:fixed;inset:0;background:rgba(16,30,52,.45);z-index:99998;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .2s;font-family:'Vazirmatn','Samim',Tahoma,sans-serif}
.ca-modal-overlay.is-visible{opacity:1}
.ca-modal{background:#fff;border-radius:18px;max-width:420px;width:100%;padding:24px;box-shadow:0 20px 60px rgba(15,35,70,.3);transform:scale(.96);transition:transform .2s;text-align:center}
.ca-modal-overlay.is-visible .ca-modal{transform:scale(1)}
.ca-modal p{font-size:15px;line-height:1.7;color:#2a3b54;margin:0 0 20px}
.ca-modal-actions{display:flex;gap:10px;justify-content:center}
.ca-modal-actions .ca-btn{flex:1;max-width:160px}

/* Button spinner */
.ca-btn.is-loading{position:relative;color:transparent!important;pointer-events:none}
.ca-btn.is-loading::after{content:"";position:absolute;top:50%;left:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border:2px solid rgba(255,255,255,.55);border-top-color:#fff;border-radius:50%;animation:ca-spin .7s linear infinite}
@keyframes ca-spin{to{transform:rotate(360deg)}}

/* Field error state */
.ca-input.ca-field-error{border-color:#e0526b!important;box-shadow:0 0 0 4px rgba(224,82,107,.14)!important;background:#fff5f7!important}

/* Login form polish */
.ca-login-box,.ca-panel-login{max-width:420px;margin:18px auto;background:#fff;border:1px solid #e6edf6;border-radius:20px;box-shadow:0 16px 40px rgba(20,45,80,.08);padding:30px 28px}
.ca-login-box .ca-title,.ca-panel-login .ca-title{text-align:center;margin-bottom:6px}
.ca-login-box .ca-tabs,.ca-panel-login .ca-tabs{display:flex;gap:6px;background:#eef3f9;padding:5px;border-radius:12px;margin-bottom:18px}
.ca-login-box .ca-tab,.ca-panel-login .ca-tab{flex:1;background:transparent;border:0;border-radius:9px;padding:10px;font-weight:700;color:#5b7186;cursor:pointer;font-size:14px}
.ca-login-box .ca-tab.active,.ca-panel-login .ca-tab.active{background:#fff;color:#2f6fd0;box-shadow:0 2px 8px rgba(15,40,80,.08)}
.ca-login-box .ca-label,.ca-panel-login .ca-label{display:block;margin:14px 0 7px;font-weight:700;color:#44566f;font-size:14px}
.ca-login-box .ca-input,.ca-panel-login .ca-input{width:100%;min-height:48px;padding:11px 14px;font-size:15px;border:1px solid #d9e3ef;border-radius:13px;background:#fff;box-sizing:border-box}
.ca-login-box .ca-input:focus,.ca-panel-login .ca-input:focus{outline:none;border-color:#6b8fff;box-shadow:0 0 0 4px rgba(79,124,255,.12)}
.ca-login-box .ca-btn,.ca-panel-login .ca-btn{width:100%;margin-top:16px;min-height:48px;font-size:15px;font-weight:700;border-radius:13px;border:0;cursor:pointer}
.ca-password-wrap{position:relative}
.ca-password-wrap .ca-input{padding-left:52px}
.ca-password-toggle{position:absolute;left:8px;top:50%;transform:translateY(-50%);border:0;background:transparent;cursor:pointer;color:#7a8ba0;font-size:13px;padding:6px 8px;border-radius:8px}
.ca-password-toggle:hover{background:#eef3f9;color:#2f6fd0}

/* ===== Clinic Appointment — UI polish (v1.4.5) ===== */

/* Lighten placeholder text */
.ca-app input::placeholder,
.ca-app textarea::placeholder,
.ca-wrap input::placeholder,
.ca-wrap textarea::placeholder,
.ca-input::placeholder { color:#aab4c4 !important; opacity:1; }

/* Buttons never own spacing in 2.1 — see the gap model at the end of this file. */
.ca-btn { margin:0 !important; }

/* Active panel tab: white text on the colored gradient background */
.ca-panel .ca-tab.active { color:#fff !important; }

/* Panel appointment table-wrap: keep scroll, drop the box chrome */
.ca-app.ca-panel .ca-table-wrap { background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; overflow:auto !important; }

/* Dashboard: full-width, polished performance tables */
.ca-dashboard-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.ca-dashboard .ca-card { width:100%; }
.ca-dashboard .ca-table-wrap { overflow-x:auto; width:100%; }
.ca-dashboard .ca-table { width:100% !important; min-width:0 !important; border-collapse:separate; border-spacing:0; font-size:14px; }
.ca-dashboard .ca-table th { background:#f5f8fd; color:#536982; font-weight:800; padding:13px 14px; text-align:right; border-bottom:1px solid #dfe7f1; }
.ca-dashboard .ca-table td { padding:12px 14px; color:#314a66; border-bottom:1px solid #edf1f6; }
.ca-dashboard .ca-table tbody tr:hover td { background:#fbfdff; }
.ca-dashboard .ca-table .ca-empty { padding:18px; text-align:center; color:#8a97a8; }
@media (max-width:760px){ .ca-dashboard-columns { grid-template-columns:1fr; } }


/* -------------------------------------------------------------------------
 * 2.1 — spacing model, editor actions, branch cards and the activity log.
 *
 * Spacing rule: controls never carry margins — their flex container owns the
 * gap. That is what fixes the uneven look (a row of buttons used to have 10px
 * between two buttons but only 5px at the container edges, and the 8px bottom
 * margin made wrapped rows read as a taller vertical rhythm).
 * ----------------------------------------------------------------------- */
.ca-app .ca-tabs,
.ca-app .ca-booking-actions,
.ca-app .ca-form-actions,
.ca-app .ca-filter,
.ca-app .ca-status-filter,
.ca-app .ca-actions,
.ca-app .ca-appt-card-actions,
.ca-app .ca-pagination,
.ca-app .ca-editor-actions,
.ca-app .ca-activities-toolbar,
.ca-app .ca-search-form,
.ca-wrap .ca-tabs,
.ca-wrap .ca-filter,
.ca-wrap .ca-actions,
.ca-wrap .ca-appt-card-actions,
.ca-wrap .ca-pagination,
.ca-wrap .ca-editor-actions,
.ca-wrap .ca-search-form,
.ca-wrap .ca-activities-toolbar,
.ca-wrap .tablenav-pages {
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  column-gap:var(--ca-ui-gap,8px) !important;
  row-gap:var(--ca-ui-gap,8px) !important;
}
.ca-app .ca-btn,
.ca-app .ca-tab,
.ca-app .ca-pill,
.ca-app .ca-actions .button,
.ca-app .ca-actions .ca-btn,
.ca-app .ca-appt-card-actions .ca-btn,
.ca-app .ca-pagination .ca-pill,
.ca-wrap .button,
.ca-wrap .ca-btn,
.ca-wrap .ca-pill,
.ca-wrap .ca-actions .button,
.ca-wrap .ca-actions .ca-btn,
.ca-wrap .tablenav .button { margin:0 !important; }
.ca-app .ca-actions,
.ca-wrap .ca-actions { padding-inline:10px !important; }
.ca-app .ca-appointment-list { gap:10px !important; }
.ca-app .ca-tab { margin:0 !important; }

/* The editor action row (save / close) is a real, styled row in both contexts. */
.ca-editor-actions {
  display:flex !important; flex-wrap:wrap !important; align-items:center !important;
  gap:var(--ca-ui-gap,8px) !important;
  margin-top:12px !important; padding-top:12px !important;
  border-top:1px solid #edf1f6 !important;
}
.ca-app .ca-appointment-edit-row { padding:14px 0 4px !important; }
.ca-appointment-editor {
  background:#fff !important;
  border:1px solid #e2e7ee !important;
  border-radius:16px !important;
  padding:16px !important;
  box-shadow:0 10px 28px rgba(15,40,80,.08) !important;
}
.ca-editor-heading { display:flex; align-items:baseline; gap:10px; margin-bottom:10px; }
.ca-editor-heading strong { color:#102a43; font-size:15px; }
.ca-check-col { display:flex; align-items:flex-end; }
.ca-check-col .ca-check-card { margin:0; width:100%; }

/* Counters next to filters and tabs. */
.ca-pill-count,
.ca-tab-count {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; padding:1px 7px; margin-inline-start:6px;
  border-radius:999px; background:#eef5fb; color:#1f6fb2;
  font-size:11.5px; font-weight:800;
}
.ca-pill.active .ca-pill-count,
.ca-tab.active .ca-tab-count { background:rgba(255,255,255,.22); color:#fff; }
.ca-pagination-summary { color:#7a8797; font-size:12.5px; font-weight:600; }
.ca-pagination-links { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }

/* Branch filter cards (wp-admin appointments list). */
.ca-wrap .ca-branch-switcher { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; }
.ca-wrap .ca-branch-switcher .ca-filter-card { flex-direction:column; align-items:flex-start; gap:5px; }
.ca-wrap .ca-filter-card.is-active { border-color:#1f6fb2; box-shadow:0 0 0 2px rgba(31,111,178,.14),0 7px 18px rgba(15,40,80,.09); }
.ca-filter-card-title { display:block; color:#123c63; font-size:14px; font-weight:700; }
.ca-filter-card-meta { display:flex; gap:10px; align-items:center; margin-top:4px; color:#7a8797; font-size:11.5px; }
.ca-filter-card-today { color:#207244; font-weight:700; }

/* Activity log (panel + wp-admin). */
.ca-activity-list { display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.ca-activity-item { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; padding:12px 14px; background:#fff; border:1px solid #e6edf6; border-radius:14px; }
.ca-activity-what { font-size:12px; font-weight:800; color:#1f6fb2; background:#eef5fb; border-radius:999px; padding:3px 10px; }
.ca-activity-text { flex:1 1 320px; color:#2d4257; font-size:13.5px; line-height:1.8; }
.ca-activity-who { color:#5d6b7b; font-size:12px; font-weight:700; }
.ca-activity-who em { font-style:normal; color:#8292a6; font-weight:600; }
.ca-activity-time { color:#8292a6; font-size:11.5px; white-space:nowrap; }
.ca-activity-ip { color:#aab4c4; font-size:11px; }
.ca-activities-toolbar { margin-top:10px; }
.ca-activities-box .ca-muted { line-height:1.9; }

/* Insurance screens: base / supplemental switcher. */
.ca-insurance-switcher { display:flex; gap:8px; margin:14px 0 4px; flex-wrap:wrap; }
.ca-insurance-switcher .ca-pill { padding:6px 14px; border:1px solid #dbe4ee; border-radius:999px; background:#fff; color:#425466; text-decoration:none; font-size:13px; font-weight:700; }
.ca-insurance-switcher .ca-pill.active { background:#1f6fb2; border-color:#1f6fb2; color:#fff; }

/* Reschedule box shares the editor look. */
.ca-reschedule-box { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:12px 14px !important; }
.ca-reschedule-title { color:#102a43; font-size:14px; }
.ca-reschedule-fields { display:flex; flex-wrap:wrap; align-items:center; gap:8px; flex:1 1 320px; }

/* Small note under a field (e.g. "this one does not change the price"). */
.ca-field-hint { margin:4px 0 0 !important; color:#7a8797 !important; font-size:11.5px !important; line-height:1.7 !important; }

/* Booking form: two insurance selects side by side. */
.ca-app #ca-booking-form .ca-insurance-row { margin-top:4px; }
.ca-app #ca-booking-form .ca-row + .ca-row { margin-top:4px; }
.ca-app .ca-insurance-row > .ca-col { min-width:0; }
.ca-app .ca-booking-actions { padding:0 16px 16px; }
.ca-app .ca-booking-actions .ca-btn { margin:0 !important; }
form > .ca-btn { margin-top:6px !important; }

@media screen and (max-width:782px) {
  .ca-app.ca-panel .ca-appointment-edit-row { padding:10px 0 0 !important; }
  .ca-appointment-editor { padding:12px !important; }
  .ca-activity-item { padding:11px 12px; }
  .ca-wrap .ca-branch-switcher { grid-template-columns:1fr 1fr; }
}