@font-face {
  font-family: "Geist";
  src: url("/assets/Geist-Regular-rEkwi4hp.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("/assets/Geist-Bold-COtuY0uS.woff2") format("woff2");
  font-weight: 700;
  font-style: bold;
  font-display: swap;
}

:host,
:root {
  color-scheme: var(--q-color-scheme, light dark);
  font-family: Geist, system-ui, sans-serif;

  /* 
  * all colorization should work by setting a single color (for merchant) -> --color-accent. all other colors should be derived, but may be overriden, if needed.
  * do not generate positive, warning, netagive - not worth it 
  * better to generate fixed values when generating a template
  */

  /* qasima colors */
  --color-canvas: light-dark(oklch(0.979 0 0), oklch(0.14 0.02 260));

  /* DEFAULTS (= QASIMA) */
  /* primary button variant */
  --color-accent: light-dark(oklch(0.2 0 0), oklch(0.95 0 0));

  /* not worth it to derive these from the accent variable */
  --color-positive: oklch(0.85 0.25 128);
  --color-positive-foreground: oklch(0.45 0.25 128);
  --color-warning: oklch(0.85 0.3 55);
  --color-warning-foreground: oklch(0.45 0.3 55);
  --color-info: light-dark(oklch(0.88 0.12 250), oklch(0.38 0.14 250));
  --color-info-foreground: light-dark(oklch(0.38 0.14 250), oklch(0.92 0.06 250));
  --color-negative: light-dark(oklch(0.55 0.3 30), oklch(0.35 0.35 30));
  --color-negative-foreground: light-dark(oklch(0.98 0.05 30), oklch(0.9 0.1 30));

  --color-overlay-hover: oklch(0 0 0 / 0.05);

  background-color: var(--color-canvas);

  /* --color-accent foreground derivation */
  /* this is more complex, because we don't know if the accent color is light or dark */
  /* browser native color derivation with manual shift */
  /* makes the contrast-color() think the source color is darker, otherwise it flips too early on C0.4+ */
  --color-accent-shift: 0.75;
  --color-accent-with-shift: oklch(from var(--color-accent) calc(l * var(--color-accent-shift)) c h);
  --color-accent-foreground: light-dark(oklch(0.98 0 0), oklch(0.15 0 0));

  /* --color-neutral derivation */
  --color-neutral: light-dark(
    oklch(from var(--color-accent) 0.95 calc(c * 0.1) h),
    oklch(from var(--color-accent) 0.35 calc(c * 0.1) h)
  );
  --color-neutral-foreground: light-dark(
    oklch(from var(--color-accent) 0.4 calc(c * 0.5) h),
    oklch(from var(--color-accent) 0.8 calc(c * 0.2) h)
  );
}

body {
  margin: 0;
  min-block-size: 100dvb;
  background-color: var(--color-canvas);
  color-scheme: var(--q-color-scheme, light dark);
}

@supports (color: contrast-color(red)) {
  :host,
  :root {
    --color-accent-foreground: color-mix(
      in oklch shorter hue,
      contrast-color(var(--color-accent-with-shift)) 98%,
      var(--color-accent) 2%
    );
  }
}

/* light-only embed hosts set data-color-scheme="light" — cascades into nested q-* via --q-color-scheme */
:host([data-color-scheme="light"]) {
  --q-color-scheme: light;
  color-scheme: light;
}

:host([data-color-scheme="dark"]) {
  --q-color-scheme: dark;
  color-scheme: dark;
}
.login-view {
  container-type: inline-size;
  display: grid;
  place-items: center;
  min-block-size: 100dvb;
  color-scheme: light dark;
  color: light-dark(oklch(0.2 0 0), oklch(0.92 0 0));
  background-color: var(--color-canvas);

  .login-panel {
    display: grid;
    gap: 2.5rem;
    inline-size: min(100%, 22rem);
    justify-items: center;
  }

  .login-logo {
    display: block;
    inline-size: min(100%, 10rem);
    line-height: 0;

    .login-logo-image {
      display: block;
      inline-size: 100%;
      block-size: auto;
      object-fit: contain;
    }
  }

  .login-form {
    inline-size: 100%;
  }
}
q-spinner {
  display: inline-block;
  vertical-align: middle;
  line-height: 0;
  inline-size: 1em;
  block-size: 1em;
  --spinner-size: 1em;
  --spinner-stroke: 2.5;
  font-size: var(--spinner-size);
  color: var(--color-spinner, currentColor);

  .spinner {
    display: block;
    line-height: 0;
    inline-size: 100%;
    block-size: 100%;
  }

  .spinner-svg {
    display: block;
    inline-size: 100%;
    block-size: 100%;
  }

  circle {
    fill: none;
    stroke-width: var(--spinner-stroke);
  }

  .track {
    stroke: light-dark(
      color-mix(in oklch, currentColor 12%, transparent),
      color-mix(in oklch, currentColor 28%, transparent)
    );
  }

  .indicator {
    stroke: currentColor;
    stroke-linecap: round;
    stroke-dasharray: 42 14.5;
    transform-origin: center;
    animation: q-spinner-spin 1s linear infinite;
  }

  &[size="xs"] {
    --spinner-size: 0.75em;
    --spinner-stroke: 2.35;
  }

  &[size="sm"] {
    --spinner-size: 0.875em;
    --spinner-stroke: 2.4;
  }

  &[size="md"] {
    --spinner-size: 1em;
    --spinner-stroke: 2.5;
  }

  &[size="lg"] {
    --spinner-size: 1.25em;
    --spinner-stroke: 2.45;
  }

  &[size="xl"] {
    --spinner-size: 1.5em;
    --spinner-stroke: 2.35;
  }

  &[size="2xl"] {
    --spinner-size: 2em;
    --spinner-stroke: 2.2;
  }
}

@keyframes q-spinner-spin {
  to {
    transform: rotate(360deg);
  }
}
q-button {
  color-scheme: var(--q-color-scheme, light dark);
  display: inline-flex;
  vertical-align: middle;
  --button-size: 1em;
  font-size: var(--button-size);

  --radius: 0.625rem;
  --button-border-width: 0;
  --button-border-color: transparent;
  --button-line-height: 1.25;
  --button-min-block-size: 1.75em;
  --button-padding-block: 0.375em;
  --button-padding-inline: 0.75em;

  /* default: primary variant x accent tone */
  --button-color-background: var(--color-accent);
  --button-color-foreground: var(--color-accent-foreground);

  @media (pointer: coarse) and (max-width: 47.99rem) {
    --button-min-block-size: 2.75em;
    --button-padding-block: 0.75em;
    --button-padding-inline: 0.75em;
  }

  :is(button, a) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    color: var(--button-color-foreground);
    background-color: var(--button-color-background);
    border-width: var(--button-border-width);
    border-style: solid;
    border-color: var(--button-border-color);
    border-radius: var(--radius);
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
    font: inherit;
    font-weight: 500;
    line-height: var(--button-line-height);
    appearance: none;
    -webkit-appearance: none;
    --button-block-size: max(
      var(--button-min-block-size),
      calc(var(--button-padding-block) * 2 + var(--button-line-height) * 1em)
    );
    block-size: var(--button-block-size);
    min-block-size: var(--button-block-size);
    padding: var(--button-padding-block) var(--button-padding-inline);
    transition-property: transform, color, background-color, border-color;
    transition-duration: 120ms;
    transition-timing-function: ease-in-out;
    text-decoration: none;
  }

  @media (hover: hover) {
    :is(button, a):hover:not(:disabled):not([aria-disabled="true"]) {
      background-color: color-mix(
        in oklch decreasing hue,
        var(--button-color-background) 90%,
        var(--button-color-foreground) 10%
      );
    }
  }

  :is(button, a):active:not(:disabled):not([aria-disabled="true"]) {
    transform: scale(0.98);
  }

  button:disabled,
  a[aria-disabled="true"] {
    background-color: color-mix(
      in oklch decreasing hue,
      var(--button-color-background) 50%,
      var(--button-color-foreground) 50%
    );
    color: color-mix(in oklch decreasing hue, var(--button-color-foreground) 45%, var(--button-color-background) 100%);
    cursor: inherit;
    pointer-events: none;
  }

  &[disabled] {
    cursor: not-allowed;
  }

  &[progress]:not([disabled]) {
    cursor: wait;
  }

  &[progress] :is(button, a) {
    cursor: inherit;
  }

  &[progress]:not([interruptible]) :is(button, a) {
    pointer-events: none;
  }

  .content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }

  .icon {
    flex-shrink: 0;
    display: block;
  }

  .content--inline {
    min-inline-size: var(--button-label-width, auto);
  }

  .content--over-label,
  .content--replace-label {
    display: inline-grid;
    align-items: center;
    justify-items: center;

    .label,
    q-spinner,
    .icon {
      grid-area: 1 / 1;
    }
  }

  .content--over-label .label {
    opacity: 0.4;
  }

  .content--replace-label .label {
    opacity: 0;
  }

  .shortcut {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    margin-inline-start: 0.125rem;
    opacity: 0.85;
  }

  .shortcut-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 1.25em;
    padding: 0.0625em 0.3125em;
    border-radius: 0.25rem;
    border: 1px solid color-mix(in oklch, currentColor 22%, transparent);
    background: color-mix(in oklch, currentColor 10%, transparent);
    font-family: inherit;
    font-size: 0.75em;
    font-weight: 600;
    line-height: 1.2;
  }

  q-spinner {
    color: inherit;
  }

  &[size="xs"] {
    --button-size: 0.75em;
  }

  &[size="sm"] {
    --button-size: 0.875em;
  }

  &[size="md"] {
    --button-size: 1em;
  }

  &[size="lg"] {
    --button-size: 1.25em;
  }

  &[size="xl"] {
    --button-size: 1.5em;
  }

  &[size="2xl"] {
    --button-size: 2em;
  }

  &[shape="pill"] :is(button, a) {
    border-radius: calc(infinity * 1px);
  }

  &[shape="circle"] :is(button, a) {
    border-radius: calc(infinity * 1px);
    inline-size: var(--button-block-size);
    block-size: var(--button-block-size);
    min-inline-size: var(--button-block-size);
    min-block-size: var(--button-block-size);
    padding: 0;
  }

  &[full-width] {
    display: block;
    inline-size: 100%;

    :is(button, a) {
      inline-size: 100%;
    }
  }

  &[active] :is(button, a):not(:disabled):not([aria-disabled="true"]) {
    background-color: color-mix(
      in oklch decreasing hue,
      var(--button-color-background) 90%,
      var(--button-color-foreground) 10%
    );
  }

  /* tone — remap palette locally so variants pick it up */
  &[tone="negative"] {
    --color-accent: var(--color-negative);
    --color-accent-foreground: var(--color-negative-foreground);

    /* --color-neutral derivation */
    --color-neutral: light-dark(
      oklch(from var(--color-negative) 0.95 calc(c * 0.1) h),
      oklch(from var(--color-negative) 0.35 calc(c * 0.1) h)
    );
    --color-neutral-foreground: light-dark(
      oklch(from var(--color-negative) 0.4 calc(c * 0.5) h),
      oklch(from var(--color-negative) 0.8 calc(c * 0.2) h)
    );
  }

  &[tone="positive"] {
    --color-accent: var(--color-positive);
    --color-accent-foreground: var(--color-positive-foreground);

    /* --color-neutral derivation */
    --color-neutral: light-dark(
      oklch(from var(--color-positive) 0.95 calc(c * 0.1) h),
      oklch(from var(--color-positive) 0.35 calc(c * 0.1) h)
    );
    --color-neutral-foreground: light-dark(
      oklch(from var(--color-positive) 0.4 calc(c * 0.5) h),
      oklch(from var(--color-positive) 0.8 calc(c * 0.2) h)
    );
  }

  &[variant="secondary"] {
    --button-color-background: var(--color-neutral);
    --button-color-foreground: var(--color-neutral-foreground);
  }

  &[variant="ghost"],
  &[variant="outline"] {
    --button-color-background: none;
    --button-color-foreground: var(--color-neutral-foreground);

    @media (hover: hover) {
      :is(button, a):hover:not(:disabled):not([aria-disabled="true"]) {
        background-color: var(--color-neutral);
      }
    }
  }

  &[variant="ghost"][active],
  &[variant="outline"][active] {
    :is(button, a):not(:disabled):not([aria-disabled="true"]) {
      background-color: var(--color-neutral);
    }
  }

  &[variant="outline"] {
    --button-border-width: 1px;
    --button-border-color: light-dark(
      oklch(from var(--color-accent) 0.94 calc(c * 0.05) h),
      oklch(from var(--color-accent) 0.44 calc(c * 0.15) h)
    );

    @media (hover: hover) {
      :is(button, a):hover:not(:disabled):not([aria-disabled="true"]) {
        --button-border-color: light-dark(
          oklch(from var(--color-accent) 0.9 calc(c * 0.15) h),
          oklch(from var(--color-accent) 0.44 calc(c * 0.15) h)
        );
      }
    }
  }

  &[variant="outline"][active] :is(button, a):not(:disabled):not([aria-disabled="true"]) {
    --button-border-color: light-dark(
      oklch(from var(--color-accent) 0.9 calc(c * 0.15) h),
      oklch(from var(--color-accent) 0.44 calc(c * 0.15) h)
    );
  }

  &[variant="link"] {
    --button-color-background: none;
    --button-color-foreground: var(--color-accent);
    --button-border-width: 0;

    :is(button, a) {
      padding: 0;
      text-decoration: underline;
      text-underline-offset: 0.15em;
    }

    @media (hover: hover) {
      :is(button, a):hover:not(:disabled):not([aria-disabled="true"]) {
        --button-color-foreground: color-mix(in oklch, var(--color-accent) 60%, white);
      }
    }
  }

  &[variant="link"][active] :is(button, a):not(:disabled):not([aria-disabled="true"]) {
    --button-color-foreground: color-mix(in oklch, var(--color-accent) 60%, white);
  }
}
q-button-action {
  color-scheme: var(--q-color-scheme, light dark);
  display: inline-block;

  &[data-shake] {
    animation: button-action-shake 400ms ease;
  }
}

@keyframes button-action-shake {
  0%,
  100% {
    transform: translateX(0);
  }

  20%,
  60% {
    transform: translateX(-0.25rem);
  }

  40%,
  80% {
    transform: translateX(0.25rem);
  }
}
q-form {
  display: block;

  form {
    display: grid;
    gap: 1rem;
  }
}
q-form-actions {
  display: block;

  .actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
  }

  &[center] .actions {
    justify-content: center;
  }
}
q-form-field-label {
  label {
    font-size: 1rem;
    font-weight: 500;
    color: light-dark(#3c3c3c, var(--color-neutral-foreground));
    display: flex;
    align-items: baseline;

    span.optional {
      font-size: 0.75em;
      color: #acacac;

      span.dot {
        padding: 0 0.2rem;
      }
    }
  }
}
q-form-field-status {
  span.status {
    display: block;
    padding: 0.25rem 0.35rem;
    font-size: 0.75rem;
  }

  span.variant-attached {
    border-radius: 0 0 10px 10px;
  }

  span.variant-detached {
    border-radius: 10px;
  }

  span.type-error {
    color: var(--color-negative-foreground);
    background-color: var(--color-negative);
  }

  span.type-warning {
    color: var(--color-warning-foreground);
    background-color: var(--color-warning);
  }

  span.type-success {
    color: var(--color-positive-foreground);
    background-color: var(--color-positive);
  }
}
q-form-field {
  div.input-field {
    display: flex;
    flex-direction: column;

    q-form-field-label + span.description,
    q-form-field-label + div.input-wrapper,
    span.description + div.input-wrapper {
      margin-block-start: 0.15rem;
    }

    span.description {
      font-size: 0.75rem;
      padding-bottom: 0.2em;
      color: light-dark(#acacac, #808080);
    }

    div.input-wrapper {
      background-color: light-dark(#ffffff, #202020);
      border: 1px solid light-dark(#e3e3e3, #505050);
      border-radius: 10px;
      padding: 8px;

      &.has-error {
        border-color: var(--color-negative);
      }

      &.has-warning {
        border-color: var(--color-warning);
      }

      &.has-success {
        border-color: var(--color-positive);
      }

      input,
      textarea {
        all: unset;
        display: block;
        background: none;
        border: none;
        padding: 0;
        inline-size: 100%;
        resize: none;
      }

      &:has(:disabled) {
        background-color: light-dark(oklch(0.97 0 0), oklch(0.17 0 0));
        border-color: light-dark(oklch(0.91 0 0), oklch(0.42 0 0));
      }

      input:disabled,
      textarea:disabled {
        color: light-dark(oklch(0.72 0 0), oklch(0.58 0 0));
        cursor: not-allowed;
      }
    }

    &.status-attached {
      div.input-wrapper.has-error,
      div.input-wrapper.has-warning,
      div.input-wrapper.has-success {
        border-radius: 10px 10px 0 0;
      }
    }

    &.status-detached {
      q-form-field-status {
        margin-block-start: 0.35rem;
      }
    }
  }
}
q-form-email {
  display: block;
}
q-form-phone {
  q-form-field div.input-field div.input-wrapper input {
    font-variant-numeric: tabular-nums;
  }
}
q-image {
  display: inline-block;
  line-height: 0;

  .image {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }

  &[fit="cover"] .image {
    object-fit: cover;
  }

  &[fit="contain"] .image {
    object-fit: contain;
  }

  &[fit="fill"] .image {
    object-fit: fill;
  }

  &[fit="none"] .image {
    object-fit: none;
  }

  &[radius="sm"] .image {
    border-radius: 0.25rem;
  }

  &[radius="md"] .image {
    border-radius: 0.5rem;
  }

  &[radius="lg"] .image {
    border-radius: 0.75rem;
  }

  &[radius="full"] .image {
    border-radius: calc(infinity * 1px);
  }
}
q-form-password {
  display: block;
}
q-form-text {
  display: block;
}
q-form-select {
  .input-field {
    display: flex;
    flex-direction: column;
    gap: 0;

    span.description {
      font-size: 0.75rem;
      padding-bottom: 0.2em;
      color: light-dark(#acacac, #808080);
    }

    .input-wrapper {
      position: relative;
      background-color: light-dark(#ffffff, #202020);
      border: 1px solid light-dark(#e3e3e3, #505050);
      border-radius: 10px;
      padding: 8px;

      &.has-error {
        border-color: light-dark(oklch(60% 0.2 25), oklch(0.75 0.12 25));
      }

      &.has-warning {
        border-color: light-dark(oklch(0.75 0.12 85), oklch(0.75 0.12 85));
      }

      &.has-success {
        border-color: light-dark(oklch(0.55 0.12 145), oklch(0.55 0.12 145));
      }

      select,
      .select-filter {
        all: unset;
        display: block;
        inline-size: 100%;
        cursor: pointer;
        color: light-dark(oklch(0.2 0 0), oklch(0.92 0 0));
      }

      .select-filter {
        cursor: text;
        padding-inline-end: 1.5rem;
      }

      .select-arrow {
        position: absolute;
        inset-inline-end: 0.85rem;
        inset-block-start: 50%;
        inline-size: 0.45rem;
        block-size: 0.45rem;
        border-inline-end: 2px solid light-dark(oklch(0.45 0 0), oklch(0.72 0 0));
        border-block-end: 2px solid light-dark(oklch(0.45 0 0), oklch(0.72 0 0));
        rotate: 45deg;
        translate: 0 -65%;
        pointer-events: none;
      }

      &.has-select-arrow {
        select {
          appearance: none;
          padding-inline-end: 1.75rem;
        }
      }

      &.filterable {
        .select-arrow {
          pointer-events: auto;
          cursor: pointer;
        }
      }

      .select-menu {
        position: absolute;
        z-index: 20;
        inset-inline: 0;
        inset-block-start: calc(100% + 0.25rem);
        margin: 0;
        padding: 0.35rem;
        list-style: none;
        max-block-size: 14rem;
        overflow: auto;
        border: 1px solid light-dark(#e3e3e3, #505050);
        border-radius: 10px;
        background: light-dark(#ffffff, #202020);
        box-shadow: 0 0.5rem 1.25rem light-dark(oklch(0.2 0 0 / 0.12), oklch(0.05 0 0 / 0.45));
      }

      .select-option {
        padding: 0.45rem 0.55rem;
        border-radius: 0.45rem;
        cursor: pointer;
        color: light-dark(oklch(0.2 0 0), oklch(0.92 0 0));

        &:hover,
        &:focus,
        &.select-option-active {
          background: light-dark(oklch(0.96 0 0), oklch(0.28 0 0));
        }
      }

      .select-option-empty {
        cursor: default;
        color: light-dark(oklch(0.55 0 0), oklch(0.65 0 0));

        &:hover {
          background: transparent;
        }
      }

      &:has(:disabled) {
        background-color: light-dark(oklch(0.97 0 0), oklch(0.17 0 0));
        border-color: light-dark(oklch(0.91 0 0), oklch(0.42 0 0));
      }

      select:disabled,
      .select-filter:disabled {
        color: light-dark(oklch(0.72 0 0), oklch(0.58 0 0));
        cursor: not-allowed;
      }
    }

    &.status-attached {
      .input-wrapper.has-error,
      .input-wrapper.has-warning,
      .input-wrapper.has-success {
        border-radius: 10px 10px 0 0;
      }
    }

    &.status-detached {
      q-form-field-status {
        margin-block-start: 0.35rem;
      }
    }
  }
}
q-dialog {
  display: contents;

  .dialog {
    border: 1px solid light-dark(oklch(0.85 0 0), oklch(0.35 0 0));
    border-radius: 0.5rem;
    padding: 1rem;
    background: light-dark(oklch(0.99 0 0), oklch(0.22 0 0));
    color: light-dark(oklch(0.2 0 0), oklch(0.92 0 0));
    max-width: min(24rem, calc(100vw - 2rem));

    &::backdrop {
      background: light-dark(oklch(0.2 0 0 / 0.35), oklch(0.05 0 0 / 0.55));
    }
  }
}
q-toast {
  display: contents;

  .stack {
    position: fixed;
    inset-block-end: 1rem;
    inset-inline-end: 1rem;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-end;
    pointer-events: none;
  }

  .toast-item {
    position: relative;
    display: grid;
    gap: 0.25rem;
    min-inline-size: 16rem;
    max-inline-size: min(calc(100vw - 2rem), 24rem);
    padding: 0.875rem 2.25rem 0.875rem 1rem;
    border-radius: 0.625rem;
    background-color: var(--color-neutral);
    color: var(--color-neutral-foreground);
    box-shadow: light-dark(
      oklch(0 0 0 / 0.12),
      oklch(0 0 0 / 0.4)
    );
    pointer-events: auto;
    animation: q-toast-enter 180ms ease-out;
  }

  .title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.3;
  }

  .description {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.4;
  }

  .dismiss {
    position: absolute;
    inset-block-start: 0.5rem;
    inset-inline-end: 0.5rem;
    display: grid;
    place-items: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: 0.375rem;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: 1;
    cursor: pointer;
  }

  .dismiss:hover {
    background-color: var(--color-overlay-hover);
  }

  .toast-item[tone="negative"] {
    background-color: var(--color-negative);
    color: var(--color-negative-foreground);
  }

  .toast-item[tone="warning"] {
    background-color: var(--color-warning);
    color: var(--color-warning-foreground);
  }

  .toast-item[tone="info"] {
    background-color: var(--color-info);
    color: var(--color-info-foreground);
  }
}

@keyframes q-toast-enter {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
q-table {
  user-select: none;
  font-size: 0.8125rem;
  line-height: 1.35;

  --padding-x: 0.75rem;
  --padding-y: 0.5rem;
  --border-color: light-dark(oklch(90% 0 0), oklch(25% 0 0));
  --muted: light-dark(oklch(90% 0 0), oklch(25% 0 0));
  --muted-foreground: light-dark(oklch(50% 0 0), oklch(60% 0 0));
  /* --background: light-dark(#f0f0f0, #1e1e1e); */
  /* --foreground: light-dark(#202020, #8c8c8c); */

  table {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    overflow: hidden;

    thead {
      tr {
        th {
          cursor: pointer;
          background-color: var(--muted);
          padding: var(--padding-y) var(--padding-x);
          border-inline-end: 1px solid var(--border-color);
          border-block-end: 1px solid var(--border-color);
          font-weight: 700;
          color: var(--muted-foreground);

          .th-content {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0.25rem;
          }

          .sort-icon {
            display: none;
          }

          &[data-sort="asc"] .sort-icon--asc {
            display: block;
          }

          &[data-sort="desc"] .sort-icon--desc {
            display: block;
          }

          &:last-child {
            border-inline-end: none;
          }
        }
      }
    }

    tbody {
      tr {
        td {
          padding: var(--padding-y) var(--padding-x);
          border-inline-end: 1px solid var(--border-color);
          border-block-end: 1px solid var(--border-color);

          &:last-child {
            border-inline-end: none;
          }
        }

        &:last-child td {
          border-block-end: none;
        }
      }
    }
  }
}
q-metadata {
  .metadata-list {
    display: grid;
    grid-template-columns: auto 1fr;
    justify-content: start;
    width: max-content;
    max-width: 100%;
    margin: 0;
    /* border: 1px solid light-dark(oklch(90% 0 0), oklch(25% 0 0)); */
    border-radius: 0.5rem;
    overflow: hidden;

    dt,
    dd {
      margin: 0;
      padding: 0.5rem 0.75rem;
      border-block-end: 1px solid light-dark(oklch(90% 0 0), oklch(25% 0 0));
    }

    dt {
      /* background-color: light-dark(oklch(96% 0 0), oklch(20% 0 0)); */
      color: light-dark(oklch(50% 0 0), oklch(60% 0 0));
      font-weight: 500;
      border-inline-end: 1px solid light-dark(oklch(90% 0 0), oklch(25% 0 0));
    }

    dd {
      color: light-dark(oklch(20% 0 0), oklch(92% 0 0));
      word-break: break-word;
    }

    dt:last-of-type,
    dd:last-of-type {
      border-block-end: none;
    }
  }

  &.variant-compact {
    .metadata-list {
      dt,
      dd {
        padding-block: 0.35rem;
      }
    }
  }
}

@container (max-width: 32rem) {
  q-metadata .metadata-list {
    grid-template-columns: 1fr;

    dt {
      border-inline-end: none;
      border-block-end: none;
      padding-block-end: 0.15rem;
    }

    dd {
      padding-block-start: 0;
      padding-block-end: 0.65rem;
    }
  }
}
.entity-detail-view,
.entity-form-view {
  container-type: inline-size;
  display: grid;
  gap: 1rem;
  color: light-dark(oklch(0.2 0 0), oklch(0.92 0 0));
}

.entity-detail-back,
.entity-form-back {
  color: light-dark(oklch(0.45 0.12 255), oklch(0.72 0.14 255));
  font-size: 0.875rem;
  text-decoration: none;

  &::before {
    content: "← ";
  }
}

.entity-detail-header,
.entity-form-header {
  display: grid;
  gap: 0.35rem;
}

.entity-detail-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.entity-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex-shrink: 0;
}

.entity-detail-title {
  display: grid;
  gap: 0.2rem;
  min-inline-size: 0;

  h1 {
    margin: 0;
    font-size: 1.5rem;
  }
}

.entity-detail-id {
  margin: 0;
  font-family: monospace;
  font-size: 0.8125rem;
  color: light-dark(oklch(0.5 0 0), oklch(0.65 0 0));
  overflow-wrap: anywhere;
}

.entity-form-header {
  h1 {
    margin: 0;
    font-size: 1.5rem;
  }
}

.entity-detail-status {
  color: light-dark(oklch(0.45 0 0), oklch(0.7 0 0));
}

.entity-detail-activity,
.entity-detail-section {
  display: grid;
  gap: 0.75rem;

  h2 {
    margin: 0;
    font-size: 1.125rem;
  }
}

.activity-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.activity-timeline-item {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 0.75rem 1rem;
  padding-block-end: 1.25rem;

  &:last-child {
    padding-block-end: 0;
  }
}

.activity-timeline-time {
  font-size: 0.8125rem;
  color: light-dark(oklch(0.5 0 0), oklch(0.65 0 0));
  white-space: nowrap;
  min-inline-size: 9rem;
}

.activity-timeline-track {
  position: relative;
  display: flex;
  justify-content: center;
  inline-size: 1rem;

  &::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 50%;
    translate: -50% 0;
    inline-size: 2px;
    background: light-dark(oklch(0.88 0 0), oklch(0.32 0 0));
  }
}

.activity-timeline-item:last-child .activity-timeline-track::before {
  inset-block-end: 50%;
}

.activity-timeline-dot {
  position: relative;
  z-index: 1;
  inline-size: 0.625rem;
  block-size: 0.625rem;
  margin-block-start: 0.2rem;
  border-radius: 50%;
  background: light-dark(oklch(0.55 0.14 255), oklch(0.72 0.14 255));
  border: 2px solid light-dark(oklch(0.99 0 0), oklch(0.22 0 0));
}

.activity-timeline-body {
  display: grid;
  gap: 0.25rem;
  min-inline-size: 0;
}

.activity-timeline-summary {
  margin: 0;
  line-height: 1.4;

  a {
    color: light-dark(oklch(0.45 0.12 255), oklch(0.72 0.14 255));
  }
}

.activity-timeline-field {
  font-family: monospace;
  font-size: 0.875em;
}

.activity-timeline-change {
  margin: 0;
  font-size: 0.875rem;
  color: light-dark(oklch(0.45 0 0), oklch(0.7 0 0));
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: baseline;
}

.activity-timeline-arrow {
  color: light-dark(oklch(0.6 0 0), oklch(0.55 0 0));
}

@container (max-width: 36rem) {
  .activity-timeline-item {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "time time"
      "track body";
  }

  .activity-timeline-time {
    grid-area: time;
    min-inline-size: 0;
  }

  .activity-timeline-track {
    grid-area: track;
  }

  .activity-timeline-body {
    grid-area: body;
  }
}

.entity-form-view {
  q-form {
    max-width: 28rem;
  }

  q-form form {
    padding: 1rem;
    border: 1px solid light-dark(oklch(0.85 0 0), oklch(0.35 0 0));
    border-radius: 0.5rem;
    background: light-dark(oklch(0.99 0 0), oklch(0.22 0 0));
  }
}
.entity-list-view {
  container-type: inline-size;
  display: grid;
  gap: 1rem;
  color: light-dark(oklch(0.2 0 0), oklch(0.92 0 0));

  .entity-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .entity-list-status {
    color: light-dark(oklch(0.45 0 0), oklch(0.7 0 0));
  }
}

@container (max-width: 40rem) {
  .entity-list-view .entity-list-header {
    flex-direction: column;
    align-items: stretch;
  }

  .entity-list-view .entity-list-header q-button {
    align-self: flex-end;
  }
}
.entity-token-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.entity-token {
  display: inline-flex;
  max-inline-size: 100%;

  a,
  span {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    border: 1px solid light-dark(oklch(0.86 0 0), oklch(0.38 0 0));
    font-size: 0.8125rem;
    line-height: 1.4;
    background: light-dark(oklch(0.96 0 0), oklch(0.26 0 0));
    color: light-dark(oklch(0.35 0 0), oklch(0.88 0 0));
    overflow-wrap: anywhere;
  }

  a {
    text-decoration: none;

    &:hover {
      background: light-dark(oklch(0.92 0.02 255), oklch(0.3 0.02 255));
      color: light-dark(oklch(0.4 0.1 255), oklch(0.82 0.12 255));
      border-color: light-dark(oklch(0.8 0.04 255), oklch(0.42 0.04 255));
    }
  }
}
.shell {
  --shell-sidebar-width: 14rem;
  color-scheme: light dark;
  display: grid;
  grid-template-rows: auto 1fr;
  min-block-size: 100dvb;
  color: light-dark(oklch(0.2 0 0), oklch(0.92 0 0));
  background-color: var(--color-canvas);
  container-type: inline-size;
  container-name: shell;

  .top-bar {
    display: grid;
    grid-template-columns: var(--shell-sidebar-width) 1fr;
    align-items: stretch;
    border-block-end: 1px solid light-dark(oklch(90% 0 0), oklch(30% 0 0));
    min-block-size: 3.25rem;
  }

  .top-bar-logo {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-inline-end: 1px solid light-dark(oklch(90% 0 0), oklch(30% 0 0));
    text-decoration: none;
  }

  .top-bar-logo-picture {
    display: block;
    inline-size: 100%;
    max-inline-size: 6.5rem;
  }

  .top-bar-logo-image {
    display: block;
    inline-size: 100%;
    block-size: auto;
  }

  .top-bar-page {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    min-inline-size: 0;
  }

  .top-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    inline-size: 100%;
    min-inline-size: 0;
  }

  .top-bar-main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-inline-size: 0;
  }

  .top-bar-back {
    color: light-dark(oklch(0.45 0.12 255), oklch(0.72 0.14 255));
    font-size: 0.875rem;
    text-decoration: none;
    white-space: nowrap;

    &::before {
      content: "← ";
    }
  }

  .top-bar-title-wrap {
    display: grid;
    gap: 0.125rem;
    min-inline-size: 0;
  }

  .top-bar-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .top-bar-meta {
    margin: 0;
    font-family: monospace;
    font-size: 0.75rem;
    color: light-dark(oklch(0.5 0 0), oklch(0.65 0 0));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .top-bar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex-shrink: 0;

    q-button {
      --button-size: 0.875em;
    }
  }

  .body {
    display: grid;
    grid-template-columns: var(--shell-sidebar-width) 1fr;
    min-block-size: 0;
  }

  .sidebar {
    display: flex;
    flex-direction: column;
    padding: 0.75rem 0.5rem;
    border-inline-end: 1px solid light-dark(oklch(90% 0 0), oklch(30% 0 0));
    min-block-size: 0;

    .menu {
      display: flex;
      flex: 1;
      flex-direction: column;
      gap: 1.25rem;
      min-block-size: 0;
      overflow: auto;
    }

    .menu-group {
      display: flex;
      flex-direction: column;
      gap: 0.125rem;
    }

    .menu-group-label {
      margin: 0;
      padding: 0.25rem 0.625rem 0.125rem;
      font-size: 0.6875rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: light-dark(oklch(0.58 0 0), oklch(0.55 0 0));
    }

    a {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      color: inherit;
      text-decoration: none;
      padding: 0.375rem 0.625rem;
      border-radius: 0.5rem;
      font-size: 0.8125rem;
      line-height: 1.25;
    }

    .menu-icon {
      flex-shrink: 0;
      opacity: 0.55;
    }

    .menu-label {
      min-inline-size: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: light-dark(oklch(0.52 0 0), oklch(0.62 0 0));
    }

    a:hover {
      background: light-dark(oklch(95% 0 0), oklch(26% 0 0));
    }

    a.is-active {
      background: light-dark(oklch(93% 0 0), oklch(28% 0 0));
    }

    a.is-active .menu-label {
      color: light-dark(oklch(0.38 0 0), oklch(0.78 0 0));
    }

    a.is-active .menu-icon {
      opacity: 0.78;
    }
  }

  .sidebar-footer {
    display: grid;
    gap: 0.75rem;
    margin-block-start: auto;
    padding-block-start: 1rem;
    border-block-start: 1px solid light-dark(oklch(90% 0 0), oklch(30% 0 0));
  }

  .sidebar-user {
    display: grid;
    gap: 0.125rem;
    min-inline-size: 0;
  }

  .sidebar-user-name {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sidebar-user-email {
    margin: 0;
    font-size: 0.8125rem;
    color: light-dark(oklch(0.5 0 0), oklch(0.65 0 0));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .main {
    padding: 1rem;
    min-block-size: 0;
    overflow: auto;
  }

  @container shell (max-width: 40rem) {
    .top-bar {
      grid-template-columns: 1fr;
    }

    .top-bar-logo {
      border-inline-end: none;
      border-block-end: 1px solid light-dark(oklch(90% 0 0), oklch(30% 0 0));
    }

    .top-bar-inner {
      flex-direction: column;
      align-items: stretch;
    }

    .top-bar-actions {
      justify-content: flex-end;
    }

    .body {
      grid-template-columns: 1fr;
    }

    .sidebar {
      border-inline-end: none;
      border-block-end: 1px solid light-dark(oklch(90% 0 0), oklch(30% 0 0));
    }
  }
}