/* ═══════════════════════════════════════════════════════════════
   CODQI DESIGN SYSTEM — Admin panel + customer dashboard (+ auth)
   Load after base theme CSS. Mobile-first, WCAG-oriented tokens.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --ds-touch: 2.75rem;
  --ds-font-xs: 0.6875rem;
  --ds-font-sm: 0.8125rem;
  --ds-font-base: 0.875rem;
  --ds-font-md: 1rem;
  --ds-font-lg: 1.125rem;
  --ds-font-xl: clamp(1.25rem, 4vw, 1.5rem);
  --ds-line-tight: 1.2;
  --ds-line-body: 1.55;
  --ds-space-xs: 0.375rem;
  --ds-space-sm: 0.625rem;
  --ds-space-md: 1rem;
  --ds-space-lg: 1.5rem;
  --ds-space-xl: 2rem;
  --ds-radius-sm: 0.625rem;
  --ds-radius-md: 0.75rem;
  --ds-text-muted-aa: #5e5c78;
  --ds-text-subtle: #7a7794;
  --ds-border-focus: var(--primary, #6c27e8);
}

/* ── Skip link ─────────────────────────────────────────────── */
.cx-skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 10000;
  padding: 0.75rem 1.25rem;
  background: var(--primary, #6c27e8);
  color: #fff;
  font-weight: 700;
  font-size: var(--ds-font-sm);
  border-radius: var(--ds-radius-sm);
  text-decoration: none;
}
.cx-skip-link:focus {
  left: var(--ds-space-md);
  top: var(--ds-space-md);
  width: auto;
  height: auto;
  overflow: visible;
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.cx-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Surfaces: readable muted text (AA on white) ───────────── */
.admin-body,
.sf-dashboard,
.sf-auth {
  --text-dim: var(--ds-text-subtle);
}
.admin-body .sidebar-user-role,
.admin-body .settings-tab-btn:not(.active),
.sf-dashboard .dash-user-role,
.sf-dashboard .cust-table th {
  color: var(--ds-text-muted-aa);
}

/* ── Focus (keyboard) ────────────────────────────────────── */
.admin-body :focus-visible,
.sf-dashboard :focus-visible,
.sf-auth :focus-visible {
  outline: 2px solid var(--ds-border-focus);
  outline-offset: 2px;
}

/* ── Forms ─────────────────────────────────────────────────── */
.cx-field {
  margin-bottom: var(--ds-space-md);
}
.cx-label {
  display: block;
  font-size: var(--ds-font-xs);
  font-weight: 700;
  color: var(--ds-text-muted-aa);
  margin-bottom: var(--ds-space-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cx-hint {
  font-size: var(--ds-font-xs);
  color: var(--ds-text-muted-aa);
  margin-top: var(--ds-space-xs);
  line-height: var(--ds-line-body);
}
.cx-error {
  font-size: var(--ds-font-sm);
  color: var(--red, #dc2626);
  margin-top: var(--ds-space-xs);
  font-weight: 600;
}
.cx-fieldset {
  background: #f9f7ff;
  border: 1px solid #eeeaff;
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-md);
  margin-bottom: var(--ds-space-md);
}
.cx-fieldset-title,
.cx-fieldset legend.cx-fieldset-title {
  font-size: var(--ds-font-xs);
  font-weight: 700;
  color: var(--ds-text-muted-aa);
  margin-bottom: var(--ds-space-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0;
}
.cx-check-row {
  display: flex;
  align-items: center;
  gap: var(--ds-space-sm);
  cursor: pointer;
  margin-bottom: var(--ds-space-sm);
  min-height: var(--ds-touch);
}
.cx-check-row:last-child { margin-bottom: 0; }
.cx-check-row span {
  font-size: var(--ds-font-sm);
  color: var(--text, #0a0820);
  line-height: var(--ds-line-body);
}

/* ── Flash / feedback ──────────────────────────────────────── */
.cx-flash-region {
  margin: var(--ds-space-md) var(--ds-space-xl) 0;
}
@media (max-width: 768px) {
  .cx-flash-region {
    margin-left: var(--ds-space-md);
    margin-right: var(--ds-space-md);
  }
}
.flash[role="alert"] {
  border-left-width: 4px;
  border-left-style: solid;
}
.flash-success[role="alert"] { border-left-color: var(--green, #059669); }
.flash-error[role="alert"] { border-left-color: var(--red, #dc2626); }
.flash-warning[role="alert"] { border-left-color: var(--amber, #d97706); }

/* ── Loading / busy ────────────────────────────────────────── */
[aria-busy="true"].cx-busy,
.cx-is-loading {
  opacity: 0.72;
  pointer-events: none;
  cursor: wait;
}
.cx-btn-loading {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* ── Touch targets (coarse pointer / mobile) ───────────────── */
@media (pointer: coarse), (max-width: 768px) {
  .admin-body .btn-primary,
  .admin-body .btn-outline,
  .admin-body .btn-danger,
  .admin-body .btn-secondary,
  .admin-body .topbar-toggle,
  .admin-body .topbar-btn,
  .admin-body .settings-tab-btn,
  .admin-body .sidebar-link,
  .admin-body .sidebar-group-btn,
  .admin-body .notif-btn,
  .sf-dashboard .dash-link,
  .sf-dashboard .dash-mobile-toggle,
  .sf-dashboard .dash-notif-btn,
  .sf-dashboard .dash-shop-btn,
  .sf-dashboard .cust-empty-btn,
  .sf-dashboard .dl-btn,
  .sf-dashboard .wish-buy,
  .sf-auth .btn-primary,
  .sf-auth .btn-outline {
    min-height: var(--ds-touch);
  }
  .admin-body .btn-sm:not(.btn-icon) {
    min-height: 2.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .admin-body .topbar-toggle,
  .admin-body .topbar-btn,
  .sf-dashboard .dash-mobile-toggle,
  .sf-dashboard .dash-notif-btn {
    min-width: var(--ds-touch);
    justify-content: center;
  }
}

@media (pointer: fine) and (min-width: 769px) {
  .admin-body .settings-tab-btn {
    min-height: auto;
  }
}

/* ── Page structure ────────────────────────────────────────── */
.cx-page-header {
  margin-bottom: var(--ds-space-lg);
}
.cx-page-header h1,
.cx-page-title {
  font-size: var(--ds-font-xl);
  font-weight: 800;
  line-height: var(--ds-line-tight);
  letter-spacing: -0.02em;
  color: var(--text, #0a0820);
}
.cx-page-header p {
  font-size: var(--ds-font-sm);
  color: var(--ds-text-muted-aa);
  margin-top: var(--ds-space-xs);
  max-width: 65ch;
  line-height: var(--ds-line-body);
}

/* ── Empty states (shared) ─────────────────────────────────── */
.cx-empty-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--ds-touch);
  padding: 0.625rem 1.375rem;
  font-weight: 600;
  font-size: var(--ds-font-sm);
  border-radius: var(--ds-radius-md);
  text-decoration: none;
}

/* ── Card header icon accent ───────────────────────────────── */
.cx-heading-icon {
  color: var(--primary, #6c27e8);
  margin-right: 0.5rem;
  font-size: 0.8125rem;
}
.cx-meta-muted {
  font-size: var(--ds-font-sm);
  color: var(--ds-text-muted-aa);
}

/* ── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .admin-body *,
  .sf-dashboard *,
  .sf-auth * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}