/* ============================================================
   Booking / Appointments Dashboard — Apex reskin (page-specific)
   ------------------------------------------------------------
   This page carries its own large inline <style> blocks (indigo
   #6366f1 / teal #0d9488 / #e5e7eb greys). This file is linked
   AFTER those inline blocks so, at equal specificity, it wins and
   re-tones the surface to the Apex palette using main.css tokens
   + the shared ax-ui layer. Behaviour is untouched — these are
   the same selectors the inline styles / booking-dashboard.js use.
   ============================================================ */

/* ---- Page canvas ---- */
.schedule-page {
  background: var(--bg-light);
}

.schedule-sidebar {
  background: var(--bg-white);
  border-left: 1px solid var(--border);
}

/* ---- Header ---- */
.schedule-main .header {
  background: var(--bg-white) !important;
  border-bottom: 1px solid var(--border) !important;
}

.schedule-main .header h1 {
  color: var(--text-dark) !important;
  letter-spacing: -0.01em;
}

.schedule-main .header .breadcrumb {
  color: var(--text-muted) !important;
}

/* ---- Primary "Actions" button → green ---- */
.actions-btn {
  background: var(--primary);
  border-radius: 8px;
  font-weight: 600;
}

.actions-btn:hover {
  background: var(--primary-dark);
}

.actions-menu {
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(15, 31, 26, 0.10);
}

.actions-menu-item {
  color: var(--text-medium);
}

.actions-menu-item:hover {
  background: var(--bg-light);
  color: var(--text-dark);
}

.actions-menu-item svg {
  color: var(--text-muted);
}

/* ---- Shared card surfaces ---- */
.quick-overview,
.funnel-card,
.sales-card,
.todo-card,
.upcoming-section {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 31, 26, 0.04);
}

/* ---- Quick overview ---- */
.quick-overview-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-dark);
}

.quick-overview-period {
  color: var(--text-muted);
}

.overview-stat-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.overview-stat-value {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-dark);
}

.overview-stat-value a {
  color: var(--primary);
}

.overview-stat-sub {
  color: var(--text-light);
}

/* ---- Section headers (funnel / sales / todo / upcoming) ---- */
.funnel-title,
.sales-title,
.todo-title,
.upcoming-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-dark);
}

.funnel-subtitle,
.sales-subtitle {
  color: var(--text-muted);
}

.funnel-link:hover {
  color: var(--primary);
}

.funnel-stat {
  border-bottom-color: var(--border-light);
}

.funnel-stat-label {
  color: var(--text-medium);
}

.funnel-stat-value {
  color: var(--text-dark);
  font-weight: 600;
}

/* ---- Sales card ---- */
.sales-amount {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-dark);
}

.sales-change.positive {
  color: var(--green-600);
}

.sales-change.negative {
  color: var(--error);
}

/* ---- To-do list ---- */
.todo-header,
.todo-item {
  border-bottom-color: var(--border-light);
}

.todo-action-btn {
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted);
}

.todo-action-btn:hover {
  background: var(--bg-light);
  color: var(--text-dark);
}

.todo-checkbox {
  border: 2px solid var(--border);
  border-radius: 5px;
}

.todo-checkbox:hover {
  border-color: var(--primary-light);
}

.todo-checkbox.checked {
  background: var(--primary);
  border-color: var(--primary);
}

.todo-text {
  color: var(--text-medium);
}

/* ---- Upcoming classes + appointments ---- */
.upcoming-header {
  border-bottom-color: var(--border-light);
}

.upcoming-add-btn {
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted);
}

.upcoming-add-btn:hover {
  background: var(--bg-light);
  color: var(--primary);
}

.upcoming-empty {
  color: var(--text-light);
}

/* Appointment rows */
.appointment-item {
  border-bottom-color: var(--border-light);
}

.appointment-item:hover {
  background: var(--bg-light);
}

.appointment-date-main {
  color: var(--text-dark);
}

.appointment-date-sub {
  color: var(--text-muted);
}

.appointment-date-relative {
  color: var(--primary);
}

.appointment-title {
  color: var(--text-dark);
  font-weight: 600;
}

.appointment-title a {
  color: var(--primary);
}

.appointment-details {
  color: var(--text-muted);
}

/* Status / payment badges → Apex pill tones */
.appointment-badge {
  border-radius: 999px;
  font-weight: 600;
}

.appointment-badge.attendees {
  background: var(--border-light);
  color: var(--text-medium);
}

.appointment-badge.paid,
.appointment-badge.confirmed,
.appointment-badge.completed {
  background: var(--green-100);
  color: var(--green-800);
}

.appointment-badge.unpaid,
.appointment-badge.pending,
.appointment-badge.scheduled {
  background: #FEF3C7;
  color: #92400E;
}

.appointment-badge.cancelled,
.appointment-badge.no_show,
.appointment-badge.noshow {
  background: #FEE2E2;
  color: #991B1B;
}

/* Class rows */
.class-item {
  border-bottom-color: var(--border-light);
}

.class-item:hover {
  background: var(--bg-light);
}

.class-date-main,
.class-title {
  color: var(--text-dark);
}

.class-date-time,
.class-details {
  color: var(--text-muted);
}

.class-badge.participants {
  background: var(--green-50);
  color: var(--primary);
}

.class-badge.kind {
  background: var(--border-light);
  color: var(--text-medium);
}

/* ---- Right sidebar: recent activity ---- */
.sidebar-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-dark);
}

.sidebar-empty {
  color: var(--text-light);
}

.activity-item {
  border-bottom-color: var(--border-light);
}

.activity-icon {
  background: var(--border-light);
  color: var(--text-muted);
}

.activity-icon.booked,
.activity-icon.completed,
.activity-icon.payment {
  background: var(--green-100);
  color: var(--green-600);
}

.activity-icon.cancelled {
  background: #FEE2E2;
  color: var(--error);
}

.activity-time {
  color: var(--text-light);
}

.activity-text {
  color: var(--text-medium);
}

.activity-text strong {
  color: var(--text-dark);
}

.activity-text a {
  color: var(--primary);
}

/* ---- Empty-state svg (JS-rendered in upcoming/activity) ---- */
.empty-state svg {
  stroke: var(--text-light);
}