/* ============================================================================
   CIEP app styles — thin layer that maps the app's existing class names onto
   Hakonix Design System tokens/components (tokens.css + design-system.css).
   New screens should prefer the .ds-* classes directly.
   ============================================================================ */

/* App bar right-hand cluster */
.status { display: flex; gap: var(--space-2); align-items: center; }

/* Cards (app.js emits .card) → design-system card */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}
.course-title { font-size: var(--text-lg); font-weight: var(--font-semibold); margin: 0 0 var(--space-1); }
.muted { color: var(--color-text-muted); font-size: var(--text-sm); }

/* Buttons (app.js emits bare <button> and .secondary) → ds-btn */
button {
  font: inherit; font-weight: var(--font-semibold); line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 0.65rem 1rem; border: 1px solid transparent; border-radius: var(--radius-md);
  background: var(--color-primary); color: var(--color-primary-contrast);
  cursor: pointer; transition: background var(--transition-fast), transform var(--transition-fast);
}
button:hover { background: var(--color-primary-hover); }
button:active { transform: translateY(1px); }
button:disabled { opacity: .5; cursor: not-allowed; transform: none; }
button.secondary {
  background: var(--color-surface); color: var(--color-text);
  border-color: var(--color-border-strong);
}
button.secondary:hover { background: var(--color-surface-hover); }

/* Inputs / selects (app.js emits bare <input>/<select>) → ds-input */
input, select {
  width: 100%; font: inherit; color: var(--color-text);
  background: var(--color-surface); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md); padding: 0.6rem 0.75rem; margin: var(--space-2) 0;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
input::placeholder { color: var(--color-text-subtle); }
input:focus, select:focus { border-color: var(--color-primary); box-shadow: var(--focus-ring); outline: none; }

/* Rows */
.row { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }

/* Badges (app.js emits .badge and .badge.offline-ready) */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-xs); font-weight: var(--font-semibold);
  padding: 0.15rem 0.55rem; border-radius: var(--radius-full);
  background: var(--color-surface-2); color: var(--color-text-muted);
}
.badge.offline-ready { background: var(--color-success-soft); color: var(--color-success); }

/* Lesson / list rows */
.lesson { padding: var(--space-3) 0; border-top: 1px solid var(--color-border); }
.lesson:first-child { border-top: 0; }
.lesson-content { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: var(--space-2); white-space: pre-wrap; }
.done { color: var(--color-success); font-weight: var(--font-semibold); }

/* Links & status dot */
a.link { color: var(--color-primary); cursor: pointer; text-decoration: none; }
a.link:hover { text-decoration: underline; }
.dot { width: 9px; height: 9px; border-radius: var(--radius-full); background: var(--color-success); display: inline-block; }
.dot.off { background: var(--color-warning); }

.hidden { display: none; }