:root {
  --service-blue: #164273;
  --service-blue-dark: #0b2d52;
  --service-orange: #e17000;
  --page-background: #f3f6f8;
  --text: #1b1b1b;
  --border: #c9d4df;
}

:root[data-theme="capgemini"] {
  --service-blue: #071f41;
  --service-blue-dark: #06152e;
  --service-orange: #12e2e2;
  --page-background: #f7f8fc;
  --text: #101b2d;
  --border: #d7dce5;
}

:root[data-theme="hydejack"] {
  --service-blue: #2b2e3b;
  --service-blue-dark: #20232d;
  --service-orange: #e6a23c;
  --page-background: #f8f8f6;
  --text: #3c3f4b;
  --border: #dcded9;
}

:root[data-theme="tweakers"] {
  --service-blue: #202833;
  --service-blue-dark: #121820;
  --service-orange: #ff6a00;
  --page-background: #e9edf0;
  --text: #26333e;
  --border: #c9d1d7;
}

:root[data-theme="developer-overheid"] {
  --service-blue: #0a2c4e;
  --service-blue-dark: #061d34;
  --service-orange: #ca005d;
  --page-background: #f4f7fa;
  --text: #172433;
  --border: #bfcbd6;
}

:root[data-theme="uptimerobot"] {
  --service-blue: #263238;
  --service-blue-dark: #1b252b;
  --service-orange: #00ad7c;
  --page-background: #f5f8f7;
  --text: #2b373b;
  --border: #d8e2df;
}

body {
  background: var(--page-background);
  color: var(--text);
  font-family: "Noto Sans", "Segoe UI", Arial, sans-serif;
}

.service-header {
  background: #fff;
  border-top: 8px solid var(--service-orange);
  box-shadow: 0 1px 2px rgb(0 0 0 / 12%);
}

.service-brand {
  color: var(--service-blue);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.service-brand span { color: var(--service-orange); }

.service-nav a {
  color: var(--service-blue);
  font-weight: 600;
  text-decoration: none;
}

.service-nav a:hover, .service-nav a:focus { text-decoration: underline; }

.theme-picker {
  align-items: center;
  color: var(--service-blue-dark);
  display: flex;
  font-size: .875rem;
  font-weight: 600;
  gap: .5rem;
}

.theme-picker select {
  background: #fff;
  border: 1px solid var(--service-blue);
  border-radius: 0;
  color: var(--service-blue-dark);
  padding: .35rem 2rem .35rem .5rem;
}

.color-mode-picker {
  align-items: center;
  color: var(--service-blue-dark);
  display: flex;
  font-size: .75rem;
  font-weight: 600;
  gap: 0;
}

.color-mode-picker > span { margin-right: .5rem; }

.color-mode-picker button {
  background: #fff;
  border: 1px solid var(--service-blue);
  color: var(--service-blue-dark);
  cursor: pointer;
  padding: .35rem .5rem;
}

.color-mode-picker button + button { border-left: 0; }
.color-mode-picker button:first-of-type { border-radius: .25rem 0 0 .25rem; }
.color-mode-picker button:last-of-type { border-radius: 0 .25rem .25rem 0; }

.color-mode-picker button[aria-pressed="true"] {
  background: var(--service-blue);
  color: #fff;
}

.page-title { color: var(--service-blue-dark); font-weight: 700; }

.card {
  border: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none !important;
}

.card-header {
  background: var(--service-blue);
  border-radius: 0 !important;
  color: #fff;
  padding: 1rem 1.25rem;
}

.table { margin-bottom: 0; }
.table thead th { background: #e8f0f6; border-bottom: 2px solid var(--border); color: var(--service-blue-dark); }
.table > :not(caption) > * > * { padding: 1rem; }
.table-hover tbody tr:hover { background: #eaf3f9; }

.asset-row { cursor: pointer; }
.asset-link { color: var(--service-blue-dark); font-weight: 700; }
.asset-link:hover { color: var(--service-blue); }

.status { border-radius: 0; font-weight: 700; padding: .4em .65em; }
.status-ok { background: #39870c; color: #fff; }
.status-warning { background: #f9d11c; color: #1b1b1b; }
.status-critical { background: #c8171d; color: #fff; }
.status-unknown { background: #6c757d; color: #fff; }

.traffic-light {
  border: 2px solid rgb(0 0 0 / 15%);
  border-radius: 50%;
  display: inline-block;
  height: 1.35rem;
  vertical-align: middle;
  width: 1.35rem;
}

.traffic-light.status-ok { background: #39870c; }
.traffic-light.status-warning { background: #f9d11c; }
.traffic-light.status-critical { background: #c8171d; }
.traffic-light.status-unknown { background: #6c757d; }

a { color: #01689b; }
a:hover { color: #014b70; }

:focus-visible { outline: 3px solid var(--service-orange); outline-offset: 2px; }

pre { background: #f3f6f8; border: 1px solid var(--border); padding: .75rem; white-space: pre-wrap; }

:root[data-color-scheme="dark"] {
  color-scheme: dark;
  --page-background: #101719;
  --text: #e7eeee;
  --border: #38464a;
}

:root[data-color-scheme="dark"] .service-header {
  background: #172126;
  box-shadow: 0 1px 4px rgb(0 0 0 / 30%);
}

:root[data-color-scheme="dark"] .service-brand,
:root[data-color-scheme="dark"] .service-nav a,
:root[data-color-scheme="dark"] .theme-picker,
:root[data-color-scheme="dark"] .color-mode-picker { color: #f2f7f7; }

:root[data-color-scheme="dark"] .theme-picker select,
:root[data-color-scheme="dark"] .color-mode-picker button {
  background: #202c30;
  border-color: #59696d;
  color: #f2f7f7;
}

:root[data-color-scheme="dark"] .color-mode-picker button[aria-pressed="true"] {
  background: var(--service-orange);
  border-color: var(--service-orange);
  color: #081312;
}

:root[data-color-scheme="dark"] .card,
:root[data-color-scheme="dark"] .card-header,
:root[data-color-scheme="dark"] .modal-content {
  background: #172126;
  color: var(--text);
}

:root[data-color-scheme="dark"] .card-header,
:root[data-color-scheme="dark"] .modal-header,
:root[data-color-scheme="dark"] .modal-footer { border-color: var(--border); }

:root[data-color-scheme="dark"] .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --bs-table-hover-bg: #213035;
  --bs-table-hover-color: #fff;
}

:root[data-color-scheme="dark"] .table thead th { background: #26353a; color: #fff; }
:root[data-color-scheme="dark"] .text-muted { color: #b7c4c5 !important; }
:root[data-color-scheme="dark"] a { color: #75d9bf; }
:root[data-color-scheme="dark"] pre { background: #101719; color: var(--text); }

@media (max-width: 576px) {
  .service-nav { display: none; }
  .theme-picker span { display: none; }
  .color-mode-picker > span { display: none; }
  .color-mode-picker button { padding: .35rem .4rem; }
  .table > :not(caption) > * > * { padding: .75rem; }
}

@media (max-width: 767.98px) {
  .service-header-inner {
    align-items: stretch !important;
    flex-direction: column;
    gap: .85rem;
  }

  .header-controls {
    align-items: center !important;
    flex-wrap: wrap;
    gap: .65rem !important;
    justify-content: space-between;
  }

  .service-nav { display: block; }
  .theme-picker { flex: 1 1 11rem; justify-content: space-between; }
  .theme-picker span, .color-mode-picker > span { display: inline; }
  .theme-picker select { max-width: 13rem; width: 100%; }
  .color-mode-picker { flex: 1 1 100%; justify-content: flex-end; }

  main.container { padding-bottom: 2rem !important; padding-top: 2rem !important; }
  .page-heading { align-items: flex-start !important; gap: .5rem; }
  .page-heading h1 { font-size: 1.5rem; }

  .table-responsive { overflow: visible; }
  .responsive-table, .responsive-table tbody, .responsive-table tr, .responsive-table td { display: block; }
  .responsive-table thead { display: none; }
  .responsive-table tbody { padding: .5rem; }

  .responsive-table tbody tr {
    border: 1px solid var(--border);
    border-radius: .4rem;
    margin: .5rem 0;
    overflow: hidden;
  }

  .responsive-table > :not(caption) > * > * {
    border-bottom: 1px solid var(--border);
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(7rem, 42%) 1fr;
    padding: .65rem .75rem;
  }

  .responsive-table td::before {
    color: var(--service-blue-dark);
    content: attr(data-label);
    font-size: .78rem;
    font-weight: 700;
  }

  .responsive-table tbody tr > td:last-child { border-bottom: 0; }
  .responsive-table td[colspan] { display: block; text-align: center; }
  .responsive-table td[colspan]::before { content: none; }
  .responsive-table .traffic-light { margin-top: .05rem; }

  .modal-dialog { margin: .5rem; }
  .modal-title { font-size: 1rem !important; }
}

:root[data-color-scheme="dark"] .responsive-table td::before { color: #b7c4c5; }

/* Technology-consulting-inspired alternative theme. */
:root[data-theme="capgemini"] .service-header {
  background: var(--service-blue);
  border-top: 0;
  box-shadow: none;
}

:root[data-theme="capgemini"] .service-brand,
:root[data-theme="capgemini"] .service-nav a {
  color: #fff;
}

:root[data-theme="capgemini"] .service-brand span { color: var(--service-orange); }

:root[data-theme="capgemini"] .theme-picker { color: #fff; }

:root[data-theme="capgemini"] .theme-picker select {
  background: transparent;
  border-color: #9eacc1;
  border-radius: .25rem;
  color: #fff;
}

:root[data-theme="capgemini"] .theme-picker option { color: var(--text); }

:root[data-theme="capgemini"] .page-title { letter-spacing: -.03em; }

:root[data-theme="capgemini"] .card {
  border: 0;
  border-radius: .25rem;
  box-shadow: 0 8px 24px rgb(7 31 65 / 10%) !important;
}

:root[data-theme="capgemini"] .card-header {
  background: #fff;
  border-bottom: 3px solid var(--service-orange);
  color: var(--service-blue-dark);
}

:root[data-theme="capgemini"] .table thead th { background: #f0f3f8; }

:root[data-theme="capgemini"] .asset-link { color: #0070ad; }

:root[data-theme="capgemini"] :focus-visible { outline-color: var(--service-orange); }

/* Editorial sidebar variant inspired by Hydejack's documentation/blog layout. */
:root[data-theme="hydejack"] body { font-family: Georgia, "Times New Roman", serif; }

:root[data-theme="hydejack"] .service-header {
  background: var(--service-blue-dark);
  border: 0;
  box-shadow: none;
}

:root[data-theme="hydejack"] .service-brand,
:root[data-theme="hydejack"] .service-nav a,
:root[data-theme="hydejack"] .theme-picker { color: #fff; }

:root[data-theme="hydejack"] .service-brand { font-family: "Segoe UI", Arial, sans-serif; }
:root[data-theme="hydejack"] .service-brand span { color: var(--service-orange); }

:root[data-theme="hydejack"] .theme-picker select {
  background: transparent;
  border-color: #7b8091;
  border-radius: .15rem;
  color: #fff;
  font-family: "Segoe UI", Arial, sans-serif;
}

:root[data-theme="hydejack"] .theme-picker option { color: var(--text); }
:root[data-theme="hydejack"] .page-title { font-weight: 400; letter-spacing: -.025em; }

:root[data-theme="hydejack"] .card {
  background: #fff;
  border-color: var(--border);
  border-radius: .2rem;
}

:root[data-theme="hydejack"] .card-header {
  background: #fff;
  border-bottom: 1px solid var(--border);
  color: var(--service-blue-dark);
}

:root[data-theme="hydejack"] .table thead th {
  background: #f5f5f2;
  font-family: "Segoe UI", Arial, sans-serif;
}

:root[data-theme="hydejack"] .asset-link { color: #406ca1; }

/* Crisp technology-news variant inspired by Tweakers' public presentation. */
:root[data-theme="tweakers"] body { font-family: "Segoe UI", Arial, sans-serif; }

:root[data-theme="tweakers"] .service-header {
  background: var(--service-blue);
  border-top: 5px solid var(--service-orange);
  box-shadow: none;
}

:root[data-theme="tweakers"] .service-brand,
:root[data-theme="tweakers"] .service-nav a,
:root[data-theme="tweakers"] .theme-picker { color: #fff; }

:root[data-theme="tweakers"] .service-brand span { color: var(--service-orange); }

:root[data-theme="tweakers"] .theme-picker select {
  background: var(--service-blue-dark);
  border-color: #66717c;
  border-radius: .2rem;
  color: #fff;
}

:root[data-theme="tweakers"] .theme-picker option { color: var(--text); }

:root[data-theme="tweakers"] .page-title {
  border-left: 5px solid var(--service-orange);
  padding-left: .75rem;
}

:root[data-theme="tweakers"] .card {
  border: 1px solid var(--border);
  border-radius: .2rem;
  box-shadow: 0 2px 5px rgb(18 24 32 / 12%) !important;
}

:root[data-theme="tweakers"] .card-header {
  background: #f7f8f9;
  border-bottom: 1px solid var(--border);
  color: var(--service-blue-dark);
}

:root[data-theme="tweakers"] .table thead th {
  background: var(--service-blue);
  color: #fff;
}

:root[data-theme="tweakers"] .asset-link { color: #1769aa; }
:root[data-theme="tweakers"] .table-hover tbody tr:hover { background: #fff1e6; }

/* Developer-portal variant inspired by developer.overheid.nl's public direction. */
:root[data-theme="developer-overheid"] body {
  font-family: "Segoe UI", Arial, sans-serif;
}

:root[data-theme="developer-overheid"] .service-header {
  background: var(--service-blue-dark);
  border-bottom: 5px solid var(--service-orange);
  border-top: 0;
  box-shadow: none;
}

:root[data-theme="developer-overheid"] .service-brand,
:root[data-theme="developer-overheid"] .service-nav a,
:root[data-theme="developer-overheid"] .theme-picker {
  color: #fff;
}

:root[data-theme="developer-overheid"] .service-brand span { color: #8ad4ff; }

:root[data-theme="developer-overheid"] .theme-picker select {
  background: #fff;
  border-color: #fff;
  border-radius: 0;
  color: var(--service-blue-dark);
}

:root[data-theme="developer-overheid"] .page-title {
  border-bottom: 3px solid var(--service-orange);
  display: inline-block;
  padding-bottom: .4rem;
}

:root[data-theme="developer-overheid"] .card {
  border: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none !important;
}

:root[data-theme="developer-overheid"] .card-header {
  background: #e6eef5;
  border-bottom: 1px solid var(--border);
  color: var(--service-blue-dark);
}

:root[data-theme="developer-overheid"] .table thead th {
  background: var(--service-blue-dark);
  color: #fff;
}

:root[data-theme="developer-overheid"] .asset-link { color: #075a98; }
:root[data-theme="developer-overheid"] .table-hover tbody tr:hover { background: #e8f4fa; }

/* Status-dashboard variant inspired by UptimeRobot's monitoring presentation. */
:root[data-theme="uptimerobot"] body {
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

:root[data-theme="uptimerobot"] .service-header {
  background: #fff;
  border-top: 4px solid var(--service-orange);
  box-shadow: 0 1px 4px rgb(27 37 43 / 8%);
}

:root[data-theme="uptimerobot"] .service-brand,
:root[data-theme="uptimerobot"] .service-nav a,
:root[data-theme="uptimerobot"] .theme-picker {
  color: var(--service-blue);
}

:root[data-theme="uptimerobot"] .service-brand span { color: var(--service-orange); }

:root[data-theme="uptimerobot"] .theme-picker select {
  border-color: var(--border);
  border-radius: .4rem;
  color: var(--service-blue-dark);
}

:root[data-theme="uptimerobot"] .page-title { letter-spacing: -.025em; }

:root[data-theme="uptimerobot"] .card {
  border: 1px solid var(--border);
  border-radius: .6rem;
  box-shadow: 0 2px 8px rgb(27 37 43 / 5%) !important;
}

:root[data-theme="uptimerobot"] .card-header {
  background: #fff;
  border-bottom: 1px solid var(--border);
  color: var(--service-blue-dark);
}

:root[data-theme="uptimerobot"] .table thead th {
  background: #edf5f2;
  color: #56645f;
  font-size: .75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

:root[data-theme="uptimerobot"] .table-hover tbody tr:hover { background: #f0faf6; }
:root[data-theme="uptimerobot"] .asset-link { color: #197a60; }
:root[data-theme="uptimerobot"] .traffic-light.status-ok { background: #00ad7c; }
:root[data-theme="uptimerobot"] :focus-visible { outline-color: var(--service-orange); }

@media (min-width: 992px) {
  :root[data-theme="hydejack"] .service-header {
    bottom: 0;
    left: 0;
    position: fixed;
    top: 0;
    width: 18rem;
    z-index: 10;
  }

  :root[data-theme="hydejack"] .service-header .container {
    align-items: flex-start !important;
    flex-direction: column;
    height: 100%;
    justify-content: flex-start !important;
    padding: 3rem 2rem !important;
  }

  :root[data-theme="hydejack"] .service-header .container > div {
    align-items: flex-start !important;
    flex-direction: column;
    gap: 1.5rem !important;
    margin-top: 3rem;
  }

  :root[data-theme="hydejack"] .service-nav { display: block; }
  :root[data-theme="hydejack"] main.container { margin-left: 18rem; max-width: 62rem; padding: 4rem; }
}

/* Keep colour-mode contrast intact when a branded theme adds its own colours. */
:root[data-color-scheme="dark"][data-theme] .service-header {
  background: #172126;
  box-shadow: 0 1px 4px rgb(0 0 0 / 30%);
}

:root[data-color-scheme="dark"][data-theme] .service-brand,
:root[data-color-scheme="dark"][data-theme] .service-nav a,
:root[data-color-scheme="dark"][data-theme] .theme-picker,
:root[data-color-scheme="dark"][data-theme] .color-mode-picker { color: #f2f7f7; }

:root[data-color-scheme="dark"][data-theme] .theme-picker select,
:root[data-color-scheme="dark"][data-theme] .color-mode-picker button {
  background: #202c30;
  border-color: #59696d;
  color: #f2f7f7;
}

:root[data-color-scheme="dark"][data-theme] .color-mode-picker button[aria-pressed="true"] {
  background: var(--service-orange);
  border-color: var(--service-orange);
  color: #081312;
}

:root[data-color-scheme="dark"][data-theme] .page-title,
:root[data-color-scheme="dark"][data-theme] .card,
:root[data-color-scheme="dark"][data-theme] .card-header,
:root[data-color-scheme="dark"][data-theme] .modal-content { color: var(--text); }

:root[data-color-scheme="dark"][data-theme] .card,
:root[data-color-scheme="dark"][data-theme] .card-header,
:root[data-color-scheme="dark"][data-theme] .modal-content { background: #172126; }

:root[data-color-scheme="dark"][data-theme] .table thead th { background: #26353a; color: #fff; }
:root[data-color-scheme="dark"][data-theme] .asset-link { color: #75d9bf; }