/* Gemeinsame Komponentenregeln – bewusst zuletzt geladen. */
html,
body {
  font-family: var(--font-app);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background: var(--color-page);
}

.topbar {
  min-height: var(--topbar-min-height) !important;
  padding: var(--topbar-padding-y) var(--topbar-padding-x) !important;
}

.content {
  padding: var(--page-padding-top) var(--page-padding-x) var(--page-padding-bottom) !important;
}

.card,
.planner-shell {
  background: var(--color-surface);
  border-color: var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.card.pad {
  padding: var(--card-padding);
}

.btn,
.pill,
.menu-btn {
  border-radius: var(--radius-control);
}

.v12-top-nav a,
.v12-top-nav button {
  border-radius: var(--radius-navigation);
}

.btn.primary {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}

.field input,
.field select,
.field textarea {
  border-color: var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
}

.search input {
  border-color: var(--color-border);
  border-radius: var(--radius-search);
  background: var(--color-surface);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.modal {
  border-radius: var(--radius-modal);
  box-shadow: var(--shadow-modal);
}

.badge,
.source-pill,
.v20-role-badge {
  border-radius: var(--radius-pill);
}

.table th,
.table td {
  padding: var(--table-padding-y) var(--table-padding-x);
  border-color: var(--color-border);
}

/* Suchfelder sind appweit als eigenständige Bedienelemente erkennbar. */
input[type="search"],
.search input {
  min-height: var(--search-min-height) !important;
  padding: 10px 38px 10px 40px !important;
  border: 2px solid var(--search-border) !important;
  border-radius: var(--radius-search) !important;
  outline: 0 !important;
  color: var(--color-text) !important;
  background-color: var(--search-surface) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235b6570' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 13px center !important;
  background-size: 18px 18px !important;
  box-shadow: 0 2px 8px rgba(32, 36, 42, 0.05) !important;
  font-family: var(--font-app) !important;
  font-weight: 650 !important;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease !important;
}

input[type="search"]:hover,
.search input:hover {
  border-color: #eba977 !important;
  background-color: var(--color-surface) !important;
}

input[type="search"]:focus,
.search input:focus {
  border-color: var(--brand-primary) !important;
  background-color: var(--color-surface) !important;
  box-shadow: 0 0 0 4px rgba(244, 123, 32, 0.14) !important;
}

input[type="search"]::placeholder,
.search input::placeholder {
  color: #727b86;
  font-weight: 550;
  opacity: 1;
}

@media (max-width: 720px) {
  :root {
    --page-padding-top: 12px;
    --page-padding-x: 12px;
    --page-padding-bottom: 12px;
  }
}