/* Minimale aanvullingen bovenop Pico.css. */

/* ---------- App-header (title + version + env-badge) ---------- */
.app-header {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin: 1.5rem 0 1.5rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--pico-muted-border-color);
}

.app-title {
    margin: 0;
    font-size: 1.6rem;
    flex: 0 1 auto;
}

.app-title a {
    color: inherit;
    text-decoration: none;
}

.app-version {
    font-size: 0.85rem;
    color: var(--pico-muted-color);
    font-variant-numeric: tabular-nums;
}

.env-badge {
    margin-left: auto;
    padding: 0.2rem 0.6rem;
    border-radius: 0.4rem;
    font-size: 0.75rem;
    font-weight: bold;
    color: white;
    letter-spacing: 0.05em;
    user-select: none;
}

.env-badge.env-dev {
    background: #1e6091;
}

.env-badge.env-prod {
    background: #b22234;
}

.app-user {
    font-size: 0.85rem;
    color: var(--pico-muted-color);
    font-variant-numeric: tabular-nums;
}

.app-logout {
    font-size: 0.85rem;
    color: var(--pico-muted-color);
    text-decoration: none;
    border-bottom: 1px dotted var(--pico-muted-border-color);
}

.app-logout:hover {
    color: var(--pico-color);
    text-decoration: none;
}

/* ---------- Stats-strook ---------- */
.stats-strip {
    border: 2px solid #5db075;
    border-radius: 0.6rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
}

.stats-table {
    margin: 0;
    width: 100%;
    border-collapse: collapse;
}

.stats-table thead th {
    text-align: center;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border: none;
}

.stats-table tbody td,
.stats-table tbody th {
    text-align: center;
    padding: 0.2rem 0.5rem;
    border: none;
    width: auto;
}

.stats-row-label {
    text-align: left !important;
    font-weight: 500;
    color: var(--pico-muted-color);
    white-space: nowrap;
}

.stats-count {
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
}

.stats-delta {
    font-variant-numeric: tabular-nums;
}

.stats-delta.positive { color: #2f7a4d; }
.stats-delta.negative { color: #b22234; }
.stats-delta.neutral  { color: var(--pico-muted-color); }

.stats-date-row td,
.stats-date-row th {
    color: var(--pico-muted-color);
}

/* ---------- Functie-tegels ---------- */
.tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.tile {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.5rem;
    border-radius: 0.4rem;
    background: #1e6091;
    color: white;
    text-decoration: none;
    transition: filter 0.15s ease;
    border: none;
}

.tile:hover {
    filter: brightness(1.1);
    color: white;
}

.tile-label {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

@media (max-width: 800px) {
    .tiles { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Output window ---------- */
.output-window {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: stretch;
    margin-bottom: 1.5rem;
}

.output-body {
    border: 2px solid #5db075;
    border-radius: 0.6rem;
    padding: 0.75rem 1rem;
    height: 18rem;
    max-height: 18rem;
    overflow: auto;
}

.output-body pre {
    margin: 0;
    background: transparent;
    color: var(--pico-muted-color);
    font-size: 0.85rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.output-tabs {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 5rem;
}

.output-tab {
    background: #1e6091;
    color: white;
    border: none;
    border-radius: 0.4rem;
    padding: 0.6rem 0;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    margin: 0;
}

.output-tab.active {
    background: #134a72;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
}

.output-tab:hover {
    filter: brightness(1.1);
}

.output-control {
    background: transparent;
    border: 2px solid #1e6091;
    color: #1e6091;
    border-radius: 0.4rem;
    padding: 0.4rem 0;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    margin: 0;
    margin-top: auto;
    font-size: 0.85rem;
}

.output-control.paused {
    background: #fff3cd;
    border-color: #c08a2e;
    color: #5a4108;
}

/* ---------- Bestaande sync-feedback styling (ongewijzigd) ---------- */
.sync-ok {
    --pico-color: #0b3d22;
    --pico-background-color: #d4edda;
    --pico-border-color: #b3e0c2;
}

.sync-err {
    --pico-color: #5a1620;
    --pico-background-color: #f8d7da;
    --pico-border-color: #f1b0b7;
}

.sync-ok strong,
.sync-err strong {
    color: inherit;
}

.sync-form {
    margin: 1rem 0;
}

.sync-form button {
    width: auto;
}

.inline-check {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

/* Compactere filter-bar: flex-layout zodat elk element zijn eigen
   rounded corners houdt (i.t.t. Pico's role=group). Search-input rekt
   uit, button schuift naar rechts. */
.filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 0.75rem 0;
    --pico-form-element-spacing-vertical: 0.35rem;
}

.filter-form .search-input {
    flex: 1 1 12rem;
    margin: 0;
}

.filter-form .inline-check {
    margin: 0;
}

.filter-form .filter-button {
    width: auto;
    margin: 0;
    padding-inline: 1.5rem;
}

.filter-form .filter-select {
    margin: 0;
    width: auto;
    min-width: 10rem;
}

.pager {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 0.5rem 0;
    font-size: 0.9rem;
}

.pager a {
    margin-left: 1rem;
}

table th[scope="row"] {
    width: 16rem;
}

/* Companies-lijst: vaste kolombreedtes zodat de tabel niet meer
   herverdeelt bij elke pagina. Naam-kolom (col 2) krijgt impliciet
   alle resterende ruimte via table-layout: fixed. */
.company-list-table {
    table-layout: fixed;
    width: 100%;
}

.company-list-table th:nth-child(1),
.company-list-table td:nth-child(1) {
    width: 6rem;
}

.company-list-table th:nth-child(3),
.company-list-table td:nth-child(3) {
    width: 5rem;
    text-align: center;
}

.company-list-table th:nth-child(4),
.company-list-table td:nth-child(4) {
    width: 7rem;
}

.company-list-table td:nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tickets-lijst: vaste kolombreedtes voor consistent overzicht.
   Kolommen sinds 2.4.0: Company · Aanmaakdatum · Status · Prio · Titel.
   Titel rekt mee (= laatste kolom). */
.tickets-list-table {
    table-layout: fixed;
    width: 100%;
}

.tickets-list-table th,
.tickets-list-table td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tickets-list-table th:nth-child(1),
.tickets-list-table td:nth-child(1) { width: 16rem; }  /* Company */
.tickets-list-table th:nth-child(2),
.tickets-list-table td:nth-child(2) { width: 8rem; }   /* Aanmaakdatum */
.tickets-list-table th:nth-child(3),
.tickets-list-table td:nth-child(3) { width: 8rem; }   /* Status */
.tickets-list-table th:nth-child(4),
.tickets-list-table td:nth-child(4) { width: 5rem; }   /* Prio */
/* Kolom 5 (Titel) rekt mee */

/* Group-by-company view: collapsible blokken per company. */
.ticket-group {
    margin: 0.5rem 0 0.75rem 0;
    border: 1px solid var(--pico-muted-border-color);
    border-radius: 0.4rem;
    padding: 0.4rem 0.6rem;
}
.ticket-group > summary {
    cursor: pointer;
    list-style: none;
    padding: 0.2rem 0;
    user-select: none;
}
.ticket-group > summary::-webkit-details-marker { display: none; }
.ticket-group > summary::before {
    content: "▸";
    display: inline-block;
    width: 1rem;
    color: var(--pico-muted-color);
    transition: transform 0.15s ease;
}
.ticket-group[open] > summary::before {
    content: "▾";
}
.ticket-group > summary .count {
    margin-left: 0.6rem;
    font-size: 0.85em;
    color: var(--pico-muted-color);
}
.ticket-group .tickets-list-table {
    margin-top: 0.4rem;
}

.view-toggle {
    margin: 0.4rem 0 0.6rem 0;
    font-size: 0.88rem;
}
.view-toggle-btn {
    display: inline-block;
    padding: 0.25rem 0.8rem;
    border: 1px solid var(--pico-muted-border-color);
    border-radius: 0.3rem;
    color: var(--pico-color);
    text-decoration: none;
    font-size: 0.85rem;
    line-height: 1.3;
}
.view-toggle-btn:hover {
    background: var(--pico-card-background-color);
}

/* Priority-color (L0 paars … L6 wit). Sinds 2.4.1 kleuren we de tekst i.p.v.
   de rij-achtergrond — rustiger op de dark-theme, zelfde scan-signaal.
   `td a` mee zodat de title-link de class-kleur volgt en niet Pico's link-default. */
.tickets-list-table tr.prio-l0 td,
.tickets-list-table tr.prio-l0 td a { color: #c894ff; }   /* paars */
.tickets-list-table tr.prio-l1 td,
.tickets-list-table tr.prio-l1 td a { color: #ff7a7a; }   /* rood */
.tickets-list-table tr.prio-l2 td,
.tickets-list-table tr.prio-l2 td a,
.tickets-list-table tr.prio-l3 td,
.tickets-list-table tr.prio-l3 td a { color: #ffb66b; }   /* oranje */
.tickets-list-table tr.prio-l4 td,
.tickets-list-table tr.prio-l4 td a,
.tickets-list-table tr.prio-l5 td,
.tickets-list-table tr.prio-l5 td a { color: #82e3a3; }   /* groen */
/* L6 = default kleur (wit op dark-theme) = geen extra rule */

.ticket-number {
    font-family: var(--pico-font-family-monospace);
    font-size: 0.9em;
    color: var(--pico-muted-color);
}

.ticket-prose {
    white-space: pre-wrap;
    margin: 0;
}

/* Search-balk: bovenaan het dashboard. Volgt het filter-form patroon
   maar krijgt iets meer ademruimte zodat de stats-strip er niet tegenaan
   gaat plakken. */
.dashboard-search {
    margin-bottom: 1.5rem;
}

/* Search-sectie op /search: zelfde groene omkadering als contract-section
   maar zonder section-titel-centrering. */
.search-section {
    margin: 1.5rem 0;
}

.search-section h2.section-title {
    margin: 0 0 0.5rem 0;
    text-align: left;
    font-size: 1.1rem;
}

.search-section .muted {
    color: var(--pico-muted-color);
    font-weight: normal;
}

/* Locaties-tabel op /companies/{id}: vaste kolombreedtes, primary-rij
   subtiel benadrukt door de naam-link in het brand-groen. */
.locations-table {
    table-layout: fixed;
    width: 100%;
}

.locations-table th,
.locations-table td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.locations-table th:nth-child(2),
.locations-table td:nth-child(2) { width: 7rem; }    /* Primary */
.locations-table th:nth-child(3),
.locations-table td:nth-child(3) { width: 12rem; }   /* Stad */
.locations-table th:nth-child(4),
.locations-table td:nth-child(4) { width: 11rem; }   /* Telefoon */

tr.primary-location td:nth-child(1) a {
    color: #6fcf97;
    font-weight: 600;
}

/* Compact meta-regel onder de company-naam op /companies/{id}. Vervangt
   de oude meta-tabel met losse rijen. */
.compact-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin: 0;
    font-size: 0.85rem;
    color: var(--pico-muted-color);
}

/* Tight row-padding voor tabellen die compact moeten staan (contacts,
   contracts inline). Pico's defaults zijn voor losse paginas — hier wil
   je veel rijen tegelijk overzien. */
.table-compact th,
.table-compact td {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

/* Section-header met titel + filter naast elkaar. */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-bottom: 0.5rem;
}

.section-header h2 {
    margin: 0;
}

/* Inline-filter (één select + knop, in section-header). Compacter dan
   .filter-form omdat hij bij de subsectie hoort, niet bij de page-header. */
.inline-filter {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    --pico-form-element-spacing-vertical: 0.3rem;
}

.inline-filter label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--pico-muted-color);
    margin: 0;
}

.inline-filter select {
    margin: 0;
    width: auto;
    min-width: 7rem;
}

.inline-filter .filter-button {
    width: auto;
    margin: 0;
    padding-inline: 1rem;
}

/* Contact-lijst op /companies/{id}: vaste kolombreedtes, sortable headers,
   klikbare rijen. Volgorde matched _CONTACT_SORT_COLUMNS in web_companies.py:
   Functie | Naam | Email | Phone | Mobile */
.contact-list-table {
    table-layout: fixed;
    width: 100%;
}

.contact-list-table th:nth-child(1),
.contact-list-table td:nth-child(1) {
    width: 11rem;
}

.contact-list-table th:nth-child(3),
.contact-list-table td:nth-child(3) {
    width: 14rem;
}

.contact-list-table th:nth-child(4),
.contact-list-table td:nth-child(4),
.contact-list-table th:nth-child(5),
.contact-list-table td:nth-child(5) {
    width: 9rem;
}

/* Voor kolommen die op de inhoud kunnen overlopen forceren we 1-regel:
   ellipsis i.p.v. wrap. Beter scanbaar, voorkomt dubbele rijhoogtes. */
.contact-list-table td:nth-child(1),
.contact-list-table td:nth-child(2),
.contact-list-table td:nth-child(3),
.contact-list-table td:nth-child(4),
.contact-list-table td:nth-child(5) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Primair contact: naam-link krijgt een heldere groene tint (zelfde
   brand-groen als de stats-strip en tegel-borders) plus een tikje
   zwaarder. Visueel duidelijker dan een aparte indicator-kolom. */
.contact-list-table tr.primary-contact td:nth-child(2) a {
    color: #6fcf97;
    font-weight: 600;
}

.cell-center {
    text-align: center;
}

/* Contract-detail twee-kolom layout. Volgt het mockup-design: links
   Type/Category/SLA/Pincode + Description + PO Number; rechts dates +
   UDFs + Period type. Bij smal scherm valt het terug op één kolom. */
.contract-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    border: 2px solid #5db075;
    border-radius: 0.6rem;
    padding: 1rem 1.25rem;
}

@media (max-width: 800px) {
    .contract-detail-grid { grid-template-columns: 1fr; }
}

.detail-col {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.detail-list {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 1rem;
    row-gap: 0.25rem;
    align-items: baseline;
}

.detail-list dt {
    font-weight: 600;
    color: var(--pico-muted-color);
    margin: 0;
}

.detail-list dd {
    margin: 0;
    word-break: break-word;
}

/* Variant: label boven, waarde eronder. Voor langere blokken zoals
   omschrijving leest dat fijner dan een 2-kolom layout. */
.detail-list-stacked {
    grid-template-columns: 1fr;
    row-gap: 0.15rem;
}

.detail-list-stacked dd {
    white-space: pre-wrap;
}

.detail-divider {
    margin: 0.5rem 0;
    border: none;
    border-top: 1px dashed var(--pico-muted-border-color);
}

.contract-status {
    margin-left: 0.5rem;
    font-size: 0.7em;
    vertical-align: middle;
}

/* Contact-detail profielweergave. Per veld-categorie een omkaderd
   blok met dezelfde groene branding als de contract-secties. */
.contact-page-subtitle {
    margin: 0 0 1.25rem 0;
    color: var(--pico-muted-color);
}

.profile-section {
    border: 2px solid #5db075;
    border-radius: 0.6rem;
    padding: 0.5rem 1.25rem 0.75rem 1.25rem;
    margin-bottom: 1rem;
}

.profile-section .section-title {
    margin: 0.25rem 0 0.5rem 0;
    font-size: 1rem;
}

.postal-address {
    font-style: normal;
    line-height: 1.5;
}

/* Sub-secties op contract-detail (Services, Assets) krijgen dezelfde
   groene omkadering als de twee-kolom box, gecentreerde titel. */
.contract-section {
    border: 2px solid #5db075;
    border-radius: 0.6rem;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1.5rem;
}

.section-title {
    text-align: center;
    margin: 0.25rem 0 0.75rem 0;
    font-size: 1.1rem;
}

/* Services-tabel: 6 kolommen
   Units · Service/Bundle · Omschrijving · Provider · Period · Assets
   Provider en Period krijgen een vaste breedte; Naam en Omschrijving
   delen de rest. */
.services-table {
    table-layout: fixed;
    width: 100%;
}

.services-table th:nth-child(1),
.services-table td:nth-child(1) {
    width: 6rem;
}

.services-table th:nth-child(4),
.services-table td:nth-child(4) {
    width: 12rem;
}

.services-table th:nth-child(5),
.services-table td:nth-child(5) {
    width: 9rem;
}

.services-table th:nth-child(6),
.services-table td:nth-child(6) {
    width: 6rem;
}

.services-table td:nth-child(2),
.services-table td:nth-child(3),
.services-table td:nth-child(4),
.services-table td:nth-child(5) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Assets-tabel: 6 kolommen
   Category · Asset name · Reference name · Reference Number · Location · Ass. contract
   Vaste breedtes voor de korte kolommen; reference-name en ass.contract
   delen de resterende ruimte. */
.assets-table {
    table-layout: fixed;
    width: 100%;
}

.assets-table th:nth-child(1),
.assets-table td:nth-child(1) {
    width: 10rem;
}

.assets-table th:nth-child(2),
.assets-table td:nth-child(2) {
    width: 9rem;
}

.assets-table th:nth-child(4),
.assets-table td:nth-child(4) {
    width: 11rem;
}

.assets-table th:nth-child(5),
.assets-table td:nth-child(5) {
    width: 10rem;
}

.assets-table td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cell-right {
    text-align: right;
}

.muted {
    color: var(--pico-muted-color);
}

/* Contract-lijst op /companies/{id}: zelfde fixed-layout patroon als de
   contact-tabel — voorkomt kolom-verspringen bij bladeren en cap't
   Type/Category om uitschieters op te vangen.
   Volgorde: Naam | Type | Category | Looptijd */
.contract-list-table {
    table-layout: fixed;
    width: 100%;
}

.contract-list-table th:nth-child(2),
.contract-list-table td:nth-child(2),
.contract-list-table th:nth-child(3),
.contract-list-table td:nth-child(3) {
    width: 12rem;
}

.contract-list-table th:nth-child(4),
.contract-list-table td:nth-child(4) {
    width: 15rem;
}

.contract-list-table td:nth-child(1),
.contract-list-table td:nth-child(2),
.contract-list-table td:nth-child(3),
.contract-list-table td:nth-child(4) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Sortable headers — klikbare link binnen de <th>. */
.sort-link {
    display: inline-block;
    color: inherit;
    text-decoration: none;
    font-weight: 600;
}

.sort-link:hover {
    text-decoration: underline;
}

.sort-arrow {
    font-size: 0.75rem;
    color: var(--pico-muted-color);
}

/* Klikbare tabel-rijen. */
.row-link {
    cursor: pointer;
}

.row-link:hover {
    background: rgba(30, 96, 145, 0.06);
}

.row-link:focus-visible {
    outline: 2px solid #1e6091;
    outline-offset: -2px;
}

details > pre {
    max-height: 50vh;
    overflow: auto;
}

/* ---------- Manage-pagina ---------- */
.last-sync {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--pico-muted-border-color);
    border-radius: 0.4rem;
    margin: 0 0 1rem 0;
    font-size: 0.9rem;
}

.last-sync .label {
    color: var(--pico-muted-color);
    font-size: 0.8rem;
}

.last-sync-empty {
    color: var(--pico-muted-color);
    font-style: italic;
}

.run-all-banner {
    margin: 0 0 1rem 0;
    padding: 0.75rem 1rem;
    border-radius: 0.4rem;
    border: 1px solid;
    font-size: 0.9rem;
    line-height: 1.45;
}
.run-all-banner.running {
    background: #fff3cd;
    color: #5a4108;
    border-color: #f0d674;
}
.run-all-banner.started {
    background: #d1ecf1;
    color: #0c4a52;
    border-color: #8ed3df;
}
.run-all-banner.warn {
    background: #f8d7da;
    color: #5a1620;
    border-color: #e9a3a8;
}

.run-all-form button[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

.empty-cache-banner {
    margin: 0 0 1.25rem 0;
    padding: 0.85rem 1.1rem;
    border-radius: 0.4rem;
    background: #fff3cd;
    color: #5a4108;
    border: 1px solid #f0d674;
    font-size: 0.95rem;
}
.empty-cache-banner a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

.last-sync-error {
    flex-basis: 100%;
    color: #5a1620;
    font-family: var(--pico-font-family-monospace, monospace);
    font-size: 0.8rem;
}

.manage-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.5rem 1rem;
    margin: 0.5rem 0 1.5rem 0;
}

.manage-actions .sync-form {
    margin: 0;
}

.manage-actions .sync-form button {
    width: 100%;
}

/* ---------- Monitor-pagina ---------- */
.monitor-grid {
    display: grid;
    /* Drie kolommen op de bovenste rij (throttle / health / versies);
       de Scheduled-jobs-kaart pakt met `monitor-card-wide` de volle rij. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 60rem) {
    /* Mobiel / smal venster: stack verticaal. */
    .monitor-grid {
        grid-template-columns: 1fr;
    }
}

.monitor-card {
    border: 1px solid var(--pico-muted-border-color);
    border-radius: 0.5rem;
    padding: 1rem;
}

.monitor-card-wide {
    /* Sinds 2.7.5: Scheduled jobs-kaart over de hele breedte zodat de
       tabel-kolommen niet afgeknepen worden. */
    grid-column: 1 / -1;
}

.monitor-card h3 {
    margin-top: 0;
    font-size: 1rem;
}

.monitor-bar {
    height: 0.6rem;
    background: var(--pico-muted-border-color);
    border-radius: 0.3rem;
    overflow: hidden;
    margin: 0.5rem 0;
}

.monitor-bar-fill {
    height: 100%;
    background: #2f7a4d;
    transition: width 0.2s ease;
}

.monitor-bar-fill.warn { background: #c08a2e; }
.monitor-bar-fill.crit { background: #b22234; }

.status-pill {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 0.3rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.status-pill.ok { background: #d4edda; color: #0b3d22; }
.status-pill.fail { background: #f8d7da; color: #5a1620; }
.status-pill.running { background: #fff3cd; color: #5a4108; }

/* ---------- Breadcrumb (overal direct onder de app-header) ----------
   Override Pico's nav-defaults (display: flex; justify-content: space-between)
   zodat segmenten links uitgelijnd blijven en netjes naast elkaar staan. */
.breadcrumb {
    display: block;
    font-size: 0.85rem;
    color: var(--pico-muted-color);
    margin: -0.5rem 0 0.75rem 0;
    padding: 0;
    line-height: 1.2;
    text-align: left;
}

.breadcrumb a {
    color: inherit;
}

.breadcrumb .sep {
    margin: 0 0.25rem;
    opacity: 0.55;
}

/* ---------- Editor: Contacts UDF bulk (sinds 2.7.8) ----------
   Custom company-combobox + status-filter naast elkaar; gestylede
   dropdown die zich gedraagt als een natuurlijke voortzetting van het
   input-veld (zelfde lettertype, links uitgelijnd, volle breedte). */

.company-combobox {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 12rem;
    gap: 0.5rem;
    align-items: stretch;
}

.company-combobox > input,
.company-combobox > select {
    /* Zelfde hoogte zodat ze visueel aansluiten. */
    margin-bottom: 0;
}

.company-dropdown {
    /* Absoluut gepositioneerd onder het input, dezelfde breedte.
       grid-column: 1 / 2 → alleen onder het input, niet onder de status-select. */
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 12.5rem;        /* breedte van status-select + gap */
    z-index: 30;
    background: var(--pico-card-background-color, #fff);
    border: 1px solid var(--pico-form-element-border-color, #ccc);
    border-top: 0;
    max-height: 22rem;
    overflow-y: auto;
    display: none;
    font-size: 1rem;        /* zelfde als input */
}

.company-dropdown.open {
    display: block;
}

.company-item {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid var(--pico-muted-border-color, #eee);
}

.company-item:last-child {
    border-bottom: 0;
}

.company-item:hover,
.company-item:focus {
    background: var(--pico-secondary-background, #f0f0f0);
    outline: none;
}

.company-item.inactive {
    color: var(--pico-muted-color, #888);
    font-style: italic;
}

.company-item.hint {
    cursor: default;
    font-style: italic;
    color: var(--pico-muted-color, #888);
    background: var(--pico-secondary-background, #f7f7f7);
}

.company-item.hint:hover {
    background: var(--pico-secondary-background, #f7f7f7);
}

/* Smal scherm: status-filter onder het input i.p.v. ernaast. */
@media (max-width: 640px) {
    .company-combobox {
        grid-template-columns: 1fr;
    }
    .company-dropdown {
        right: 0;
    }
}