/* Beheer (/beheer en /start): Bulma 1 in de huisstijl van Tipsvoorschool.nl */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url(/static/tvs/fonts/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.woff2) format('woff2');
}

:root {
    /* #2f5aae, de accentkleur van de site */
    --bulma-primary-h: 220deg;
    --bulma-primary-s: 57%;
    --bulma-primary-l: 43%;
    --bulma-link-h: 220deg;
    --bulma-link-s: 57%;
    --bulma-link-l: 43%;
    --bulma-family-primary: 'Open Sans', Arial, Helvetica, sans-serif;
    --bulma-body-color: #272626;
    --bulma-text: #272626;
    --bulma-text-strong: #272626;
    --bulma-radius: 8px;
    --bulma-radius-large: 14px;
    --tvs-bg: #f4f5f7;
    --tvs-border: #e3e6ec;
}

html { color-scheme: light; }
html, body { background: var(--tvs-bg); }
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }

.title, .subtitle { letter-spacing: -0.01em; }
.title { font-weight: 800; }

/* Bovenbalk zoals de header van de site: wit, merknaam vet */
.tvs-navbar { background: #fff; border-bottom: 1px solid var(--tvs-border); }
.tvs-navbar .navbar-brand .navbar-item { font-weight: 800; font-size: 1.15rem; color: #272626; }
.tvs-navbar .navbar-brand .tag { margin-left: .5rem; font-weight: 600; }
.tvs-navbar .navbar-item.is-active, .tvs-navbar a.navbar-item:hover { color: hsl(220deg 57% 43%); background: transparent; }
.tvs-navbar .navbar-item.is-active { box-shadow: inset 0 -3px 0 hsl(220deg 57% 43%); }
.tvs-navbar .navbar-item .tag.is-rounded { margin-left: .4rem; }
#nav-toggle { display: none; }
@media screen and (max-width: 1023px) {
    #nav-toggle:checked ~ .navbar-menu { display: block; }
}

.tvs-page { padding: 2rem 1rem 4rem; }
.tvs-page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.tvs-page-head .title { margin-bottom: 0; }

/* Kaarten zoals de afgeronde blokken op de site */
.box, .card { border-radius: var(--bulma-radius-large); box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08); border: 1px solid var(--tvs-border); }
.box > .title:first-child { font-size: 1.1rem; }

/* Statistiektegels */
.tvs-stat { display: block; color: inherit; transition: transform .1s ease, box-shadow .1s ease; }
a.tvs-stat:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(16, 24, 40, .12); color: inherit; }
.tvs-stat .tvs-stat-value { font-size: 2.2rem; font-weight: 800; line-height: 1.1; }
.tvs-stat .tvs-stat-label { color: #6b7280; font-weight: 600; }
.tvs-stat.is-attention { border-color: hsl(38deg 92% 60%); background: hsl(45deg 100% 97%); }

/* Tegels op Start */
.tvs-tile { display: flex; gap: 1rem; align-items: flex-start; height: 100%; color: inherit; transition: transform .1s ease, box-shadow .1s ease; }
a.tvs-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(16, 24, 40, .12); color: inherit; }
.tvs-tile .tvs-icon { flex: 0 0 auto; width: 2.75rem; height: 2.75rem; border-radius: 12px; background: hsl(220deg 57% 95%); color: hsl(220deg 57% 43%); display: grid; place-items: center; }
.tvs-tile .tvs-icon svg { width: 1.4rem; height: 1.4rem; }
.tvs-tile strong { display: block; font-size: 1.05rem; }
.tvs-tile p { color: #6b7280; font-size: .9rem; margin-top: .15rem; }
.tvs-section-title { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #6b7280; margin: 2rem 0 .75rem; }

/* Tabellen */
.table-container { border-radius: var(--bulma-radius-large); border: 1px solid var(--tvs-border); background: #fff; }
.table { --bulma-table-background-color: #fff; }
.table th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; }
.table td { vertical-align: middle; }
.table tr.is-clickable { cursor: pointer; }
.tvs-muted { color: #6b7280; }
.tvs-nowrap { white-space: nowrap; }

/* Reacties */
.tvs-reactie { border-left: 4px solid transparent; }
.tvs-reactie.is-pending { border-left-color: hsl(38deg 92% 55%); }
.tvs-reactie.is-spam { border-left-color: hsl(348deg 86% 61%); opacity: .85; }
.tvs-reactie.is-approved { border-left-color: hsl(153deg 53% 53%); }
.tvs-reactie .tvs-reactie-meta { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; font-size: .9rem; }
.tvs-reactie .tvs-reactie-text { white-space: pre-wrap; margin: .6rem 0; overflow-wrap: anywhere; }
.tvs-reactie .tvs-context { background: var(--tvs-bg); border-radius: 8px; padding: .5rem .75rem; font-size: .88rem; color: #4b5563; margin-top: .5rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.tvs-reactie .buttons { margin-top: .5rem; }
.tvs-reply { margin-top: .75rem; display: none; }
.tvs-reply.is-open { display: block; }

/* Editor */
.tvs-editor-toolbar { display: flex; flex-wrap: wrap; gap: .25rem; padding: .4rem; border: 1px solid var(--tvs-border); border-bottom: 0; border-radius: 8px 8px 0 0; background: #fafbfc; }
.tvs-editor-toolbar .button { font-weight: 700; }
.tvs-editor-toolbar .tvs-spacer { flex: 1; }
/* .textarea.tvs-markdown: specifieker dan Bulma's .textarea:not([rows]) met max-height 40em */
.textarea.tvs-markdown { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .92rem; line-height: 1.55; height: 65vh; min-height: 20rem; max-height: none; border-radius: 0 0 8px 8px; resize: vertical; }
.tvs-preview { width: 100%; height: 65vh; min-height: 20rem; border: 1px solid var(--tvs-border); border-radius: 0 0 8px 8px; background: #fff; display: block; }
.tvs-editor.is-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.tvs-editor.is-write .tvs-preview-col { display: none; }
.tvs-editor.is-preview .tvs-write-col { display: none; }
@media screen and (max-width: 1215px) { .tvs-editor.is-split { grid-template-columns: 1fr; } }
.tvs-thumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; border: 1px solid var(--tvs-border); background: var(--tvs-bg); }
.tvs-sticky { position: sticky; top: 1rem; }
.tvs-counter { font-size: .8rem; color: #6b7280; float: right; }
.tvs-counter.is-over { color: hsl(348deg 86% 45%); font-weight: 700; }

.tvs-footer { padding: 1.5rem; text-align: center; color: #9ca3af; font-size: .85rem; }

/* Inloggen, aanmelden, wachtwoord: één gecentreerde kaart */
.tvs-auth { max-width: 460px; margin: 1.5rem auto; }
.tvs-auth .box { padding: 2rem; }
.tvs-auth .title { text-align: center; }
.tvs-auth .tvs-auth-intro { text-align: center; color: #6b7280; margin: -.75rem 0 1.5rem; }
.tvs-auth .tvs-auth-links { text-align: center; color: #6b7280; margin-top: 1.25rem; font-size: .9rem; }
.tvs-auth .tvs-auth-links a { margin: 0 .4rem; }
.tvs-auth .help:empty { display: none; }

/* Mijn reacties op /start */
.tvs-mijn-reactie { padding: 1rem 1.25rem; border-bottom: 1px solid var(--tvs-border); }
.tvs-mijn-reactie:last-child { border-bottom: 0; }
.tvs-mijn-reactie-text { white-space: pre-wrap; overflow-wrap: anywhere; color: #4b5563; margin: .35rem 0; }
.tvs-confirm { border-left: 4px solid hsl(220deg 57% 43%); }