/* Proud Nerds theme for Tabler: overrides Tabler's CSS variables, so
   tabler.min.css stays untouched and can be upgraded as is. Load it after
   tabler.min.css and the fonts (Red Hat Display 600/700, Nunito Sans
   400/600/700). Rules for what Tabler has no component for go below the
   marker at the bottom. */

:root {
  /* brand colours */
  --tblr-primary: #221e17;
  --tblr-primary-fg: #ffffff;
  --tblr-link-color: #8a6414;
  --tblr-link-hover-color: #6b4d0f;

  /* status colours, same hues as the existing interface */
  --tblr-success: #5aa152;
  --tblr-warning: #b8830f;
  --tblr-danger: #c9432a;
  --tblr-form-invalid-color: #b23a24;
  --tblr-info: #3a6076;

  /* type */
  --tblr-font-sans-serif: "Nunito Sans", system-ui, sans-serif;
  --tblr-body-font-size: 0.875rem;
  --tblr-font-size-h2: 1.125rem;

  /* shape */
  --tblr-border-radius: 0.5rem;

  /* brand tokens */
  --pn-goud: #d0b77c;
  --pn-goud-zacht: #fbf3e2;
  --pn-zijbalk-rand: 3px;
  --pn-zwevend-zindex: 1040;
  --pn-schaduw-zwevend: 0 6px 20px rgba(0, 0, 0, 0.15);
  --pn-info-maat: 1.5rem;
  --pn-info-maat-touch: 2.25rem;
  --pn-bron-maat-touch: 2rem;
  --pn-datagrid-kolom: 9rem;
  --pn-sticky-boven: 3rem;
  --pn-sticky-onder: 7rem;
}

/* An empty status line takes no room until it has something to say. */
p:empty {
  display: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
.page-title,
.card-title,
.navbar-brand {
  font-family: "Red Hat Display", system-ui, sans-serif;
}

/* Sidebar: brand brown with gold highlights. */
.navbar-vertical[data-bs-theme="dark"] {
  --tblr-navbar-bg: #221e17;
  --tblr-navbar-border-color: rgba(208, 183, 124, 0.15);
  --tblr-navbar-active-bg: rgba(208, 183, 124, 0.18);
}

.navbar-vertical[data-bs-theme="dark"] .nav-item.active > .nav-link {
  box-shadow: inset 3px 0 0 var(--pn-goud);
  color: #ffffff;
}

.navbar-vertical[data-bs-theme="dark"] .nav-link:hover {
  background: rgba(208, 183, 124, 0.1);
}

.navbar-vertical[data-bs-theme="dark"] .nav-item.active .nav-link-icon {
  color: #d0b77c;
}

.navbar-vertical[data-bs-theme="dark"] {
  border-inline-end: var(--pn-zijbalk-rand) solid var(--pn-goud);
}

/* Visible keyboard focus in the brand gold. */
:focus-visible {
  outline: 3px solid rgba(208, 183, 124, 0.7);
  outline-offset: 1px;
}

/* Brand accents on Tabler components. */
.pn-bg-goud {
  background-color: var(--pn-goud);
}

.card-active {
  --tblr-card-border-color: var(--pn-goud);
  --tblr-card-bg: var(--pn-goud-zacht);
}

/* A table without rows yet shows no empty card. */
.card:has(> .table-responsive > table:empty),
.card:has(> .table-responsive > table > tbody:only-child:empty) {
  display: none;
}

/* A status filter can hide the first accordion item: the first visible item
   then carries the top border that Tabler only gives to the first child. */
.accordion-item:not([hidden]):not(.accordion-item:not([hidden]) ~ *) {
  border-top: var(--tblr-accordion-border-width) solid var(--tblr-accordion-border-color);
}

/* Status colours are too light for text on their soft backgrounds: an alert
   shows its status through border and background, the text stays readable. */
.alert,
.alert-description {
  color: var(--tblr-body-color);
}

.card-active .subheader {
  color: var(--tblr-body-color);
}

/* Tabler styles .table-sort for a button; a server-rendered sort link in a
   table header needs the same look without its own background. */
a.table-sort {
  background: transparent;
}

/* -- Application rules of this project --------------------------------------
   Only for what Tabler has no component for. Give each rule a one-line reason
   and take sizes from --pn-* tokens in :root. */

/* Reviewers must read each full sentence; Tabler has no CSS-only autosize.
   Browsers without field-sizing fall back to the rows attribute. */
.pn-tekst-meegroeien {
  field-sizing: content;
}

/* Keyboard focus and step changes must stay clear of the sticky banner and action bar; Tabler has no utility for scroll padding. */
html {
  scroll-padding-block: var(--pn-sticky-boven) var(--pn-sticky-onder);
}

/* Review summary above the steps: narrower columns keep it short on a phone; Tabler's datagrid is one column there. */
.pn-datagrid-smal {
  --tblr-datagrid-item-width: var(--pn-datagrid-kolom);
}

/* Dossier text keeps its line breaks; Tabler has no utility for pre-line. */
.pn-tekst-regels {
  white-space: pre-line;
}

/* Tabler dims the steps after the current one below contrast AA; they must stay readable. */
.step-item.active ~ .step-item,
.step-item.active ~ .step-item::before {
  color: var(--tblr-body-color);
}

/* Info icon inside running text and table headers; Tabler's icon button is too
   large there. Touchscreens get a larger target. */
.btn-icon.pn-info {
  --tblr-btn-padding-x: 0;
  --tblr-btn-padding-y: 0;
  --tblr-btn-border-width: 0;
  width: var(--pn-info-maat);
  height: var(--pn-info-maat);
  min-width: var(--pn-info-maat);
  min-height: var(--pn-info-maat);
  vertical-align: middle;
}

@media (pointer: coarse) {
  .btn-icon.pn-info {
    width: var(--pn-info-maat-touch);
    height: var(--pn-info-maat-touch);
    min-width: var(--pn-info-maat-touch);
    min-height: var(--pn-info-maat-touch);
  }

  /* A source code is a link in a Tabler badge, too small to tap. */
  a[data-bron] {
    display: inline-flex;
    align-items: center;
    min-height: var(--pn-bron-maat-touch);
  }
}