:root {
  --radius: 0;

  /* Rijkshuisstijl */
  --rijk-lintblauw: #154273;
  --rijk-linkblauw: #01689b;
  --rijk-bezocht: #884488;
  --rijk-lintblauw-hover: #1d568f;
  --rijk-lintblauw-active: #10355e;
  --gray-900: #0f172a;
  --gray-800: #1e293b;
  --gray-700: #334155;
  --gray-600: #475569;
  --gray-500: #64748b;
  --gray-400: #94a3b8;
  --gray-300: #cbd5e1;
  --gray-200: #e2e8f0;
  --gray-100: #f1f5f9;
  --gray-050: #f8fafc;
  --success: #39870c;
  --success-soft: color-mix(in oklab, var(--success) 10%, white);
  --warning: #ffb612;
  --warning-soft: color-mix(in oklab, var(--warning) 18%, white);
  --error: #d52b1e;
  --error-soft: color-mix(in oklab, var(--error) 9%, white);
  --info: #007bc7;
  --info-soft: color-mix(in oklab, var(--info) 9%, white);
  --carrier-gas: #94710a;
  --carrier-gas-soft: color-mix(in oklab, var(--carrier-gas) 10%, white);
  --carrier-electricity: #007bc7;
  --carrier-electricity-soft: color-mix(in oklab, var(--carrier-electricity) 9%, white);
  --neutral-soft: var(--gray-100);

  /* Officiële energielabelschaal. A0 valt visueel onder label A. */
  --energy-label-a: #008000;
  --energy-label-b: #4caf50;
  --energy-label-c: #8dc63f;
  --energy-label-d: #fff200;
  --energy-label-e: #fbb040;
  --energy-label-f: #f7941e;
  --energy-label-g: #e30613;

  --background: var(--gray-050);
  --foreground: #000000;
  --card: #ffffff;
  --card-foreground: #000000;
  --popover: #ffffff;
  --popover-foreground: #000000;
  --primary: var(--rijk-lintblauw);
  --primary-hover: var(--rijk-lintblauw-hover);
  --primary-active: var(--rijk-lintblauw-active);
  --primary-foreground: #ffffff;
  --secondary: #ffffff;
  --secondary-foreground: var(--gray-700);
  --muted: var(--gray-100);
  --muted-foreground: var(--gray-600);
  --placeholder-foreground: #535353;
  --accent: var(--gray-100);
  --accent-foreground: var(--gray-900);
  --destructive: var(--error);
  --destructive-foreground: #ffffff;
  --border: var(--gray-200);
  --input: var(--gray-300);
  --ring: #01689b;
  --chart-1: var(--rijk-lintblauw);
  --chart-2: var(--info);
  --chart-3: var(--success);
  --chart-4: var(--gray-500);
  --chart-5: var(--gray-300);

  --font-sans: "Rijksoverheid Sans", Arial, Verdana, sans-serif;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

* {
  box-sizing: border-box;
  border-color: var(--border);
}

::placeholder {
  color: var(--placeholder-foreground);
  opacity: 1;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 16px;
}

p {
  font-size: 16px;
  line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-sans);
  letter-spacing: -0.01em;
}

h1,
h2,
h3,
h4 {
  color: var(--rijk-lintblauw);
  font-weight: 700;
}

:where(p, li, td, dd, label) a:where(:not([class])),
a.tekstlink {
  color: var(--rijk-linkblauw);
  font-weight: 700;
  text-decoration: underline;
}

:where(p, li, td, dd, label) a:where(:not([class])):visited,
a.tekstlink:visited {
  color: var(--rijk-bezocht);
}

:where(p, li, td, dd, label) a:where(:not([class])):hover,
a.tekstlink:hover {
  text-decoration: none;
}

h1:focus {
    outline: none;
}

:where(a, button, input, select, textarea, [role="button"], [role="tab"]):focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

button,
a,
[role="button"],
[role="link"],
[role="tab"],
[role="menuitem"],
[role="option"],
[role="switch"],
summary,
select,
input[type="checkbox"],
input[type="radio"],
label[for] {
  cursor: pointer;
}

.blazor-error-boundary {
  display: none;
}

/* Component styles: every class carries its component's prefix (Components/<Folder>/<Component>.razor). */

/* ActionRowItem */
.action-row-row {
    display: flex;
    min-height: 68px;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background-color 150ms;
}

.action-row-row:hover {
    background: color-mix(in oklab, var(--accent) 40%, transparent);
}

.action-row-main {
    min-width: 0;
    flex: 1;
}

.action-row-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.action-row-title .action-row-building {
    flex-shrink: 0;
    color: var(--rijk-lintblauw);
}

.action-row-name {
    margin: 0;
    overflow: hidden;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.43;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.action-row-description {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--muted-foreground);
}

.action-row-right {
    font-size: 0.875rem;
    white-space: nowrap;
    color: var(--muted-foreground);
}

.action-row-end {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

.action-row-end .action-row-chevron {
    flex-shrink: 0;
    color: var(--muted-foreground);
}

/* ActionSection */
.action-section-section {
    display: grid;
    gap: 0.75rem;
    scroll-margin-top: 6rem;
}

.action-section-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.action-section-title {
    margin: 0;
    font-size: 1.125rem;
    color: var(--foreground);
}

.action-section-title.action-section-inactive {
    color: var(--muted-foreground);
}

.action-section-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.125rem;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--muted-foreground);
    transition: color 150ms, background-color 150ms;
}

.action-section-info:hover {
    background: var(--accent);
    color: var(--foreground);
}

.action-section-card {
    padding: 1rem;
    border: 1px solid var(--gray-200);
    background: var(--card);
    box-shadow: var(--shadow-sm);
}

.action-section-card.action-section-inactive {
    background: color-mix(in oklab, var(--muted) 40%, transparent);
}

/* AddBuildingsDialog */
.add-buildings-add .add-buildings-add-dialog {
    max-width: 56rem;
    max-height: 90vh;
    overflow-y: auto;
}

.add-buildings-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.add-buildings-manual,
.add-buildings-csv {
    display: grid;
    align-content: start;
    gap: 0.75rem;
}

.add-buildings-off {
    opacity: 0.5;
    pointer-events: none;
}

.add-buildings-heading {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
}

.add-buildings-muted {
    color: var(--muted-foreground);
}

.add-buildings-small {
    font-size: 0.75rem;
}

.add-buildings-block {
    display: block;
}

.add-buildings-row {
    display: grid;
    gap: 0.375rem;
}

.add-buildings-found {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.add-buildings-check {
    color: var(--rijk-lintblauw);
}

.add-buildings-name-input {
    width: 100%;
    height: 2rem;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--input);
    background: var(--card);
    font-family: inherit;
    font-size: 0.875rem;
}

.add-buildings-icon-button {
    display: inline-flex;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
}

.add-buildings-icon-button:hover {
    color: var(--foreground);
}

.add-buildings-icon-button.add-buildings-end {
    margin-left: auto;
}

.add-buildings-error {
    margin: 0;
    font-size: 0.875rem;
    color: var(--error);
}

.add-buildings-add-row {
    justify-self: start;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--rijk-lintblauw);
    font-family: inherit;
    font-size: 0.875rem;
    text-decoration: underline;
    cursor: pointer;
}

.add-buildings-add-row:disabled {
    cursor: not-allowed;
}

.add-buildings-note {
    margin: 0;
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.add-buildings-csv {
    color: var(--muted-foreground);
}

.add-buildings-ranges {
    display: grid;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--warning);
    background: var(--warning-soft);
    color: var(--gray-900);
}

.add-buildings-ranges .add-buildings-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
}

.add-buildings-ranges .add-buildings-text {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.5;
}

.add-buildings-ranges ul {
    display: grid;
    gap: 0.5rem;
    max-height: 12rem;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
    font-size: 0.875rem;
}

.add-buildings-range-input {
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--warning);
    background: var(--card);
    color: var(--gray-900);
    font-family: inherit;
    font-size: 0.875rem;
}

.add-buildings-dropzone {
    position: relative;
    padding: 1rem;
    border: 2px dashed var(--border);
    text-align: center;
    transition: border-color 150ms, background-color 150ms;
}

.add-buildings-dropzone.add-buildings-over {
    border-color: var(--rijk-lintblauw);
    background: color-mix(in oklab, var(--accent) 40%, transparent);
}

.add-buildings-dropzone:has(input[type=file]:focus-visible) {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.add-buildings-dropzone .add-buildings-file-input {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.add-buildings-dropzone .add-buildings-sheet {
    display: block;
    margin: 0 auto 0.375rem;
    color: var(--foreground);
}

.add-buildings-file {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--foreground);
}

.add-buildings-file .add-buildings-icon-button {
    position: relative;
    z-index: 2;
}

.add-buildings-drop-title,
.add-buildings-drop-text {
    margin: 0;
    line-height: 1.5;
}

.add-buildings-drop-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--foreground);
}

.add-buildings-drop-text {
    font-size: 0.75rem;
}

.add-buildings-buttons {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.add-buildings-btn-label {
    display: inline-flex;
    height: 2rem;
    align-items: center;
    gap: 0.5rem;
    padding-inline: 0.75rem;
    background: var(--primary);
    color: var(--primary-foreground);
    font-size: 0.875rem;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}

.add-buildings-btn-label:hover {
    background: var(--primary-hover);
}

.add-buildings-btn-label.add-buildings-disabled {
    pointer-events: none;
    border: 1px solid var(--gray-300);
    background: var(--gray-100);
    color: var(--gray-500);
    box-shadow: none;
}

.add-buildings-progress {
    display: grid;
    gap: 0.375rem;
    margin-top: 1.25rem;
    text-align: left;
}

.add-buildings-progress p {
    margin: 0;
    font-size: 0.75rem;
}

.add-buildings-bar {
    height: 0.5rem;
    overflow: hidden;
    border-radius: 9999px;
    background: var(--muted);
}

.add-buildings-fill {
    height: 100%;
    background: var(--rijk-lintblauw);
    transition: width 200ms;
}

.add-buildings-panel {
    padding: 1rem;
    border: 1px solid var(--border);
    background: color-mix(in oklab, var(--muted) 40%, transparent);
    font-size: 0.875rem;
}

.add-buildings-choices {
    display: grid;
    gap: 1rem;
    max-height: 50vh;
    overflow-y: auto;
}

.add-buildings-fieldset {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    border: 0;
}

.add-buildings-legend {
    margin-bottom: 0.5rem;
    padding: 0;
    font-size: 0.875rem;
    font-weight: 700;
}

.add-buildings-options {
    border: 1px solid var(--border);
}

.add-buildings-option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    cursor: pointer;
}

.add-buildings-option + .add-buildings-option {
    border-top: 1px solid var(--border);
}

.add-buildings-option:hover {
    background: color-mix(in oklab, var(--muted) 60%, transparent);
}

.add-buildings-option input {
    margin-top: 0.25rem;
    cursor: pointer;
}

.add-buildings-result {
    display: grid;
    gap: 0.75rem;
}

.add-buildings-summary {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.add-buildings-summary p {
    margin: 0;
    font-weight: 500;
}

.add-buildings-summary .add-buildings-tick {
    flex-shrink: 0;
    margin-top: 0.125rem;
    color: var(--rijk-lintblauw);
}

.add-buildings-skipped-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.add-buildings-toggle {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted-foreground);
    font-family: inherit;
    font-size: 0.875rem;
    text-decoration: underline;
    cursor: pointer;
}

.add-buildings-toggle:hover {
    color: var(--foreground);
}

.add-buildings-skipped {
    max-height: 12rem;
    margin: 0.5rem 0 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
    border: 1px solid var(--border);
}

.add-buildings-skipped li {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
}

.add-buildings-skipped li + li {
    border-top: 1px solid var(--border);
}

.add-buildings-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.add-buildings-reason {
    flex-shrink: 0;
}

.add-buildings-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (min-width: 768px) {
    .add-buildings-columns {
        grid-template-columns: 1fr 1fr;
    }

    .add-buildings-manual {
        grid-column: 2;
        grid-row: 1;
    }

    .add-buildings-csv {
        grid-column: 1;
        grid-row: 1;
        padding-right: 2rem;
        border-right: 1px solid var(--border);
    }
}

/* AddressSearch */
.address-search-search {
    position: relative;
    display: grid;
    gap: 0.375rem;
}

.address-search-label {
    font-size: 0.875rem;
    font-weight: 700;
}

.address-search-input {
    width: 100%;
    height: 2.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--input);
    background: var(--card);
    color: var(--foreground);
    font-family: inherit;
    font-size: 1rem;
}

.address-search-input:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.address-search-hint {
    margin: 0;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.address-search-list {
    position: absolute;
    z-index: 50;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    max-height: 15rem;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
    border: 1px solid var(--border);
    background: var(--popover);
    color: var(--popover-foreground);
    box-shadow: var(--shadow-md);
}

.address-search-option,
.address-search-empty {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

.address-search-option {
    cursor: pointer;
}

.address-search-option:hover {
    background: color-mix(in oklab, var(--muted) 60%, transparent);
}

.address-search-option.address-search-active {
    background: var(--muted);
}

.address-search-empty {
    color: var(--muted-foreground);
}

/* AerialPhoto */
.aerial-photo-photo {
    height: 100%;
    width: 100%;
}

.aerial-photo-thumb {
    position: relative;
    display: block;
    height: 100%;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: hidden;
    text-align: left;
    cursor: zoom-in;
}

.aerial-photo-thumb:disabled {
    cursor: default;
}

.aerial-photo-frame {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: var(--muted);
}

.aerial-photo-frame img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: opacity 150ms;
}

.aerial-photo-frame img.aerial-photo-shown {
    opacity: 1;
}

.aerial-photo-frame img.aerial-photo-hidden {
    opacity: 0;
}

.aerial-photo-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.aerial-photo-hover {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(17 24 39 / 0);
    pointer-events: none;
    transition: background-color 150ms;
}

.aerial-photo-thumb:hover .aerial-photo-hover {
    background: rgb(17 24 39 / 0.2);
}

.aerial-photo-zoom {
    display: grid;
    height: 2.5rem;
    width: 2.5rem;
    place-items: center;
    border-radius: 9999px;
    background: rgb(17 24 39 / 0.6);
    color: var(--primary-foreground);
    opacity: 0;
    transition: opacity 150ms;
}

.aerial-photo-thumb:hover .aerial-photo-zoom {
    opacity: 1;
}

.aerial-photo-photo .aerial-photo-wide {
    max-width: 48rem;
}

.aerial-photo-large {
    width: 100%;
    border-radius: 0.5rem;
}

.aerial-photo-caption {
    margin: 0;
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

/* AuthorizationSummary */
.auth-summary-summary {
    padding: 1.25rem;
}

.auth-summary-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.auth-summary-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.auth-summary-title .auth-summary-muted {
    color: var(--muted-foreground);
}

.auth-summary-heading {
    margin: 0;
    font-size: 1.25rem;
}

.auth-summary-row .auth-summary-action {
    flex-shrink: 0;
    gap: 0.375rem;
}

@media (min-width: 640px) {
    .auth-summary-summary {
        padding: 1.5rem;
    }
}

/* BuildingCard */
.building-card-link {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.building-card-card {
    height: 100%;
    border: 1px solid var(--gray-200);
    background: var(--card);
    color: var(--card-foreground);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 150ms;
}

.building-card-card.building-card-block {
    padding: 1.25rem;
}

.building-card-card.building-card-row {
    padding: 1rem;
}

.building-card-card:hover {
    box-shadow: var(--shadow-md);
}

.building-card-card.building-card-hovered {
    background: color-mix(in oklab, var(--accent) 40%, transparent);
    box-shadow: var(--shadow-md), 0 0 0 2px var(--rijk-lintblauw);
}

.building-card-row-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.building-card-main {
    min-width: 0;
    flex: 1;
}

.building-card-title {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.5rem;
}

.building-card-title .building-card-title-icon {
    flex-shrink: 0;
    color: var(--rijk-lintblauw);
}

.building-card-heading {
    margin: 0;
    overflow: hidden;
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.building-card-address {
    display: flex;
    align-items: flex-start;
    gap: 0.25rem;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--muted-foreground);
}

.building-card-address.building-card-spaced {
    margin-bottom: 0.75rem;
}

.building-card-address .building-card-pin {
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.building-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.building-card-meta.building-card-spaced {
    margin-bottom: 0.75rem;
}

.building-card-meta.building-card-tight {
    margin-top: 0.375rem;
}

.building-card-no-label {
    display: inline-flex;
    min-width: 1.75rem;
    height: 1.5rem;
    align-items: center;
    justify-content: center;
    padding-inline: 0.375rem;
    border: 1px solid var(--border);
    border-radius: 0.25rem;
    color: var(--muted-foreground);
}

.building-card-meta .building-card-skeleton-meta {
    width: 9rem;
    height: 1.5rem;
}

.building-card-badges {
    display: flex;
    min-height: 1.5rem;
    align-items: center;
    gap: 0.5rem;
}

.building-card-badges.building-card-spaced {
    margin-top: 0.75rem;
}

/* BuildingCombobox */
.combobox-root {
    position: relative;
}

.combobox-trigger {
    display: flex;
    width: 100%;
    height: 2.25rem;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0 0.75rem;
    border: 1px solid var(--gray-300);
    background: var(--card);
    color: var(--foreground);
    box-shadow: var(--shadow-sm);
    font-family: inherit;
    font-size: 1rem;
    text-align: left;
}

.combobox-trigger:hover {
    background: var(--gray-100);
}

.combobox-value {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.5rem;
}

.combobox-value .combobox-search-icon,
.combobox-trigger .combobox-chevron {
    flex-shrink: 0;
    opacity: 0.5;
}

.combobox-trigger .combobox-chevron {
    margin-left: 1.75rem;
}

.combobox-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.combobox-text.combobox-placeholder {
    color: var(--muted-foreground);
}

.combobox-clear {
    position: absolute;
    top: 50%;
    right: 2.125rem;
    display: inline-flex;
    padding: 0.125rem;
    border: 0;
    border-radius: 0.25rem;
    background: transparent;
    color: var(--foreground);
    opacity: 0.5;
    transform: translateY(-50%);
}

.combobox-clear:hover {
    opacity: 1;
}

.combobox-panel {
    position: absolute;
    z-index: 50;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    min-width: 320px;
    border: 1px solid var(--border);
    background: var(--popover);
    color: var(--popover-foreground);
    box-shadow: var(--shadow-md);
}

.combobox-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.75rem;
    border-bottom: 1px solid var(--border);
    color: var(--muted-foreground);
}

.combobox-input {
    width: 100%;
    height: 2.75rem;
    padding: 0.75rem 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--foreground);
    font-family: inherit;
    font-size: 0.875rem;
}

.combobox-list {
    max-height: 18.75rem;
    padding: 0.25rem;
    overflow-y: auto;
}

.combobox-empty {
    margin: 0;
    padding: 1.5rem 0;
    font-size: 0.875rem;
    text-align: center;
}

.combobox-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
    cursor: pointer;
}

.combobox-option.combobox-active {
    background: var(--accent);
    color: var(--accent-foreground);
}

.combobox-option.combobox-dim {
    opacity: 0.6;
}

.combobox-option .combobox-check {
    flex-shrink: 0;
}

.combobox-option .combobox-check.combobox-hidden {
    opacity: 0;
}

.combobox-option-text {
    min-width: 0;
    flex: 1;
}

.combobox-option-title,
.combobox-reason {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.combobox-muted,
.combobox-reason {
    color: var(--muted-foreground);
}

.combobox-reason {
    font-size: 0.75rem;
}

.combobox-carriers {
    display: flex;
    flex-shrink: 0;
    gap: 0.25rem;
}

.combobox-carriers .combobox-electricity {
    color: var(--carrier-electricity);
}

.combobox-carriers .combobox-gas {
    color: var(--carrier-gas);
}

/* BuildingMap */
.building-map-map-card {
    position: relative;
    z-index: 0;
    isolation: isolate;
    width: 100%;
    height: 20rem;
    overflow: hidden;
    border: 1px solid var(--gray-200);
    background: var(--card);
    box-shadow: var(--shadow-sm);
}

.building-map-wrap {
    position: relative;
    height: 100%;
    width: 100%;
}

.building-map-map {
    height: 100%;
    width: 100%;
}

.building-map-overlay {
    position: absolute;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in oklab, var(--background) 70%, transparent);
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

@media (min-width: 640px) {
    .building-map-map-card {
        height: 23.75rem;
    }
}

@media (min-width: 1024px) {
    .building-map-map-card {
        height: 30rem;
    }
}

/* BuildingPicker */
.building-picker-picker {
    display: grid;
    gap: 0.5rem;
}

.building-picker-label {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}

.building-picker-empty {
    padding: 1rem;
    border: 1px solid var(--border);
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.building-picker-list {
    max-height: 14rem;
    overflow-y: auto;
    border: 1px solid var(--border);
}

.building-picker-none {
    margin: 0;
    padding: 0.75rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.building-picker-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    cursor: pointer;
}

.building-picker-item + .building-picker-item {
    border-top: 1px solid var(--border);
}

.building-picker-item:hover {
    background: color-mix(in oklab, var(--accent) 40%, transparent);
}

.building-picker-item input {
    width: 1rem;
    height: 1rem;
    margin: 0.125rem 0 0;
    flex-shrink: 0;
    accent-color: var(--primary);
}

.building-picker-text {
    min-width: 0;
}

.building-picker-name,
.building-picker-address {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.building-picker-name {
    font-size: 0.875rem;
    font-weight: 500;
}

.building-picker-address {
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.building-picker-count {
    margin: 0;
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

/* BulkApproveDialog */
.bulk-approve-form {
    display: grid;
    gap: 0.75rem;
}

.bulk-approve-text {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.43;
    color: var(--muted-foreground);
}

.bulk-approve-fallback {
    display: grid;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.bulk-approve-fallback-text {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.43;
}

.bulk-approve-fallback-links {
    display: grid;
    gap: 0.375rem;
    margin: 0;
    padding-left: 1.25rem;
}

/* CarrierBadge */
.carrier-badge-carrier {
    display: inline-block;
    padding: 0.125rem 0.375rem;
    border: 1px solid;
    border-radius: 0.25rem;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1.2;
}

.carrier-badge-gas {
    border-color: var(--carrier-gas);
    background: var(--carrier-gas-soft);
    color: var(--carrier-gas);
}

.carrier-badge-electricity {
    border-color: var(--carrier-electricity);
    background: var(--carrier-electricity-soft);
    color: var(--carrier-electricity);
}

/* ConnectionList */
.connection-list-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.connection-list-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    scroll-margin-top: 6rem;
}

.connection-list-main {
    min-width: 0;
    flex: 1;
}

.connection-list-item + .connection-list-item {
    border-top: 1px solid var(--border);
}

.connection-list-item:target {
    background: var(--muted);
}

.connection-list-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.connection-list-ean {
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}

.connection-list-description {
    margin: 0.125rem 0 0;
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.connection-list-lines {
    display: grid;
    gap: 0.375rem;
    margin-top: 0.5rem;
}

.connection-list-line {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.75rem;
}

.connection-list-label {
    width: 6rem;
    flex-shrink: 0;
    color: var(--muted-foreground);
}

.connection-list-text {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
}

.connection-list-text svg {
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.connection-list-text .connection-list-success {
    color: var(--success);
}

.connection-list-text .connection-list-error {
    color: var(--error);
}

.connection-list-text .connection-list-dark {
    color: var(--gray-900);
}

.connection-list-text .connection-list-muted {
    color: var(--gray-500);
}

.connection-list-text .connection-list-info {
    color: var(--info);
}

.connection-list-data {
    min-width: 0;
    flex: 1;
}

.connection-list-text .connection-list-strong {
    font-weight: 500;
}

.connection-list-text.connection-list-permanent {
    color: var(--gray-700);
}

.connection-list-text.connection-list-pending {
    color: var(--muted-foreground);
}

.connection-list-note {
    margin: 0.125rem 0 0 1.25rem;
    font-size: 0.6875rem;
    line-height: 1.5;
    color: var(--muted-foreground);
}

.connection-list-item .connection-list-refresh {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    color: var(--muted-foreground);
}

.connection-list-spin {
    display: inline-flex;
    animation: connection-list-spin 1s linear infinite;
}

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

/* DataAvailabilityPanel */
.data-panel-card {
    display: grid;
    gap: 0.75rem;
    padding: 1.25rem;
}

.data-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.data-panel-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}

.data-panel-intro,
.data-panel-empty {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--muted-foreground);
}

.data-panel-empty {
    font-size: 0.875rem;
}

.data-panel-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--border);
}

.data-panel-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
}

.data-panel-item + .data-panel-item {
    border-top: 1px solid var(--border);
}

.data-panel-item > svg {
    flex-shrink: 0;
}

.data-panel-item .data-panel-success {
    color: var(--success);
}

.data-panel-item .data-panel-dark {
    color: var(--gray-900);
}

.data-panel-item .data-panel-error-icon {
    color: var(--error);
}

.data-panel-item .data-panel-muted {
    color: var(--gray-500);
}

.data-panel-info {
    display: inline-flex;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--info);
}

.data-panel-main {
    min-width: 0;
    flex: 1;
}

.data-panel-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.data-panel-ean {
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.data-panel-chip {
    padding: 0.125rem 0.5rem;
    border: 1px solid;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 400;
}

.data-panel-chip.data-panel-warning {
    border-color: var(--warning);
    background: var(--warning-soft);
    color: var(--gray-900);
}

.data-panel-chip.data-panel-ok {
    border-color: var(--success);
    background: var(--success-soft);
    color: var(--success);
}

.data-panel-chip.data-panel-bad {
    border-color: var(--error);
    background: var(--error-soft);
    color: var(--error);
}

.data-panel-chip.data-panel-neutral {
    border-color: var(--gray-300);
    background: var(--gray-100);
    color: var(--gray-700);
}

.data-panel-meta {
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.data-panel-provisional {
    margin: 0.125rem 0 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--gray-700);
}

.data-panel-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--error);
    background: var(--error-soft);
    color: var(--error);
}

.data-panel-notice.data-panel-notice-revoked {
    border-color: var(--gray-300);
    background: var(--gray-050);
    color: var(--gray-700);
}

.data-panel-notice p {
    min-width: 0;
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.5;
}

.data-panel-error,
.data-panel-permanent {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--error);
    background: var(--error-soft);
    color: var(--error);
}

.data-panel-error.data-panel-error-soft {
    border-color: var(--warning);
    background: var(--warning-soft);
    color: var(--gray-900);
}

.data-panel-permanent {
    border-color: var(--gray-200);
    background: var(--gray-050);
    color: var(--gray-500);
}

.data-panel-error svg,
.data-panel-permanent svg {
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.data-panel-error-title,
.data-panel-permanent-title {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.5;
}

.data-panel-permanent-title {
    color: var(--gray-700);
}

.data-panel-small {
    margin: 0.125rem 0 0;
    font-size: 0.6875rem;
    line-height: 1.5;
    color: var(--muted-foreground);
}

.data-panel-item .data-panel-refresh {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    color: var(--muted-foreground);
}

.data-panel-spin {
    display: inline-flex;
    animation: data-panel-spin 1s linear infinite;
}

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

/* DataRightsHolderChoice */
.holder-choice-holder {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--border);
    background: var(--background);
}

.holder-choice-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary);
}

.holder-choice-fieldset {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    border: 0;
}

.holder-choice-legend {
    margin-bottom: 1rem;
    padding: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}

.holder-choice-radio {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 1rem;
    line-height: 1.25;
}

.holder-choice-radio input {
    width: 1rem;
    height: 1rem;
    margin: 0.125rem 0 0;
    accent-color: var(--primary);
}

/* ElectricityProfileChart */
.electricity-profile-card {
    display: grid;
    gap: 0.75rem;
    padding: 1.25rem;
}

.electricity-profile-head {
    display: grid;
    gap: 0.25rem;
}

.electricity-profile-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.electricity-profile-title h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.electricity-profile-title .electricity-profile-zap {
    flex-shrink: 0;
    color: var(--carrier-electricity);
}

.electricity-profile-window {
    padding: 0.125rem 0.5rem;
    border-radius: 0.125rem;
    background: var(--warning);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--foreground);
}

.electricity-profile-fixed {
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.electricity-profile-info {
    display: inline-flex;
    width: 1.75rem;
    height: 1.75rem;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--muted-foreground);
}

.electricity-profile-info:hover {
    background: var(--accent);
    color: var(--foreground);
}

.tooltip-bubble.electricity-profile-help {
    width: min(430px, calc(100vw - 32px));
    max-width: none;
    max-height: min(70vh, 560px);
    padding: 1rem;
    overflow-y: auto;
    line-height: 1.625;
    white-space: normal;
}

.electricity-profile-help-section {
    display: block;
}

.electricity-profile-help-section + .electricity-profile-help-section {
    margin-top: 0.75rem;
}

.electricity-profile-help-section strong {
    display: block;
    font-size: 0.875rem;
    color: var(--primary);
}

.electricity-profile-subtitle,
.electricity-profile-note {
    margin: 0;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.electricity-profile-label {
    margin: 0;
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.electricity-profile-value {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
}

.electricity-profile-chart {
    position: relative;
    width: 100%;
    height: 360px;
}

.electricity-profile-badge {
    position: absolute;
    top: 0;
    right: 1.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.125rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.electricity-profile-badge.electricity-profile-good {
    background: var(--success);
    color: var(--primary-foreground);
}

.electricity-profile-badge.electricity-profile-fair {
    background: var(--warning);
    color: var(--foreground);
}

.electricity-profile-badge.electricity-profile-poor {
    background: var(--error);
    color: var(--primary-foreground);
}

.electricity-profile-summary {
    display: grid;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.electricity-profile-summary p {
    margin: 0;
    font-size: 0.875rem;
}

.electricity-profile-summary .electricity-profile-strong {
    font-weight: 600;
}

/* EnergyLabelBadge */
.energy-label-label {
    display: inline-flex;
    min-width: 1.75rem;
    align-items: center;
    justify-content: center;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.4;
}

.energy-label-label.energy-label-compact {
    height: 1.5rem;
    padding-inline: 0.375rem;
}

/* ExpiryBadge */
.expiry-badge-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0.625rem;
    border: 1px solid var(--warning);
    border-radius: 9999px;
    background: var(--warning-soft);
    color: var(--gray-900);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.expiry-badge-dot {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 9999px;
    background: var(--warning);
}

/* FindHint */
.find-hint-hint {
    margin: -1.25rem 0 0;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.find-hint-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.find-hint-link:hover {
    color: var(--foreground);
}

/* MeterPanel */
.meter-panel-card {
    display: grid;
    min-width: 0;
    gap: 1rem;
    padding: 1.25rem;
    overflow: hidden;
}

.meter-panel-head {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 1rem;
}

.meter-panel-title {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.meter-panel-title svg {
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.meter-panel-title .meter-panel-gas {
    color: var(--carrier-gas);
}

.meter-panel-title .meter-panel-electricity {
    color: var(--carrier-electricity);
}

.meter-panel-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.meter-panel-fetched {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.meter-panel-loading,
.meter-panel-error {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    font-size: 0.875rem;
}

.meter-panel-loading {
    background: color-mix(in oklab, var(--muted) 40%, transparent);
    color: var(--muted-foreground);
}

.meter-panel-error {
    background: color-mix(in oklab, var(--warning) 10%, transparent);
    color: var(--warning);
}

.meter-panel-loading svg,
.meter-panel-error svg {
    flex-shrink: 0;
}

.meter-panel-permanent {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--gray-200);
    background: var(--gray-050);
    font-size: 0.875rem;
    color: var(--gray-700);
}

.meter-panel-permanent svg {
    flex-shrink: 0;
    margin-top: 0.125rem;
    color: var(--gray-500);
}

.meter-panel-permanent-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
}

.meter-panel-small {
    margin: 0;
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.meter-panel-spin {
    display: inline-flex;
    animation: meter-panel-spin 1s linear infinite;
}

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

@media (min-width: 640px) {
    .meter-panel-head {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .meter-panel-tools {
        flex-shrink: 0;
        justify-content: flex-end;
    }
}

/* NoActions */
.no-actions-none {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

/* PurposeField */
.purpose-field-purpose {
    display: grid;
    gap: 0.375rem;
}

.purpose-field-label {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}

.purpose-field-help {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.43;
    color: var(--muted-foreground);
}

.purpose-field-textarea {
    width: 100%;
    min-height: 60px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--input);
    background: var(--card);
    color: var(--gray-900);
    box-shadow: var(--shadow-sm);
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.43;
    resize: vertical;
}

.purpose-field-textarea::placeholder {
    color: color-mix(in oklab, var(--muted-foreground) 60%, transparent);
}

.purpose-field-textarea:focus-visible {
    border-color: var(--primary);
}

.purpose-field-foot {
    display: flex;
    min-height: 1.25rem;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.purpose-field-error,
.purpose-field-counter {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.5;
}

.purpose-field-error {
    color: var(--destructive);
}

.purpose-field-counter {
    flex-shrink: 0;
    color: var(--muted-foreground);
}

/* RequestAccessDialog */
.request-access-request .request-access-request-dialog {
    max-height: 90vh;
    overflow-y: auto;
}

.request-access-form {
    display: grid;
    gap: 1rem;
}

.request-access-notice {
    padding: 0.75rem;
    border: 1px solid color-mix(in oklab, var(--error) 30%, transparent);
    background: color-mix(in oklab, var(--error) 10%, transparent);
    font-size: 0.75rem;
}

.request-access-note {
    padding: 0.75rem;
    background: color-mix(in oklab, var(--muted) 60%, transparent);
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.request-access-note-head {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
}

.request-access-note-head svg {
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.request-access-note ul {
    display: grid;
    gap: 0.375rem;
    margin: 0.375rem 0 0;
    padding-left: 1.25rem;
}

.request-access-box {
    display: grid;
    gap: 0.25rem;
    padding: 0.75rem;
    background: color-mix(in oklab, var(--muted) 40%, transparent);
    font-size: 0.875rem;
}

.request-access-strong {
    font-weight: 500;
}

.request-access-muted {
    color: var(--muted-foreground);
}

.request-access-field {
    display: grid;
    gap: 0.375rem;
}

.request-access-field label {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}

.request-access-field input {
    color: var(--gray-900);
}

.request-access-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.request-access-hint,
.request-access-error {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.5;
}

.request-access-hint {
    color: var(--muted-foreground);
}

.request-access-error {
    color: var(--error);
}

.request-access-text {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.43;
    color: var(--muted-foreground);
}

.request-access-spin {
    display: inline-flex;
    animation: request-access-spin 1s linear infinite;
}

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

/* SelfApproveDialog */
.self-approve-text {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.43;
    color: var(--muted-foreground);
}

/* RenewAuthorizationDialog */
.renew-dialog .renew-dialog-dialog {
    max-height: 90vh;
    overflow-y: auto;
}

.renew-dialog-form {
    display: grid;
    gap: 1rem;
}

.renew-dialog-notice {
    padding: 0.75rem;
    border: 1px solid color-mix(in oklab, var(--error) 30%, transparent);
    background: color-mix(in oklab, var(--error) 10%, transparent);
    font-size: 0.75rem;
}

.renew-dialog-box {
    display: grid;
    gap: 0.25rem;
    padding: 0.75rem;
    background: color-mix(in oklab, var(--muted) 40%, transparent);
    font-size: 0.875rem;
}

.renew-dialog-strong {
    font-weight: 500;
}

.renew-dialog-muted {
    color: var(--muted-foreground);
}

.renew-dialog-field {
    display: grid;
    gap: 0.375rem;
}

.renew-dialog-field label {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}

.renew-dialog-field input {
    color: var(--gray-900);
}

.renew-dialog-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.renew-dialog-error {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--error);
}

.renew-dialog-text {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.43;
    color: var(--muted-foreground);
}

.renew-dialog-terms {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    border: 0;
}

.renew-dialog-legend {
    margin-bottom: 0.5rem;
    padding: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}

.renew-dialog-term {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25;
}

.renew-dialog-term input {
    width: 1rem;
    height: 1rem;
    margin: 0.125rem 0 0;
    accent-color: var(--primary);
}

.renew-dialog-spin {
    display: inline-flex;
    animation: request-access-spin 1s linear infinite;
}

/* SourceRow */
.source-row-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.75rem;
}

.source-row-label {
    color: var(--muted-foreground);
}

.source-row-value {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--foreground);
}

.source-row-value .source-row-loading {
    width: 60%;
    height: 0.875rem;
}

/* StatusPill */
.status-pill-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    line-height: 1.4;
    white-space: nowrap;
}

.status-pill-dot {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 9999px;
}

/* UsageChart */
.usage-chart {
    display: grid;
    min-width: 0;
    gap: 1rem;
    overflow: hidden;
}

.usage-chart-plot {
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.usage-chart-canvas {
    width: 100%;
    height: 18rem;
}

.usage-chart-empty {
    margin: 0;
    padding-block: 1.5rem;
    font-size: 0.875rem;
    text-align: center;
    color: var(--muted-foreground);
}

.usage-chart-stats {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    font-size: 0.875rem;
}

.usage-chart-stats > div {
    min-width: 0;
}

.usage-chart-label,
.usage-chart-value {
    margin: 0;
    font-size: 0.875rem;
}

.usage-chart-label {
    color: var(--muted-foreground);
}

.usage-chart-value {
    font-weight: 500;
    overflow-wrap: anywhere;
}

@media (min-width: 640px) {
    .usage-chart-stats {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
    }

    .usage-chart-stats .usage-chart-middle {
        text-align: center;
    }

    .usage-chart-stats .usage-chart-end {
        justify-self: end;
        text-align: right;
    }
}

/* ValidityField */
.validity-field-validity {
    display: grid;
    gap: 0.375rem;
}

.validity-field-label {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}

.validity-field-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
}

.validity-field-row .validity-field-unit {
    width: 9rem;
}

.validity-field-hint,
.validity-field-error {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.5;
}

.validity-field-hint {
    color: var(--muted-foreground);
}

.validity-field-error {
    color: var(--destructive);
}

/* LoginScreen */
.login {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.login-panel-illustration {
    display: none;
    background: var(--info);
}

.login-illustration {
    position: relative;
    width: 100%;
    max-width: 28rem;
}

.login-picture {
    display: block;
    width: 100%;
    border-radius: 1rem;
    box-shadow: var(--shadow-lg);
}

.login-logo {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    height: 2.25rem;
    width: auto;
    max-width: none;
    object-fit: contain;
}

.login-panel-form {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 2.5rem 1rem;
    background: var(--background);
}

.login-form-centering {
    display: flex;
    flex: 1;
    align-items: center;
}

.login-form {
    display: flex;
    width: 100%;
    max-width: 28rem;
    margin-inline: auto;
    flex-direction: column;
    gap: 1.5rem;
}

.login-title {
    margin: 0;
    font-size: 26px;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

@media (min-width: 768px) {
    .login-title {
        font-size: 32px;
    }
}

@media (min-width: 1024px) {
    .login {
        flex-direction: row;
    }

    .login-panel-illustration {
        display: flex;
        width: 50%;
        align-items: center;
        justify-content: center;
        padding: 3rem;
    }

    .login-panel-form {
        width: 50%;
        padding-block: 2.5rem;
    }
}

/* InsightCard */
.insight-card-link {
    display: block;
    height: 100%;
    color: inherit;
    text-align: left;
    text-decoration: none;
}

.insight-card-link.insight-card-disabled {
    cursor: not-allowed;
}

.insight-card-card {
    display: flex;
    height: 100%;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem;
    transition: box-shadow 150ms;
}

a.insight-card-link:hover .insight-card-card {
    box-shadow: var(--shadow-md);
}

.insight-card-card.insight-card-soon {
    opacity: 0.6;
}

.insight-card-head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.insight-card-icon {
    flex-shrink: 0;
    color: var(--primary);
}

.insight-card-names {
    min-width: 0;
}

.insight-card-name {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.4;
}

.insight-card-provider {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--muted-foreground);
}

.insight-card-badges {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    margin-left: auto;
}

.insight-card-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.625rem;
    border: 1px solid transparent;
    font-size: 0.75rem;
    font-weight: 600;
}

.insight-card-commercial {
    border-color: var(--warning);
    background: var(--warning-soft);
    color: var(--gray-900);
}

.insight-card-coming {
    background: var(--muted);
    color: var(--secondary-foreground);
}

.insight-card-description {
    flex: 1;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.43;
    color: var(--muted-foreground);
}

.insight-card-cta {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.43;
    color: var(--foreground);
}

.insight-card-skeleton {
    width: 14rem;
    height: 1.25rem;
}

/* AnonymousLayout */
.anon-layout-shell {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.anon-layout-main {
    display: flex;
    flex: 1;
    flex-direction: column;
}

/* AppHeader */
.app-header {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--background);
}

.app-header-brand-block {
    position: relative;
    background: var(--background);
}

.app-header-brand-block-inner {
    position: relative;
    height: 106px;
    max-width: 80rem;
    margin-inline: auto;
}

.app-header-logo-link {
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    transform: translateX(-50%);
}

.app-header-logo-mark {
    position: relative;
    display: block;
    height: 88px;
    width: 44px;
    transform: scale(0.75);
    transform-origin: top;
}

.app-header-beeldmerk {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    height: 100%;
    width: 100%;
}

.app-header-logo-text-mobile {
    position: absolute;
    top: 55%;
    left: calc(100% + 12px);
    width: 164px;
    text-align: left;
    font-size: 12px;
    line-height: 1.25;
    color: #154273;
}

.app-header-woordmerk {
    position: absolute;
    top: 54.2%;
    left: calc(100% + 16px);
    display: none;
    height: auto;
    width: 336px;
    max-width: none;
}

@media (min-width: 768px) {
    .app-header-brand-block-inner {
        height: 136px;
    }

    .app-header-logo-mark {
        height: 8rem;
        width: 4rem;
    }

    .app-header-logo-text-mobile {
        display: none;
    }

    .app-header-woordmerk {
        display: block;
    }
}

.app-header-brand-bar {
    width: 100%;
    background: var(--primary);
}

.app-header-brand-bar-inner {
    display: flex;
    height: 2.5rem;
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: 1.5rem;
    align-items: center;
}

.app-header-brand-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--primary-foreground);
}

.app-header-beta {
    font-size: 14px;
    font-weight: 400;
}

@media (min-width: 768px) {
    .app-header-brand-title {
        font-size: 18px;
    }
}

.app-header-nav-bar {
    background: var(--background);
    border-bottom: 1px solid var(--border);
}

.app-header-nav-inner {
    display: flex;
    min-height: 3.5rem;
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: 1.5rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    column-gap: 1.5rem;
    row-gap: 0.5rem;
}

.app-header-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 1.5rem;
    row-gap: 0.25rem;
}

.app-header-nav .app-header-nav-link {
    padding-block: 0.5rem;
    border-bottom: 3px solid transparent;
    font-size: 17px;
    letter-spacing: -0.01em;
    color: var(--primary);
    text-decoration: none;
    transition: border-color 150ms, color 150ms;
}

.app-header-nav .app-header-nav-link:hover {
    border-bottom-color: var(--info);
}

.app-header-nav .app-header-nav-link.app-header-active {
    border-bottom-color: var(--primary);
    font-weight: 700;
}

.app-header-nav-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.app-header-nav-actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 1.25rem;
    font-size: 17px;
    letter-spacing: -0.01em;
    color: var(--primary);
}

.app-header-logout {
    color: inherit;
    text-decoration: none;
}

.app-header-logout:hover {
    text-decoration: underline;
}

/* ErrorPanel */
.error-panel {
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    padding-inline: 1rem;
}

.error-panel-content {
    max-width: 28rem;
    text-align: center;
}

.error-panel-title {
    margin: 0;
    font-size: 1.25rem;
}

.error-panel-detail {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.error-panel-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

/* Footer */
.site-footer {
    width: 100%;
    padding-block: 2rem;
    text-align: center;
}

.site-footer-text {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--muted-foreground);
}

.site-footer-footer-link {
    color: inherit;
    text-decoration: none;
}

.site-footer-footer-link:hover {
    color: var(--foreground);
    text-decoration: underline;
}

/* LoadingScreen */
.loading-screen {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.loading-screen-message {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--muted-foreground);
}

/* MainLayout */
.main-layout-shell {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.main-layout-main {
    flex: 1;
}

/* ActiesAutorisaties */
.acties-page {
    display: grid;
    max-width: 80rem;
    gap: 2rem;
    margin-inline: auto;
    padding: 2rem 1.5rem;
}

.acties-title {
    margin: 0;
    font-size: 26px;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.acties-subtitle {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    font-style: italic;
    line-height: 1.3;
    letter-spacing: -0.03em;
    color: var(--foreground);
}

.acties-error {
    padding: 1.5rem;
    border: 1px solid var(--gray-200);
    background: var(--card);
    box-shadow: var(--shadow-sm);
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.acties-tabs {
    display: flex;
    overflow: hidden;
    border: 1px solid var(--border);
}

.acties-tab {
    display: flex;
    height: 3.5rem;
    flex: 1;
    align-items: center;
    justify-content: center;
    border: 0;
    background: var(--background);
    color: var(--primary);
    font-family: inherit;
    font-size: 1rem;
    transition: background-color 150ms;
}

.acties-tab + .acties-tab {
    border-left: 1px solid var(--border);
}

.acties-tab:hover {
    background: color-mix(in oklab, var(--muted) 40%, transparent);
}

.acties-tab.acties-active {
    border-bottom: 3px solid var(--primary);
    background: var(--muted);
    font-weight: 700;
}

.acties-sections {
    display: grid;
    gap: 2rem;
}

.acties-skeletons {
    display: grid;
    gap: 0.75rem;
    padding: 1.5rem;
    border: 1px solid var(--gray-200);
    background: var(--card);
    box-shadow: var(--shadow-sm);
}

.acties-skeletons .acties-line {
    height: 1.5rem;
}

.acties-rows > * + * {
    border-top: 1px solid var(--border);
}

.acties-rows .acties-group-label {
    margin: 0;
    padding-block: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}

.acties-rows .acties-group-label:first-child {
    padding-top: 0;
}

.acties-sections .acties-cta {
    width: 200px;
}

.acties-bulk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.acties-bulk-label,
.acties-bulk-hint {
    margin: 0;
    line-height: 1.43;
}

.acties-bulk-label {
    font-size: 0.875rem;
    font-weight: 500;
}

.acties-bulk-hint {
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

@media (min-width: 768px) {
    .acties-title {
        font-size: 32px;
    }

    .acties-subtitle {
        font-size: 1rem;
    }
}

/* AutorisatieDetail */
.autorisatie-page {
    display: grid;
    max-width: 56rem;
    gap: 1.5rem;
    margin-inline: auto;
    padding: 2rem 1.5rem;
}

.autorisatie-page .autorisatie-title-skeleton {
    width: 16rem;
    height: 2rem;
}

.autorisatie-page .autorisatie-block-skeleton {
    height: 10rem;
}

.autorisatie-crumbs {
    font-size: 0.875rem;
}

.autorisatie-crumbs a {
    color: var(--muted-foreground);
    text-decoration: none;
}

.autorisatie-crumbs a:hover {
    color: var(--foreground);
}

.autorisatie-title {
    margin: 0;
    font-size: 26px;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.autorisatie-subtitle {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    font-style: italic;
    line-height: 1.3;
    letter-spacing: -0.03em;
}

.autorisatie-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.25rem 0 0.25rem 1rem;
    border-left: 4px solid;
}

.autorisatie-banner-content {
    min-width: 0;
}

.autorisatie-banner-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.33;
}

.autorisatie-banner-received {
    font-size: 1rem;
    font-weight: 400;
    color: var(--muted-foreground);
}

.autorisatie-banner-text {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    line-height: 1.43;
    color: var(--muted-foreground);
}

.autorisatie-status-error {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid color-mix(in oklab, var(--destructive) 30%, transparent);
    background: color-mix(in oklab, var(--destructive) 5%, transparent);
    font-size: 0.875rem;
    color: var(--destructive);
}

.autorisatie-pending-body {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem;
}

.autorisatie-pending-text {
    display: grid;
    gap: 0.25rem;
}

.autorisatie-pending-text p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.43;
}

.autorisatie-pending-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.autorisatie-pending-title h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}

.autorisatie-pending-title .autorisatie-muted-icon,
.autorisatie-muted {
    color: var(--muted-foreground);
}

.autorisatie-medium {
    font-weight: 500;
}

.autorisatie-pending-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.autorisatie-spin {
    display: inline-flex;
    animation: autorisatie-spin 1s linear infinite;
}

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

.autorisatie-page .autorisatie-section {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
}

.autorisatie-section-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1.25rem;
    color: var(--primary);
}

.autorisatie-section-title .autorisatie-shield {
    color: var(--rijk-lintblauw);
}

.autorisatie-section-title .autorisatie-info {
    color: var(--muted-foreground);
}

.autorisatie-section-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
}

.autorisatie-section-content {
    min-width: 0;
    flex: 1;
}

.autorisatie-status {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.43;
    color: var(--muted-foreground);
}

.autorisatie-value {
    font-weight: 500;
    color: var(--foreground);
}

.autorisatie-purpose {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.autorisatie-purpose-title,
.autorisatie-purpose-text {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.43;
}

.autorisatie-purpose-title {
    font-weight: 700;
    color: var(--foreground);
}

.autorisatie-purpose-text {
    margin-top: 0.25rem;
    white-space: pre-wrap;
    color: var(--muted-foreground);
}

.autorisatie-section-body .autorisatie-action {
    width: 150px;
}

.autorisatie-page .autorisatie-holder {
    padding: 1.5rem;
}

.autorisatie-holder-text {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.43;
    color: var(--muted-foreground);
}

.autorisatie-holder-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--rijk-lintblauw);
    text-decoration: none;
}

.autorisatie-holder-link:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.autorisatie-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (min-width: 768px) {
    .autorisatie-title {
        font-size: 32px;
    }

    .autorisatie-subtitle {
        font-size: 1rem;
    }
}

/* EpOnlineOverzicht */
.ep-online-page {
    display: grid;
    max-width: 80rem;
    gap: 1.5rem;
    margin-inline: auto;
    padding: 2rem 1.5rem;
}

.ep-online-crumbs {
    display: flex;
    gap: 0.375rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.ep-online-crumbs a {
    color: inherit;
    text-decoration: none;
}

.ep-online-crumbs a:hover {
    text-decoration: underline;
}

.ep-online-current {
    color: var(--foreground);
}

.ep-online-head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.ep-online-icon {
    flex-shrink: 0;
    margin-top: 0.25rem;
    color: var(--primary);
}

.ep-online-title {
    margin: 0;
    font-size: 26px;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.ep-online-subtitle {
    max-width: 48rem;
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    font-style: italic;
    line-height: 1.3;
    letter-spacing: -0.03em;
}

.ep-online-loading {
    margin: 0;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.ep-online-message {
    padding: 1.5rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.ep-online-table-card {
    overflow-x: auto;
}

.ep-online-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.ep-online-table thead {
    border-bottom: 1px solid var(--border);
    background: color-mix(in oklab, var(--muted) 40%, transparent);
    text-align: left;
}

.ep-online-table th {
    padding: 0.75rem;
    font-weight: 600;
}

.ep-online-table td {
    padding: 0.75rem;
}

.ep-online-table tbody tr + tr {
    border-top: 1px solid var(--border);
}

.ep-online-name {
    font-weight: 500;
}

.ep-online-muted {
    color: var(--muted-foreground);
}

.ep-online-skeleton {
    width: 7rem;
    height: 1.25rem;
}

@media (min-width: 768px) {
    .ep-online-title {
        font-size: 32px;
    }

    .ep-online-subtitle {
        font-size: 1rem;
    }
}

/* GebouwDetail */
.gebouw-page {
    max-width: 80rem;
    margin-inline: auto;
    padding: 2rem 1.5rem;
}

.gebouw-page.gebouw-muted {
    color: var(--muted-foreground);
}

.gebouw-stack {
    display: grid;
    gap: 1.5rem;
}

.gebouw-crumbs {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.gebouw-crumbs a {
    color: inherit;
    text-decoration: none;
}

.gebouw-crumbs a:hover {
    color: var(--foreground);
}

.gebouw-crumbs .gebouw-current {
    color: var(--foreground);
}

.gebouw-top {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
}

.gebouw-top .gebouw-info-card {
    overflow: hidden;
}

.gebouw-info {
    display: flex;
    height: 100%;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1.5rem;
}

.gebouw-titlebar {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    row-gap: 0.75rem;
}

.gebouw-title {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.33;
}

.gebouw-tools {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.5rem;
}

.gebouw-tools .gebouw-danger {
    border-color: var(--destructive);
    color: var(--destructive);
}

.gebouw-tools .gebouw-danger:hover {
    background: var(--destructive);
    color: var(--destructive-foreground);
}

.gebouw-address {
    margin: 0;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.gebouw-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    background: var(--muted);
    font-size: 0.875rem;
}

.gebouw-sources {
    display: grid;
    gap: 1.5rem;
    padding-top: 1rem;
}

.gebouw-source h2 {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0 0 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--foreground);
}

.gebouw-source h2 svg {
    color: var(--muted-foreground);
}

.gebouw-source h2 span[tabindex]:hover svg,
.gebouw-source h2 span[tabindex]:focus-visible svg {
    color: var(--foreground);
}

.gebouw-source h2 span[tabindex]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.gebouw-source-list {
    display: grid;
    gap: 0.375rem;
    margin: 0;
    font-size: 0.75rem;
}

.gebouw-source.gebouw-ep {
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.gebouw-notes {
    margin-top: 0.25rem;
    border-top: 1px solid var(--border);
    padding-top: 0.75rem;
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.gebouw-notes p {
    margin: 0;
}

.gebouw-original {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.gebouw-photo-frame {
    position: relative;
    min-height: 15rem;
    padding: 1rem;
    border: 1px solid var(--gray-200);
    border-top: 0;
    background: var(--card);
    box-shadow: var(--shadow-sm);
}

.gebouw-photo-inner {
    position: absolute;
    inset: 1rem;
    overflow: hidden;
}

.gebouw-hint {
    margin: 0;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.gebouw-hint a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.gebouw-hint a:hover {
    color: var(--foreground);
}

.gebouw-status-error {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid color-mix(in oklab, var(--destructive) 30%, transparent);
    background: color-mix(in oklab, var(--destructive) 5%, transparent);
    font-size: 0.875rem;
    color: var(--destructive);
}

.gebouw-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.gebouw-section-head h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}

.gebouw-stack .gebouw-empty {
    padding: 1.5rem;
    font-size: 0.875rem;
}

.gebouw-stack .gebouw-usage {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem;
    border-color: var(--primary);
    background: var(--primary);
    color: var(--primary-foreground);
}

.gebouw-usage-text {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.gebouw-usage-text svg {
    flex-shrink: 0;
}

.gebouw-usage-text h2 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--primary-foreground);
}

.gebouw-usage-text p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.43;
    color: color-mix(in oklab, var(--primary-foreground) 85%, transparent);
}

.gebouw-usage .gebouw-usage-button {
    width: 150px;
    flex-shrink: 0;
    gap: 0.375rem;
}

@media (min-width: 768px) {
    .gebouw-stack .gebouw-usage {
        flex-direction: row;
        align-items: center;
    }
}

.gebouw-warn-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--warning);
    border-radius: 9999px;
    background: var(--warning-soft);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--gray-900);
}

.gebouw-plain {
    margin: 0.5rem 0 0;
    color: var(--muted-foreground);
}

.gebouw-field {
    display: grid;
    gap: 0.5rem;
}

.gebouw-field label {
    font-size: 0.875rem;
    font-weight: 500;
}

.gebouw-dialog-text {
    margin: 0;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.gebouw-dialog-text strong {
    font-weight: 500;
    color: var(--foreground);
}

.gebouw-spin {
    display: inline-flex;
    animation: gebouw-spin 1s linear infinite;
}

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

.gebouw-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (min-width: 640px) {
    .gebouw-titlebar {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .gebouw-titlebar h1 {
        grid-column: 1;
        grid-row: 1;
    }

    .gebouw-titlebar .gebouw-tools {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }

    .gebouw-titlebar .gebouw-address {
        grid-column: 1;
        grid-row: 2;
    }

    .gebouw-sources {
        grid-template-columns: 1fr 1fr;
        gap: 0;
    }

    .gebouw-source.gebouw-bag {
        padding-right: 2.5rem;
    }

    .gebouw-source.gebouw-ep {
        padding: 0 0 1.25rem 2.5rem;
        border-top: 0;
        border-left: 1px solid var(--border);
    }
}

@media (min-width: 768px) {
    .gebouw-top {
        grid-template-columns: minmax(0, 1fr) 20rem;
    }

    .gebouw-top .gebouw-info-card {
        border-right: 0;
    }

    .gebouw-photo-frame {
        min-height: 0;
        padding: 1.25rem;
        border-top: 1px solid var(--gray-200);
    }

    .gebouw-photo-inner {
        inset: 1.25rem;
    }
}

/* Gebouwen */
.gebouwen-page {
    max-width: 80rem;
    margin-inline: auto;
    padding: 2rem 1.5rem;
}

.gebouwen-head {
    margin-bottom: 2rem;
}

.gebouwen-title {
    margin: 0;
    font-size: 26px;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.gebouwen-subtitle {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    font-style: italic;
    line-height: 1.3;
    letter-spacing: -0.03em;
    color: var(--foreground);
}

.gebouwen-filters {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.gebouwen-filters .gebouwen-search {
    flex: 1;
    min-width: 220px;
}

.gebouwen-filters .gebouwen-control {
    width: 100%;
}

.gebouwen-filters .gebouwen-add-button {
    width: 100%;
}

.gebouwen-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.gebouwen-list {
    order: 2;
    max-height: 30rem;
    padding-right: 0.25rem;
    overflow-y: auto;
}

.gebouwen-map {
    order: 1;
    align-self: start;
}

.gebouwen-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.gebouwen-cards.gebouwen-block {
    grid-template-columns: 1fr;
}

.gebouwen-empty {
    padding: 1.5rem;
    border: 1px solid var(--gray-200);
    background: var(--card);
    box-shadow: var(--shadow-sm);
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.gebouwen-cards .gebouwen-card-skeleton {
    height: 9rem;
}

@media (min-width: 640px) {
    .gebouwen-filters {
        flex-flow: row wrap;
        align-items: center;
    }

    .gebouwen-filters .gebouwen-control {
        width: 190px;
    }

    .gebouwen-filters .gebouwen-add-button {
        width: 220px;
    }
}

@media (min-width: 768px) {
    .gebouwen-title {
        font-size: 32px;
    }

    .gebouwen-subtitle {
        font-size: 1rem;
    }

    .gebouwen-cards.gebouwen-block {
        grid-template-columns: repeat(2, 1fr);
    }

    .gebouwen-empty.gebouwen-wide {
        grid-column: span 2;
    }
}

@media (min-width: 1024px) {
    .gebouwen-layout {
        grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
        align-items: start;
    }

    .gebouwen-list {
        order: 1;
    }

    .gebouwen-map {
        order: 2;
    }
}

/* NotFound */
.not-found {
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    padding-inline: 1rem;
}

.not-found-content {
    max-width: 28rem;
    text-align: center;
}

.not-found-code {
    margin: 0;
    font-size: 4.5rem;
    line-height: 1;
}

.not-found-title {
    margin: 1rem 0 0;
    font-size: 1.25rem;
}

.not-found-text {
    margin: 0.5rem 0 1.5rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

/* OrganisatieNietActief */
.org-inactive-refused {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
}

.org-inactive-content {
    max-width: 28rem;
    text-align: center;
}

.org-inactive-title {
    margin: 0 0 1rem;
    font-size: 1.5rem;
}

.org-inactive-text {
    margin: 0 0 1.5rem;
    color: var(--muted-foreground);
}

/* Overheidsdiensten */
.inzichten-page {
    display: grid;
    max-width: 80rem;
    gap: 1.5rem;
    margin-inline: auto;
    padding: 2rem 1.5rem;
}

.inzichten-title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 26px;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.inzichten-subtitle {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    font-style: italic;
    line-height: 1.3;
    letter-spacing: -0.03em;
}

.inzichten-loading {
    margin: 0;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.inzichten-error {
    padding: 1.5rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.inzichten-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .inzichten-title {
        font-size: 32px;
    }

    .inzichten-subtitle {
        font-size: 1rem;
    }

    .inzichten-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .inzichten-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Verbruik */
.verbruik-page {
    display: grid;
    max-width: 80rem;
    gap: 1.5rem;
    margin-inline: auto;
    padding: 2rem 1.5rem;
}

.verbruik-title {
    margin: 0;
    font-size: 26px;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.verbruik-subtitle {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    font-style: italic;
    line-height: 1.3;
    letter-spacing: -0.03em;
    color: var(--foreground);
}

.verbruik-error {
    display: grid;
    max-width: 42rem;
    justify-items: start;
    gap: 0.75rem;
    padding-block: 1rem;
}

.verbruik-error h1 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--error);
}

.verbruik-error p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.verbruik-page .verbruik-none {
    display: grid;
    justify-items: start;
    gap: 1rem;
    padding: 1.5rem;
}

.verbruik-none p {
    margin: 0;
    font-size: 0.875rem;
}

.verbruik-sticky {
    position: sticky;
    z-index: 20;
    margin-inline: -1.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--background);
    transition: box-shadow 150ms;
}

.verbruik-sticky.verbruik-scrolled {
    box-shadow: var(--shadow-md);
}

.verbruik-sticky .verbruik-filters {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
}

.verbruik-field {
    display: grid;
    align-content: start;
    gap: 0.375rem;
}

.verbruik-field.verbruik-grow {
    min-width: 0;
    flex: 1;
}

.verbruik-label {
    font-size: 0.875rem;
    font-weight: 700;
}

.verbruik-resolution {
    margin: 0;
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.verbruik-page .verbruik-message {
    padding: 1.5rem;
}

.verbruik-message p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.verbruik-page .verbruik-pick {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem;
    text-align: center;
}

.verbruik-pick svg {
    color: var(--muted-foreground);
}

.verbruik-pick-text,
.verbruik-pick-missing {
    margin: 0;
    font-size: 0.875rem;
}

.verbruik-pick-missing {
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.verbruik-charts {
    display: grid;
    gap: 1rem;
}

.verbruik-charts-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.verbruik-charts-head h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.verbruik-charts-head p {
    margin: 0.125rem 0 0;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

@media (min-width: 768px) {
    .verbruik-title {
        font-size: 32px;
    }

    .verbruik-subtitle {
        font-size: 1rem;
    }

    .verbruik-sticky .verbruik-filters {
        flex-direction: row;
        align-items: flex-start;
        gap: 1.5rem;
    }
}

/* GlobalSearch */
.global-search-trigger {
    display: inline-flex;
    padding: 0.25rem;
    border: 0;
    background: transparent;
    color: var(--primary);
}

.global-search-trigger:hover {
    color: var(--primary-hover);
}

.global-search-dialog {
    width: calc(100% - 2rem);
    max-width: 32rem;
    padding: 0;
    border: 1px solid var(--border);
    background: var(--popover);
    color: var(--popover-foreground);
    box-shadow: var(--shadow-lg);
}

.global-search-dialog::backdrop {
    background: rgb(0 0 0 / 0.8);
}

.global-search-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-inline: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.global-search-bar-icon {
    flex-shrink: 0;
    opacity: 0.5;
}

.global-search-input {
    flex: 1;
    min-width: 0;
    height: 3rem;
    padding: 0.75rem 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 0.875rem;
    color: inherit;
    outline: none;
}

.global-search-close {
    display: inline-flex;
    padding: 0.25rem;
    border: 0;
    background: transparent;
    color: var(--foreground);
    opacity: 0.7;
}

.global-search-close:hover {
    opacity: 1;
}

.global-search-results {
    max-height: 236px;
    overflow-y: auto;
    padding: 0.25rem;
}

.global-search-heading {
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--muted-foreground);
}

.global-search-message {
    margin: 0;
    padding: 0.75rem 0.5rem;
    overflow: hidden;
    font-size: 0.875rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted-foreground);
}

.global-search-option {
    display: flex;
    min-width: 0;
    align-items: center;
    padding: 0.75rem 0.5rem;
    font-size: 0.875rem;
    cursor: pointer;
}

.global-search-option.global-search-active {
    background: var(--accent);
    color: var(--accent-foreground);
}

.global-search-option.global-search-more {
    color: var(--primary);
}

.global-search-icon {
    flex-shrink: 0;
    margin-right: 0.5rem;
    color: var(--primary);
}

.global-search-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.global-search-context {
    max-width: 45%;
    margin-left: 0.75rem;
    overflow: hidden;
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted-foreground);
}

.global-search-option strong {
    font-weight: 700;
}

/* Button */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 2.25rem;
    padding: 0.5rem 1rem;
    border: 1px solid transparent;
    background: transparent;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 150ms, color 150ms, border-color 150ms;
}

.btn svg {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    pointer-events: none;
}

.btn:disabled {
    pointer-events: none;
    cursor: not-allowed;
    border-color: var(--gray-300);
    background: var(--gray-100);
    color: var(--gray-500);
    box-shadow: none;
}

.btn-default {
    background: var(--primary);
    color: var(--primary-foreground);
    box-shadow: var(--shadow-sm);
}

.btn-default:hover {
    background: var(--primary-hover);
}

.btn-default:active {
    background: var(--primary-active);
}

.btn-destructive {
    background: var(--destructive);
    color: var(--destructive-foreground);
    box-shadow: var(--shadow-sm);
}

.btn-destructive:hover {
    background: color-mix(in oklab, var(--destructive) 90%, transparent);
}

.btn-destructive:active {
    background: var(--destructive);
}

.btn-outline,
.btn-secondary {
    border-color: var(--gray-300);
    background: var(--card);
    color: var(--gray-700);
    box-shadow: var(--shadow-sm);
}

.btn-outline:hover,
.btn-secondary:hover {
    background: var(--gray-100);
    color: var(--gray-900);
}

.btn-outline:active,
.btn-secondary:active {
    background: var(--gray-200);
}

.btn-ghost:hover {
    background: var(--accent);
    color: var(--accent-foreground);
}

.btn-link {
    color: var(--primary);
    text-underline-offset: 4px;
}

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

.btn-sm {
    height: 2rem;
    padding-inline: 0.75rem;
    font-size: 0.875rem;
}

.btn-lg {
    height: 2.5rem;
    padding-inline: 2rem;
}

.btn-xl {
    height: 2.75rem;
}

.btn-icon {
    width: 2.25rem;
    padding: 0;
}

/* Shared size for secondary calls to action such as "Alles verversen". */
.btn-action {
    width: 150px;
    height: 2rem;
    gap: 0.375rem;
    padding-inline: 0.75rem;
    font-size: 0.75rem;
}

.btn-action svg {
    width: 0.875rem;
    height: 0.875rem;
}

.btn-block {
    width: 100%;
}

/* Card */
.card {
    border: 1px solid var(--gray-200);
    background: var(--card);
    color: var(--card-foreground);
    box-shadow: var(--shadow-sm);
}

/* CardContent */
.card-content {
    padding: 0 1.5rem 1.5rem;
}

/* CardDescription */
.card-description {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

/* CardFooter */
.card-footer {
    display: flex;
    align-items: center;
    padding: 0 1.5rem 1.5rem;
}

/* CardHeader */
.card-header {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 1.5rem;
}

/* CardTitle */
.card-title {
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.025em;
}

/* Dialog */
.dialog {
    width: calc(100% - 2rem);
    max-width: 32rem;
    padding: 0;
    border: 1px solid var(--border);
    background: var(--background);
    color: var(--foreground);
    box-shadow: var(--shadow-lg);
}

.dialog::backdrop {
    background: rgb(0 0 0 / 0.8);
}

.dialog-body {
    position: relative;
    display: grid;
    gap: 1rem;
    padding: 1.5rem;
}

.dialog-title {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.dialog-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.dialog-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: inline-flex;
    padding: 0.25rem;
    border: 0;
    background: transparent;
    color: var(--foreground);
    opacity: 0.7;
}

.dialog-close:hover {
    opacity: 1;
}

/* EmptyStateBanner */
.empty-banner-banner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem;
    border: 1px solid var(--primary);
    background: var(--primary);
    color: var(--primary-foreground);
    box-shadow: var(--shadow-sm);
}

.empty-banner-content {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.empty-banner-content .empty-banner-lead {
    flex-shrink: 0;
}

.empty-banner-title {
    margin: 0;
    font-size: 1.25rem;
    letter-spacing: -0.01em;
    color: var(--primary-foreground);
}

.empty-banner-description {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
}

.empty-banner-action {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    height: 2.25rem;
    padding: 0.5rem 1rem;
    border: 0;
    background: var(--card);
    color: var(--primary);
    font-family: inherit;
    font-size: 1rem;
    box-shadow: var(--shadow-sm);
}

.empty-banner-action:hover {
    background: color-mix(in oklab, var(--card) 90%, transparent);
}

@media (min-width: 768px) {
    .empty-banner-banner {
        flex-direction: row;
        align-items: center;
    }
}

/* MultiSelect */
.multi-select-multi {
    position: relative;
    display: block;
}

.multi-select-trigger {
    display: flex;
    width: 100%;
    height: 2.5rem;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 2.75rem 0.5rem 0.75rem;
    border: 1px solid var(--gray-300);
    background: var(--card);
    color: var(--gray-700);
    box-shadow: var(--shadow-sm);
    font-family: inherit;
    font-size: 1rem;
    text-align: left;
}

.multi-select-trigger:hover {
    background: var(--gray-100);
    color: var(--gray-900);
}

.multi-select-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.multi-select-trigger .multi-select-chevron {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    color: var(--muted-foreground);
    pointer-events: none;
}

.multi-select-clear {
    position: absolute;
    top: 50%;
    right: 2.25rem;
    display: inline-flex;
    padding: 0.125rem;
    transform: translateY(-50%);
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--muted-foreground);
}

.multi-select-clear:hover {
    background: var(--accent);
}

.multi-select-panel {
    position: absolute;
    z-index: 50;
    top: calc(100% + 4px);
    left: 0;
    width: 15rem;
    padding: 0.5rem;
    border: 1px solid var(--border);
    background: var(--popover);
    color: var(--popover-foreground);
    box-shadow: var(--shadow-lg);
}

.multi-select-group + .multi-select-group {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}

.multi-select-group-title {
    margin: 0;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    color: var(--muted-foreground);
}

.multi-select-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
    cursor: pointer;
}

.multi-select-option.multi-select-active {
    background: var(--accent);
}

.multi-select-option.multi-select-disabled {
    opacity: 0.6;
    color: var(--muted-foreground);
    cursor: not-allowed;
}

.multi-select-check {
    display: grid;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    place-items: center;
}

/* SelectField */
.select {
    position: relative;
    display: block;
}

.select-trigger {
    display: flex;
    width: 100%;
    height: 2.5rem;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--input);
    background: var(--card);
    color: var(--foreground);
    font-family: inherit;
    font-size: 1rem;
    text-align: left;
}

.select-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.select-trigger .select-chevron {
    flex-shrink: 0;
    color: var(--muted-foreground);
}

.select-list {
    position: absolute;
    z-index: 50;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    max-height: 18rem;
    margin: 0;
    padding: 0.25rem;
    overflow-y: auto;
    list-style: none;
    border: 1px solid var(--border);
    background: var(--popover);
    color: var(--popover-foreground);
    box-shadow: var(--shadow-lg);
}

.select-option {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
    cursor: pointer;
    user-select: none;
}

.select-option.select-active {
    background: var(--accent);
    color: var(--accent-foreground);
}

.select-option.select-disabled {
    opacity: 0.6;
    color: var(--muted-foreground);
    cursor: not-allowed;
}

.select-option .select-tick {
    flex-shrink: 0;
}

/* Segment */
.segment-group {
    display: inline-flex;
    height: 2.25rem;
    padding: 0.125rem;
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    background: var(--background);
}

.segment-option {
    display: flex;
    height: 100%;
    align-items: center;
    gap: 0.375rem;
    padding: 0 0.75rem;
    border: 0;
    border-radius: 0.25rem;
    background: transparent;
    color: var(--foreground);
    font-family: inherit;
    font-size: 0.875rem;
    white-space: nowrap;
}

.segment-option:hover {
    background: var(--muted);
}

.segment-option.segment-selected {
    background: var(--primary);
    color: var(--primary-foreground);
    font-weight: 700;
}

.segment-option.segment-off {
    cursor: not-allowed;
    opacity: 0.4;
}

.segment-option.segment-off:hover {
    background: transparent;
}

/* Skeleton */
.skeleton {
    background: color-mix(in oklab, var(--primary) 10%, transparent);
    animation: skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes skeleton-pulse {
    50% {
        opacity: 0.5;
    }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton {
        animation: none;
    }
}

/* TextInput */
.text-input-field {
    position: relative;
    display: block;
}

.text-input-input {
    width: 100%;
    height: 2.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--input);
    background: var(--card);
    color: var(--foreground);
    font-family: inherit;
    font-size: 1rem;
}

.text-input-input.text-input-with-icon {
    padding-left: 2.25rem;
}

.text-input-field .text-input-lead {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    transform: translateY(-50%);
    color: var(--muted-foreground);
    pointer-events: none;
}

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

/* ToastHost */
.toast-host-region {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 100;
    display: flex;
    width: min(22.5rem, calc(100vw - 2rem));
    flex-direction: column;
    gap: 0.5rem;
}

.toast-host-toast {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--border);
    background: var(--background);
    color: var(--foreground);
    box-shadow: var(--shadow-lg);
    font-size: 0.875rem;
}

.toast-host-toast.toast-host-success {
    border-color: var(--success);
    background: var(--success-soft);
    color: var(--success);
}

.toast-host-toast.toast-host-error {
    border-color: var(--error);
    background: var(--error-soft);
    color: var(--error);
}

.toast-host-toast.toast-host-info {
    border-color: var(--info);
    background: var(--info-soft);
    color: var(--info);
}

.toast-host-toast.toast-host-warning {
    border-color: var(--warning);
    background: var(--warning-soft);
    color: var(--gray-900);
}

.toast-host-text {
    flex: 1;
}

.toast-host-close {
    display: inline-flex;
    padding: 0.125rem;
    border: 0;
    background: transparent;
    color: inherit;
}

/* Tooltip */
.tooltip-host {
    position: relative;
    display: inline-flex;
}

.tooltip-host.tooltip-block {
    display: flex;
    width: 100%;
}

.tooltip-bubble {
    position: absolute;
    z-index: 1200;
    display: none;
    width: max-content;
    max-width: 20rem;
    padding: 0.375rem 0.75rem;
    background: var(--popover);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    color: var(--popover-foreground);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    white-space: pre-line;
    cursor: default;
}

.tooltip-host:hover > .tooltip-bubble,
.tooltip-host:focus-visible > .tooltip-bubble,
.tooltip-host:has(:focus-visible) > .tooltip-bubble,
.tooltip-bubble.tooltip-show {
    display: block;
}

.tooltip-bubble.tooltip-top {
    bottom: calc(100% + 0.25rem);
    left: 50%;
    transform: translateX(-50%);
}

.tooltip-bubble.tooltip-right {
    top: 50%;
    left: calc(100% + 0.5rem);
    transform: translateY(-50%);
}

.unconfirmed-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid color-mix(in oklab, var(--destructive) 30%, transparent);
    background: color-mix(in oklab, var(--destructive) 5%, transparent);
    font-size: 0.875rem;
    color: var(--destructive);
}

.unconfirmed-notice p {
    margin: 0;
}