/* Adminbereich.

   Daniels Werkzeug, nicht das Dokument des Mandanten. Die Farben und die
   Haltung kommen trotzdem aus docs/GESTALTUNG.md, damit beide Bereiche
   erkennbar zum selben Haus gehoeren: Papier als Grund, die Tiefe fuer das,
   was weiterfuehrt, und Gold nur fuer das, worauf gerade der Blick liegt.

   WAS HIER ANDERS IST ALS IM MANDANTENBEREICH, und warum:

   Der Mandant fuellt einen Bogen aus, einmal, ueber Tage. Dort steht ein Feld
   je Zeile, die Frage gross und in der Serifenschrift, und die Seite darf Zeit
   lassen. Daniel arbeitet hier taeglich und sucht Zeilen in Listen. Kurze
   Felder duerfen deshalb nebeneinander stehen, und die Schrift bleibt die
   Werkzeugschrift. Die Serifen tragen nur die Ueberschriften: sie sagen, in
   welchem Haus man ist, ohne die Arbeit zu verlangsamen.

   SO WENIG WIE MOEGLICH AN BAUTEILEN. Filaments Farbwelt haengt an einer
   Handvoll Merkmalen, und die werden hier ersetzt. Alles, was danach kommt,
   ist Luft, Linie und Schrift. Je weniger einzelne Klassen hier stehen, desto
   weniger geht bei einer neuen Fassung von Filament kaputt. */

:root {
  /* Die Graustufen von Filament, ersetzt durch die des Hauses. Sie tragen
     Grund, Linien, Text und alles Zweitrangige. Filaments eigene Werte sind
     leicht blaeulich und stehen neben dem warmen Papier falsch. */
  --gray-50: #F7F5F1;
  --gray-100: #EFEDE6;
  --gray-200: #E1DED6;
  --gray-300: #CFCBC0;
  --gray-400: #A5A69F;
  --gray-500: #7B8390;
  --gray-600: #626B7A;
  --gray-700: #49525F;
  --gray-800: #2D3644;
  --gray-900: #1B2533;
  --gray-950: #16202F;

  /* Das Haus. Diese Namen gehoeren uns, nicht Filament. */
  --twr-papier: #F4F2ED;
  --twr-flaeche: #FFFFFF;
  --twr-tiefe: #0F1B2D;
  --twr-tiefe-hell: #1B2B44;
  --twr-text: #16202F;
  --twr-leise: #6A7382;
  --twr-linie: #E1DED6;
  --twr-gold: #B8965A;
  --twr-gold-grund: #FAF6EE;

  --twr-serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
}

/* Der Grund ist Papier, die Arbeitsflaechen sind weiss. Man sieht, wo
   gearbeitet wird. Das kostet keinen Schatten und keinen Verlauf. */
.fi-body {
  background-color: var(--twr-papier);
}

/* ---------------------------------------------------------------------------
   Kopfband und Seitenleiste
   --------------------------------------------------------------------------- */

.fi-topbar > nav,
.fi-sidebar {
  background-color: var(--twr-flaeche);
  border-color: var(--twr-linie);
}

.fi-topbar > nav {
  box-shadow: none;
  border-bottom: 1px solid var(--twr-linie);
}

/* Der Name des Hauses traegt die Serifenschrift. Es ist die einzige Stelle im
   Kopfband, an der etwas ueber die Marke gesagt wird. */
.fi-topbar .fi-logo {
  font-family: var(--twr-serif);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--twr-tiefe);
}

/* Der offene Eintrag bekommt die Tiefe als Flaeche und Gold als Marke an der
   Kante. Gold wird verdient, nicht verteilt: es steht nur an dem einen
   Eintrag, auf dem der Blick gerade liegt. */
.fi-sidebar-item-active .fi-sidebar-item-btn {
  background-color: var(--twr-tiefe);
  color: #FFFFFF;
  position: relative;
}

.fi-sidebar-item-active .fi-sidebar-item-btn::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: 0.5rem;
  width: 3px;
  border-radius: 999px;
  background-color: var(--twr-gold);
}

.fi-sidebar-item-active .fi-sidebar-item-icon,
.fi-sidebar-item-active .fi-sidebar-item-label {
  color: #FFFFFF;
}

.fi-sidebar-item-btn {
  border-radius: 0.5rem;
}

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

.fi-header-heading {
  font-family: var(--twr-serif);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--twr-tiefe);
}

.fi-header-subheading {
  color: var(--twr-leise);
}

.fi-breadcrumbs {
  margin-bottom: 0.25rem;
}

/* ---------------------------------------------------------------------------
   Abschnitte
   --------------------------------------------------------------------------- */

/* Eine Kante, kein Schatten. Der Unterschied zwischen einer Flaeche, auf der
   gearbeitet wird, und einer Kachel, die nur schwebt. */
.fi-section {
  background-color: var(--twr-flaeche);
  border: 1px solid var(--twr-linie);
  border-radius: 0.75rem;
  box-shadow: none;
}

.fi-section-header {
  border-bottom: 1px solid var(--twr-linie);
  padding-block: 1.125rem;
}

.fi-section-header-heading {
  font-family: var(--twr-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--twr-tiefe);
}

.fi-section-header-description {
  color: var(--twr-leise);
}

.fi-section-content {
  padding-block: 1.5rem;
}

/* ---------------------------------------------------------------------------
   Felder
   --------------------------------------------------------------------------- */

.fi-fo-field-label-content {
  color: var(--twr-text);
  font-weight: 500;
}

/* Der Hinweis unter einem Feld ist zweitrangig und sieht auch so aus. Er steht
   trotzdem da, denn er beantwortet die Frage, bevor sie entsteht. */
.fi-fo-field-wrp-hint,
.fi-fo-field-wrp-helper-text {
  color: var(--twr-leise);
}

.fi-input-wrp {
  border-radius: 0.5rem;
  box-shadow: none;
  border: 1px solid var(--twr-linie);
  background-color: var(--twr-flaeche);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

/* Das Feld, in dem gerade gearbeitet wird, bekommt Gold. Das ist die zweite
   und letzte Stelle, an der Gold erscheint. */
.fi-input-wrp:focus-within {
  border-color: var(--twr-gold);
  box-shadow: 0 0 0 3px rgba(184, 150, 90, 0.18);
}

/* ---------------------------------------------------------------------------
   Schaltflaechen
   --------------------------------------------------------------------------- */

/* Was weiterfuehrt, traegt die Tiefe und nicht das Gold. Gold auf einer
   Schaltflaeche saehe aus wie ein Angebot, und hier wird gearbeitet. */
.fi-btn.fi-color-primary {
  background-color: var(--twr-tiefe);
  color: #FFFFFF;
}

.fi-btn.fi-color-primary:hover {
  background-color: var(--twr-tiefe-hell);
}

.fi-btn {
  border-radius: 0.5rem;
  font-weight: 500;
  box-shadow: none;
}

/* Das Symbol eines Knopfes traegt die Farbe seiner Schrift. Filament faerbt es
   fest mit gray-400, und unser Grau ist waermer und heller als seines: auf dem
   hellen Knopf war das Symbol kaum zu sehen. Gemessen am 17. September an der
   Ansicht eines Vorgangs. */
.fi-btn > .fi-icon,
.fi-btn:not(.fi-outlined).fi-color:not(label) > .fi-icon {
  color: inherit;
}

/* ---------------------------------------------------------------------------
   Vorschau einer Unterlage
   --------------------------------------------------------------------------- */

/* Der Rahmen nimmt fast die ganze Hoehe des Fensters. Eine Wertmitteilung mit
   drei Spalten ist in einem kleinen Kasten nicht zu lesen, und genau dafuer
   steht die Vorschau da. */
.twr-vorschau iframe {
  width: 100%;
  height: 70vh;
  border: 1px solid var(--twr-linie);
  border-radius: 0.5rem;
  background-color: var(--twr-flaeche);
}

.twr-vorschau img {
  display: block;
  max-width: 100%;
  max-height: 70vh;
  margin: 0 auto;
  border: 1px solid var(--twr-linie);
  border-radius: 0.5rem;
}

.twr-vorschau p {
  margin-top: 0.75rem;
  text-align: right;
  font-size: 0.875rem;
}

.twr-vorschau a {
  color: var(--twr-tiefe);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Unterlagen fuer den Mandanten hochladen
   --------------------------------------------------------------------------- */

/* Ein gewoehnliches Formular und kein Formular von Filament, siehe
   UnterlageAblegen. Die Bauteile darin sind Filaments, nur die Abstaende und
   das Dateifeld brauchen eine Zeile. Untereinander, wie jedes Formular hier. */
.twr-hochladen {
  display: grid;
  gap: 0.5rem;
  max-width: 40rem;
}

.twr-hochladen label {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--twr-text);
}

.twr-hochladen input[type="file"] {
  padding: 0.5rem;
  border: 1px solid var(--twr-linie);
  border-radius: 0.5rem;
  background-color: var(--twr-flaeche);
  color: var(--twr-text);
  font-size: 0.875rem;
}

.twr-hochladen > div:last-child {
  margin-top: 0.5rem;
}

/* ---------------------------------------------------------------------------
   Tabellen
   --------------------------------------------------------------------------- */

.fi-ta {
  background-color: var(--twr-flaeche);
  border: 1px solid var(--twr-linie);
  border-radius: 0.75rem;
  box-shadow: none;
}

.fi-ta-header-cell {
  background-color: var(--twr-flaeche);
  border-bottom: 1px solid var(--twr-linie);
}

.fi-ta-header-cell-label {
  color: var(--twr-leise);
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Mehr Luft je Zeile. Eine Mandantenliste wird gelesen und nicht ueberflogen,
   und zwischen zwei Zeilen darf man den Platz haben, die richtige zu treffen. */
.fi-ta-row .fi-ta-cell {
  padding-block: 0.875rem;
}

.fi-ta-row:hover {
  background-color: var(--twr-gold-grund);
}

/* Zahlen in Spalten stehen untereinander, sonst zaehlt man Stellen statt zu
   lesen. */
.fi-ta-text-item-label {
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   Dunkel
   --------------------------------------------------------------------------- */

/* Nur Merkmalswerte, kein einziges Bauteil wird hier noch einmal beschrieben.
   Sonst gibt es zwei Gestaltungen, und die laufen auseinander, sobald eine sich
   aendert. Dieselbe Regel gilt im Mandantenbereich. */
.fi.dark {
  --twr-papier: #0B1523;
  --twr-flaeche: #13202F;
  --twr-tiefe: #E7EAF0;
  --twr-tiefe-hell: #FFFFFF;
  --twr-text: #EEF1F5;
  --twr-leise: #8E9AAA;
  --twr-linie: #223046;
  --twr-gold: #C8A467;
  --twr-gold-grund: #17212E;
}

/* Die eine Ausnahme: auf dunklem Grund traegt die offene Zeile Gold als
   Flaeche, denn eine helle Flaeche waere dort das Gegenteil einer Markierung. */
.fi.dark .fi-sidebar-item-active .fi-sidebar-item-btn {
  background-color: #1B2B44;
}

.fi.dark .fi-btn.fi-color-primary {
  background-color: var(--twr-gold);
  color: #16202F;
}

.fi.dark .fi-btn.fi-color-primary:hover {
  background-color: #D6B478;
}