/* ===== 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; } }

/* ===== flat, theme-coloured surfaces: no gradients, no hard-coded indigo ===== */
.hm-hero { background: color-mix(in srgb, var(--primary) 6%, #fff) !important; }
.auth-aside, :root[data-theme] .auth-aside { background: var(--primary-dark) !important; }
.auth-aside .aurora, .auth-aside .ring { display: none !important; }
.fx-glow, [style*="--mx"] { background-image: none; }
.btn-primary::before, .btn-secondary::before { background-image: none !important; }
#top-loader { background: var(--primary) !important; }

/* ===== calendar events: readable at any size, every status has a look ===== */
.cal-ev { min-height: 34px; padding: 4px 8px 4px 9px; border: 0; border-left: 4px solid var(--primary); background: color-mix(in srgb, var(--primary) 14%, #fff); color: var(--text-primary); overflow: hidden; }
.cal-ev.confirmed { border-left-color: var(--primary); }
.cal-ev.pending { border-left-color: #f59e0b; background: #fff4dc; border-left-style: dashed; }
.cal-ev.checked_in, .cal-ev.in_progress { border-left-color: #0e7490; background: #dff3f8; }
.cal-ev.completed { border-left-color: #16a34a; background: #e4f7ee; opacity: 1; }
.cal-ev.cancelled_client, .cal-ev.cancelled_provider { border-left-color: #9aa3b2; background: #f1f3f6; color: #6b7280; opacity: .9; }
.cal-ev.cancelled_client b, .cal-ev.cancelled_provider b { text-decoration: line-through; }
.cal-ev.cancelled_client small::before, .cal-ev.cancelled_provider small::before { content: "Cancelled · "; font-weight: 700; }
.cal-ev.no_show { border-left-color: #e11d48; background: #fde8ec; text-decoration: none; opacity: 1; }
.cal-ev.no_show small::before { content: "No-show · "; font-weight: 700; }
.cal-ev b { font-size: .78rem; } .cal-ev { display: flex; flex-direction: column; justify-content: flex-start; }
.cal-ev:hover, .cal-ev:focus-visible { min-width: 170px; z-index: 20; outline: 2px solid var(--primary); box-shadow: 0 10px 28px rgba(15,23,42,.22); }

/* notification switches */
.np-list { display: grid; } .np-row { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 14px 0; border-bottom: 1px solid rgba(15,23,42,.07); } .np-row:last-child { border-bottom: 0; }
.np-text { display: grid; gap: 2px; cursor: pointer; } .np-text b { font-size: .95rem; } .np-text small { color: var(--text-muted); font-size: .82rem; line-height: 1.35; }
.np-control input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 46px; height: 26px; border-radius: 999px; background: rgba(15,23,42,.18); position: relative; cursor: pointer; transition: background .18s; flex: none; margin: 0; }
.np-control input[type=checkbox]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .18s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.np-control input[type=checkbox]:checked { background: var(--primary); } .np-control input[type=checkbox]:checked::after { transform: translateX(20px); }
.np-control.sel select { min-height: var(--ui-h-sm); padding: 0 12px; border: 1.5px solid rgba(15,23,42,.14); border-radius: 12px; font: inherit; background: #fff; }
.panel .np-list, .ui-card-body .np-list { padding: 0 20px 6px; } .ui-card-body .np-list { padding: 0; }
.ff2 select { padding-top: 25px; padding-bottom: 6px; } .ff2 input[type=date], .ff2 input[type=time], .ff2 input[type=datetime-local] { padding-top: 24px; }