/* advi-auth - app-specifieke aanvullingen op advitronics.css
   De tokens (kleuren, radius, thema) komen uit advitronics.css; hier staat
   alleen wat uniek is voor deze app. Oude klassenamen zijn bewust behouden
   zodat de bestaande templates ongewijzigd blijven werken. */

.groet {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0 0 1.25rem 0;
}

/* .wrap was de oude container; blijft werken maar volgt nu de tokens. */
.wrap {
    max-width: 720px;
    margin: 0 auto;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem;
}

.highlight {
    background: var(--bg-success);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    color: var(--text-success);
}

.button-link.danger {
    background: none;
    border: none;
    color: var(--link-danger);
    padding: 0;
    font-size: 0.85rem;
    cursor: pointer;
}
.button-link.danger:hover { text-decoration: underline; background: none; }

form.inline { display: inline; }

.doc-list { display: flex; flex-direction: column; gap: 0.6rem; }

.doc-row {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.9rem 1.1rem;
    margin-bottom: 0.75rem;
    background: var(--panel);
}
.doc-row-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}
.doc-row-head .hint { margin-right: auto; }

code {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.05rem 0.3rem;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.9em;
}

.badge {
    background: var(--bg-warning);
    border: 1px solid var(--border);
    color: var(--text-warning);
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
    font-size: 0.8rem;
}

.app-tile {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.9rem 1.1rem;
    text-decoration: none;
    color: var(--text);
    background: var(--panel);
}
.app-tile:hover { border-color: var(--primary); }
.app-tile-icoon { font-size: 1.6rem; line-height: 1; }
.app-tile-naam { font-weight: 600; }

@media (min-width: 600px) {
    .doc-list.tegels {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
}


/* ==================== Verzamellog (/log) ==================== */

.bronbalk { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.bronchip {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.8rem; padding: 3px 9px; border-radius: 999px;
    border: 1px solid var(--border);
}
.bronchip.ok   { background: var(--bg-success); color: var(--text-success); }
.bronchip.fout { background: var(--bg-danger);  color: var(--text-danger); }
.bronchip b { font-weight: 600; }

.logfilter {
    background: var(--panel); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px;
}
.logfilter .rij { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.logfilter .rij + .rij { margin-top: 10px; }
.logfilter .veld { display: flex; flex-direction: column; min-width: 140px; }
.logfilter .veld.breed { flex: 1 1 100%; }
.logfilter label { margin: 0 0 3px; font-size: 0.8rem; }
.logfilter select, .logfilter input { padding: 6px 9px; font-size: 0.9rem; }
.logfilter .apps { align-items: center; gap: 14px; }
.logfilter .apps .label { font-size: 0.8rem; color: var(--text-muted); }
.vink { display: inline-flex; align-items: center; gap: 5px; font-size: 0.85rem; margin: 0; }
.vink input { width: auto; }
.ververs { margin-left: auto; }

.telling { margin: 10px 0; }

.logtabel { width: 100%; border-collapse: collapse; font-size: 0.82rem; table-layout: fixed; }
.logtabel th {
    text-align: left; padding: 7px 8px; border-bottom: 2px solid var(--border);
    color: var(--text-muted); font-weight: 500; position: sticky; top: 0;
    background: var(--panel); z-index: 1;
}
.logtabel td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.logtabel tr.n-fout         { background: var(--bg-danger); }
.logtabel tr.n-waarschuwing { background: var(--bg-warning); }
.logtabel tr.n-debug td     { color: var(--text-muted); }

.logtabel th:nth-child(1), .logtabel td:nth-child(1) { width: 140px; }
.logtabel th:nth-child(2), .logtabel td:nth-child(2) { width: 92px; }
.logtabel th:nth-child(3), .logtabel td:nth-child(3) { width: 96px; }
.logtabel th:nth-child(4), .logtabel td:nth-child(4) { width: 76px; }
.logtabel th:nth-child(5), .logtabel td:nth-child(5) { width: 110px; }
.logtabel th:nth-child(6), .logtabel td:nth-child(6) { width: 220px; }

.logtabel .tijd  { font-family: ui-monospace, Menlo, Consolas, monospace; white-space: nowrap; }
.logtabel .actie { font-family: ui-monospace, Menlo, Consolas, monospace; word-break: break-word; }
.logtabel .detail { word-break: break-word; }
.logtabel .bericht { margin-bottom: 3px; }
.logtabel .ip { font-family: ui-monospace, Menlo, Consolas, monospace; }
.logtabel pre {
    margin: 5px 0 0; padding: 8px; background: var(--bg);
    border: 1px solid var(--border); border-radius: 4px;
    font-size: 0.78rem; white-space: pre-wrap; word-break: break-word;
    max-height: 320px; overflow: auto;
}
.logtabel summary { cursor: pointer; color: var(--text-muted); font-size: 0.78rem; }

.appchip {
    font-size: 0.75rem; padding: 2px 7px; border-radius: 999px;
    border: 1px solid var(--border); white-space: nowrap;
}

.niveau { font-size: 0.75rem; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.niveau.debug        { background: var(--bg);          color: var(--text-muted); }
.niveau.info         { background: var(--bg-success);  color: var(--text-success); }
.niveau.waarschuwing { background: var(--bg-warning);  color: var(--text-warning); }
.niveau.fout         { background: var(--bg-danger);   color: var(--text-danger); }

/* De log heeft meer breedte nodig dan de andere pagina's */
body.log-breed .content-smal { max-width: var(--content-max); }

@media (max-width: 800px) {
    .logtabel { table-layout: auto; font-size: 0.78rem; }
    .logtabel th:nth-child(4), .logtabel td:nth-child(4) { display: none; }
}