/*
 * Fil: /assets/css/components.css
 * Syfte:
 * - Gemensamma komponenter
 * - Kort, formulär, badges, listor, alerts
 * - Ska kunna användas både publikt och i admin
 */

/* ------------------------------------------------------------
   Kort / paneler
------------------------------------------------------------ */

.card {
  border-color: var(--ft-border-color);
}

.card-header,
.card-footer {
  border-color: var(--ft-border-color-soft);
}

.card-header {
  font-weight: 600;
}

/* Kort som används som informationsblock */
.info-card,
.summary-card,
.stat-card {
  border: 1px solid var(--ft-border-color);
  border-radius: var(--ft-radius-lg);
  background: var(--ft-card-bg);
}

/* ------------------------------------------------------------
   Formulär
------------------------------------------------------------ */

.form-control,
.form-select,
.input-group-text {
  border-color: var(--ft-border-color-strong);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 .18rem rgba(13, 110, 253, .24);
}

/*
 * Gör disabled/read-only lite tydligare.
 */
.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
  background-color: #eef1f4;
  border-color: var(--ft-border-color);
  color: #495057;
}

.form-check-input {
  border-color: var(--ft-border-color-strong);
}

/* ------------------------------------------------------------
   Listor
------------------------------------------------------------ */

.list-group {
  border-color: var(--ft-border-color);
}

.list-group-item {
  border-color: var(--ft-border-color-soft);
}

/* ------------------------------------------------------------
   Badges / små etiketter
------------------------------------------------------------ */

.badge {
  font-weight: 600;
}

.badge-soft {
  display: inline-block;
  padding: .35rem .55rem;
  border: 1px solid var(--ft-border-color);
  border-radius: 999px;
  background: #f1f3f5;
  color: #343a40;
  font-size: .8rem;
  font-weight: 600;
}

/* ------------------------------------------------------------
   Alerts
------------------------------------------------------------ */

.alert {
  border-color: var(--ft-border-color-soft);
}

/* ------------------------------------------------------------
   Knappar
------------------------------------------------------------ */

.btn-outline-secondary {
  border-color: var(--ft-border-color-strong);
  color: #343a40;
}

/* ------------------------------------------------------------
   Resultatrutor / poängrutor
------------------------------------------------------------ */

.score-box,
.result-box,
.points-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  padding: .25rem .5rem;
  border: 1px solid var(--ft-border-color-strong);
  border-radius: var(--ft-radius-md);
  background: #ffffff;
  font-weight: 700;
  line-height: 1.2;
}

/*
 * Användbar när resultat/poäng ska visas men inte finnas ännu.
 */
.score-box-empty,
.result-box-empty {
  color: var(--ft-muted);
  background: #f8f9fa;
  border-style: dashed;
}

/* ------------------------------------------------------------
   Global kontrastnivå för kort, ramar och egna paneler
------------------------------------------------------------ */

/*
 * Fångar både Bootstrap-kort och egna kortklasser som:
 * forum-card, tabeller-card, statistik-card, public-toplist-card osv.
 */
.card,
.border,
[class$="-card"],
[class*="-card "] {
  border-color: var(--ft-border-color) !important;
}

/*
 * Fångar egna headers som:
 * forum-card-header, statistik-card-header, admin-result-card-header osv.
 */
.card-header,
.card-footer,
.list-group-item,
[class$="-card-header"],
[class*="-card-header "] {
  border-color: var(--ft-border-color-soft) !important;
}