/* ==========================================================================
   ACCRA TENNIS ACADEMY — DESIGN SYSTEM
   Base stylesheet. Load this on every page before page-specific styles.
   Fonts required (link in <head> or self-host):
     Baloo 2   — https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&display=swap
     Manrope   — https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand colors */
  --ata-sky: #4FC3E8;
  --ata-sky-dark: #2FA8CF;
  --ata-sky-deep: #1A7FA3;   /* white text on it passes 4.5:1 */
  --ata-sky-tint: #EAF8FD;
  --ata-sky-tint-2: #D5F0FA;
  --ata-lime: #7CB83F;
  --ata-lime-dark: #67A030;
  --ata-lime-deep: #4D8222;  /* white text on it passes 4.5:1 */
  --ata-lime-tint: #F0F8E8;
  --ata-yellow: #F4D724;
  --ata-yellow-dark: #D9B800;
  --ata-ink: #16313B;
  --ata-ink-soft: #4A6068;
  --ata-white: #FFFFFF;

  /* Neutral scale (admin surfaces) */
  --ata-bg: #F7F9FA;
  --ata-surface: #FFFFFF;
  --ata-border: #E1E8EA;
  --ata-border-strong: #C7D2D5;
  --ata-muted: #7C8B90;

  /* Semantic status colors — deliberately separate from brand palette */
  --ata-status-success-bg: #E9F6E5;
  --ata-status-success-fg: #3D7A22;
  --ata-status-warning-bg: #FFF6DE;
  --ata-status-warning-fg: #8A6A00;
  --ata-status-danger-bg: #FBE8E7;
  --ata-status-danger-fg: #B0342A;
  --ata-status-info-bg: #E5F3FB;
  --ata-status-info-fg: #1D6C8F;
  --ata-status-neutral-bg: #EDEFF0;
  --ata-status-neutral-fg: #5B6669;

  /* Type */
  --ata-font-display: 'Baloo 2', ui-rounded, 'Segoe UI Rounded', sans-serif;
  --ata-font-body: 'Manrope', -apple-system, 'Segoe UI', sans-serif;

  --ata-text-xs: 0.75rem;    /* 12px */
  --ata-text-sm: 0.875rem;   /* 14px */
  --ata-text-base: 1rem;     /* 16px */
  --ata-text-lg: 1.125rem;   /* 18px */
  --ata-text-xl: 1.375rem;   /* 22px */
  --ata-text-2xl: 1.75rem;   /* 28px */
  --ata-text-3xl: 2.25rem;   /* 36px */

  /* Spacing scale */
  --ata-space-1: 4px;
  --ata-space-2: 8px;
  --ata-space-3: 12px;
  --ata-space-4: 16px;
  --ata-space-5: 24px;
  --ata-space-6: 32px;
  --ata-space-7: 48px;
  --ata-space-8: 64px;

  /* Radius — hierarchy: generous on parent-facing, tight on data-dense admin */
  --ata-radius-sm: 8px;     /* inputs, admin table cells, small chips */
  --ata-radius-md: 14px;    /* buttons, admin cards */
  --ata-radius-lg: 20px;    /* parent-facing cards */
  --ata-radius-xl: 28px;    /* hero cards, modals */
  --ata-radius-pill: 999px; /* badges, tags, nav pills */

  /* Shadow */
  --ata-shadow-sm: 0 1px 2px rgba(22, 49, 59, 0.06);
  --ata-shadow-md: 0 4px 16px rgba(22, 49, 59, 0.08);
  --ata-shadow-lg: 0 12px 32px rgba(22, 49, 59, 0.12);
  --ata-shadow-focus: 0 0 0 3px rgba(79, 195, 232, 0.35);

  /* Motion */
  --ata-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ata-duration: 180ms;
}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ata-bg);
  color: var(--ata-ink);
  font-family: var(--ata-font-body);
  font-size: var(--ata-text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--ata-sky-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Buttons never underline — including links styled as buttons (a.ata-btn) and link-style buttons. */
.ata-btn, .ata-btn:hover, .ata-btn:focus, .ata-link-btn, .ata-link-btn:hover, button, button:hover { text-decoration: none; }

:focus-visible {
  outline: none;
  box-shadow: var(--ata-shadow-focus);
  border-radius: var(--ata-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------------------------------------- */
.ata-h1, .ata-h2, .ata-h3, .ata-h4 {
  font-family: var(--ata-font-display);
  color: var(--ata-ink);
  margin: 0 0 var(--ata-space-2);
  line-height: 1.2;
}
.ata-h1 { font-size: var(--ata-text-3xl); font-weight: 700; }
.ata-h2 { font-size: var(--ata-text-2xl); font-weight: 700; }
.ata-h3 { font-size: var(--ata-text-xl); font-weight: 600; }
.ata-h4 { font-size: var(--ata-text-lg); font-weight: 600; }

.ata-text-muted { color: var(--ata-muted); }
.ata-text-sm { font-size: var(--ata-text-sm); }
.ata-text-xs { font-size: var(--ata-text-xs); }

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.ata-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ata-space-2);
  font-family: var(--ata-font-display);
  font-weight: 600;
  font-size: var(--ata-text-base);
  padding: 12px 22px;
  border-radius: var(--ata-radius-md);
  border: none;
  cursor: pointer;
  transition: transform var(--ata-duration) var(--ata-ease),
              box-shadow var(--ata-duration) var(--ata-ease),
              background-color var(--ata-duration) var(--ata-ease);
  white-space: nowrap;
}
.ata-btn:active { transform: scale(0.97); }
.ata-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Primary — the yellow is rationed to this one role */
.ata-btn-primary {
  background: var(--ata-yellow);
  color: var(--ata-ink);
  box-shadow: var(--ata-shadow-sm);
}
.ata-btn-primary:hover { background: var(--ata-yellow-dark); box-shadow: var(--ata-shadow-md); }

/* Secondary — brand blue, for the next-most-important action */
.ata-btn-secondary {
  background: var(--ata-sky);
  color: var(--ata-white);
}
.ata-btn-secondary:hover { background: var(--ata-sky-dark); }

/* Print and export — fixed colours on every screen so they're recognisable at a glance.
   Use ATA.printButton() / ATA.exportButton() rather than writing these by hand. */
.ata-btn-print { background: var(--ata-sky-deep); color: var(--ata-white); }
.ata-btn-print:hover { background: #16739A; color: var(--ata-white); text-decoration: none; }
.ata-btn-export { background: var(--ata-lime-deep); color: var(--ata-white); }
.ata-btn-export:hover { background: #467A1F; color: var(--ata-white); text-decoration: none; }
.ata-btn-print svg, .ata-btn-export svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Ghost — tertiary actions, admin toolbars */
.ata-btn-ghost {
  background: transparent;
  color: var(--ata-ink);
  border: 1.5px solid var(--ata-border-strong);
}
.ata-btn-ghost:hover { background: var(--ata-sky-tint); border-color: var(--ata-sky); }

/* Danger — destructive actions (cancel booking, delete) */
.ata-btn-danger {
  background: var(--ata-status-danger-bg);
  color: var(--ata-status-danger-fg);
}
.ata-btn-danger:hover { background: #F6D2CF; }

.ata-btn-sm { padding: 8px 16px; font-size: var(--ata-text-sm); border-radius: var(--ata-radius-sm); }
/* Extra-small — buttons inside table rows */
.ata-btn-xs { padding: 5px 11px; font-size: var(--ata-text-xs); border-radius: var(--ata-radius-sm); gap: 4px; }
.ata-btn-xs.ata-btn-ghost { border-width: 1px; }
.ata-btn-lg { padding: 16px 28px; font-size: var(--ata-text-lg); border-radius: var(--ata-radius-lg); }
.ata-btn-block { width: 100%; }

/* --------------------------------------------------------------------------
   5. FORM ELEMENTS
   -------------------------------------------------------------------------- */
.ata-field { margin-bottom: var(--ata-space-4); }
.ata-label {
  display: block;
  font-weight: 600;
  font-size: var(--ata-text-sm);
  color: var(--ata-ink);
  margin-bottom: var(--ata-space-2);
}
.ata-input, .ata-select, .ata-textarea {
  width: 100%;
  font-family: var(--ata-font-body);
  font-size: var(--ata-text-base);
  color: var(--ata-ink);
  background: var(--ata-surface);
  border: 1.5px solid var(--ata-border-strong);
  border-radius: var(--ata-radius-sm);
  padding: 11px 14px;
  transition: border-color var(--ata-duration) var(--ata-ease);
}
.ata-input:focus, .ata-select:focus, .ata-textarea:focus {
  border-color: var(--ata-sky);
  box-shadow: var(--ata-shadow-focus);
}
.ata-input::placeholder { color: var(--ata-muted); }
.ata-textarea { resize: vertical; min-height: 90px; }
.ata-helper { font-size: var(--ata-text-xs); color: var(--ata-muted); margin-top: var(--ata-space-1); }
.ata-field.has-error .ata-input { border-color: var(--ata-status-danger-fg); }
.ata-field-error { font-size: var(--ata-text-xs); color: var(--ata-status-danger-fg); margin-top: var(--ata-space-1); }

/* Custom checkbox / radio (used for class-slot selection) */
.ata-choice {
  display: flex;
  align-items: center;
  gap: var(--ata-space-3);
  padding: var(--ata-space-3) var(--ata-space-4);
  border: 1.5px solid var(--ata-border-strong);
  border-radius: var(--ata-radius-md);
  cursor: pointer;
  transition: border-color var(--ata-duration) var(--ata-ease), background var(--ata-duration) var(--ata-ease);
}
.ata-choice:hover { border-color: var(--ata-sky); }
.ata-choice.is-selected { border-color: var(--ata-sky); background: var(--ata-sky-tint); }
.ata-choice.is-full { opacity: 0.55; cursor: not-allowed; }
.ata-choice input { accent-color: var(--ata-sky); width: 18px; height: 18px; flex-shrink: 0; }

/* --------------------------------------------------------------------------
   6. CARDS
   -------------------------------------------------------------------------- */
.ata-card {
  background: var(--ata-surface);
  border: 1px solid var(--ata-border);
  border-radius: var(--ata-radius-md);
  padding: var(--ata-space-5);
  box-shadow: var(--ata-shadow-sm);
}

/* Parent-facing card — more generous radius, softer brand wash */
.ata-card-parent {
  background: var(--ata-white);
  border: none;
  border-radius: var(--ata-radius-lg);
  padding: var(--ata-space-5);
  box-shadow: var(--ata-shadow-md);
}
.ata-card-parent-header {
  background: linear-gradient(135deg, var(--ata-sky), var(--ata-sky-dark));
  color: var(--ata-white);
  border-radius: var(--ata-radius-lg) var(--ata-radius-lg) 0 0;
  padding: var(--ata-space-5);
  margin: calc(var(--ata-space-5) * -1) calc(var(--ata-space-5) * -1) var(--ata-space-4);
}

/* --------------------------------------------------------------------------
   7. STATUS BADGES — semantic, not brand-colored, for at-a-glance reading
   -------------------------------------------------------------------------- */
.ata-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ata-font-body);
  font-weight: 600;
  font-size: var(--ata-text-xs);
  padding: 4px 12px;
  border-radius: var(--ata-radius-pill);
  white-space: nowrap;
}
.ata-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.ata-badge-success { background: var(--ata-status-success-bg); color: var(--ata-status-success-fg); }
.ata-badge-warning { background: var(--ata-status-warning-bg); color: var(--ata-status-warning-fg); }
.ata-badge-danger  { background: var(--ata-status-danger-bg);  color: var(--ata-status-danger-fg); }
.ata-badge-info    { background: var(--ata-status-info-bg);    color: var(--ata-status-info-fg); }
.ata-badge-neutral { background: var(--ata-status-neutral-bg); color: var(--ata-status-neutral-fg); }

/* --------------------------------------------------------------------------
   8. TABLES (admin)
   -------------------------------------------------------------------------- */
.ata-table-wrap { overflow-x: auto; border: 1px solid var(--ata-border); border-radius: var(--ata-radius-sm); }
.ata-table { width: 100%; border-collapse: collapse; font-size: var(--ata-text-sm); background: var(--ata-surface); }
.ata-table th {
  text-align: left;
  font-family: var(--ata-font-body);
  font-weight: 700;
  color: var(--ata-ink-soft);
  background: var(--ata-bg);
  padding: var(--ata-space-3) var(--ata-space-4);
  border-bottom: 1.5px solid var(--ata-border);
}
.ata-table td {
  padding: var(--ata-space-3) var(--ata-space-4);
  border-bottom: 1px solid var(--ata-border);
  vertical-align: middle;
}
.ata-table tr:last-child td { border-bottom: none; }
.ata-table tr:hover td { background: var(--ata-sky-tint); }

/* --------------------------------------------------------------------------
   9. NAVIGATION
   -------------------------------------------------------------------------- */
/* Admin top bar */
.ata-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--ata-surface);
  border-bottom: 1px solid var(--ata-border);
  padding: var(--ata-space-3) var(--ata-space-5);
}
.ata-topbar-brand { display: flex; align-items: center; gap: var(--ata-space-2); font-family: var(--ata-font-display); font-weight: 700; font-size: var(--ata-text-lg); color: var(--ata-ink); }

/* Parent PWA bottom tab bar */
.ata-tabbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: flex;
  background: var(--ata-white);
  border-top: 1px solid var(--ata-border);
  padding: var(--ata-space-2) var(--ata-space-2) calc(var(--ata-space-2) + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -4px 16px rgba(22, 49, 59, 0.06);
}
.ata-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--ata-space-2) 0;
  color: var(--ata-muted);
  font-size: var(--ata-text-xs);
  font-weight: 600;
  border-radius: var(--ata-radius-sm);
  cursor: pointer;
}
.ata-tab.is-active { color: var(--ata-sky-dark); }

/* --------------------------------------------------------------------------
   10. INLINE ALERTS / BANNERS
   -------------------------------------------------------------------------- */
.ata-alert {
  display: flex;
  gap: var(--ata-space-3);
  align-items: flex-start;
  padding: var(--ata-space-4);
  border-radius: var(--ata-radius-md);
  font-size: var(--ata-text-sm);
}
.ata-alert-success { background: var(--ata-status-success-bg); color: var(--ata-status-success-fg); }
.ata-alert-warning { background: var(--ata-status-warning-bg); color: var(--ata-status-warning-fg); }
.ata-alert-danger  { background: var(--ata-status-danger-bg);  color: var(--ata-status-danger-fg); }
.ata-alert-info    { background: var(--ata-status-info-bg);    color: var(--ata-status-info-fg); }

/* --------------------------------------------------------------------------
   11. EMPTY STATES — mascot moment
   -------------------------------------------------------------------------- */
.ata-empty {
  text-align: center;
  padding: var(--ata-space-7) var(--ata-space-4);
  color: var(--ata-muted);
}
.ata-empty img { width: 88px; margin: 0 auto var(--ata-space-4); }
.ata-empty-title { font-family: var(--ata-font-display); font-weight: 600; font-size: var(--ata-text-lg); color: var(--ata-ink); margin-bottom: var(--ata-space-1); }

/* --------------------------------------------------------------------------
   12. CHIPS (child selector, filter tags)
   -------------------------------------------------------------------------- */
.ata-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ata-space-2);
  background: var(--ata-sky-tint);
  color: var(--ata-ink);
  border-radius: var(--ata-radius-pill);
  padding: 6px 14px 6px 6px;
  font-size: var(--ata-text-sm);
  font-weight: 600;
}
.ata-chip-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--ata-sky);
  color: var(--ata-white);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--ata-text-xs);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   13. UTILITIES
   -------------------------------------------------------------------------- */
.ata-flex { display: flex; }
.ata-flex-col { flex-direction: column; }
.ata-items-center { align-items: center; }
.ata-justify-between { justify-content: space-between; }
.ata-gap-1 { gap: var(--ata-space-1); }
.ata-gap-2 { gap: var(--ata-space-2); }
.ata-gap-3 { gap: var(--ata-space-3); }
.ata-gap-4 { gap: var(--ata-space-4); }
.ata-mt-4 { margin-top: var(--ata-space-4); }
.ata-mb-4 { margin-bottom: var(--ata-space-4); }