/*
 * base.css — die Brücke zwischen den Rahmenmodulen und Tabler.
 *
 * modules/admin, modules/tables, modules/forms und modules/dashboard
 * rendern in das aktive Theme hinein und bringen rund drei Dutzend
 * eigene Klassen mit (AGENTS.md, Fallstrick 12). Dieses Stylesheet gibt
 * ihnen ein Tabler-Aussehen.
 *
 * Es ist ausdruecklich eine Bruecke, kein zweites Designsystem: Es
 * definiert keine eigenen Farben, sondern benutzt durchweg die
 * Tabler-Variablen (--tblr-*). Damit stimmt Dark Mode von selbst, und
 * ein Projekt, das --tblr-primary aendert, aendert alles mit.
 *
 * Die Rahmenmodule geben ihr Markup inzwischen zusaetzlich mit echten
 * Tabler-Klassen aus. Dieser Teil hier bleibt trotzdem: Er traegt jedes
 * Modul, das noch nicht umgestellt ist, und verhindert, dass eine
 * einzelne Seite wie rohes Entwickler-HTML aussieht.
 */

/* ---------- Seitenkopf ---------- */

/*
 * .page-heading kommt in 23 Fachmodulen vor, fast immer als Block:
 *   <header class="page-heading"><div><h1>..</h1><p>..</p></div></header>
 * Es bekommt hier das Aussehen von Tablers .page-header, damit diese
 * Seiten stimmen, ohne dass 23 Module angefasst werden muessen.
 */
.page-heading {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
  margin: 0 0 1.25rem;
}

.page-heading > div:first-child { flex: 1 1 auto; min-width: 0; }

.page-heading h1,
.page-heading h2 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
  color: var(--tblr-body-color);
}

.page-heading p {
  margin: .125rem 0 0;
  font-size: .875rem;
  color: var(--tblr-secondary);
}

/* ---------- Tabellen (modules/tables) ---------- */

.table-wrap {
  background: var(--tblr-card-bg, var(--tblr-bg-surface));
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  overflow: hidden;
}

.table-wrap > table,
table.table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  color: var(--tblr-body-color);
}

.table-wrap th,
table.table th {
  padding: .75rem 1rem;
  text-align: left;
  font-size: .765625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tblr-secondary);
  background: var(--tblr-bg-surface-secondary);
  border-bottom: 1px solid var(--tblr-border-color);
  white-space: nowrap;
}

.table-wrap td,
table.table td {
  padding: .75rem 1rem;
  border-top: 1px solid var(--tblr-border-color-light, var(--tblr-border-color));
  vertical-align: middle;
}

.table-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: flex-end;
  padding: 1rem;
  border-bottom: 1px solid var(--tblr-border-color);
  background: var(--tblr-bg-surface-secondary);
}

.table-filters input,
.table-filters select {
  min-height: 2.25rem;
  padding: .3rem .6rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  background: var(--tblr-bg-forms, var(--tblr-bg-surface));
  color: var(--tblr-body-color);
}

.table-empty,
.empty-state {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--tblr-secondary);
}

.table-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  align-items: center;
  padding: .75rem 1rem;
  border-top: 1px solid var(--tblr-border-color);
}

.table-pagination a,
.table-pagination span {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: .25rem .6rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  text-decoration: none;
  color: var(--tblr-body-color);
}

.table-pagination a:hover { background: var(--tblr-bg-surface-secondary); }

.table-pagination-status {
  margin-left: auto;
  border: 0;
  color: var(--tblr-secondary);
  font-size: .875rem;
}

.table-edit,
.admin-new {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .75rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  text-decoration: none;
  color: var(--tblr-body-color);
  background: var(--tblr-bg-surface);
}

.admin-new {
  border-color: var(--tblr-primary);
  background: var(--tblr-primary);
  color: #fff;
}

.table-edit:hover { background: var(--tblr-bg-surface-secondary); }
.admin-new:hover { filter: brightness(.94); color: #fff; }

/* ---------- Formulare (modules/forms) ---------- */

.form-field { margin-bottom: 1rem; }

.form-field > label {
  display: block;
  margin-bottom: .25rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--tblr-body-color);
}

.form-field input:not([type=checkbox]):not([type=radio]),
.form-field select,
.form-field textarea {
  display: block;
  width: 100%;
  min-height: 2.375rem;
  padding: .4375rem .75rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  background: var(--tblr-bg-forms, var(--tblr-bg-surface));
  color: var(--tblr-body-color);
  font: inherit;
}

.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  outline: 0;
  border-color: var(--tblr-primary);
  box-shadow: 0 0 0 .25rem rgba(var(--tblr-primary-rgb), .25);
}

.form-help {
  display: block;
  margin-top: .25rem;
  font-size: .75rem;
  color: var(--tblr-secondary);
}

.form-error,
.error {
  display: block;
  margin-top: .25rem;
  font-size: .8125rem;
  color: var(--tblr-danger);
}

.form-action { margin-top: 1.25rem; }

.form-action button,
.form-action input[type=submit],
.logout-form button {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .4375rem 1rem;
  border: 1px solid var(--tblr-primary);
  border-radius: var(--tblr-border-radius);
  background: var(--tblr-primary);
  color: #fff;
  font: inherit;
  cursor: pointer;
}

.form-action button:hover { filter: brightness(.94); }

/* ---------- Karten, Kennzahlen, Dashboard ---------- */

.detail-card,
.dashboard-widget,
.metric-card,
.admin-dashboard-grid > * {
  padding: 1rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  background: var(--tblr-card-bg, var(--tblr-bg-surface));
}

.metric-grid,
.admin-dashboard-grid,
.dashboard-widgets {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.metric-card { display: flex; flex-direction: column; gap: .25rem; }
.metric-green { color: var(--tblr-success); }

.dashboard-section { margin-bottom: 1.5rem; }

/* ---------- Hinweise ---------- */

.hinweis {
  padding: .75rem 1rem;
  border: 1px solid var(--tblr-border-color);
  border-left: .25rem solid var(--tblr-primary);
  border-radius: var(--tblr-border-radius);
  background: var(--tblr-bg-surface-secondary);
  color: var(--tblr-body-color);
}

.admin-delete-confirm {
  border-left-color: var(--tblr-danger);
}

.admin-delete button {
  border-color: var(--tblr-danger);
  background: transparent;
  color: var(--tblr-danger);
  padding: .35rem .75rem;
  border-radius: var(--tblr-border-radius);
  border-width: 1px;
  border-style: solid;
  font: inherit;
  cursor: pointer;
}

.admin-delete button:hover { background: var(--tblr-danger); color: #fff; }

.admin-actions,
.admin-actions-table { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* ---------- Rich-Text-Editor (modules/forms) ---------- */

.rich-text-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  padding: .375rem;
  border: 1px solid var(--tblr-border-color);
  border-bottom: 0;
  border-radius: var(--tblr-border-radius) var(--tblr-border-radius) 0 0;
  background: var(--tblr-bg-surface-secondary);
}

.rich-text-editor,
.rich-text-source {
  min-height: 12rem;
  padding: .75rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: 0 0 var(--tblr-border-radius) var(--tblr-border-radius);
  background: var(--tblr-bg-forms, var(--tblr-bg-surface));
  color: var(--tblr-body-color);
}

/* ---------- Inhalt allgemein ---------- */

.page-body main > h1:first-child,
.page-body main > h2:first-child { margin-top: 0; }

/* Ein Bild sprengt auf dem Telefon sonst die Seite. */
.page-body img { max-width: 100%; height: auto; }

/* Eine Tabelle, die niemand in eine .table-responsive gesetzt hat,
   soll trotzdem nicht den Seitenumbruch erzwingen. */
.page-body > .container-xl { overflow-x: auto; }


/* ---------- Zusammenspiel mit dem Tabler-Markup ---------- */

/*
 * Die Rahmenmodule geben ihr Markup inzwischen zusaetzlich mit echten
 * Tabler-Klassen aus. Wo eine Bruecken-Klasse jetzt in einer .card
 * steckt, wuerde ihr eigener Rahmen den der Karte verdoppeln.
 */
.card .table-wrap,
.card .table-filters {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.card .table-filters { padding: 0; }

.card > .detail-card,
.card.detail-card,
.card.metric-card,
.card.dashboard-widget {
  padding: 0;
}

.card .table-pagination,
.card-footer .table-pagination {
  padding: 0;
  border-top: 0;
}

.card-footer .table-pagination a,
.card-footer .table-pagination span {
  border: 0;
}

/* Wo die Tabler-Gitterklassen schon da sind, gilt das Gitter und nicht
   die Bruecke — sonst kaempfen grid und row gegeneinander. */
.metric-grid.row,
.admin-dashboard-grid.row,
.dashboard-widgets.row {
  display: flex;
}

/* Ein Button, der schon ein Tabler-Button ist, braucht die
   Bruecken-Gestaltung nicht. */
.form-action .btn,
.admin-delete .btn,
.logout-form .btn {
  border: 1px solid transparent;
}