/* ═══════════════════════════════════════════════════════════
   UI Clarity — Typography, Contrast & Hover Refinements
   CSS only. Zero JS. No layout changes. Tokens only.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. TEXT CONTRAST ─────────────────────────────────────
   Problem: --text-tertiary used in places that need stronger contrast.
   Fix: Promote labels/titles to --text-secondary or --text-primary.    */

/* Form labels — were tertiary, now secondary for better readability */
.form-label {
  color: var(--text-primary);
  font-weight: var(--ql-weight-medium);
}

/* Table headers — already uppercase/small but too faint */
.data-table th,
.tx-table th,
.tasks-table th,
.docs-table th,
.contacts-table th {
  color: var(--text-secondary);
  letter-spacing: var(--ql-tracking-wider);
}

/* Card titles — consistent weight across all card types */
.card-title,
.rpt-card-title,
.settings-card-title {
  color: var(--text-primary);
  font-weight: var(--ql-weight-semibold);
}

/* Page subtitle — slightly stronger than muted */
.page-subtitle {
  color: var(--text-tertiary);
  font-size: var(--ql-text-sm);
}

/* ── 2. VISUAL HIERARCHY ──────────────────────────────────
   Titles > values > labels — each level clearly distinct.               */

/* Stat value — the number should be the dominant element */
.stat-value {
  font-size: var(--ql-text-2xl);
  font-weight: var(--ql-weight-bold);
  color: var(--text-primary);
  letter-spacing: var(--ql-tracking-tight);
  line-height: var(--ql-leading-none);
}

/* Stat label — clearly subordinate */
.stat-label {
  font-size: var(--ql-text-2xs);
  font-weight: var(--ql-weight-medium);
  color: var(--text-muted);
  letter-spacing: var(--ql-tracking-wide);
  text-transform: uppercase;
}

/* KPI card value */
.kpi-value {
  font-weight: var(--ql-weight-bold);
  color: var(--text-primary);
  letter-spacing: var(--ql-tracking-tight);
}

/* KPI label — subordinate */
.kpi-label {
  font-size: var(--ql-text-xs);
  color: var(--text-muted);
  font-weight: var(--ql-weight-medium);
}

/* Section headers — stronger than body */
.rpt-mini-title,
.kanban-column-title,
.nav-section-title {
  letter-spacing: var(--ql-tracking-wider);
  font-weight: var(--ql-weight-semibold);
}

/* Audit log summary — primary content, full contrast */
.audit-log-summary {
  color: var(--text-primary);
  font-weight: var(--ql-weight-medium);
}

/* Audit meta — clearly secondary */
.audit-log-meta {
  color: var(--text-muted);
}

/* Context panel values — large numbers need weight */
.ctx-stat-value {
  font-weight: var(--ql-weight-bold);
  letter-spacing: var(--ql-tracking-tight);
}

/* Context panel labels — clearly subordinate */
.ctx-stat-label {
  color: var(--text-muted);
  font-size: var(--ql-text-2xs);
}

/* ── 3. SPACING CONSISTENCY ───────────────────────────────
   Card bodies, form groups, and list items use inconsistent gaps.       */

/* Form groups — consistent vertical rhythm */
.form-group {
  margin-bottom: var(--ql-space-5);
}

.form-label {
  margin-bottom: var(--ql-space-1-5);
}

/* Form hint and error — consistent gap below input */
.form-hint,
.form-error {
  margin-top: var(--ql-space-1);
}

/* Settings toggle rows — breathe more */
.settings-toggle-row {
  padding-top: var(--ql-space-4);
  padding-bottom: var(--ql-space-4);
}

/* Audit log items — tighter but consistent */
.audit-log-item {
  margin-bottom: var(--ql-space-2);
}

/* Report card body — consistent padding */
.rpt-card-body {
  padding: var(--ql-space-5);
}

/* Context panel rows — consistent vertical padding */
.ctx-stat-row {
  padding-top: var(--ql-space-1-5);
  padding-bottom: var(--ql-space-1-5);
}

/* ── 4. HOVER STATES ──────────────────────────────────────
   Subtle, no functional impact, no layout shift.                        */

/* Audit log items — lift on hover */
.audit-log-item {
  transition: border-color var(--ql-t-hover) var(--ql-ease-hover),
              box-shadow   var(--ql-t-hover) var(--ql-ease-hover);
}
.audit-log-item:hover {
  border-color: var(--border-default);
  box-shadow: var(--shadow-sm);
}

/* Settings toggle rows — faint highlight */
.settings-toggle-row {
  transition: background var(--ql-t-hover) var(--ql-ease-hover);
  border-radius: var(--radius-md);
}
.settings-toggle-row:hover {
  background: var(--bg-sunken);
}

/* Dropdown items — already have hover, strengthen icon visibility */
.dropdown-item:hover .material-icons-round {
  opacity: 0.85;
  color: var(--text-secondary);
}

/* Context panel rows — consistent with rest of app */
.ctx-doc-row:hover,
.ctx-stat-row:hover {
  background: var(--bg-sunken);
  transition: background var(--ql-t-hover) var(--ql-ease-hover);
}

/* Report table rows — already have hover, increase contrast */
.rpt-table-row:hover {
  background: var(--bg-sunken);
}

/* Analytics rows — consistent hover */
.analytics-bar-row:hover,
.analytics-rec-row:hover,
.analytics-rev-row:hover {
  background: var(--bg-sunken);
}

/* Filter chips — clearer active state */
.filter-chip {
  transition: background var(--ql-t-hover) var(--ql-ease-hover),
              border-color var(--ql-t-hover) var(--ql-ease-hover),
              color var(--ql-t-hover) var(--ql-ease-hover);
}

/* Empty state icon — subtle lift on parent hover */
.empty-state:hover .empty-state-icon-wrap {
  border-color: var(--border-default);
  transition: border-color var(--ql-t-hover) var(--ql-ease-hover);
}

/* ── DARK MODE OVERRIDES ──────────────────────────────────
   Ensure all above tokens resolve correctly in dark/black modes.        */

[data-mode=dark] .form-label,
[data-mode=black] .form-label {
  color: var(--text-secondary);
}

[data-mode=dark] .data-table th,
[data-mode=black] .data-table th,
[data-mode=dark] .tx-table th,
[data-mode=black] .tx-table th,
[data-mode=dark] .tasks-table th,
[data-mode=black] .tasks-table th {
  color: var(--text-muted);
}

[data-mode=dark] .settings-toggle-row:hover,
[data-mode=black] .settings-toggle-row:hover {
  background: var(--bg-elevated);
}

[data-mode=dark] .rpt-table-row:hover,
[data-mode=black] .rpt-table-row:hover,
[data-mode=dark] .analytics-bar-row:hover,
[data-mode=black] .analytics-bar-row:hover {
  background: var(--bg-elevated);
}

/* ── REDUCED MOTION ───────────────────────────────────────
   Respect user preference — remove all transitions.                     */

@media (prefers-reduced-motion: reduce) {
  .audit-log-item,
  .settings-toggle-row,
  .ctx-doc-row,
  .ctx-stat-row,
  .filter-chip,
  .empty-state-icon-wrap {
    transition: none;
  }
}