/* Rechnungsfreigabe — lite-Shell (tt-main gems/lite), tokenisiert für den
 * Light/Dark-Umschalter. Klassenvokabular unverändert: lite-sidebar, lite-topbar,
 * stat-card, form-section, lite-sticky-bar, flash-notices. */

:root {
  --lite-sidebar-width: 240px;
  --lite-primary: #2563eb;
  --lite-primary-dark: #1d4ed8;
  --lite-sidebar-bg: #1e293b;
  --lite-sidebar-text: #cbd5e1;
  --lite-sidebar-hover: #334155;
  --lite-sidebar-active: #2563eb;

  --rf-bg: #f1f5f9;
  --rf-panel: #ffffff;
  --rf-text: #0f172a;
  --rf-muted: #64748b;
  --rf-line: #e2e8f0;
  --rf-line-soft: #f1f5f9;
  --rf-hover: #eff6ff;
  --rf-input-bg: #f1f5f9;
  --rf-input-focus: #e8edf3;
  --rf-shadow: rgba(0, 0, 0, .05);
}

:root[data-bs-theme="dark"] {
  --lite-sidebar-bg: #0b1220;
  --lite-sidebar-text: #94a3b8;
  --lite-sidebar-hover: #1e293b;

  --rf-bg: #0f172a;
  --rf-panel: #1e293b;
  --rf-text: #e2e8f0;
  --rf-muted: #94a3b8;
  --rf-line: #334155;
  --rf-line-soft: #273449;
  --rf-hover: #1e3a8a33;
  --rf-input-bg: #0f172a;
  --rf-input-focus: #172136;
  --rf-shadow: rgba(0, 0, 0, .4);
}

body {
  background: var(--rf-bg);
  color: var(--rf-text);
  font-family: 'Segoe UI', system-ui, sans-serif;
}

/* --- Sidebar ---------------------------------------------------------- */
.lite-sidebar {
  width: var(--lite-sidebar-width);
  height: 100vh;
  overflow-y: auto;
  background: var(--lite-sidebar-bg);
  position: fixed;
  top: 0; left: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
}
.lite-sidebar .brand {
  padding: 1.25rem 1.25rem 1rem;
  border-bottom: 1px solid var(--lite-sidebar-hover);
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: .02em;
}
/* Markenzeichen: teamtoaster-Signet + „firm" — Logo-Aufbau wie beim
   abgelösten SFirm (Signet, daneben der Schriftzug). Genutzt in der Sidebar
   (weiß auf dunkel) und auf der Login-Karte (dunkel auf hell): Das Signet
   ist ein monochromes SVG und wird als CSS-Maske eingefärbt, folgt damit
   überall der Textfarbe und braucht keine zweite, eingefärbte Datei. */
.brand-mark {
  display: flex;
  align-items: center;
  gap: .45rem;
}
.signet {
  /* Seitenverhältnis des SVG: 132.16 x 102.63. Die Outline-Form braucht
     etwas Größe, sonst werden die Striche fadendünn — 1.5em wiegt das
     Signet gegen den Schriftzug aus (optisch geprüft). */
  width: 1.93em;
  height: 1.5em;
  flex: none;
  background-color: currentColor;
  -webkit-mask: url("/vendor/teamtoaster/tt-signet.svg") no-repeat center / contain;
  mask: url("/vendor/teamtoaster/tt-signet.svg") no-repeat center / contain;
}
.lite-sidebar .brand small {
  display: block;
  font-size: .7rem;
  font-weight: 400;
  color: var(--lite-sidebar-text);
  letter-spacing: 0;
  margin-top: 2px;
}
.lite-nav { padding: .5rem 0; flex: 1; }
.lite-nav .nav-section {
  padding: .6rem 1.25rem .25rem;
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #64748b;
  font-weight: 600;
}
.lite-nav a {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem 1.25rem;
  color: var(--lite-sidebar-text);
  text-decoration: none;
  font-size: .875rem;
  border-left: 3px solid transparent;
  transition: background .15s, color .15s;
}
.lite-nav a:hover { background: var(--lite-sidebar-hover); color: #fff; }
.lite-nav a.active { background: var(--lite-sidebar-hover); color: #fff; border-left-color: var(--lite-sidebar-active); }
.lite-nav a .fa { width: 1.1rem; text-align: center; opacity: .75; }

/* --- Topbar ------------------------------------------------------------ */
.lite-topbar {
  margin-left: var(--lite-sidebar-width);
  height: 56px;
  background: var(--rf-panel);
  border-bottom: 1px solid var(--rf-line);
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  position: sticky;
  top: 0;
  z-index: 50;
  gap: 1rem;
}
.lite-menu-toggle { display: none; background: none; border: 0; font-size: 1.3rem; color: var(--rf-muted); padding: .25rem .5rem; }
.lite-sidebar-backdrop { display: none; }
.lite-topbar .store-name { font-weight: 600; color: var(--rf-text); font-size: .95rem; }
.lite-topbar .user-info { margin-left: auto; font-size: .825rem; color: var(--rf-muted); }
.lite-topbar .user-info a { color: var(--rf-muted); text-decoration: none; }
.lite-topbar .user-info a:hover { color: var(--rf-text); }

.lite-theme-toggle {
  background: none; border: 0; font-size: 1rem; color: var(--rf-muted);
  padding: .25rem .5rem; cursor: pointer;
}
.lite-theme-toggle:hover { color: var(--rf-text); }

.lite-locale-switcher { display: flex; gap: .2rem; align-items: center; margin-left: .75rem; }
.lite-locale-switcher a { font-size: 1.15rem; line-height: 1; text-decoration: none; opacity: .35; transition: opacity .15s; }
.lite-locale-switcher a:hover { opacity: .65; }
.lite-locale-switcher a.active { opacity: 1; }

/* --- Suche (Topbar) ----------------------------------------------------- */
.lite-search { position: relative; width: 320px; display: flex; align-items: center; }
.lite-search > .fa-search { position: absolute; left: .7rem; color: var(--rf-muted); font-size: .8rem; pointer-events: none; }
.lite-search input {
  width: 100%; border: none; background: var(--rf-input-bg); border-radius: 999px;
  padding: .4rem .9rem .4rem 2rem; font-size: .85rem; outline: none;
  color: var(--rf-text);
}
.lite-search input:focus { background: var(--rf-input-focus); }
#lite-search-results {
  position: absolute; top: calc(100% + 6px); left: 0; width: 420px; max-height: 60vh; overflow-y: auto;
  background: var(--rf-panel); border: 1px solid var(--rf-line); border-radius: .5rem;
  box-shadow: 0 8px 24px var(--rf-shadow); z-index: 1050; padding: .25rem 0;
}
#lite-search-results .search-category {
  padding: .4rem .9rem .2rem; font-size: .65rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--rf-muted); font-weight: 700;
}
#lite-search-results a.search-item {
  display: block; padding: .4rem .9rem; text-decoration: none; color: var(--rf-text); font-size: .85rem;
}
#lite-search-results a.search-item small { color: var(--rf-muted); display: block; }
#lite-search-results a.search-item:hover,
#lite-search-results a.search-item.active { background: var(--rf-hover); }

/* --- Hauptbereich -------------------------------------------------------- */
.lite-main {
  margin-left: var(--lite-sidebar-width);
  padding: 1.75rem 2rem;
  min-height: calc(100vh - 56px);
}
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
.page-header h1 { font-size: 1.4rem; font-weight: 700; color: var(--rf-text); margin: 0; }

.card { border: 1px solid var(--rf-line); border-radius: .75rem; box-shadow: 0 1px 3px var(--rf-shadow); background: var(--rf-panel); }
.card-header { background: var(--rf-panel); border-bottom: 1px solid var(--rf-line); font-weight: 600; border-radius: .75rem .75rem 0 0 !important; }

.stat-card { background: var(--rf-panel); border-radius: .75rem; border: 1px solid var(--rf-line); padding: 1.25rem 1.5rem; }
.stat-card .stat-value { font-size: 2rem; font-weight: 700; color: var(--rf-text); line-height: 1; font-variant-numeric: tabular-nums; }
.stat-card .stat-label { font-size: .8rem; color: var(--rf-muted); margin-top: .35rem; }
.stat-card .stat-icon { font-size: 1.5rem; color: var(--lite-primary); opacity: .7; }

.form-section { background: var(--rf-panel); border-radius: .75rem; border: 1px solid var(--rf-line); padding: 1.5rem; margin-bottom: 1.25rem; }
.form-section-title { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--rf-muted); margin-bottom: 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--rf-line-soft); }

.table-actions { display: flex; gap: .35rem; }
.btn-primary { background: var(--lite-primary); border-color: var(--lite-primary); }
.btn-primary:hover { background: var(--lite-primary-dark); border-color: var(--lite-primary-dark); }
.alert { border-radius: .5rem; }
.flash-notices { position: fixed; top: 1rem; right: 1rem; z-index: 9999; min-width: 280px; }

.lite-sticky-bar {
  position: sticky;
  bottom: 0;
  padding: .875rem 2rem;
  margin: 1.5rem -2rem 0;
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  z-index: 40;
  transition: background .2s, box-shadow .2s;
}
.lite-sticky-bar.is-stuck {
  background: var(--rf-panel);
  border-top: 1px solid var(--rf-line);
  box-shadow: 0 -2px 8px var(--rf-shadow);
}

.lite-dash-table td { padding: .55rem .75rem; vertical-align: middle; }
.lite-truncate-cell { max-width: 0; width: 100%; }
.lite-truncate-cell > a { display: block; overflow: hidden; white-space: nowrap; }

/* --- Diagramm-Container -------------------------------------------------- */
/* Chart.js mit maintainAspectRatio:false füllt seinen Container — die Höhe
   muss daher hier stehen (max. 500px, auf kleinen Screens flacher). */
.lite-chart {
  position: relative;
  width: 100%;
  height: 500px;
  max-height: 500px;
}
@media (max-width: 767.98px) {
  .lite-chart { height: 320px; }
}

/* --- Zahlen- und Geldzellen ---------------------------------------------- */
/* Tabellenziffern (Spalten stehen untereinander) und KEIN Umbruch: ein
   Geldbetrag darf nie zwischen Zahl und Währung (oder in den Tausendern)
   auseinanderfallen. Die Klasse war in mehreren Views benutzt, aber nie
   definiert. Das schmale geschützte Leerzeichen im Betrag selbst kommt aus
   ApplicationHelper#money. */
.num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- TAN-Eingabe --------------------------------------------------------- */
/* Die Ziffern werden vom TAN-Generator abgelesen und getippt: Monospace,
   etwas größer und gesperrt, damit man sich beim Vergleichen nicht verzählt.
   Steht nach Bootstrap, gewinnt also gegen .form-control-sm. */
.tan-input {
  font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 1.15rem;
  letter-spacing: .18em;
  text-align: center;
  max-width: 11rem;
}

/* --- Login / Setup (eigenes Layout, zentrierte Karte) --------------------- */
.login-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.login-card {
  width: 100%;
  max-width: 420px;
  background: var(--rf-panel);
  border: 1px solid var(--rf-line);
  border-radius: .75rem;
  box-shadow: 0 1px 3px var(--rf-shadow);
  padding: 2rem;
}
.login-card .brand-title { font-weight: 700; font-size: 1.2rem; margin-bottom: .25rem; }
.login-card .brand-sub { color: var(--rf-muted); font-size: .85rem; margin-bottom: 1.5rem; }

/* --- Responsiv ----------------------------------------------------------- */
@media (max-width: 991.98px) {
  .lite-sidebar { transform: translateX(-100%); transition: transform .25s ease; z-index: 1060; }
  body.lite-sidebar-open .lite-sidebar { transform: translateX(0); }
  body.lite-sidebar-open .lite-sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(15, 23, 42, .5); z-index: 1055; }
  .lite-topbar { margin-left: 0; padding: 0 .75rem; }
  .lite-menu-toggle { display: inline-flex; }
  .lite-topbar .store-name { display: none; }
  .lite-main { margin-left: 0; padding: 1rem; }
  .lite-sticky-bar { margin: 1.5rem -1rem 0; padding: .875rem 1rem; }
  .lite-search { width: auto; flex: 1; min-width: 0; }
  #lite-search-results { width: min(420px, calc(100vw - 1.5rem)); }
}
@media (max-width: 575.98px) {
  .lite-topbar .user-info { display: none; }
}