@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=JetBrains+Mono:wght@400;500;600;700&display=swap");

/* Local JetBrains Mono so the monospace headline number resolves even when the
   Google Fonts CDN is unavailable. The bundled JetBrainsMono.woff2 is a
   variable font covering the 400-700 weight range; regular and bold are
   declared against the same local file. The CDN @import above remains as a
   fallback for the other families. */

@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/JetBrainsMono.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/JetBrainsMono.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

*, ::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 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 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: var(--font-mono), 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::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

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;
}

/* color-scheme lives on :root (not body) so the browser paints the root
     canvas, scrollbars, and native form controls dark. Without this the UA
     stylesheet keeps the html canvas white, which shows through whenever the
     body is shorter than the viewport or during overscroll. The app is
     unconditionally dark: no .dark class, no toggle. */

:root {
    color-scheme: dark;
    --font-display: "Space Grotesk", sans-serif;
    --font-body: "DM Sans", sans-serif;
    --font-mono: "JetBrains Mono", monospace;
    --radius: 2px;

    /* Forge Ledger: deep graphite-blue neutral base (dark terminal).
       Dark operational theme is unconditional: the dark token values live
       in :root so the app always renders as a near-black trading terminal
       without any class management. */
    --background: 0.155 0.02 250;
    --foreground: 0.93 0.01 250;
    --card: 0.19 0.022 250;
    --card-foreground: 0.93 0.01 250;
    --popover: 0.21 0.024 250;
    --popover-foreground: 0.93 0.01 250;

    --primary: 0.62 0.1 245;
    --primary-foreground: 0.16 0.03 250;

    --secondary: 0.23 0.024 250;
    --secondary-foreground: 0.85 0.01 250;
    --muted: 0.23 0.024 250;
    --muted-foreground: 0.6 0.015 250;

    /* Chart axis label: a dedicated legible token for chart tick labels.
       Brighter than muted-foreground (0.6) so it clears 4.5:1 against the
       card/panel background (0.19) for WCAG AA, but below foreground (0.93)
       so it does not compete with the plotted line. */
    --axis-label: 0.78 0.02 250;

    --accent: 0.26 0.03 250;
    --accent-foreground: 0.9 0.01 250;

    --destructive: 0.58 0.2 25;
    --destructive-foreground: 0.97 0.01 250;

    --border: 0.28 0.025 250;
    --input: 0.28 0.025 250;
    --ring: 0.62 0.1 245;

    /* Semantic market signals. Success is the positive colour for price
       down (savings). Danger is the negative colour for price up (increase).
       Warning is reserved for shortage notices, not interactive chrome. */
    --success: 0.62 0.14 160; /* emerald: savings / lower price */
    --success-foreground: 0.16 0.03 250;
    --danger: 0.62 0.2 25; /* crimson: price increase */
    --danger-foreground: 0.97 0.01 250;
    --warning: 0.78 0.15 75; /* warm amber: shortage */
    --warning-foreground: 0.16 0.04 60;

    /* True cost per usable unit: the decision-driving figure for the Yield
       and True Cost feature. A bright violet, distinct from the raw price
       (muted-foreground), the best-price lead (foreground), and the primary
       link tone. Brighter than primary so a buyer reads true cost as the
       number that matters, without it reading as an interactive link. Clears
       WCAG AA against card (0.19) and background (0.155). */
    --true-cost: 0.72 0.13 270;

    /* Brand tier system: the three procurement tiers in a foodservice
       catalog. National brand is the reference anchor (cool steel blue).
       Premium house label is the high-value tier (teal). Value house label
       is the budget tier (amber). Distinct hues so a buyer reads the tier at
       a glance, but muted enough to stay professional procurement chrome, not
       consumer-brand loud. These hues are separate from the price-direction
       semantics (success/danger/warning) so a tier badge never collides with
       a price delta. */
    --tier-national: 0.72 0.06 250;
    --tier-premium: 0.72 0.1 190;
    --tier-value: 0.78 0.13 75;

    /* Order-minimums and constraint math. Three recommendation states a buyer
       sees when a supplier switch is gated by a delivery/case minimum.
       --supplier-info is cool informational blue for delivery/minimum metadata
       (min dollars, case min, delivery days). --blocked is a desaturated slate
       for rows that are 'not viable on its own' because spend does not clear
       the minimum; --blocked-surface is the quiet surface behind that row.
       --combined is a distinct teal for 'combined viable' rows (switch clears
       the minimum only when grouped with other items from the same supplier),
       deliberately separate from the emerald success tone so a combined win
       reads as a different, conditional kind of saving. */
    --supplier-info: 0.72 0.08 240;
    --blocked: 0.55 0.02 250;
    --blocked-surface: 0.17 0.015 250;
    --combined: 0.72 0.11 190;

    /* Weekly Order: whole-basket optimization. The declared winner carries a
       bright gold (distinct from the emerald savings tone and the amber
       warning tone) so the winning supplier reads as the decision, not a
       price signal. The runner-up is a desaturated steel so it sits clearly
       second. The landed-cost figure is the loudest number per supplier row
       and takes the winner gold when it wins. */

    /* Weekly Order: whole-basket optimization. The declared winner carries a
       bright gold (distinct from the emerald savings tone and the amber
       warning tone) so the winning supplier reads as the decision, not a
       price signal. The runner-up is a desaturated steel so it sits clearly
       second. The landed-cost figure is the loudest number per supplier row
       and takes the winner gold when it wins. */
    --winner: 0.82 0.15 85;
    --winner-foreground: 0.14 0.03 250;
    --runner-up: 0.72 0.06 250;
    --split: 0.72 0.11 190;

    --chart-1: 0.62 0.14 160;
    --chart-2: 0.62 0.2 25;
    --chart-3: 0.78 0.15 75;
    --chart-4: 0.62 0.1 245;
    --chart-5: 0.6 0.12 250;

    --sidebar: 0.17 0.02 250;
    --sidebar-foreground: 0.9 0.01 250;
    --sidebar-primary: 0.62 0.1 245;
    --sidebar-primary-foreground: 0.16 0.03 250;
    --sidebar-accent: 0.24 0.026 250;
    --sidebar-accent-foreground: 0.9 0.01 250;
    --sidebar-border: 0.28 0.025 250;
    --sidebar-ring: 0.62 0.1 245;

    /* Inline data-viz dimensions. Kept as tokens so components never hold
       arbitrary pixel values; the trading-terminal aesthetic wants small,
       quiet, hairline-thin marks. */
    --sparkline-width: 60px;
    --sparkline-height: 20px;
    --sparkline-stroke: 1px;
    --sparkline-dot-stroke: 1px;
    --spread-bar-width: 96px;
    --spread-bar-height: 4px;
    --spread-bar-marker-width: 2px;
    --spread-bar-marker-height: 10px;
    --space-1: 0.25rem;

    /* Menu margin table: a minimum rendered width so the dense numeric
       columns stay readable and the table scrolls horizontally below the
       tab: breakpoint (900px) instead of squishing. */
    --menu-table-min-width: 720px;
  }

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

/* html and body both carry the page background and fill the viewport so the
     near-black canvas never falls back to the UA white. min-height: 100svh
     guarantees coverage even when content is short; the small viewport unit
     avoids mobile address-bar jump. */

html{
  background-color: oklch(var(--background));
  color: oklch(var(--foreground));
    min-height: 100svh;
}

body{
  background-color: oklch(var(--background));
  font-family: var(--font-body), sans-serif;
  color: oklch(var(--foreground));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
    min-height: 100svh;
}

.container{
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 2rem;
  padding-left: 2rem;
}

@media (min-width: 1400px){

  .container{
    max-width: 1400px;
  }
}

.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;
}

.invisible{
  visibility: hidden;
}

.collapse{
  visibility: collapse;
}

.static{
  position: static;
}

.fixed{
  position: fixed;
}

.absolute{
  position: absolute;
}

.relative{
  position: relative;
}

.sticky{
  position: sticky;
}

.inset-0{
  inset: 0px;
}

.inset-x-0{
  left: 0px;
  right: 0px;
}

.inset-y-0{
  top: 0px;
  bottom: 0px;
}

.-bottom-12{
  bottom: -3rem;
}

.-left-12{
  left: -3rem;
}

.-right-12{
  right: -3rem;
}

.-top-12{
  top: -3rem;
}

.bottom-0{
  bottom: 0px;
}

.left-0{
  left: 0px;
}

.left-1\/2{
  left: 50%;
}

.left-2{
  left: 0.5rem;
}

.left-3{
  left: 0.75rem;
}

.left-\[50\%\]{
  left: 50%;
}

.right-0{
  right: 0px;
}

.right-1{
  right: 0.25rem;
}

.right-2{
  right: 0.5rem;
}

.right-3{
  right: 0.75rem;
}

.right-4{
  right: 1rem;
}

.top-0{
  top: 0px;
}

.top-1\.5{
  top: 0.375rem;
}

.top-1\/2{
  top: 50%;
}

.top-3\.5{
  top: 0.875rem;
}

.top-4{
  top: 1rem;
}

.top-\[1px\]{
  top: 1px;
}

.top-\[50\%\]{
  top: 50%;
}

.top-\[60\%\]{
  top: 60%;
}

.top-full{
  top: 100%;
}

.isolate{
  isolation: isolate;
}

.z-10{
  z-index: 10;
}

.z-20{
  z-index: 20;
}

.z-50{
  z-index: 50;
}

.z-\[1\]{
  z-index: 1;
}

.col-start-2{
  grid-column-start: 2;
}

.row-span-2{
  grid-row: span 2 / span 2;
}

.row-start-1{
  grid-row-start: 1;
}

.-mx-1{
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}

.mx-2{
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.mx-3\.5{
  margin-left: 0.875rem;
  margin-right: 0.875rem;
}

.mx-auto{
  margin-left: auto;
  margin-right: auto;
}

.my-0\.5{
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
}

.my-1{
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.-ml-1{
  margin-left: -0.25rem;
}

.-ml-4{
  margin-left: -1rem;
}

.-mt-4{
  margin-top: -1rem;
}

.ml-1{
  margin-left: 0.25rem;
}

.ml-2{
  margin-left: 0.5rem;
}

.ml-auto{
  margin-left: auto;
}

.mr-1{
  margin-right: 0.25rem;
}

.mt-0\.5{
  margin-top: 0.125rem;
}

.mt-1{
  margin-top: 0.25rem;
}

.mt-1\.5{
  margin-top: 0.375rem;
}

.mt-2{
  margin-top: 0.5rem;
}

.mt-3{
  margin-top: 0.75rem;
}

.mt-4{
  margin-top: 1rem;
}

.mt-auto{
  margin-top: auto;
}

.line-clamp-1{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.block{
  display: block;
}

.inline-block{
  display: inline-block;
}

.inline{
  display: inline;
}

.flex{
  display: flex;
}

.inline-flex{
  display: inline-flex;
}

.table{
  display: table;
}

.table-caption{
  display: table-caption;
}

.table-cell{
  display: table-cell;
}

.table-row{
  display: table-row;
}

.grid{
  display: grid;
}

.hidden{
  display: none;
}

.aspect-square{
  aspect-ratio: 1 / 1;
}

.aspect-video{
  aspect-ratio: 16 / 9;
}

.size-1\.5{
  width: 0.375rem;
  height: 0.375rem;
}

.size-2{
  width: 0.5rem;
  height: 0.5rem;
}

.size-2\.5{
  width: 0.625rem;
  height: 0.625rem;
}

.size-3{
  width: 0.75rem;
  height: 0.75rem;
}

.size-3\.5{
  width: 0.875rem;
  height: 0.875rem;
}

.size-4{
  width: 1rem;
  height: 1rem;
}

.size-5{
  width: 1.25rem;
  height: 1.25rem;
}

.size-6{
  width: 1.5rem;
  height: 1.5rem;
}

.size-7{
  width: 1.75rem;
  height: 1.75rem;
}

.size-8{
  width: 2rem;
  height: 2rem;
}

.size-9{
  width: 2.25rem;
  height: 2.25rem;
}

.size-auto{
  width: auto;
  height: auto;
}

.size-full{
  width: 100%;
  height: 100%;
}

.h-0\.5{
  height: 0.125rem;
}

.h-1\.5{
  height: 0.375rem;
}

.h-10{
  height: 2.5rem;
}

.h-12{
  height: 3rem;
}

.h-14{
  height: 3.5rem;
}

.h-2{
  height: 0.5rem;
}

.h-2\.5{
  height: 0.625rem;
}

.h-4{
  height: 1rem;
}

.h-40{
  height: 10rem;
}

.h-48{
  height: 12rem;
}

.h-5{
  height: 1.25rem;
}

.h-6{
  height: 1.5rem;
}

.h-64{
  height: 16rem;
}

.h-7{
  height: 1.75rem;
}

.h-8{
  height: 2rem;
}

.h-9{
  height: 2.25rem;
}

.h-\[1\.15rem\]{
  height: 1.15rem;
}

.h-\[calc\(100\%-1px\)\]{
  height: calc(100% - 1px);
}

.h-\[var\(--radix-navigation-menu-viewport-height\)\]{
  height: var(--radix-navigation-menu-viewport-height);
}

.h-\[var\(--radix-select-trigger-height\)\]{
  height: var(--radix-select-trigger-height);
}

.h-auto{
  height: auto;
}

.h-full{
  height: 100%;
}

.h-px{
  height: 1px;
}

.h-svh{
  height: 100svh;
}

.max-h-\[300px\]{
  max-height: 300px;
}

.min-h-0{
  min-height: 0px;
}

.min-h-16{
  min-height: 4rem;
}

.min-h-4{
  min-height: 1rem;
}

.w-0{
  width: 0px;
}

.w-0\.5{
  width: 0.125rem;
}

.w-1{
  width: 0.25rem;
}

.w-1\/2{
  width: 50%;
}

.w-10{
  width: 2.5rem;
}

.w-12{
  width: 3rem;
}

.w-16{
  width: 4rem;
}

.w-2{
  width: 0.5rem;
}

.w-2\.5{
  width: 0.625rem;
}

.w-20{
  width: 5rem;
}

.w-24{
  width: 6rem;
}

.w-28{
  width: 7rem;
}

.w-3{
  width: 0.75rem;
}

.w-3\/4{
  width: 75%;
}

.w-4{
  width: 1rem;
}

.w-40{
  width: 10rem;
}

.w-44{
  width: 11rem;
}

.w-5{
  width: 1.25rem;
}

.w-64{
  width: 16rem;
}

.w-72{
  width: 18rem;
}

.w-8{
  width: 2rem;
}

.w-9{
  width: 2.25rem;
}

.w-96{
  width: 24rem;
}

.w-\[100px\]{
  width: 100px;
}

.w-\[14\%\]{
  width: 14%;
}

.w-\[34\%\]{
  width: 34%;
}

.w-\[40\%\]{
  width: 40%;
}

.w-\[8\%\]{
  width: 8%;
}

.w-auto{
  width: auto;
}

.w-fit{
  width: -moz-fit-content;
  width: fit-content;
}

.w-full{
  width: 100%;
}

.w-max{
  width: -moz-max-content;
  width: max-content;
}

.w-px{
  width: 1px;
}

.min-w-0{
  min-width: 0px;
}

.min-w-10{
  min-width: 2.5rem;
}

.min-w-5{
  min-width: 1.25rem;
}

.min-w-8{
  min-width: 2rem;
}

.min-w-9{
  min-width: 2.25rem;
}

.min-w-\[12rem\]{
  min-width: 12rem;
}

.min-w-\[8rem\]{
  min-width: 8rem;
}

.min-w-\[var\(--radix-select-trigger-width\)\]{
  min-width: var(--radix-select-trigger-width);
}

.max-w-2xl{
  max-width: 42rem;
}

.max-w-32{
  max-width: 8rem;
}

.max-w-3xl{
  max-width: 48rem;
}

.max-w-40{
  max-width: 10rem;
}

.max-w-\[calc\(100\%-2rem\)\]{
  max-width: calc(100% - 2rem);
}

.max-w-max{
  max-width: -moz-max-content;
  max-width: max-content;
}

.max-w-md{
  max-width: 28rem;
}

.max-w-sm{
  max-width: 24rem;
}

.max-w-xs{
  max-width: 20rem;
}

.flex-1{
  flex: 1 1 0%;
}

.flex-shrink{
  flex-shrink: 1;
}

.shrink{
  flex-shrink: 1;
}

.shrink-0{
  flex-shrink: 0;
}

.grow{
  flex-grow: 1;
}

.grow-0{
  flex-grow: 0;
}

.basis-full{
  flex-basis: 100%;
}

.caption-bottom{
  caption-side: bottom;
}

.border-collapse{
  border-collapse: collapse;
}

.-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-x-px{
  --tw-translate-x: -1px;
  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-\[-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-x-px{
  --tw-translate-x: 1px;
  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-0\.5{
  --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));
}

.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));
}

.translate-y-\[calc\(-50\%_-_2px\)\]{
  --tw-translate-y: calc(-50% - 2px);
  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));
}

.rotate-180{
  --tw-rotate: 180deg;
  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));
}

.rotate-45{
  --tw-rotate: 45deg;
  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));
}

.rotate-90{
  --tw-rotate: 90deg;
  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-default{
  cursor: default;
}

.cursor-pointer{
  cursor: pointer;
}

.touch-none{
  touch-action: none;
}

.select-none{
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.resize{
  resize: both;
}

.scroll-my-1{
  scroll-margin-top: 0.25rem;
  scroll-margin-bottom: 0.25rem;
}

.scroll-py-1{
  scroll-padding-top: 0.25rem;
  scroll-padding-bottom: 0.25rem;
}

.list-none{
  list-style-type: none;
}

.auto-rows-min{
  grid-auto-rows: min-content;
}

.grid-cols-1{
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-\[0_1fr\]{
  grid-template-columns: 0 1fr;
}

.grid-rows-\[auto_auto\]{
  grid-template-rows: auto auto;
}

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

.flex-col{
  flex-direction: column;
}

.flex-col-reverse{
  flex-direction: column-reverse;
}

.flex-wrap{
  flex-wrap: wrap;
}

.items-start{
  align-items: flex-start;
}

.items-end{
  align-items: flex-end;
}

.items-center{
  align-items: center;
}

.items-baseline{
  align-items: baseline;
}

.items-stretch{
  align-items: stretch;
}

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

.justify-center{
  justify-content: center;
}

.justify-between{
  justify-content: space-between;
}

.justify-items-start{
  justify-items: start;
}

.gap-0\.5{
  gap: 0.125rem;
}

.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;
}

.gap-6{
  gap: 1.5rem;
}

.gap-px{
  gap: 1px;
}

.gap-x-4{
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}

.gap-x-5{
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
}

.gap-y-0\.5{
  row-gap: 0.125rem;
}

.gap-y-1{
  row-gap: 0.25rem;
}

.gap-y-2{
  row-gap: 0.5rem;
}

.self-start{
  align-self: flex-start;
}

.justify-self-end{
  justify-self: end;
}

.overflow-auto{
  overflow: auto;
}

.overflow-hidden{
  overflow: hidden;
}

.overflow-x-auto{
  overflow-x: auto;
}

.overflow-y-auto{
  overflow-y: auto;
}

.overflow-x-hidden{
  overflow-x: hidden;
}

.truncate{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whitespace-nowrap{
  white-space: nowrap;
}

.text-balance{
  text-wrap: balance;
}

.break-words{
  overflow-wrap: break-word;
}

.rounded{
  border-radius: 0.25rem;
}

.rounded-\[2px\]{
  border-radius: 2px;
}

.rounded-\[4px\]{
  border-radius: 4px;
}

.rounded-\[inherit\]{
  border-radius: inherit;
}

.rounded-full{
  border-radius: 9999px;
}

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

.rounded-md{
  border-radius: calc(var(--radius) - 2px);
}

.rounded-none{
  border-radius: 0px;
}

.rounded-sm{
  border-radius: calc(var(--radius) - 4px);
}

.rounded-l-md{
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}

.rounded-r-md{
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}

.rounded-tl-sm{
  border-top-left-radius: calc(var(--radius) - 4px);
}

.border{
  border-width: 1px;
}

.border-\[1\.5px\]{
  border-width: 1.5px;
}

.border-y{
  border-top-width: 1px;
  border-bottom-width: 1px;
}

.border-b{
  border-bottom-width: 1px;
}

.border-l{
  border-left-width: 1px;
}

.border-l-2{
  border-left-width: 2px;
}

.border-r{
  border-right-width: 1px;
}

.border-t{
  border-top-width: 1px;
}

.border-dashed{
  border-style: dashed;
}

.border-border{
  border-color: oklch(var(--border));
}

.border-danger\/40{
  border-color: oklch(var(--danger) / 0.4);
}

.border-input{
  border-color: oklch(var(--input));
}

.border-primary{
  --tw-border-opacity: 1;
  border-color: oklch(var(--primary) / var(--tw-border-opacity, 1));
}

.border-primary\/30{
  border-color: oklch(var(--primary) / 0.3);
}

.border-sidebar-border{
  border-color: oklch(var(--sidebar-border));
}

.border-success\/40{
  border-color: oklch(var(--success) / 0.4);
}

.border-transparent{
  border-color: transparent;
}

.border-warning{
  --tw-border-opacity: 1;
  border-color: oklch(var(--warning) / var(--tw-border-opacity, 1));
}

.border-warning\/40{
  border-color: oklch(var(--warning) / 0.4);
}

.border-b-\[color-mix\(in_oklch\2c var\(--border\)_60\%\2c transparent\)\]{
  border-bottom-color: color-mix(in oklch,var(--border) 60%,transparent);
}

.border-l-transparent{
  border-left-color: transparent;
}

.border-t-transparent{
  border-top-color: transparent;
}

.bg-accent{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.bg-background{
  background-color: oklch(var(--background));
}

.bg-black\/50{
  background-color: rgb(0 0 0 / 0.5);
}

.bg-border{
  background-color: oklch(var(--border));
}

.bg-card{
  background-color: oklch(var(--card));
}

.bg-danger{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--danger) / var(--tw-bg-opacity, 1));
}

.bg-danger\/10{
  background-color: oklch(var(--danger) / 0.1);
}

.bg-destructive{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--destructive) / var(--tw-bg-opacity, 1));
}

.bg-foreground{
  background-color: oklch(var(--foreground));
}

.bg-muted{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--muted) / var(--tw-bg-opacity, 1));
}

.bg-muted-foreground{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--muted-foreground) / var(--tw-bg-opacity, 1));
}

.bg-muted\/40{
  background-color: oklch(var(--muted) / 0.4);
}

.bg-muted\/50{
  background-color: oklch(var(--muted) / 0.5);
}

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

.bg-popover{
  background-color: oklch(var(--popover));
}

.bg-primary{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.bg-primary\/10{
  background-color: oklch(var(--primary) / 0.1);
}

.bg-primary\/20{
  background-color: oklch(var(--primary) / 0.2);
}

.bg-secondary{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--secondary) / var(--tw-bg-opacity, 1));
}

.bg-secondary\/40{
  background-color: oklch(var(--secondary) / 0.4);
}

.bg-secondary\/60{
  background-color: oklch(var(--secondary) / 0.6);
}

.bg-sidebar{
  background-color: oklch(var(--sidebar));
}

.bg-sidebar-accent{
  background-color: oklch(var(--sidebar-accent));
}

.bg-sidebar-border{
  background-color: oklch(var(--sidebar-border));
}

.bg-success{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--success) / var(--tw-bg-opacity, 1));
}

.bg-success\/10{
  background-color: oklch(var(--success) / 0.1);
}

.bg-success\/5{
  background-color: oklch(var(--success) / 0.05);
}

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

.bg-warning{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--warning) / var(--tw-bg-opacity, 1));
}

.bg-warning\/10{
  background-color: oklch(var(--warning) / 0.1);
}

.fill-current{
  fill: currentColor;
}

.fill-primary{
  fill: oklch(var(--primary) / 1);
}

.p-0{
  padding: 0px;
}

.p-1{
  padding: 0.25rem;
}

.p-2{
  padding: 0.5rem;
}

.p-3{
  padding: 0.75rem;
}

.p-4{
  padding: 1rem;
}

.p-6{
  padding: 1.5rem;
}

.p-8{
  padding: 2rem;
}

.p-\[3px\]{
  padding: 3px;
}

.p-px{
  padding: 1px;
}

.px-1{
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.px-1\.5{
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

.px-2{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-2\.5{
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4{
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-6{
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.py-0\.5{
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.py-1{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-1\.5{
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-10{
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.py-12{
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-16{
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.py-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-3{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-4{
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-6{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-8{
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.pb-2{
  padding-bottom: 0.5rem;
}

.pb-3{
  padding-bottom: 0.75rem;
}

.pb-4{
  padding-bottom: 1rem;
}

.pl-10{
  padding-left: 2.5rem;
}

.pl-2{
  padding-left: 0.5rem;
}

.pl-4{
  padding-left: 1rem;
}

.pl-8{
  padding-left: 2rem;
}

.pr-1{
  padding-right: 0.25rem;
}

.pr-2{
  padding-right: 0.5rem;
}

.pr-2\.5{
  padding-right: 0.625rem;
}

.pr-8{
  padding-right: 2rem;
}

.pt-0{
  padding-top: 0px;
}

.pt-0\.5{
  padding-top: 0.125rem;
}

.pt-1{
  padding-top: 0.25rem;
}

.pt-3{
  padding-top: 0.75rem;
}

.pt-4{
  padding-top: 1rem;
}

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

.text-center{
  text-align: center;
}

.text-right{
  text-align: right;
}

.align-top{
  vertical-align: top;
}

.align-middle{
  vertical-align: middle;
}

.font-body{
  font-family: var(--font-body), sans-serif;
}

.font-display{
  font-family: var(--font-display), serif;
}

.font-mono{
  font-family: var(--font-mono), monospace;
}

.text-2xl{
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl{
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-\[0\.8rem\]{
  font-size: 0.8rem;
}

.text-\[10px\]{
  font-size: 10px;
}

.text-\[11px\]{
  font-size: 11px;
}

.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;
}

.normal-case{
  text-transform: none;
}

.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;
}

.tracking-tight{
  letter-spacing: -0.025em;
}

.tracking-wide{
  letter-spacing: 0.025em;
}

.tracking-wider{
  letter-spacing: 0.05em;
}

.tracking-widest{
  letter-spacing: 0.1em;
}

.text-\[oklch\(var\(--winner\)\)\]{
  color: oklch(var(--winner));
}

.text-accent-foreground{
  color: oklch(var(--accent-foreground));
}

.text-card-foreground{
  color: oklch(var(--card-foreground));
}

.text-current{
  color: currentColor;
}

.text-danger{
  --tw-text-opacity: 1;
  color: oklch(var(--danger) / var(--tw-text-opacity, 1));
}

.text-destructive{
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}

.text-destructive-foreground{
  color: oklch(var(--destructive-foreground));
}

.text-foreground{
  color: oklch(var(--foreground));
}

.text-muted-foreground{
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.text-popover-foreground{
  color: oklch(var(--popover-foreground));
}

.text-primary{
  --tw-text-opacity: 1;
  color: oklch(var(--primary) / var(--tw-text-opacity, 1));
}

.text-primary-foreground{
  color: oklch(var(--primary-foreground));
}

.text-secondary-foreground{
  color: oklch(var(--secondary-foreground));
}

.text-sidebar-foreground{
  color: oklch(var(--sidebar-foreground));
}

.text-success{
  --tw-text-opacity: 1;
  color: oklch(var(--success) / var(--tw-text-opacity, 1));
}

.text-warning{
  --tw-text-opacity: 1;
  color: oklch(var(--warning) / var(--tw-text-opacity, 1));
}

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

.underline-offset-2{
  text-underline-offset: 2px;
}

.underline-offset-4{
  text-underline-offset: 4px;
}

.antialiased{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.opacity-0{
  opacity: 0;
}

.opacity-50{
  opacity: 0.5;
}

.opacity-70{
  opacity: 0.7;
}

.shadow{
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px 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-\[0_0_0_1px_hsl\(var\(--sidebar-border\)\)\]{
  --tw-shadow: 0 0 0 1px hsl(var(--sidebar-border));
  --tw-shadow-colored: 0 0 0 1px 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-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-none{
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  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-xl{
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px 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-xs{
  --tw-shadow: 0 1px 2px 0 rgba(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);
}

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

.outline{
  outline-style: solid;
}

.ring-0{
  --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(0px + 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-1{
  --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(1px + 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-ring\/50{
  --tw-ring-color: oklch(var(--ring) / 0.5);
}

.ring-sidebar-ring{
  --tw-ring-color: oklch(var(--sidebar-ring));
}

.ring-offset-background{
  --tw-ring-offset-color: oklch(var(--background));
}

.blur{
  --tw-blur: blur(8px);
  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);
}

.invert{
  --tw-invert: invert(100%);
  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);
}

.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{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[color\2c box-shadow\]{
  transition-property: color,box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[margin\2c opacity\]{
  transition-property: margin,opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[width\2c height\2c padding\]{
  transition-property: width,height,padding;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[width\]{
  transition-property: width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-all{
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-none{
  transition-property: none;
}

.transition-opacity{
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-shadow{
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform{
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-1000{
  transition-duration: 1000ms;
}

.duration-200{
  transition-duration: 200ms;
}

.duration-300{
  transition-duration: 300ms;
}

.ease-in-out{
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-linear{
  transition-timing-function: linear;
}

.\@container\/card-header{
  container-type: inline-size;
  container-name: card-header;
}

@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));
  }
}

.animate-in{
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.fade-in-0{
  --tw-enter-opacity: 0;
}

.zoom-in-95{
  --tw-enter-scale: .95;
}

.duration-1000{
  animation-duration: 1000ms;
}

.duration-200{
  animation-duration: 200ms;
}

.duration-300{
  animation-duration: 300ms;
}

.ease-in-out{
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-linear{
  animation-timing-function: linear;
}

.running{
  animation-play-state: running;
}

/* App shell grid: sidebar column + content column. The sidebar width comes
     from the existing --sidebar-width CSS variable (16rem). Below the tab:
     breakpoint (900px) the grid collapses to a single column so the Sheet
     drawer handles the sidebar and the content takes the full width. */

.app-shell-grid {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    min-height: 100svh;
    width: 100%;
  }

@media (max-width: 899.98px) {
    .app-shell-grid {
      grid-template-columns: 1fr;
    }
  }

/* Sidebar full height: the shadcn sidebar container is fixed to the viewport
     height (h-svh), so when the content column grows taller than the viewport
     the sidebar background stops partway down and the page background shows
     through below it. Override the container to fill the full grid row height
     (the row grows with the taller content column) so the sidebar background
     always extends to the bottom of the page. */

[data-slot="sidebar-container"] {
    height: 100%;
  }

.transition-smooth {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

/* Price delta treatment: mono numerals with directional colour */

.price-delta{
  font-family: var(--font-mono), monospace;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  --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);
}

.price-delta-up{
  --tw-text-opacity: 1;
  color: oklch(var(--danger) / var(--tw-text-opacity, 1));
}

.price-delta-down{
  --tw-text-opacity: 1;
  color: oklch(var(--success) / var(--tw-text-opacity, 1));
}

.price-delta-flat{
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

/* Data-honesty disclosure banner */

.data-honesty-banner{
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border-radius: calc(var(--radius) - 2px);
  border-width: 1px;
  border-color: oklch(var(--warning) / 0.4);
  background-color: oklch(var(--warning) / 0.1);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: oklch(var(--foreground));
}

.data-honesty-banner strong{
  font-weight: 600;
  --tw-text-opacity: 1;
  color: oklch(var(--warning) / var(--tw-text-opacity, 1));
}

/* Numeric / tabular data cells */

.tabular{
  font-family: var(--font-mono), monospace;
  --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);
}

/* Control chrome: professional tool surface, not a website form.
     Dark surface, hairline border, small radius, muted placeholder,
     accent colour only on focus. */

.control{
  height: 2.25rem;
  width: 100%;
  border-radius: calc(var(--radius) - 4px);
  border-width: 1px;
  border-color: oklch(var(--border));
  background-color: oklch(var(--muted) / 0.4);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: oklch(var(--foreground));
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.control::-moz-placeholder{
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.control::placeholder{
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.control:focus{
  --tw-border-opacity: 1;
  border-color: oklch(var(--primary) / var(--tw-border-opacity, 1));
  background-color: oklch(var(--muted) / 0.6);
  outline: 2px solid transparent;
  outline-offset: 2px;
  --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(1px + 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);
  --tw-ring-opacity: 1;
  --tw-ring-color: oklch(var(--ring) / var(--tw-ring-opacity, 1));
}

/* Search input: the magnifying glass icon (left-3 = 12px from the left
     edge, size-4 = 16px wide) reaches its right edge at 28px. The .control
     rule above inlines padding-left: 0.75rem (12px) via @apply px-3, and
     because .control is emitted after the generated .pl-10 utility inside
     the same @layer utilities cascade, .control's 12px wins over pl-10's
     40px (equal specificity, later source order). A dedicated .search-input
     rule defined AFTER .control in this same layer wins the cascade the
     same way and sets padding-left to a token-based 2.5rem (40px) so the
     icon clears the placeholder with a 12px gap. Token-driven via the
     existing --space-1 family; no arbitrary pixels. */

.search-input {
    padding-left: calc(var(--space-1) * 10);
  }

/* Global search: a working command-style search in the top header bar.
     The container is relative so the absolute dropdown anchors to it; the
     input reuses .control + .search-input chrome. All colours and spacing
     come from the existing dark theme tokens (bg-popover, border-border,
     text-muted-foreground, bg-secondary, --space-*). No arbitrary pixels. */

.global-search {
    position: relative;
    width: 100%;
    max-width: 28rem;
  }

.global-search-input {
    width: 100%;
  }

/* Dropdown: absolute, positioned below the input, capped height with
     overflow auto so long result lists scroll inside the panel. z-index
     sits above the sticky header (z-10) and content. Hairline border,
     small radius, and a subtle shadow lift it off the page. */

.global-search-dropdown {
    position: absolute;
    top: calc(100% + var(--space-1));
    left: 0;
    right: 0;
    z-index: 30;
    max-height: 24rem;
    overflow-y: auto;
    background: oklch(var(--popover));
    border: 1px solid oklch(var(--border));
    border-radius: var(--radius);
    box-shadow: 0 4px 16px oklch(0.04 0.02 250 / 0.5);
    padding: var(--space-1);
  }

/* Results list: no default list styling; groups stack with a hairline
     separator between them. */

.global-search-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

/* Group: a labelled cluster of results. The label reuses the block-label
     treatment (uppercase, tracked, muted) so it reads as quiet chrome, not
     a heading competing with the results. */

.global-search-group {
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-1) * 0.5);
  }

.global-search-list .global-search-group + .global-search-group {
    border-top: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
    padding-top: var(--space-1);
  }

.global-search-group-label{
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
    padding: 0 calc(var(--space-1) * 2);
}

.global-search-group-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

/* Result row: a full-width, left-aligned flex button with icon, label,
     and sublabel. Padding is token-driven. Active/hover rows lift to
     bg-secondary so the keyboard/mouse focus reads unambiguously. */

.global-search-result {
    display: flex;
    align-items: center;
    gap: calc(var(--space-1) * 2);
    width: 100%;
    text-align: left;
    padding: calc(var(--space-1) * 1.5) calc(var(--space-1) * 2);
    background: transparent;
    border: 0;
    border-radius: var(--radius);
    color: oklch(var(--foreground));
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 0.12s ease;
  }

.global-search-result:hover,
  .global-search-result-active {
    background: oklch(var(--secondary));
  }

.global-search-result-label {
    font-weight: 500;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

.global-search-result-sub {
    color: oklch(var(--muted-foreground));
    font-size: 0.75rem;
    flex: 0 0 auto;
    white-space: nowrap;
  }

/* Empty state: quiet muted message, no results chrome. */

.global-search-empty{
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
    padding: calc(var(--space-1) * 3) calc(var(--space-1) * 2);
    text-align: center;
}

/* Mobile: below the tab: breakpoint (900px) the dropdown spans the full
     available header width instead of being capped at 28rem, so results
     stay readable on narrow viewports. */

@media (max-width: 899.98px) {
    .global-search {
      max-width: 100%;
    }
  }

/* Sidebar application chrome */

.sidebar-label{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.sidebar-item-active{
  position: relative;
  background-color: oklch(var(--sidebar-accent));
  color: oklch(var(--sidebar-accent-foreground));
}

.sidebar-item-active::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 50%;
    height: 1rem;
    width: 0.125rem;
    --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));
    background-color: oklch(var(--sidebar-primary));
  }

/* Information hierarchy: item name and best price read first */

.item-name{
  font-family: var(--font-display), serif;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: oklch(var(--foreground));
}

.price-lead{
  font-family: var(--font-mono), monospace;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  --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);
  color: oklch(var(--foreground));
}

.price-sub{
  font-family: var(--font-mono), monospace;
  font-size: 0.75rem;
  line-height: 1rem;
  --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);
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

/* Price-lead variants with a semantic tone. Used for the menu monthly
     impact column, which carries the most visual weight: bold, larger, and
     coloured by direction (crimson for bleed, emerald for gain, muted for
     stable). */

.price-lead-danger{
  font-family: var(--font-mono), monospace;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  --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);
  --tw-text-opacity: 1;
  color: oklch(var(--danger) / var(--tw-text-opacity, 1));
}

.price-lead-success{
  font-family: var(--font-mono), monospace;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  --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);
  --tw-text-opacity: 1;
  color: oklch(var(--success) / var(--tw-text-opacity, 1));
}

.price-lead-flat{
  font-family: var(--font-mono), monospace;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  --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);
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

/* True cost per usable unit: the decision-driving figure in the Yield and
     True Cost feature. Distinct from the raw price (.price-sub, muted) and
     from the best-price lead (.price-lead, foreground). Carries the violet
     decision tone so a buyer reads true cost as the number that matters.
     Shown beside the raw price wherever a price appears. */

.true-cost{
  font-family: var(--font-mono), monospace;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  --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);
    color: oklch(var(--true-cost));
}

/* Compact yield percentage for tables: mono tabular, small, violet decision
     tone matching true cost so the two read as one concept. A low-yield
     variant flips to the warning amber so a buyer sees at a glance which
     items waste the most (whole fish and primal cuts, leafy greens). */

.yield-pct{
  font-family: var(--font-mono), monospace;
  font-size: 0.75rem;
  line-height: 1rem;
  --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);
    color: oklch(var(--true-cost));
}

.yield-pct-low {
    color: oklch(var(--warning));
  }

/* Explicit yield-difference note: 'cheaper per pound but 8% lower yield, so
     four cents more per usable pound'. A compact inline annotation, not a
     banner. The numeric delta carries the decision tone; the rest stays
     muted so the note reads as explanation, not chrome. */

.yield-note{
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.yield-note strong{
  font-family: var(--font-mono), monospace;
  font-weight: 600;
  --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);
    color: oklch(var(--true-cost));
}

/* Brand tier indicator: a quiet pill with a leading colour dot and an
     uppercase tracked label. Three tiers, three hues, so a buyer reads the
     tier at a glance. Small and restrained: this is procurement chrome, not
     consumer branding. The dot and label both inherit the tier colour via
     currentColor. The hairline border uses color-mix because the border token
     has no alpha placeholder. */

.brand-tier{
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 9999px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
    border: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
    white-space: nowrap;
}

.brand-tier::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: currentColor;
    flex-shrink: 0;
  }

.brand-tier-national {
    color: oklch(var(--tier-national));
  }

.brand-tier-premium {
    color: oklch(var(--tier-premium));
  }

.brand-tier-value {
    color: oklch(var(--tier-value));
  }

/* Order-minimums / constraint-math recommendation states. Each state is a
     leading dot + uppercase tracked label pill (matching the .brand-tier and
     .trial-status vocabulary) plus a row-surface treatment. The dot and label
     inherit the state colour via currentColor; the hairline border uses
     color-mix on the --border token at 60% because the border token has no
     alpha placeholder. */

.rec-state{
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 9999px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
    border: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
    white-space: nowrap;
}

.rec-state::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: currentColor;
    flex-shrink: 0;
  }

/* Supplier delivery/minimum metadata: cool informational blue. Used for the
     delivery minimum in dollars, case minimum, per-line MOQ, and delivery
     schedule (days per week). Reads as neutral logistics data, not a verdict. */

.rec-state-supplier-info,
  .supplier-info {
    color: oklch(var(--supplier-info));
  }

/* Not viable on its own: desaturated slate for rows where total spend with
     the supplier does not clear the minimum. The row surface drops to the
     quiet --blocked-surface tone and the text goes slate so the row reads as
     dead on its own, without using the danger tone (which is reserved for
     price increases). */

.rec-state-blocked,
  .not-viable {
    color: oklch(var(--blocked));
  }

.rec-state-blocked-surface,
  .blocked-surface {
    background: oklch(var(--blocked-surface));
  }

/* Combined viable: distinct teal for rows that clear the minimum only when
     grouped with other items from the same supplier. Separate from the emerald
     success tone so a conditional combined win reads as a different, partial
     kind of saving, not a guaranteed one. */

.rec-state-combined,
  .combined-viable {
    color: oklch(var(--combined));
  }

/* Brand cell: the brand name with its tier indicator stacked beneath, so
     the item column reads the brand and its tier together. The name is
     display type, the indicator is quiet chrome below it. */

.brand-cell{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

.brand-cell .brand-name{
  font-family: var(--font-display), serif;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: oklch(var(--foreground));
}

/* Tier legend: a compact legend explaining the three-tier system, used in
     the catalog header or filter. Rows pair a tier indicator with a one-line
     description of what the tier means. */

.tier-legend{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
  row-gap: 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

/* Tier price spread: a thin horizontal track showing where each of the
     three brand tiers' prices fall on the item's price range, with one
     tier-coloured marker per tier. Extends the .spread-bar precedent for
     supplier spread to the brand-tier comparison. All dimensions are
     token-driven via the existing --spread-bar-* family. */

.tier-spread {
    position: relative;
    width: var(--spread-bar-width);
    height: var(--spread-bar-height);
    margin-top: var(--space-1);
    margin-left: auto;
    background: oklch(var(--border));
    border-radius: var(--radius);
  }

.tier-spread-marker {
    position: absolute;
    top: 50%;
    width: var(--spread-bar-marker-width);
    height: var(--spread-bar-marker-height);
    transform: translate(-50%, -50%);
    border-radius: var(--radius);
  }

.tier-spread-marker-national {
    background: oklch(var(--tier-national));
  }

.tier-spread-marker-premium {
    background: oklch(var(--tier-premium));
  }

.tier-spread-marker-value {
    background: oklch(var(--tier-value));
  }

/* Cost-vs-yield tradeoff annotation: a compact inline note under a price
     explaining the tier tradeoff, e.g. 'value house label is 18% cheaper but
     9% lower yield, so 4c more per usable pound'. The tier name carries its
     tier hue; the numeric delta carries the decision tone (true-cost violet);
     the rest stays muted so it reads as explanation, not chrome. */

.tradeoff-note{
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.tradeoff-note .tier-name {
    font-weight: 600;
  }

.tradeoff-note .tier-name-national {
    color: oklch(var(--tier-national));
  }

.tradeoff-note .tier-name-premium {
    color: oklch(var(--tier-premium));
  }

.tradeoff-note .tier-name-value {
    color: oklch(var(--tier-value));
  }

.tradeoff-note strong{
  font-family: var(--font-mono), monospace;
  font-weight: 600;
  --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);
    color: oklch(var(--true-cost));
}

/* Density: whitespace separates groups, not individual elements */

.density-group > :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));
}

.density-stack > :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));
}

/* Table surface hierarchy. The table panel sits one tone above the page
     background (bg-card, 0.19). The header row sits a half-step above the
     panel so column labels read as chrome, not data. Row hover is a distinct
     second surface tone above the panel (secondary, 0.23) so the lift is
     unambiguous, not a blended alpha. Hairline borders stay low-opacity.

     Note: the `border` color token in tailwind.config.js has no
     <alpha-value> placeholder, so the Tailwind /opacity modifier cannot be
     applied to border-border. The hairline border here is expressed directly
     via color-mix on the --border token at 60% opacity. */

.table-panel{
  border-radius: calc(var(--radius) - 4px);
  background-color: oklch(var(--card));
    border: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
}

.table-head-row{
  background-color: oklch(var(--secondary) / 0.4);
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.table-head-row th {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted-foreground);
  }

.table-row-hover:hover{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--secondary) / var(--tw-bg-opacity, 1));
}

/* Menu margin table: keeps the dense numeric columns readable on small
     screens by giving the table a minimum width so it scrolls horizontally
     inside the overflow container below the tab: breakpoint (900px). */

.menu-table {
    min-width: var(--menu-table-min-width);
  }

/* Drift table: tighter cell padding so all eight columns fit within the
     viewport at 1440px+ without horizontal scrolling. The default shadcn
     table cell padding (px-4 py-2) is too generous for an eight-column
     dense numeric table; this trims horizontal padding to a token-based
     0.5rem and vertical to 0.375rem. The table layout stays auto so columns
     size to content, and the long reasoning text column truncates with
     ellipsis (see .drift-reason below) instead of wrapping wide. */

.drift-table {
    table-layout: auto;
  }

.drift-table th,
  .drift-table td {
    padding: calc(var(--space-1) * 1.5) calc(var(--space-1) * 2);
    white-space: nowrap;
  }

/* The reasoning column is the primary width driver. Let it wrap to two
     lines and clamp, with the full text available via the title attribute
     on the cell. This keeps the column narrow without losing information. */

.drift-table .drift-reason {
    max-width: 18rem;
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
  }

/* The item column holds the item name, supplier, and an optional
     reliability recommendation block. It is the second widest column.
     Clamp the recommendation reasoning so it does not blow the column
     width; the full text remains available via title attributes. */

.drift-table .drift-item {
    max-width: 16rem;
  }

.drift-table .drift-item .yield-note {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
  }

/* Responsive column hiding below the tab: breakpoint (900px). The drift
     table has eight columns; on narrow viewports the supporting columns
     (Widening label, Gap reasoning, Monthly cost, Trend) hide so the
     essential columns (Item, Status, Overpaid, Act) remain visible
     without horizontal scrolling. Each hidden column uses a dedicated
     class so the hiding is explicit and auditable, not a utility soup. */

@media (max-width: 899.98px) {
    .drift-table .drift-col-widening,
    .drift-table .drift-col-gap,
    .drift-table .drift-col-monthly,
    .drift-table .drift-col-trend {
      display: none;
    }
  }

/* Inline per-row sparkline. Fixed rendered size (60x20) lives here in the
     token layer, not in components, so the component never holds arbitrary
     pixels. The viewBox is 0..100 on both axes and scaled by preserveAspectRatio
     none; stroke widths use vector-effect non-scaling-stroke so they stay
     hairline-thin regardless of the rendered size. */

.sparkline {
    display: inline-block;
    width: var(--sparkline-width);
    height: var(--sparkline-height);
    vertical-align: middle;
    overflow: visible;
  }

.sparkline-empty {
    border-bottom: 1px solid oklch(var(--border));
  }

.sparkline-path {
    stroke: oklch(var(--muted-foreground));
    stroke-width: var(--sparkline-stroke);
    stroke-linejoin: round;
    stroke-linecap: round;
  }

/* Direction-coloured sparkline paths, matching the Price movement column
     beside each sparkline: danger (crimson) for price up, success (emerald)
     for price down, muted for flat. These override the base .sparkline-path
     stroke so the trend line reads as intentional directional data. */

.sparkline-path-up {
    stroke: oklch(var(--danger));
  }

.sparkline-path-down {
    stroke: oklch(var(--success));
  }

.sparkline-path-flat {
    stroke: oklch(var(--muted-foreground));
  }

.sparkline-dot {
    stroke: oklch(var(--background));
    stroke-width: var(--sparkline-dot-stroke);
  }

.sparkline-dot-up {
    fill: oklch(var(--danger));
  }

.sparkline-dot-down {
    fill: oklch(var(--success));
  }

.sparkline-dot-flat {
    fill: oklch(var(--muted-foreground));
  }

/* Drift-gap sparkline: shows how far the current price sits above the
     90-day baseline, i.e. the supplier drift gap, not a directional price
     movement. Drawn as a single quiet primary-toned line that rises as the
     gap widens, with a muted baseline reference so the widening reads against
     a fixed zero. Distinct from the up/down/flat movement sparklines above
     because a gap is a magnitude, not a direction. */

.sparkline-path-gap {
    stroke: oklch(var(--primary));
  }

.sparkline-dot-gap {
    fill: oklch(var(--primary));
  }

.sparkline-gap-baseline {
    stroke: oklch(var(--border));
    stroke-width: var(--sparkline-stroke);
    stroke-dasharray: 2 2;
  }

/* Spread bar: thin horizontal range showing cheapest-to-most-expensive
     supplier for a single item, with a marker at the best price. Sits under
     the best price cell. All dimensions and colours are token-driven. */

.spread-bar {
    position: relative;
    width: var(--spread-bar-width);
    height: var(--spread-bar-height);
    margin-top: var(--space-1);
    margin-left: auto;
    background: oklch(var(--border));
    border-radius: var(--radius);
  }

.spread-bar-fill {
    position: absolute;
    inset: 0;
    background: oklch(var(--muted-foreground) / 0.35);
    border-radius: var(--radius);
  }

.spread-bar-marker {
    position: absolute;
    top: 50%;
    width: var(--spread-bar-marker-width);
    height: var(--spread-bar-marker-height);
    transform: translate(-50%, -50%);
    background: oklch(var(--primary));
    border-radius: var(--radius);
  }

/* Arbitrage row spread bar: a thin horizontal bar in a dedicated full-width
     row beneath each arbitrage row, showing that opportunity's spread relative
     to the largest spread in the table. Width is set inline as a percentage
     (spread / maxSpread * 100), following the Catalogue precedent. All
     dimensions and colours are token-driven; no arbitrary pixels.

     Simple block layout (NOT absolute positioning): the outer .arb-spread-bar
     is a block element with a fixed token height and a muted track background;
     the inner .arb-spread-bar-fill is a block element with height: 100% and a
     solid success background, and its width is set inline as a percentage.
     This is the simplest possible bar: a coloured rectangle whose width is a
     percentage of its container. Absolute positioning for the fill has failed
     twice to render visibly, so it is intentionally avoided here. The bar
     spans the full table width because it lives in a colspan=6 cell, so the
     fill width reads as a true proportion of the largest spread in the table. */

.arb-spread-bar {
    display: block;
    width: 100%;
    height: var(--spread-bar-height);
    background: oklch(var(--border));
    border-radius: var(--radius);
    overflow: hidden;
  }

.arb-spread-bar-fill {
    display: block;
    height: 100%;
    background: oklch(var(--success));
    border-radius: var(--radius);
  }

/* Today briefing landing screen. Keeps the trading-terminal restraint:
     quiet and dense everywhere except the one headline number. No cards, no
     boxes, no icons. Blocks are separated by hairline rules and each carries
     a small uppercase label. */

.headline-number{
  font-family: var(--font-mono), monospace;
  font-weight: 700;
  --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);
  color: oklch(var(--foreground));
    font-size: clamp(48px, 8vw, 64px);
    line-height: 0.95;
    letter-spacing: -0.02em;
}

.block-separator {
    border-top: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
  }

.block-label{
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

/* Headline component breakdown: the three dollar figures that sum to the
     headline total, shown as a quiet row of labelled values so the headline
     visibly equals overpaying + buy windows + margin bleeding. */

.headline-component{
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  border-left-width: 1px;
  border-color: oklch(var(--border));
  padding-left: 0.75rem;
}

.headline-component-value{
  font-family: var(--font-mono), monospace;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  --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);
  color: oklch(var(--foreground));
}

.dense-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

/* Build order summary bar: pinned to the bottom of the SidebarInset,
     dark surface one tone above the page background, hairline top border.
     Understated so it never competes with the data above it. Hidden in
     print. */

.selection-summary-bar {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20;
    background: oklch(var(--card));
    border-top: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
    padding: var(--space-1) 1rem;
  }

/* Quiet checkbox: small, accent-coloured, does not compete with data.
     Sized via the existing --space-1 token family so no arbitrary pixels. */

/* Today briefing row layout. A CSS grid (not flex) so the checkbox is an
     auto-width first column and the item name column starts immediately after
     it with a small consistent gap, instead of justify-between centring the
     name with large empty space on both sides. Column order left to right:
     checkbox (auto), item name (1fr), supporting text (1fr), numeric value
     (auto, right aligned). Below the tab: breakpoint (900px) the row collapses
     to a single column so the cells stack on narrow viewports.

     The grid columns are defined as a CSS class here, never as inline styles,
     per the standing grid-column convention. The tab: breakpoint equals 900px
     and is expressed via a max-width media query so it matches the Tailwind
     tab: screen exactly. */

.today-row {
    display: grid;
    grid-template-columns: 1fr;
    -moz-column-gap: calc(var(--space-1) * 2);
         column-gap: calc(var(--space-1) * 2);
    row-gap: var(--space-1);
    padding-top: calc(var(--space-1) * 1.5);
    padding-bottom: calc(var(--space-1) * 1.5);
    align-items: baseline;
  }

.today-row > .today-row-checkbox {
    display: flex;
    align-items: center;
  }

.today-row > .today-row-name {
    min-width: 0;
  }

.today-row > .today-row-supporting {
    min-width: 0;
  }

.today-row > .today-row-value {
    min-width: 0;
    text-align: right;
    justify-self: end;
  }

@media (min-width: 900px) {
    .today-row {
      grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto;
      row-gap: 0;
    }
  }

/* Margin Bleeding rows have no checkbox. They reuse the same grid as the
     Overpaying and Buy Windows rows but leave the first (checkbox) column
     empty, so the item name column aligns with the item names above and the
     left edge of every block on Today lines up. A single shared row class
     avoids a second layout. */

.today-row--no-checkbox > .today-row-checkbox {
    display: none;
  }

@media (min-width: 900px) {
    .today-row--no-checkbox {
      grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto;
    }
    .today-row--no-checkbox > .today-row-checkbox {
      display: block;
      width: calc(var(--space-1) * 3.5);
      height: calc(var(--space-1) * 3.5);
    }
  }

/* Quiet checkbox: small, square, hairline border in the border token,
     transparent background when unchecked, accent fill with a dark check mark
     when checked. appearance: none removes the default browser control so the
     checkbox reads as designed chrome, not a 1998 form control. Shared with
     the Catalogue page, so not scoped to Today. Sized via the existing
     --space-1 token family; no arbitrary pixels. The hairline border uses
     color-mix on the --border token at 60% opacity because the border token
     has no alpha placeholder. The check mark uses --card (near-black on the
     accent) so it reads on the primary fill. */

.quiet-checkbox {
    -moz-appearance: none;
         appearance: none;
    -webkit-appearance: none;
    width: calc(var(--space-1) * 3.5);
    height: calc(var(--space-1) * 3.5);
    margin: 0;
    border: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
    border-radius: var(--radius);
    background: transparent;
    cursor: pointer;
    vertical-align: middle;
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }

.quiet-checkbox:hover {
    border-color: oklch(var(--primary));
  }

.quiet-checkbox:focus-visible {
    outline: none;
    border-color: oklch(var(--primary));
    box-shadow: 0 0 0 2px oklch(var(--ring) / 0.4);
  }

.quiet-checkbox:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

.quiet-checkbox:checked {
    background: oklch(var(--primary));
    border-color: oklch(var(--primary));
  }

.quiet-checkbox:checked::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--space-1) * 1.6);
    height: calc(var(--space-1) * 0.9);
    transform: translate(-50%, -65%) rotate(-45deg);
    border-left: 1.5px solid oklch(var(--card));
    border-bottom: 1.5px solid oklch(var(--card));
    border-bottom-left-radius: 1px;
  }

.quiet-checkbox:checked:disabled {
    background: oklch(var(--muted-foreground));
    border-color: oklch(var(--muted-foreground));
  }

/* Order screen: supplier groups separated by hairline rules, not cards. */

.order-supplier-group {
    border-top: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
    padding-top: 1rem;
  }

.order-supplier-group:first-child {
    border-top: 0;
    padding-top: 0;
  }

/* Order line item row: dense, hairline bottom separator. */

.order-line-item{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
    border-bottom: 1px solid color-mix(in oklch, var(--border) 40%, transparent);
}

.order-line-item:last-child {
    border-bottom: 0;
  }

/* Order combined totals footer: quiet, hairline top, mono numerals. */

.order-totals {
    border-top: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

/* Thirty Day Trial. Scoped additions to the existing ForgeSupply system:
     no new palette, no new fonts, no cards, no shadows. Reuses the Today
     block-label / hairline-rule / dense-row vocabulary so the trial reads as
     the same operational terminal, not a marketing page. Copy is plain and
     honest: 'upload your invoices', never 'connect your accounts'. */

/* Trial status chip: quiet, small pill for the sidebar beneath the Start
     Trial nav item. Reuses the brand-tier pill pattern (leading dot +
     uppercase tracked label) but smaller and muted so it never competes with
     navigation. Active carries the primary tone with days remaining; ended
     flips to muted. */

.trial-status{
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 9999px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
    border: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
    white-space: nowrap;
}

.trial-status::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 9999px;
    background: currentColor;
    flex-shrink: 0;
  }

.trial-status-active {
    color: oklch(var(--primary));
  }

.trial-status-ended {
    color: oklch(var(--muted-foreground));
  }

/* Trial entry banner: first-time-visitor call to action on Today. Same
     banner anatomy as .data-honesty-banner (flex, gap, rounded, hairline)
     but primary toned as an action rather than a warning disclosure, with a
     right-aligned CTA. Copy stays plain: 'upload your invoices', never
     'connect your accounts'. */

.trial-entry-banner{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  border-radius: calc(var(--radius) - 2px);
  border-width: 1px;
  border-color: oklch(var(--primary) / 0.3);
  background-color: oklch(var(--primary) / 0.1);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: oklch(var(--foreground));
}

.trial-entry-banner strong{
  font-weight: 600;
  --tw-text-opacity: 1;
  color: oklch(var(--primary) / var(--tw-text-opacity, 1));
}

.trial-entry-banner-cta{
  display: inline-flex;
  height: 2rem;
  flex-shrink: 0;
  align-items: center;
  border-radius: calc(var(--radius) - 4px);
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  color: oklch(var(--primary-foreground));
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.trial-entry-banner-cta:hover {
    background: oklch(var(--primary) / 0.85);
  }

/* Start Trial flow: a step-by-step onboarding page. Steps stack as sections
     separated by hairline rules (matching Today). Each step carries a mono
     step index and a block label so the four-step flow reads as a sequence of
     numbered panels, not marketing cards. */

.trial-flow{
  display: flex;
  flex-direction: column;
}

.trial-step{
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
    border-top: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
}

.trial-step:first-child {
    border-top: 0;
    padding-top: 0;
  }

.trial-step-head{
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.trial-step-index{
  font-family: var(--font-mono), monospace;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  --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);
    color: oklch(var(--primary));
}

.trial-step-title{
  font-family: var(--font-display), serif;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  color: oklch(var(--foreground));
}

.trial-step-body{
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

/* Trial payoff summary: what the first matched invoice revealed. A quiet
     stat grid (line items above market, cost per month) above a largest-gaps
     list. Numerics use the loud mono treatment; the cost figure carries the
     danger tone since it is money being left on the table. */

.trial-payoff{
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.trial-payoff-stats{
  display: grid;
  gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.trial-payoff-stat{
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border-left-width: 1px;
  border-color: oklch(var(--border));
  padding-left: 0.75rem;
}

.trial-payoff-stat-value{
  font-family: var(--font-mono), monospace;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  --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);
  color: oklch(var(--foreground));
}

.trial-payoff-stat-value-danger{
  font-family: var(--font-mono), monospace;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  --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);
  --tw-text-opacity: 1;
  color: oklch(var(--danger) / var(--tw-text-opacity, 1));
}

.trial-payoff-stat-label{
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.trial-gap-list{
  display: flex;
  flex-direction: column;
}

.trial-gap-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
    border-bottom: 1px solid color-mix(in oklch, var(--border) 40%, transparent);
}

.trial-gap-row:last-child {
    border-bottom: 0;
  }

.trial-gap-name{
  font-family: var(--font-display), serif;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: oklch(var(--foreground));
}

.trial-gap-value{
  font-family: var(--font-mono), monospace;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  --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);
  --tw-text-opacity: 1;
  color: oklch(var(--danger) / var(--tw-text-opacity, 1));
}

/* Weekly Order: whole-basket optimization. Extends the existing ForgeSupply
     terminal: no new palette, no new fonts, no cards beyond the single
     comparison surface. The four decision tokens (--winner gold, --runner-up
     steel, --split teal) were added in :root; these utilities are the only
     page-specific chrome. Winner gold is reserved for the declared winner, so
     it reads as the decision, never a price signal. */

/* Winner badge: a pill in the winner gold, leading dot + uppercase tracked
     label, matching the .brand-tier / .rec-state / .trial-status vocabulary.
     The dot and label inherit the gold via currentColor; the hairline border
     uses color-mix on the --border token at 60% because the border token has
     no alpha placeholder. */

.winner-badge{
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 9999px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
    color: oklch(var(--winner));
    border: 1px solid color-mix(in oklch, var(--winner) 45%, transparent);
    white-space: nowrap;
}

.winner-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: currentColor;
    flex-shrink: 0;
  }

/* Ranked basket table row treatments. The winner row lifts to a faint gold
     surface so the winning supplier reads as the decision at a glance; the
     runner-up row stays on the quiet --blocked-surface slate so it sits
     clearly second. Both use the existing table chrome (hairline rules via
     color-mix on --border at 60%). */

.rank-winner {
    background: color-mix(in oklch, var(--winner) 7%, var(--card));
  }

.rank-winner .rank-order {
    color: oklch(var(--winner));
  }

.rank-runner {
    background: oklch(var(--blocked-surface));
  }

.rank-runner .rank-order {
    color: oklch(var(--runner-up));
  }

/* Rank order numeral: mono, small, quiet; the winner/runner row tints the
     numeral to its rank tone so position reads without a badge. */

.rank-order{
  font-family: var(--font-mono), monospace;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  --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);
    color: oklch(var(--muted-foreground));
}

/* Loud landed-cost figure: the decision-driving number per supplier row.
     Bold mono, larger than the supporting figures, and winner gold on the
     winning row so the total that wins reads as the decision. On non-winner
     rows it stays foreground. */

.landed-cost{
  font-family: var(--font-mono), monospace;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  --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);
    color: oklch(var(--foreground));
}

.landed-cost-winner {
    color: oklch(var(--winner));
  }

/* Gap figure: how close the runner-up came, shown as a quiet steel mono
     delta beneath the runner-up landed cost so the operator sees the margin
     without it competing with the winner. */

.landed-gap{
  font-family: var(--font-mono), monospace;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  --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);
    color: oklch(var(--runner-up));
}

/* Side-by-side basket comparison card surface: the single card on the page,
     holding the single-supplier option and the optimized split side by side.
     One tone above the page (bg-card) with a hairline border and a subtle
     shadow lift, so the two options read as one decision surface. */

.basket-compare{
  border-radius: calc(var(--radius) - 4px);
  background-color: oklch(var(--card));
    border: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
    box-shadow: 0 1px 0 0 color-mix(in oklch, var(--border) 30%, transparent);
}

.basket-compare-split {
    border-color: color-mix(in oklch, var(--split) 40%, transparent);
  }

.basket-compare-total{
  font-family: var(--font-mono), monospace;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  --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);
}

.basket-compare-total-single {
    color: oklch(var(--runner-up));
  }

.basket-compare-total-split {
    color: oklch(var(--split));
  }

/* Verdict banner: the single line above the two side-by-side options that
     states the dollar difference and which option wins. Winner gold surface
     with a matching hairline border so the decision reads as the headline of
     the comparison card. */

.compare-verdict{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: calc(var(--radius) - 4px);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
    background: color-mix(in oklch, var(--winner) 8%, var(--card));
    border: 1px solid color-mix(in oklch, var(--winner) 40%, transparent);
    color: oklch(var(--winner));
}

.compare-verdict .compare-verdict-delta{
  font-family: var(--font-mono), monospace;
  font-weight: 700;
  --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);
}

/* Split breakdown: the primary total, second total, combined landed cost,
     and savings rendered as a compact definition list inside the optimized
     split card, so the operator sees exactly how the combined total is built. */

.split-breakdown{
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border-top-width: 1px;
  border-color: oklch(var(--border));
  padding-top: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.split-breakdown-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.split-breakdown-row dt{
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.split-breakdown-row dd{
  font-family: var(--font-mono), monospace;
  --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);
}

.split-breakdown-total{
  border-top-width: 1px;
  border-color: oklch(var(--border));
  padding-top: 0.25rem;
}

.split-breakdown-total dt{
  font-weight: 500;
  color: oklch(var(--foreground));
}

.split-breakdown-total dd{
  font-weight: 700;
}

.split-breakdown-save dd{
  font-weight: 600;
  --tw-text-opacity: 1;
  color: oklch(var(--success) / var(--tw-text-opacity, 1));
}

/* Cross-competition history strip: a row of small chips, one per recent
     week, showing which supplier won that week. The winning week's chip takes
     the winner gold; losing weeks stay muted. The strip makes the pattern
     (one week Sysco, next CBI, next US Foods) obvious at a glance. */

.history-strip{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.history-chip{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  border-radius: calc(var(--radius) - 4px);
  border-width: 1px;
  border-color: oklch(var(--border));
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  text-align: center;
}

.history-chip-label{
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
    font-size: 10px;
}

.history-chip-name{
  font-family: var(--font-mono), monospace;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  --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);
    color: oklch(var(--muted-foreground));
}

.history-chip-winner {
    border-color: color-mix(in oklch, var(--winner) 45%, transparent);
    background: color-mix(in oklch, var(--winner) 7%, var(--card));
  }

.history-chip-winner .history-chip-name {
    color: oklch(var(--winner));
  }

.\[--cell-size\:--spacing\(8\)\]{
  --cell-size: var(--spacing(8));
}

.\[border-bottom\:1px_solid_color-mix\(in_oklch\2c var\(--border\)_60\%\2c transparent\)\]{
  border-bottom: 1px solid color-mix(in oklch,var(--border) 60%,transparent);
}

.\[border-left\:1px_solid_color-mix\(in_oklch\2c var\(--border\)_60\%\2c transparent\)\]{
  border-left: 1px solid color-mix(in oklch,var(--border) 60%,transparent);
}

@media print {
  /* Print shows only the order content, formatted for paper. Nav, sidebar,
     summary bar, disclosure banner, and footer chrome are hidden. */
  .app-shell-grid {
    grid-template-columns: 1fr !important;
  }
  .selection-summary-bar,
  .data-honesty-banner {
    display: none !important;
  }
}

.selection\:bg-primary *::-moz-selection{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.selection\:bg-primary *::selection{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.selection\:text-primary-foreground *::-moz-selection{
  color: oklch(var(--primary-foreground));
}

.selection\:text-primary-foreground *::selection{
  color: oklch(var(--primary-foreground));
}

.selection\:bg-primary::-moz-selection{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.selection\:bg-primary::selection{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.selection\:text-primary-foreground::-moz-selection{
  color: oklch(var(--primary-foreground));
}

.selection\:text-primary-foreground::selection{
  color: oklch(var(--primary-foreground));
}

.file\:inline-flex::file-selector-button{
  display: inline-flex;
}

.file\:h-7::file-selector-button{
  height: 1.75rem;
}

.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;
}

.file\:text-foreground::file-selector-button{
  color: oklch(var(--foreground));
}

.placeholder\:text-muted-foreground::-moz-placeholder{
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.placeholder\:text-muted-foreground::placeholder{
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.after\:absolute::after{
  content: var(--tw-content);
  position: absolute;
}

.after\:-inset-2::after{
  content: var(--tw-content);
  inset: -0.5rem;
}

.after\:inset-y-0::after{
  content: var(--tw-content);
  top: 0px;
  bottom: 0px;
}

.after\:left-1\/2::after{
  content: var(--tw-content);
  left: 50%;
}

.after\:w-1::after{
  content: var(--tw-content);
  width: 0.25rem;
}

.after\:w-\[2px\]::after{
  content: var(--tw-content);
  width: 2px;
}

.after\:-translate-x-1\/2::after{
  content: var(--tw-content);
  --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));
}

.first\:rounded-l-md:first-child{
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}

.first\:border-l:first-child{
  border-left-width: 1px;
}

.last\:rounded-r-md:last-child{
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}

.last\:border-0:last-child{
  border-width: 0px;
}

.last\:border-b-0:last-child{
  border-bottom-width: 0px;
}

.last\:\[border-bottom\:0\]:last-child{
  border-bottom: 0;
}

.hover\:bg-accent:hover{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

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

.hover\:bg-muted:hover{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--muted) / var(--tw-bg-opacity, 1));
}

.hover\:bg-muted\/50:hover{
  background-color: oklch(var(--muted) / 0.5);
}

.hover\:bg-primary\/85:hover{
  background-color: oklch(var(--primary) / 0.85);
}

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

.hover\:bg-secondary:hover{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--secondary) / var(--tw-bg-opacity, 1));
}

.hover\:bg-secondary\/80:hover{
  background-color: oklch(var(--secondary) / 0.8);
}

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

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

.hover\:text-accent:hover{
  --tw-text-opacity: 1;
  color: oklch(var(--accent) / var(--tw-text-opacity, 1));
}

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

.hover\:text-destructive:hover{
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}

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

.hover\:text-muted-foreground:hover{
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

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

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

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

.hover\:shadow-\[0_0_0_1px_hsl\(var\(--sidebar-accent\)\)\]:hover{
  --tw-shadow: 0 0 0 1px hsl(var(--sidebar-accent));
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:ring-4:hover{
  --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(4px + 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);
}

.hover\:after\:bg-sidebar-border:hover::after{
  content: var(--tw-content);
  background-color: oklch(var(--sidebar-border));
}

.focus\:z-10:focus{
  z-index: 10;
}

.focus\:bg-accent:focus{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

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

.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-ring:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: oklch(var(--ring) / var(--tw-ring-opacity, 1));
}

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

.focus-visible\:z-10:focus-visible{
  z-index: 10;
}

.focus-visible\:border-ring:focus-visible{
  --tw-border-opacity: 1;
  border-color: oklch(var(--ring) / var(--tw-border-opacity, 1));
}

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

.focus-visible\:outline-1:focus-visible{
  outline-width: 1px;
}

.focus-visible\:outline-ring:focus-visible{
  outline-color: oklch(var(--ring) / 1);
}

.focus-visible\:ring-1: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(1px + 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-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-4: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(4px + 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-\[3px\]: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(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);
}

.focus-visible\:ring-destructive\/20:focus-visible{
  --tw-ring-color: oklch(var(--destructive) / 0.2);
}

.focus-visible\:ring-ring:focus-visible{
  --tw-ring-opacity: 1;
  --tw-ring-color: oklch(var(--ring) / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-ring\/50:focus-visible{
  --tw-ring-color: oklch(var(--ring) / 0.5);
}

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

.active\:bg-sidebar-accent:active{
  background-color: oklch(var(--sidebar-accent));
}

.active\:text-sidebar-accent-foreground:active{
  color: oklch(var(--sidebar-accent-foreground));
}

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

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

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

.group\/menu-item:focus-within .group-focus-within\/menu-item\:opacity-100{
  opacity: 1;
}

.group\/menu-item:hover .group-hover\/menu-item\:opacity-100{
  opacity: 1;
}

.peer\/menu-button:hover ~ .peer-hover\/menu-button\:text-sidebar-accent-foreground{
  color: oklch(var(--sidebar-accent-foreground));
}

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

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

.has-\[\>svg\]\:grid-cols-\[calc\(var\(--spacing\)\*4\)_1fr\]:has(>svg){
  grid-template-columns: calc(var(--spacing) * 4) 1fr;
}

.has-\[\>svg\]\:gap-x-3:has(>svg){
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}

.has-\[\>svg\]\:px-2:has(>svg){
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.has-\[\>svg\]\:px-3:has(>svg){
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.has-\[\>svg\]\:px-4:has(>svg){
  padding-left: 1rem;
  padding-right: 1rem;
}

.aria-disabled\:pointer-events-none[aria-disabled="true"]{
  pointer-events: none;
}

.aria-disabled\:opacity-50[aria-disabled="true"]{
  opacity: 0.5;
}

.aria-selected\:text-muted-foreground[aria-selected="true"]{
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

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

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

.data-\[vaul-drawer-direction\=bottom\]\:inset-x-0[data-vaul-drawer-direction="bottom"]{
  left: 0px;
  right: 0px;
}

.data-\[vaul-drawer-direction\=left\]\:inset-y-0[data-vaul-drawer-direction="left"]{
  top: 0px;
  bottom: 0px;
}

.data-\[vaul-drawer-direction\=right\]\:inset-y-0[data-vaul-drawer-direction="right"]{
  top: 0px;
  bottom: 0px;
}

.data-\[vaul-drawer-direction\=top\]\:inset-x-0[data-vaul-drawer-direction="top"]{
  left: 0px;
  right: 0px;
}

.data-\[vaul-drawer-direction\=bottom\]\:bottom-0[data-vaul-drawer-direction="bottom"]{
  bottom: 0px;
}

.data-\[vaul-drawer-direction\=left\]\:left-0[data-vaul-drawer-direction="left"]{
  left: 0px;
}

.data-\[vaul-drawer-direction\=right\]\:right-0[data-vaul-drawer-direction="right"]{
  right: 0px;
}

.data-\[vaul-drawer-direction\=top\]\:top-0[data-vaul-drawer-direction="top"]{
  top: 0px;
}

.data-\[active\=true\]\:z-10[data-active="true"]{
  z-index: 10;
}

.data-\[vaul-drawer-direction\=bottom\]\:mt-24[data-vaul-drawer-direction="bottom"]{
  margin-top: 6rem;
}

.data-\[vaul-drawer-direction\=top\]\:mb-24[data-vaul-drawer-direction="top"]{
  margin-bottom: 6rem;
}

.data-\[orientation\=horizontal\]\:h-1\.5[data-orientation="horizontal"]{
  height: 0.375rem;
}

.data-\[orientation\=horizontal\]\:h-full[data-orientation="horizontal"]{
  height: 100%;
}

.data-\[orientation\=horizontal\]\:h-px[data-orientation="horizontal"]{
  height: 1px;
}

.data-\[orientation\=vertical\]\:h-full[data-orientation="vertical"]{
  height: 100%;
}

.data-\[panel-group-direction\=vertical\]\:h-px[data-panel-group-direction="vertical"]{
  height: 1px;
}

.data-\[size\=default\]\:h-9[data-size="default"]{
  height: 2.25rem;
}

.data-\[size\=sm\]\:h-8[data-size="sm"]{
  height: 2rem;
}

.data-\[vaul-drawer-direction\=bottom\]\:max-h-\[80vh\][data-vaul-drawer-direction="bottom"]{
  max-height: 80vh;
}

.data-\[vaul-drawer-direction\=top\]\:max-h-\[80vh\][data-vaul-drawer-direction="top"]{
  max-height: 80vh;
}

.data-\[orientation\=vertical\]\:min-h-44[data-orientation="vertical"]{
  min-height: 11rem;
}

.data-\[orientation\=horizontal\]\:w-full[data-orientation="horizontal"]{
  width: 100%;
}

.data-\[orientation\=vertical\]\:w-1\.5[data-orientation="vertical"]{
  width: 0.375rem;
}

.data-\[orientation\=vertical\]\:w-auto[data-orientation="vertical"]{
  width: auto;
}

.data-\[orientation\=vertical\]\:w-full[data-orientation="vertical"]{
  width: 100%;
}

.data-\[orientation\=vertical\]\:w-px[data-orientation="vertical"]{
  width: 1px;
}

.data-\[panel-group-direction\=vertical\]\:w-full[data-panel-group-direction="vertical"]{
  width: 100%;
}

.data-\[vaul-drawer-direction\=left\]\:w-3\/4[data-vaul-drawer-direction="left"]{
  width: 75%;
}

.data-\[vaul-drawer-direction\=right\]\:w-3\/4[data-vaul-drawer-direction="right"]{
  width: 75%;
}

.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\=left\]\:-translate-x-1[data-side="left"]{
  --tw-translate-x: -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\=right\]\:translate-x-1[data-side="right"]{
  --tw-translate-x: 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-\[state\=checked\]\:translate-x-\[calc\(100\%-2px\)\][data-state="checked"]{
  --tw-translate-x: calc(100% - 2px);
  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-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"]{
  --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));
}

@keyframes accordion-up{

  from{
    height: var(--radix-accordion-content-height);
  }

  to{
    height: 0;
  }
}

.data-\[state\=closed\]\:animate-accordion-up[data-state="closed"]{
  animation: accordion-up 0.2s ease-out;
}

@keyframes accordion-down{

  from{
    height: 0;
  }

  to{
    height: var(--radix-accordion-content-height);
  }
}

.data-\[state\=open\]\:animate-accordion-down[data-state="open"]{
  animation: accordion-down 0.2s ease-out;
}

.data-\[orientation\=vertical\]\:flex-col[data-orientation="vertical"]{
  flex-direction: column;
}

.data-\[panel-group-direction\=vertical\]\:flex-col[data-panel-group-direction="vertical"]{
  flex-direction: column;
}

.data-\[range-end\=true\]\:rounded-md[data-range-end="true"]{
  border-radius: calc(var(--radius) - 2px);
}

.data-\[range-middle\=true\]\:rounded-none[data-range-middle="true"]{
  border-radius: 0px;
}

.data-\[range-start\=true\]\:rounded-md[data-range-start="true"]{
  border-radius: calc(var(--radius) - 2px);
}

.data-\[selected\=true\]\:rounded-none[data-selected="true"]{
  border-radius: 0px;
}

.data-\[range-end\=true\]\:rounded-r-md[data-range-end="true"]{
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}

.data-\[range-start\=true\]\:rounded-l-md[data-range-start="true"]{
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}

.data-\[vaul-drawer-direction\=bottom\]\:rounded-t-lg[data-vaul-drawer-direction="bottom"]{
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

.data-\[vaul-drawer-direction\=top\]\:rounded-b-lg[data-vaul-drawer-direction="top"]{
  border-bottom-right-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}

.data-\[variant\=outline\]\:border-l-0[data-variant="outline"]{
  border-left-width: 0px;
}

.data-\[vaul-drawer-direction\=bottom\]\:border-t[data-vaul-drawer-direction="bottom"]{
  border-top-width: 1px;
}

.data-\[vaul-drawer-direction\=left\]\:border-r[data-vaul-drawer-direction="left"]{
  border-right-width: 1px;
}

.data-\[vaul-drawer-direction\=right\]\:border-l[data-vaul-drawer-direction="right"]{
  border-left-width: 1px;
}

.data-\[vaul-drawer-direction\=top\]\:border-b[data-vaul-drawer-direction="top"]{
  border-bottom-width: 1px;
}

.data-\[active\=true\]\:border-ring[data-active="true"]{
  --tw-border-opacity: 1;
  border-color: oklch(var(--ring) / var(--tw-border-opacity, 1));
}

.data-\[state\=checked\]\:border-primary[data-state="checked"]{
  --tw-border-opacity: 1;
  border-color: oklch(var(--primary) / var(--tw-border-opacity, 1));
}

.data-\[active\=true\]\:bg-accent\/50[data-active="true"]{
  background-color: oklch(var(--accent) / 0.5);
}

.data-\[active\=true\]\:bg-sidebar-accent[data-active="true"]{
  background-color: oklch(var(--sidebar-accent));
}

.data-\[range-end\=true\]\:bg-primary[data-range-end="true"]{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.data-\[range-middle\=true\]\:bg-accent[data-range-middle="true"]{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[range-start\=true\]\:bg-primary[data-range-start="true"]{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.data-\[selected-single\=true\]\:bg-primary[data-selected-single="true"]{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.data-\[selected\=true\]\:bg-accent[data-selected="true"]{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

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

.data-\[state\=checked\]\:bg-primary[data-state="checked"]{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.data-\[state\=on\]\:bg-accent[data-state="on"]{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[state\=open\]\:bg-accent[data-state="open"]{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

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

.data-\[state\=open\]\:bg-secondary[data-state="open"]{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--secondary) / var(--tw-bg-opacity, 1));
}

.data-\[state\=selected\]\:bg-muted[data-state="selected"]{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--muted) / var(--tw-bg-opacity, 1));
}

.data-\[state\=unchecked\]\:bg-input[data-state="unchecked"]{
  background-color: oklch(var(--input));
}

.data-\[inset\]\:pl-8[data-inset]{
  padding-left: 2rem;
}

.data-\[active\=true\]\:font-medium[data-active="true"]{
  font-weight: 500;
}

.data-\[active\=true\]\:text-accent-foreground[data-active="true"]{
  color: oklch(var(--accent-foreground));
}

.data-\[active\=true\]\:text-sidebar-accent-foreground[data-active="true"]{
  color: oklch(var(--sidebar-accent-foreground));
}

.data-\[error\=true\]\:text-destructive[data-error="true"]{
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}

.data-\[placeholder\]\:text-muted-foreground[data-placeholder]{
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.data-\[range-end\=true\]\:text-primary-foreground[data-range-end="true"]{
  color: oklch(var(--primary-foreground));
}

.data-\[range-middle\=true\]\:text-accent-foreground[data-range-middle="true"]{
  color: oklch(var(--accent-foreground));
}

.data-\[range-start\=true\]\:text-primary-foreground[data-range-start="true"]{
  color: oklch(var(--primary-foreground));
}

.data-\[selected-single\=true\]\:text-primary-foreground[data-selected-single="true"]{
  color: oklch(var(--primary-foreground));
}

.data-\[selected\=true\]\:text-accent-foreground[data-selected="true"]{
  color: oklch(var(--accent-foreground));
}

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

.data-\[state\=on\]\:text-accent-foreground[data-state="on"]{
  color: oklch(var(--accent-foreground));
}

.data-\[state\=open\]\:text-accent-foreground[data-state="open"]{
  color: oklch(var(--accent-foreground));
}

.data-\[state\=open\]\:text-muted-foreground[data-state="open"]{
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.data-\[variant\=destructive\]\:text-destructive[data-variant="destructive"]{
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}

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

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

.data-\[state\=open\]\:opacity-100[data-state="open"]{
  opacity: 1;
}

.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-\[variant\=outline\]\:shadow-xs[data-variant="outline"]{
  --tw-shadow: 0 1px 2px 0 rgba(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-\[active\=true\]\:ring-\[3px\][data-active="true"]{
  --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);
}

.data-\[active\=true\]\:ring-ring\/50[data-active="true"]{
  --tw-ring-color: oklch(var(--ring) / 0.5);
}

.data-\[state\=closed\]\:duration-300[data-state="closed"]{
  transition-duration: 300ms;
}

.data-\[state\=open\]\:duration-500[data-state="open"]{
  transition-duration: 500ms;
}

.data-\[motion\^\=from-\]\:animate-in[data-motion^="from-"]{
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

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

.data-\[state\=visible\]\:animate-in[data-state="visible"]{
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.data-\[motion\^\=to-\]\:animate-out[data-motion^="to-"]{
  animation-name: exit;
  animation-duration: 150ms;
  --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\]\:animate-out[data-state="closed"]{
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.data-\[state\=hidden\]\:animate-out[data-state="hidden"]{
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.data-\[motion\^\=from-\]\:fade-in[data-motion^="from-"]{
  --tw-enter-opacity: 0;
}

.data-\[motion\^\=to-\]\:fade-out[data-motion^="to-"]{
  --tw-exit-opacity: 0;
}

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

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

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

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

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

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

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

.data-\[motion\=from-end\]\:slide-in-from-right-52[data-motion="from-end"]{
  --tw-enter-translate-x: 13rem;
}

.data-\[motion\=from-start\]\:slide-in-from-left-52[data-motion="from-start"]{
  --tw-enter-translate-x: -13rem;
}

.data-\[motion\=to-end\]\:slide-out-to-right-52[data-motion="to-end"]{
  --tw-exit-translate-x: 13rem;
}

.data-\[motion\=to-start\]\:slide-out-to-left-52[data-motion="to-start"]{
  --tw-exit-translate-x: -13rem;
}

.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-bottom[data-state="closed"]{
  --tw-exit-translate-y: 100%;
}

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

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

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

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

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

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

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

.data-\[state\=closed\]\:duration-300[data-state="closed"]{
  animation-duration: 300ms;
}

.data-\[state\=open\]\:duration-500[data-state="open"]{
  animation-duration: 500ms;
}

.\*\:data-\[slot\=select-value\]\:line-clamp-1[data-slot="select-value"] > *{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.\*\:data-\[slot\=select-value\]\:flex[data-slot="select-value"] > *{
  display: flex;
}

.\*\:data-\[slot\=select-value\]\:items-center[data-slot="select-value"] > *{
  align-items: center;
}

.\*\:data-\[slot\=select-value\]\:gap-2[data-slot="select-value"] > *{
  gap: 0.5rem;
}

.\*\:data-\[slot\=alert-description\]\:text-destructive\/90[data-slot="alert-description"] > *{
  color: oklch(var(--destructive) / 0.9);
}

.data-\[panel-group-direction\=vertical\]\:after\:left-0[data-panel-group-direction="vertical"]::after{
  content: var(--tw-content);
  left: 0px;
}

.data-\[panel-group-direction\=vertical\]\:after\:h-1[data-panel-group-direction="vertical"]::after{
  content: var(--tw-content);
  height: 0.25rem;
}

.data-\[panel-group-direction\=vertical\]\:after\:w-full[data-panel-group-direction="vertical"]::after{
  content: var(--tw-content);
  width: 100%;
}

.data-\[panel-group-direction\=vertical\]\:after\:-translate-y-1\/2[data-panel-group-direction="vertical"]::after{
  content: var(--tw-content);
  --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));
}

.data-\[panel-group-direction\=vertical\]\:after\:translate-x-0[data-panel-group-direction="vertical"]::after{
  content: var(--tw-content);
  --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));
}

.data-\[variant\=outline\]\:first\:border-l:first-child[data-variant="outline"]{
  border-left-width: 1px;
}

.data-\[active\=true\]\:hover\:bg-accent:hover[data-active="true"]{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[state\=open\]\:hover\:bg-accent:hover[data-state="open"]{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

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

.data-\[state\=open\]\:hover\:text-sidebar-accent-foreground:hover[data-state="open"]{
  color: oklch(var(--sidebar-accent-foreground));
}

.data-\[active\=true\]\:focus\:bg-accent:focus[data-active="true"]{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[state\=open\]\:focus\:bg-accent:focus[data-state="open"]{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[variant\=destructive\]\:focus\:bg-destructive\/10:focus[data-variant="destructive"]{
  background-color: oklch(var(--destructive) / 0.1);
}

.data-\[variant\=destructive\]\:focus\:text-destructive:focus[data-variant="destructive"]{
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}

.group[data-disabled="true"] .group-data-\[disabled\=true\]\:pointer-events-none{
  pointer-events: none;
}

.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:relative{
  position: relative;
}

.group[data-side="left"] .group-data-\[side\=left\]\:-right-4{
  right: -1rem;
}

.group[data-side="right"] .group-data-\[side\=right\]\:left-0{
  left: 0px;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:top-full{
  top: 100%;
}

.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:z-10{
  z-index: 10;
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:-mt-8{
  margin-top: -2rem;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:mt-1\.5{
  margin-top: 0.375rem;
}

.group\/drawer-content[data-vaul-drawer-direction="bottom"] .group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:block{
  display: block;
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:hidden{
  display: none;
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)\+\(--spacing\(4\)\)\+2px\)\]{
  width: calc(var(--sidebar-width-icon) + (--spacing(4)) + 2px);
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\: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));
}

.group[data-side="right"] .group-data-\[side\=right\]\:rotate-180{
  --tw-rotate: 180deg;
  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));
}

.group[data-state="open"] .group-data-\[state\=open\]\:rotate-180{
  --tw-rotate: 180deg;
  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));
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:justify-center{
  justify-content: center;
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:overflow-hidden{
  overflow: hidden;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:overflow-hidden{
  overflow: hidden;
}

.group[data-variant="floating"] .group-data-\[variant\=floating\]\:rounded-lg{
  border-radius: var(--radius);
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:rounded-md{
  border-radius: calc(var(--radius) - 2px);
}

.group[data-variant="floating"] .group-data-\[variant\=floating\]\:border{
  border-width: 1px;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:border{
  border-width: 1px;
}

.group[data-side="left"] .group-data-\[side\=left\]\:border-r{
  border-right-width: 1px;
}

.group[data-side="right"] .group-data-\[side\=right\]\:border-l{
  border-left-width: 1px;
}

.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:border-ring{
  --tw-border-opacity: 1;
  border-color: oklch(var(--ring) / var(--tw-border-opacity, 1));
}

.group[data-variant="floating"] .group-data-\[variant\=floating\]\:border-sidebar-border{
  border-color: oklch(var(--sidebar-border));
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:bg-popover{
  background-color: oklch(var(--popover));
}

.group\/drawer-content[data-vaul-drawer-direction="bottom"] .group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:text-center{
  text-align: center;
}

.group\/drawer-content[data-vaul-drawer-direction="top"] .group-data-\[vaul-drawer-direction\=top\]\/drawer-content\:text-center{
  text-align: center;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:text-popover-foreground{
  color: oklch(var(--popover-foreground));
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:opacity-0{
  opacity: 0;
}

.group[data-disabled="true"] .group-data-\[disabled\=true\]\:opacity-50{
  opacity: 0.5;
}

.group[data-variant="floating"] .group-data-\[variant\=floating\]\: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);
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:shadow{
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:ring-\[3px\]{
  --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);
}

.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:ring-ring\/50{
  --tw-ring-color: oklch(var(--ring) / 0.5);
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:duration-200{
  transition-duration: 200ms;
  animation-duration: 200ms;
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:after\:left-full::after{
  content: var(--tw-content);
  left: 100%;
}

.group[data-collapsible="offcanvas"] .hover\:group-data-\[collapsible\=offcanvas\]\:bg-sidebar:hover{
  background-color: oklch(var(--sidebar));
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:animate-in[data-state="open"]{
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:animate-out[data-state="closed"]{
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:fade-out-0[data-state="closed"]{
  --tw-exit-opacity: 0;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:fade-in-0[data-state="open"]{
  --tw-enter-opacity: 0;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:zoom-out-95[data-state="closed"]{
  --tw-exit-scale: .95;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:zoom-in-95[data-state="open"]{
  --tw-enter-scale: .95;
}

.peer\/menu-button[data-size="default"] ~ .peer-data-\[size\=default\]\/menu-button\:top-1\.5{
  top: 0.375rem;
}

.peer\/menu-button[data-size="lg"] ~ .peer-data-\[size\=lg\]\/menu-button\:top-2\.5{
  top: 0.625rem;
}

.peer\/menu-button[data-size="sm"] ~ .peer-data-\[size\=sm\]\/menu-button\:top-1{
  top: 0.25rem;
}

.peer\/menu-button[data-active="true"] ~ .peer-data-\[active\=true\]\/menu-button\:text-sidebar-accent-foreground{
  color: oklch(var(--sidebar-accent-foreground));
}

.dark\:border-input:is(.dark *){
  border-color: oklch(var(--input));
}

.dark\:bg-destructive\/60:is(.dark *){
  background-color: oklch(var(--destructive) / 0.6);
}

.dark\:text-muted-foreground:is(.dark *){
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.dark\:hover\:bg-accent\/50:hover:is(.dark *){
  background-color: oklch(var(--accent) / 0.5);
}

.dark\:hover\:text-accent-foreground:hover:is(.dark *){
  color: oklch(var(--accent-foreground));
}

.dark\:focus-visible\:ring-destructive\/40:focus-visible:is(.dark *){
  --tw-ring-color: oklch(var(--destructive) / 0.4);
}

.dark\:data-\[state\=active\]\:border-input[data-state="active"]:is(.dark *){
  border-color: oklch(var(--input));
}

.dark\:data-\[state\=checked\]\:bg-primary[data-state="checked"]:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.dark\:data-\[state\=checked\]\:bg-primary-foreground[data-state="checked"]:is(.dark *){
  background-color: oklch(var(--primary-foreground));
}

.dark\:data-\[state\=unchecked\]\:bg-foreground[data-state="unchecked"]:is(.dark *){
  background-color: oklch(var(--foreground));
}

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

.dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20:focus[data-variant="destructive"]:is(.dark *){
  background-color: oklch(var(--destructive) / 0.2);
}

@media (min-width: 640px){

  .sm\:block{
    display: block;
  }

  .sm\:flex{
    display: flex;
  }

  .sm\:max-w-lg{
    max-width: 32rem;
  }

  .sm\:max-w-sm{
    max-width: 24rem;
  }

  .sm\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

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

  .sm\:gap-2\.5{
    gap: 0.625rem;
  }

  .sm\:pl-2\.5{
    padding-left: 0.625rem;
  }

  .sm\:pr-2\.5{
    padding-right: 0.625rem;
  }

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

  .data-\[vaul-drawer-direction\=left\]\:sm\:max-w-sm[data-vaul-drawer-direction="left"]{
    max-width: 24rem;
  }

  .data-\[vaul-drawer-direction\=right\]\:sm\:max-w-sm[data-vaul-drawer-direction="right"]{
    max-width: 24rem;
  }
}

@media (min-width: 768px){

  .md\:absolute{
    position: absolute;
  }

  .md\:w-\[var\(--radix-navigation-menu-viewport-width\)\]{
    width: var(--radix-navigation-menu-viewport-width);
  }

  .md\:w-auto{
    width: auto;
  }

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

  .md\:gap-1\.5{
    gap: 0.375rem;
  }

  .md\:p-6{
    padding: 1.5rem;
  }

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

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

  .md\:opacity-0{
    opacity: 0;
  }

  .md\:after\:hidden::after{
    content: var(--tw-content);
    display: none;
  }
}

@media (min-width: 900px){

  .tab\:col-span-2{
    grid-column: span 2 / span 2;
  }

  .tab\:block{
    display: block;
  }

  .tab\:flex{
    display: flex;
  }

  .tab\:table-cell{
    display: table-cell;
  }

  .tab\:grid{
    display: grid;
  }

  .tab\:hidden{
    display: none;
  }

  .tab\:w-72{
    width: 18rem;
  }

  .tab\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tab\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .tab\:grid-cols-\[minmax\(0\2c 2fr\)_minmax\(0\2c 1\.1fr\)_minmax\(0\2c 0\.7fr\)_minmax\(0\2c 1fr\)_minmax\(0\2c 1fr\)_minmax\(0\2c 1fr\)_minmax\(0\2c 7\.5rem\)_minmax\(0\2c 2\.5rem\)\]{
    grid-template-columns: minmax(0,2fr) minmax(0,1.1fr) minmax(0,0.7fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,7.5rem) minmax(0,2.5rem);
  }

  .tab\:grid-cols-\[minmax\(0\2c 3fr\)_minmax\(0\2c 1fr\)_minmax\(0\2c 1fr\)_minmax\(0\2c 1fr\)\]{
    grid-template-columns: minmax(0,3fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  }

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

  .tab\:items-start{
    align-items: flex-start;
  }

  .tab\:items-end{
    align-items: flex-end;
  }

  .tab\:items-center{
    align-items: center;
  }

  .tab\:items-baseline{
    align-items: baseline;
  }

  .tab\:justify-between{
    justify-content: space-between;
  }

  .tab\:gap-4{
    gap: 1rem;
  }

  .tab\:text-right{
    text-align: right;
  }

  .tab\:text-3xl{
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
}

@media (min-width: 1024px){

  .lg\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.\[\&\:first-child\[data-selected\=true\]_button\]\:rounded-l-md:first-child[data-selected=true] button{
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}

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

.\[\&\:last-child\[data-selected\=true\]_button\]\:rounded-r-md:last-child[data-selected=true] button{
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}

.\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\]>[role=checkbox]{
  --tw-translate-y: 2px;
  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));
}

.\[\&\>button\]\:hidden>button{
  display: none;
}

.\[\&\>span\:last-child\]\:truncate>span:last-child{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.\[\&\>span\]\:text-xs>span{
  font-size: 0.75rem;
  line-height: 1rem;
}

.\[\&\>span\]\:opacity-70>span{
  opacity: 0.7;
}

.\[\&\>svg\]\:pointer-events-none>svg{
  pointer-events: none;
}

.\[\&\>svg\]\:size-3>svg{
  width: 0.75rem;
  height: 0.75rem;
}

.\[\&\>svg\]\:size-3\.5>svg{
  width: 0.875rem;
  height: 0.875rem;
}

.\[\&\>svg\]\:size-4>svg{
  width: 1rem;
  height: 1rem;
}

.\[\&\>svg\]\:h-2\.5>svg{
  height: 0.625rem;
}

.\[\&\>svg\]\:h-3>svg{
  height: 0.75rem;
}

.\[\&\>svg\]\:w-2\.5>svg{
  width: 0.625rem;
}

.\[\&\>svg\]\:w-3>svg{
  width: 0.75rem;
}

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

.\[\&\>svg\]\:translate-y-0\.5>svg{
  --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));
}

.\[\&\>svg\]\:text-current>svg{
  color: currentColor;
}

.\[\&\>svg\]\:text-muted-foreground>svg{
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.\[\&\>svg\]\:text-sidebar-accent-foreground>svg{
  color: oklch(var(--sidebar-accent-foreground));
}

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

.\[\&\[data-panel-group-direction\=vertical\]\>div\]\:rotate-90[data-panel-group-direction=vertical]>div{
  --tw-rotate: 90deg;
  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-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg{
  --tw-rotate: 180deg;
  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));
}

.\[\&_\.recharts-cartesian-axis-tick_text\]\:fill-muted-foreground .recharts-cartesian-axis-tick text{
  fill: oklch(var(--muted-foreground) / 1);
}

.\[\&_\.recharts-curve\.recharts-tooltip-cursor\]\:stroke-border .recharts-curve.recharts-tooltip-cursor{
  stroke: oklch(var(--border));
}

.\[\&_\.recharts-dot\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-dot[stroke='#fff']{
  stroke: transparent;
}

.\[\&_\.recharts-polar-grid_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-polar-grid [stroke='#ccc']{
  stroke: oklch(var(--border));
}

.\[\&_\.recharts-radial-bar-background-sector\]\:fill-muted .recharts-radial-bar-background-sector{
  fill: oklch(var(--muted) / 1);
}

.\[\&_\.recharts-rectangle\.recharts-tooltip-cursor\]\:fill-muted .recharts-rectangle.recharts-tooltip-cursor{
  fill: oklch(var(--muted) / 1);
}

.\[\&_\.recharts-reference-line_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-reference-line [stroke='#ccc']{
  stroke: oklch(var(--border));
}

.\[\&_\.recharts-sector\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-sector[stroke='#fff']{
  stroke: transparent;
}

.\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading]{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading]{
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading]{
  font-size: 0.75rem;
  line-height: 1rem;
}

.\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading]{
  font-weight: 500;
}

.\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground [cmdk-group-heading]{
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden]) ~[cmdk-group]{
  padding-top: 0px;
}

.\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group]{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg{
  height: 1.25rem;
}

.\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg{
  width: 1.25rem;
}

.\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input]{
  height: 3rem;
}

.\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item]{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item]{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg{
  height: 1.25rem;
}

.\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg{
  width: 1.25rem;
}

.\[\&_p\]\:leading-relaxed p{
  line-height: 1.625;
}

.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*='size-']){
  width: 1rem;
  height: 1rem;
}

.\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-muted-foreground svg:not([class*='text-']){
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.\[\&_svg\]\:pointer-events-none svg{
  pointer-events: none;
}

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

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

.\[\&_tr\]\:border-b tr{
  border-bottom-width: 1px;
}

[data-side=left][data-collapsible=offcanvas] .\[\[data-side\=left\]\[data-collapsible\=offcanvas\]_\&\]\:-right-2{
  right: -0.5rem;
}

[data-side=left][data-state=collapsed] .\[\[data-side\=left\]\[data-state\=collapsed\]_\&\]\:cursor-e-resize{
  cursor: e-resize;
}

[data-side=right][data-collapsible=offcanvas] .\[\[data-side\=right\]\[data-collapsible\=offcanvas\]_\&\]\:-left-2{
  left: -0.5rem;
}

[data-side=right][data-state=collapsed] .\[\[data-side\=right\]\[data-state\=collapsed\]_\&\]\:cursor-w-resize{
  cursor: w-resize;
}

[data-slot=card-content] .\[\[data-slot\=card-content\]_\&\]\:bg-transparent{
  background-color: transparent;
}

[data-slot=popover-content] .\[\[data-slot\=popover-content\]_\&\]\:bg-transparent{
  background-color: transparent;
}

a.\[a\&\]\:hover\:bg-accent:hover{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

a.\[a\&\]\:hover\:bg-destructive\/90:hover{
  background-color: oklch(var(--destructive) / 0.9);
}

a.\[a\&\]\:hover\:bg-primary\/90:hover{
  background-color: oklch(var(--primary) / 0.9);
}

a.\[a\&\]\:hover\:bg-secondary\/90:hover{
  background-color: oklch(var(--secondary) / 0.9);
}

a.\[a\&\]\:hover\:text-accent-foreground:hover{
  color: oklch(var(--accent-foreground));
}