/* ============================================================================
   Verwaltungsbereich + Bestaetigungsseiten im Design „Schnitt"
   ---------------------------------------------------------------------------
   Gilt fuer `backend_layout` (Kalender, Termine, Kunden, Einstellungen) und
   `message_layout` (Buchungsbestaetigung, Hinweisseiten).

   Bewusst kein Neubau: der Verwaltungsbereich ist ein gewachsenes
   Bootstrap-Werkzeug mit Kalender, Tabellen und Dialogen. Ziel ist, dass er
   erkennbar zur Buchungsstrecke gehoert - Schrift, Farbe, Kanten, Schalter -
   nicht, ihn Bildschirm fuer Bildschirm nachzubauen.
   ========================================================================== */

:root,
body {
  --paper: #ffffff;
  --ink: #111111;
  --signal: #da1f14;
  --ash: #6e6e6e;
  --haze: #f1f0ed;
  --night: #0b0b0b;
  --line: rgba(17, 17, 17, 0.14);
  --line-strong: rgba(17, 17, 17, 0.28);

  --f-disp: "Syne", "Trebuchet MS", sans-serif;
  --f-body: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "DM Mono", "SFMono-Regular", Menlo, monospace;

  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --snap: cubic-bezier(0.16, 1.2, 0.3, 1);
}

/* Das Gruen von Easy!Appointments an der Wurzel tauschen. */
:root,
body,
.modal,
.flatpickr-calendar {
  --bs-primary: #da1f14 !important;
  --bs-primary-rgb: 218, 31, 20 !important;
  --bs-link-color: #da1f14 !important;
  --bs-link-hover-color: #111111 !important;
}

body {
  font-family: var(--f-body) !important;
  color: var(--ink);
  background: var(--paper) !important;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--signal); color: #fff; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5 {
  font-family: var(--f-disp) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* Easy!Appointments setzt diese Klassen fest auf sein Gruen, nicht ueber
   die Bootstrap-Variable — sie brauchen deshalb eigene Regeln. */
.text-primary { color: var(--signal) !important; }
.text-success { color: var(--ink) !important; }
.text-muted { color: var(--ash) !important; }
.bg-primary { background-color: var(--signal) !important; }
.bg-success { background-color: var(--signal) !important; }
a { color: var(--ink); }
a:hover { color: var(--signal); }

/* ==========================================================================
   Anmeldung und Kontoseiten (account_layout)
   ========================================================================== */
.card {
  border-radius: 0 !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
}
/* Das mitgelieferte Logo ist gruen und traegt fremde Marke. */
.card img[src*="logo.png"] { display: none !important; }

.card h4,
.card .h4 {
  font-family: var(--f-disp) !important;
  font-weight: 700 !important;
  font-size: 1.75rem !important;
  letter-spacing: -0.03em;
  color: var(--ink) !important;
  text-transform: uppercase;
}
.card .input-group-text {
  border-radius: 0 !important;
  border-color: var(--line-strong) !important;
  background: var(--haze) !important;
  color: var(--ash) !important;
}
.card a.text-decoration-none {
  font-family: var(--f-mono) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ash) !important;
}
.card a.text-decoration-none:hover { color: var(--signal) !important; }
.card a.text-decoration-none i,
.card a.text-decoration-none svg { display: none !important; }

/* ---------------------------------------------------------- Kopfleiste */
#header,
.navbar,
nav.navbar {
  background: var(--paper) !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: none !important;
}
.navbar-brand,
#header .navbar-brand {
  font-family: var(--f-disp) !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--ink) !important;
}
.navbar-brand img,
#header img.d-inline-block { display: none !important; }

.navbar .nav-link,
#header .nav-link {
  font-family: var(--f-body) !important;
  font-size: 0.92rem !important;
  color: var(--ash) !important;
  border-radius: 0 !important;
  border-bottom: 2px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.navbar .nav-link:hover,
#header .nav-link:hover { color: var(--ink) !important; }
.navbar .nav-link.active,
#header .nav-link.active {
  color: var(--ink) !important;
  background: transparent !important;
  border-bottom-color: var(--signal);
}

/* ------------------------------------------------------------- Schalter */
.btn {
  border-radius: 0 !important;
  font-family: var(--f-body) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.005em;
  transition: background 0.25s var(--ease), color 0.25s var(--ease),
    border-color 0.25s var(--ease), transform 0.25s var(--snap);
}
.btn:hover { transform: translateY(-1px); }

.btn-primary,
.btn-success {
  background: var(--signal) !important;
  border-color: var(--signal) !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-success:hover {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-light,
.btn-secondary {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--line-strong) !important;
}
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-light:hover,
.btn-secondary:hover {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border-color: var(--ink) !important;
}

.btn-danger { background: var(--signal) !important; border-color: var(--signal) !important; }
.btn-danger:hover { background: var(--ink) !important; border-color: var(--ink) !important; }

/* -------------------------------------------------------------- Formulare */
.form-control,
.form-select,
textarea.form-control {
  border-radius: 0 !important;
  border: 1px solid var(--line-strong) !important;
  font-family: var(--f-body) !important;
  color: var(--ink) !important;
  background-color: var(--paper) !important;
}
.form-control:focus,
.form-select:focus {
  box-shadow: none !important;
  border-color: var(--signal) !important;
}
.form-label,
label {
  font-family: var(--f-mono) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ash) !important;
}
.form-check-input:checked {
  background-color: var(--signal) !important;
  border-color: var(--signal) !important;
}

/* --------------------------------------------------------------- Tabellen */
.table {
  --bs-table-hover-bg: var(--haze);
  font-size: 0.94rem;
}
.table > thead th {
  font-family: var(--f-mono) !important;
  font-size: 0.68rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ash) !important;
  background: var(--paper) !important;
  border-bottom: 1px solid var(--line-strong) !important;
}
.table > tbody td {
  border-color: var(--line) !important;
  vertical-align: middle;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background: rgba(241, 240, 237, 0.5) !important;
}

/* ----------------------------------------------------------- Karten/Boxen */
.card,
.modal-content,
.dropdown-menu,
.list-group-item {
  border-radius: 0 !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}
.card-header,
.modal-header {
  background: var(--paper) !important;
  border-bottom: 1px solid var(--line) !important;
}
.modal-title {
  font-family: var(--f-disp) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
}
.modal-footer { border-top: 1px solid var(--line) !important; }

.badge { border-radius: 0 !important; font-family: var(--f-mono) !important; font-weight: 400 !important; }
.alert { border-radius: 0 !important; border-color: var(--line) !important; }

.nav-tabs { border-bottom: 1px solid var(--line) !important; }
.nav-tabs .nav-link {
  border-radius: 0 !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  font-family: var(--f-body) !important;
  color: var(--ash) !important;
}
.nav-tabs .nav-link.active {
  color: var(--ink) !important;
  background: transparent !important;
  border-bottom-color: var(--signal) !important;
}

/* ------------------------------------------------- Dunkle Leisten/Flaechen */
/* Die Kalenderleiste (`#calendar-toolbar`) ist dunkel. Die allgemeinen
   Schalterregeln weiter oben setzen dunkle Schrift auf transparenten Grund —
   das waere dort unsichtbar. Innerhalb dunkler Flaechen gilt deshalb das
   umgekehrte Verhaeltnis. */
#calendar-toolbar,
.bg-dark {
  background: var(--night) !important;
  border-radius: 0 !important;
}

#calendar-toolbar .btn,
.bg-dark .btn,
#calendar-toolbar .btn-light,
.bg-dark .btn-light,
#calendar-toolbar .btn-outline-secondary,
.bg-dark .btn-outline-secondary,
#calendar-toolbar .btn-secondary,
.bg-dark .btn-secondary {
  background: transparent !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
}
#calendar-toolbar .btn:hover,
.bg-dark .btn:hover,
#calendar-toolbar .btn-light:hover,
.bg-dark .btn-light:hover {
  background: #ffffff !important;
  color: var(--ink) !important;
  border-color: #ffffff !important;
}

/* Der Hauptschalter bleibt auch im Dunkeln das Signalrot. */
#calendar-toolbar .btn-primary,
.bg-dark .btn-primary,
#calendar-toolbar .btn-success,
.bg-dark .btn-success {
  background: var(--signal) !important;
  border-color: var(--signal) !important;
  color: #ffffff !important;
}
#calendar-toolbar .btn-primary:hover,
.bg-dark .btn-primary:hover {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: var(--ink) !important;
}

/* Auswahlfelder und Beschriftungen in der dunklen Leiste */
#calendar-toolbar .form-select,
.bg-dark .form-select,
#calendar-toolbar .form-control,
.bg-dark .form-control {
  background-color: transparent !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}
#calendar-toolbar .form-select option { color: var(--ink); background: var(--paper); }
#calendar-toolbar label,
.bg-dark label,
#calendar-toolbar .form-label,
.bg-dark .form-label {
  color: rgba(255, 255, 255, 0.7) !important;
}
#calendar-toolbar .text-muted,
.bg-dark .text-muted { color: rgba(255, 255, 255, 0.65) !important; }
#calendar-toolbar a,
.bg-dark a { color: #ffffff; }

/* ---------------------------------------------------------- Terminkalender */
/* Die Terminfarben kommen aus der Datenbank und bleiben unangetastet —
   nur das Geruest wird angeglichen. */
.fc .fc-toolbar-title {
  font-family: var(--f-disp) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
}
.fc .fc-col-header-cell-cushion,
.fc .fc-timegrid-axis-cushion,
.fc .fc-timegrid-slot-label-cushion {
  font-family: var(--f-mono) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ash) !important;
  text-decoration: none;
}
.fc .fc-button,
.fc .fc-button-primary {
  border-radius: 0 !important;
  background: transparent !important;
  border: 1px solid var(--line-strong) !important;
  color: var(--ink) !important;
  font-family: var(--f-mono) !important;
  font-size: 0.75rem !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  box-shadow: none !important;
}
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:hover {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: var(--paper) !important;
}
.fc-theme-standard td,
.fc-theme-standard th,
.fc-theme-standard .fc-scrollgrid { border-color: var(--line) !important; }
.fc .fc-day-today { background: var(--haze) !important; }

/* Kalender in Dialogen (flatpickr) */
.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.selected:hover {
  background: var(--signal) !important;
  border-color: var(--signal) !important;
  color: #fff !important;
}
.flatpickr-months,
.flatpickr-month,
span.flatpickr-weekday {
  background: var(--paper) !important;
  color: var(--ink) !important;
  fill: var(--ink) !important;
}
span.flatpickr-weekday {
  font-family: var(--f-mono) !important;
  font-size: 0.65rem !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ash) !important;
}

/* ------------------------------------------------------------- Fusszeile */
#footer,
footer.footer {
  background: var(--paper) !important;
  border-top: 1px solid var(--line) !important;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ash);
}
#footer a, footer.footer a { color: var(--ash) !important; text-decoration: none; }
#footer a:hover, footer.footer a:hover { color: var(--signal) !important; }

/* ==========================================================================
   Bestaetigungsseite nach der Buchung (message_layout)
   ========================================================================== */

/* Die Schnittlinie gilt auch hier: linksbuendig, nicht zentriert. */
body.sch-message #main.container {
  max-width: none !important;
  padding: 0 !important;
}
body.sch-message .row.wrapper {
  margin: 0 !important;
  min-height: 0 !important;
  align-items: flex-start !important;
}
/* Der Rahmen ist als schmale Bootstrap-Spalte mit Karten-Optik angelegt —
   die Ueberschrift in Syne braucht die volle Breite. */
body.sch-message #message-frame {
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 56rem !important;
  margin-inline: auto !important;
  padding: clamp(3rem, 9vw, 7rem) clamp(1.25rem, 5vw, 4rem) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
}
body.sch-message .text-center { text-align: left !important; }
body.sch-message .min-vh-100- { display: block !important; min-height: 0 !important; }
body.sch-message .mx-auto { margin-inline: 0 !important; }

/* Statt gruenem Kreis: die rote Marke auf der Linie. */
body.sch-message .rounded-circle.bg-success,
body.sch-message .rounded-circle {
  width: 3.5rem !important;
  height: 7px !important;
  border-radius: 0 !important;
  background: var(--signal) !important;
  margin: 0 0 1.6rem !important;
}
body.sch-message .rounded-circle i,
body.sch-message .rounded-circle svg { display: none !important; }

body.sch-message h3,
body.sch-message .text-success {
  font-family: var(--f-disp) !important;
  font-weight: 700 !important;
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.25rem) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.035em;
  color: var(--ink) !important;
  margin-bottom: 1.5rem !important;
}

body.sch-message p { color: var(--ash) !important; max-width: 52ch; }
body.sch-message p.fs-5 { font-size: 1.1rem !important; color: var(--ink) !important; }

body.sch-message .btn {
  height: 3.25rem;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding-inline: 1.75rem !important;
}
body.sch-message .d-flex.gap-2 {
  justify-content: flex-start !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 0.75rem !important;
  margin-top: 2.5rem !important;
}
body.sch-message .btn i,
body.sch-message .btn svg { display: none !important; }

body.sch-message #message-icon { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   NACHTRAG 18.08.2026 — Lesbarkeit im Verwaltungsbereich
   Drei Folgefehler der Umstellung auf helle Flaechen. Alle drei entstehen,
   weil Easy!Appointments von DUNKLEN Dialogkoepfen und HELLEN Terminfarben
   ausgeht — beides hatte ich umgedreht, ohne die abhaengigen Regeln nachzuziehen.
   ========================================================================== */

/* 1) Dialogtitel war weiss auf weiss.
      Ursache: `body .modal .modal-title { color: var(--bs-white) }` in
      assets/css/backend.css — passend zu EAs dunklem Kopf, nicht zu unserem
      hellen. Spezifitaet (0,2,1) muss erreicht werden. */
body .modal .modal-title {
  color: var(--ink) !important;
}

/* 2) Schliessen-Kreuz war unsichtbar.
      Ursache: `body .modal-header .btn-close { filter: brightness(0) invert(1) }`
      faerbt das dunkle Kreuz WEISS — auf weissem Kopf bei 40 % Deckkraft
      nicht zu sehen. Ohne dieses Kreuz laesst sich der Dialog
      "Neues Ereignis hinzufuegen" nicht schliessen, weil er mit
      `backdrop: 'static'` laeuft und ein Klick daneben nichts bewirkt. */
body .modal-header .btn-close {
  filter: none !important;
  opacity: 0.55 !important;
}
body .modal-header .btn-close:hover,
body .modal-header .btn-close:focus-visible {
  opacity: 1 !important;
}

/* 3) Termine im Kalender waren dunkle Schrift auf dunklem Grund.
      Ursache: Der Hintergrund kommt als Inline-Stil aus der Leistungsfarbe
      (ea_services.color), die Schriftfarbe setzt EA fest auf #333. Bei einer
      dunklen Leistungsfarbe ergibt das 1,49:1 — unlesbar.

      Loesung ohne Farbverbot: Der Text bekommt eine helle Unterlage, die
      Leistungsfarbe bleibt als Streifen links sichtbar. Das funktioniert
      unabhaengig davon, welche Farbe im Verwaltungsbereich spaeter gewaehlt
      wird — auch eine tiefschwarze Leistung bleibt lesbar.
      `fc-bg-event` ist ausgenommen: das sind Nichtverfuegbarkeiten und
      Pausen, die ihre eigene Darstellung haben. */
#calendar .fc-event:not(.fc-bg-event) {
  border: none !important;
  padding-left: 5px !important;
  overflow: hidden;
}
#calendar .fc-event:not(.fc-bg-event) .fc-event-main {
  background: rgba(255, 255, 255, 0.93);
  padding: 1px 4px;
  border-radius: 0;
}
#calendar .fc-event:not(.fc-bg-event) .fc-event-time {
  font-family: var(--f-mono) !important;
}