/*
 * 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);
}

/*
 * Namenskonflikt: Tabler kennt .form-help selbst — als rundes
 * Fragezeichen-Abzeichen von 1.125rem (inline-flex, feste Breite und
 * Hoehe, graue Fuellung, Pillenform). modules/forms benutzt denselben
 * Namen seit jeher fuer den Hilfetext unter einem Feld.
 *
 * Ohne die Ruecksetzung hier wird aus einem ganzen Satz ein 18x18
 * grosses graues Kaestchen mit abgeschnittenem Text. Gesehen im
 * Verwaltungsbereich der VQS-Website beim Anlegen eines Kontos.
 *
 * Deshalb: alles zuruecksetzen, was Tablers Abzeichen setzt.
 */
p.form-help,
.form-field > .form-help {
  display: block;
  width: auto;
  height: auto;
  margin-top: .25rem;
  font-size: .75rem;
  font-weight: 400;
  text-align: left;
  color: var(--tblr-secondary);
  cursor: auto;
  user-select: auto;
  background: transparent;
  border-radius: 0;
}

p.form-help:hover,
p.form-help[aria-describedby] {
  color: var(--tblr-secondary);
  background: transparent;
}

.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 ---------- */

/*
 * :not(.row) ist wichtig: Seit die Rahmenmodule Tabler-Markup ausgeben,
 * ist .admin-dashboard-grid ein .row und seine Kinder sind Spalten.
 * Ohne die Einschraenkung bekaeme jede Spalte zusaetzlich zur Karte
 * einen eigenen Rahmen — ein Kasten im Kasten.
 */
.detail-card,
.dashboard-widget,
.metric-card,
.admin-dashboard-grid:not(.row) > * {
  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;
}


/* ---------- Ohne JavaScript ---------- */

/*
 * Bootstraps .collapse ist display:none, bis JavaScript es aufklappt.
 * Ein Besucher ohne JavaScript haette damit ueberhaupt keine
 * Navigation — auf einer oeffentlichen Website ein Ausschluss, kein
 * Schoenheitsfehler. Das Layout setzt deshalb frueh die Marke has-js;
 * fehlt sie, steht das Menue offen und der Umschalter verschwindet.
 *
 * Gefunden im Browsertest von themes/vqs (ohne JavaScript, 390px).
 */
html:not(.has-js) .navbar-collapse {
  display: block !important;
}

html:not(.has-js) .navbar-toggler {
  display: none !important;
}

/* ---------- Mailsystem ---------- */

.mail-client {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  min-height: 38rem;
  overflow: hidden;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  background: var(--tblr-bg-surface);
}

.mail-sidebar {
  padding: 1rem .75rem;
  border-right: 1px solid var(--tblr-border-color);
  background: var(--tblr-bg-surface-secondary);
}

.mail-sidebar-title, .mail-client-header, .mail-message-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.mail-sidebar-title { padding: .25rem .5rem 1rem; }
.mail-folder-group { margin-bottom: .75rem; }
.mail-folder-mailbox { padding: .35rem .5rem; color: var(--tblr-secondary); font-size: .75rem; font-weight: 600; text-transform: uppercase; }
.mail-folder { display: flex; align-items: center; gap: .5rem; padding: .45rem .6rem; border-radius: var(--tblr-border-radius); color: var(--tblr-body-color); text-decoration: none; }
.mail-folder:hover, .mail-folder-all { background: var(--tblr-bg-surface); color: var(--tblr-primary); }
.mail-folder-all { margin-top: 1rem; font-weight: 600; }
.mail-inbox { min-width: 0; }
.mail-client-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--tblr-border-color); }
.mail-client-header h1 { margin: 0; }
.mail-client-header p { margin: .2rem 0 0; }
.mail-list { display: flex; flex-direction: column; }
.mail-row { display: flex; align-items: center; gap: .75rem; min-width: 0; padding: .85rem 1.25rem; border-bottom: 1px solid var(--tblr-border-color-light, var(--tblr-border-color)); color: var(--tblr-body-color); text-decoration: none; }
.mail-row:hover, .mail-row-unread { background: var(--tblr-bg-surface-secondary); }
.mail-row-main { display: flex; flex: 1 1 auto; min-width: 0; flex-direction: column; gap: .15rem; }
.mail-row-subject, .mail-row-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-row-subject { color: var(--tblr-body-color); }
.mail-row-preview, .mail-row-meta { color: var(--tblr-secondary); font-size: .8125rem; }
.mail-row-unread .mail-row-subject, .mail-row-unread .mail-row-main > strong { font-weight: 700; }
.mail-row-meta { display: flex; align-items: center; gap: .5rem; white-space: nowrap; }
.mail-thread { padding: 0; }
.mail-message { padding: 1.25rem; border-bottom: 1px solid var(--tblr-border-color); }
.mail-message-header { margin-bottom: 1rem; }
.mail-body { overflow-x: auto; line-height: 1.55; color: var(--tblr-body-color); }
.mail-body table { max-width: 100%; border-collapse: collapse; }
.mail-body td, .mail-body th { padding: .35rem .5rem; }
.mail-body img { max-width: 100%; height: auto; }
.mail-draft-preview { max-height: 20rem; overflow: auto; padding: .75rem; border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius); white-space: pre-wrap; }

@media (max-width: 768px) {
  .mail-client { grid-template-columns: 1fr; }
  .mail-sidebar { border-right: 0; border-bottom: 1px solid var(--tblr-border-color); }
  .mail-folder-group { display: inline-block; margin: 0 .5rem .5rem 0; vertical-align: top; }
}