.color-scheme-light {
  background-color: white;
  background-repeat: repeat;
  background-image: url('/images/final-background-white.png');
  background-size: 367px;
  background-attachment: fixed;
  background-position-x: center;
  color-scheme: light;

  --nav-bg: rgb(247, 247, 247);
  --footer-bg: rgb(198, 198, 198);
  /* --bg-primary: rgba(224, 224, 224, 0.95); */
  --bg-secondary: rgba(218, 218, 218, 0.5);
  --btn-auxiliary-bg: rgb(170, 170, 170);
  --hover-bg: hsla(0, 0%, 0%, 0.075);
  --input-bg: rgb(205, 205, 205);
  --input-border: rgb(170, 170, 170);
  --input-control-bg: rgb(238, 238, 238);
  --placeholder-text: hsl(0, 0%, 60%);
  --link-primary: rgb(101, 101, 101);
  --text-contrast: hsl(0, 0%, 100%);
  --text-primary: hsl(0, 0%, 0%);
  --text-secondary: rgba(0, 0, 0, 0.55);
  --text-muted: rgb(121, 121, 121);
  --border-primary: rgb(80, 80, 80);
  --border-light: rgb(166, 166, 166);
  --border-page: rgb(244, 244, 244);
}

.color-scheme-dark {
  background-color: black;
  background-repeat: repeat;
  background-image: url('/images/final-background-black.png');
  background-size: 367px;
  background-attachment: fixed;
  background-position-x: center;
  color-scheme: dark;

  --btn-auxiliary-bg: rgb(85, 85, 85);
  /* --bg-primary: rgba(31, 31, 31, 0.95); */
  --bg-secondary: rgba(37, 37, 37, 0.5);
  --text-contrast: hsl(0, 0%, 0%);
  --footer-bg: rgb(57, 57, 57);
  --hover-bg: hsla(0, 0%, 100%, 0.075);
  --input-bg: rgb(50, 50, 50);
  --input-border: rgb(85, 85, 85);
  --input-control-bg: rgb(70, 70, 70);
  --nav-bg: rgb(28, 28, 28);
  --placeholder-text: hsl(0, 0%, 70%);
  --link-primary: rgb(101, 101, 101);
  --text-primary: hsl(0, 0%, 100%);
  --text-secondary: rgba(255, 255, 255, 0.55);
  --text-muted: rgb(180, 180, 180);
  --border-primary: rgb(100, 100, 100);
  --border-light: rgb(120, 120, 120);
  --border-page: rgb(60, 60, 60);
}

.display-none {
  display: none;
}

.flex-between {
  display: flex;
  justify-content: space-between;
}








::placeholder {
  /* Redefine to be more specific */
  color: var(--placeholder-text);
}

::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

::-webkit-contacts-auto-fill-button {
  position: absolute;
  right: 0;
  visibility: hidden;
}

::-webkit-input-placeholder {
  font-style: italic;
}

/* input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
} */

/* Ensure the parent input has relative positioning */
input[type="date"] {
    position: relative;
} /* This is to handle the Google Chrome icon */

/* Position the indicator on the right side only */
input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    right: 0;
    width: 2.2em;
    height: 100%;
    color: transparent;
    background: transparent;
    cursor: pointer;
} /* This is to handle the Google Chrome icon */



html,
body {
  height: 100%;
}

body {
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  margin: 0;
  min-width: 320px;
  /* overflow: hidden; */
}

html {
  font-family: sans-serif;
  font-size: 13px;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: none;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button,
input {
  background-color: inherit;
  border: 0;
  box-shadow: inherit;
  color: inherit;
}

input:focus,
button:focus {
  /* Define as "input, button { outline: 0; }" instead. */
  outline: 0;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

input[type="number"] {
  -moz-appearance: textfield;
}











.search-input {
  appearance: none;
  /* background-color: var(--input-bg); */
  border: 1px solid var(--input-border);
  border-radius: 5px;
  font-size: 1rem;
  font-family: sans-serif;
  margin: 0;
  padding: 7px 14px;
  width: 100%;
}

.article-section__select-group,
.article-section__select-multiple-group {
  /* background-color: var(--input-bg); */
  border: 1px solid var(--input-border);
  border-radius: 5px;
}

.article-section__select-multiple-group {
  display: table;
}

.article-section__select-group {
  align-items: center;
  display: inline-grid;
  grid-template-areas: "select";
}

.article-section__select-group::after {
  background-color: var(--text-primary);
  clip-path: polygon(100% 0%, 0 0%, 50% 100%);
  content: "";
  grid-area: select;
  height: 0.5em;
  justify-self: end;
  margin-right: 10px;
  pointer-events: none;
  width: 0.8em;
}

.article-section__select-group select,
.article-section__select-multiple-group select {
  appearance: none;
  background-color: transparent;
  border: none;
  color: inherit;
  font-family: inherit;
  font-size: 0.923rem;
  outline: none;
}

.article-section__select-group select {
  cursor: pointer;
  grid-area: select;
  padding: 7px 16px;
  padding-right: 30px;
}

.article-section__select-multiple-group select {
  margin: 0;
  padding: 7px 0;
}

.article-section__select-group select option {
  color: black;
}

.article-section__select-group select:disabled {
  cursor: not-allowed;
}

.article-section__select-group:has(> select:disabled) {
  opacity: 0.5;
}

.article-section__select-group:focus-within,
.article-section__select-multiple-group:focus-within,
.search-input:focus,
#authenticate__input-field:focus,
#authenticate__code-field:focus {
  border: 1px solid hsl(168, 53%, 53%);
}



.text-input,
.text-input--date {
  appearance: none;
  /* background-color: var(--input-bg); */
  background-color: transparent;
  /* Needed for textarea */
  border: 1px solid var(--input-border);
  border-radius: 5px;
  box-sizing: border-box;
  display: block;
  font-family: inherit;
  font-size: 1rem;
  /* margin: 10px 0; */
  padding: 6px 11px;
  width: 100%;
}

.text-input:disabled,
.text-input--date:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.text-input:focus-within,
.text-input--date:focus-within {
  border: 1px solid hsl(168, 53%, 53%);
}

.text-input--date {
  min-height: 2em;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23888" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>');
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 1em;
  padding-right: 2.2em;
}

/**
 */
.article-top {
  display: flex;
  flex: 1;
  justify-content: center;
  overflow-y: auto;
  align-items: start;
}

/**
 */
.article__page,
.article__page--tall {
  border: 1px solid var(--border-page);
  /* box-shadow: rgb(244, 244, 244) 0px 0px 100px; */
  /* background-color: white; */
  /* background-color: rgba(255, 255, 255, 0.2); */
  background-color: white;
  /* backdrop-filter: blur(10px); */
  box-sizing: border-box;
  max-width: 833px;
  padding: 0px;
  width: 100%;
}

@supports (backdrop-filter: blur()) {

  .article__page,
  .article__page--tall {
    background-color: transparent;
    backdrop-filter: blur(10px);
  }
}

.article__page {
  padding-top: 0;
  padding-bottom: 88px;
}

.article__page--tall {
  padding-top: 44px;
  padding-bottom: 41px;
}

/**
 */
.list-row {
  display: flex;
  justify-content: space-between;
  padding: 0px 10px;
}

/**
 */
.article-section__label {
  color: var(--text-muted);
  display: block;
  font-size: 0.846rem;
  margin: 3px;
  /* margin-top: 15px; */
}

/**
 * Modifier labels for optional/required field indicators
 */
.field-label__optional,
.field-label__required {
  color: rgb(79, 79, 79);
  margin-left: 7px;
}

/**
 * Global label wrapper class for form fields
 */
.field-label {
  display: block;
  margin: 10px;
}

/**
 */
.form-actions {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}

/**
 */
.article-section,
.article-section--locked,
.article-section--no-padding {
  /* background-color: var(--bg-secondary); */
  /* margin-bottom: 20px; */
  border-top: 1px solid var(--input-border);
}

.article-section {
  padding: 30px;
}

/**
 * Modifier for article-section that hosts a step-gate overlay.
 * Sets up the stacking context so .step-gate can be positioned absolutely
 * over the dimmed content beneath it.
 */
.article-section--locked {
  position: relative;
}

/**
 * Full-bleed overlay that blocks interaction until a prior step is completed.
 * Sits above the dimmed content (z-index: 2) and centers its child.
 */
.step-gate {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 2;
}

/**
 * Content inside .step-gate — step number + message.
 */
.step-gate__body {
  text-align: center;
}

.step-gate__step {
  font-size: 45px;
  font-weight: 100;
}

/**
 * Instructional message shown inside the step-gate overlay.
 */
.step-gate__msg {
  color: var(--text-muted);
  font-size: 0.923rem;
  margin-top: 6px;
  text-align: center;
}

/**
 */
.article-section__name {
  font-size: 1.153rem;
  margin: 5px 17px;
  margin-bottom: 15px;
}

/**
 * Toolbar row at the top of an edit form — sticky save/discard actions.
 */
.form-toolbar {
  margin-top: 10px;
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: rgba(255, 255, 255, 0.98);
  display: flex;
  justify-content: flex-end;
  padding: 5px 30px;
}

/**
 */
.form-actions__cancel-button {
  color: var(--text-muted);
  cursor: pointer;
  padding: 5px 20px;
}

/**
 */
.form-actions__create-button {
  appearance: none;
  background-color: var(--text-primary);
  border-radius: 3px;
  color: var(--text-contrast);
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  margin: 0 4px;
  padding: 5px 20px;
}

.form-actions__create-button:disabled {
  cursor: not-allowed;
  opacity: 0.25;
}

.form-actions__create-button:not([disabled]):hover {
  background-color: var(--hover-bg);
}




/**
 */
.selection-input {
  margin: 0;
}

.selection-input[type="radio"] {
  appearance: none;
  /* background-color: var(--input-control-bg); */
  border: 1px solid var(--input-border);
  border-radius: 50%;
  cursor: pointer;
  height: 16px;
  width: 16px;
}

.selection-input[type="radio"]:hover {
  border-color: hsl(207, 90%, 44%);
  box-shadow: 0 0 0 3px hsla(207, 90%, 54%, 0.2);
}

.selection-input[type="radio"]:focus-visible {
  outline: none;
  border-color: hsl(207, 90%, 54%);
  box-shadow: 0 0 0 3px hsla(207, 90%, 54%, 0.25);
}

.selection-input[type="radio"]:checked {
  background-color: hsl(207, 90%, 54%);
  border-color: hsl(207, 90%, 54%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='2.5' fill='white'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px 12px;
}

.selection-input[type="radio"]:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.selection-input[type="checkbox"] {
  appearance: none;
  /* background-color: var(--input-control-bg); */
  border: 1px solid var(--input-border);
  border-radius: 4px;
  cursor: pointer;
  height: 16px;
  width: 16px;
}

/* .selection-input[type="checkbox"]:hover {
  border-color: hsl(207, 90%, 54%);
  box-shadow: 0 0 0 3px hsla(207, 90%, 54%, 0.15);
} */

.selection-input[type="checkbox"]:focus-visible {
  outline: none;
  border-color: hsl(207, 90%, 54%);
  box-shadow: 0 0 0 3px hsla(207, 90%, 54%, 0.25);
}

.selection-input[type="checkbox"]:checked {
  background-color: hsl(207, 90%, 54%);
  border-color: hsl(207, 90%, 54%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 10px 10px;
}

.selection-input[type="checkbox"]:hover {
  /* background-color: hsl(207, 90%, 44%); */
  border-color: hsl(207, 90%, 44%);
  box-shadow: 0 0 0 3px hsla(207, 90%, 54%, 0.2);
}

.selection-input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.create-button {
  background-color: hsl(168, 47%, 44%);
  border-radius: 3px;
  color: var(--text-contrast);
  display: inline-block;
  margin: 0 4px;
  padding: 7px 10px;
  text-decoration: none;
}

.create-button:hover {
  background-color: hsl(168, 47%, 54%);
  text-decoration: none;
}

.input-label {
  cursor: pointer;
  line-height: 16px;
  /* vertical-align: middle; */
  max-width: 300px;
}


.radio-option {
  /* align-items: center; */
  display: flex;
  gap: 6px;
  margin: 8px 5px;
  width: fit-content;
}

.checkbox-option {
  /* align-items: center; */
  display: flex;
  gap: 6px;
  margin: 8px 5px;
  width: fit-content;
}

/**
 */
.descriptive-option {
  /* background-color: var(--input-bg); */
  border: 1px solid var(--input-border);
  border-radius: 5px;
  cursor: pointer;
  display: block;
  height: 72px;
  margin: 5px;
  padding: 16px;
  width: 180px;
}

.descriptive-option:has(> .selection-input:checked) {
  border: 1px solid hsl(207, 90%, 54%);
}

.descriptive-option:has(> .selection-input:disabled) {
  opacity: 0.5;
}

.radio-group {
  display: flex;
  flex-wrap: wrap;
}

/**
 */
.descriptive-option-title {
  font-size: 1rem;
}

/**
 */
.descriptive-option-body {
  color: var(--text-muted);
  font-size: 0.923rem;
  font-style: italic;
  padding: 8px 0;
}


/**
 */
.site-navigation {
  background-color: var(--nav-bg);
  flex-shrink: 0;
  width: 100%;
  z-index: 3;
}

/* @supports (backdrop-filter: blur()) {
  .site-navigation {
    background-color: rgba(247, 247, 247, 0.5);
    backdrop-filter: saturate(1.8) blur(20px);
  }
} */  /* '--nav-bg' w/ 0.5 alpha */

/**
 */
.site-navigation__group {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1015px;
  padding: 0 5px;
}

/**
 */
.site-navigation__site-name {
  color: hsl(168, 53%, 53%);
  cursor: default;
  display: inline-block;
  font-weight: bold;
  white-space: nowrap;
}

/**
 */
.site-navigation__entire-group-button {
  color: var(--link-primary);
  font-style: italic;
}

/**
 */
.site-navigation__documentation-link,
#site-navigation__sign-out-button {
  color: var(--text-muted);
}

#site-navigation__sign-out-button {
  appearance: none;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
}

.site-navigation__site-name,
.site-navigation__entire-group-button,
.site-navigation__documentation-link,
#site-navigation__sign-out-button {
  margin: 0 10px;
  padding: 14px 0;
}

#expanded-links {
  display: inline-block;
}



.event-date,
.event-information-separator {
  color: var(--text-muted);
}

.event-information-separator {
  margin: 0 5px;
}

.input-label-format {
  color: var(--text-muted);
  font-size: 0.846rem;
  margin-left: 7px;
  margin-top: 3px;
}

/* use to be ".qwe" */
.detail-information-row {
  display: grid;
  grid-template-columns: 100px auto;
  grid-gap: 10px;
  margin: 4px 0;
}

.detail-information-row__label {
  color: grey;
  text-align: right;
}

.detail-information-row__value {
  /* value column */
}

.page-actions {
  margin: 15px;
}

.secondary-button-green,
.secondary-button-red,
.secondary-button-blue,
.secondary-button-grey {
  appearance: none;
  border-radius: 3px;
  cursor: pointer;
  display: inline-block;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  margin: 7px;
  padding: 5px 16px;
}

.secondary-button-green {
  background-color: hsla(168, 31.86%, 90.46%, 1);
  border: 1px solid hsl(168, 47%, 44%, 1);
  color: hsl(168, 47%, 44%, 1);
}

.secondary-button-red {
  background-color: hsla(0, 100%, 95%, 1);
  border: 1px solid hsl(0, 70%, 50%, 1);
  color: hsl(0, 70%, 50%, 1);
}

.secondary-button-blue {
  background-color: hsla(210, 100%, 95%, 1);
  border: 1px solid hsl(210, 70%, 50%, 1);
  color: hsl(210, 70%, 50%, 1);
}

.secondary-button-grey {
  background-color: hsla(0, 0%, 95%, 1);
  border: 1px solid hsl(0, 0%, 55%, 1);
  color: hsl(0, 0%, 35%, 1);
}

.secondary-button-green:disabled,
.secondary-button-red:disabled,
.secondary-button-blue:disabled,
.secondary-button-grey:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

/* .secondary-button-orange {
  background-color: hsla(30, 100%, 95%, 1);
  border: 1px solid hsl(30, 90%, 55%, 1);
  color: hsl(30, 90%, 45%, 1);
} */

.tertiary-button {
  appearance: none;
  background-color: transparent;
  border: 1px solid var(--btn-auxiliary-bg);
  border-radius: 3px;
  color: var(--text-primary);
  cursor: pointer;
  display: inline-block;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  margin: 7px;
  padding: 5px 16px;
}

/* .action-button {
  appearance: none;
  background-color: transparent;
  border: 1px solid var(--btn-auxiliary-bg);
  border-radius: 3px;
  color: var(--text-primary);
  display: inline-block;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  margin: 7px;
  padding: 5px 16px;
}

.action-button:disabled {
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.5;
}

.action-button:enabled {
  cursor: pointer;
}

.action-button:hover:enabled {
  background-color: var(--hover-bg);
} */

.form-actions__cancel-button {
  cursor: pointer;
}

.href-button {
  background-color: var(--btn-auxiliary-bg);
  border-radius: 3px;
  color: var(--text-primary);
  display: inline-block;
  margin: 7px;
  padding: 5px 16px;
}

.href-button:hover {
  background-color: var(--hover-bg);
}

.hide-me {
  display: flex;
  width: 250px;
}

.hide-me1 {
  width: 250px;
}

@media (max-width: 812px) {

  .hide-me,
  .hide-me1 {
    display: none;
  }
}

@media (max-width: 500px) {
  /* .article__page {
    padding-left: 30px;
    padding-right: 30px;
  } */

  .article-section {
    padding: 30px 10px;
  }
}

/* ==========================================================================
   List Components
   ========================================================================== */

.list-page-controls {
  margin: 0 75px;
}

/**
 * Header row at the top of a list page (title + action button)
 */
.list-page-header {
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}

/**
 * Page title inside .list-page-header
 */
.list-page-title {
  font-family: serif;
  font-size: 25px;
  margin: 0;
}

/**
 * A single filter group row (label + controls side by side)
 */
.filter-group {
  /* display: flex;
  align-items: center; */
  margin: 20px 0;
}

/**
 * The uppercase label for a filter group (e.g. OPTIONS, DIRECTION)
 */
.filter-group__label {
  color: grey;
  font-size: 11px;
  flex-shrink: 0;
}

/**
 * The controls container inside a filter group
 */
/* .filter-group__controls {
  display: flex;
  gap: 10px;
  margin-left: 20px;
} */

/**
 * Action buttons row at the bottom of a filter form
 */
.filter-form-actions {
  margin: 40px 0 50px;
}

/**
 * Scrollable table wrapper used on list pages
 */
.list-table-wrapper {
  display: flex;
  justify-content: center;
  overflow: scroll;
  scrollbar-gutter: stable;
}

/* For lists with 5-item limit */
.list-container--limit-5 .registration-item:nth-child(5)~.truncation-notice,
.list-container--limit-5 .longterm-pass-item:nth-child(5)~.truncation-notice {
  display: block;
}




/* Latest Multi-Row */
.table {
  border-collapse: collapse;
  /* margin: 0 68px; */
  white-space: nowrap;
  display: table;
  width: 100%;
}

.tr {
  display: table-row;
  border-bottom: 1px solid var(--input-border);
}

.thead {
  display: table-header-group;
  /* background-color: hsla(168, 31.86%, 90.46%, 1); */
}

.tbody {
  display: table-row-group;
}

/* .tbody .tr {
  cursor: pointer;
} */

.th {
  font-weight: bold;
}

/**
 * Sortable column header.
 * Apply to any .th that should be clickable for column sorting.
 * Uses aria-sort="ascending" | "descending" | "none" to drive the indicator.
 */
.th--sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.th.th--sortable {
  padding-right: 26px;
}

.th--sortable:hover {
  text-decoration: underline;
}

.th--sortable:focus-visible {
  outline: 2px solid hsl(207, 90%, 54%);
  outline-offset: -2px;
}

/* Sort direction indicator — shown via a pseudo-element */
.th--sortable::after {
  content: '';
  display: inline-block;
  height: 0.7em;
  margin-left: 5px;
  opacity: 0.3;
  vertical-align: middle;
  width: 0.7em;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="5 12 12 5 19 12"/></svg>');
  background-repeat: no-repeat;
  background-size: contain;
}

.th--sortable[aria-sort="ascending"] {
  color: hsl(168, 47%, 54%);
}

.th--sortable[aria-sort="ascending"]::after {
  opacity: 1;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%233daa96" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>');
}

.th--sortable[aria-sort="descending"] {
  color: hsl(168, 47%, 54%);
}

.th--sortable[aria-sort="descending"]::after {
  opacity: 1;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%233daa96" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="5 12 12 19 19 12"/></svg>');
}

.th,
.td {
  /* padding: 8px 16px; */
  padding: 12px 16px;
  /* text-align: left; */
  /* border-bottom: 1px solid #DDD; */
  display: table-cell;
}

/* .tbody .tr:nth-child(even) {
  background-color: #d6d6d6;
} */

/* .tbody .tr:hover {
  background-color: rgb(206, 215, 223);
} */

/* Prevent underline and pointer cursor on entire row link */
a.tr {
  text-decoration: none;
  cursor: default;
}

/* Style and underline the name field on hover */
.name-link {
  color: dodgerblue;
  cursor: pointer;
}

a.tr:hover .name-link {
  text-decoration: underline;
}


.empty-placeholder {
  display: table-caption;
}

.empty-placeholder--block {
  display: block;
  caption-side: bottom;
  /* padding: 25px; */
}

/* .tbody .tr:nth-child(1)~.empty-placeholder, */
.tbody:has(.tr)~.empty-placeholder,
.result-list:has(.result-card)~.empty-placeholder,
.resource-events-section:has(.event-card) .empty-placeholder--block {
  display: none;
}

.truncation-notice {
  display: none;
}

.truncation-notice--block {
  display: none;
  caption-side: bottom;
  /* padding: 25px; */
}

/* .tbody .tr:nth-child(150)~.truncation-notice, */
.tbody:has(.tr:nth-child(150))~.truncation-notice,
.result-list:has(.result-card:nth-child(150))~.truncation-notice {
  /* display: block; */
  display: table-caption;
}

.resource-events-section:has(.event-card:nth-child(150)) .truncation-notice--block {
  display: block;
}

.truncation-notice,
.empty-placeholder {
  /* display: table-caption; */
  /* text-align: center; */
  /* font-weight: bold; */
  /* font-size: 1.2rem; */
  /* padding: 10px; */
  caption-side: bottom;
  padding: 25px;
}


/* Status badges */
.status-green,
.status-orange,
.status-red,
.status-grey {
  border-radius: 3px;
  padding: 3px 7px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.status-green::before,
.status-orange::before,
.status-red::before,
.status-grey::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
  flex-shrink: 0;
}

.status-green {
  background-color: lightgreen;
  color: green;
}

.status-orange {
  background-color: rgb(255, 227, 174);
  color: orange;
}

.status-red {
  background-color: lightcoral;
  color: red;
}

.status-grey {
  background-color: rgb(220, 220, 220);
  color: rgb(100, 100, 100);
}











/* ==========================================================================
   Listbox Component
   ========================================================================== */

.listbox {
  border: 1px solid var(--input-border);
  border-radius: 5px;
  display: inline-block;
}

.listbox__search {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--input-border);
  border-radius: 5px 5px 0 0;
  box-sizing: border-box;
  color: inherit;
  display: block;
  font-family: inherit;
  font-size: 1rem;
  outline: none;
  padding: 7px 12px;
  width: 100%;
}

/* .listbox__search:focus {
  border-bottom-color: hsl(168, 53%, 53%);
} */

.listbox__grid {
  max-height: 200px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 44px 150px 36px;
  width: 100%;
}

/* Column header row */
/* .listbox__header {
  display: contents;
} */

/* .listbox__header > div {
  background-color: white;
  font-weight: bold;
  padding: 10px 12px;
} */

/* The injected body — spans all columns and is itself a grid */
.listbox__body {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 44px 150px 36px;
}

/* Group header — spans all columns */
.listbox__group-header {
  grid-column: 1 / -1;
  padding: 6px 12px;
  color: var(--text-muted);
  font-size: 0.846rem;
  font-weight: bold;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-top: 1px solid var(--input-border);
}

.listbox__group-header:first-child {
  border-top: none;
}

/* Group body — repeats the same fixed columns */
.listbox__group-body {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 44px 150px 36px;
}

/* Individual row */
.listbox__row {
  display: contents;
  cursor: pointer;
}

.listbox__row > div {
  align-items: center;
  border-top: 1px solid var(--input-border);
  display: flex;
  padding: 10px 12px;
}

.listbox__row:hover > div {
  background-color: var(--hover-bg);
}

.listbox__row:has(input:checked) > div {
  background-color: hsla(207, 90%, 54%, 0.08);
}

.listbox__row-radio,
.listbox__row-icon  {
  justify-content: center;
}

/* Organization listbox variant — 3 columns (matches standard listbox) */
.listbox__grid--org,
.listbox__body--org {
  grid-template-columns: 44px 1fr 36px;
}

/* Empty placeholder inside listbox bodies */
.listbox__body > .empty-placeholder {
  grid-column: 1 / -1;
  padding: 25px;
  text-align: center;
}

.listbox__body:has(.listbox__row) > .empty-placeholder,
.listbox__body:has(.listbox__group-header) > .empty-placeholder {
  display: none;
}

/* ==========================================================================
   Resource Events Section
   ========================================================================== */

.resource-events-section {
  max-height: 200px;
  overflow-y: auto;
}

.event-card {
  margin: 5px 15px;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

@media (max-width: 650px) {
  .list-page-controls {
    margin: 0 40px;
  }
}

@media (max-width: 600px) {
  #expanded-links {
    display: none;
  }
}

@media (pointer: coarse) {
  html {
    font-size: 15px;
  }

  /* .selection-input[type="radio"] {
    height: 15px;
    width: 15px;
  } */

  /* .selection-input[type="checkbox"] {
    height: 15px;
    width: 15px;
  } */

  .input-label {
    line-height: 15px;
  }

  /* .radio-option {
    margin: 10px 0;
  } */

  /* .checkbox-option {
    margin: 10px 0;
  } */
}







/* TODO: Use HTML `<dialog>` element when support is better */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

/* Modal Content */
.modal-content {
  background-color: white;
  margin: auto;
  /* padding: 20px; */
  width: 100%;
  max-width: 750px;
  box-sizing: border-box;
  overflow: auto;
  /* Keeps child element margin within visible boundry */
}



.icon-plus-blue::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.3em;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 2 24 24" fill="none" stroke="hsl(210, 70%, 50%)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}

.icon-hamburger::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><polyline fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" points="2 5, 16 5"/><polyline fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" points="2 12, 16 12"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}

.icon-delete::before {
  cursor: pointer;
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="hsl(0, 70%, 50%)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}

.icon-edit::before {
  cursor: pointer;
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="silver" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}

.icon-delete:disabled::before,
.icon-edit:disabled::before {
  cursor: not-allowed;
  opacity: 0.3;
}

.icon-warning::before {
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="hsl(38, 92%, 50%)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}

.icon-deny::before {
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="hsl(0, 72%, 51%)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}

.icon-checkmark::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.3em;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}

.icon-loading::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.3em;
  border: 0.15em solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  vertical-align: middle;
  animation: icon-spin 0.7s linear infinite;
}

@keyframes icon-spin {
  to { transform: rotate(360deg); }
}















































/* ==========================================================================
   Policy Messages Component
   ========================================================================== */

.policy-messages {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  max-width: 300px;
}

.policy-message {
  border-radius: 5px;
  padding: 8px 10px;
}

.policy-message--red {
  background-color: rgb(252, 203, 203);
  border: 1px solid rgb(255, 126, 126);
}

.policy-message--orange {
  background-color: rgb(255, 224, 194);
  border: 1px solid rgb(255, 160, 80);
}

.policy-message--yellow {
  background-color: rgb(255, 248, 196);
  border: 1px solid rgb(230, 200, 60);
}

/* ==========================================================================
   Breadcrumb Component
   ========================================================================== */

/**
 * Breadcrumb navigation following WAI-ARIA breadcrumb pattern.
 * Placed inside .article__page--tall, above page content.
 */
.breadcrumb {
  margin: 0 15px 10px;
  padding: 0;
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb__item {
  display: flex;
  align-items: center;
}

/* Separator between crumbs — inserted via CSS so it stays out of the DOM/AT */
.breadcrumb__item + .breadcrumb__item::before {
  color: var(--text-muted);
  content: "›";
  font-size: 1rem;
  margin: 0 5px;
  speak: never;
}

.breadcrumb__link {
  color: var(--text-muted);
  font-size: 0.923rem;
  text-decoration: none;
}

.breadcrumb__link:hover {
  color: var(--text-primary);
  text-decoration: underline;
}

/* Current page — plain text, not a link */
.breadcrumb__current {
  color: var(--text-primary);
  font-size: 0.923rem;
}

/* ==========================================================================
   Result Card Component
   ========================================================================== */

.result-card {
  border: 1px solid rgb(167, 167, 167);
  border-radius: 3px;
  overflow: hidden;
  margin: 5px 0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  background-color: rgba(221, 221, 221, 0.1);
  padding: 15px;
}

.card-info {
  margin: 0 10px;
}

.card-content {
  margin: 0px 15px;
}

.card-item {
  border-bottom: 1px solid silver;
  display: grid;
  grid-template-columns: 80px 1fr auto auto;
  align-items: center;
  gap: 15px;
  padding: 10px;
}

.card-content > .card-item:last-child {
  border: none;
}

.vehicle-details {
  display: flex;
}

.vehicle-detail {
  margin: 0 5px;
}

.vehicle-plate {
  font-weight: bold;
}


.checkout-summary {
  max-width: 340px;
  color: #222;
}

.checkout-card {
  border: 1px solid silver;
  border-radius: 6px;
  margin-bottom: 8px;
  align-items: center;
  padding: 10px 8px 10px 12px;
}

.item-label .title {
  font-weight: bold;
}

.item-label .subtitle {
  color: #666;
  font-size: 13px;
}

.item-amount {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Totals */
.checkout-card,
.checkout-totals {
  display: grid;
  grid-template-columns: 1fr 60px 28px 28px;
}

.totals-row {
  display: contents;
}

.totals-row .totals-label,
.totals-row .totals-amount {
  padding: 5px 0;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.totals-row .totals-label {
  text-align: right;
  color: #666;
  padding-right: 8px;
}

.totals-row .totals-spacer {
  grid-column: span 2;
}

.totals-row.has-border .totals-label,
.totals-row.has-border .totals-amount,
.totals-row.has-border .totals-spacer {
  border-bottom: 1px solid #ccc;
  padding-bottom: 8px;
}

.totals-row.is-total .totals-label,
.totals-row.is-total .totals-amount {
  font-weight: bold;
  font-size: 14px;
  padding-top: 10px;
}