/* Klantbranding-variabelen; /branding.css overschrijft per klant (FO 4.7) */
:root {
    --app-highlight: #ffc107;
    --app-primary: #0d6efd;
    --app-background: var(--bs-body-bg);
    --app-block-header: var(--bs-card-cap-bg);
}

/* CSP verbiedt style-attributen: alle maten via classes */
.auth-card { max-width: 420px; margin-left: auto; margin-right: auto; }
.profile-main { max-width: 720px; }
.ua-truncate { max-width: 420px; }

.dashboard-body { background-color: var(--app-background); }

/* Responsief banenraster (FO 4.1): 1 kolom mobiel, 2 tablet, N desktop */
.dashboard-lanes { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 768px) {
    .dashboard-lanes { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
    .dashboard-lanes { grid-template-columns: repeat(var(--lane-count, 3), 1fr); }
}

.dashboard-lane { min-width: 0; }
.lane-blocks { min-height: 4rem; }
.block-header { background-color: var(--app-block-header); }
.drag-handle { cursor: grab; user-select: none; color: var(--bs-secondary-color); }
/* Eén regel per artikel: zoveel mogelijk koppen op één scherm. De titel
   wordt afgekapt met een ellipsis; de volledige tekst staat in de tooltip
   en in de popover met de omschrijving. */
.article-item {
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    line-height: 1.25;
}
.article-item .article-row {
    min-width: 0;
    flex-wrap: nowrap;
}
.article-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
}
.article-time,
.article-new-badge { flex: 0 0 auto; }
.article-new-badge { padding: 0.1rem 0.35rem; font-size: 0.7rem; }
.article-new-badge { background-color: var(--app-primary); }
.article-highlight {
    border-left: 4px solid var(--app-highlight);
    background: color-mix(in srgb, var(--app-highlight) 14%, var(--bs-list-group-bg));
}
.blocks-menu { min-width: 240px; max-height: 60vh; overflow-y: auto; }

/* Adminschermen (bouwstap 7) */
.app-navbar { background-color: var(--app-topbar, var(--bs-body-bg)); }

/* Volledig scherm (kioskweergave): zo clean mogelijk. Zichtbaar blijven
   alleen het logo, de titel en de naam van de ingelogde gebruiker. */
body.app-fullscreen .app-navbar .dropdown,
body.app-fullscreen #btn-add-lane,
body.app-fullscreen #btn-reset-layout,
body.app-fullscreen #btn-fullscreen,
body.app-fullscreen .app-navbar a.btn,
body.app-fullscreen .app-navbar form,
body.app-fullscreen .lane-header,
body.app-fullscreen .filter-toggle,
body.app-fullscreen .clock-toggle,
body.app-fullscreen .bb-header-link,
body.app-fullscreen .filter-panel,
body.app-fullscreen .drag-handle {
    display: none !important;
}

body.app-fullscreen .nav-username {
    display: inline !important;
}
.navbar-logo { max-height: 32px; width: auto; }

/* Blokinhoud compact houden: op een dashboard telt elke regel. */
.list-group-item.compact-row {
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    line-height: 1.3;
}
.status-dot {
    width: 0.9rem;
    height: 0.9rem;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    line-height: 1;
}

/* Basisbeveiligingsblok: telvakjes in signaalkleuren. */
.bb-block { padding-top: 0.4rem; padding-bottom: 0.4rem; }
.bb-box {
    display: inline-block;
    min-width: 2.4rem;
    padding: 0.15rem 0.4rem;
    border-radius: 0.25rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.85rem;
    color: #fff;
}
.clock-analog { width: 130px; height: 130px; }
.clock-digital { font-size: 2rem; font-variant-numeric: tabular-nums; font-weight: 600; }

.bb-red { background-color: #dc3545; }
.bb-orange { background-color: #fd7e14; }
.bb-green { background-color: #198754; }

.admin-main { max-width: 960px; }
.admin-main-wide { max-width: 1400px; }
.admin-table td, .admin-table th { vertical-align: middle; }
.admin-inline-input { max-width: 7rem; }

/* Beheertabellen: rijen laag houden zodat een gebruikerslijst in één
   oogopslag te overzien is. Acties zijn kleine, rustige knoppen die pas
   opvallen bij hover. */
.admin-table td,
.admin-table th {
    padding: 0.3rem 0.5rem;
    vertical-align: middle;
}
.admin-table .admin-inline-input {
    padding: 0.15rem 0.4rem;
    font-size: 0.85rem;
    height: auto;
}
.admin-actions {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
}
.admin-actions .btn {
    --bs-btn-padding-y: 0.1rem;
    --bs-btn-padding-x: 0.4rem;
    --bs-btn-font-size: 0.78rem;
    white-space: nowrap;
}
.admin-icon-btn {
    --bs-btn-padding-x: 0.35rem;
    line-height: 1.1;
}

/* Aan/uit staat in een schakelaar in plaats van een knop met tekst: dat
   scheelt kolombreedte én laat de huidige stand zien zonder te lezen. */
.admin-toggle { min-height: auto; padding-left: 2.2rem; }
.admin-toggle .form-check-input { margin-left: -2.2rem; cursor: pointer; }
.admin-days-input { max-width: 4.5rem; }
.admin-name-input { max-width: 14rem; }
.admin-search { max-width: 22rem; }

/* Domeinnamen mogen niet midden in het woord afbreken: dat maakt een lijst
   onleesbaar terwijl afkappen met een tooltip prima werkt. */
.admin-nowrap {
    white-space: nowrap;
    word-break: normal;
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Venster voor het vastleggen van een oordeel. */
.admin-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1060;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 4rem 1rem 1rem;
}
.admin-modal-panel { width: min(36rem, 100%); }
.admin-note-history {
    max-height: 12rem;
    overflow-y: auto;
    border-left: 3px solid var(--bs-border-color);
    padding-left: 0.75rem;
}

/* Handleiding: leesbare regellengte en een meelopende inhoudsopgave. */
.manual h2 { margin-top: 2rem; font-size: 1.25rem; }
.manual h3 { margin-top: 1.25rem; font-size: 1.05rem; }
.manual p, .manual li { max-width: 44rem; }
.manual .manual-toc { top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
.manual #manual-toc .nav-link.active { color: var(--app-primary); font-weight: 600; }
.manual h1 { scroll-margin-top: 1rem; }
.manual h2 { scroll-margin-top: 1rem; }
.manual dt { margin-top: 0.75rem; }

/* Zoekpaneel: over het dashboard heen, zodat je je indeling niet kwijtraakt. */
.search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1055;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 3rem 1rem 1rem;
}
.search-panel { width: min(60rem, 100%); }
.search-query { max-width: 22rem; }
.search-results { max-height: 60vh; overflow-y: auto; }

/* Beheertabellen mogen niet horizontaal scrollen: laat lange waarden
   afbreken in plaats van de tabel te verbreden. */
.admin-table { table-layout: auto; }
.admin-table td { word-break: break-word; }

/* Hostnamen breken op de punt en niet middenin een label. Zonder dit werd
   live.simonloos.cloud.wem.io afgebroken tot "live.simonloos.clou" en
   "d.wem.io", en dat leest niemand meer als een naam. Het breekpunt zelf
   wordt in de tekst gezet; CSS kent geen regel voor "alleen op punten". */
.admin-hostname {
    word-break: normal;
    overflow-wrap: normal;
}

/* Hoort deze rij bij de kopregel erboven? Zonder dit onderscheid loopt een
   groep visueel over in wat erna komt, en dan zegt de kop niets meer. */
.admin-group-member td:first-child { padding-left: 1.75rem; }
.admin-group-head td { background-color: var(--bs-tertiary-bg); }
.admin-table .admin-actions .btn,
.admin-table .admin-inline-input { flex: 0 0 auto; }
.admin-color-input { max-width: 9rem; }

/* Voortgangsbalk in stappen van vijf procent. De CSP verbiedt
   stijlattributen, dus de breedte staat hier in plaats van in de
   opbouw; voor een voortgang is deze fijnheid ruim genoeg. */
.admin-progress-0 { width: 0%; }
.admin-progress-5 { width: 5%; }
.admin-progress-10 { width: 10%; }
.admin-progress-15 { width: 15%; }
.admin-progress-20 { width: 20%; }
.admin-progress-25 { width: 25%; }
.admin-progress-30 { width: 30%; }
.admin-progress-35 { width: 35%; }
.admin-progress-40 { width: 40%; }
.admin-progress-45 { width: 45%; }
.admin-progress-50 { width: 50%; }
.admin-progress-55 { width: 55%; }
.admin-progress-60 { width: 60%; }
.admin-progress-65 { width: 65%; }
.admin-progress-70 { width: 70%; }
.admin-progress-75 { width: 75%; }
.admin-progress-80 { width: 80%; }
.admin-progress-85 { width: 85%; }
.admin-progress-90 { width: 90%; }
.admin-progress-95 { width: 95%; }
.admin-progress-100 { width: 100%; }