csaf-crud 1.5.26

/*
 * SPDX-License-Identifier: Apache-2.0
 * SPDX-FileCopyrightText: 2026 ndaal Gesellschaft für Sicherheit in der Informationstechnik mbH & Co KG, Cologne
 * SPDX-FileCopyrightText: Author: Pierre Gronau <Pierre.Gronau@ndaal.eu>
 */

/* csaf-crud components. Class selectors only; every colour is a token
 * (tokens/ndaal-tokens.css, tokens/csaf-tokens.css). Logical properties only,
 * so right-to-left languages (Urdu) mirror correctly. The focus ring is the
 * skill's single global rule and is deliberately not restyled here.
 *
 * Breakpoint: 64rem is --ndaal-bp-md. Custom properties cannot drive a media
 * query, so the literal is repeated and is the only magic number.
 */

/* ---- Skip link: first focusable element, visible on focus ---- */
.skip-link {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: var(--ndaal-z-toast);
  display: inline-flex;
  align-items: center;
  min-block-size: var(--ndaal-target-min);
  padding-inline: var(--ndaal-space-4);
  border: 2px solid var(--ndaal-text-primary);
  background: var(--ndaal-bg);
  color: var(--ndaal-text-primary);
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

/* ---- Icons: one self-hosted SVG sprite (static/img/icons.svg) ---- */
.icon {
  flex: none;
  inline-size: 1em;
  block-size: 1em;
  fill: currentcolor;
  vertical-align: -0.125em;
}

/* ---- Header: white band, hairline border, as on sbom.ndaal.eu ---- */
.site-header {
  border-block-end: 1px solid var(--ndaal-border-decorative);
  background: var(--ndaal-bg);
  color: var(--ndaal-text-primary);
}

.primary {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ndaal-space-2) var(--ndaal-space-4);
  max-inline-size: var(--ndaal-container);
  margin-inline: auto;
  padding: var(--ndaal-space-2) var(--ndaal-space-4);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--ndaal-space-3);
  min-block-size: var(--ndaal-target-min);
  color: var(--ndaal-text-primary);
  text-decoration: none;
}

.brand-logo {
  block-size: 2.25rem;
  inline-size: auto;
  padding: 4px 8px;
  border-radius: var(--ndaal-radius-sm);
  background: var(--csaf-logo-plate);
}

.brand-text {
  font-size: var(--ndaal-text-xl);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ---- Header controls: links, summaries and the hamburger ---- */
.nav-link,
.nav-toggle,
.menu-summary {
  display: inline-flex;
  align-items: center;
  gap: var(--ndaal-space-2);
  min-block-size: var(--ndaal-target-min);
  padding-inline: var(--ndaal-space-3);
  border: 0;
  border-block-end: 3px solid transparent;
  border-radius: var(--ndaal-radius-sm);
  background: transparent;
  color: var(--ndaal-text-primary);
  cursor: pointer;
  font-size: var(--ndaal-text-sm);
  text-decoration: none;
}

.nav-toggle {
  border: 1px solid var(--ndaal-border-interactive);
  font-size: var(--ndaal-text-xl);
  list-style: none;
}

.menu-summary {
  list-style: none;
}

.nav-link:hover,
.nav-toggle:hover,
.menu-summary:hover {
  background: var(--ndaal-surface);
}

.nav-link[aria-current='page'],
.menu-summary[aria-current='page'] {
  border-block-end-color: var(--ndaal-primary);
  color: var(--ndaal-primary);
  font-weight: 700;
}

.nav-dropdown[open] .menu-summary {
  background: var(--ndaal-surface);
}

/* ---- Collapsible navigation (below 64rem) ---- */
.nav-collapse {
  flex: 0 0 auto;
}

.nav-collapse[open] {
  flex: 1 0 100%;
}

/* Keep the hamburger where it was while the list opens below the brand. */
.nav-collapse[open] > .nav-toggle {
  position: absolute;
  inset-block-start: var(--ndaal-space-2);
  inset-inline-end: var(--ndaal-space-4);
}

.nav-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--ndaal-space-1);
  padding-block: var(--ndaal-space-2);
}

.spacer {
  display: none;
}

/* ---- Dropdown menus (language, theme, info) ---- */
.nav-dropdown {
  position: relative;
}

.dropdown-menu {
  z-index: var(--ndaal-z-overlay);
  min-inline-size: 12rem;
  margin-block-start: var(--ndaal-space-1);
  padding-block: var(--ndaal-space-1);
  border: 1px solid var(--ndaal-border-interactive);
  border-radius: var(--ndaal-radius-md);
  background: var(--ndaal-surface-raised);
  box-shadow: var(--ndaal-shadow-md);
  color: var(--ndaal-text-primary);
}

.lang-menu {
  max-block-size: 70dvb;
  overflow: auto;
}

.menu-link {
  display: flex;
  align-items: center;
  min-block-size: var(--ndaal-target-min);
  padding-inline: var(--ndaal-space-4);
  color: var(--ndaal-text-primary);
  text-decoration: none;
}

.menu-link:hover {
  background: var(--csaf-row-hover);
}

.menu-link[aria-current='true'],
.menu-link[aria-current='page'] {
  border-inline-start: 4px solid var(--ndaal-primary);
  font-weight: 700;
}

.dropdown-divider {
  margin-block: var(--ndaal-space-1);
  border: 0;
  border-block-start: 1px solid var(--ndaal-border-decorative);
}

/* Theme chooser: a real form that works without JavaScript. */
.theme-form {
  margin: 0;
  padding: var(--ndaal-space-2) var(--ndaal-space-4);
}

.theme-fieldset {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.theme-legend {
  padding: 0;
  font-size: var(--ndaal-text-sm);
}

/* A checkbox or radio keeps a 24 px box; its row is the 44 px target. */
.check-row {
  display: flex;
  align-items: center;
  gap: var(--ndaal-space-3);
  min-block-size: var(--ndaal-target-min);
  margin: 0;
  font-weight: 400;
}

@media (width < 64rem) {
  /* Narrow screens: menus open inline, so nothing runs past 320 px. */
  .dropdown-menu {
    position: static;
    box-shadow: none;
  }
}

@media (width >= 64rem) {
  /* Desktop: dissolve the wrappers so the controls rejoin one row.
   * ::details-content is required: current browsers keep a closed
   * <details> content hidden through it, and display: contents on the
   * element alone does not lift that (the 1.5.23 / 1.5.24 defect). */
  .nav-collapse,
  .nav-group {
    display: contents;
  }

  .nav-collapse::details-content {
    display: contents;
    content-visibility: visible;
  }

  .nav-toggle {
    display: none;
  }

  .nav-group .spacer {
    display: block;
    flex: 1;
  }

  .dropdown-menu {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 0;
  }

  .dropdown-menu-end {
    inset-inline: auto 0;
  }

  /* Languages in columns of ten (49 entries -> 10/10/10/10/9). */
  .lang-menu {
    display: grid;
    grid-auto-columns: max-content;
    grid-auto-flow: column;
    grid-template-rows: repeat(10, auto);
    max-block-size: none;
    overflow: visible;
    padding-inline: var(--ndaal-space-1);
  }
}

/* ---- Page frame ---- */
.page {
  flex: 1 0 auto;
  inline-size: 100%;
  max-inline-size: var(--ndaal-container);
  margin-inline: auto;
  padding: var(--ndaal-space-6) var(--ndaal-space-4);
}

@media (width >= 64rem) {
  .page {
    padding-inline: var(--ndaal-space-8);
  }
}

.site-footer {
  padding: var(--ndaal-space-6) var(--ndaal-space-4);
  color: var(--ndaal-text-secondary);
  font-size: var(--ndaal-text-sm);
  text-align: center;
}

/* ---- Page heading: icon, title and an actions group ---- */
.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ndaal-space-3) var(--ndaal-space-4);
  margin-block-end: var(--ndaal-space-4);
}

.page-title {
  display: flex;
  align-items: center;
  gap: var(--ndaal-space-3);
  margin: 0;
}

.page-title .icon {
  color: var(--ndaal-primary);
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ndaal-space-2);
}

/* ---- Cards and statistics ---- */
.card {
  margin-block-end: var(--ndaal-space-6);
  padding: var(--ndaal-space-6);
  border: 1px solid var(--ndaal-border-decorative);
  border-radius: var(--ndaal-radius-md);
  background: var(--ndaal-surface-raised);
  box-shadow: var(--ndaal-shadow-sm);
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--ndaal-space-4);
}

.stat {
  text-align: center;
}

.number {
  color: var(--ndaal-primary);
  font-size: var(--ndaal-text-3xl);
  font-weight: 700;
  line-height: var(--ndaal-leading-tight);
}

.label {
  margin-block-start: var(--ndaal-space-1);
  color: var(--ndaal-text-secondary);
  font-size: var(--ndaal-text-sm);
}

.muted {
  color: var(--ndaal-text-secondary);
  font-size: var(--ndaal-text-sm);
}

/* Identifiers and timestamps: the mono face, never broken mid-token. Tables
 * that hold them sit in a focusable .table-scroll region, so a narrow screen
 * scrolls the table instead of the page (WCAG 1.4.10 allows this for data). */
.mono {
  font-family: var(--ndaal-font-mono);
  font-size: var(--ndaal-text-sm);
  hyphens: none;
  white-space: nowrap;
}

/* ---- Info section sub-navigation: a labelled list of 44 px links ---- */
.subnav {
  padding: var(--ndaal-space-2) var(--ndaal-space-4);
}

.subnav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--ndaal-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.subnav-link {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--ndaal-target-min);
  padding-inline: var(--ndaal-space-2);
}

/* ---- Wide tables scroll inside their own focusable region (1.4.10 allows
 * this for two-dimensional data). The region is keyboard-focusable and named
 * by the page heading, so the scroll is operable without a pointer. ---- */
.table-scroll {
  max-inline-size: 100%;
  overflow: auto;
}

/* ---- Forms: one column on narrow screens, no media query needed ---- */
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--ndaal-space-4);
  margin-block-end: var(--ndaal-space-4);
}

.form-row.single {
  grid-template-columns: 1fr;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ndaal-space-2);
  min-block-size: var(--ndaal-target-min);
  min-inline-size: var(--ndaal-target-min);
  padding-inline: var(--ndaal-space-4);
  border: 1px solid transparent;
  border-radius: var(--ndaal-radius-sm);
  background: var(--ndaal-primary);
  color: var(--ndaal-text-on-primary);
  cursor: pointer;
  font-size: var(--ndaal-text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--ndaal-transition-fast);
}

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

.btn.secondary {
  border-color: var(--ndaal-primary);
  background: transparent;
  color: var(--ndaal-primary);
}

.btn.secondary:hover {
  background: var(--ndaal-surface);
}

.btn.danger {
  background: var(--ndaal-danger);
  color: var(--ndaal-bg);
}

.btn.danger:hover {
  background: var(--csaf-danger-hover);
}

.btn[aria-disabled='true'],
.btn:disabled {
  border-color: var(--ndaal-border-interactive);
  background: var(--ndaal-surface);
  color: var(--ndaal-text-disabled);
  cursor: not-allowed;
}

/* ---- Status chips: text is always present, colour is supplementary ---- */
.badge,
.sev-critical,
.sev-high,
.sev-medium,
.sev-low,
.sev-none {
  display: inline-block;
  white-space: nowrap;
  padding: 2px var(--ndaal-space-2);
  border: 1px solid currentcolor;
  border-radius: var(--ndaal-radius-sm);
  font-size: var(--ndaal-text-micro);
  font-weight: 600;
  line-height: 1.4;
}

.badge-create,
.sev-low,
.flash.success {
  background: var(--ndaal-status-ok-bg);
  color: var(--ndaal-status-ok-fg);
}

.badge-update,
.sev-high {
  background: var(--ndaal-status-warn-bg);
  color: var(--ndaal-status-warn-fg);
}

.badge-delete,
.sev-critical,
.flash.error {
  background: var(--ndaal-status-crit-bg);
  color: var(--ndaal-status-crit-fg);
}

.badge-import,
.flash.info {
  background: var(--ndaal-status-info-bg);
  color: var(--ndaal-status-info-fg);
}

.badge-export,
.sev-none {
  background: var(--ndaal-status-neutral-bg);
  color: var(--ndaal-status-neutral-fg);
}

.sev-medium {
  background: var(--ndaal-status-med-bg);
  color: var(--ndaal-status-med-fg);
}

.flash {
  position: relative;
  margin-block-end: var(--ndaal-space-4);
  padding: var(--ndaal-space-3) var(--ndaal-space-4);
  padding-inline-start: calc(var(--ndaal-space-4) + 1.5rem);
  border: 1px solid currentcolor;
  border-inline-start-width: 6px;
  border-radius: var(--ndaal-radius-sm);
}

/* The status icon sits in the start gutter; the word for screen readers is
 * .sr-only, so neither colour nor the icon is the only signal. */
.flash > .icon {
  position: absolute;
  inset-block-start: calc(var(--ndaal-space-3) + 0.2em);
  inset-inline-start: var(--ndaal-space-3);
}

/* ---- TLP 2.0 colour coding (https://www.first.org/tlp/) ---- */
.tlp-select {
  border-color: var(--ndaal-border-interactive);
  font-weight: 600;
}

.tlp-select.tlp-red {
  background: var(--csaf-tlp-red-bg);
  color: var(--csaf-tlp-fg);
}

.tlp-select.tlp-amber,
.tlp-select.tlp-amber-strict {
  background: var(--csaf-tlp-amber-bg);
  color: var(--csaf-tlp-fg);
}

.tlp-select.tlp-green {
  background: var(--csaf-tlp-green-bg);
  color: var(--csaf-tlp-fg);
}

.tlp-select.tlp-clear {
  background: var(--csaf-tlp-clear-bg);
  color: var(--csaf-tlp-fg);
}

/* ---- Live region: present in the DOM at load, visible to assistive tech ---- */
.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- Confirmation dialog (native modal <dialog>, opened by csaf-ui.js) ---- */
.confirm-dialog {
  inline-size: min(28rem, calc(100% - 2rem));
  padding: var(--ndaal-space-6);
  border: 1px solid var(--ndaal-border-interactive);
  border-radius: var(--ndaal-radius-lg);
  background: var(--ndaal-surface-raised);
  box-shadow: var(--ndaal-shadow-md);
  color: var(--ndaal-text-primary);
}

.confirm-dialog::backdrop {
  background: var(--ndaal-backdrop);
}

.confirm-form {
  margin: 0;
}

.confirm-message {
  margin-block: 0 var(--ndaal-space-6);
  font-size: var(--ndaal-text-lg);
  font-weight: 600;
}

.confirm-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--ndaal-space-3);
}

/* ---- Utilities (replace inline styles; the project forbids style=) ---- */
.u-weight-normal {
  font-weight: 400;
}

.u-ml-sm {
  margin-inline-start: var(--ndaal-space-2);
}

.u-weight-normal-ml {
  margin-inline-start: var(--ndaal-space-4);
  font-weight: 400;
}

.u-center {
  text-align: center;
}

.u-row-between {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ndaal-space-4);
}

.u-pre-wrap {
  margin: 0;
  white-space: pre-wrap;
}

.u-pad-sm {
  padding: var(--ndaal-space-3) var(--ndaal-space-4);
}

.u-scroll-box {
  max-block-size: 25rem;
  padding: var(--ndaal-space-4);
  overflow: auto;
  border: 1px solid var(--ndaal-border-decorative);
  border-radius: var(--ndaal-radius-sm);
  background: var(--ndaal-surface);
}

.u-my-lg {
  margin-block: var(--ndaal-space-6);
}

.u-m-0 {
  margin: 0;
}

.u-row-gap {
  display: flex;
  align-items: center;
  gap: var(--ndaal-space-4);
  margin-block-start: var(--ndaal-space-4);
}

.u-mt-lg {
  margin-block-start: var(--ndaal-space-6);
}

.u-mt-xs {
  margin-block-start: var(--ndaal-space-1);
}

.u-mb-sm {
  margin-block-end: var(--ndaal-space-3);
}

.u-inline-ml {
  display: inline;
  margin-inline-start: var(--ndaal-space-2);
}

/* ---- Forced colours: borders carry what background colour cannot ---- */
@media (forced-colors: active) {
  .btn,
  .nav-link,
  .nav-toggle,
  .menu-summary {
    border: 1px solid ButtonText;
  }

  .nav-link[aria-current='page'] {
    text-decoration: underline;
  }
}

/* ---- Print: drop navigation chrome ---- */
@media print {
  .skip-link,
  .site-header,
  .site-footer {
    display: none;
  }
}