/* ==========================================================================
   components.css — shared UI components (purple playful mood)
   Source of truth: bandekpleum production screenshot
   ========================================================================== */

/* ---- dotted background like the reference hero ---- */
.bg-plus-pattern {
  background-color: var(--color-page);
}

/* ---- Brand bar ---- */
.brandbar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.brandbar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 60px;
  padding-block: var(--space-2);
}
.brandbar__logo { height: 40px; width: auto; flex: none; }
.brandbar__name {
  font-weight: 700;
  font-size: var(--text-md);
  color: var(--color-ink);
  line-height: 1.2;
}
.brandbar__sub { font-size: var(--text-xs); color: var(--color-muted); }

/* Teacher brandbar variant — denser, with nav */
.brandbar--teacher { position: sticky; top: 0; z-index: 20; }
.brandbar__nav {
  display: flex;
  gap: var(--space-1);
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: thin;
}
.brandbar__nav a {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  color: var(--color-muted);
  white-space: nowrap;
}
.brandbar__nav a:hover { background: var(--color-surface-soft); text-decoration: none; }
.brandbar__nav a.is-active {
  color: #fff;
  background: var(--color-brand);
  font-weight: 600;
}
.brandbar__actions { display: flex; align-items: center; gap: var(--space-2); margin-left: var(--space-3); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--text-md);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
  transition: transform .12s ease, background-color .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.btn--primary {
  background: var(--color-brand);
  color: #fff;
  border-color: var(--color-brand);
  box-shadow: 0 6px 14px rgba(126, 87, 194, .28);
}
.btn--primary:hover { background: var(--color-brand-strong); }

/* CTA = vivid red like the reference "ส่งข้อมูล" button */
.btn--cta {
  background: var(--color-cta);
  color: #fff;
  border-color: var(--color-cta);
  box-shadow: 0 6px 14px rgba(229, 57, 53, .26);
}
.btn--cta:hover { background: var(--color-cta-strong); }

.btn--secondary {
  background: var(--color-surface);
  color: var(--color-ink);
  border-color: var(--color-border);
}
.btn--secondary:hover { background: var(--color-surface-soft); }

.btn--ghost {
  background: transparent;
  color: var(--color-muted);
  border-color: transparent;
}
.btn--ghost:hover { background: var(--color-surface-soft); color: var(--color-ink); }

.btn--danger {
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
  border-color: #f3c4c4;
}
.btn--danger:hover { background: #fbdada; }

.btn[disabled] { opacity: .55; cursor: not-allowed; pointer-events: none; }

.btn--block { width: 100%; }
.btn--sm { min-height: 36px; padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }

.btn-help { font-size: var(--text-sm); color: var(--color-muted); }

/* ---- Inputs ---- */
.field { margin-bottom: var(--space-4); }
.field__label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-2);
  color: var(--color-ink);
}
.field__label .req { color: var(--color-cta); }
.input, .select, .textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-md);
  color: var(--color-ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder, .textarea::placeholder { color: #b6a8ce; }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: var(--shadow-focus);
}
.input--lg { font-size: var(--text-lg); }
.input--error { border-color: var(--color-cta); box-shadow: 0 0 0 3px rgba(229,57,53,.18); }
.field__hint { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-2); }
.field__error { font-size: var(--text-sm); color: var(--color-danger-text); margin-top: var(--space-2); }
.field__error::before { content: "⚠ "; }

/* ---- Cards & panels (rounder, softer) ---- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}
.card--soft { background: var(--color-surface-soft); border-color: #ddd0ee; box-shadow: none; }
.card--hero {
  border: none;
  background: var(--color-hero-bg);
  color: #fff;
  box-shadow: var(--shadow-soft);
}
.card__title { font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--space-2); }
.card__subtitle { font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-3); }
.card--hero .card__subtitle { color: rgba(255,255,255,.85); }

/* ---- Metric cards ---- */
.metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
@media (min-width: 640px) { .metrics { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .metrics { grid-template-columns: repeat(6, 1fr); } }
.metric {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
}
.metric__label { font-size: var(--text-xs); color: var(--color-muted); margin-bottom: var(--space-1); }
.metric__value { font-size: var(--text-xl); font-weight: 700; line-height: 1.1; }
.metric__sub { font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-1); }
.metric--success .metric__value { color: var(--color-success-text); }
.metric--warning .metric__value { color: var(--color-warning-text); }
.metric--danger  .metric__value { color: var(--color-cta); }
.metric--info    .metric__value { color: var(--color-brand); }

/* ---- Badges ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.5;
}
.badge--published { background: var(--color-success-bg); color: var(--color-success-text); }
.badge--review    { background: var(--color-warning-bg); color: var(--color-warning-text); }
.badge--draft     { background: var(--color-surface-soft); color: var(--color-muted); }
.badge--absent    { background: var(--color-danger-bg); color: var(--color-cta); }
.badge--warn      { background: var(--color-warning-bg); color: var(--color-warning-text); }
.badge--edited    { background: #ece6fb; color: var(--color-brand-strong); }

/* ---- Alerts ---- */
.alert {
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  border: 1px solid transparent;
  margin-bottom: var(--space-3);
}
.alert--success { background: var(--color-success-bg); color: var(--color-success-text); border-color: #c7e9d6; }
.alert--warning { background: var(--color-warning-bg); color: var(--color-warning-text); border-color: #f3e3b4; }
.alert--danger  { background: var(--color-danger-bg); color: var(--color-cta); border-color: #f3c4c4; }
.alert--info    { background: #efe8fb; color: var(--color-brand-strong); border-color: #ddd0ee; }
.alert strong { display: block; margin-bottom: var(--space-1); }

/* ---- Tables (teacher) ---- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.table th, .table td {
  text-align: left;
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.table thead th {
  position: sticky; top: 0;
  background: var(--color-surface-soft);
  font-weight: 600;
  white-space: nowrap;
  z-index: 1;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: #faf7fe; }
.table tr.is-edited { background: #f1ebfb; }
.table tr.is-edited td:first-child { box-shadow: inset 3px 0 0 var(--color-brand); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- Histogram ---- */
.histo {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-2);
  align-items: end;
  height: 180px;
  padding: var(--space-4) var(--space-2) var(--space-2);
  background: var(--color-surface-soft);
  border-radius: var(--radius-md);
}
.histo__bar {
  position: relative;
  background: var(--color-brand-light);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  min-height: 4px;
  transition: height .6s cubic-bezier(.22,1,.36,1);
}
.histo__bar.is-student { background: var(--color-brand); }
.histo__bar .histo__count {
  position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
  font-size: var(--text-xs); font-weight: 700; color: var(--color-ink);
}
.histo__labels {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-2); margin-top: var(--space-2);
}
.histo__label { font-size: var(--text-xs); text-align: center; color: var(--color-muted); }

/* ---- Toolbar / filters ---- */
.toolbar {
  display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; margin-bottom: var(--space-4);
}
.toolbar .field { margin-bottom: 0; }
.toolbar .grow { flex: 1 1 200px; }

/* ---- Stat rows (comparison) ---- */
.stat-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3);
  padding: var(--space-3) 0; border-bottom: 1px dashed var(--color-border);
}
.stat-row:last-child { border-bottom: 0; }
.stat-row__label { color: var(--color-muted); font-size: var(--text-sm); }
.stat-row__value { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- Chip ---- */
.chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 700;
  background: var(--color-surface-soft);
  color: var(--color-ink);
}
.chip--up { background: var(--color-success-bg); color: var(--color-success-text); }
.chip--down { background: var(--color-warning-bg); color: var(--color-warning-text); }
.chip--info { background: #efe8fb; color: var(--color-brand-strong); }

/* ---- Divider / footer ---- */
.divider { height: 1px; background: var(--color-border); border: 0; margin-block: var(--space-5); }
.foot-note {
  font-size: var(--text-xs); color: var(--color-muted); text-align: center; padding-block: var(--space-5);
}