/* ===== Appointly UI kit — loaded LAST so every screen shares one size scale and one look.
   Buttons: xs 30 · sm 36 · md 44 (default) · lg 52 px high, always pill-shaped, same weight and hover.
   Use the Cotton components (<c-ui.button>, <c-ui.badge>, <c-ui.card>, <c-ui.empty>, <c-ui.stat>, <c-ui.alert>). ===== */
:root { --ui-h-xs: 30px; --ui-h-sm: 36px; --ui-h-md: 44px; --ui-h-lg: 52px; --ui-radius: 14px; }

.btn { box-sizing: border-box; min-height: var(--ui-h-md); padding: 0 24px; border-radius: 999px; font: 700 .9rem/1 var(--font-primary);
  border: 1.5px solid transparent; gap: 8px; white-space: nowrap; text-decoration: none; letter-spacing: .01em; }
.btn-lg { min-height: var(--ui-h-lg); padding: 0 32px; font-size: 1rem; }
.btn-md { min-height: var(--ui-h-md); }
.btn-sm { min-height: var(--ui-h-sm); padding: 0 18px; font-size: .84rem; }
.btn-xs { min-height: var(--ui-h-xs); padding: 0 13px; font-size: .76rem; border-radius: 999px; gap: 6px; }
.btn i { font-size: .92em; }
.btn-primary { border-color: var(--primary); }
.btn-secondary { border-color: var(--secondary); }
.btn-outline { border: 1.5px solid var(--primary); background: transparent; color: var(--primary-dark); }
.btn-outline:hover { background: var(--primary); color: #fff; }
.btn-ghost { background: transparent; color: var(--text-secondary); border-color: transparent; box-shadow: none; }
.btn-ghost:hover { background: color-mix(in srgb, var(--primary) 9%, transparent); color: var(--primary-dark); transform: none; }
.btn-danger { background: #c0392b; border-color: #c0392b; color: #fff; }
.btn:disabled, .btn[aria-disabled=true] { opacity: .5; pointer-events: none; }
.btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 40%, transparent); outline-offset: 2px; }
/* hover: one calm lift for every variant */
.btn-primary:hover, .btn-secondary:hover, .btn-outline:hover, .btn-danger:hover { transform: translateY(-2px); }
/* action buttons inside tables/lists look like btn-xs */
.appt-actions button, .appt-actions .btn { min-height: var(--ui-h-xs); padding: 0 13px; border-radius: 999px; font: 700 .76rem var(--font-primary);
  border: 1.5px solid rgba(15,23,42,.14); background: #fff; color: var(--text-primary); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.appt-actions button:hover, .appt-actions .btn:hover { border-color: var(--primary); color: var(--primary-dark); background: #fff; transform: none; }
.appt-actions button.danger { color: #c0392b; } .appt-actions button.danger:hover { border-color: #c0392b; background: #fff5f5; }
.appt-actions form { display: contents; }

/* form controls share one height */
.ff input:not([type=checkbox]):not([type=radio]):not([type=hidden]), .ff select,
.form-panel input:not([type=checkbox]):not([type=radio]):not([type=hidden]), .form-panel select, .cal-select { min-height: var(--ui-h-md); border-radius: 12px; }

/* badge */
.ui-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 10px; border-radius: 999px; font: 700 .72rem var(--font-primary);
  background: rgba(15,23,42,.06); color: var(--text-secondary); white-space: nowrap; }
.ui-badge-primary { background: color-mix(in srgb, var(--primary) 12%, #fff); color: var(--primary-dark); }
.ui-badge-success { background: #e4f7ee; color: #0f7a4d; } .ui-badge-warning { background: #fff3d6; color: #8a5a00; }
.ui-badge-danger { background: #fde8e8; color: #b42318; } .ui-badge-info { background: #e3f1fb; color: #0b5c8f; }

/* card */
.ui-card { background: #fff; border: 1px solid rgba(15,23,42,.08); border-radius: var(--ui-radius); box-shadow: 0 4px 18px rgba(15,23,42,.05); margin-bottom: 18px; overflow: hidden; }
.ui-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid rgba(15,23,42,.07); }
.ui-card-head h2 { margin: 0; font-size: 1.05rem; } .ui-card-head h2 i { color: var(--secondary); margin-right: 6px; } .ui-card-head p { margin: 2px 0 0; color: var(--text-muted); font-size: .85rem; }
.ui-card-actions { display: flex; gap: 8px; flex-wrap: wrap; } .ui-card-body { padding: 18px 20px; } .ui-card-flush .ui-card-body { padding: 0; }

/* empty + stat + alert */
.ui-empty { text-align: center; padding: 36px 20px; color: var(--text-secondary); } .ui-empty > i { font-size: 1.8rem; color: var(--primary); opacity: .7; }
.ui-empty h3 { margin: 10px 0 4px; } .ui-empty p { margin: 0 auto; max-width: 420px; }
.ui-stat { display: flex; gap: 14px; align-items: center; padding: 16px 18px; background: #fff; border: 1px solid rgba(15,23,42,.08); border-radius: var(--ui-radius); }
.ui-stat-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--primary) 12%, #fff); color: var(--primary); }
.ui-stat small { display: block; color: var(--text-muted); font-weight: 600; } .ui-stat b { font-size: 1.5rem; line-height: 1.1; }
.ui-stat-success .ui-stat-ic { background: #e4f7ee; color: #0f7a4d; } .ui-stat-warning .ui-stat-ic { background: #fff3d6; color: #8a5a00; }
.ui-alert { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: 12px; font-size: .92rem; border: 1px solid transparent; }
.ui-alert-info { background: #e3f1fb; color: #0b5c8f; border-color: #bcdcf2; } .ui-alert-success { background: #e4f7ee; color: #0f7a4d; border-color: #b7e6d0; }
.ui-alert-warning { background: #fff3d6; color: #8a5a00; border-color: #f0d68a; } .ui-alert-danger { background: #fde8e8; color: #b42318; border-color: #f5b5b0; }

/* wide tables scroll inside their card on small screens instead of widening the page */
@media (max-width: 860px) { .appt-table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .panel, .ui-card { max-width: 100%; } }
.grid-2 > *, .grid-3 > *, .app-body > *, .app-main { min-width: 0; }
@media (max-width: 860px) { .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr) !important; } }