html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}


.form-control {
    background-color:#fff;
}

    .form-control:disabled {
        background-color: var(--tb-tertiary-bg)
    }

    .form-control:focus {
        background-color:#fffeee;
        font-weight:700;
    }


.btn-outline-dark {
    background-color: #fff;
}

.choices__inner {
    background-color: #fff;
}



/* readonly + form-control */
input.form-control[readonly] {
    background-color: #f5f5f5;
    color: #555;
    border-color: #ccc;
}

/* disabled + form-control */
input.form-control:disabled {
    background-color: #e0e0e0;
    color: #999;
    border-color: #aaa;
}

.menuitem-hidden {
    display:none;
}


/* ── Prototypläge (prototype mode – ingen data sparas) ─────────────────── */

/* Banner som visas överst på en prototypsida. */
.prototype-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1rem;
    padding: 10px 16px;
    border: 1px solid #e0a800;
    border-left-width: 6px;
    border-radius: 6px;
    background-color: #fff8e1;
    color: #7a5c00;
    font-size: .85rem;
    /* Diagonala varningsränder för att tydligt signalera "ej skarpt". */
    background-image: repeating-linear-gradient(
        45deg,
        rgba(224, 168, 0, .10),
        rgba(224, 168, 0, .10) 10px,
        rgba(224, 168, 0, 0) 10px,
        rgba(224, 168, 0, 0) 20px
    );
}

.prototype-banner .prototype-banner-icon {
    font-size: 1.4rem;
    line-height: 1;
    color: #e0a800;
    flex-shrink: 0;
}

.prototype-banner strong {
    color: #7a5c00;
}

/* Banner för beta-/planerad funktionalitet (lila – annan färg än prototypens gula). */
.beta-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1rem;
    padding: 10px 16px;
    border: 1px solid #6f42c1;
    border-left-width: 6px;
    border-radius: 6px;
    background-color: #f3eefc;
    color: #4a2b86;
    font-size: .85rem;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(111, 66, 193, .10),
        rgba(111, 66, 193, .10) 10px,
        rgba(111, 66, 193, 0) 10px,
        rgba(111, 66, 193, 0) 20px
    );
}

.beta-banner .beta-banner-icon {
    font-size: 1.4rem;
    line-height: 1;
    color: #6f42c1;
    flex-shrink: 0;
}

.beta-banner strong {
    color: #4a2b86;
}

/* Pluppar i vänstermenyn: gul "P" = prototyp (inte redo), svart "N/A" = ej byggd. */
.prototype-p,
.prototype-na {
    margin-left: 6px;
    vertical-align: middle;
    flex: 0 0 auto;
}

/* ── Egen formulärvalidering (ersätter webbläsarens inbyggda popup) ───────
   Systemövergripande: används automatiskt av fk-validation.js på alla formulär.
   Markering runt fältet + feltext under. Opt-out per formulär: data-no-fk-validate. */
.fk-invalid,
.fk-invalid:focus {
    border-color: #f06548 !important;
    box-shadow: 0 0 0 0.18rem rgba(240, 101, 72, 0.20) !important;
}

/* Ram runt hela fältgruppen (om fältet ligger i en .fk-field-wrap) */
.fk-field-wrap.fk-has-error {
    outline: 2px solid rgba(240, 101, 72, 0.55);
    outline-offset: 3px;
    border-radius: 6px;
}

/* Feltext under fältet */
.fk-invalid-msg {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #f06548;
    font-size: 0.8rem;
    font-weight: 500;
    margin-top: 4px;
}
.fk-invalid-msg::before {
    content: "⚠";
    font-size: 0.9rem;
    line-height: 1;
}