/* Stallingstool — centrale componenten, tabellen en statussemantiek R2B */
:root {
  --st-navy: #071c58;
  --st-blue: #0753a6;
  --st-blue-soft: #eaf4ff;
  --st-cyan: #32c7d3;
  --st-orange: #f39200;
  --st-bg: #edf3f7;
  --st-card: #ffffff;
  --st-text: #102033;
  --st-muted: #63748a;
  --st-border: #d6e2ec;
  --st-success: #087a43;
  --st-success-bg: #e4f6ec;
  --st-info: #0753a6;
  --st-info-bg: #e7f2ff;
  --st-attention: #925400;
  --st-attention-bg: #fff0d5;
  --st-danger: #a61b1b;
  --st-danger-bg: #fde8e8;
  --st-neutral: #526274;
  --st-neutral-bg: #edf1f5;
  --st-radius: 16px;
  --st-shadow: 0 5px 18px rgba(20, 45, 80, 0.08);
}

.st-ui-r2b {
  margin: 0;
  background: var(--st-bg) !important;
  color: var(--st-text) !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.st-ui-r2b *,
.st-ui-r2b *::before,
.st-ui-r2b *::after { box-sizing: border-box; }

.st-ui-r2b main,
.st-ui-r2b .o8b-main,
.st-ui-r2b .o7d-main,
.st-ui-r2b main.wrap {
  width: min(1600px, calc(100% - 32px));
  max-width: 1600px;
  margin: 0 auto;
  padding: 22px 0 44px;
}

.st-ui-r2b h1,
.st-ui-r2b h2,
.st-ui-r2b h3 {
  color: var(--st-navy);
  letter-spacing: -0.018em;
}

.st-ui-r2b h1 { font-size: clamp(1.65rem, 2vw, 2.15rem); }
.st-ui-r2b h2 { font-size: clamp(1.15rem, 1.5vw, 1.4rem); }
.st-ui-r2b p { line-height: 1.45; }
.st-ui-r2b .muted,
.st-ui-r2b .o8b-muted,
.st-ui-r2b .o7d-muted { color: var(--st-muted) !important; }

.st-card,
.st-ui-r2b .o8b-panel,
.st-ui-r2b .o7d-panel,
.st-ui-r2b .card,
.st-ui-r2b .o8b-hero,
.st-ui-r2b .o7d-hero {
  background: var(--st-card) !important;
  border: 1px solid var(--st-border) !important;
  border-radius: var(--st-radius) !important;
  box-shadow: var(--st-shadow) !important;
}

.st-ui-r2b .o8b-hero,
.st-ui-r2b .o7d-hero {
  padding: 18px 20px !important;
  margin-bottom: 16px !important;
}

.st-ui-r2b .o8b-facts,
.st-ui-r2b .o7d-facts { gap: 10px !important; }

.st-ui-r2b .o8b-fact,
.st-ui-r2b .o7d-fact {
  min-width: 0;
  background: #f8fbfe !important;
  border-color: var(--st-border) !important;
  border-radius: 12px !important;
  padding: 11px 12px !important;
}

.st-card-header,
.st-ui-r2b .o8b-panel-head,
.st-ui-r2b .o7d-panel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 17px !important;
  border-bottom: 1px solid var(--st-border) !important;
}

.st-card-header h2,
.st-ui-r2b .o8b-panel-head h2,
.st-ui-r2b .o7d-panel-head h2 { margin: 0; }

.st-card-header p,
.st-ui-r2b .o8b-panel-head p,
.st-ui-r2b .o7d-panel-head p { margin: 4px 0 0; }

.st-table-tools {
  display: flex;
  flex: 1 1 460px;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  flex-wrap: wrap;
}

.st-search { display: block; width: min(510px, 100%); }
.st-search input,
.st-ui-r2b input[type="search"] {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px 10px 38px !important;
  border: 1px solid #b9c9d8 !important;
  border-radius: 11px !important;
  background: #fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23526274' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E")
    no-repeat 12px center !important;
  color: var(--st-text) !important;
  font: inherit !important;
}

.st-ui-r2b input,
.st-ui-r2b select,
.st-ui-r2b textarea {
  min-height: 42px;
  border: 1px solid #b9c9d8 !important;
  border-radius: 11px !important;
  background-color: #fff !important;
  color: var(--st-text) !important;
  font: inherit !important;
}

.st-ui-r2b input:focus,
.st-ui-r2b select:focus,
.st-ui-r2b textarea:focus,
.st-ui-r2b button:focus-visible,
.st-ui-r2b a:focus-visible {
  outline: 3px solid rgba(50, 199, 211, 0.42) !important;
  outline-offset: 2px;
}

.st-form { padding: 17px; }
.st-form p { margin: 14px 0 0; }
.st-ui-r2b label { color: #203657; }

.st-btn,
.st-ui-r2b .btn,
.st-ui-r2b button:not(.st-sort-button):not(.st-filter-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid transparent !important;
  border-radius: 11px !important;
  text-decoration: none !important;
  font-weight: 800 !important;
  cursor: pointer;
}

.st-btn-primary,
.st-ui-r2b .btn:not(.secondary):not(.orange) {
  color: #fff !important;
  background: var(--st-blue) !important;
}

.st-btn-secondary,
.st-ui-r2b .btn.secondary {
  color: var(--st-navy) !important;
  background: #edf3f9 !important;
  border-color: var(--st-border) !important;
}

.st-ui-r2b .btn.orange { background: var(--st-orange) !important; color: #211300 !important; }

/* De compacte busbevestiging blijft bewust een tabelactie, geen grote paginaknop. */
.st-ui-r2b .o47d2-input {
  width: 82px !important;
  max-width: 82px !important;
  min-height: 32px !important;
  padding: 5px 7px !important;
  border-radius: 8px !important;
}
.st-ui-r2b .o47d2-btn {
  min-height: 32px !important;
  padding: 5px 8px !important;
  border-radius: 8px !important;
  font-size: 0.76rem !important;
}
.st-ui-r2b .o47d2-wis {
  min-height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--st-muted) !important;
  font-size: 0.72rem !important;
}

.st-table-wrap,
.st-ui-r2b .o8b-tablewrap,
.st-ui-r2b .o7d-tablewrap,
.st-ui-r2b .o41b-table-wrap {
  width: 100%;
  max-height: none !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  border: 0 !important;
  border-radius: 0 0 var(--st-radius) var(--st-radius);
  box-shadow: none !important;
  background: #fff;
  scrollbar-width: thin;
}

.st-table,
.st-ui-r2b .o8b-table,
.st-ui-r2b .o7d-table,
.st-ui-r2b table.responsive {
  width: 100%;
  margin: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0;
  background: #fff !important;
  box-shadow: none !important;
  font-size: 0.92rem;
}

.st-table th,
.st-table td,
.st-ui-r2b .o8b-table th,
.st-ui-r2b .o8b-table td,
.st-ui-r2b .o7d-table th,
.st-ui-r2b .o7d-table td,
.st-ui-r2b table.responsive th,
.st-ui-r2b table.responsive td {
  padding: 10px 12px !important;
  text-align: left;
  vertical-align: middle !important;
  border: 0 !important;
  border-bottom: 1px solid #e4ebf1 !important;
  white-space: nowrap;
}

.st-table thead th,
.st-ui-r2b .o8b-table thead th,
.st-ui-r2b .o7d-table thead th,
.st-ui-r2b table.responsive thead th {
  /* H4A3 — operationele tabelkoppen volgen documentstroom */
  position: static !important;
  top: auto !important;
  z-index: auto;
  color: #17335a !important;
  background: #f3f7fa !important;
  box-shadow: 0 1px 0 var(--st-border);
  font-size: 0.76rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.st-table tbody tr:hover td,
.st-ui-r2b .o8b-table tbody tr:hover td,
.st-ui-r2b .o7d-table tbody tr:hover td { background: #f8fbfd; }

.st-table a,
.st-ui-r2b table a { color: var(--st-blue) !important; font-weight: 800; }
.st-table td[title] { cursor: help; }

.st-sort-button {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  margin: -6px -8px;
  padding: 6px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}
.st-sort-button::after { content: "↕"; color: #748398; font-size: 0.85em; }
.st-sort-button[aria-sort="ascending"]::after { content: "↑"; color: var(--st-blue); }
.st-sort-button[aria-sort="descending"]::after { content: "↓"; color: var(--st-blue); }
.st-sort-button:hover { background: #e6eef5; }

.st-status,
.st-ui-r2b .o8b-badge,
.st-ui-r2b .o7d-badge,
.st-ui-r2b .pill {
  display: inline-flex !important;
  align-items: center;
  min-height: 27px;
  padding: 4px 9px !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  font-size: 0.81rem !important;
  font-weight: 850 !important;
  line-height: 1.1;
  white-space: nowrap;
}
.st-status-success { color: var(--st-success) !important; background: var(--st-success-bg) !important; border-color: #b7dfc8 !important; }
.st-status-info { color: var(--st-info) !important; background: var(--st-info-bg) !important; border-color: #bfd8f4 !important; }
.st-status-attention { color: var(--st-attention) !important; background: var(--st-attention-bg) !important; border-color: #f2d49e !important; }
.st-status-danger { color: var(--st-danger) !important; background: var(--st-danger-bg) !important; border-color: #efbaba !important; }
.st-status-neutral { color: var(--st-neutral) !important; background: var(--st-neutral-bg) !important; border-color: #d2dbe3 !important; }

tr[data-r2b-bus-status="conflict"] td { background: #fff7f7; }
tr[data-r2b-bus-status="multiple"] td { background: #fffbf3; }

.st-filter-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.st-filter-button {
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--st-border);
  border-radius: 999px;
  background: #fff;
  color: #28405f;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 780;
  cursor: pointer;
}
.st-filter-button:hover,
.st-filter-button.is-active,
.st-filter-button[aria-pressed="true"] {
  color: #fff;
  background: var(--st-blue);
  border-color: var(--st-blue);
}

.st-empty,
.st-ui-r2b .o8b-empty,
.st-ui-r2b .o7d-empty {
  padding: 20px !important;
  color: var(--st-muted) !important;
  text-align: center !important;
  white-space: normal !important;
}

.st-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.st-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 17px;
}
.st-detail-grid > div,
.st-note {
  padding: 13px;
  border: 1px solid var(--st-border);
  border-radius: 12px;
  background: #f8fbfe;
}
.st-detail-grid dt { color: var(--st-muted); font-size: 0.8rem; font-weight: 800; text-transform: uppercase; }
.st-detail-grid dd { margin: 6px 0 0; font-weight: 800; }
.st-note { margin: 0 17px 17px; }
.st-note p { margin: 5px 0 0; }

/* POD-pendel: onderdeel van dezelfde applicatieschil, zonder tweede merkheader. */
.st-page-pod-pendel .hero {
  width: min(1600px, calc(100% - 32px));
  margin: 22px auto 0;
  padding: 18px 20px !important;
  color: var(--st-text) !important;
  background: var(--st-card) !important;
  border: 1px solid var(--st-border) !important;
  border-radius: var(--st-radius) !important;
  box-shadow: var(--st-shadow) !important;
}
.st-page-pod-pendel .hero h1 { color: var(--st-navy) !important; }
.st-page-pod-pendel .hero p { color: var(--st-muted) !important; }
.st-page-pod-pendel main.wrap { padding-top: 16px; }
.st-page-pod-pendel .actions { margin-bottom: 16px; }
.st-page-pod-pendel .meta { color: var(--st-muted); }

@media (max-width: 1050px) {
  .st-card-header,
  .st-ui-r2b .o8b-panel-head,
  .st-ui-r2b .o7d-panel-head { align-items: stretch; flex-direction: column; }
  .st-table-tools { width: 100%; justify-content: flex-start; }
  .st-search { width: 100%; }
  .st-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .st-ui-r2b main,
  .st-ui-r2b .o8b-main,
  .st-ui-r2b .o7d-main,
  .st-ui-r2b main.wrap { width: calc(100% - 20px); padding-top: 12px; }
  .st-ui-r2b .o8b-grid,
  .st-ui-r2b .o8b-facts,
  .st-ui-r2b .o7d-facts { grid-template-columns: 1fr !important; }
  .st-table thead th,
  .st-ui-r2b .o8b-table thead th,
  .st-ui-r2b .o7d-table thead th { top: 0 !important; position: static !important; }
  .st-detail-grid { grid-template-columns: 1fr; }
  .st-page-pod-pendel .hero { width: calc(100% - 20px); margin-top: 12px; }
}

@media print {
  .st-table-tools,
  .st-filter-group,
  .st-ui-r2b .actions,
  .st-page-pod-pendel .hint { display: none !important; }
  .st-ui-r2b { background: #fff !important; }
  .st-ui-r2b main,
  .st-page-pod-pendel .hero { width: 100% !important; margin: 0 !important; padding: 8px !important; box-shadow: none !important; }
  .st-table-wrap { overflow: visible !important; }
}


/* H4A — visuele rust en operationele focus */
.st-limit-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.st-page-vertrekken .o47d2-cell {
  min-width: 136px;
}

.st-page-omloopradar .st-table {
  font-size: 0.86rem;
}

.st-page-omloopradar .st-table th,
.st-page-omloopradar .st-table td {
  padding-left: 10px;
  padding-right: 10px;
}

.st-page-omloopradar .st-table td:nth-child(6) {
  min-width: 170px;
}

.st-page-omloopradar .st-table td:nth-child(8) {
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.st-page-voertuigen .st-empty a {
  font-weight: 850;
}

@media (max-width: 1280px) {
  .st-page-omloopradar .st-table th:nth-child(4),
  .st-page-omloopradar .st-table td:nth-child(4),
  .st-page-omloopradar .st-table th:nth-child(5),
  .st-page-omloopradar .st-table td:nth-child(5),
  .st-page-omloopradar .st-table th:nth-child(8),
  .st-page-omloopradar .st-table td:nth-child(8) {
    display: none;
  }
}


/* H4A2 — dashboardpreview zonder zwevende tabelkop */
body.st-page-dashboard-r3 .r3-dashboard-grid .st-table thead th,
body.st-page-dashboard-r3 .r3-dashboard-grid .o8b-table thead th {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}

body.st-page-dashboard-r3 .r3-dashboard-grid .o8b-panel-head {
  align-items: flex-start !important;
  flex-wrap: wrap !important;
}

body.st-page-dashboard-r3 .r3-dashboard-grid .o8b-panel-head > div:first-child {
  flex: 1 1 260px;
  min-width: 0;
}

body.st-page-dashboard-r3 .r3-dashboard-grid .o8b-panel-head > .st-button {
  flex: 0 0 auto;
  margin-left: auto;
}

body.st-page-dashboard-r3 .r3-dashboard-grid .o8b-panel-head > .st-filter-group {
  order: 3;
  flex: 1 0 100%;
  width: 100%;
  justify-content: flex-start;
  padding-top: 2px;
}

@media (max-width: 620px) {
  body.st-page-dashboard-r3 .r3-dashboard-grid .o8b-panel-head > .st-button {
    margin-left: 0;
  }
}


/* H4A3 — synthetische dienstcode menselijk presenteren */
.st-source-service {
  color: #8a4b00;
  font-weight: 850;
  white-space: normal;
}