/* Slimpie ouderpaneel · bouwt voort op app.css */

.ouders-body {
    min-height: 100vh;
    background: var(--papier);
}

.ouders-kop {
    background: var(--inkt);
    color: var(--papier);
    padding: 14px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.ouders-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--papier);
    text-decoration: none;
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    font-size: 20px;
}

.ouders-kop-acties {
    display: flex;
    gap: 18px;
    align-items: center;
}

.ouders-link {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--papier);
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    opacity: 0.9;
}

/* ============ PIN-scherm ============ */

.pin-scherm {
    display: flex;
    justify-content: center;
    padding: 60px 20px;
}

.pin-scherm[hidden] {
    display: none;
}

.pin-kaart {
    border: 3px solid var(--inkt);
    border-radius: 18px;
    box-shadow: 8px 8px 0 rgb(43 43 51 / 15%);
    padding: 36px 32px;
    text-align: center;
    max-width: 420px;
}

.pin-kaart h1 {
    font-size: 26px;
    font-weight: 700;
    margin-top: 12px;
}

.pin-kaart p {
    font-weight: 600;
    font-size: 15px;
    line-height: 1.6;
    margin-top: 10px;
}

.pin-rij {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.pin-rij input {
    flex: 1;
    padding: 12px 16px;
    font-size: 22px;
    letter-spacing: 6px;
    text-align: center;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    border: 2px solid var(--inkt);
    border-radius: 12px;
    background: var(--wit);
    min-width: 0;
}

.pin-fout {
    color: var(--rood);
    font-weight: 700;
    font-size: 14px;
    margin-top: 12px;
    min-height: 18px;
}

/* ============ Tabs ============ */

.paneel-inhoud {
    max-width: 860px;
    margin: 0 auto;
    padding: 28px 20px 60px;
}

.tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    border-bottom: 3px solid var(--inkt);
    padding-bottom: 0;
}

.tab {
    background: var(--wit);
    border: 3px solid var(--inkt);
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    padding: 10px 18px;
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    color: var(--inkt);
    opacity: 0.65;
}

.tab.actief {
    background: var(--geel);
    opacity: 1;
}

.badge {
    background: var(--rood);
    color: var(--papier);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 12px;
    margin-left: 4px;
}

.tab-paneel {
    padding-top: 24px;
    display: grid;
    gap: 18px;
}

.tab-paneel[hidden] {
    display: none;
}

/* ============ Weekkaarten ============ */

.week-kaart,
.leeg-kaart {
    border: 3px solid var(--inkt);
    border-radius: 16px;
    padding: 26px 28px;
    box-shadow: 6px 6px 0 rgb(43 43 51 / 12%);
}

.leeg-kaart {
    text-align: center;
}

.leeg-kaart h2 {
    font-size: 22px;
    font-weight: 700;
}

.leeg-kaart p {
    font-weight: 600;
    font-size: 15px;
    line-height: 1.65;
    margin-top: 8px;
}

.week-label {
    font-family: 'Caveat', cursive;
    font-size: 26px;
    color: var(--groen);
    line-height: 1;
}

.week-samenvatting {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.7;
    margin-top: 12px;
}

.week-kaart h3 {
    font-size: 17px;
    font-weight: 600;
    margin-top: 20px;
    color: var(--inkt);
}

.week-kaart ul {
    list-style: none;
    padding: 0;
    margin-top: 8px;
    display: grid;
    gap: 6px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.55;
}

/* ============ Praatstarters (de verrassing) ============ */

.praatstarters {
    margin-top: 24px;
    background: var(--groen);
    color: var(--papier);
    border-radius: 14px;
    padding: 20px 22px;
}

.praatstarters h3 {
    color: var(--papier);
    margin-top: 0;
    font-size: 18px;
}

.praatstarters-intro {
    font-size: 14px;
    font-weight: 600;
    opacity: 0.92;
    margin-top: 6px;
}

.praatstarter {
    background: var(--papier);
    color: var(--inkt);
    border: 2px solid var(--inkt);
    border-radius: 12px;
    padding: 12px 16px;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.5;
    margin-top: 10px;
    box-shadow: 3px 3px 0 rgb(43 43 51 / 25%);
}

/* ============ Gesprekken ============ */

.gesprekken-lijst {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gesprek-groep {
    border: 2px solid var(--inkt);
    border-radius: 12px;
    background: var(--wit);
    overflow: hidden;
}

.gesprek-groep-kop {
    padding: 10px 14px;
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    background: var(--geel);
    list-style: none;
}

.gesprek-groep-kop::-webkit-details-marker {
    display: none;
}

.gesprek-groep-lijst {
    display: flex;
    flex-direction: column;
}

.gesprek-rij-compact {
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: 1px solid rgb(43 43 51 / 12%);
}

.gesprek-klik {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px 12px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Nunito', sans-serif;
    text-align: left;
    min-width: 0;
}

.gesprek-klik:hover {
    background: rgb(255 230 109 / 35%);
}

.gesprek-datum {
    font-size: 12px;
    font-weight: 700;
    opacity: 0.6;
    flex-shrink: 0;
}

.gesprek-titel-compact {
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    font-size: 14px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gesprek-groep-label {
    font-size: 12px;
    font-weight: 700;
    opacity: 0.55;
    flex-shrink: 0;
}

.gesprek-badge {
    font-size: 11px;
    font-weight: 700;
    background: rgb(255 230 109 / 60%);
    border: 1px solid var(--inkt);
    border-radius: 6px;
    padding: 2px 6px;
    flex-shrink: 0;
}

.gesprek-verwijder-knop {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 12px;
    font-size: 14px;
    opacity: 0.5;
}

.gesprek-verwijder-knop:hover {
    opacity: 1;
}

.gesprekken-meer {
    margin-top: 12px;
    width: 100%;
}

.knop-secundair {
    background: var(--wit);
    color: var(--inkt);
    border: 3px solid var(--inkt);
    border-radius: 12px;
    padding: 10px 18px;
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}

.knop-secundair:hover:not(:disabled) {
    background: var(--geel);
}

.knop-secundair:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* ============ Meldingen ============ */

.melding-kaart {
    border: 3px solid var(--rood);
    background: var(--wit);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 14px;
}

.melding-kaart.aandachtspunt {
    border-color: var(--inkt);
}

.melding-kaart.gezien {
    border-color: var(--inkt);
    opacity: 0.6;
}

.melding-inhoud {
    flex: 1;
    min-width: 200px;
}

.melding-kaart p {
    margin-top: 8px;
    line-height: 1.5;
}

.melding-gesprek {
    font-size: 14px;
    opacity: 0.85;
}

.melding-tip {
    font-size: 13px;
    font-weight: 600;
    opacity: 0.75;
    margin-top: 10px;
}

.melding-datum {
    font-size: 13px;
    opacity: 0.65;
}

.melding-acties {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.knop-rood {
    background: var(--rood);
    color: var(--papier);
    border: 3px solid var(--inkt);
    border-radius: 12px;
    padding: 10px 18px;
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
}

.knop-gesprek {
    background: var(--wit);
    color: var(--inkt);
    border: 3px solid var(--inkt);
    border-radius: 12px;
    padding: 10px 18px;
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
}

.transcript-fout {
    padding: 20px;
    font-weight: 600;
    text-align: center;
    opacity: 0.75;
}

/* ============ Transcript-overlay ============ */

.transcript-overlay {
    position: fixed;
    inset: 0;
    background: rgb(43 43 51 / 55%);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    z-index: 200;
}

.transcript-overlay[hidden] {
    display: none;
}

.transcript-venster {
    width: 100%;
    max-width: 680px;
    max-height: 85vh;
    border: 3px solid var(--inkt);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.transcript-kop {
    background: var(--inkt);
    color: var(--papier);
    padding: 12px 18px;
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.transcript-kop-acties {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.transcript-verwijder {
    background: none;
    border: 1px solid rgb(255 255 255 / 40%);
    border-radius: 8px;
    color: var(--papier);
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
    font-weight: 700;
    padding: 4px 10px;
    cursor: pointer;
}

.transcript-verwijder:hover {
    background: rgb(255 255 255 / 12%);
}

.transcript-kop button {
    background: none;
    border: none;
    color: var(--papier);
    font-size: 16px;
    cursor: pointer;
}

.transcript-berichten {
    overflow-y: auto;
    padding: 22px 22px 22px 60px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ============ Kindselector bovenaan het paneel ============ */

.ouders-kind-wrap {
    margin-bottom: 18px;
}

.ouders-kind-wrap select {
    width: 100%;
    max-width: 340px;
    padding: 11px 14px;
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    font-size: 15px;
    border: 3px solid var(--inkt);
    border-radius: 12px;
    background: var(--geel);
    color: var(--inkt);
    cursor: pointer;
}