/* TOMORIS Managed GAL, own layout and components.
   Rules: only TOMORIS.Design tokens (no hex colors, no copied tokens, no own font-face or
   font family, no .tm-* rules). Own classes carry the prefix mg-. TOMORIS.Design has no
   navigation or form components, so those are built here from tokens. */

*,
*::before,
*::after { box-sizing: border-box; }

html { font-family: var(--tm-font); }

body.mg-body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--tm-bg);
  color: var(--tm-text-1);
  font-size: var(--tm-size-body);
  line-height: 1.5;
}

.mg-skip {
  position: absolute;
  left: -10000px;
  top: 0;
}
.mg-skip:focus {
  left: 16px;
  top: 16px;
  z-index: 10;
  padding: 8px 12px;
  background: var(--tm-surface);
  color: var(--tm-accent-text);
  border: 1px solid var(--tm-border-elevated);
  border-radius: var(--tm-radius-button);
}

/* ---------- Header and navigation ---------- */
.mg-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  padding: 12px 24px;
  background: var(--tm-surface);
  border-bottom: 1px solid var(--tm-border);
}

.mg-header__brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-width: 0;
}

.mg-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--tm-text-1);
  text-decoration: none;
}

.mg-brand__product {
  font-size: var(--tm-size-h3);
  font-weight: 700;
}

.mg-logo { display: block; height: 32px; width: auto; }
.mg-logo--dark { display: none; }
:root[data-theme="dunkel"] .mg-logo--light { display: none; }
:root[data-theme="dunkel"] .mg-logo--dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .mg-logo--light { display: none; }
  :root:not([data-theme]) .mg-logo--dark { display: block; }
}

.mg-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1 1 auto;
}

.mg-nav__link {
  padding: 6px 12px;
  border-radius: var(--tm-radius-pill);
  color: var(--tm-text-2);
  text-decoration: none;
  font-weight: 600;
  transition: background var(--tm-dur-fast) var(--tm-ease), color var(--tm-dur-fast) var(--tm-ease);
}
.mg-nav__link:hover { background: var(--tm-hover); color: var(--tm-text-1); }
.mg-nav__link[aria-current="page"] { background: var(--tm-accent-soft); color: var(--tm-accent-soft-ink); }
.mg-nav__link:focus-visible {
  outline: var(--tm-focus-width) solid var(--tm-accent-text);
  outline-offset: var(--tm-focus-offset);
}

.mg-header__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-inline-start: auto;
}

.mg-user { color: var(--tm-text-3); font-size: var(--tm-size-label); }
.mg-inline-form { margin: 0; }
.mg-cell-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mg-license-text { font-family: var(--tm-font-mono); font-size: var(--tm-size-mono); width: 100%; }

/* ---------- Content ---------- */
.mg-main {
  flex: 1 1 auto;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px 48px;
}

.mg-page-head { margin-bottom: 24px; }
.mg-page-head h1 { margin: 4px 0 8px; font-size: var(--tm-size-h1); overflow-wrap: anywhere; hyphens: auto; }
.mg-page-head p { margin: 0; color: var(--tm-text-2); max-width: 70ch; }

.mg-section { margin-top: 24px; }
.mg-section h2 { font-size: var(--tm-size-h2); margin: 0 0 12px; }

.mg-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

.mg-tile__value {
  display: block;
  font-size: var(--tm-size-h1);
  font-weight: 800;
  color: var(--tm-text-1);
}
.mg-tile__label { color: var(--tm-text-3); font-size: var(--tm-size-label); }

.mg-pad { padding: 20px 24px; }

.mg-hint {
  display: block;
  margin-top: 4px;
  color: var(--tm-text-3);
  font-size: var(--tm-size-label);
}

.mg-table-wrap { overflow-x: auto; padding: 4px 0; }
.mg-table-wrap th,
.mg-table-wrap td { padding: 10px 16px; vertical-align: top; }

.mg-empty,
.mg-notice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  color: var(--tm-text-2);
}

.mg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

/* ---------- Forms (not in TOMORIS.Design, built from tokens) ---------- */
.mg-form { display: grid; gap: 12px; max-width: 520px; }
.mg-choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--tm-border-elevated);
  border-radius: var(--tm-radius-box);
  background: var(--tm-surface-2);
  cursor: pointer;
}
.mg-choice input { margin-top: 4px; accent-color: var(--tm-accent); }
.mg-choice small { display: block; color: var(--tm-text-3); font-family: var(--tm-font-mono); font-size: var(--tm-size-mono); }

/* Price table of a plan with tiers (partial _PriceTiers): one line per tier, also inside a choice label or a table cell. */
.mg-tiers { display: block; margin-top: 4px; }
.mg-tiers small { display: block; color: var(--tm-text-2); font-size: var(--tm-size-label); overflow-wrap: break-word; }
/* In a table the price table keeps a readable width; the table scrolls inside its card instead of breaking words. */
td > .mg-tiers { min-width: 15rem; }
.mg-tiers small:first-child,
.mg-tiers small:last-child { color: var(--tm-text-3); }
.mg-tier-form { display: grid; gap: 12px; }
.mg-tier-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px 12px; }

/* ---------- Footer ---------- */
.mg-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 24px;
  border-top: 1px solid var(--tm-border);
  color: var(--tm-text-3);
  font-size: var(--tm-size-label);
}

@media (max-width: 640px) {
  .mg-header { padding: 12px 16px; }
  .mg-main { padding: 24px 16px 40px; }
  .mg-pad { padding: 16px; }
  .mg-header__tools { margin-inline-start: 0; }
}

/* ---------- Admin portal: forms, messages, filters (Phase 1, built from tokens) ---------- */
.mg-actions--top { margin: 0 0 16px; align-items: center; }
.mg-subhead { font-size: var(--tm-size-h3); margin: 0; }
.mg-message { margin-bottom: 16px; }
.mg-message p { margin: 0; }

.mg-form--wide { max-width: 880px; }
.mg-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 16px;
}
.mg-form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
  margin-top: 12px;
}
.mg-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: 8px;
  min-width: 0;
}
.mg-field { display: grid; gap: 4px; min-width: 0; }
.mg-field--grow { flex: 1 1 260px; }
.mg-label {
  font-size: var(--tm-size-label);
  font-weight: 600;
  color: var(--tm-text-2);
  padding: 0;
}
.mg-input {
  width: 100%;
  min-width: 0;
  padding: 8px 12px;
  font: inherit;
  color: var(--tm-text-1);
  background: var(--tm-field);
  border: 1px solid var(--tm-border-strong);
  border-radius: var(--tm-radius-button);
}
.mg-input:focus-visible {
  outline: var(--tm-focus-width) solid var(--tm-accent-text);
  outline-offset: var(--tm-focus-offset);
}
textarea.mg-input { resize: vertical; min-height: 4.5em; }
.mg-check { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--tm-text-2); }
.mg-check input { accent-color: var(--tm-accent); }

.mg-secret {
  display: block;
  width: 100%;
  padding: 10px 12px;
  font-family: var(--tm-font-mono);
  font-size: var(--tm-size-mono);
  color: var(--tm-text-1);
  background: var(--tm-surface-2);
  border: 1px solid var(--tm-border-elevated);
  border-radius: var(--tm-radius-box);
  overflow-wrap: anywhere;
  user-select: all;
}

.mg-facts {
  display: grid;
  grid-template-columns: minmax(140px, max-content) 1fr;
  gap: 6px 16px;
  margin: 0;
}
.mg-facts dt { color: var(--tm-text-3); font-size: var(--tm-size-label); }
.mg-facts dd { margin: 0; overflow-wrap: anywhere; }

.mg-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.mg-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  color: var(--tm-text-3);
}

@media (max-width: 640px) {
  .mg-facts { grid-template-columns: 1fr; }
  .mg-facts dd { margin-bottom: 6px; }
}

/* ---------- Registration and customer portal (Phase 2, built from tokens) ---------- */
.mg-steps { margin: 0; padding-inline-start: 1.25em; display: grid; gap: 8px; color: var(--tm-text-2); max-width: 70ch; }
.mg-option { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.mg-option p { margin: 0; color: var(--tm-text-2); }
.mg-option--chosen { border-color: var(--tm-accent); box-shadow: 0 0 0 1px var(--tm-accent); }
.mg-wizard {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.mg-wizard li {
  padding: 6px 12px;
  border-radius: var(--tm-radius-pill);
  border: 1px solid var(--tm-border-elevated);
  color: var(--tm-text-3);
  font-size: var(--tm-size-label);
  font-weight: 600;
}
.mg-wizard li[aria-current="step"] { background: var(--tm-accent-soft); color: var(--tm-accent-soft-ink); border-color: transparent; }
.mg-wizard li.mg-wizard__done { color: var(--tm-text-2); }

/* GAL synchronisation (Phase 4): short time input, long hints in history tables wrap instead of widening the table. */
.mg-input--short { max-width: 10rem; }
.mg-cell-text { min-width: 16rem; max-width: 40rem; overflow-wrap: anywhere; }

/* Customer list (SPEC section 22): a status badge stays on one line; the table scrolls sideways in its card instead. */
.mg-nowrap { white-space: nowrap; }
/* Customer list (PR-05): the markers of the column "Zustand" stack; a long pause reason wraps inside a readable width. */
.mg-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.mg-cell-state { min-width: 12rem; max-width: 22rem; }

/* Footer links to the legal pages (customer host only). */
.mg-footer__links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.mg-footer__links a { color: var(--tm-text-2); }
.mg-footer__links a[aria-current="page"] { color: var(--tm-text-1); font-weight: 600; }

/* Legal pages: readable line length, every open clause visibly marked, missing operator data muted. */
.mg-legal { display: grid; gap: 16px; max-width: 880px; }
/* Grid items would otherwise grow to the width of a wide table; the table scrolls inside its card. */
.mg-legal > * { min-width: 0; }
.mg-legal p,
.mg-legal li { max-width: 75ch; overflow-wrap: anywhere; }
.mg-legal ol,
.mg-legal ul { margin: 8px 0 0; padding-inline-start: 1.25em; display: grid; gap: 6px; }
.mg-legal .mg-subhead { margin-bottom: 8px; }
.mg-legal-toc { max-width: 880px; margin-bottom: 16px; }
.mg-legal-toc ol { margin: 8px 0 0; padding-inline-start: 1.25em; columns: 2 16rem; column-gap: 32px; }
.mg-review {
  background: var(--tm-warn-fill);
  color: var(--tm-warn-ink);
  border-radius: var(--tm-radius-marker);
  padding: 0 4px;
  font-weight: 600;
}
.mg-pending { color: var(--tm-text-3); font-style: italic; }

/* Acceptance of AGB and AVV in the order forms. */
.mg-accept { display: flex; align-items: flex-start; gap: 8px; color: var(--tm-text-2); max-width: 75ch; }
.mg-accept input { margin-top: 4px; accent-color: var(--tm-accent); flex: none; }
.mg-steps + .mg-hint { margin-top: 12px; }

/* German fallback under another language (SPEC section 25; OPS-Platform docs/i18n-konzept.md 4.5: muted, with a title hint).
   Only pages under /en/ carry the attribute; the German pages never do. */
[data-i18n-rueckfall] { color: var(--tm-text-2); }

/* Pause by TOMORIS (SPEC section 31): the reason keeps its line breaks and wraps long words. */
.mg-quote { white-space: pre-line; overflow-wrap: anywhere; }