/* ==========================================================================
 *  A11Y CONTRAST v1.80 — WCAG AA/AAA polish (dashboards, forms, nav)
 *  Loaded after tokens + design-system so semantic overrides win.
 * ========================================================================== */

:root {
  --text-secondary: #475569;
  --text-tertiary: #64748b;
  --label: #374151;
  --caption: #56636c;
  --placeholder: #6b7280;
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--primary) 35%, transparent);
}

[data-theme="dark"] {
  --text-secondary: #d4dee3;
  --text-tertiary: #b8c5cc;
  --label: #e8eef1;
  --caption: #c5d0d6;
  --placeholder: #9fb0b8;
  --ds-ink: #f1f5f9;
  --ds-secondary: #d4dee3;
}

/* ── Global typography hierarchy ── */
.muted {
  color: var(--text-secondary) !important;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}
.small {
  font-size: 13px;
  font-weight: 550;
  color: var(--text-secondary);
  line-height: 1.45;
}
[data-theme="dark"] .muted,
[data-theme="dark"] .small {
  color: var(--text-secondary);
}

.ds-lead { color: var(--text-secondary); }
[data-theme="dark"] .ds-lead { color: var(--text-secondary); }

/* ── Form inputs & placeholders ── */
.input::placeholder,
textarea.input::placeholder {
  color: var(--placeholder);
  opacity: 1;
  font-weight: 500;
}
[data-theme="dark"] .input::placeholder {
  color: var(--placeholder);
}

/* ── Buttons — contrast + focus ── */
.btn:focus-visible,
.ds-btn:focus-visible,
.iconbtn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.btn--primary {
  font-weight: 700;
}
.btn--ghost {
  color: var(--text);
  border-color: color-mix(in srgb, var(--text) 18%, var(--border));
  font-weight: 650;
}
[data-theme="dark"] .btn--ghost {
  background: color-mix(in srgb, var(--surface-2) 90%, var(--surface));
  color: var(--text);
}
.btn--danger,
.btn--no {
  background: var(--no);
  color: #fff;
  font-weight: 700;
}
.btn:disabled,
.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.15);
}

/* ── Empty states — premium visibility ── */
.empty {
  padding: 52px 24px;
  gap: 12px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-2) 55%, transparent);
  border: 1px dashed color-mix(in srgb, var(--border) 90%, var(--muted));
}
.empty__icon {
  font-size: 52px;
  opacity: 0.85;
  line-height: 1;
}
.empty__title {
  font-weight: 800;
  font-size: 17px;
  color: var(--text);
  letter-spacing: -0.02em;
}
.empty__hint {
  font-size: 14px;
  color: var(--text-secondary);
  max-width: 320px;
  line-height: 1.55;
  font-weight: 500;
}

/* ── Athlete profile (ap-*) ── */
.ap-muted { color: var(--text-secondary); font-size: 13px; font-weight: 550; }
.ap-hero__status-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--label);
  letter-spacing: 0.06em;
}
.ap-hero__k {
  font-size: 10px;
  font-weight: 800;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
}
.ap-hero__v {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}
.ap-hero__meta { font-size: 12px; color: var(--text-secondary); font-weight: 600; }
.ap-kpi__val {
  font-size: clamp(18px, 3.5vw, 24px);
  font-weight: 900;
  color: var(--text);
  letter-spacing: -0.03em;
}
.ap-kpi__lbl {
  font-size: 10px;
  font-weight: 800;
  color: var(--label);
  letter-spacing: 0.05em;
}
.ap-empty {
  padding: 28px 20px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-2) 70%, var(--surface));
}
.ap-empty__ic { font-size: 40px; margin-bottom: 10px; }
.ap-empty__title { font-size: 16px; font-weight: 800; color: var(--text); }
.ap-empty__hint { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }

/* ── Coach dashboard (cd-*, coach-*) ── */
.cd-muted,
.coach-empty,
.coach-cmd__empty { color: var(--text-secondary); font-weight: 550; }
.cd-kpi__val,
.coach-kpi__value {
  font-size: clamp(20px, 3.8vw, 28px);
  font-weight: 900;
  color: var(--text);
  letter-spacing: -0.03em;
}
.cd-kpi__lbl,
.coach-kpi__label,
.coach-perf__k,
.coach-bars__lbl {
  font-size: 10px;
  font-weight: 800;
  color: var(--label);
  letter-spacing: 0.05em;
}
.cd-kpi__delta,
.cd-kpi__week,
.coach-kpi__trend { font-size: 11px; font-weight: 650; }
.coach-fatigue__title,
.coach-ai__tip { color: var(--text-secondary); font-weight: 600; }
.coach-tabs__btn {
  color: var(--text-secondary);
  font-weight: 700;
}
.coach-tabs__btn.is-active { color: #fff; }
.coach-ann__chev { color: var(--text-tertiary); }

/* ── Charts & axes ── */
.coach-bars__lbl,
.ap-chart__lbl,
.cd-chart__axis {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
}
.coach-donut__txt { fill: var(--text); font-weight: 800; }

/* ── KPI progress & metrics ── */
.kpi-prog__head .muted { font-weight: 650; color: var(--text-secondary); }
.kpi-prog__pct { color: var(--primary); font-weight: 900; }
.lp-metric__v { color: var(--text); font-weight: 900; }
.lp-metric__l { color: var(--text-secondary); font-weight: 700; font-size: 13px; }

/* ── Navigation ── */
.topbar,
.sidebar,
.tabbar {
  --nav-muted: var(--text-secondary);
}
.topbar .muted,
.sidebar .muted,
.nav__label {
  color: var(--text-secondary);
  font-weight: 600;
}
.iconbtn { color: var(--text); }
.dropdown__item { color: var(--text); font-weight: 600; }

/* ── Cards & panels ── */
.card__title,
.panel__title,
.stat__label {
  color: var(--label);
  font-weight: 750;
}
.card .muted,
.panel .muted {
  color: var(--text-secondary);
}

/* ── Widget headers (Training Performance, Notifications, AI Coach) ── */
.ap-widget__title,
.cd-widget__title,
.coach-ai__title,
.coach-widget__title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
}

/* ── Dark mode: metric numbers pop ── */
[data-theme="dark"] .ap-kpi__val,
[data-theme="dark"] .cd-kpi__val,
[data-theme="dark"] .coach-kpi__value,
[data-theme="dark"] .coach-perf__v,
[data-theme="dark"] .coach-weather__temp {
  color: #f8fafc;
}
[data-theme="dark"] .ap-hero__stat {
  background: color-mix(in srgb, var(--surface-2) 85%, var(--surface));
  border-color: color-mix(in srgb, var(--border) 80%, transparent);
}

/* Super Admin login — distinct portal UI */
.auth__card--superadmin {
  max-width: 400px;
  background: linear-gradient(165deg, color-mix(in srgb, #0f172a 92%, var(--surface)), var(--surface));
  border-color: color-mix(in srgb, #6366f1 35%, var(--border));
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.25), 0 0 0 1px color-mix(in srgb, #6366f1 12%, transparent);
}
.auth__card--superadmin .auth__title { color: var(--text); letter-spacing: -0.02em; }
.auth__card--superadmin .auth__subtitle { color: var(--text-secondary); }
.auth__card--superadmin .btn--primary {
  background: linear-gradient(135deg, #4338ca, #6366f1);
  border-color: #4338ca;
  font-weight: 800;
}
.lp-foot__link--muted { opacity: 0.55; font-size: 12px; }
.lp-foot__link--muted:hover { opacity: 0.85; }

/* ── Chat / DM — dark mode contrast (Επικοινωνία) ── */
.ap-chat__side,
.ap-chat__right,
.ap-chat__main,
.dm-thread__name,
.dm-row__name {
  color: var(--text);
}
.chatmsg__bubble {
  color: var(--text);
}
.chatmsg__text,
.dmsg__b {
  color: inherit;
}
.chatmsg--mine .chatmsg__bubble,
.dmsg--me .dmsg__b {
  color: #fff;
  background: var(--primary);
}
.chatmsg__author,
.chatmsg__time,
.dm-row__last {
  color: var(--text-secondary);
}
[data-theme="dark"] .chatmsg--mine .chatmsg__bubble,
[data-theme="dark"] .dmsg--me .dmsg__b {
  background: #1d9a82;
  color: #f8fffd;
  border: 1px solid color-mix(in srgb, #2fc6a6 55%, #0a2e28);
}
[data-theme="dark"] .chatmsg__bubble {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}
[data-theme="dark"] .dmsg--them .dmsg__b {
  background: color-mix(in srgb, var(--surface-2) 90%, var(--text) 4%);
  color: var(--text);
  border-color: var(--border);
}
[data-theme="dark"] .ap-chat__convo.is-active {
  background: color-mix(in srgb, var(--primary) 22%, var(--surface));
}
[data-theme="dark"] .ap-chat__convo-lbl,
[data-theme="dark"] .ap-chat__convo-sub {
  color: var(--text);
}
[data-theme="dark"] .ap-chat__side-title {
  color: var(--label);
}
[data-theme="dark"] .chat__input,
[data-theme="dark"] .dm-composer .input {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
[data-theme="dark"] .chat__input::placeholder,
[data-theme="dark"] .dm-composer .input::placeholder {
  color: var(--placeholder);
}

@media (prefers-reduced-motion: reduce) {
  .empty,
  .ap-kpi,
  .cd-kpi,
  .coach-kpi { animation: none !important; transition: none !important; }
}