@import url("main.css");

.page-center { max-width: 700px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-5); }

.side-tittel { color: var(--color-blue-primary); }

.kort h2 {
    font-size: var(--font-size-body-2); text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--color-blue-primary); margin-bottom: var(--space-5);
}

.profil-rad {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--space-3) 0; border-bottom: 1px solid #f5f5f5; font-size: var(--font-size-body-3);
}
.profil-rad:last-child { border-bottom: none; }
.profil-label { color: var(--color-neutral-grey); }
.profil-verdi { font-weight: 500; }
.badge-rolle {
    display: inline-block; padding: 3px var(--space-3); border-radius: var(--radius-full);
    font-size: var(--font-size-body-4); font-weight: 500;
}
.badge-bruker { background: #f0f0f0; color: #555; }
.badge-admin { background: #fce4ec; color: #880e4f; }

.aktivitet-liste { list-style: none; }
.aktivitet-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-3) 0; border-bottom: 1px solid #f5f5f5; gap: var(--space-3);
}
.aktivitet-item:last-child { border-bottom: none; }
.aktivitet-navn {
    font-size: var(--font-size-body-3); font-weight: 500;
    color: var(--color-blue-primary); text-decoration: none;
}
.aktivitet-navn:hover { text-decoration: underline; }
.aktivitet-dato { font-size: var(--font-size-body-4); color: var(--color-neutral-light-grey); white-space: nowrap; }
.tom { color: var(--color-neutral-light-grey); font-size: var(--font-size-body-3); }

.passord-form { display: flex; flex-direction: column; gap: var(--space-3); }
.passord-form input {
    width: 100%;
    padding: 14px var(--space-4);
    border: 1px solid #E0E5ED;
    border-radius: var(--radius-5);
    font-size: var(--font-size-body-3);
    color: var(--color-neutral-soft-black);
    font-family: var(--font-family-base);
    background: #F9FAFB;
}
.passord-form input:focus {
    outline: none;
    border-color: var(--color-blue-primary);
    box-shadow: 0 0 0 3px var(--color-blue-10);
}
.passord-wrap { position: relative; }
.passord-wrap input { padding-right: 42px; }
.vis-passord-knapp {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    color: var(--color-neutral-grey);
}
.passord-krav {
    background: white; border-radius: var(--radius-4);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    padding: var(--space-2) var(--space-5);
    display: flex; flex-direction: column; gap: var(--space-2);
    margin-top: var(--space-1);
}
.passord-krav__heading { font-size: var(--font-size-body-4); color: var(--color-neutral-grey); font-weight: var(--font-weight-semibold); }
.passord-krav__divider { height: 1px; background: #e0e0e0; margin: var(--space-0) 0; }
.passord-krav__item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-1) var(--space-2); }
.passord-krav__item-text { font-size: var(--font-size-body-3); color: var(--color-neutral-grey); line-height: normal; font-family: var(--font-family-base); transition: color 0.15s; }
.passord-krav__item .icon-disabled { display: block; }
.passord-krav__item .icon-ok       { display: none; }
.passord-krav__item--ok .icon-disabled { display: none; }
.passord-krav__item--ok .icon-ok       { display: block; }
.passord-krav__item--ok .passord-krav__item-text { color: #16a34a; }
.form-feil { color: var(--color-danger); font-size: var(--font-size-body-4); display: none; }
.form-ok { color: var(--color-success); font-size: var(--font-size-body-4); display: none; }