/* Min udviklingsplan — eget lag oven på Framework7.
 *
 * Scenen, farverne er valgt til: en studerende åbner den på telefonen om
 * aftenen efter isha, i sengen, med én hånd. Derfor mørk som udgangspunkt,
 * store trykflader, dæmpede flader og grøn som den eneste mættede farve.
 */

:root {
  --idp-groen: #0e7a5f;
  --idp-groen-lys: #14a37d;
  --idp-gul: #b8860b;
  --idp-roed: #a3322b;
  --idp-graa: #8a8a8a;
  --f7-theme-color: #0e7a5f;
  --f7-theme-color-rgb: 14, 122, 95;
  --f7-theme-color-shade: #0a5c47;
  --f7-theme-color-tint: #14a37d;
}

/* ── Loginlaget ─────────────────────────────────────────────────────────────
 * Ligger over hele appen, indtil serveren har bekræftet, hvem der er logget
 * ind. Fladen bagved er allerede bygget, så der er ingen ventetid bagefter.
 */
#login-lag {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
  background: var(--f7-page-bg-color, #f2f2f7);
}
/* Felterne skal ikke straekke sig over en hel skaerm, naar nogen aabner den
   paa en computer. 26rem er omtrent en telefons bredde. */
#login-lag > * {
  width: 100%;
  max-width: 26rem;
  margin-left: auto;
  margin-right: auto;
}
#login-lag .login-titel {
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 4px;
}
#login-lag .login-under {
  text-align: center;
  color: var(--idp-graa);
  margin-bottom: 24px;
  font-size: 0.95rem;
}
#login-lag .besked {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.92rem;
}
#login-lag .besked.fejl { background: rgba(163, 50, 43, 0.12); color: var(--idp-roed); }
#login-lag .besked.ok   { background: rgba(14, 122, 95, 0.12); color: var(--idp-groen); }

/* iOS zoomer af sig selv, hvis et felt har mindre end 16px. */
input, textarea, select { font-size: 16px !important; }

/* ── Ugens ring ─────────────────────────────────────────────────────────── */
.ugens-kort { text-align: center; padding: 8px 0 16px; }
.ugens-tal { font-size: 2.6rem; font-weight: 700; line-height: 1.1; }
.ugens-tekst { color: var(--idp-graa); font-size: 0.95rem; }
.lys-groen .ugens-tal { color: var(--idp-groen); }
.lys-gul   .ugens-tal { color: var(--idp-gul); }
.lys-roed  .ugens-tal { color: var(--idp-roed); }
.lys-graa  .ugens-tal { color: var(--idp-graa); }
.traek { color: var(--idp-graa); font-size: 0.9rem; margin-top: 6px; }

/* ── Trin ──────────────────────────────────────────────────────────────── */
.trin-knap {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  background: transparent;
  text-align: left;
  font-size: 1rem;
  color: inherit;
  cursor: pointer;
}
.trin-boks {
  flex: 0 0 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--idp-graa);
  transition: background-color .18s cubic-bezier(.22,1,.36,1),
              border-color .18s cubic-bezier(.22,1,.36,1),
              transform .18s cubic-bezier(.22,1,.36,1);
}
.trin-knap.gjort .trin-boks {
  background: var(--idp-groen);
  border-color: var(--idp-groen);
  transform: scale(1.12);
}

/* Kvitteringen for et tryk, mens serveren skriver. Den siger "hørt", ikke
   "færdig": en vane på 3 gange om ugen er ikke i mål af ét tryk. */
.trin-knap.netop .trin-boks {
  animation: idp-puls .45s cubic-bezier(.22, 1, .36, 1);
  border-color: var(--idp-groen);
}
@keyframes idp-puls {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(14, 122, 95, .45); }
  55%  { transform: scale(1.18); box-shadow: 0 0 0 10px rgba(14, 122, 95, 0); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(14, 122, 95, 0); }
}
.trin-tekst { flex: 1; min-width: 0; }
.trin-titel { display: block; }
.trin-under { display: block; color: var(--idp-graa); font-size: 0.84rem; margin-top: 2px; }

@media (prefers-reduced-motion: reduce) {
  .trin-boks { transition: none; }
  .trin-knap.gjort .trin-boks { transform: none; }
  .trin-knap.netop .trin-boks { animation: none; background: rgba(14, 122, 95, .35); }
}

/* ── Status og mærker ──────────────────────────────────────────────────── */
.prik { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.prik-ikke_startet { background: var(--idp-graa); }
.prik-i_gang { background: var(--idp-gul); }
.prik-pause { background: var(--idp-graa); opacity: .5; }
.prik-naaet { background: var(--idp-groen); }
.prik-opgivet { background: transparent; border: 1px solid var(--idp-graa); }

.maerke {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  line-height: 1.5;
}
.maerke-loes { background: rgba(184, 134, 11, .15); color: var(--idp-gul); }
.maerke-metodisk { background: rgba(14, 122, 95, .15); color: var(--idp-groen); }

.formaal { color: var(--idp-graa); font-size: 0.9rem; margin: 0 0 8px; }
.tom { color: var(--idp-graa); font-style: normal; padding: 6px 0; }

/* ── Grafer ────────────────────────────────────────────────────────────── */
.graf-kort img { width: 100%; height: auto; display: block; }

/* Mørk tilstand: Framework7 skifter selv, her er kun vores egne flader. */
.theme-dark #login-lag { background: #101413; }
.theme-dark .maerke-loes { background: rgba(184, 134, 11, .22); }
.theme-dark .maerke-metodisk { background: rgba(20, 163, 125, .22); color: var(--idp-groen-lys); }