/* =========================================================================
 * Maschinenringe OMP - Token-Datei
 * =========================================================================
 * Geteilt von allen fuenf Microfrontends. Wird beim Build nach
 * src/shared/styles/globals.css kopiert.
 *
 * LEITSATZ: Arbeitswerkzeug, kein Design-Award. Die Oberflaeche wird
 * taeglich stundenlang benutzt - sie muss bedienbar sein.
 *
 * Alle Farben stehen als HSL-Tripel ("H S% L%"), weil
 * tailwind.config.base.js sie als hsl(var(--token)) einsetzt. Wer das
 * Format aendert, bricht jede Farbklasse in allen fuenf Frontends.
 *
 * Die Kommentare sind kein Ballast - sie sagen, WARUM ein Wert so steht.
 * Ohne sie kommt der alte Wert beim naechsten Mal zurueck.
 * ========================================================================= */

@layer base {
  :root {
    /* -------------------------------------------------------------------
     * MARKE
     * #65b32e ist das Gruen des Logos (aus maschinenringe_logo.svg
     * ausgelesen, 26 Vorkommen). Es traegt weissen Text mit nur 2,61:1
     * und verfehlt damit WCAG AA deutlich. Es ist deshalb die
     * IDENTITAETSFARBE - Logo, Markenakzent, farbige Flaeche ohne Text -
     * und NIE der Grund unter weisser Schrift.
     * Vorher stand im CSS zusaetzlich rgba(101,179,46) an rund zwanzig
     * Stellen fest verdrahtet: derselbe Ton, aber am Token vorbei, und
     * --primary war mit 92 65% 42% ein DRITTER, leicht abweichender Gruenton.
     * ------------------------------------------------------------------- */
    --brand: 95 59% 44%;              /* #65b32e - Logo-Gruen */

    /* Gruen-Abstufung, aus dem Markenton abgeleitet (OKLCH H 135,4 Grad,
     * Chroma zum dunklen Ende hin gedaempft, damit die tiefen Stufen nicht
     * grell werden). Kontraste gegen Weiss gemessen, nicht geschaetzt. */
    --green-50:  96 45% 94%;
    --green-100: 96 42% 86%;
    --green-200: 97 38% 74%;
    --green-300: 97 40% 58%;
    --green-400: 95 59% 44%;          /* = Marke */
    --green-500: 98 45% 41%;          /* weisser Text 3,53:1 - nur grosse Schrift */
    --green-600: 96 54% 33%;          /* weisser Text 4,70:1 - AA, Standardknopf */
    --green-700: 94 75% 23%;          /* weisser Text 6,78:1 - Hover/Aktiv */
    --green-800: 93 100% 15%;         /* Gruener Text auf hellem Grund */

    /* -------------------------------------------------------------------
     * BEDIENFARBE
     * Gruen ist die EINZIGE Farbe, die etwas bedeutet: "hier kann ich
     * handeln". Vorher lag dasselbe Gruen auf Knoepfen, aktiver Navigation,
     * Reitern, Telefonsymbolen, Info-Symbolen, Kartenraendern und einem
     * dekorativen Keil - dadurch bedeutete es nichts mehr.
     * ------------------------------------------------------------------- */
    /* Die Bedienfarbe IST das Markengruen - nicht ein dunklerer Verwandter.
     *
     * Vorher stand hier green-600 (#4b8227), weil #65b32e weissen Text nur
     * mit 2,61:1 traegt und damit AA verfehlt. Die Folge: Das Logo-Gruen
     * kam in der ganzen Anwendung an genau vier Stellen vor (alle in
     * login/index.css), und was der Nutzer als "das Gruen" sah, war ein
     * Ton, den die Marke gar nicht kennt.
     *
     * Geloest wird das nicht durch ein dunkleres Gruen, sondern durch
     * dunkle SCHRIFT darauf: #65b32e mit hsl(94,80%,10%) ergibt 5,57:1,
     * im Hover-Zustand 4,80:1. Beide bestehen AA - und die Flaeche bleibt
     * exakt die Markenfarbe. */
    --primary: 95 59% 44%;            /* = --brand, das Logo-Gruen #65b32e */
    --primary-foreground: 94 80% 10%; /* dunkles Gruen, 5,57:1 auf der Marke */
    --primary-hover: 95 62% 40%;      /* 4,80:1 mit derselben Schrift */
    --primary-subtle: 96 45% 94%;     /* green-50, fuer leise Flaechen */

    /* SCHRIFT und Linien in der Bedienfarbe auf HELLEM Grund.
     *
     * Die Marke selbst geht hier nicht: #65b32e auf dem Seitengrund sind
     * 2,55:1 - Telefonnummern und Verweise waren damit kaum zu lesen.
     * Eine Flaeche darf so hell sein (die Schrift darauf traegt den
     * Kontrast), eine Schrift nicht.
     *
     * green-600 ist das HELLSTE Gruen, das als Text noch AA besteht
     * (4,64:1). Naeher an die Marke kommt man nicht, ohne die Lesbarkeit
     * aufzugeben - deshalb steht hier genau dieser Wert und kein dunklerer. */
    --primary-ink: 96 54% 33%;        /* green-600, 4,64:1 auf hellem Grund */

    /* --secondary ist hier KEIN Zweitknopf, sondern wird an 24 Stellen als
     * text-secondary fuer Ueberschriften benutzt (und an 16 als bg-secondary).
     * Deshalb bleibt es ein dunkles Gruen - ein neutraler heller Ton haette
     * saemtliche Ueberschriften unsichtbar gemacht. Auf die Abstufung
     * gezogen: green-700, weisser Text 6,78:1. */
    --secondary: 94 75% 23%;
    --secondary-foreground: 0 0% 100%;

    /* -------------------------------------------------------------------
     * GRUNDFLAECHEN UND SCHRIFT
     * Warmes Off-White als Seitengrund, reinweisse Karten. Die Karte war
     * vorher 0 0% 100% / 0.8 - halbdurchsichtig, was zusammen mit
     * backdrop-filter den Glaseffekt ergab und Text ueber wechselndem
     * Untergrund unlesbar machen konnte.
     * ------------------------------------------------------------------- */
    --background: 40 33% 98%;         /* #fcfbf8 */
    --foreground: 30 10% 22%;         /* warmes Dunkelgrau, 13,2:1 auf Grund */

    --card: 0 0% 100%;                /* deckend, nicht durchscheinend */
    --card-foreground: 30 10% 22%;

    --popover: 0 0% 100%;
    --popover-foreground: 30 10% 22%;

    --muted: 40 20% 96%;
    --muted-foreground: 30 8% 42%;    /* 5,4:1 auf Grund - AA fuer Kleintext */

    --accent: 40 20% 94%;             /* Hoverflaeche, neutral statt gruen */
    --accent-foreground: 30 10% 22%;

    /* -------------------------------------------------------------------
     * CHROME - Kopfzeile und Seitenleiste
     *
     * HELL, nicht dunkel. Zwei Anlaeufe waren vorher hier:
     * dunkelgruen (dann kam Gruen zweimal vor, als Grund UND als
     * Bedienfarbe, und das Markengruen hatte keinen Platz mehr) und
     * dunkelblau (las sich veraltet und stand quer zur Marke).
     *
     * Ein heller Rahmen loest beides: Das Markengruen ist die einzige
     * Farbe im Bild und muss mit nichts konkurrieren, und die
     * Arbeitsflaeche geht nahtlos in den Rahmen ueber, statt von einem
     * dunklen Band eingefasst zu werden. So ist es auch in der
     * Referenz-Umsetzung des Design-Systems geloest.
     *
     * Abgegrenzt wird mit einer Haarlinie, nicht mit einer Farbflaeche -
     * Schatten ODER Haarlinie, nie beides.
     * ------------------------------------------------------------------- */
    --chrome: 0 0% 100%;              /* weiss, wie die Karten */
    --chrome-foreground: 30 10% 22%;  /* dieselbe Schrift wie im Inhalt */
    --chrome-muted: 30 8% 42%;        /* ruhende Navigationszeile, 5,4:1 */
    --chrome-border: 40 14% 88%;      /* Haarlinie, wie --border */

    --border: 40 14% 88%;             /* Haarlinie */
    --input: 40 14% 84%;              /* Feldrand, dunkler als die Haarlinie */
    /* Fokusring: eine Spur dunkler als die Marke. Der Ring ist eine duenne
     * Linie auf hellem Grund und braucht dort 3:1 (WCAG 1.4.11); das
     * Markengruen selbst kommt gegen #fcfbf8 nur auf 2,55:1. Bei 40 %
     * Helligkeit sind es 3,05:1 - der Unterschied ist an einer 2px-Linie
     * nicht zu sehen, die Sichtbarkeit dagegen schon. */
    --ring: 95 59% 40%;

    /* -------------------------------------------------------------------
     * ZUSTANDSFARBEN (fest, nie umgefaerbt)
     * Uebernommen aus der geprueften Referenzpalette des dataviz-Skills.
     * Die vorherigen Werte waren die Bootstrap-4-Standardfarben
     * (#ffc107 #007bff #28a745 #dc3545). Deren Pruefung ergab:
     *   Rot-Gruen-Paar #dc3545 vs #28a745  ->  Delta E 3,5 (Deutan)
     * Das ist genau das Paar, das in den Auftraegen "beendet puenktlich"
     * von "beendet unpuenktlich" unterscheiden soll - und beide trugen
     * zusaetzlich dieselbe Form (Quadrat). Fuer rot-gruen-schwache Nutzer
     * war der Unterschied damit nicht wahrnehmbar.
     *
     * ZWINGEND: Eine Zustandsfarbe steht nie allein. Immer Symbol UND
     * Beschriftung daneben - so schreibt es die Referenzpalette vor, und
     * so ist das Rot-Gruen-Paar entschaerft.
     * ------------------------------------------------------------------- */
    --status-good: 120 86% 34%;       /* #0ca30c - erledigt, in Ordnung */
    --status-warning: 42 96% 54%;     /* #fab219 - Achtung, laeuft ab */
    --status-serious: 18 78% 64%;     /* #ec835a - ueberfaellig */
    --status-critical: 0 60% 52%;     /* #d03b3b - Fehler, zu spaet */

    --status-good-surface: 120 45% 94%;
    --status-warning-surface: 42 90% 94%;
    --status-serious-surface: 18 80% 94%;
    --status-critical-surface: 0 70% 96%;

    /* Textfarben AUF den hellen Zustandsflaechen (AA gegen die Flaeche) */
    --status-good-ink: 120 90% 22%;
    --status-warning-ink: 34 90% 26%;
    --status-serious-ink: 14 70% 32%;
    --status-critical-ink: 0 65% 34%;

    --destructive: 0 60% 52%;         /* = critical, damit Loeschen nicht eigenmaechtig faerbt */
    --destructive-foreground: 0 0% 100%;

    /* -------------------------------------------------------------------
     * BEREICHSFARBEN (Regionen der Empfaengerliste)
     * Feste Reihenfolge, nie durchgewuerfelt. Die vorherigen Werte waren
     * Material-Design-Toene nach Gefuehl gewaehlt; die Pruefung ergab
     * Orange gegen Gruen Delta E 5,9 (Protan) - durchgefallen.
     * Diese Reihenfolge besteht alle Pruefungen des Validators gegen den
     * App-Grund #fcfbf8: schlechtestes Nachbarpaar Delta E 9,2 (Deutan),
     * Normalsicht 27,6.
     * Belegt mit: validate_palette.js "#2a78d6,#eb6834,#1baf7a,#4a3aa7,#e87ba4"
     *             --surface "#fcfbf8" --mode light  ->  ALL CHECKS PASS
     * Die Bereichskuerzel stehen immer als Text im Abzeichen; damit ist die
     * geforderte Zweitkodierung erfuellt.
     * ------------------------------------------------------------------- */
    --region-1: 212 68% 50%;          /* #2a78d6 */
    --region-2: 18 82% 56%;           /* #eb6834 */
    --region-3: 162 74% 40%;          /* #1baf7a */
    --region-4: 249 49% 44%;          /* #4a3aa7 */
    --region-5: 338 68% 70%;          /* #e87ba4 */

    /* -------------------------------------------------------------------
     * RUNDUNGEN - genau drei Stufen
     * Die Form traegt den Unterschied zwischen "druecken" und
     * "hineinschreiben", nicht nur die Farbe.
     * ------------------------------------------------------------------- */
    --radius-control: 9999px;         /* Knoepfe, Chips, Abzeichen */
    --radius-surface: 0.75rem;        /* Karten, Dialoge, Menues */
    --radius-field: 0.375rem;         /* Eingaben, Zeilen, Menueeintraege */
    --radius: 0.75rem;                /* Rueckwaertskompatibel: shadcn liest das */

    /* -------------------------------------------------------------------
     * SCHATTEN - Schatten ODER Haarlinie, nie beides
     * Zwei Mittel fuer dieselbe Aussage ergeben eine doppelte Kante.
     * Vorher gab es vier Abstufungen (brand-sm/md/lg/xl), die sich
     * kaum unterschieden, plus Haarlinien auf denselben Elementen.
     * ------------------------------------------------------------------- */
    --shadow-card: 0 1px 2px rgba(45, 38, 30, 0.06);
    --shadow-raised: 0 8px 24px rgba(45, 38, 30, 0.12);

    /* Uebergaenge: zentral, nicht je Komponente */
    --motion-fast: 150ms;
    --motion-ease: cubic-bezier(0.2, 0, 0, 1);

    /* Gemeinsamer Seitenrand fuer Kopfzeile UND Inhalt.
     * Knappe Versaetze liest das Auge als Fehler - deshalb teilen sich
     * beide diesen Wert, und er waechst per clamp() statt an einem
     * Haltepunkt zu springen. */
    --page-inline: clamp(1rem, 0.5rem + 1.5vw, 2rem);

    /* Hoehe der festen Kopfzeile. Stand vorher als 56px / 3.5rem /
     * calc(100vh-56px) an sieben Stellen einzeln im Code. */
    --topbar-height: 3.5rem;
  }

  /* -------------------------------------------------------------------
   * DUNKELMODUS
   * Vorbereitet, aber noch nicht ausgeliefert: Ein Dunkelmodus, den nie
   * jemand angesehen hat, ist keiner. Die Stufen sind eigene Werte, keine
   * Umkehrung der hellen - erst pruefen, dann den Umschalter freigeben.
   * ------------------------------------------------------------------- */
  .dark {
    --background: 40 8% 9%;
    --foreground: 40 12% 92%;
    --card: 40 8% 12%;
    --card-foreground: 40 12% 92%;
    --popover: 40 8% 12%;
    --popover-foreground: 40 12% 92%;
    --muted: 40 6% 16%;
    --muted-foreground: 40 8% 65%;
    --accent: 40 6% 18%;
    --accent-foreground: 40 12% 92%;
    --border: 40 6% 22%;
    --input: 40 6% 26%;
    --primary: 97 40% 58%;            /* green-300: heller Grund braucht dunkle Schrift */
    --primary-foreground: 93 100% 10%;
    --primary-hover: 97 38% 74%;
    --primary-subtle: 96 30% 18%;
    --secondary: 40 6% 20%;
    --secondary-foreground: 40 12% 92%;
  }

  * {
    border-color: hsl(var(--border));
  }

  html {
    /* scroll-behavior: smooth stand vorher global und hat jeden
     * Ankersprung und jede Tastaturnavigation verzoegert. */
    -webkit-text-size-adjust: 100%;
  }

  body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* 1.45 statt leading-relaxed (1.625).
     * Die 1.625 sind eine LESE-Zeilenhoehe fuer Fliesstext. In einer
     * Oberflaeche, die aus Beschriftungen, Tabellenzellen und Knoepfen
     * besteht, wirkt jede einzelne Zeile dadurch aufgeblasen - und in
     * einer Zeile mit vier gestapelten Angaben summiert sich das. Das war
     * der groesste einzelne Grund fuer die Zeilenhoehe der Auftragsliste. */
    line-height: 1.45;
  }

  /* Fliesstext darf weiter atmen - aber nur dort, wo wirklich gelesen wird. */
  p {
    line-height: 1.55;
  }

  /* Zahlen, die untereinander stehen, muessen ausrichten. Ohne das
   * springen die Stellen von Zeile zu Zeile. Keine Monospace-Schrift -
   * das waere Stilmittel, keine Lesehilfe. */
  [data-value],
  [data-numeric],
  table td,
  table th {
    font-variant-numeric: tabular-nums;
  }

  /* Sichtbarer Fokus ueberall, ohne dass jede Komponente ihn selbst setzt. */
  :focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
  }
}

/* =========================================================================
 * SEITENTAFEL
 * Die Tafel (components/ui/side-panel.tsx) liegt fixed am rechten Rand.
 * Damit die Arbeitsflaeche daneben bedienbar BLEIBT - das ist ihr ganzer
 * Zweck -, zieht sich der Rahmen um ihre Breite zusammen, statt dass die
 * Tafel ihn ueberdeckt. Den Wert setzt ShellSqueeze auf <html>, den
 * Innenabstand traegt das Element mit data-app-shell.
 * Waehrend des Ziehens am Griff gibt es keinen Uebergang: Der Rahmen soll
 * an der Maus kleben, nicht hinterherfedern.
 * ========================================================================= */
[data-app-shell] {
  padding-inline-end: var(--side-panel-width, 0px);
  transition: padding-inline-end var(--motion-fast) var(--motion-ease);
}

html[data-side-panel-resizing] [data-app-shell] {
  transition: none;
}

/* =========================================================================
 * BEWEGUNG
 * 150 ms, ease-out, zentral gesetzt.
 * prefers-reduced-motion geht auf 1 ms, NICHT auf none: Radix-Komponenten
 * warten auf das Ende eines Uebergangs, bevor sie sich schliessen - bei
 * none kommt es nie.
 * ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================================
 * FINGERBEDIENUNG
 * 44 px Mindesthoehe nur bei grobem Zeiger. Am Schreibtisch waeren
 * 44 px hohe Zeilenmenues verschenkte Hoehe.
 * ========================================================================= */
@media (pointer: coarse) {
  button,
  [role='button'],
  a[href],
  input[type='checkbox'],
  select {
    min-height: 44px;
  }
}

/* =========================================================================
 * DRUCKEN
 * Jemand geht mit einem Ausdruck in die Besprechung - vor allem mit einem
 * Leistungsnachweis. Bedienelemente tragen data-print="hide".
 * Eingabefelder werden ENTRAHMT, nicht versteckt: Die Werte stehen in
 * Feldern; versteckt man sie, fehlt auf dem Ausdruck genau das, worum es geht.
 * ========================================================================= */
@media print {
  [data-print='hide'],
  nav,
  .top-bar {
    display: none !important;
  }

  body {
    background: #fff !important;
    color: #000 !important;
  }

  input,
  select,
  textarea {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    color: #000 !important;
    -webkit-appearance: none;
    appearance: none;
  }

  table {
    border-collapse: collapse;
  }

  table td,
  table th {
    border: 1px solid #999 !important;
  }

  /* Zeilen und Karten nicht ueber den Seitenumbruch reissen */
  tr,
  [data-print='keep-together'] {
    break-inside: avoid;
  }
}

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */ /* 3 */
  tab-size: 4; /* 3 */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
  html,
  body {
  margin: 0px;
  height: 100%;
  width: 100%;
  padding: 0px;
}

  body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
  color: hsl(var(--foreground));
    min-height: 100svh;
}
.\!container {
  width: 100% !important;
}
.container {
  width: 100%;
}
@media (min-width: 640px) {

  .\!container {
    max-width: 640px !important;
  }

  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {

  .\!container {
    max-width: 768px !important;
  }

  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {

  .\!container {
    max-width: 1024px !important;
  }

  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {

  .\!container {
    max-width: 1280px !important;
  }

  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {

  .\!container {
    max-width: 1536px !important;
  }

  .container {
    max-width: 1536px;
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none {
  pointer-events: none;
}
.visible {
  visibility: visible;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.inset-y-3 {
  top: 0.75rem;
  bottom: 0.75rem;
}
.bottom-0 {
  bottom: 0px;
}
.left-0 {
  left: 0px;
}
.left-0\.5 {
  left: 0.125rem;
}
.left-2 {
  left: 0.5rem;
}
.left-3 {
  left: 0.75rem;
}
.left-\[50\%\] {
  left: 50%;
}
.right-0 {
  right: 0px;
}
.right-3 {
  right: 0.75rem;
}
.right-5 {
  right: 1.25rem;
}
.top-0 {
  top: 0px;
}
.top-1\/2 {
  top: 50%;
}
.top-3 {
  top: 0.75rem;
}
.top-5 {
  top: 1.25rem;
}
.top-\[23\.1\%\] {
  top: 23.1%;
}
.top-\[38\.5\%\] {
  top: 38.5%;
}
.top-\[50\%\] {
  top: 50%;
}
.top-\[53\.8\%\] {
  top: 53.8%;
}
.top-\[69\.2\%\] {
  top: 69.2%;
}
.top-\[7\.7\%\] {
  top: 7.7%;
}
.top-\[84\.6\%\] {
  top: 84.6%;
}
.z-20 {
  z-index: 20;
}
.z-30 {
  z-index: 30;
}
.z-50 {
  z-index: 50;
}
.z-\[100010\] {
  z-index: 100010;
}
.z-\[60\] {
  z-index: 60;
}
.z-\[9\] {
  z-index: 9;
}
.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-auto {
  margin-left: auto;
}
.mr-1 {
  margin-right: 0.25rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.\!hidden {
  display: none !important;
}
.hidden {
  display: none;
}
.h-10 {
  height: 2.5rem;
}
.h-11 {
  height: 2.75rem;
}
.h-12 {
  height: 3rem;
}
.h-16 {
  height: 4rem;
}
.h-2 {
  height: 0.5rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-4 {
  height: 1rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[1px\] {
  height: 1px;
}
.h-\[53\.85\%\] {
  height: 53.85%;
}
.h-\[7\.7\%\] {
  height: 7.7%;
}
.h-\[var\(--radix-select-trigger-height\)\] {
  height: var(--radix-select-trigger-height);
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.max-h-64 {
  max-height: 16rem;
}
.max-h-72 {
  max-height: 18rem;
}
.max-h-96 {
  max-height: 24rem;
}
.min-h-0 {
  min-height: 0px;
}
.min-h-14 {
  min-height: 3.5rem;
}
.min-h-screen {
  min-height: 100vh;
}
.w-10 {
  width: 2.5rem;
}
.w-12 {
  width: 3rem;
}
.w-16 {
  width: 4rem;
}
.w-2 {
  width: 0.5rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-4 {
  width: 1rem;
}
.w-5 {
  width: 1.25rem;
}
.w-56 {
  width: 14rem;
}
.w-6 {
  width: 1.5rem;
}
.w-8 {
  width: 2rem;
}
.w-9 {
  width: 2.25rem;
}
.w-\[1px\] {
  width: 1px;
}
.w-\[3px\] {
  width: 3px;
}
.w-\[40\%\] {
  width: 40%;
}
.w-fit {
  width: fit-content;
}
.w-full {
  width: 100%;
}
.w-px {
  width: 1px;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-\[8rem\] {
  min-width: 8rem;
}
.min-w-\[var\(--radix-select-trigger-width\)\] {
  min-width: var(--radix-select-trigger-width);
}
.max-w-7xl {
  max-width: 80rem;
}
.max-w-\[8rem\] {
  max-width: 8rem;
}
.max-w-full {
  max-width: 100%;
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-sm {
  max-width: 24rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.shrink {
  flex-shrink: 1;
}
.shrink-0 {
  flex-shrink: 0;
}
.caption-bottom {
  caption-side: bottom;
}
.border-separate {
  border-collapse: separate;
}
.border-spacing-0 {
  --tw-border-spacing-x: 0px;
  --tw-border-spacing-y: 0px;
  border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
}
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-0 {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-8 {
  --tw-translate-x: 2rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-\[-50\%\] {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-\[-50\%\] {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes pulse {

  50% {
    opacity: .5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin {

  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.cursor-col-resize {
  cursor: col-resize;
}
.cursor-default {
  cursor: default;
}
.cursor-grab {
  cursor: grab;
}
.cursor-pointer {
  cursor: pointer;
}
.select-none {
  -webkit-user-select: none;
          user-select: none;
}
.resize {
  resize: both;
}
.flex-row {
  flex-direction: row;
}
.flex-row-reverse {
  flex-direction: row-reverse;
}
.flex-col {
  flex-direction: column;
}
.flex-col-reverse {
  flex-direction: column-reverse;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.space-y-0 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0px * var(--tw-space-y-reverse));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-visible {
  overflow: visible;
}
.overflow-y-auto {
  overflow-y: auto;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-control {
  border-radius: var(--radius-control);
}
.rounded-field {
  border-radius: var(--radius-field);
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: var(--radius-surface);
}
.rounded-md {
  border-radius: var(--radius-field);
}
.rounded-sm {
  border-radius: var(--radius-field);
}
.rounded-surface {
  border-radius: var(--radius-surface);
}
.rounded-xl {
  border-radius: 0.75rem;
}
.border {
  border-width: 1px;
}
.border-2 {
  border-width: 2px;
}
.border-4 {
  border-width: 4px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-l {
  border-left-width: 1px;
}
.border-l-4 {
  border-left-width: 4px;
}
.border-t {
  border-top-width: 1px;
}
.border-border {
  border-color: hsl(var(--border));
}
.border-input {
  border-color: hsl(var(--input));
}
.border-primary {
  border-color: hsl(var(--primary));
}
.border-transparent {
  border-color: transparent;
}
.border-t-transparent {
  border-top-color: transparent;
}
.bg-\[\#3c3b6e\] {
  --tw-bg-opacity: 1;
  background-color: rgb(60 59 110 / var(--tw-bg-opacity, 1));
}
.bg-\[\#b22234\] {
  --tw-bg-opacity: 1;
  background-color: rgb(178 34 52 / var(--tw-bg-opacity, 1));
}
.bg-\[\#dd0000\] {
  --tw-bg-opacity: 1;
  background-color: rgb(221 0 0 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fafafa\] {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
}
.bg-\[\#ffce00\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 206 0 / var(--tw-bg-opacity, 1));
}
.bg-\[rgba\(141\2c 198\2c 63\2c 0\.06\)\] {
  background-color: rgba(141,198,63,0.06);
}
.bg-background {
  background-color: hsl(var(--background));
}
.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-black\/25 {
  background-color: rgb(0 0 0 / 0.25);
}
.bg-black\/70 {
  background-color: rgb(0 0 0 / 0.7);
}
.bg-black\/80 {
  background-color: rgb(0 0 0 / 0.8);
}
.bg-border {
  background-color: hsl(var(--border));
}
.bg-card {
  background-color: hsl(var(--card));
}
.bg-destructive {
  background-color: hsl(var(--destructive));
}
.bg-destructive\/10 {
  background-color: hsl(var(--destructive) / 0.1);
}
.bg-forest-600 {
  background-color: hsl(var(--primary));
}
.bg-gray-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.bg-gray-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.bg-green-500 {
  background-color: hsl(var(--green-500));
}
.bg-muted {
  background-color: hsl(var(--muted));
}
.bg-muted\/50 {
  background-color: hsl(var(--muted) / 0.5);
}
.bg-popover {
  background-color: hsl(var(--popover));
}
.bg-primary {
  background-color: hsl(var(--primary));
}
.bg-primary\/10 {
  background-color: hsl(var(--primary) / 0.1);
}
.bg-primary\/5 {
  background-color: hsl(var(--primary) / 0.05);
}
.bg-red-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.bg-secondary {
  background-color: hsl(var(--secondary));
}
.bg-transparent {
  background-color: transparent;
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-yellow-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));
}
.fill-current {
  fill: currentColor;
}
.p-0 {
  padding: 0px;
}
.p-1 {
  padding: 0.25rem;
}
.p-4 {
  padding: 1rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-8 {
  padding: 2rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-7 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pl-10 {
  padding-left: 2.5rem;
}
.pl-2\.5 {
  padding-left: 0.625rem;
}
.pl-8 {
  padding-left: 2rem;
}
.pr-10 {
  padding-right: 2.5rem;
}
.pr-14 {
  padding-right: 3.5rem;
}
.pr-2 {
  padding-right: 0.5rem;
}
.pr-2\.5 {
  padding-right: 0.625rem;
}
.pr-8 {
  padding-right: 2rem;
}
.pt-0 {
  padding-top: 0px;
}
.pt-6 {
  padding-top: 1.5rem;
}
.pt-7 {
  padding-top: 1.75rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.align-middle {
  vertical-align: middle;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-\[0\.8125rem\] {
  font-size: 0.8125rem;
}
.text-\[0\.9375rem\] {
  font-size: 0.9375rem;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-bold {
  font-weight: 700;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-none {
  line-height: 1;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}
.text-card-foreground {
  color: hsl(var(--card-foreground));
}
.text-current {
  color: currentColor;
}
.text-destructive {
  color: hsl(var(--destructive));
}
.text-destructive-foreground {
  color: hsl(var(--destructive-foreground));
}
.text-foreground {
  color: hsl(var(--foreground));
}
.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-gray-800 {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.text-gray-900 {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.text-muted-foreground {
  color: hsl(var(--muted-foreground));
}
.text-muted-foreground\/40 {
  color: hsl(var(--muted-foreground) / 0.4);
}
.text-muted-foreground\/50 {
  color: hsl(var(--muted-foreground) / 0.5);
}
.text-muted-foreground\/60 {
  color: hsl(var(--muted-foreground) / 0.6);
}
.text-popover-foreground {
  color: hsl(var(--popover-foreground));
}
.text-primary {
  color: hsl(var(--primary));
}
.text-primary-foreground {
  color: hsl(var(--primary-foreground));
}
.text-primary-ink {
  color: hsl(var(--primary-ink));
}
.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-secondary {
  color: hsl(var(--secondary));
}
.text-secondary-foreground {
  color: hsl(var(--secondary-foreground));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.opacity-0 {
  opacity: 0;
}
.opacity-100 {
  opacity: 1;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.shadow-brand-md {
  --tw-shadow: var(--shadow-card);
  --tw-shadow-colored: var(--shadow-card);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-card {
  --tw-shadow: var(--shadow-card);
  --tw-shadow-colored: var(--shadow-card);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-raised {
  --tw-shadow: var(--shadow-raised);
  --tw-shadow-colored: var(--shadow-raised);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-card {
  --tw-shadow-color: hsl(var(--card));
  --tw-shadow: var(--tw-shadow-colored);
}
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.outline {
  outline-style: solid;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-offset-background {
  --tw-ring-offset-color: hsl(var(--background));
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition-all {
  transition-property: all;
  transition-timing-function: var(--motion-ease);
  transition-duration: var(--motion-fast);
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: var(--motion-ease);
  transition-duration: var(--motion-fast);
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: var(--motion-ease);
  transition-duration: var(--motion-fast);
}
.duration-150 {
  transition-duration: 150ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
@keyframes enter {

  from {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
  }
}
@keyframes exit {

  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
  }
}
.duration-150 {
  animation-duration: 150ms;
}
.duration-200 {
  animation-duration: 200ms;
}
.duration-300 {
  animation-duration: 300ms;
}
.ease-out {
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.running {
  animation-play-state: running;
}

/* ======================================================================
   Anmeldung

   Der Hintergrund ist leise.

   Vorher fuellten drei Verlaufsscheiben (skewY, 70vh und 55vh hoch) plus
   zwei weisse Akzentlinien das gesamte Fenster, und die Karte lag als
   halbdurchsichtiges Glas (blur 24px) darauf. Der Hintergrund rang um die
   Aufmerksamkeit, die dem Formular gehoert - und die Karte hatte
   gruenlichen Grund unter gruener Ueberschrift.

   Geblieben ist ein einziges Markenelement: eine schmale Leiste am oberen
   Rand im Markengruen. Farbe und ein wiederkehrendes Motiv reichen.
   ====================================================================== */

.app-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-color: hsl(var(--background));
  pointer-events: none;
}

/* Die beiden grossen Scheiben und die Akzentlinien entfallen ersatzlos.
   Die Klassen bleiben nur bestehen, damit AuthLayout unveraendert
   weiterlaeuft - sie zeichnen nichts mehr. */
.gradient-orb-1,
.gradient-orb-2,
.accent-line-1,
.accent-line-2 {
  display: none;
}

/* Das eine Markenelement: Leiste am oberen Rand, im Logo-Gruen.
   Hier steht kein Text darauf, deshalb ist #65b32e zulaessig. */
.gradient-orb-3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: hsl(var(--brand));
}

.auth-content {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  min-height: 100svh;
}

/* Karte: deckend, Haarlinie, ruhiger Schatten.
   shadow-lg statt shadow-2xl - der Rahmen soll die Karte tragen, nicht
   sie zur Buehne machen. */
.auth-content .rounded-xl {
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  box-shadow: var(--shadow-raised);
}

.auth-content .bg-primary\/5 {
  background-color: hsl(var(--primary-subtle));
}

/* ======= Ein- und Ausblenden von Meldungen ======= */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-6px); }
}

.notification-enter {
  animation: fadeIn var(--motion-fast) var(--motion-ease);
}

.notification-exit {
  animation: fadeOut var(--motion-fast) var(--motion-ease);
}

.file\:border-0::file-selector-button {
  border-width: 0px;
}

.file\:bg-transparent::file-selector-button {
  background-color: transparent;
}

.file\:text-sm::file-selector-button {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.file\:font-medium::file-selector-button {
  font-weight: 500;
}

.placeholder\:text-muted-foreground::placeholder {
  color: hsl(var(--muted-foreground));
}

.hover\:-translate-y-0\.5:hover {
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:bg-accent:hover {
  background-color: hsl(var(--accent));
}

.hover\:bg-destructive\/90:hover {
  background-color: hsl(var(--destructive) / 0.9);
}

.hover\:bg-forest-700:hover {
  background-color: hsl(var(--primary-hover));
}

.hover\:bg-gray-300:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}

.hover\:bg-muted:hover {
  background-color: hsl(var(--muted));
}

.hover\:bg-muted\/60:hover {
  background-color: hsl(var(--muted) / 0.6);
}

.hover\:bg-primary-hover:hover {
  background-color: hsl(var(--primary-hover));
}

.hover\:bg-secondary\/90:hover {
  background-color: hsl(var(--secondary) / 0.9);
}

.hover\:bg-transparent:hover {
  background-color: transparent;
}

.hover\:text-accent-foreground:hover {
  color: hsl(var(--accent-foreground));
}

.hover\:text-foreground:hover {
  color: hsl(var(--foreground));
}

.hover\:text-muted-foreground:hover {
  color: hsl(var(--muted-foreground));
}

.hover\:text-primary-ink:hover {
  color: hsl(var(--primary-ink));
}

.hover\:underline:hover {
  text-decoration-line: underline;
}

.hover\:opacity-100:hover {
  opacity: 1;
}

.hover\:opacity-80:hover {
  opacity: 0.8;
}

.focus\:border-primary:focus {
  border-color: hsl(var(--primary));
}

.focus\:bg-accent:focus {
  background-color: hsl(var(--accent));
}

.focus\:text-accent-foreground:focus {
  color: hsl(var(--accent-foreground));
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-primary:focus {
  --tw-ring-color: hsl(var(--primary));
}

.focus\:ring-ring:focus {
  --tw-ring-color: hsl(var(--ring));
}

.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
}

.focus-visible\:border-primary:focus-visible {
  border-color: hsl(var(--primary));
}

.focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-primary:focus-visible {
  --tw-ring-color: hsl(var(--primary));
}

.focus-visible\:ring-ring:focus-visible {
  --tw-ring-color: hsl(var(--ring));
}

.focus-visible\:ring-offset-0:focus-visible {
  --tw-ring-offset-width: 0px;
}

.focus-visible\:ring-offset-2:focus-visible {
  --tw-ring-offset-width: 2px;
}

.active\:cursor-grabbing:active {
  cursor: grabbing;
}

.disabled\:pointer-events-none:disabled {
  pointer-events: none;
}

.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}

.disabled\:opacity-50:disabled {
  opacity: 0.5;
}

.group\/resize:hover .group-hover\/resize\:w-\[3px\] {
  width: 3px;
}

.group\/head:hover .group-hover\/head\:bg-border {
  background-color: hsl(var(--border));
}

.group\/resize:hover .group-hover\/resize\:bg-primary {
  background-color: hsl(var(--primary));
}

.group:hover .group-hover\:bg-muted\/60 {
  background-color: hsl(var(--muted) / 0.6);
}

.group:hover .group-hover\:bg-ring {
  background-color: hsl(var(--ring));
}

.group:focus-visible .group-focus-visible\:bg-ring {
  background-color: hsl(var(--ring));
}

.peer:disabled ~ .peer-disabled\:cursor-not-allowed {
  cursor: not-allowed;
}

.peer:disabled ~ .peer-disabled\:opacity-70 {
  opacity: 0.7;
}

.data-\[disabled\]\:pointer-events-none[data-disabled] {
  pointer-events: none;
}

.data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
  --tw-translate-y: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[side\=top\]\:-translate-y-1[data-side="top"] {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[resizing\]\:select-none[data-resizing] {
  -webkit-user-select: none;
          user-select: none;
}

.data-\[state\=active\]\:bg-background[data-state="active"] {
  background-color: hsl(var(--background));
}

.data-\[state\=checked\]\:bg-primary[data-state="checked"] {
  background-color: hsl(var(--primary));
}

.data-\[state\=open\]\:bg-accent[data-state="open"] {
  background-color: hsl(var(--accent));
}

.data-\[state\=selected\]\:bg-muted[data-state="selected"] {
  background-color: hsl(var(--muted));
}

.data-\[state\=active\]\:text-foreground[data-state="active"] {
  color: hsl(var(--foreground));
}

.data-\[state\=checked\]\:text-primary-foreground[data-state="checked"] {
  color: hsl(var(--primary-foreground));
}

.data-\[disabled\]\:opacity-50[data-disabled] {
  opacity: 0.5;
}

.data-\[state\=active\]\:shadow-sm[data-state="active"] {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.data-\[resizing\]\:duration-0[data-resizing] {
  transition-duration: 0s;
}

.data-\[state\=open\]\:animate-in[data-state="open"] {
  animation-name: enter;
  animation-duration: var(--motion-fast);
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.data-\[state\=closed\]\:animate-out[data-state="closed"] {
  animation-name: exit;
  animation-duration: var(--motion-fast);
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
  --tw-exit-opacity: 0;
}

.data-\[state\=open\]\:fade-in-0[data-state="open"] {
  --tw-enter-opacity: 0;
}

.data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
  --tw-exit-scale: .95;
}

.data-\[state\=open\]\:zoom-in-95[data-state="open"] {
  --tw-enter-scale: .95;
}

.data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
  --tw-enter-translate-y: -0.5rem;
}

.data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
  --tw-enter-translate-x: 0.5rem;
}

.data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
  --tw-enter-translate-x: -0.5rem;
}

.data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
  --tw-enter-translate-y: 0.5rem;
}

.data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state="closed"] {
  --tw-exit-translate-x: -50%;
}

.data-\[state\=closed\]\:slide-out-to-right-10[data-state="closed"] {
  --tw-exit-translate-x: 2.5rem;
}

.data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state="closed"] {
  --tw-exit-translate-y: -48%;
}

.data-\[state\=open\]\:slide-in-from-left-1\/2[data-state="open"] {
  --tw-enter-translate-x: -50%;
}

.data-\[state\=open\]\:slide-in-from-right-10[data-state="open"] {
  --tw-enter-translate-x: 2.5rem;
}

.data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state="open"] {
  --tw-enter-translate-y: -48%;
}

.data-\[resizing\]\:duration-0[data-resizing] {
  animation-duration: 0s;
}

.group[data-resizing] .group-data-\[resizing\]\:bg-ring {
  background-color: hsl(var(--ring));
}

@media (min-width: 640px) {

  .sm\:inset-y-4 {
    top: 1rem;
    bottom: 1rem;
  }

  .sm\:right-4 {
    right: 1rem;
  }

  .sm\:mt-0 {
    margin-top: 0px;
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:justify-end {
    justify-content: flex-end;
  }

  .sm\:space-x-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
  }

  .sm\:rounded-lg {
    border-radius: var(--radius-surface);
  }

  .sm\:text-left {
    text-align: left;
  }
}

.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]) {
  padding-right: 0px;
}

.\[\&\>span\]\:line-clamp-1>span {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.\[\&_svg\]\:shrink-0 svg {
  flex-shrink: 0;
}

.\[\&_tr\:last-child\>td\]\:border-b-0 tr:last-child>td {
  border-bottom-width: 0px;
}