/**
 * Anzeigedichte — skaliert Abstände, Controls und Tabellen (data-density auf html).
 * Unabhängig von data-text-size (Schriftgröße).
 */

html[data-density="compact"] {
  --rail-w: 172px;
}

html[data-density="airy"] {
  --rail-w: 204px;
}

/* —— Navigation —— */
html[data-density] .app-rail-top {
  gap: calc(0.35rem * var(--space-scale));
  padding: calc(0.45rem * var(--space-scale)) calc(0.5rem * var(--space-scale));
}

html[data-density] .app-rail-link {
  gap: calc(0.45rem * var(--space-scale));
  padding: calc(0.38rem * var(--space-scale)) calc(0.55rem * var(--space-scale));
  margin: 0 calc(0.25rem * var(--space-scale));
}

html[data-density] .app-rail-footer {
  padding: calc(0.25rem * var(--space-scale)) 0;
}

html[data-density] .app-rail-section {
  margin: calc(0.5rem * var(--space-scale)) calc(0.65rem * var(--space-scale)) calc(0.15rem * var(--space-scale));
}

html[data-density] .app-rail-icon {
  flex: 0 0 calc(24px * var(--control-scale));
  width: calc(24px * var(--control-scale));
  height: calc(24px * var(--control-scale));
}

html[data-density] .app-rail-account {
  padding: calc(0.45rem * var(--space-scale)) calc(0.5rem * var(--space-scale));
}

html[data-density] .app-mobile-menu {
  width: calc(44px * var(--control-scale));
  height: calc(44px * var(--control-scale));
}

/* —— Hauptinhalt —— */
html[data-density] .page-head h1 {
  margin-bottom: calc(0.35rem * var(--space-scale));
}

html[data-density] .page-lead {
  margin-bottom: calc(1.25rem * var(--space-scale));
}

html[data-density] .product-grid {
  gap: calc(1rem * var(--space-scale));
}

html[data-density] .product-card {
  padding: calc(1.25rem * var(--space-scale));
}

html[data-density] .product-facts {
  gap: calc(0.75rem * var(--space-scale));
}

html[data-density] .inline-form {
  gap: calc(0.5rem * var(--space-scale));
  margin-bottom: calc(1rem * var(--space-scale));
}

html[data-density] .inline-form input,
html[data-density] .login-form input:not(.pin-box) {
  padding: calc(0.55rem * var(--space-scale)) calc(0.65rem * var(--space-scale));
}

html[data-density] .price-editor {
  margin-top: calc(2rem * var(--space-scale));
  padding: calc(1rem * var(--space-scale));
}

html[data-density] .price-row {
  gap: calc(0.5rem * var(--space-scale));
  margin-bottom: calc(0.5rem * var(--space-scale));
}

/* —— Buttons —— */
html[data-density] .btn-primary,
html[data-density] .btn-ghost {
  padding: calc(0.55rem * var(--space-scale) * var(--control-scale))
    calc(1rem * var(--space-scale) * var(--control-scale));
  min-height: calc(2.25rem * var(--control-scale));
}

html[data-density] .btn-sm {
  padding: calc(0.35rem * var(--space-scale)) calc(0.65rem * var(--space-scale));
  min-height: calc(1.85rem * var(--control-scale));
}

html[data-density] a.hubtisch-detail-login {
  margin-top: calc(0.75rem * var(--space-scale));
  padding: calc(0.55rem * var(--space-scale) * var(--control-scale))
    calc(1rem * var(--space-scale) * var(--control-scale));
  min-height: calc(2.25rem * var(--control-scale));
}

html[data-density] .page-top-nav__back {
  width: calc(2.75rem * var(--control-scale));
  height: calc(2.75rem * var(--control-scale));
  min-height: calc(2.25rem * var(--control-scale));
}

html[data-density] .page-top-nav__back svg {
  width: calc(1.5rem * var(--control-scale));
  height: calc(1.5rem * var(--control-scale));
}

html[data-density] .login-card .btn-primary,
html[data-density] .login-modal__card .btn-primary,
html[data-density] .login-back.btn-ghost {
  padding: calc(0.55rem * var(--space-scale) * var(--control-scale))
    calc(1rem * var(--space-scale) * var(--control-scale));
  min-height: calc(2.25rem * var(--control-scale));
}

html[data-density] .app-rail-logout {
  padding: calc(0.45rem * var(--space-scale));
}

/* —— Tabellen (nur Abstände — Schrift über text-size.css) —— */
html[data-density] .data-table thead th,
html[data-density] .data-table tbody td {
  padding: calc(0.45rem * var(--space-scale)) calc(0.5rem * var(--space-scale));
}

html[data-density] .cell-badge {
  padding: calc(0.15rem * var(--space-scale)) calc(0.5rem * var(--space-scale));
}

html[data-density] .table-wrap--sticky-head {
  max-height: min(calc(70vh * var(--space-scale)), 720px);
}

/* —— Hubtische —— */
html[data-density] .hubtisch-catalog {
  gap: calc(1rem * var(--space-scale));
}

html[data-density] .hubtisch-field {
  gap: calc(0.4rem * var(--space-scale));
}

html[data-density] .hubtisch-field-grid--filters,
html[data-density] .hubtisch-field-grid--bounds {
  gap: calc(0.85rem * var(--space-scale)) calc(0.75rem * var(--space-scale));
}

html[data-density] .hubtisch-field input,
html[data-density] .hubtisch-field select {
  padding: calc(0.5rem * var(--space-scale)) calc(0.6rem * var(--space-scale));
  min-height: calc(2.5rem * var(--control-scale));
}

/* —— Assistent —— */
html[data-density] .assistant-shell {
  height: min(calc(720px * var(--space-scale)), calc(100dvh - 2rem));
}

html[data-density] .assistant-header {
  gap: calc(0.65rem * var(--space-scale));
  padding: calc(0.75rem * var(--space-scale)) calc(1rem * var(--space-scale));
}

html[data-density] .assistant-thread {
  padding: calc(1rem * var(--space-scale));
}

html[data-density] .assistant-messages {
  gap: calc(0.75rem * var(--space-scale));
}

html[data-density] .msg-bubble {
  padding: calc(0.65rem * var(--space-scale)) calc(0.85rem * var(--space-scale));
}

html[data-density] .msg-actions {
  gap: calc(0.35rem * var(--space-scale));
  margin-top: calc(0.5rem * var(--space-scale));
}

html[data-density] .msg-actions button {
  padding: calc(0.4rem * var(--space-scale)) calc(0.75rem * var(--space-scale));
  min-height: calc(2rem * var(--control-scale));
}

html[data-density] .msg-inline input,
html[data-density] .msg-inline select,
html[data-density] .msg-inline button {
  padding: calc(0.45rem * var(--space-scale)) calc(0.55rem * var(--space-scale));
}

html[data-density] .assistant-restart {
  width: calc(32px * var(--control-scale));
  height: calc(32px * var(--control-scale));
}

/* —— Darstellungs-Panel —— */
html[data-density] .display-option {
  min-height: calc(58px * var(--control-scale));
  padding: calc(6px * var(--space-scale)) calc(4px * var(--space-scale));
  gap: calc(4px * var(--space-scale));
}

html[data-density] .display-settings-block {
  margin-bottom: calc(0.85rem * var(--space-scale));
  padding-bottom: calc(0.75rem * var(--space-scale));
}

html[data-density] .display-segmented {
  gap: calc(6px * var(--space-scale));
}

/* Eingeklappte Rail: festes Raster (Anzeigedichte nicht anwenden) */
@media (min-width: 769px) {
  body.rail-collapsed .app-rail-nav .app-rail-link,
  body.rail-collapsed .app-rail-footer .app-rail-link,
  body.rail-collapsed .app-rail-account-btn {
    margin: 0;
    padding: 0;
    gap: 0;
    width: 40px;
    height: 40px;
  }

  body.rail-collapsed .app-rail-nav .app-rail-link .app-rail-icon,
  body.rail-collapsed .app-rail-footer .app-rail-link .app-rail-icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    font-size: 10px;
  }

  body.rail-collapsed .app-rail-top,
  body.rail-collapsed .app-rail-footer,
  body.rail-collapsed .app-rail-account {
    padding-left: 0;
    padding-right: 0;
  }
}