/* =========================================================
   Forsiden. Linket fra index.html (CLAUDE.md afsnit 5, punkt 9).

   Statusfarverne er faste og bruges KUN til status - altid
   sammen med ikon og tekst:
     good #0ca30c · serious #ec835a · critical #d03b3b
   Tekst staar i almindelig blæk; farven sidder paa ikonet,
   kanten og bjaelken.
========================================================= */

.forside-mapping {
    --status-good: #0ca30c;
    --status-serious: #ec835a;
    --status-critical: #d03b3b;
    --status-good-soft: #e7f6e7;
    --status-serious-soft: #fdf0ea;
    --status-critical-soft: #fbeaea;

    display: grid;
    gap: 16px;
}

/* ---------- linjen øverst ---------- */

.forside-hero {
    display: flex;
    gap: 20px;
    align-items: center;
}

/* Tallet står i almindelig blæk - status bæres af ikonet ved siden af */
.forside-hero-number {
    font-size: 48px;
    font-weight: 600;
    line-height: 1;
}

.forside-hero-icon {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--status-good-soft);
    color: var(--status-good);
    font-size: 24px;
    font-weight: 700;
}

.forside-hero.is-critical .forside-hero-icon {
    background: var(--status-critical);
    color: #ffffff;
}

.forside-hero.is-serious .forside-hero-icon {
    background: var(--status-serious);
    color: #ffffff;
}

.forside-hero-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 2px;
}

.forside-section-head {
    display: flex;
    gap: 12px;
    align-items: baseline;
    flex-wrap: wrap;
    margin-top: 8px;
}

.forside-section-head h3 {
    margin: 0;
}

.forside-section-head .muted {
    font-size: .85rem;
}

/* ---------- kortene ---------- */

.forside-clients {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.forside-client {
    display: grid;
    gap: 14px;
    margin: 0;
    border-left: 4px solid transparent;
}

.forside-client.is-critical { border-left-color: var(--status-critical); }
.forside-client.is-serious  { border-left-color: var(--status-serious); }
.forside-client.is-good     { border-left-color: var(--status-good); }

.forside-client-head {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}

.forside-client-head h4 {
    margin: 0;
    font-size: 1.05rem;
}

.forside-client-foot {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: .85rem;
}

.forside-client-error {
    margin: 0;
    font-size: .9rem;
}

/* Knapper i et kort skal ikke strækkes til fuld bredde */
.forside-client > .small-button,
.forside-client > .button {
    justify-self: start;
}

.forside-duplicates {
    color: inherit;
    font-weight: 600;
}

.forside-cta {
    white-space: nowrap;
}

/* ---------- statuspillen: ikon + tekst ---------- */

.forside-status {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 3px 10px 3px 4px;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
}

.forside-status-icon {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: #ffffff;
    font-size: .75rem;
    font-weight: 700;
}

.forside-status.is-good     { background: var(--status-good-soft); }
.forside-status.is-serious  { background: var(--status-serious-soft); }
.forside-status.is-critical { background: var(--status-critical-soft); }

.forside-status.is-good     .forside-status-icon { background: var(--status-good); }
.forside-status.is-serious  .forside-status-icon { background: var(--status-serious); }
.forside-status.is-critical .forside-status-icon { background: var(--status-critical); }

/* ---------- bjælken: mappet / mangler ---------- */

/* Tynd, delt bjælke uden tekst - 8px, runde ender, 2px mellemrum */
.forside-bar {
    display: flex;
    gap: 2px;
    height: 8px;
}

.forside-bar span {
    min-width: 4px;
    border-radius: 999px;
}

.forside-bar-mapped  { background: var(--status-good); }
.forside-bar-missing { background: var(--status-critical); }